@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;1,400&family=Noto+Sans+JP:wght@400;500&family=Noto+Serif+JP:wght@400;500&display=swap');

:root{--ink:#303636;--turquoise:#319aa7;--pale:#eaf5f5;--coral:#fa897d;--serif:'Noto Serif JP','Yu Mincho',serif;--sans:'Noto Sans JP','Yu Gothic',sans-serif}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#fff;font-family:var(--sans);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--turquoise);outline-offset:6px}button{color:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;top:-60px;left:20px;z-index:10;background:white;padding:12px}.skip-link:focus{top:10px}
.header{height:106px;display:flex;align-items:center;justify-content:space-between;padding:0 4.3%;position:relative;z-index:3;background:rgba(255,255,255,.94)}.brand{display:flex;align-items:center;gap:26px;flex-shrink:0}.brand-mark{font:54px/1 'Cormorant Garamond',Georgia,serif;letter-spacing:5px;color:#222}.brand-mark span{color:var(--turquoise)}.brand-caption{font-size:10px;letter-spacing:5px}nav{display:flex;align-items:center;gap:30px}.nav-link{border:0;background:none;padding:14px 0;font-size:12px;letter-spacing:1.5px;position:relative}.nav-link:after{content:'';position:absolute;bottom:5px;left:0;width:0;height:1px;background:var(--turquoise);transition:width .25s}.nav-link:hover:after{width:100%}.contact-button{display:flex;gap:34px;align-items:center;border:0;border-radius:40px;background:var(--coral);color:#fff;padding:18px 35px;letter-spacing:1.5px;font-size:13px}.contact-button span{font-size:20px}.menu-toggle{display:none}
.hero{position:relative;isolation:isolate;min-height:calc(100svh - 106px);overflow:hidden;display:flex;align-items:center;padding:62px 4.3% 45px;background:radial-gradient(ellipse at 0% 8%,#e5f5f6 0,transparent 28%),#fff}.hero-art{position:absolute;z-index:-2;right:0;top:0;height:100%;width:57%;background-image:url('assets/hero-reference.png');background-size:auto 112%;background-position:right bottom;background-repeat:no-repeat;mask-image:linear-gradient(to right,transparent 0%,#000 17%)}.hero-copy{width:57%;max-width:760px;animation:appear .9s ease-out both}h1{font-family:var(--serif);font-weight:400;font-size:clamp(32px,3.65vw,61px);line-height:1.65;letter-spacing:.025em;margin:0;white-space:nowrap}.english-copy{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:400;color:#e9786e;font-size:clamp(32px,3.5vw,55px);letter-spacing:.02em;margin:clamp(32px, 3vw, 48px) 0 clamp(40px, 3.5vw, 56px)}.introduction{font-family:var(--serif);font-size:clamp(14px,1.18vw,18px);line-height:2;letter-spacing:.04em;margin:0 0 17px}.support-notes{display:flex;align-items:center;max-width:590px;background:rgba(240,246,246,.88);border-radius:16px;padding:13px 18px;margin:0 0 12px}.support-notes>div{display:flex;align-items:center;gap:16px;width:52%}.support-notes>div+div{width:48%;border-left:1px solid #9ac9cf;padding-left:21px}.support-notes p{font-family:var(--serif);font-size:14px;line-height:1.8;letter-spacing:.05em;margin:0}.support-icon{display:grid;place-items:center;width:53px;height:53px;border-radius:50%;background:#d9edef;color:var(--turquoise);flex-shrink:0}.support-icon svg{width:29px;height:33px}.support-icon.peach{background:#fceadc}.hero-actions{display:flex;gap:15px;max-width:600px}.button{display:flex;align-items:center;justify-content:space-between;gap:20px;border-radius:40px;padding:20px 30px;font-family:var(--serif);font-size:16px;letter-spacing:.06em;transition:transform .2s,box-shadow .2s,background .2s}.button span{font-family:var(--sans);font-size:22px;line-height:1}.primary{background:var(--coral);border:1px solid var(--coral);color:#fff;flex:1.25;box-shadow:0 6px 18px #eb9b8c18}.secondary{background:#ffffffd9;border:1px solid var(--turquoise);color:#287f8a;flex:1}.button:hover,.contact-button:hover{transform:translateY(-2px);box-shadow:0 8px 22px #347e7d15}
dialog{width:min(540px,calc(100% - 36px));padding:48px 36px 32px;border:1px solid #dfeded;border-radius:18px;color:var(--ink);box-shadow:0 24px 90px #193d3c20}dialog::backdrop{background:#233b3e4d;backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:16px;top:10px;border:0;background:none;font-size:30px;font-weight:400}.dialog-label{color:var(--turquoise);font-size:12px;letter-spacing:3px}dialog h2{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.7}.dialog-description{line-height:2;font-size:15px}.dialog-dismiss{margin-top:25px;font-size:14px;padding:12px 28px}
@keyframes appear{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){.hero{padding-top:85px;padding-bottom:65px}.hero-copy{max-width:790px}.introduction{font-size:19px}.support-notes{max-width:640px}.hero-actions{max-width:650px}}
@media(max-width:1150px){.brand-caption{display:none}nav{gap:21px}.header{height:90px}.hero{min-height:calc(100svh - 90px);padding-top:55px}.hero-copy{width:63%}.hero-art{width:53%;opacity:.8}.support-notes{padding:12px}.support-notes>div{gap:9px}.support-notes>div+div{padding-left:12px}.support-notes p{font-size:12px}.support-icon{width:42px;height:42px}.button{font-size:14px;padding:18px 22px}}
@media(max-width:800px){.header{height:82px;padding:0 6%}.brand-mark{font-size:45px}.brand-caption{display:block;font-size:9px;letter-spacing:3px}.brand{gap:17px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:7px;border:1px solid #d6e7e7;border-radius:50%;background:#fff;width:44px;height:44px;padding:12px}.menu-toggle>span:not(.sr-only){height:1px;width:18px;background:var(--ink);transition:transform .2s}.menu-toggle[aria-expanded=true]>span:first-child{transform:translateY(4px) rotate(45deg)}.menu-toggle[aria-expanded=true]>span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}nav{display:none;position:absolute;top:82px;left:0;right:0;background:#fff;padding:22px 6% 30px;box-shadow:0 20px 25px #254b4912;grid-template-columns:1fr 1fr;gap:10px 24px}.menu-toggle[aria-expanded=true]+nav{display:grid}.nav-link{text-align:left;padding:12px 0}.contact-button{grid-column:1/-1;justify-content:space-between;margin-top:5px}.hero{display:flex;flex-direction:column;align-items:stretch;padding:32px 6% 0;min-height:auto}.hero-copy{width:100%;max-width:none}h1{font-size:clamp(25px,5.7vw,44px);line-height:1.85;letter-spacing:0}.english-copy{font-size:38px;margin:28px 0 36px}.introduction{font-size:14px;line-height:2.15}.desktop-break{display:none}.hero-art{position:relative;order:2;width:calc(100% + 12vw);height:490px;right:auto;margin:20px -6vw 0;background-size:auto 115%;background-position:right bottom;opacity:1;mask-image:linear-gradient(to bottom,transparent,#000 12%)}.support-notes{max-width:none;margin-top:23px;padding:13px}.support-notes p{font-size:12px}.support-notes>div{gap:10px}.support-notes>div+div{padding-left:15px}.hero-actions{max-width:none;gap:10px}.button{font-size:13px;padding:18px}}
@media(max-width:390px){.brand-caption{letter-spacing:2px}.support-icon{width:34px;height:34px}.support-icon svg{width:23px}.support-notes{padding:12px 9px}.support-notes p{font-size:11px}.support-notes>div+div{padding-left:9px}.button{font-size:12px;padding:17px 14px;gap:8px}.hero-art{height:390px}.english-copy{font-size:34px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Keep the expanded brand message in normal flow so text never overlaps. */
.hero #hero-title { position: relative; transform: translateY(-1lh); }
.hero-brand-message { margin: clamp(48px, 4.5vw, 72px) 0 clamp(44px, 4vw, 64px); }
.hero-brand-english { margin: 0 0 24px; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(28px, 2.65vw, 42px); line-height: 1.35; letter-spacing: -.015em; color: #e9786e; white-space: nowrap; }
.hero-service-link { position: relative; display: inline-flex; align-items: center; gap: 18px; min-height: 44px; font-size: 11px; letter-spacing: .13em; color: #386f75; transition: color .3s; }
.hero-service-arrow { font-size: 18px; transition: transform .3s; }
.hero-service-link:is(:hover, :focus-visible) { color: #319aa7; }
.hero-service-link:is(:hover, :focus-visible) .hero-service-arrow { transform: translate(3px, -3px); }
.hero-service-details { position: absolute; top: 100%; left: 0; width: max-content; max-width: min(520px, 82vw); padding-top: 2px; font-size: 10px; line-height: 1.8; letter-spacing: .025em; color: var(--ink); opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity .3s, transform .3s, visibility .3s; }
.hero-service-details > span { display: block; }
.hero-service-more { color: #386f75; font-size: 9.5px; }
.hero-service-link:is(:hover, :focus-visible) .hero-service-details { opacity: 1; visibility: visible; transform: translateY(0); }
@media (max-width: 800px), (hover: none) {
  .hero-service-link { flex-wrap: wrap; width: 100%; column-gap: 18px; row-gap: 0; padding: 12px 0; }
  .hero-service-details { position: static; flex-basis: 100%; width: auto; max-width: 100%; padding-top: 10px; opacity: 1; visibility: visible; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-service-link, .hero-service-arrow, .hero-service-details { transition: none; }
  .hero-service-details, .hero-service-link:is(:hover, :focus-visible) .hero-service-arrow { transform: none; }
}
.hero .hero-brand-english { margin-bottom: clamp(32px, 3vw, 48px); transform: translateY(-1lh); }
.hero .hero-actions { position: relative; }
@media (max-width: 800px) {
  .hero-brand-english { font-size: clamp(18px, 5.3vw, 38px); margin-bottom: 18px; }
  .hero { padding-top: 48px; }
  .hero .hero-brand-english { margin-bottom: 28px; }
  .hero-brand-message { margin: 40px 0 36px; }
  .hero .hero-actions { margin-bottom: 16px; }
}
@media (max-width: 560px) {
  .hero .hero-actions { flex-direction: column; gap: 18px; }
  .hero .hero-actions .button {
    flex: none;
    width: 100%;
    min-height: 58px;
    padding: 17px 24px;
    font-size: 14px;
    line-height: 1.6;
  }
  .hero .hero-actions .button > span { flex-shrink: 0; }
}