@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Gambarino';
  src: url('../fonts/Gambarino-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: #f5f8fb; }
body { margin: 0; color: #000100; font-family: 'Satoshi', sans-serif; -webkit-font-smoothing: antialiased; }
nav.site-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: flex-end; padding: 57px 60px 0; font-family: 'Satoshi', sans-serif; font-size: 16px; }
.logo-mark { position: absolute; left: 60px; top: 27px; z-index: 11; font-family: 'Cookie', cursive; font-size: 120px; line-height: 1; color: #81d83d; text-decoration: none; }
.site-nav ul { margin: 0; padding: 0; list-style: none; display: flex; gap: 42px; }
.site-nav ul a { text-decoration: none; color: #000100; font-weight: 400; line-height: 1.757; }
.nav-toggle { display: none; align-items: center; justify-content: flex-end; width: 44px; height: 44px; padding: 0; background: none; border: none; cursor: pointer; color: #000100; }
.nav-toggle svg { display: block; width: 18px; height: 14px; }
.mobile-break { display: none; }
.story { overflow-x: clip; --scene-scale: 1; --art-scale: 1; --case-gutter: clamp(28px, 11vw, 160px); }
.composition { width: min(100%, 1440px); margin-inline: auto; position: relative; }
.copy { margin: 0; font-size: clamp(26px, 3.264vw, 47px); line-height: 1.34; font-weight: 400; letter-spacing: -0.025em; }
.left { margin-left: 11.111%; }
.right { margin-left: 32.083%; margin-right: 9%; }
.inset { margin-left: 28.125%; margin-right: 8%; }
.beat { display: flex; align-items: center; }
.opening { height: calc(100svh + 24px); display: block; padding-top: calc(50svh - var(--opening-copy-half, 32px)); }
.opening .copy { padding-right: 8%; }
.changed { padding-top: clamp(320px, 25vw, 360px); }
.amazing { padding-top: clamp(230px, 32.847vw, 473px); }
.home { padding-top: clamp(220px, 27.778vw, 400px); }
.guide { padding-top: clamp(190px, 19.514vw, 281px); }
.fresh { padding-top: clamp(230px, 32.917vw, 474px); }
.home-copy { margin-left: 36.6%; margin-right: 12%; }
.amazing-group, .guide-group { width: fit-content; position: relative; max-width: 77.8%; }
.amazing-group { max-width: calc(88.889% - clamp(55px, 8.194vw, 118px) - 12px); }
.guide-group { margin-left: 21.111%; max-width: 70%; }
.vacation { position: absolute; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; line-height: 1; transform-origin: center; }
.vacation-icon, .reaction-motion { display: block; transform-origin: center; }
.sunrise { left: 23.72%; bottom: calc(100% + 1.6vw); font-size: clamp(56px, 8.333vw, 120px); }
.beach { left: 100%; top: -18%; font-size: clamp(55px, 8.194vw, 118px); }
.landscape { left: 58.15%; top: calc(100% + 3.2vw); font-size: clamp(43px, 6.22vw, 90px); }
.reaction { position: absolute; transform-origin: center; }
.reaction img { display: block; width: 100%; height: auto; }
.heart { left: calc(100% - 16px); bottom: calc(100% + 12px); width: clamp(44px, 5.625vw, 81px); }
.like { left: calc(100% + 18px); top: 80%; width: clamp(42px, 4.5vw, 65px); }
.heart-small { left: calc(100% - 80px); bottom: calc(100% + 50px); width: clamp(27px, 2.64vw, 38px); }
.like-small { left: calc(100% + 30px); bottom: calc(100% + 120px); width: clamp(24px, 2.36vw, 34px); }
.heart-tiny { left: calc(100% - 22px); top: calc(100% + 48px); width: clamp(22px, 2.083vw, 30px); }

.plan { height: calc(678px * var(--scene-scale)); }
.plan-sticky { height: 100%; position: relative; }
.map-position { position: absolute; left: 50%; top: calc(339px * var(--scene-scale)); width: calc(1121px * var(--scene-scale)); height: calc(678px * var(--scene-scale)); transform: translate(-50%, -50%); }
.map-motion { width: 100%; height: 100%; }
.map-scene { position: relative; width: 1121px; height: 678px; transform: scale(var(--scene-scale)); transform-origin: top left; }
.map-window { position: absolute; inset: 0; }
.plan.is-prepared .map-window { transform: translateZ(0); will-change: transform; }
.plan.is-prepared .card-motion { will-change: transform, opacity; }
.card-motion { position: relative; transform-origin: center; }
.card-small { width: 305px; height: 128px; }
.card-large { width: 555px; height: 224.513px; }
.cards-warming .card-motion { opacity: .001 !important; transform: none !important; }
.map-shadow { position: absolute; left: 35px; top: 104px; width: 1057px; height: 594px; background: #0000002e; filter: blur(32px); }
.map-toolbar { height: 47.869px; position: relative; background: #ffffffcc; border-radius: 21.759px 21.759px 0 0; }
.map-toolbar img { display: block; position: absolute; left: 23.5px; top: 18.277px; }
.map-image { display: block; width: 1121px; height: 630.127px; object-fit: cover; border-radius: 0 0 10.444px 10.444px; position: relative; }
.review { position: absolute; display: flex; flex-direction: column; background: #fff; border: 0; border-radius: 16px; box-shadow: 0 2px 6px #0000000a, 0 12px 28px #00000012; }
.review > img { display: block; align-self: flex-start; }
.review-placement { position: absolute; transform-origin: top left; }
.small-placement { left: -106px; top: 136px; }
.large-placement { left: var(--large-card-x, 814px); top: 227px; }
.review-small { left: 0; top: 0; width: 305px; height: 128px; padding: 24px; gap: 16px; }
.review-large { left: 0; top: 0; width: 555px; height: 224.513px; padding: 20px; gap: 24px; }
.review-user { display: flex; gap: 16px; align-items: center; }
.avatar-placeholder { display: block; width: 40px; height: 40px; border-radius: 50%; background: #00897b; flex-shrink: 0; }
.review-detail { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.review i { display: block; background: #f4f4fa; border-radius: 20px; height: 12px; }
.review-small .review-detail i:first-child { height: 10.444px; }
.review-detail i:last-child { width: 85px; height: 8px; }
.review-small .review-detail i:last-child { width: 74px; height: 6.963px; }
.review-avatar { width: 40px; height: 40px; object-fit: cover; border-radius: 20px; }
.review-large .review-user { gap: 12px; width: 214px; }
.review-lines { display: flex; flex-direction: column; gap: 14px; }
.review-lines > div { display: flex; gap: 12px; }
.review-lines i { width: 162px; flex-shrink: 0; }
.review-lines i:last-child { flex: 1; }
.review-lines > div:last-child i:nth-child(1) { width: 107px; }
.review-lines > div:last-child i:nth-child(2) { width: 148px; }
.review-lines > div:last-child i:nth-child(3) { width: 118px; }

.explaining { height: 290svh; margin-top: clamp(48px, 8.75vw, 126px); }
.explaining-sticky { height: 100svh; position: sticky; top: 0; }
.explaining-composition { height: 100%; }
.fixing { position: absolute; left: 19.653%; top: 50%; transform: translateY(-50%); width: 60.764%; z-index: 2; }
.emphasis-context { opacity: calc(1 - var(--emphasis, 0) * .8); transition: opacity 180ms ease; }
.notes { position: absolute; left: 1.18%; top: calc(50% + 160px * var(--art-scale)); width: 540px; height: 390px; transform: scale(var(--art-scale)); transform-origin: top left; }
.note-entry { position: absolute; width: 272.379px; height: 278px; }
.note-entry:nth-child(1) { left: 29px; top: 0; }
.note-entry:nth-child(2) { left: 240px; top: 58px; }
.note { height: 278px; width: 272.379px; }
.pink { transform: rotate(12.09deg); }
.yellow { transform: rotate(-12.57deg); }
.note-paper { height: 254px; position: relative; z-index: 1; }
.pink .note-paper { background: #ffe4e6; }
.yellow .note-paper { background: #fef3c7; }
.note-bottom { height: 24px; position: relative; overflow: clip; }
.note-bottom::before, .note-bottom::after { content: ''; position: absolute; left: 11.2px; right: 11.2px; height: 11px; bottom: 18.33px; background: #12121229; filter: blur(5px); transform: rotate(-2.87deg) skewX(-2.52deg); }
.note-bottom::after { bottom: 13.33px; background: #12121217; filter: blur(10px); transform: none; }
.chat { position: absolute; right: calc(-31px * var(--art-scale)); top: calc(50% - 300px * var(--art-scale)); width: 475px; height: 564px; transform: scale(var(--art-scale)); transform-origin: top right; }
.chat-item { position: absolute; }
.chat-item > img, .attachment { display: block; transform: rotate(4.3deg); }
.chat-short { right: 0; top: 18px; }
.chat-long { right: 10px; top: 64px; }
.chat-attachment { right: 24px; top: 144px; }
.attachment { position: relative; width: 292.017px; height: 220.19px; border-radius: 28.26px; overflow: hidden; }
.attachment img { width: 292.017px; height: 220.19px; object-fit: cover; display: block; }
.attachment span { position: absolute; inset: 0; background: #e7eaed; }
.chat-reply { left: 8px; top: 396px; }
.chat-last { right: 37px; top: 498px; }
.outro { min-height: 0; padding-top: 33svh; padding-bottom: 0; }
.outro .composition { width: 100%; }
.outro-copy { margin-inline: var(--case-gutter); }
.question { margin: clamp(240px, 33.333vw, 480px) var(--case-gutter) 0; text-align: left; text-wrap: balance; }
.case-study { --wide-w: min(1034px, calc(100vw - 382px - 24px)); --wide-x: max(382px, calc(50vw - var(--wide-w) / 2)); --content-w: calc(var(--wide-w) * .673); --content-x: calc(var(--wide-x) + var(--wide-w) * .327); --case-entry-gap: calc(94svh - 2 * var(--question-half, 32px)); margin-top: 0; }
.case-study > .site-footer { padding: 64px 0 40px; font: 400 14px/1.5 'Satoshi', sans-serif; color: #000100; }
.site-footer-inner { width: var(--wide-w); margin-left: var(--wide-x); }
.footer-mark { color: #81d83d; font-weight: 700; }
.cs-header { padding: var(--case-entry-gap) var(--case-gutter) 0; }
.cs-tagline { margin: 0; max-width: min(580px, 100%); font-family: 'Gambarino', serif; font-size: clamp(26px, 2.4vw, 32px); font-weight: 400; line-height: 1.402; letter-spacing: .04em; }
.cs-meta { display: flex; flex-wrap: wrap; gap: 24px clamp(36px, 16vw, 222px); margin-top: 48px; }
.cs-meta .label, .cs-meta .value { font-family: 'Satoshi', sans-serif; font-weight: 400; font-size: 12px; letter-spacing: .48px; }
.cs-meta .label { text-transform: uppercase; color: #9d9e9e; }
.cs-meta .value { color: #000100; white-space: nowrap; margin-top: 8px; line-height: 1.6; }
.cs-cover { margin: 96px 0 128px; width: 100%; }
.cs-cover--film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #faf7f2; }
.cs-cover--film { position: relative; }
.cs-cover--film video { cursor: pointer; }
.cs-film-start, .cs-film-sound { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; color: #faf7f2; background: rgba(26,26,26,.55); cursor: pointer; }
.cs-film-start { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.cs-film-sound { right: 16px; bottom: 16px; width: 40px; height: 40px; opacity: 0; transition: opacity .18s; }
.cs-film-start[hidden], .cs-film-sound[hidden] { display: none; }
.cs-cover--film:hover .cs-film-sound, .cs-cover--film:focus-within .cs-film-sound, .cs-cover--film.is-paused .cs-film-sound, .cs-cover--film.controls-visible .cs-film-sound { opacity: 1; }
.cs-film-start:focus-visible, .cs-film-sound:focus-visible { outline: 2px solid #faf7f2; outline-offset: 3px; }
.cs-film-sound .sound-muted, .cs-film-sound[aria-pressed="true"] .sound-waves { display: none; }
.cs-film-sound[aria-pressed="true"] .sound-muted { display: block; }
.cs-intro, .cs-body-section { width: var(--content-w); margin-left: var(--content-x); padding-bottom: clamp(64px, 10vw, 128px); font-weight: 300; font-size: 16px; line-height: 1.631; }
.cs-intro p, .cs-body-section p { margin: 0; }
.cs-intro p + p, .cs-body-section p + p { margin-top: 24px; }
.cs-heading { margin: 0 0 24px; font-family: 'Gambarino', serif; font-size: 24px; font-weight: 400; line-height: 1.631; }
.cs-heading--subsection { display: flex; align-items: center; gap: .5em; }
.cs-heading--subsection::before { content: ""; width: .25em; height: .25em; flex: none; background: currentColor; }
.cs-body-section p.cs-perspective-transition { margin-top: clamp(40px, 5vw, 64px); }
.cs-body-section--chapter { padding-top: clamp(32px, 5vw, 64px); }
.cs-body-section--chapter > .cs-heading { font-size: clamp(28px, 2.4vw, 32px); }
.cs-opening { display: flow-root; position: relative; }
.case-site-header { position: absolute; top: max(0px, calc(var(--case-entry-gap) - 180px)); left: 0; right: 0; }
.cs-map-demo, .cs-list-demo, .cs-route-demo, .cs-notion-demo { width: var(--wide-w); margin: 80px 0 80px calc(var(--wide-x) - var(--content-x)); }
.cs-map-demo iframe, .cs-list-demo iframe, .cs-route-demo iframe, .cs-notion-demo iframe { display: block; width: 100%; height: auto; min-height: 360px; aspect-ratio: 2360 / 1424; border: 0; background: #e9edf1; }

@media (min-width: 701px) {
  .cs-notion-demo iframe { aspect-ratio: 2360 / 949.333; }
}

.motion-ready [data-copy] { opacity: var(--copy-opacity, 0); }
.motion-ready [data-step] { opacity: 0; }
.motion-ready [data-card] { opacity: 0; transform-origin: center; }
.motion-ready .note-entry { opacity: 0; transform: translateY(45px) scale(.85); }
.motion-ready .notes.is-visible .note-entry { animation: note-arrive 620ms cubic-bezier(.2,.75,.25,1) both; }
.motion-ready .notes.is-visible .note-entry:nth-child(2) { animation-delay: 180ms; }
.motion-ready .chat-item { opacity: 0; transform: translateY(18px); }
@keyframes note-arrive { to { opacity: 1; transform: none; } }

@media (max-width: 1079px) {
  .case-study { --pm: clamp(28px, 5vw, 56px); --wide-w: min(860px, calc(100vw - 2 * var(--pm))); --wide-x: calc(50vw - var(--wide-w) / 2); --content-w: min(660px, calc(100vw - 2 * var(--pm))); --content-x: calc(50vw - var(--content-w) / 2); }
}

@media (max-width: 700px) {
  .cs-map-demo iframe, .cs-list-demo iframe, .cs-route-demo iframe, .cs-notion-demo iframe { height: clamp(480px, 50svh, 560px); aspect-ratio: auto; }
  .story { --case-gutter: 24px; }
  .copy { font-size: clamp(25px, 5.8vw, 32px); letter-spacing: -.025em; text-wrap: balance; }
  .mobile-break { display: inline; }
  .left, .right, .inset, .home-copy { margin-left: 24px; margin-right: 24px; }
  .opening .copy { padding-right: 0; }
  .beat:not(.opening) { min-height: 85svh; padding-top: 0; }
  .beat.changed { padding-top: 225px; padding-bottom: 18svh; }
  .amazing .composition { transform: translateY(-20svh); }
  .beat.home { min-height: 0; margin-top: -5svh; }
  .beat.guide { min-height: 0; padding-top: clamp(240px, 44svh, 380px); }
  .guide .composition { transform: none; }
  .amazing-group, .guide-group { margin-left: 24px; margin-right: 24px; width: fit-content; }
  .amazing-group { max-width: calc(100% - 48px - clamp(55px, 8.194vw, 118px) - 8px); }
  .guide-group { max-width: calc(100% - 96px); }
  .small-placement { left: -16px; top: 100px; transform: scale(var(--small-card-ratio)); }
  .large-placement { left: var(--large-card-x); top: 320px; transform: scale(var(--large-card-ratio)); }
  .sunrise { bottom: calc(100% + 28px); left: 17%; }
  .landscape { top: calc(100% + 30px); }
  .explaining { margin-top: calc(clamp(48px, 8.75vw, 126px) - 25svh); }
  .fixing { left: 24px; width: calc(100% - 48px); font-size: clamp(25px, 5.8vw, 32px); text-wrap: pretty; }
  .notes { left: 2%; top: calc(50% - var(--fixing-half, 67px) - 28px - 390px * var(--art-scale)); }
  .chat { right: 0; top: calc(50% + var(--fixing-half, 67px) + 28px); }
  .question { margin-top: 320px; text-align: left; text-wrap: initial; }
  .outro { padding-top: 18svh; }
  .outro-break { display: none; }
  .cs-tagline { font-size: clamp(22px, 6.5vw, 26px); }
  .cs-cover { margin-top: clamp(36px, 10vw, 96px); margin-bottom: clamp(52px, 14vw, 128px); }
}

@media (max-width: 600px) {
  .case-site-header { top: max(0px, calc(var(--case-entry-gap) - 120px)); }
  .case-study { --pm: clamp(18px, 6vw, 26px); --wide-w: calc(100vw - 2 * var(--pm)); --wide-x: var(--pm); --content-w: var(--wide-w); --content-x: var(--pm); }
  .logo-mark { left: 24px; top: 20px; font-size: 80.55px; }
  nav.site-nav { left: auto; right: 24px; top: 24px; padding: 0; }
  .nav-toggle { display: flex; }
  .site-nav ul { display: none; }
  .site-nav ul.is-open { display: flex; flex-direction: column; gap: 16px; position: absolute; right: 0; background: #f5f8fb; padding: 16px 20px; box-shadow: 0 8px 24px #0000001f; }
}

@media (prefers-reduced-motion: reduce) {
  .emphasis-context { opacity: .2; transition: none; }
  .plan.is-prepared .map-window { transform: none; will-change: auto; }
  .plan.is-prepared .card-motion { will-change: auto; }
  .motion-ready [data-copy], .motion-ready [data-step], .motion-ready .note-entry, .motion-ready .chat-item { opacity: 1; transform: none; animation: none; transition: none; }
  .motion-ready [data-card] { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
  .cs-map-demo iframe, .cs-list-demo iframe, .cs-route-demo iframe, .cs-notion-demo iframe { height: clamp(560px, 65svh, 640px); }
}