:root {
  --ink:#152d28;
  --deep:#10241f;
  --paper:#f5f5ef;
  --white:#fff;
  --muted:#aebbb1;
  --line:rgba(255,255,255,.19);
  --red:#e15b3e;
  --gold:#c8bd91;
  --max:1320px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased
}
h1,h2,h3,p,a {
  overflow-wrap:anywhere
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
a:focus-visible,button:focus-visible {
  outline:3px solid #9f391f;
  outline-offset:6px
}
a:hover {
  text-decoration:underline;
  text-underline-offset:5px
}
.wrap {
  width:min(calc(100% - 112px),var(--max));
  margin:auto
}
.skip {
  position:fixed;
  top:-100px;
  left:20px;
  background:white;
  padding:12px;
  z-index:50
}
.skip:focus {
  top:12px
}
.site-header {
  background:var(--deep);
  color:white;
  border-bottom:1px solid var(--line)
}
.header-inner {
  min-height:104px;
  display:flex;
  flex-wrap:wrap;
  padding-top:12px;
  padding-bottom:12px;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.wordmark {
  display:flex;
  align-items:center;
  gap:15px;
  font-size:0.9375rem;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.06em
}
.mark {
  width:2.375rem;
  height:2.375rem;
  flex:0 0 auto;
  white-space:nowrap;
  display:grid;
  place-items:center;
  border:1px solid var(--gold);
  border-radius:50%;
  font-size:0.625rem;
  letter-spacing:-1px;
  color:var(--gold)
}
nav {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:32px;
  font-size:0.875rem
}
.languages {
  display:flex;
  align-items:center;
  gap:13px;
  margin-left:16px;
  border-left:1px solid var(--line);
  padding-left:30px
}
.languages [aria-current] {
  color:var(--gold)
}
.menu-toggle {
  display:none
}
.eyebrow {
  font-size:0.875rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:700;
  line-height:1.5
}
.hero {
  background:var(--deep);
  color:white;
  overflow:hidden
}
.hero-layout {
  position:relative;
  display:grid;
  grid-template-columns:1.08fr 1fr;
  align-items:center;
  min-height:640px;
  padding-top:64px;
  padding-bottom:68px;
  gap:28px
}
.hero-copy {
  min-width:0;
  position:relative;
  z-index:1
}
.hero .eyebrow {
  color:var(--gold);
  margin:0 0 27px
}
.hero h1 {
  font-size:clamp(3.625rem,6.05vw,5.5625rem);
  font-weight:500;
  letter-spacing:-.065em;
  line-height:1.02;
  margin:0 0 32px;
  max-width:760px
}
.hero h1 em {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  color:var(--gold);
  letter-spacing:-.055em
}
.hero-description {
  max-width:440px;
  color:#cbd3cc;
  font-size:1.125rem;
  line-height:1.7;
  margin:0 0 35px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:49px;
  padding:12px 23px;
  border:1px solid #b6c0b7;
  font-size:0.875rem;
  line-height:1.4
}
.button:hover {
  background:var(--paper);
  color:var(--deep);
  text-decoration:none
}
.hero-art {
  position:relative;
  aspect-ratio:1/1.08;
  margin:0 -35px 0 0;
  overflow:hidden
}
.hero-art img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.art-caption {
  background:#10241f;
  padding:5px 9px;
  max-width:calc(100% - 44px);
  position:absolute;
  bottom:18px;
  left:22px;
  color:#e5e7dc;
  font-size:0.75rem;
  letter-spacing:.1em;
  text-transform:uppercase
}
.hero-foot {
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:22px 0;
  font-size:0.75rem;
  letter-spacing:.13em;
  color:#bdc7bf;
  text-transform:uppercase
}
.section {
  padding:108px 0
}
.section-label {
  display:flex;
  align-items:center;
  gap:16px;
  font-size:0.875rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:700;
  margin:0 0 34px
}
.section-label:before {
  content:'';
  height:7px;
  width:7px;
  background:var(--red);
  border-radius:50%
}
.intro-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:100px
}
.section h2,.brand-copy h2 {
  font-size:clamp(2.25rem,4.2vw,3.75rem);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.045em;
  margin:0 0 30px
}
.intro-text {
  padding-top:42px
}
.intro-text p {
  margin:0 0 24px;
  color:#4e5d54
}
.text-link {
  font-size:0.875rem;
  border-bottom:1px solid;
  display:inline-block;
  padding-bottom:4px
}
.focus {
  padding-top:0
}
.focus-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  border-bottom:1px solid #c8d0c7;
  padding-bottom:20px
}
.focus-heading h2 {
  font-size:2rem;
  margin:0
}
.focus-heading p {
  font-size:0.875rem;
  color:#667268;
  margin:0
}
.focus-row {
  display:grid;
  grid-template-columns:80px 1fr 1fr;
  gap:32px;
  border-bottom:1px solid #c8d0c7;
  padding:31px 0 33px
}
.focus-row .number {
  color:#667268;
  font-size:0.875rem
}
.focus-row h3 {
  font-size:1.5625rem;
  letter-spacing:-.025em;
  line-height:1.4;
  margin:0;
  font-weight:400
}
.focus-row p {
  color:#536057;
  margin:0;
  font-size:1rem
}
.senbird {
  background:#e6e8dd;
  padding:88px 0
}
.brand-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center
}
.brand-display {
  min-height:355px;
  background:#d9decf;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  padding:2rem 1rem;
  container-type:inline-size
}
.brand-display:before {
  content:'';
  height:205px;
  width:205px;
  max-width:calc(100% - 2rem);
  border:1px solid #99a58c;
  border-radius:50%;
  position:absolute
}
.brand-name {
  font-family:Georgia,serif;
  letter-spacing:.045em;
  font-size:3.625rem;
  font-size:min(3.625rem,18cqi);
  line-height:1.2;
  max-width:100%;
  overflow-wrap:anywhere;
  z-index:1
}
.brand-jp {
  font-family:Georgia,serif;
  font-size:1.0625rem;
  letter-spacing:.35em;
  margin-top:0.875rem;
  max-width:100%;
  overflow-wrap:anywhere;
  z-index:1
}
.brand-origin {
  position:relative;
  margin-top:2rem;
  max-width:100%;
  overflow-wrap:anywhere;
  line-height:1.6;
  font-size:0.75rem;
  letter-spacing:.12em;
  text-transform:uppercase
}
.brand-copy h2 {
  font-size:2.6875rem
}
.brand-copy p {
  font-size:1rem;
  color:#4d5d4d
}
.status-note {
  border-left:2px solid #9ca68e;
  padding-left:17px;
  font-size:0.8125rem!important;
  line-height:1.6;
  margin:26px 0
}
.roadmap {
  background:var(--ink);
  color:var(--paper)
}
.roadmap-intro {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:start
}
.roadmap-intro>p {
  color:#c0ccc2;
  margin:45px 0 0
}
.roadmap h2 {
  font-size:3.1875rem
}
.plan-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:45px;
  border-top:1px solid var(--line);
  gap:40px
}
.plan-step {
  padding-top:25px
}
.plan-step .phase {
  font-size:0.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold)
}
.plan-step h3 {
  font-size:1.4375rem;
  font-weight:400;
  line-height:1.3;
  margin:20px 0 16px;
  letter-spacing:-.02em
}
.plan-step p {
  font-size:0.9375rem;
  color:#bac8bd;
  margin:0
}
.roadmap-note {
  font-size:0.875rem;
  color:#aabbaf;
  border-top:1px solid var(--line);
  padding-top:22px;
  margin:38px 0 0
}
.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center
}
.contact h2 {
  max-width:540px
}
.contact p {
  color:#59675c;
  font-size:1.0625rem
}
.contact-detail {
  padding-top:38px;
  border-top:1px solid #bcc7bc;
  font-size:0.9375rem
}
.contact-detail p {
  font-size:0.9375rem
}
.site-footer {
  background:var(--deep);
  color:#c2cdc3;
  padding:45px 0 27px
}
.footer-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:35px;
  gap:30px
}
.footer-tagline {
  font-size:0.875rem
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:24px;
  border-top:1px solid var(--line);
  padding-top:22px;
  font-size:0.75rem
}
.footer-links {
  display:flex;
  gap:24px
}
.jp h1 {
  font-size:clamp(2.625rem,4.7vw,4.125rem);
  letter-spacing:-.04em;
  line-height:1.35
}
.jp .hero-description {
  font-size:1rem
}
.jp h2 {
  line-height:1.4;
  font-size:clamp(2rem,3.3vw,2.9375rem);
  letter-spacing:-.035em
}
.jp .focus-row h3 {
  font-size:1.4375rem
}
.jp .roadmap h2 {
  font-size:2.5rem
}
.jp .hero-layout {
  min-height:665px
}
.jp .intro-grid,.jp .brand-grid,.jp .contact-grid {
  gap:70px
}
@media(min-width:1600px) {
  .hero-layout {
    min-height:690px
  }
}
@media(max-width:1000px) {
  .wrap {
    width:calc(100% - 64px)
  }
  nav {
    gap:20px
  }
  .languages {
    padding-left:18px;
    margin-left:0
  }
  .hero-layout {
    min-height:590px
  }
  .hero h1 {
    font-size:4.0625rem
  }
  .hero-art {
    margin-right:-20px
  }
  .intro-grid,.brand-grid,.roadmap-intro,.contact-grid {
    gap:45px
  }
  .focus-row {
    grid-template-columns:40px 1fr 1fr;
    gap:20px
  }
  .section {
    padding:80px 0
  }
  .focus {
    padding-top:0
  }
  .hero h1 {
    font-size:clamp(3rem,6.5vw,4.0625rem)
  }
}
@media(max-width:760px) {
  .wrap {
    width:calc(100% - 40px)
  }
  .header-inner {
    min-height:82px;
    flex-wrap:wrap;
    gap:0
  }
  .wordmark {
    font-size:0.75rem;
    gap:10px
  }
  .mark {
    height:2.0625rem;
    width:2.0625rem;
    font-size:0.5625rem
  }
  .menu-toggle {
    display:block;
    color:white;
    background:none;
    border:1px solid #6c7d71;
    font-size:0.8125rem;
    padding:8px 13px;
    min-height:42px
  }
  .site-nav {
    width:100%;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:16px 0 22px
  }
  .site-nav.open {
    display:flex
  }
  .site-nav>a {
    padding:12px 0
  }
  .languages {
    border:0;
    padding:16px 0 0;
    gap:25px
  }
  .hero-layout {
    grid-template-columns:1fr;
    gap:35px;
    padding:47px 0 30px;
    min-height:0
  }
  .hero h1 {
    font-size:clamp(3.0625rem,11.5vw,4.75rem);
    max-width:600px;
    margin-bottom:25px
  }
  .hero .eyebrow {
    font-size:0.875rem;
    margin-bottom:25px
  }
  .hero-description {
    font-size:1rem;
    max-width:440px;
    margin-bottom:27px
  }
  .hero-art {
    aspect-ratio:1.48;
    margin:0;
    max-height:345px
  }
  .hero-art img {
    object-position:center 48%
  }
  .hero-foot {
    padding:20px 0;
    font-size:0.75rem;
    letter-spacing:.04em
  }
  .section {
    padding:65px 0
  }
  .section h2 {
    font-size:2.5rem
  }
  .intro-grid,.brand-grid,.roadmap-intro,.contact-grid {
    grid-template-columns:1fr;
    gap:8px
  }
  .intro-text {
    padding-top:0
  }
  .section-label {
    margin-bottom:26px
  }
  .focus {
    padding-top:0
  }
  .focus-heading {
    display:block
  }
  .focus-heading h2 {
    font-size:1.75rem;
    margin-bottom:10px
  }
  .focus-row {
    grid-template-columns:30px 1fr;
    gap:12px;
    padding:27px 0
  }
  .focus-row p {
    grid-column:2
  }
  .focus-row h3 {
    font-size:1.4375rem
  }
  .senbird {
    padding:50px 0
  }
  .brand-grid {
    gap:38px
  }
  .brand-display {
    min-height:310px
  }
  .brand-copy h2 {
    font-size:2.25rem
  }
  .roadmap-intro>p {
    margin:0
  }
  .plan-grid {
    grid-template-columns:1fr;
    gap:25px;
    margin-top:30px
  }
  .plan-step {
    padding-top:24px
  }
  .plan-step+.plan-step {
    border-top:1px solid var(--line)
  }
  .plan-step h3 {
    margin-top:13px
  }
  .contact-detail {
    padding-top:25px;
    margin-top:15px
  }
  .footer-top {
    align-items:flex-start;
    flex-direction:column;
    gap:22px
  }
  .footer-bottom {
    flex-direction:column;
    gap:15px
  }
  .jp .hero-layout {
    min-height:0
  }
  .jp h1 {
    font-size:clamp(2.3125rem,9vw,3.625rem)
  }
  .jp h2,.jp .roadmap h2 {
    font-size:2.0625rem
  }
  .jp .intro-grid,.jp .brand-grid,.jp .contact-grid {
    gap:25px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
}
@media print {
  .menu-toggle,.hero-art,.skip {
    display:none
  }
  .site-nav {
    display:flex
  }
  .hero,.roadmap,.site-header,.site-footer {
    background:white;
    color:#152d28
  }
  .hero p,.roadmap p {
    color:#152d28
  }
  .section {
    padding:30px 0
  }
  .wrap {
    width:95%
  }
  .hero-layout {
    min-height:0;
    display:block
  }
  .hero h1 {
    font-size:3rem
  }
  .hero-foot {
    color:#152d28
  }
}
/* Comfortable language and footer link targets without enlarging surrounding copy. */ .languages a,.footer-links a {
  display:inline-flex;
  align-items:center;
  min-height:44px
}
/* Light-surface focus uses a darker accent;
dark surfaces use pale gold. */ :where(.site-header,.hero,.roadmap,.site-footer) :is(a,button):focus-visible {
  outline-color:var(--gold)
}

/* Keep short headings visually balanced at narrow widths. */
h2,h3 { text-wrap: balance; }
@media (max-width: 360px) {
  .contact h2 { font-size: 2rem; }
  .jp .hero-description br { display: none; }
  .jp .hero-description { text-wrap: balance; }
}

/* Flex/grid items and decorative accents must not shrink or mask enlarged text. */
.hero-foot > span,.intro-grid > div,.brand-grid > div,.roadmap-intro > div,.contact-grid > div { min-width:0; }
.section-label:before { flex:0 0 7px; }