/* Trial G2: white background, original draw→fill entrance, then input-only hop. */
/* Approved company-introduction name; keep the registered name in the details. */
#company .company-brand-name {margin-top:16px;font-size:16px;line-height:1.8;color:var(--ink)}
#company .company-brand-name span {white-space:nowrap}
/* Keep the pair centered. The copy defines the desktop row height; size
   containment lets the original SVG ratio follow that height without enlarging
   the row. Do not use the old square stage's top-offset for desktop alignment. */
@media screen {
  .hero.hero-mascot.hero-arrival .hero-content {
    grid-template-columns:max-content max-content;
    justify-content:center;
    align-content:center;
    gap:32px;
  }
}
.hero.hero-mascot.hero-arrival .hero-art {width:min(100%,520px);position:relative}
.hero-arrival .mascot-stage {width:100%;aspect-ratio:1;position:relative}
.hero-arrival .mascot-react {
  display:block;
  position:absolute;
  width:90%;
  left:5%;
  top:4%;
  border:0;
  border-radius:28px;
  background:transparent;
  padding:0;
  margin:0;
  appearance:none;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.hero-arrival .mascot-react:disabled {opacity:1;cursor:default}
.hero-arrival .mascot-react:focus-visible {outline:3px solid #0062d1;outline-offset:10px}
.hero-arrival .hero-mark {display:block;animation:none;transform:none;pointer-events:none}
.hero-arrival .hero-mark path {animation:none;fill-opacity:1;stroke-opacity:0;stroke-dashoffset:0}
/* Begin on the first styled frame, not after deferred JavaScript loads.
   Without JS, CSS still completes draw→fill; no permanently hidden fallback. */
.hero-arrival:not([data-motion="still"]) .hero-mark path {
  stroke-opacity:1;
  animation:mascot-draw 1.7s .5s var(--ease) both,mascot-fill .6s 2.2s ease both;
}
@keyframes mascot-draw {from {stroke-dashoffset:1} to {stroke-dashoffset:0}}
@keyframes mascot-fill {from {fill-opacity:0;stroke-opacity:1} to {fill-opacity:1;stroke-opacity:0}}
.hero.hero-mascot.hero-arrival .hero-copy>.eyebrow,
.hero-arrival h1,.hero-arrival .hero-tagline {animation:none}
@media screen and (min-width:741px) {
  .hero.hero-mascot.hero-arrival .hero-art {
    height:100%;
    width:auto;
    aspect-ratio:2324.982006 / 1722.136164;
    align-self:stretch;
    contain:size;
  }
  .hero-arrival .mascot-stage {height:100%;aspect-ratio:auto}
  .hero-arrival .mascot-react {width:100%;left:0;top:0}
}
@media(max-width:740px) {
  .hero.hero-mascot.hero-arrival .hero-content {grid-template-columns:minmax(0,1fr);gap:28px}
  .hero.hero-mascot.hero-arrival .hero-copy {text-align:left;justify-self:start}
  .hero.hero-mascot.hero-arrival .hero-art {width:clamp(256px,64vw,320px)}
}
@media(max-width:520px) {
  .hero.hero-mascot.hero-arrival .hero-content {gap:24px}
}
@media(max-width:360px) {
  .hero.hero-mascot.hero-arrival .hero-art {width:min(100%,256px)}
}
@media(prefers-reduced-motion:reduce) {
  .hero-arrival .hero-mark {transform:none!important;opacity:1!important}
  .hero-arrival .hero-mark path {animation:none!important;fill-opacity:1!important;stroke-opacity:0!important;stroke-dashoffset:0!important}
}
@media print {
  .hero-arrival .hero-mark {transform:none!important}
  .hero-arrival .hero-mark path {animation:none!important;fill-opacity:1!important;stroke-opacity:0!important;stroke-dashoffset:0!important}
}

/* Let the head hop above its short stage. The outer about section still
   masks the right/bottom edges, preserving the corner-peek composition. */
@media screen {
  #about .about-peek-stage {overflow:visible}
}

/* Three catalog CTAs: visible feedback on E3's blue, without changing layout. */
/* Fit full illustrations inside their existing frames, then allow the small
   hover scale/lift past the frame without cropping their edges. */
@media screen {
  #services .catalog .catalog-art {overflow:visible}
  #services .catalog .catalog-art>img {width:100%;height:100%}
}
@media screen {
  #services .catalog .card-link {
    position:relative;
    isolation:isolate;
    transition:color .18s ease,border-color .18s ease,transform .18s ease;
  }
  #services .catalog .card-link::before {
    content:"";
    position:absolute;
    inset:0 -12px;
    z-index:-1;
    border-radius:4px;
    background:transparent;
    pointer-events:none;
    transition:background-color .18s ease;
  }
  #services .catalog .card-link:focus-visible,
  #services .catalog .card-link:active {color:#193b60;border-color:transparent}
  #services .catalog .card-link:focus-visible::before,
  #services .catalog .card-link:active::before {background:#fff}
}
@media screen and (hover:hover) and (pointer:fine) {
  #services .catalog .card-link:hover {color:#193b60;border-color:transparent;transform:translateY(-2px)}
  #services .catalog .card-link:hover::before {background:#fff}
  #services .catalog .card-link:active {transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce) {
  #services .catalog .card-link,#services .catalog .card-link::before {transition:none!important}
  #services .catalog .card-link:hover {transform:none}
}

/* Consistent bilingual headings: English above Japanese at every width. */
@media screen {
  #about .profile-heading,
  #news .section-bar>div,
  #company .company-heading {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
  }
  #about .profile-heading>.eyebrow,
  #news .section-bar>div>.eyebrow,
  #company .company-heading>.eyebrow {margin:0}
  #company .company-brand-name {margin-top:-8px}
}
@media screen and (max-width:740px) {
  #about .profile-heading,
  #news .section-bar>div,
  #company .company-heading {gap:20px}
  #company .company-brand-name {margin-top:-4px}
}

/* Trim only the company section's trailing space; keep its information grid. */
@media screen {
  #company {padding-bottom:72px}
}
@media screen and (max-width:740px) {
  #company {padding-bottom:56px}
}
@media screen and (max-width:520px) {
  #company {padding-bottom:44px}
}

/* CONTACT artwork uses the common reveal while retaining its pale opacity. */
.contact-atmosphere[data-d-reveal] {--contact-opacity:.16;opacity:var(--contact-opacity)}
.d-motion .contact-atmosphere[data-d-reveal]:not(.d-visible) {opacity:0}
.d-motion .contact-atmosphere[data-d-reveal].d-visible {opacity:var(--contact-opacity)}
@media(max-width:520px) {
  .contact-atmosphere[data-d-reveal] {--contact-opacity:.12}
}
@media print {
  .contact-atmosphere[data-d-reveal] {opacity:var(--contact-opacity)!important;transform:none!important}
}