:root {
  --motion-fast: 180ms;
  --motion-medium: 420ms;
  --motion-slow: 760ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-ease-soft: cubic-bezier(.2, .7, .2, 1);
}

html { scroll-padding-top: 110px; }
body { overflow-x: hidden; }
section[id] { scroll-margin-top: 110px; }

/* The header gains depth only after the visitor starts scrolling. */
header {
  transition: background-color var(--motion-medium) ease,
              border-color var(--motion-medium) ease,
              box-shadow var(--motion-medium) ease,
              backdrop-filter var(--motion-medium) ease;
}
header.is-scrolled {
  background: rgba(255, 255, 255, .9);
  border-bottom-color: rgba(23, 63, 54, .12);
  box-shadow: 0 12px 34px rgba(24, 35, 31, .09);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
}
.logo {
  transition: opacity var(--motion-fast) ease, transform var(--motion-fast) ease;
}
.logo:hover { opacity: .82; transform: translateY(-1px); }
.logo:active { transform: translateY(0) scale(.98); }
nav a { position: relative; border-bottom: 0; transition: color var(--motion-fast) ease; }
nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 2px;
  height: 1px;
  background: var(--lime);
  transition: right var(--motion-medium) var(--motion-ease);
}
nav a:hover::after,
nav a:focus-visible::after { right: 0; }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(128, 189, 83, .45);
  outline-offset: 4px;
}

/* Hero choreography: calm, editorial and deliberately staggered. */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  pointer-events: none;
  opacity: .35;
  filter: blur(1px);
  animation: ambient-drift 11s ease-in-out infinite alternate;
}
.hero::before {
  width: 170px;
  height: 170px;
  left: -90px;
  top: 10%;
  background: rgba(128, 189, 83, .18);
}
.hero::after {
  width: 100px;
  height: 100px;
  left: 43%;
  bottom: -50px;
  background: rgba(23, 63, 54, .09);
  animation-delay: -4s;
}
.heroCopy,
.heroImage { position: relative; z-index: 1; }
.motion-enabled .heroCopy > *,
.motion-enabled .heroImage {
  opacity: 0;
  translate: 0 28px;
}
.motion-enabled .heroImage { translate: 52px 0; scale: .975; }
.motion-enabled.motion-start .heroCopy > *,
.motion-enabled.motion-start .heroImage {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition: opacity var(--motion-slow) var(--motion-ease),
              translate var(--motion-slow) var(--motion-ease),
              scale 1s var(--motion-ease);
}
.motion-enabled.motion-start .heroCopy > :nth-child(1) { transition-delay: 70ms; }
.motion-enabled.motion-start .heroCopy > :nth-child(2) { transition-delay: 150ms; }
.motion-enabled.motion-start .heroCopy > :nth-child(3) { transition-delay: 240ms; }
.motion-enabled.motion-start .heroCopy > :nth-child(4) { transition-delay: 330ms; }
.motion-enabled.motion-start .heroCopy > :nth-child(5) { transition-delay: 420ms; }
.motion-enabled.motion-start .heroImage { transition-delay: 180ms; }
.heroImage { overflow: hidden; }
.heroImage img {
  transition: transform 900ms var(--motion-ease), filter 500ms ease;
  transform-origin: center;
}
.heroImage b { animation: badge-float 4.5s ease-in-out infinite; }

/* JS adds this class only after the item is ready to be observed, so content
   stays visible if scripts are unavailable. Individual translate/scale
   properties keep reveal motion independent from card and image hover motion. */
.motion-enabled .reveal-item {
  --reveal-x: 0px;
  --reveal-y: 46px;
  --parallax-y: 0px;
  opacity: 0;
  translate: var(--reveal-x) calc(var(--reveal-y) + var(--parallax-y));
  transition: opacity var(--motion-slow) var(--motion-ease),
              translate var(--motion-slow) var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms);
  will-change: opacity, translate;
}
.motion-enabled .reveal-item.reveal-left { --reveal-x: -72px; --reveal-y: 0px; }
.motion-enabled .reveal-item.reveal-right { --reveal-x: 72px; --reveal-y: 0px; }
.motion-enabled .reveal-item.is-visible {
  --reveal-x: 0px;
  --reveal-y: 0px;
  opacity: 1;
  will-change: auto;
}

