@property --pillar-field { syntax: "<color>"; inherits: false; initial-value: #c4baa3; }
:root { --field: #c4baa3; --section-field: #e9e3da; --ivory: #eee9df; --ease: cubic-bezier(.22, 1, .36, 1); }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; background: var(--field); color: var(--ivory); font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif TC", "Songti TC", serif; }
button { color: inherit; font: inherit; }
.experience { position: relative; width: 100%; height: 100svh; min-height: 520px; overflow: hidden; background: var(--field); isolation: isolate; }
.water, .particles, .shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.water { z-index: -3; opacity: 1; }
.particles { z-index: 8; pointer-events: none; }
.shade { z-index: -2; pointer-events: none; background: transparent; }
.masthead, .footer { position: absolute; left: clamp(24px, 12.4vw, 226px); right: clamp(24px, 12.4vw, 226px); z-index: 3; display: flex; justify-content: space-between; pointer-events: none; }
.masthead { top: clamp(24px, 3.5vw, 54px); opacity: 0; transform: translateY(-8px); transition: opacity 1200ms 2600ms ease, transform 1200ms 2600ms var(--ease); }
.masthead__word { margin: 0; color: rgba(238, 233, 223, .6); font-family: Georgia, "Times New Roman", serif; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: lowercase; }
.hero { position: relative; width: 100%; height: 100%; }
.hero__copy { position: absolute; left: 50%; top: 50%; z-index: 4; display: flex; align-items: center; opacity: 0; transform: translate(-50%, -50%); filter: blur(1px); transition: opacity 680ms ease, filter 680ms ease; }
.hero__title { margin: 0; writing-mode: vertical-rl; text-orientation: upright; }
.hero__title { color: rgba(255, 255, 255, .94); font-size: clamp(14px, .95vw, 18px); font-weight: 400; letter-spacing: .22em; line-height: 1.8; text-shadow: 0 2px 18px rgba(0, 0, 0, .58); }
.footer { bottom: clamp(20px, 2.7vw, 42px); align-items: flex-end; opacity: 0; transition: opacity 1200ms 2800ms ease; }
.footer p { margin: 0; }
.footer__count { margin-left: auto !important; color: rgba(238, 233, 223, .38); font-family: Georgia, "Times New Roman", serif; font-size: 9px; letter-spacing: .16em; }
.experience.is-ready .masthead, .experience.is-ready .footer, .experience.is-copy-visible .hero__copy { opacity: 1; }
.experience.is-copy-visible .hero__copy { filter: blur(0); }
.experience.is-ready .masthead, .experience.is-ready .footer { transform: none; }
.pillars { --pillar-field: var(--field); position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr); min-height: 118svh; margin-top: -1px; padding: clamp(110px, 12vw, 190px) clamp(26px, 8vw, 150px) clamp(110px, 13vw, 210px); overflow: hidden; isolation: isolate; background: linear-gradient(180deg, var(--field) 0, var(--pillar-field) clamp(130px, 22svh, 230px), var(--pillar-field) 100%); color: #37352f; transition: --pillar-field 1500ms cubic-bezier(.22, 1, .36, 1); }
.pillars::before, .pillars::after { position: absolute; inset: -12% -10%; z-index: 0; content: ""; opacity: 0; pointer-events: none; mix-blend-mode: multiply; will-change: transform, opacity; transition: opacity 1800ms ease; }
.pillars::before { background: radial-gradient(ellipse 17% 10% at 5% 14%, rgba(52, 63, 41, .28) 0 48%, transparent 64%), radial-gradient(ellipse 20% 12% at 18% 7%, rgba(52, 63, 41, .24) 0 46%, transparent 63%), radial-gradient(ellipse 15% 9% at 28% 20%, rgba(52, 63, 41, .22) 0 44%, transparent 64%), radial-gradient(ellipse 19% 11% at 89% 18%, rgba(52, 63, 41, .25) 0 47%, transparent 65%), radial-gradient(ellipse 14% 9% at 76% 31%, rgba(52, 63, 41, .20) 0 45%, transparent 64%), linear-gradient(116deg, transparent 0 15%, rgba(59, 66, 46, .22) 15.5% 16.5%, transparent 17.3% 100%); filter: blur(12px); transform-origin: 12% 4%; animation: tree-shadow-sway 5.8s ease-in-out infinite alternate; }
.pillars::after { background: radial-gradient(ellipse 22% 13% at 102% 48%, rgba(52, 63, 41, .26) 0 45%, transparent 63%), radial-gradient(ellipse 16% 10% at 90% 62%, rgba(52, 63, 41, .22) 0 45%, transparent 64%), radial-gradient(ellipse 13% 8% at 70% 78%, rgba(52, 63, 41, .18) 0 46%, transparent 65%), linear-gradient(55deg, transparent 0 69%, rgba(59, 66, 46, .20) 69.5% 70.5%, transparent 71.3% 100%); filter: blur(17px); transform-origin: 95% 55%; animation: tree-shadow-drift 7.4s ease-in-out infinite alternate; }
.pillars.is-revealed::before { opacity: .72; }
.pillars.is-revealed::after { opacity: .58; }
.pillars > * { position: relative; z-index: 1; }
@keyframes tree-shadow-sway { 0% { transform: translate3d(-4.5%, -1.5%, 0) rotate(-2.2deg) scale(1.03); } 48% { transform: translate3d(1.8%, 1.2%, 0) rotate(.9deg) scale(1.09); } 100% { transform: translate3d(5.2%, -2%, 0) rotate(2.4deg) scale(1.04); } }
@keyframes tree-shadow-drift { 0% { transform: translate3d(4.6%, -1.7%, 0) rotate(2deg) scale(1.03); } 55% { transform: translate3d(-1.8%, 2%, 0) rotate(-.8deg) scale(1.1); } 100% { transform: translate3d(-5.4%, .4%, 0) rotate(-2.2deg) scale(1.04); } }
.pillars__visual { position: relative; display: flex; flex-direction: column; min-height: 0; padding-right: clamp(32px, 6vw, 104px); gap: clamp(8px, .75vw, 14px); opacity: 0; filter: blur(20px); clip-path: inset(48% 48% round 50%); transform: scale(1.045); transition: opacity 1800ms ease, filter 2400ms var(--ease), clip-path 2600ms var(--ease), transform 2800ms var(--ease); }
.pillars__visual::after { position: absolute; inset: 6% 4% 12% 0; z-index: 3; border-radius: 50%; background: repeating-radial-gradient(circle at 48% 42%, transparent 0 7%, rgba(233, 227, 218, .38) 7.7%, transparent 9.2% 14%); content: ""; opacity: 0; pointer-events: none; transform: scale(.18); filter: blur(4px); }
.pillars__image { margin: 0; overflow: hidden; background: #d4d0c6; }
.pillars__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 460ms ease, transform 1200ms var(--ease); }
.pillars__image.is-changing img { opacity: .18; transform: scale(1.025); }
.pillars__image--main { height: clamp(430px, 37vw, 590px); border-radius: 0 clamp(46px, 5vw, 78px) 0 0; }
.pillars__image--detail { position: relative; width: 100%; height: clamp(430px, 37vw, 590px); border: 0; border-radius: 0 0 clamp(46px, 5vw, 78px) 0; }
.pillars__content { display: flex; flex-direction: column; min-width: 0; padding-top: clamp(90px, 9vw, 150px); }
.pillars__heading, .pillars__story, .pillars__tabs { opacity: 0; filter: blur(9px); transform: translateY(38px); transition: opacity 1300ms ease, filter 1700ms var(--ease), transform 1700ms var(--ease); }
.pillars.is-revealed .pillars__visual { opacity: 1; filter: blur(0); clip-path: inset(0 round 0); transform: scale(1); }
.pillars.is-revealed .pillars__visual::after { animation: pillar-water-ripple 2700ms 100ms var(--ease) both; }
.pillars.is-revealed .pillars__heading { opacity: 1; filter: blur(0); transform: none; transition-delay: 320ms; }
.pillars.is-revealed .pillars__story { opacity: 1; filter: blur(0); transform: none; transition-delay: 620ms; }
.pillars.is-revealed .pillars__tabs { opacity: 1; filter: blur(0); transform: none; transition-delay: 880ms; }
@keyframes pillar-water-ripple { 0% { opacity: 0; transform: scale(.18); filter: blur(11px); } 24% { opacity: .5; } 72% { opacity: .17; } 100% { opacity: 0; transform: scale(1.32); filter: blur(3px); } }
.pillars__heading { --heading-drop: clamp(70px, 7vw, 112px); position: relative; min-height: clamp(310px, 34vw, 520px); }
.pillars__eyebrow { position: absolute; top: calc(18% + var(--heading-drop)); left: 18%; margin: 0; color: rgba(55, 53, 47, .62); font: italic 12px/1.2 Georgia, "Times New Roman", serif; transform: rotate(-42deg); }
.pillars__heading h2 { position: absolute; top: var(--heading-drop); left: 48%; margin: 0; writing-mode: vertical-rl; color: #2f2d29; font-size: clamp(22px, 1.65vw, 31px); font-weight: 400; letter-spacing: .24em; }
.pillars__line { position: absolute; top: calc(10% + var(--heading-drop)); left: 9%; width: 72%; height: 1px; background: rgba(55, 53, 47, .48); transform: rotate(-42deg); transform-origin: left center; }
.pillars__story { align-self: center; width: min(82%, 530px); margin-top: clamp(12px, 2vw, 34px); }
.pillars__story p { margin: 0; font-size: clamp(14px, 1vw, 17px); font-weight: 400; letter-spacing: .12em; line-height: 2.25; }
.pillars__story .pillars__kicker { margin-bottom: 18px; color: #292722; font-size: clamp(16px, 1.25vw, 21px); }
.pillars__tabs { display: grid; grid-template-columns: repeat(4, minmax(70px, 1fr)); width: min(92%, 620px); margin: clamp(62px, 7vw, 112px) auto 0; border-left: 1px solid rgba(55, 53, 47, .42); }
.pillar-tab { position: relative; display: flex; min-height: 150px; padding: 22px 12px; align-items: center; justify-content: center; gap: 9px; border: 0; border-right: 1px solid rgba(55, 53, 47, .42); background: transparent; color: rgba(55, 53, 47, .5); cursor: pointer; transition: color 320ms ease, background 320ms ease; }
.pillar-tab::after { position: absolute; right: 20%; bottom: 0; left: 20%; height: 1px; background: currentColor; content: ""; opacity: 0; transform: scaleX(.4); transition: opacity 320ms ease, transform 320ms ease; }
.pillar-tab:hover, .pillar-tab:focus-visible, .pillar-tab.is-active { color: #2f2d29; background: rgba(255, 255, 255, .22); outline: none; }
.pillar-tab.is-active::after { opacity: 1; transform: scaleX(1); }
.pillar-tab__title { writing-mode: vertical-rl; font-size: clamp(17px, 1.3vw, 23px); letter-spacing: .16em; }
.pillar-tab__en { writing-mode: vertical-rl; font: 11px/1 Georgia, "Times New Roman", serif; letter-spacing: .08em; }
.service-accordion { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; background: var(--section-field); color: #383630; }
.service-accordion::before, .service-accordion::after, .service-accordion__shadow { position: absolute; z-index: 0; content: ""; pointer-events: none; mix-blend-mode: multiply; will-change: transform; }
.service-accordion::before { inset: -32% -14% -10% -8%; background: radial-gradient(ellipse 19% 10% at 12% 17%, rgba(61, 70, 49, .23) 0 46%, transparent 66%), radial-gradient(ellipse 14% 9% at 26% 31%, rgba(61, 70, 49, .19) 0 46%, transparent 67%), radial-gradient(ellipse 24% 12% at 87% 13%, rgba(61, 70, 49, .25) 0 43%, transparent 65%), radial-gradient(ellipse 17% 9% at 73% 38%, rgba(61, 70, 49, .18) 0 45%, transparent 66%), linear-gradient(119deg, transparent 0 18%, rgba(64, 70, 51, .16) 18.5% 19.4%, transparent 20% 100%); filter: blur(15px); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%); transform-origin: 10% 0; animation: service-shadow-sway 6.2s ease-in-out infinite alternate; }
.service-accordion::after { inset: 7% -16% -20% 5%; background: radial-gradient(ellipse 25% 13% at 103% 44%, rgba(58, 68, 46, .24) 0 44%, transparent 64%), radial-gradient(ellipse 18% 11% at 89% 67%, rgba(58, 68, 46, .2) 0 45%, transparent 66%), radial-gradient(ellipse 13% 8% at 62% 84%, rgba(58, 68, 46, .16) 0 45%, transparent 67%), linear-gradient(57deg, transparent 0 71%, rgba(60, 67, 49, .16) 71.4% 72.2%, transparent 72.8% 100%); filter: blur(19px); transform-origin: 100% 52%; animation: service-shadow-drift 8s ease-in-out infinite alternate; }
.service-accordion__shadow { inset: 0; background: radial-gradient(ellipse 12% 7% at 36% 22%, rgba(72, 78, 58, .14) 0 45%, transparent 66%), radial-gradient(ellipse 16% 9% at 49% 73%, rgba(72, 78, 58, .13) 0 43%, transparent 65%), radial-gradient(ellipse 11% 6% at 67% 45%, rgba(72, 78, 58, .12) 0 45%, transparent 67%); filter: blur(12px); animation: service-shadow-flicker 4.8s ease-in-out infinite alternate; }
@keyframes service-shadow-sway { 0% { transform: translate3d(-5%, -2%, 0) rotate(-2.2deg) scale(1.04); } 50% { transform: translate3d(1.5%, 2%, 0) rotate(.8deg) scale(1.1); } 100% { transform: translate3d(6%, -1%, 0) rotate(2.5deg) scale(1.03); } }
@keyframes service-shadow-drift { 0% { transform: translate3d(5%, -2%, 0) rotate(2deg) scale(1.04); } 48% { transform: translate3d(-2%, 2.5%, 0) rotate(-.7deg) scale(1.11); } 100% { transform: translate3d(-6%, 0, 0) rotate(-2.4deg) scale(1.03); } }
@keyframes service-shadow-flicker { 0% { opacity: .45; transform: translate3d(-2%, 0, 0) scale(1); } 55% { opacity: .78; transform: translate3d(2%, -2%, 0) scale(1.08); } 100% { opacity: .52; transform: translate3d(4%, 1%, 0) scale(1.02); } }
.service-accordion__inner { position: relative; z-index: 1; display: flex; width: min(100% - clamp(48px, 11vw, 190px), 1420px); min-height: 100svh; margin: 0 auto; padding: clamp(38px, 4.5vw, 70px) 0 clamp(42px, 5vw, 76px); }
.service-item { display: grid; grid-template-columns: 0fr minmax(72px, 8vw); min-width: 0; border-left: 1px solid rgba(56, 54, 48, .42); transition: flex 900ms var(--ease), grid-template-columns 900ms var(--ease), background 600ms ease; flex: 0 0 clamp(88px, 9vw, 140px); }
.service-item:nth-child(1) { order: 3; }
.service-item:nth-child(2) { order: 2; }
.service-item:nth-child(3) { order: 1; }
.service-item:first-child { border-right: 1px solid rgba(56, 54, 48, .42); }
.service-item.is-open { grid-template-columns: 1fr minmax(82px, 9vw); flex: 1 1 auto; background: transparent; }
.service-item__heading { grid-column: 2; grid-row: 1; margin: 0; min-width: 0; font: inherit; }
.service-item__trigger { display: flex; width: 100%; height: 100%; min-height: 60svh; padding: 0 clamp(13px, 1.5vw, 24px) 16px; flex-direction: column; align-items: center; justify-content: flex-start; gap: 18px; border: 0; background: transparent; color: #3e3b35; cursor: pointer; }
.service-item__trigger:hover, .service-item__trigger:focus-visible { background: rgba(255, 255, 255, .16); outline: none; }
.service-item__title { writing-mode: vertical-rl; text-orientation: upright; font-size: clamp(20px, 1.65vw, 28px); font-weight: 400; letter-spacing: .18em; line-height: 1.55; }
.service-item__symbol { margin-top: auto; font-family: Georgia, serif; font-size: 27px; font-weight: 300; }
.service-item__panel { grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden; padding: 0 clamp(42px, 6vw, 100px); opacity: 0; transform: translateX(26px); transition: opacity 650ms 180ms ease, transform 800ms 120ms var(--ease); }
.service-item.is-open .service-item__panel { opacity: 1; transform: none; }
.service-item__panel[hidden] { display: block; visibility: hidden; padding-right: 0; padding-left: 0; }
.service-item__panel p { height: clamp(300px, 47svh, 470px); margin: 0; writing-mode: vertical-rl; text-orientation: upright; color: rgba(56, 54, 48, .7); font-size: clamp(14px, 1.08vw, 18px); letter-spacing: .16em; line-height: 2.15; }
.service-item__panel { display: flex; height: 60svh; max-height: 640px; align-items: flex-start; justify-content: center; gap: clamp(18px, 2.5vw, 40px); }
.service-item__panel .service-item__lead { color: #35332e; font-size: clamp(18px, 1.45vw, 25px); line-height: 1.8; }
noscript { position: fixed; inset: auto 1rem 1rem; z-index: 20; padding: .8rem 1rem; background: #fff; color: #222; }
@media (max-width: 960px) { .pillars { grid-template-columns: 1fr; padding: 110px 24px; } .pillars__visual { min-height: 0; padding-right: 0; } .pillars__image--main, .pillars__image--detail { width: 100%; height: min(82vw, 620px); } .pillars__content { padding-top: 40px; } .pillars__heading { min-height: 330px; } .pillars__story { width: min(92%, 560px); } .service-accordion__inner { width: calc(100% - 48px); } .service-item { flex-basis: 78px; } .service-item.is-open { grid-template-columns: 1fr 74px; } .service-item__panel { padding: 0 28px; gap: 26px; } }
@media (max-width: 720px) { .experience { min-height: 460px; } .masthead, .footer { left: 24px; right: 24px; } .hero__title { font-size: 14px; letter-spacing: .16em; } .footer__count { display: none; } .pillars { padding-top: 72px; } .pillars__image--main, .pillars__image--detail { height: 96vw; } .pillars__heading { --heading-drop: 28px; min-height: 300px; margin-top: 36px; } .pillars__heading h2 { left: 58%; font-size: 21px; } .pillars__line { left: 4%; width: 74%; } .pillars__eyebrow { left: 10%; font-size: 10px; } .pillars__story { width: 100%; margin-top: 12px; } .pillars__story p { font-size: 14px; line-height: 2; } .pillars__tabs { width: 100%; margin-top: 54px; } .pillar-tab { min-height: 132px; padding: 16px 6px; gap: 5px; } .pillar-tab__title { font-size: 16px; letter-spacing: .08em; } .pillar-tab__en { font-size: 9px; } }
@media (max-width: 720px) { .service-accordion__inner { display: flex; width: calc(100% - 36px); padding: 70px 0; flex-direction: column; } .service-item, .service-item.is-open { display: block; order: initial; border-right: 0; border-bottom: 1px solid rgba(56, 54, 48, .35); border-left: 0; } .service-item:first-child { order: 1; border-top: 1px solid rgba(56, 54, 48, .35); border-right: 0; } .service-item:nth-child(2) { order: 2; } .service-item:nth-child(3) { order: 3; } .service-item__trigger { min-height: 0; padding: 22px 8px; flex-direction: row; justify-content: space-between; } .service-item__title { writing-mode: horizontal-tb; font-size: 18px; } .service-item__symbol { margin: 0; } .service-item__panel { display: block; height: auto; max-height: 0; padding: 0 10px; opacity: 0; transition: max-height 800ms var(--ease), opacity 400ms ease, padding 800ms var(--ease); } .service-item.is-open .service-item__panel { max-height: 500px; padding: 26px 10px 40px; opacity: 1; } .service-item__panel[hidden] { padding: 0 10px; } .service-item__panel p { writing-mode: horizontal-tb; font-size: 14px; line-height: 2; } .service-item__panel .service-item__lead { margin-bottom: 16px; font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0ms !important; } .particles { display: none; } .pillars::before, .pillars::after, .service-accordion::before, .service-accordion::after, .service-accordion__shadow { animation: none !important; } }