/* ============================================================
   chrome.css — fixed header / menu overlay / home bar / footer
   Geometry from capture JSON rects (1440px canvas) and the
   reference screenshots (shot-00, menu-open, shot-13/14).
   ============================================================ */

/* ---------- shared: 16x16 inverted-corner wedge (pure CSS) ----------
   The modifier names the corner the solid mass sits in, i.e. the corner
   that touches the white panel; the quarter disc is cut from the opposite
   one. --nc overrides the fill when the panel is not white. */

.notch {
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.notch--tl { background: radial-gradient(circle 16px at 100% 100%, transparent 15.5px, var(--nc, #fff) 16px); }
.notch--tr { background: radial-gradient(circle 16px at 0    100%, transparent 15.5px, var(--nc, #fff) 16px); }
.notch--br { background: radial-gradient(circle 16px at 0    0,    transparent 15.5px, var(--nc, #fff) 16px); }
.notch--bl { background: radial-gradient(circle 16px at 100% 0,    transparent 15.5px, var(--nc, #fff) 16px); }

/* ---------- shared: fixed layers pinned to the 1440 canvas ---------- */

#site-header,
#menu-overlay {
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: -720px;
  width: 1440px;
}

#site-header {
  height: 94px;
  z-index: 100;
  pointer-events: none;
}

#site-header > * {
  pointer-events: auto;
}

/* ---------- header: white logo box ---------- */

.header__logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 216px;
  height: 94px;
  padding: 24px 24px 24px 33px;
  background: #fff;
  border-radius: 0 0 16px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

/* wordmark: Poppins mass with the ampersand carrying the accent colour */
.header__logo-mark {
  font-family: var(--font-en);
  font-size: 30px;
  font-weight: 800;
  line-height: 30px;
  letter-spacing: -0.6px;
  color: var(--navy);
}

.logo-amp {
  color: var(--red);
}

.header__logo-name {
  font-family: var(--font-jp);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 12px;
  letter-spacing: 0.2px;
  color: var(--navy);
  white-space: nowrap;
}

.header__notch--right {
  top: 0;
  left: 216px;
}

.header__notch--below {
  top: 94px;
  left: 0;
}

/* ---------- header: navy Entry + Menu box ---------- */

.header__right {
  position: absolute;
  top: 0;
  left: 1177px;
  width: 263px;
  height: 88px;
  padding: 22px 24px;
  background: var(--navy);
  border-radius: 0 0 0 8px;
  display: flex;
  align-items: center;
  gap: 25px;
}

.header__entry {
  width: 150px;
  height: 44px;
  padding: 14px 21px 14px 16px;
  background: var(--lavender);
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s var(--ease);
}

.header__entry-label {
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: 900;
  line-height: 16px;
  white-space: nowrap;
  color: var(--navy);
  transition: color 0.3s var(--ease);
}

.header__entry-icon {
  position: relative;
  width: 12px;
  height: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header__entry-dot {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--navy);
  transition: opacity 0.3s var(--ease);
}

/* white arrow sits under the dot at opacity 0 and swaps in on hover */
.header__entry-arrow {
  display: block;
  position: absolute;
  left: 0;
  bottom: 1.34px;
  width: 12px;
  height: 10.66px;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.header__entry:hover {
  background: #3d3d55;
}

.header__entry:hover .header__entry-label {
  color: var(--lavender);
}

.header__entry:hover .header__entry-dot {
  opacity: 0;
}

.header__entry:hover .header__entry-arrow {
  opacity: 1;
}

.header__menu {
  width: 40px;
  height: 33px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.header__menu-lines {
  width: 40px;
  height: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.header__menu-line {
  width: 40px;
  height: 1px;
  background: #eee;
  transition: transform 0.3s var(--ease);
}

.header__menu:hover .header__menu-line:first-child {
  transform: translateY(-2px);
}

.header__menu:hover .header__menu-line:last-child {
  transform: translateY(2px);
}

.header__menu-label {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  line-height: 13px;
  color: var(--lavender);
}

/* ---------- menu overlay ---------- */

#menu-overlay {
  height: 100vh;
  min-height: 900px;
  background: var(--navy);
  color: #fff;
  z-index: 200;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}

#menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--ease), visibility 0s;
}

/* Soft light/shade wash behind the sitemap, standing in for the artwork the
   reference capture holds at a near-flat opacity. */
.menu__art {
  position: absolute;
  top: -92px;
  left: 193px;
  width: 1408px;
  height: 1085px;
  pointer-events: none;
  background-image:
    radial-gradient(closest-side, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 100%),
    radial-gradient(closest-side, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 100%),
    radial-gradient(closest-side, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 100%),
    radial-gradient(closest-side, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 100%);
  background-repeat: no-repeat;
  background-size: 900px 620px, 700px 480px, 1100px 760px, 820px 560px;
  background-position: 18% 12%, 82% 78%, 92% 8%, 4% 92%;
}

.menu__logo {
  position: absolute;
  top: 22px;
  left: 25px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.menu__logo-mark {
  font-family: var(--font-en);
  font-size: 40px;
  font-weight: 800;
  line-height: 40px;
  letter-spacing: -0.8px;
  color: #fff;
}

.menu__logo-name {
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}

.menu__close {
  position: absolute;
  top: 0;
  left: 1352px;
  width: 88px;
  height: 88px;
  background: rgba(255, 255, 255, 0.12);
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0 0 0 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background-color 0.3s var(--ease);
}

.menu__close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.menu__close-x {
  position: absolute;
  top: 24px;
  left: 36px;
  width: 16px;
  height: 16px;
}

.menu__close-x span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22.63px;
  height: 1px;
  background: #eee;
}

.menu__close-x span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.menu__close-x span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.menu__close-label {
  position: absolute;
  top: 48px;
  left: 0;
  width: 88px;
  text-align: center;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  line-height: 13px;
  color: var(--lavender);
}

/* ---------- sitemap columns (menu + footer share the pattern) ---------- */

.menu__col,
.footer__col {
  position: absolute;
  display: flex;
  align-items: stretch;
}

.menu__bar,
.footer__bar {
  width: 16px;
  flex: 0 0 16px;
}

.menu__col-body,
.footer__col-body {
  margin-left: 8px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.menu__head,
.footer__head {
  font-family: var(--font-en);
  font-weight: 800;
  white-space: nowrap;
}

.menu__links,
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.menu__links > *,
.footer__links > * {
  font-family: var(--font-jp);
  font-size: 18px;
  font-weight: 900;
  line-height: 18px;
  letter-spacing: 0.54px;
  white-space: nowrap;
}

.menu__links > a,
.footer__links > a {
  transition: opacity 0.3s var(--ease);
}

.menu__links > a:hover,
.footer__links > a:hover {
  opacity: 0.6;
}

/* menu: 3 columns x 2 rows, headings 56px */
.menu__col {
  color: #fff;
}

.menu__head {
  font-size: 56px;
  line-height: 56px;
  letter-spacing: -1.12px;
}

.menu__col--about    { left: 228px; top: 168px; }
.menu__col--business { left: 591px; top: 168px; }
.menu__col--culture  { left: 954px; top: 168px; }
.menu__col--work     { left: 228px; top: 486px; }
.menu__col--blog     { left: 591px; top: 486px; }
.menu__col--recruit  { left: 954px; top: 486px; }

.menu__col--about    .menu__bar { background: var(--orange); }
.menu__col--business .menu__bar { background: var(--green); }
.menu__col--culture  .menu__bar { background: var(--cyan); }
.menu__col--work     .menu__bar { background: var(--blue); }
.menu__col--blog     .menu__bar { background: var(--magenta); }
.menu__col--recruit  .menu__bar { background: var(--red); }

/* ---------- entry block (menu + footer share the pattern) ---------- */

.menu__entry,
.footer__entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu__entry-text,
.footer__entry-text {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.menu__entry-en,
.footer__entry-en {
  font-family: var(--font-en);
  font-size: 48px;
  font-weight: 800;
  line-height: 48px;
  letter-spacing: -0.96px;
}

.menu__entry-jp,
.footer__entry-jp {
  font-family: var(--font-jp);
  font-size: 18px;
  font-weight: 900;
  line-height: 18px;
  letter-spacing: 0.54px;
}

.menu__entry-circle,
.footer__entry-circle {
  width: 80px;
  height: 80px;
  border-radius: 128px;
  background: var(--lavender);
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu__entry-circle svg,
.footer__entry-circle svg {
  display: block;
  width: 16px;
  height: 14px;
  transition: transform 0.3s var(--ease);
}

.menu__entry:hover .menu__entry-circle svg,
.footer__entry:hover .footer__entry-circle svg {
  transform: translateX(4px);
}

.menu__entry {
  position: absolute;
  top: 810px;
  left: 228px;
  width: 648px;
  height: 80px;
  color: #fff;
}

/* second CTA on the same row — B2B contact */
.menu__contact {
  left: 954px;
  width: 400px;
}


/* ---------- home bar (breadcrumb) ---------- */

#homebar {
  height: 137px;
  padding: 0 64px 80px;
}

.homebar__bar {
  width: 1312px;
  height: 57px;
  padding: 20px 40px;
  background: var(--navy);
  border-radius: 128px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.homebar__label {
  padding-bottom: 1px;
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.48px;
  color: #fff;
}

/* ---------- footer (white background, navy ink) ---------- */

#site-footer {
  height: 708px;
  background: #fff;
  color: var(--navy);
}

.footer__head {
  font-size: 48px;
  line-height: 48px;
  letter-spacing: -0.96px;
}

.footer__col--about    { left: 64px;   top: 0; }
.footer__col--business { left: 341px;  top: 0; }
.footer__col--culture  { left: 618px;  top: 0; }
.footer__col--work     { left: 895px;  top: 0; }
.footer__col--blog     { left: 1172px; top: 0; }
.footer__col--recruit  { left: 64px;   top: 270px; }

.footer__col--about    .footer__bar { background: var(--orange); }
.footer__col--business .footer__bar { background: var(--green); }
.footer__col--culture  .footer__bar { background: var(--cyan); }
.footer__col--work     .footer__bar { background: var(--blue); }
.footer__col--blog     .footer__bar { background: var(--magenta); }
.footer__col--recruit  .footer__bar { background: var(--red); }

.footer__entry {
  position: absolute;
  top: 540px;
  left: 64px;
  width: 535px;
  height: 123px;
  padding-bottom: 42px;
  border-bottom: 1px solid var(--navy);
}

/* second CTA on the same row — B2B contact */
.footer__contact {
  left: 640px;
  width: 380px;
}

/* right-anchored so the giant wordmark still ends on the 1376px margin.
   Raised from 418px so it clears the Contact CTA that now shares the row. */
.footer__wordmark {
  position: absolute;
  top: 372px;
  right: 64px;
  height: 147px;
  display: flex;
  align-items: center;
}

.footer__wordmark-text {
  font-family: var(--font-en);
  font-size: 210px;
  font-weight: 800;
  line-height: 147px;
  letter-spacing: -6px;
  color: var(--navy);
}

/* anchored right so the copyright always ends on the 1376px margin,
   regardless of how wide the JP face renders */
.footer__meta {
  position: absolute;
  top: 645px;
  right: 64px;
  height: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 40px;
}

.footer__copy {
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: -0.36px;
  white-space: nowrap;
}

/* stop background scroll while the overlay is up */
body.menu-open {
  overflow: hidden;
}