/* Reveal opacity/translation and component interaction states share one
   transition declaration on elements that own both kinds of motion. */
.motion-enabled .storyGrid article.reveal-item,
.motion-enabled .detailGrid article.reveal-item,
.motion-enabled .reviewCards article.reveal-item {
  transition: opacity var(--motion-slow) var(--motion-ease),
              translate var(--motion-slow) var(--motion-ease),
              transform var(--motion-medium) var(--motion-ease),
              box-shadow var(--motion-medium) ease,
              border-color var(--motion-medium) ease;
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms, 0ms;
}
.motion-enabled .faq details.reveal-item {
  transition: opacity var(--motion-slow) var(--motion-ease),
              translate var(--motion-slow) var(--motion-ease),
              background-color 300ms ease;
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms;
}
.motion-enabled .contactCard.reveal-item {
  transition: opacity var(--motion-slow) var(--motion-ease),
              translate var(--motion-slow) var(--motion-ease),
              transform var(--motion-medium) var(--motion-ease),
              box-shadow var(--motion-medium) ease;
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms;
}
.motion-enabled .final .buy.reveal-item {
  transition: opacity var(--motion-slow) var(--motion-ease),
              translate var(--motion-slow) var(--motion-ease),
              transform var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) ease,
              background-color var(--motion-fast) ease,
              box-shadow var(--motion-medium) ease;
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms, 0ms, 0ms;
}

/* Cards and image moments mirror the reference site's lift, glow and zoom. */
.storyGrid article,
.detailGrid article,
.reviewCards article {
  position: relative;
  transition: transform var(--motion-medium) var(--motion-ease),
              box-shadow var(--motion-medium) ease,
              border-color var(--motion-medium) ease;
}
.storyGrid article::after,
.reviewCards article::after {
  content: '';
  position: absolute;
  left: 32px;
  right: calc(100% - 32px);
  bottom: 24px;
  height: 2px;
  background: var(--lime);
  transition: right 520ms var(--motion-ease);
}
.lifestyle { overflow: hidden; }
.lifestylePicture {
  --parallax-y: 0px;
  transition: opacity var(--motion-slow) var(--motion-ease),
              translate 90ms linear,
              transform 900ms var(--motion-ease),
              filter 500ms ease;
  transform-origin: center;
}
.motion-enabled .lifestylePicture.reveal-item {
  --reveal-x: 0px;
  --reveal-y: 0px;
  clip-path: inset(0 10% 0 0);
  transition: opacity var(--motion-slow) var(--motion-ease),
              clip-path 900ms var(--motion-ease),
              translate 90ms linear,
              transform 900ms var(--motion-ease),
              filter 500ms ease;
}
.motion-enabled .lifestylePicture.reveal-item.is-visible {
  clip-path: inset(0 0 0 0);
  transition: opacity var(--motion-slow) var(--motion-ease),
              clip-path 900ms var(--motion-ease),
              translate 90ms linear,
              transform 900ms var(--motion-ease),
              filter 500ms ease;
}
.setImage { overflow: hidden; }
.setImage img {
  transition: transform 900ms var(--motion-ease), filter 500ms ease;
  transform-origin: center;
}

/* Buttons get a restrained light sweep and tactile response. */
.buy {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--motion-fast) ease,
              background-color var(--motion-fast) ease,
              transform var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-medium) ease;
}
.buy::before {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.24) 50%, transparent 70%);
  translate: -115% 0;
  transition: translate 650ms var(--motion-ease);
}
.buy span { transition: transform var(--motion-fast) var(--motion-ease); }
.buy:active { transform: translateY(0) scale(.985); }

.sizes div,
footer a {
  transition: color var(--motion-fast) ease, translate var(--motion-fast) var(--motion-ease);
}
.sizes strong,
.sizes span { transition: color var(--motion-fast) ease, translate var(--motion-fast) var(--motion-ease); }

