/* Motion is progressive: only site.js adds .js, after setting up its observers.
   All animated properties below are transform, opacity or clip-path. */
:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); }
body { overflow-x: clip; }
.site-header .brand img { filter: brightness(0); }
.site-header { background: transparent; backdrop-filter: none; transition: transform .45s var(--motion-ease); }
.site-header::before { content: ''; position: absolute; inset: 0; background: var(--paper); opacity: .97; z-index: -1; }
.js .site-header::before { opacity: .88; }
.js .site-header.is-compact::before { background: #fbfaf7e8; backdrop-filter: blur(12px); }
.js .site-header.is-compact { transform: translateY(-14px); }
.header-inner > * { transition: transform .45s var(--motion-ease); }
.js .is-compact .header-inner > * { transform: translateY(7px); }
.js .is-compact .header-inner > .brand { transform: translateY(7px) scale(.92); }
.js .site-header.menu-open.is-compact, .js .site-header.menu-open .header-inner > *, .js .site-header.menu-open .header-inner > .brand { transform: none; }
.scroll-progress { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 40; pointer-events: none; background: linear-gradient(90deg, var(--gold), var(--mint-dark)); transform: scaleX(0); transform-origin: left; }
.js .scroll-progress { display: block; }
/* Text retains its original line breaks and emphasis. */
.hero-line { display: block; width: max-content; max-width: 100%; clip-path: inset(-15% -10% -18% -10%); }
.hero-line-text { display: inline-block; }
.js .hero-line-text { transform: translateY(140%); transition: transform 1s var(--motion-ease); }
.js .hero-line:nth-child(2) .hero-line-text { transition-delay: .13s; }
.js .hero-line:nth-child(3) .hero-line-text { transition-delay: .26s; }
.js .hero-ready .hero-line-text { transform: none; }
.js .mint-highlight::before { transform-origin: left; transform: rotate(-2deg) scaleX(0); transition: transform .8s var(--motion-ease) .95s; }
.js .hero-ready .mint-highlight::before { transform: rotate(-2deg) scaleX(1); }
.word-mask { display: inline-block; vertical-align: bottom; clip-path: inset(-15% -4% -17% -4%); }
.word-inner { display: inline-block; }
.js .word-heading .word-inner { transform: translateY(125%); opacity: 0; transition: transform .8s var(--motion-ease), opacity .6s; transition-delay: var(--word-delay, 0ms); }
.js .word-heading.is-visible .word-inner { transform: none; opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(26px); transition: transform .85s var(--motion-ease), opacity .7s; transition-delay: var(--reveal-delay, 0ms); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal:focus-within { opacity: 1; transform: none; transition-delay: 0s; }
/* A separate media layer keeps future photos inside the same reveal/parallax. */
.ph { isolation: isolate; }
.ph-media { position: absolute; inset: -1px; background: inherit; z-index: -1; pointer-events: none; }
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.js .photo-reveal { clip-path: inset(0 0 100% 0 round 12px); transition: clip-path 1.15s var(--motion-ease); }
.js .photo-reveal.is-visible { clip-path: inset(0 0 0 0 round 12px); }
.js .photo-reveal .ph-media, .js .photo-reveal > img { transform: scale(1.09); transition: transform 1.5s var(--motion-ease); }
.js .photo-reveal.is-visible .ph-media, .js .photo-reveal.is-visible > img { transform: scale(1); }
.js .hero-photo { transform: translateY(var(--photo-y, 0px)); }
.hero-visual { perspective: 1000px; }
.hero-sticker { transform: translate3d(var(--sticker-x, 0px), var(--sticker-y, 0px), 0) rotate(5deg) rotateX(var(--sticker-rx, 0deg)) rotateY(var(--sticker-ry, 0deg)); }
.js .hero-sticker { animation: sticker-float 6s ease-in-out infinite; animation-play-state: paused; }
.js .hero-in-view .hero-sticker { animation-play-state: running; }
@keyframes sticker-float {
  0%, 100% { transform: translate3d(var(--sticker-x, 0px), var(--sticker-y, 0px), 0) rotate(4deg) rotateX(var(--sticker-rx, 0deg)) rotateY(var(--sticker-ry, 0deg)); }
  50% { transform: translate3d(var(--sticker-x, 0px), calc(var(--sticker-y, 0px) - 7px), 0) rotate(6deg) rotateX(var(--sticker-rx, 0deg)) rotateY(var(--sticker-ry, 0deg)); }
}
/* Two identical strips: a transform loop, with no cloned accessible text. */
.marquee { overflow: hidden; position: relative; border-block: 1px solid var(--line); padding: 17px 0; margin-bottom: 28px; color: var(--mint-dark); background: #eef3ed; }
.marquee-track { display: flex; width: max-content; }
.marquee-copy { flex: none; min-width: 100vw; white-space: nowrap; font-size: clamp(15px, 1.5vw, 22px); font-weight: 500; letter-spacing: -.4px; padding-right: 24px; }
.marquee-toggle { position: absolute; inset: 0 0 0 auto; width: 48px; border: 0; border-left: 1px solid var(--line); background: #eef3ed; color: var(--mint-dark); font-size: 16px; }
.stat-number [data-count] { display: inline-block; min-width: var(--count-width, 0px); }
/* Shadows are painted once and faded in on their own layer. */
.benefit-card { position: relative; isolation: isolate; }
.benefit-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 18px 32px #3e1a2212; opacity: 0; transition: opacity .35s; pointer-events: none; z-index: -1; }
.benefit-icon, .benefit-symbol { transform-origin: left center; transition: transform .6s var(--motion-ease); }
.benefit-card:hover { box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .benefit-card:hover, .js .benefit-card.reveal.is-visible:hover { transform: translateY(-7px); transition-delay: 0s; }
  .benefit-card:hover::after { opacity: 1; }
  .benefit-card:hover .benefit-icon { transform: translateY(-3px) rotate(-10deg) scale(1.1); }
  .benefit-card:hover .benefit-symbol { transform: translate(4px, -4px); }
}
/* A single continuous line, horizontal on desktop, vertical on phones. */
.journey-enhanced { position: relative; --journey-progress: 0; }
.journey-enhanced::before, .journey-enhanced::after { content: ''; position: absolute; left: 0; right: 0; top: 62px; height: 2px; background: #b7c9ba; pointer-events: none; }
.journey-enhanced::after { background: var(--mint-dark); transform: scaleX(var(--journey-progress)); transform-origin: left; }
.journey-enhanced .step-number { border: 0; position: relative; isolation: isolate; }
.step-value { display: inline-block; font: inherit; transition: transform .5s var(--motion-ease); }
.step-number::before { content: ''; position: absolute; left: -8px; top: -8px; width: 66px; height: 56px; background: var(--mint); border-radius: 8px; opacity: 0; transform: scale(.85); transition: opacity .35s, transform .5s var(--motion-ease); z-index: -1; }
.journey-enhanced li { position: relative; isolation: isolate; }
.journey-enhanced .is-current .step-number::before { opacity: 1; transform: scale(1); }
.journey-enhanced .is-current .step-value { transform: translateY(-3px) scale(1.08); }
.journey-enhanced .is-complete .step-value { color: var(--mint-dark); }
/* Native touch scrolling keeps the platform's inertia. Mouse drag has a small coast. */
.js .reviews-track { scrollbar-width: none; cursor: grab; }
.js .reviews-track::-webkit-scrollbar { display: none; }
.js .reviews-track.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.review-navigation { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 8px; }
.review-dots { display: flex; }
.review-dot { display: grid; place-items: center; width: 32px; height: 36px; border: 0; background: transparent; }
.review-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--mint-dark); opacity: .25; transition: transform .3s, opacity .3s; }
.review-dot[aria-current="true"]::before { opacity: 1; transform: scale(1.6); }
.review-autoplay { width: 36px; height: 36px; background: transparent; border: 1px solid var(--line); border-radius: 50%; color: var(--wine); }
/* Fill layers do not move neighbouring text or change layout. */
.role-list > a { position: relative; isolation: isolate; }
.role-list > a::before { content: ''; position: absolute; inset: 0; background: var(--mint); z-index: -1; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--motion-ease); }
.role-list > a:hover, .role-list > a:focus-visible { background: transparent; padding-inline: 0; }
.role-list > a:hover::before, .role-list > a:focus-visible::before { transform: scaleX(1); }
.role-list > a:hover .role-arrow, .role-list > a:focus-visible .role-arrow { transform: translate(5px, -5px); }
.role-arrow { transition: transform .45s var(--motion-ease); }
.button, .round-button, .round-link { position: relative; isolation: isolate; }
.button::before, .round-button::before, .round-link::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--mint); border-radius: inherit; clip-path: inset(100% 0 0 0 round 6px); transition: clip-path .45s var(--motion-ease); pointer-events: none; }
.button-dark::before { background: #5b2b36; }
.button:hover::before, .button:focus-visible::before, .round-button:not(:disabled):hover::before, .round-link:hover::before { clip-path: inset(0 0 0 0 round 6px); }
.button-dark:hover { background: var(--wine); box-shadow: none; transform: none; }
.round-button:hover:not(:disabled), .round-link:hover { background: transparent; border-color: var(--line); }
.js .magnetic { transform: translate3d(var(--magnet-x, 0px), var(--magnet-y, 0px), 0); transition: transform .3s var(--motion-ease); }
.js .magnetic:disabled { transform: none; }
.field { position: relative; isolation: isolate; }
.field::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: var(--mint-dark); transform: scaleX(0); transform-origin: left; opacity: 0; transition: transform .4s var(--motion-ease), opacity .25s; pointer-events: none; }
.field:focus-within::after { transform: scaleX(1); opacity: 1; }
.field:focus-within { color: var(--mint-dark); }
/* The supplied handler creates this block; no change to its submission flow. */
.js .hr-form-done { animation: success-in .65s var(--motion-ease) both; }
.hr-form-done::before { content: '✓'; }
.hr-form-done { position: relative; }
.success-mark { width: 60px; height: 60px; position: relative; margin-bottom: 12px; display: grid; place-items: center; border-radius: 50%; background: var(--mint); color: var(--mint-dark); flex: none; }
.hr-form-done:has(.success-mark)::before { display: none; }
.success-mark svg { width: 30px; height: 30px; clip-path: inset(0 0 0 0); }
.js .success-mark svg { animation: check-in .65s var(--motion-ease) .25s both; }
@keyframes success-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes check-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* Graceful fallback if the enhancement script was never downloaded. */
html:not(.js) .menu-toggle { display: none; }
html:not(.js) .mobile-menu[hidden] { display: flex !important; }
@media (min-width: 641px) { html:not(.js) .mobile-menu[hidden] { display: none !important; } }
@media (max-width: 900px) and (min-width: 641px) { .journey-enhanced::before, .journey-enhanced::after { top: 56px; } }
@media (max-width: 640px) {
  .js .site-header.is-compact { transform: translateY(-10px); }
  .js .is-compact .header-inner > * { transform: translateY(5px); }
  .js .is-compact .header-inner > .brand { transform: translateY(5px) scale(.94); }
  .js .site-header.is-compact::before { backdrop-filter: blur(6px); }
  .marquee { padding-block: 13px; margin-bottom: 18px; }
  .marquee-copy { font-size: 15px; }
  .journey-enhanced::before, .journey-enhanced::after { top: 22px; left: 22px; right: auto; width: 2px; height: var(--journey-line-height, 75%); }
  .journey-enhanced::after { transform: scaleY(var(--journey-progress)); transform-origin: top; }
  .journey-list.journey-enhanced li::before { display: none; }
  .step-number::before { left: -2px; top: 0; width: 47px; height: 44px; }
  .journey-enhanced .step-number { align-self: start; background: #eef3ed; }
  .benefit-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .word-heading .word-inner, .js .hero-line-text { opacity: 1; transform: none; }
  .js .photo-reveal { clip-path: none; }
  .js .photo-reveal .ph-media, .js .photo-reveal > img, .js .hero-photo, .js .magnetic { transform: none; }
  .js .mint-highlight::before { transform: rotate(-2deg); }
  .hero-sticker { transform: rotate(5deg); }
  .marquee-track { transform: none !important; }
  .marquee-toggle, .review-autoplay { display: none; }
  .js .journey-enhanced::after { transform: none; }
  .journey-enhanced .is-current .step-value, .life-card:hover .ph,
  .js .benefit-card.reveal.is-visible:hover, .benefit-card:hover,
  .benefit-card:hover .benefit-icon, .benefit-card:hover .benefit-symbol,
  .role-list > a:hover .role-arrow, .role-list > a:focus-visible .role-arrow,
  .js .site-header.is-compact, .js .is-compact .header-inner > *,
  .js .is-compact .header-inner > .brand { transform: none; }
}