/* MOTION LP TEMPLATE — original demo layout. No third-party CSS/fonts. */
:root {
  --bg: #f6f3ec;
  --surface: #fffdf8;
  --soft: #ece7dd;
  --ink: #242a25;
  --muted: #6d746f;
  --accent: #807e66;
  --accent-ink: #f9f6ee;
  --line: rgba(36,42,37,.17);
  --shadow: 0 30px 70px rgba(35,40,33,.1);
  --font-display: "Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",Georgia,serif;
  --font-body: -apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --duration: 950ms;
  --ease: cubic-bezier(.22,1,.36,1);
}
:root[data-theme="sage"] { --bg:#f0f3ef; --surface:#fcfefa; --soft:#e1e8df; --ink:#21382d; --muted:#687971; --accent:#547460; --accent-ink:#fff; --line:rgba(33,56,45,.18); }
:root[data-theme="night"] { --bg:#151d1a; --surface:#222b27; --soft:#29342f; --ink:#f5f3eb; --muted:#abb6ad; --accent:#c9ae89; --accent-ink:#19231f; --line:rgba(245,243,235,.2); --shadow:0 30px 70px rgba(0,0,0,.22); }
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:86px; }
body { margin:0; overflow-x:hidden; color:var(--ink); background:var(--bg); font:400 15px/1.9 var(--font-body); -webkit-font-smoothing:antialiased; }
body.no-scroll { overflow:hidden; }
button, a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
img, video { display:block; max-width:100%; }
img { width:100%; height:100%; object-fit:cover; }
figure, blockquote, h1,h2,h3,p { margin:0; }
::selection { background:var(--accent); color:var(--accent-ink); }
.skip-link { position:fixed; left:12px; top:-65px; background:#fff; color:#222; padding:10px 18px; z-index:100; }
.skip-link:focus { top:8px; }
.container { max-width:1240px; margin:0 auto; padding-inline:clamp(22px,5vw,68px); }
.kicker { display:flex; align-items:center; gap:14px; font-size:10px; font-weight:650; line-height:1.6; letter-spacing:.24em; text-transform:uppercase; }
.kicker::before { content:""; width:25px; height:1px; background:var(--accent); flex:none; }
.serif { font-family:var(--font-display); font-weight:400; letter-spacing:.055em; }
.multiline { white-space:pre-line; }
.section { position:relative; isolation:isolate; scroll-margin-top:82px; }
.section-pad { padding-block:clamp(95px,12vw,180px); }
.section-index { font-size:12px; letter-spacing:.17em; color:var(--accent); }
.section-header { display:flex; align-items:start; justify-content:space-between; gap:24px; margin-bottom:clamp(36px,6vw,72px); }
.section-header-main { max-width:760px; }
.section-header .kicker { margin:14px 0 30px; }
.section-heading { font:400 clamp(32px,4.4vw,64px)/1.52 var(--font-display); letter-spacing:.07em; }
.section-lead { max-width:500px; margin-top:24px; color:var(--muted); font-size:14px; line-height:2.1; }
.round-link { display:inline-flex; gap:35px; align-items:center; justify-content:space-between; min-height:56px; border-bottom:1px solid currentColor; font-size:12px; letter-spacing:.12em; transition:gap .25s ease; }
.round-link:hover { gap:44px; }
.arrow { font-family:var(--font-body); font-size:17px; line-height:1; }
/* Header */
.site-header { position:absolute; z-index:30; top:0; left:0; width:100%; background:transparent; }
.site-header-inner { height:95px; padding-inline:clamp(22px,5vw,68px); max-width:1440px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.brand { display:flex; flex-direction:column; flex:none; line-height:1.12; }
.brand-name { font:500 22px/1.1 var(--font-display); letter-spacing:.19em; }
.brand-sub { font-size:7px; letter-spacing:.33em; margin-top:8px; font-weight:600; }
.desktop-nav { display:flex; align-items:center; gap:clamp(16px,2.35vw,36px); margin-left:auto; }
.desktop-nav a { font-size:11px; line-height:2; letter-spacing:.04em; opacity:.8; transition:opacity .2s; white-space:nowrap; }
.desktop-nav a:hover { opacity:1; }
.header-actions { display:flex; align-items:center; gap:14px; }
.header-link { border:1px solid var(--ink); padding:9px 16px; font-size:10px; font-weight:600; letter-spacing:.08em; white-space:nowrap; transition:background .2s,color .2s; }
.header-link:hover { background:var(--ink); color:var(--surface); }
.motion-toggle { background:none; border:0; padding:9px 0; font-size:10px; white-space:nowrap; color:var(--ink); opacity:.75; }
.motion-toggle:hover { opacity:1; }
.mobile-menu-toggle { display:none; border:1px solid var(--line); border-radius:50%; width:42px; height:42px; background:var(--surface); color:var(--ink); font-size:19px; line-height:1; }
.mobile-menu { display:none; }
/* Hero */
.hero { overflow:clip; min-height:min(830px,100svh); min-height:max(670px,100svh); display:grid; grid-template-columns:53% 47%; background:var(--bg); }
.hero-copy { position:relative; display:flex; align-items:center; padding:155px 8.2vw 110px max(5vw,calc((100vw - 1260px)/2 + 68px)); }
.hero-copy-inner { width:100%; max-width:610px; }
.hero .kicker { margin-bottom:36px; }
.hero-title { font:400 clamp(39px,4.35vw,70px)/1.5 var(--font-display); letter-spacing:.08em; }
.hero-lead { font-size:clamp(14px,1.3vw,18px); font-weight:500; margin-top:30px; letter-spacing:.08em; }
.hero-description { color:var(--muted); white-space:pre-line; line-height:2.2; margin-top:19px; font-size:13px; }
.hero-links { display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px; margin-top:37px; }
.btn { min-height:56px; display:inline-flex; align-items:center; justify-content:center; gap:24px; padding:13px 25px; background:var(--ink); color:var(--surface); font-size:12px; letter-spacing:.09em; transition:background .25s,color .25s,transform .25s; border:1px solid var(--ink); }
.btn:hover { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); transform:translateY(-2px); }
.btn-plain { font-size:12px; border-bottom:1px solid var(--ink); padding-block:12px; }
.hero-media { position:relative; overflow:clip; background:var(--soft); min-height:600px; }
.hero-media::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(30,35,24,.04),transparent 28%,rgba(30,35,24,.08)); }
.hero-media-inner { position:absolute; inset:0; transform:scale(1.035); will-change:transform; }
.hero-media img, .hero-media video { height:100%; width:100%; object-fit:cover; }
.hero-media-note { position:absolute; z-index:2; bottom:40px; left:38px; padding:7px 0; color:#fffdf8; mix-blend-mode:difference; font-size:10px; letter-spacing:.2em; }
.hero-scroll { position:absolute; left:max(5vw,calc((100vw - 1260px)/2 + 68px)); bottom:46px; display:flex; gap:16px; align-items:center; color:var(--muted); font-size:9px; letter-spacing:.22em; }
.hero-scroll::after { content:""; width:60px; height:1px; background:var(--accent); }
/* Statement */
.statement { background:var(--surface); }
.statement-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:clamp(40px,8vw,140px); }
.statement-index { margin-top:15px; }
.statement-copy { max-width:760px; }
.statement h2 { font:400 clamp(36px,4.2vw,63px)/1.7 var(--font-display); letter-spacing:.065em; }
.statement-description { margin-top:40px; max-width:560px; white-space:pre-line; color:var(--muted); font-size:14px; line-height:2.55; }
.statement-side { font-size:9px; letter-spacing:.2em; color:var(--accent); margin-top:66px; }
.statement-mark { font:400 clamp(75px,12vw,190px)/1 var(--font-display); color:var(--soft); margin-top:80px; letter-spacing:-.1em; }
/* Features */
.features { background:var(--bg); }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.feature-card { min-height:315px; padding:clamp(25px,3vw,38px); border:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; transition:transform .3s,box-shadow .3s; }
.feature-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.feature-icon { display:flex; align-items:center; justify-content:center; width:56px; height:56px; border:1px solid var(--line); border-radius:50%; margin-bottom:auto; color:var(--accent); }
.feature-icon svg { width:25px; height:25px; stroke:currentColor; stroke-width:1.35; fill:none; }
.feature-count { display:block; font-size:10px; letter-spacing:.17em; color:var(--accent); margin-top:31px; }
.feature-card h3 { font:400 clamp(19px,1.9vw,25px)/1.65 var(--font-display); margin-top:10px; }
.feature-card p { font-size:12px; line-height:2.05; color:var(--muted); margin-top:12px; }
/* Gallery */
.gallery { background:var(--soft); }
.gallery-grid { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:clamp(13px,2.1vw,27px); align-items:start; }
.gallery-card:nth-child(2){ margin-top:clamp(22px,5vw,84px); }
.gallery-card:nth-child(3){ margin-top:clamp(48px,10vw,168px); }
.gallery-picture { overflow:hidden; aspect-ratio:3/4; background:var(--bg); }
.gallery-picture img { transition:transform 1.1s var(--ease); }
.gallery-card:hover .gallery-picture img { transform:scale(1.07); }
.gallery-caption { display:flex; justify-content:space-between; gap:10px; align-items:start; border-top:1px solid var(--line); margin-top:21px; padding-top:14px; }
.gallery-caption h3 { font:400 clamp(17px,1.6vw,22px)/1.5 var(--font-display); }
.gallery-caption p { font-size:9px; color:var(--muted); letter-spacing:.12em; white-space:nowrap; margin-top:5px; }
/* Story */
.story { display:grid; grid-template-columns:1fr 1fr; min-height:675px; background:var(--surface); }
.story-art { position:relative; overflow:hidden; background:var(--soft); }
.story-art img, .story-art video { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.story-text { padding:110px clamp(26px,7.8vw,120px); display:flex; flex-direction:column; justify-content:center; align-items:start; }
.story .kicker { margin:18px 0 30px; }
.story h2 { font:400 clamp(32px,3.65vw,54px)/1.7 var(--font-display); letter-spacing:.06em; }
.story-description { white-space:pre-line; max-width:530px; margin-top:25px; font-size:13px; line-height:2.5; color:var(--muted); }
.story .round-link { margin-top:32px; }
/* Steps */
.steps { background:var(--bg); }
.steps-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; border-top:1px solid var(--line); }
.step { padding-top:36px; }
.step-number { display:flex; align-items:center; justify-content:center; border:1px solid var(--accent); border-radius:100%; width:53px; height:53px; color:var(--accent); font-size:13px; letter-spacing:.03em; font-family:var(--font-display); }
.step h3 { margin-top:24px; font:400 clamp(19px,2vw,26px)/1.55 var(--font-display); }
.step p { margin-top:16px; color:var(--muted); font-size:12px; line-height:2.2; max-width:270px; }
/* FAQ */
.faq { background:var(--surface); }
.faq-body { max-width:850px; margin-left:auto; }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item:first-child { border-top:1px solid var(--line); }
.faq-item summary { list-style:none; position:relative; cursor:pointer; padding:26px 45px 26px 5px; font-size:14px; font-weight:500; line-height:1.85; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"＋"; position:absolute; right:7px; top:50%; transform:translateY(-50%); font-weight:300; font-size:25px; line-height:1; color:var(--accent); }
.faq-item[open] summary::after { content:"−"; }
.faq-answer { padding:0 45px 28px 5px; color:var(--muted); font-size:13px; line-height:2.15; }
/* CTA */
.cta { text-align:center; padding:clamp(95px,13vw,170px) 20px; background:var(--ink); color:var(--surface); }
.cta .kicker { justify-content:center; color:var(--soft); }
.cta .kicker::before { background:var(--soft); }
.cta h2 { font:400 clamp(38px,5vw,72px)/1.65 var(--font-display); letter-spacing:.075em; margin-top:31px; }
.cta-description { max-width:530px; margin:26px auto 33px; font-size:13px; line-height:2.4; color:var(--soft); }
.cta .btn { background:var(--surface); border-color:var(--surface); color:var(--ink); }
.cta .btn:hover { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.cta-caption { color:var(--soft); font-size:11px; margin-top:20px; }
.site-footer { padding:38px clamp(22px,5vw,68px) 48px; background:var(--bg); }
.footer-inner { max-width:1304px; display:flex; align-items:end; justify-content:space-between; gap:20px; margin:0 auto; }
.footer-note, .footer-copy { font-size:10px; color:var(--muted); line-height:1.9; }
.footer-copy { text-align:right; letter-spacing:.08em; }
/* Motion is off by default until JS marks ready to avoid invisible content if scripts fail */
html.motion-ready:not(.motion-paused) [data-reveal] { opacity:0; transform:translateY(36px); transition:opacity var(--duration) var(--ease),transform var(--duration) var(--ease); }
html.motion-ready:not(.motion-paused) [data-reveal="left"] { transform:translateX(-28px); }
html.motion-ready:not(.motion-paused) [data-reveal="right"] { transform:translateX(28px); }
html.motion-ready:not(.motion-paused) [data-reveal].is-visible { opacity:1; transform:none; }
html[data-motion="soft"] { --duration:650ms; }
html[data-motion="off"],html.motion-paused { scroll-behavior:auto; }
html[data-motion="off"] [data-reveal],html.motion-paused [data-reveal] { opacity:1!important;transform:none!important;transition:none!important; }
@media (max-width:1020px) {
  .desktop-nav { display:none; }
  .hero { grid-template-columns:55% 45%; }
  .hero-copy { padding-left:5vw; padding-right:5vw; }
  .story-text { padding:90px 5vw; }
}
@media (max-width:760px) {
  html { scroll-padding-top:70px; }
  body { font-size:14px; }
  .site-header-inner { height:76px; }
  .brand-name { font-size:20px; }
  .brand-sub { font-size:6px; }
  .motion-toggle { font-size:10px; }
  .header-link { display:none; }
  .mobile-menu-toggle { display:block; }
  .mobile-menu { display:none; position:absolute; left:0; right:0; top:76px; background:var(--surface); box-shadow:0 30px 40px rgba(0,0,0,.08); padding:16px 25px 28px; }
  .mobile-menu.is-open { display:flex; flex-direction:column; gap:0; }
  .mobile-menu a { display:block; padding:14px 5px; border-bottom:1px solid var(--line); font-size:13px; }
  .hero { display:flex; flex-direction:column; min-height:unset; }
  .hero-copy { order:2; padding:55px 24px 100px; }
  .hero-media { order:1; height:min(62svh,600px); min-height:390px; margin-top:76px; }
  .hero-media-note { left:22px; bottom:20px; font-size:9px; }
  .hero .kicker { font-size:9px; margin-bottom:19px; }
  .hero-title { font-size:clamp(38px,10vw,58px); line-height:1.55; }
  .hero-lead { margin-top:20px; font-size:14px; }
  .hero-description { margin-top:10px; font-size:12px; }
  .hero-links { margin-top:25px; gap:10px 23px; }
  .hero .btn { min-height:51px; padding:10px 16px; }
  .hero-scroll { left:24px; bottom:30px; }
  .section-pad { padding-block:85px; }
  .section-header { margin-bottom:38px; }
  .section-heading { font-size:clamp(29px,7.8vw,42px); }
  .section-header .kicker { margin:9px 0 18px; }
  .section-lead { font-size:12px; margin-top:15px; }
  .statement-grid { grid-template-columns:1fr; gap:12px; }
  .statement-index { display:flex; align-items:center; justify-content:space-between; }
  .statement-mark { margin:0; font-size:50px; }
  .statement h2 { font-size:clamp(31px,7.9vw,45px); }
  .statement-description { font-size:12px; margin-top:22px; line-height:2.35; }
  .statement-side { margin-top:30px; }
  .feature-grid { grid-template-columns:1fr; gap:12px; }
  .feature-card { min-height:210px; padding:24px; display:grid; grid-template-columns:58px 1fr; grid-template-rows:auto auto auto; column-gap:20px; align-content:center; }
  .feature-icon { grid-row:1/4; margin-bottom:0; width:50px; height:50px; align-self:start; }
  .feature-count { margin-top:0; }
  .feature-card h3 { margin-top:3px; font-size:22px; }
  .feature-card p { margin-top:7px; font-size:12px; }
  .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px 13px; }
  .gallery-card:nth-child(2), .gallery-card:nth-child(3) { margin-top:0; }
  .gallery-card:nth-child(3) { grid-column:1/3; width:72%; margin-inline:auto; }
  .gallery-caption { flex-wrap:wrap; margin-top:13px; padding-top:10px; }
  .gallery-caption h3 { font-size:16px; }
  .gallery-caption p { font-size:8px; }
  .story { grid-template-columns:1fr; }
  .story-art { height:400px; }
  .story-text { padding:80px 24px 90px; }
  .story h2 { font-size:clamp(30px,8vw,43px); }
  .story-description { font-size:12px; }
  .steps-grid { grid-template-columns:1fr; gap:0; }
  .step { padding:25px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:60px 1fr; column-gap:18px; }
  .step-number { grid-row:1/3; width:48px; height:48px; }
  .step h3 { margin-top:0; font-size:21px; }
  .step p { margin-top:8px; }
  .faq-item summary { padding:22px 39px 22px 2px; font-size:13px; }
  .faq-answer { font-size:12px; padding-right:28px; }
  .cta { padding:90px 22px 100px; }
  .cta h2 { font-size:clamp(34px,9vw,51px); }
  .footer-inner { flex-direction:column; align-items:start; }
  .footer-copy { text-align:left; }
}
@media (max-width:390px) {
  .brand-name { font-size:17px; }
  .brand-sub { font-size:5.5px; }
  .header-actions { gap:9px; }
  .hero-title { font-size:36px; }
  .hero-links { align-items:start; flex-direction:column; }
  .gallery-caption h3 { font-size:15px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  html [data-reveal] { opacity:1!important; transform:none!important; }
  .hero-media-inner { transform:none!important; }
}