/* A continuous photographic opening, driven by native vertical scrolling. */
html.has-hero-intro #site-header{position:fixed;inset:0 0 auto;transform:translateY(-100%);visibility:hidden;pointer-events:none;transition:transform .5s cubic-bezier(.22,.61,.36,1),visibility 0s .5s}
html.has-hero-intro #site-header.is-intro-complete{transform:translateY(0);visibility:visible;pointer-events:auto;transition-delay:0s}
html.has-hero-intro #hero-story{--story-header:0px;--story-height:100svh}
#hero-story{--story-header:96px;--story-height:calc(100svh - var(--story-header));--hero-ink:#fafaf3;--hero-muted:#e0e2d8;--hero-accent:#d0e69e;position:relative;background:#141614;color:var(--hero-ink)}
#hero-story .hero-stage{position:relative}
#hero-story .hero-track{position:relative}
#hero-story .story-slide{position:relative;width:100%;height:var(--story-height);min-height:650px;max-height:none;overflow:hidden;isolation:isolate;background:#141614;color:var(--hero-ink);--accent:var(--hero-accent);--ink-1:var(--hero-ink);--ink-2:var(--hero-muted)}
#hero-story.is-scroll-story{height:calc(var(--story-height) + var(--story-travel,0px))}
#hero-story.is-scroll-story .hero-stage{position:sticky;top:var(--story-header);height:var(--story-height);overflow:hidden}
#hero-story.is-scroll-story .hero-track{display:flex;width:100%;height:100%;will-change:transform}
#hero-story.is-scroll-story .story-slide{flex:0 0 100%;height:100%;min-height:0}
#hero-story.is-scroll-story #story-care{flex-basis:82%}
#hero-story.is-scroll-story #story-organize{flex-basis:136%}

/* The pictures form the canvas; a local shade keeps white type readable. */
#hero-story .main-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% center;border-radius:0;filter:saturate(.72);opacity:.95}
#hero-story .hero-shade{display:block;position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#10161280,transparent 82%),linear-gradient(0deg,#101612b8,transparent 44%)}
#story-care::after{content:'';position:absolute;inset:0 0 0 auto;width:10%;background:linear-gradient(90deg,transparent,#141614);pointer-events:none}
#hero-story .hero-content{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:72%;max-width:960px;height:100%;margin:0 auto;padding:0 0 10%;z-index:2}
#hero-story .hero-content::before{content:'';position:absolute;inset:22% 10% 33% -12%;background:radial-gradient(ellipse,#0c170c60,transparent 72%);z-index:-1;pointer-events:none}
#hero-story :is(.hero-content,.gallery-copy) :is(h1,h2){color:var(--hero-ink);font-family:var(--font-jp);font-size:clamp(34px,3.5vw,62px);font-weight:400;letter-spacing:.18em;line-height:1.85;margin:0;text-shadow:0 2px 26px #09120c55;overflow:visible}
#hero-story .hero-title-line{display:block;white-space:nowrap}
#hero-story .hero-desktop-break{display:none}
#hero-story .hero-title-line:last-child{margin-left:3.1em}
#hero-story :is(.hero-content,.gallery-copy) .eyeline{font-size:9px;letter-spacing:.17em;line-height:1.5;color:#e4ebd8;margin:0 0 25px;font-weight:400}
#hero-story .small-dot{width:3px;height:3px;background:var(--hero-accent)}
#hero-story :is(.hero-content,.gallery-copy) .hero-description{font-size:12px;line-height:2.15;letter-spacing:.075em;font-weight:400;color:var(--hero-muted);margin:24px 0 0;text-shadow:0 1px 12px #10181080}
#hero-story .hero-content>.hero-description{position:absolute;bottom:14%;left:0;margin:0}
#hero-story :is(.hero-content,.gallery-copy) .round-link{font-size:11px;font-weight:400;letter-spacing:.08em;color:var(--hero-ink);gap:16px;min-height:44px;text-decoration:none}
#hero-story .hero-content>.round-link{position:absolute;bottom:14%;right:0}
#hero-story :is(.hero-content,.gallery-copy) .circle-arrow{width:38px;height:38px;font-size:22px;color:#22301b;border:1px solid var(--hero-accent);background:var(--hero-accent)}
#hero-story :is(.hero-content,.gallery-copy) .round-link:hover .circle-arrow{background:#eef5dc;border-color:#eef5dc;transform:rotate(45deg)}
#hero-story .hero-side-note{position:absolute;right:3%;top:5%;writing-mode:horizontal-tb;font:8px var(--font-latin);letter-spacing:.2em;color:#edf1e5;z-index:2}
.hero-mobile-break{display:none}