/* Native FAQ interaction retains keyboard semantics and gains subtle motion. */
details { transition: background-color 300ms ease; }
details[open] { background: #f8faf6; }
summary span { transition: transform 320ms var(--motion-ease); }
details[open] summary span { transform: rotate(45deg); }
details[open] p { animation: answer-in 420ms var(--motion-ease) both; }

.contactCard { transition: box-shadow var(--motion-medium) ease, transform var(--motion-medium) var(--motion-ease); }
.contactCard:focus-within { box-shadow: 0 30px 80px rgba(24, 35, 31, .13); }
.care input,
.care textarea {
  transition: border-color var(--motion-fast) ease,
              box-shadow var(--motion-fast) ease,
              background-color var(--motion-fast) ease;
}
.care input:focus,
.care textarea:focus {
  outline: none;
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(128, 189, 83, .16);
  background: #fff;
}

/* Accessible animated mobile navigation. */
.menu {
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
}
.menu span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 4px auto;
  background: var(--ink);
  transition: transform 300ms var(--motion-ease), opacity 200ms ease;
}
.menu[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.menu[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Preserve the complete-set image inside its own grid column. */
.set > * { min-width: 0; }
.setImage { position: relative; isolation: isolate; contain: paint; }
.setImage img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 680px;
  margin: auto;
  object-fit: contain;
}
.setCopy { position: relative; z-index: 2; background: #fff; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .heroImage:hover img { transform: scale(1.035); filter: saturate(1.035); }
  .storyGrid article:hover,
  .detailGrid article:hover,
  .reviewCards article:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 54px rgba(24, 35, 31, .13);
    z-index: 2;
  }
  .storyGrid article:hover::after,
  .reviewCards article:hover::after { right: 32px; }
  .lifestyle:hover .lifestylePicture { transform: scale(1.025); filter: saturate(1.04); }
  .setImage:hover img { transform: scale(1.035); filter: saturate(1.025); }
  .buy:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(23, 63, 54, .2); }
  .buy:hover::before { translate: 115% 0; }
  .buy:hover span { transform: translate(3px, -3px); }
  .sizes div:hover strong,
  .sizes div:hover span { color: #5f8e43; translate: 5px 0; }
  footer a:hover { color: #5f8e43; translate: 4px 0; }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 96px; }
  section[id] { scroll-margin-top: 96px; }
  .motion-enabled nav {
    display: flex;
  }
  html.no-js header {
    height: auto;
    min-height: 88px;
    flex-wrap: wrap;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  html.no-js nav {
    display: flex;
    position: static;
    width: 100%;
    flex-flow: row wrap;
    gap: 10px 24px;
    padding: 10px 0 4px;
    box-shadow: none;
  }
  .motion-enabled nav {
    visibility: hidden;
    opacity: 0;
    translate: 0 -12px;
    pointer-events: none;
    box-shadow: 0 24px 45px rgba(24, 35, 31, .1);
    transition: opacity 260ms ease, translate 320ms var(--motion-ease), visibility 0s linear 320ms;
  }
  .motion-enabled nav:not(.open) {
    transition: none;
  }
  .motion-enabled nav.open {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
    pointer-events: auto;
    transition-delay: 0s;
  }
  nav a { width: fit-content; }
  .menu { display: none; }
  .motion-enabled .menu { display: grid; }
  .motion-enabled .reveal-item.reveal-left,
  .motion-enabled .reveal-item.reveal-right { --reveal-x: 0px; --reveal-y: 34px; }
  .setImage { padding: 42px 6vw; }
  .setImage img { max-height: 520px; }
  .setCopy { padding-top: 60px; }
}

@media (max-width: 560px) {
  html { scroll-padding-top: 84px; }
  section[id] { scroll-margin-top: 84px; }
  .hero::before { width: 110px; height: 110px; }
  .motion-enabled nav { top: 76px; }
  .motion-enabled .reveal-item { --reveal-y: 28px; }
  .setImage { padding: 28px 5vw; }
  .setImage img { max-height: 390px; }
  .setCopy { padding-top: 45px; }
}

@keyframes ambient-drift {
  from { transform: translate3d(0, 0, 0) scale(.95); }
  to { transform: translate3d(22px, -18px, 0) scale(1.08); }
}
@keyframes badge-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes answer-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
  .motion-enabled .heroCopy > *,
  .motion-enabled .heroImage,
  .motion-enabled .reveal-item {
    opacity: 1 !important;
    translate: 0 0 !important;
    scale: 1 !important;
  }
  .logo:hover,
  .logo:active,
  .buy:active,
  .menu[aria-expanded] span { transform: none !important; }
}