/* Five distinct work details, with overlapping scales and generous black space. */
#hero-story .gallery-surface{position:relative;isolation:isolate;width:100%;height:100%;background:radial-gradient(ellipse at 26% 46%,#444b3b40,transparent 65%)}
#hero-story .gallery-surface::after{content:'';position:absolute;left:12%;right:0;top:69%;height:1px;background:linear-gradient(90deg,transparent,#dcebc164,transparent);box-shadow:0 0 26px 4px #d9eaa018;pointer-events:none;z-index:1}
#hero-story .gallery-photo{position:absolute;overflow:hidden;margin:0;will-change:transform}
#hero-story .gallery-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.58);opacity:.78}
#hero-story .gallery-photo-one{left:8%;top:9%;width:27vw;height:58%}
#hero-story .gallery-photo-two{left:1%;bottom:12%;width:15vw;height:25%;z-index:1}
#hero-story .gallery-photo-three{left:47%;top:29%;width:28vw;height:45%}
#hero-story .gallery-photo-four{left:31%;bottom:7%;width:17vw;height:25%}
#hero-story .gallery-photo-five{left:73%;top:12%;width:20vw;height:32%}
#hero-story .gallery-copy{position:absolute;left:37%;top:34%;width:55%;max-width:800px;z-index:3;text-shadow:0 2px 28px #000}
#hero-story .gallery-copy::before{content:'';position:absolute;inset:-42px -35px;background:radial-gradient(ellipse at 44% 42%,#101610a6,transparent 70%);z-index:-1;pointer-events:none}
#hero-story .gallery-copy h2{font-size:clamp(32px,3.4vw,58px);line-height:1.85}
#hero-story .gallery-title-line{display:block;white-space:nowrap}
#hero-story .gallery-title-line:last-child{margin-left:2em}
#hero-story .gallery-copy .hero-description{font-size:11px;margin:24px 0 12px;padding-left:8.5em}
#hero-story .gallery-copy .round-link{margin-left:8.5em;font-size:10px}
#hero-story .gallery-caption{position:absolute;left:47%;top:7%;font:8px var(--font-latin);letter-spacing:.2em;color:#c4ceba}

/* The last image arrives first; copy and daylight emerge during the final hold. */
#hero-story #story-reuse .main-hero-photo{object-position:64% center;transform-origin:64% center;will-change:transform,opacity}
#hero-story #story-reuse .hero-shade{background:linear-gradient(90deg,#0f17139c,transparent 90%),linear-gradient(0deg,#101710a8,transparent 44%)}
#hero-story #story-reuse .hero-content{width:72%;padding-bottom:6%}
#hero-story #story-reuse h2{font-size:clamp(38px,4.55vw,76px);line-height:1.65;letter-spacing:.14em}
#hero-story .reveal-mask{display:block;overflow:hidden;padding-bottom:.09em}
#hero-story .reveal-mask + .reveal-mask{margin-left:1.8em}
#hero-story .reveal-mask>[data-reveal]{display:block;white-space:nowrap}
#hero-story.is-scroll-story .final-copy [data-reveal]{opacity:0;transform:translate3d(0,30px,0);will-change:transform,opacity}

/* Persistent small controls do not compete with the photographs. */
#hero-story .story-controls{position:absolute;bottom:19px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:24px;z-index:5;color:#edf1e5}
#hero-story .story-controls[hidden]{display:none}
body:has(.hero-story.is-pinned) .back-to-top,body:has(.hero-story.is-pinned) .preview-tag{visibility:hidden}
#hero-story .story-pagination{display:flex;align-items:center;gap:10px}
#hero-story .story-pagination button{position:relative;display:grid;place-items:center;width:32px;height:40px;padding:0;border:0;background:none;color:#c4caba;font:10px var(--font-latin);cursor:pointer}
#hero-story .story-pagination button[aria-current]{color:#fff}
#hero-story .story-pagination button[aria-current]::after{content:'';position:absolute;bottom:0;width:3px;height:3px;background:var(--hero-accent);border-radius:50%}
#hero-story .story-progress{width:54px;height:1px;overflow:hidden;background:#edf2dd50}
#hero-story .story-progress>span{display:block;width:100%;height:100%;background:var(--hero-accent);transform:scaleX(0);transform-origin:left}
#hero-story .story-scroll-hint{display:flex;align-items:center;gap:15px;font:9px var(--font-latin);letter-spacing:.12em}
#hero-story .story-scroll-hint>span:last-child{font-size:20px}
#hero-story .story-scroll-hint .story-hint-label{font-size:9px}
#hero-story .story-skip{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.08em;color:#edf1e5;text-decoration:none}
#hero-story .story-skip>span{font-size:20px}

/* Carry the Japanese-led typography and open spacing through the homepage. */
body[data-page="home"] .home-section-title{font-family:var(--font-jp);font-size:clamp(38px,5vw,72px);font-weight:400;line-height:1.45;letter-spacing:.07em;margin:0}
body[data-page="home"] .philosophy-grid h2{font-size:clamp(34px,3.8vw,58px);font-weight:400;line-height:1.8}
body[data-page="home"] .section-label>span:first-child::before{content:'[';width:auto;height:auto;margin-right:9px;background:none}
body[data-page="home"] .section-label>span:first-child::after{content:']';margin-left:9px}
body[data-page="home"] .home-services .section-intro{margin-bottom:65px}
body[data-page="home"] .home-services .text-link{border:1px solid #b9bdb4;border-radius:99px;padding:15px 24px;gap:48px}
body[data-page="home"] .service-heading h3{font-weight:500}

@media(max-width:900px){
  #hero-story{--story-header:78px}
  #hero-story .hero-content{width:80%}
  #hero-story :is(.hero-content,.gallery-copy) :is(h1,h2){font-size:4vw}
  #hero-story .hero-content>.hero-description{font-size:11px;bottom:19%}
  #hero-story .hero-content>.round-link{left:0;right:auto;bottom:10%}
  #hero-story .gallery-copy{left:34%;width:62%}
  #hero-story .gallery-copy .hero-description,#hero-story .gallery-copy .round-link{padding-left:0;margin-left:3em}
}
@media(max-width:600px){
  #hero-story{--story-header:72px}
  #hero-story.is-scroll-story #story-care{flex-basis:100%}
  #hero-story.is-scroll-story #story-organize{flex-basis:250%}
  #hero-story .story-slide{min-height:650px}
  #hero-story .main-hero-photo{object-position:67% center}
  #hero-story .hero-shade{background:linear-gradient(180deg,#10161245,transparent 28%,#10161230 50%,#101612d1),linear-gradient(90deg,#10161235,transparent)}
  #hero-story .hero-content,#hero-story #story-reuse .hero-content{width:calc(100% - 60px);padding:0 0 30%;justify-content:center}
  #hero-story :is(.hero-content,.gallery-copy) :is(h1,h2){font-size:clamp(27px,7.8vw,43px);line-height:1.9;letter-spacing:.12em}
  #hero-story .hero-title-line:last-child{margin-left:1.65em}
  #hero-story :is(.hero-content,.gallery-copy) .eyeline{font-size:7px;margin-bottom:24px;letter-spacing:.13em}
  #hero-story .hero-content>.hero-description{bottom:22%;font-size:11px;line-height:2.05;letter-spacing:.025em}
  #hero-story .hero-content>.round-link{bottom:12%;left:0;right:auto;font-size:10px;gap:15px}
  #hero-story :is(.hero-content,.gallery-copy) .circle-arrow{width:34px;height:34px;font-size:20px}
  #hero-story .hero-mobile-break{display:block}
  #hero-story .hero-side-note{display:block;right:auto;left:30px;top:30px;font-size:7px}
  #hero-story #story-reuse h2{font-size:clamp(28px,8.1vw,44px);line-height:1.8;letter-spacing:.09em}
  #hero-story .reveal-mask + .reveal-mask{margin-left:.9em}
  #hero-story #story-reuse .hero-shade{background:linear-gradient(180deg,#10161238,transparent 28%,#10161240 52%,#101612d1),linear-gradient(90deg,#10161240,transparent)}
  #hero-story .gallery-photo-one{left:4%;top:9%;width:58vw;height:48%}
  #hero-story .gallery-photo-two{left:1%;bottom:12%;width:37vw;height:26%}
  #hero-story .gallery-photo-three{left:47%;top:30%;width:64vw;height:41%}
  #hero-story .gallery-photo-four{left:29%;bottom:8%;width:44vw;height:25%}
  #hero-story .gallery-photo-five{left:76%;top:12%;width:46vw;height:34%}
  #hero-story .gallery-copy{left:34%;top:30%;width:34%;max-width:none}
  #hero-story .gallery-copy h2{font-size:7.4vw;line-height:1.9;letter-spacing:.08em}
  #hero-story .gallery-title-line:last-child{margin-left:.55em}
  #hero-story .gallery-copy .hero-description{font-size:10px;line-height:2.1;padding:0;margin:26px 0 14px;letter-spacing:.02em}
  #hero-story .gallery-copy .round-link{margin-left:0;font-size:10px}
  #hero-story .gallery-caption{left:35%;top:10%;font-size:7px;letter-spacing:.1em}
  #hero-story .story-controls{bottom:15px;gap:10px}
  #hero-story .story-pagination{gap:4px}
  #hero-story .story-pagination button{width:28px;font-size:9px}
  #hero-story .story-progress{width:30px}
  #hero-story .story-scroll-hint{display:none}
  #hero-story .story-skip{font-size:9px;gap:8px}
  body[data-page="home"] .home-section-title{font-size:34px;line-height:1.55}
  body[data-page="home"] .philosophy-grid h2{font-size:29px}
  body[data-page="home"] .home-services .section-intro{margin-bottom:42px}
  body[data-page="home"] .home-services .text-link{margin-top:16px;padding:12px 20px}
}
@media(max-height:660px) and (min-width:601px){
  #hero-story .hero-content{padding-bottom:13%}
  #hero-story :is(.hero-content,.gallery-copy) :is(h1,h2){font-size:clamp(28px,6.3svh,42px)}
  #hero-story .hero-content>.hero-description{font-size:11px;line-height:1.8;bottom:16%}
  #hero-story .gallery-copy{top:25%}
  #hero-story .gallery-copy .hero-description{margin-top:12px;line-height:1.8}
}
@media(max-width:600px) and (max-height:650px){
  #hero-story .hero-content,#hero-story #story-reuse .hero-content{padding-bottom:42%}
  #hero-story .hero-content>.hero-description{bottom:24%;font-size:10px}
  #hero-story .hero-content>.round-link{bottom:12%}
  #hero-story .gallery-copy{top:23%}
  #hero-story .gallery-copy .hero-description{margin-top:14px}
}

/* Readable without motion, JavaScript, or a tall viewport. */
#hero-story:not(.is-scroll-story) #story-organize{height:auto;min-height:0;padding:72px 0}
#hero-story:not(.is-scroll-story) .gallery-surface{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;width:calc(100% - 112px);margin:auto;height:auto}
#hero-story:not(.is-scroll-story) .gallery-copy{position:relative;inset:auto;grid-column:1/-1;order:0;width:100%;margin-bottom:30px}
#hero-story:not(.is-scroll-story) .gallery-copy .hero-description,#hero-story:not(.is-scroll-story) .gallery-copy .round-link{padding-left:0;margin-left:0}
#hero-story:not(.is-scroll-story) .gallery-photo{position:relative;inset:auto;width:100%;height:260px;order:1;transform:none!important}
#hero-story:not(.is-scroll-story) .gallery-caption,#hero-story:not(.is-scroll-story) .gallery-surface::after{display:none}
@media(max-width:600px){#hero-story:not(.is-scroll-story) .gallery-surface{grid-template-columns:1fr 1fr;width:calc(100% - 44px);gap:16px}#hero-story:not(.is-scroll-story) .gallery-photo{height:220px}}
@media(prefers-reduced-motion:reduce){html.has-hero-intro #site-header{transition:none}#hero-story .final-copy [data-reveal]{opacity:1!important;transform:none!important}#hero-story .main-hero-photo,#hero-story .gallery-photo{transform:none!important}}
@media print{html.has-hero-intro #site-header{position:relative;transform:none;visibility:visible;pointer-events:auto}#hero-story{height:auto!important}#hero-story .hero-stage{position:relative!important;height:auto!important;overflow:visible!important}#hero-story .hero-track{display:block!important;transform:none!important}#hero-story .story-slide{height:700px!important;break-inside:avoid}#hero-story .story-controls{display:none!important}#hero-story .final-copy [data-reveal]{opacity:1!important;transform:none!important}}