/*
 * Sakana AI homepage — shared by / and /ja/ only.
 * Visual tokens: https://sakana.ai/fugu/ and https://sakana.ai/namazu/.
 * Keep the existing hero, section order, content grids and widths.
 * Components share the product-page palette, type, borders and interaction states.
 */
:root {
  --bg: #fff;
  --text: #111827;
  --muted: #6b7280;
  --light: #9ca3af;
  --accent: #e10600;
  --border: #e5e7eb;
  --hp-control-border: #d1d5db;
  --hp-control-hover: #9ca3af;
  --hp-nav-text: #374151;
  --hp-dark-hover: #1f2937;
  --hp-menu-hover: #f9fafb;
  --hp-surface-alt: #fafbfc;
  --hp-font:
    "Poppins", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  --hp-max: 1200px;
  --hp-header-height: 80px;
}
::selection {
  background: rgba(225, 6, 0, 0.14);
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
a,
button {
  -webkit-tap-highlight-color: transparent;
}
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The first screen (.page) stays locked to the viewport like the original design;
     the page then scrolls to the content sections below it (see _includes/home/). */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  background: transparent; /* keep transparent: a body background would paint over the z-index:-1 fish canvas */
}
html {
  height: 100%;
  scroll-padding-top: var(--hp-header-height);
  scroll-behavior: smooth;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
html.menu-open,
body.menu-open {
  overflow: hidden;
}
body {
  position: relative;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--hp-font);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a {
  color: inherit;
  text-decoration: none;
}

/* p5 canvas: sits at z-index:-1 (set by sketch.js). All page content is in
     normal flow above it. */

.page {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  pointer-events: none; /* let the p5 canvas receive mouseDragged for boid spawning */
}
/* Re-enable pointer events on interactive elements */
.topnav,
.hero .logo,
.hero .tagline,
.hero .sub,
.hero-actions,
.scroll-cue,
.fugu-cta {
  pointer-events: auto;
}

/* ===== Header — fixed geometry before and after scrolling ===== */
.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  height: var(--hp-header-height);
  padding: 0 24px;
  font-size: 15px;
  font-weight: 400;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  transition:
    transform 0.25s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}
.topnav.is-scrolled {
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  border-bottom-color: var(--border);
}
.topnav__brand {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  min-height: 44px;
}
.topnav__brand .hp-corporate-logo {
  width: 160px;
}
.topnav__links {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 32px;
}
/* Reuse the hero artwork. The wrapper excludes the PNG's transparent margin;
   its visible bounds are (226, 226)–(2974, 649) in the 3200 × 876 source. */
.hp-corporate-logo {
  position: relative;
  display: block;
  width: 180px;
  aspect-ratio: 2748 / 423;
  overflow: hidden;
}
.hp-corporate-logo img {
  position: absolute;
  display: block;
  width: calc(3200 / 2748 * 100%);
  max-width: none;
  height: auto;
  left: calc(-226 / 2748 * 100%);
  top: calc(-226 / 423 * 100%);
}
.nav-item {
  position: relative;
  padding: 8px 4px;
}
.nav-item > .label {
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  cursor: pointer;
  color: var(--hp-nav-text);
  transition: color 0.15s ease;
  font-family: var(--hp-font);
  font-weight: 400;
}
.nav-item > .label .chev {
  width: 10px;
  height: 10px;
  transition: transform 0.15s ease;
  color: var(--light);
}
.nav-item > .label:hover,
.nav-item > .label:focus-visible,
.nav-item.is-expanded > .label {
  color: var(--accent);
}
.nav-item.is-expanded > .label .chev {
  transform: rotate(180deg);
  color: var(--accent);
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 300px;
  padding: 18px 22px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  opacity: 0;
  visibility: hidden;
  z-index: 60;
}
.nav-item.is-expanded .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
}
.dropdown h5 {
  margin: 0 0 10px;
  font-family: var(--hp-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.dropdown ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dropdown li a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  margin: 0 -14px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--hp-nav-text);
  transition:
    background 0.15s,
    color 0.15s;
}
.dropdown li a > svg {
  display: none;
}
.dropdown li a:hover {
  background: var(--hp-menu-hover);
  color: var(--accent);
}
.dropdown li a .sub {
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
  font-weight: 400;
}
.dropdown.dropdown-wide {
  min-width: 380px;
}
.dropdown .group + .group {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.tag-tentative {
  display: inline-block;
  font-size: 9px;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 6px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  font-weight: 600;
}

/* ===== Hero ===== */
.hero {
  --hp-hero-logo-gap: 44px;
  --hp-hero-actions-gap: 48px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px;
  position: relative;
  z-index: 10;
}
.hero .logo {
  display: inline-block;
  margin: 0 0 var(--hp-hero-logo-gap);
  user-select: none;
}
.hero .logo img {
  width: clamp(280px, 38vw, 560px);
  height: auto;
  display: block;
  /* sakana-logo-hero.png has transparent padding above and below the artwork
       (rows 226–648 of 876). Pull it in so the visible logo, not the file's bounding
       box, sets the spacing. Percent margins resolve against width: 226/3200 and 227/3200. */
  margin: -7.06% 0 -7.09%;
}
.tagline {
  font-family: var(--hp-font);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 32px);
  margin: 0;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--text);
}
.sub {
  font-family: var(--hp-font);
  font-weight: 400;
  font-size: clamp(14px, 1.2vw, 18px);
  color: var(--muted);
  margin: 0;
}
/* Hero call-to-action buttons (shared button styles below) */
.hero-actions {
  /* Equal-width columns: both hero buttons take the width of the wider label. */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  justify-content: center;
  gap: 12px;
  margin-top: var(--hp-hero-actions-gap);
}

/* ===== Scroll cue (bottom of the first screen; fades once the visitor scrolls) ===== */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--light);
  font-family: var(--hp-font);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 20;
  transition:
    opacity 0.35s ease,
    color 0.15s ease;
}
.scroll-cue svg {
  width: 18px;
  height: 18px;
  animation: cue-bob 1.9s ease-in-out infinite;
}
.scroll-cue:hover {
  color: var(--text);
}
html.is-scrolled .scroll-cue {
  opacity: 0;
  pointer-events: none;
}
@keyframes cue-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg {
    animation: none;
  }
}

/* ===== Fugu CTA (floating bottom-right link to /applied-careers/) ===== */
.fugu-cta {
  position: absolute;
  right: 40px;
  bottom: 40px;
  display: block;
  width: 180px;
  z-index: 30;
  text-decoration: none;
  line-height: 0;
  opacity: 1;
  transition: opacity 0.15s ease;
}
.fugu-cta img {
  width: 100%;
  height: auto;
  display: block;
}
.fugu-cta:hover {
  opacity: 0.55;
}
.fugu-cta:focus-visible {
  outline: 2px solid #e10600;
  outline-offset: 6px;
  border-radius: 6px;
}

/* (The location / copyright / social line now lives in the page footer: _includes/home/footer.html) */

/* ===== Mobile menu toggle (hidden on desktop) ===== */
.menu-toggle {
  display: none;
  position: absolute;
  top: 10px;
  right: 16px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  z-index: 80;
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  margin: 5px auto;
  border-radius: 2px;
  transition:
    transform 0.22s ease,
    opacity 0.15s ease;
}
.topnav.is-open .menu-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.topnav.is-open .menu-toggle span:nth-child(2) {
  opacity: 0;
}
.topnav.is-open .menu-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Responsive */
@media (max-width: 1024px) {
  :root {
    --hp-header-height: 64px;
  }
  .menu-toggle {
    display: block;
  }
  .topnav {
    display: flex;
    padding: 0 16px;
    gap: 0;
  }
  .topnav__brand {
    position: absolute;
    top: 10px;
    left: 16px;
    z-index: 80;
  }
  .topnav__brand .hp-corporate-logo {
    width: clamp(104px, calc(100vw - 240px), 160px);
  }
  .topnav__links {
    display: none;
  }
  .nav-item {
    display: none;
    width: 100%;
    padding: 0;
  }
  .topnav.is-open {
    position: fixed;
    inset: 0;
    transition: none; /* open the menu instantly (no fade-in of the white background) */
    background: #ffffff;
    flex-direction: column;
    align-items: stretch;
    height: 100dvh;
    padding: var(--hp-header-height) 20px 24px;
    overflow-y: auto;
    z-index: 100;
  }
  .topnav.is-open .topnav__links {
    display: block;
  }
  .topnav.is-open .nav-item {
    display: block;
    border-bottom: 1px solid var(--border);
  }
  .topnav.is-open .dropdown {
    position: static;
    transform: none !important;
    opacity: 1;
    visibility: visible;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 14px;
    min-width: 0;
  }
  .topnav.is-open .dropdown::before {
    display: none;
  }
  /* Mobile navigation uses static group headings instead of disclosure buttons. */
  .topnav.is-open .nav-item > .label {
    display: none;
  }
  .topnav.is-open .dropdown h5 {
    display: block;
    margin: 0;
    padding: 18px 0;
    font-family: var(--hp-font);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text);
  }
  .topnav.is-open .dropdown .group + .group {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 0;
  }
  .topnav.is-open .dropdown li a {
    position: relative;
    margin: 0;
    padding: 10px 32px 10px 0;
    font-size: 15px;
    font-weight: 400;
    color: var(--muted);
  }
  .topnav.is-open .dropdown li a > svg {
    display: block;
    position: absolute;
    top: calc(10px + 0.75em);
    right: 0;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    color: inherit;
    stroke-width: 1.5;
    pointer-events: none;
  }
  .topnav.is-open .dropdown li a:hover {
    background: transparent;
    color: var(--accent);
  }
}
@media (max-width: 900px) {
  .fugu-cta {
    right: 24px;
    bottom: 32px;
    width: 120px;
  }
}
@media (max-height: 620px) {
  .hero {
    --hp-hero-logo-gap: 34px;
  }
  .hero .logo img {
    width: clamp(220px, 32vw, 440px);
  }
  .tagline {
    font-size: 20px;
  }
  .sub {
    font-size: 13px;
  }
  .fugu-cta {
    width: 140px;
    bottom: 28px;
  }
}

/* ===== Section shell ===== */
.hp-sec {
  position: relative;
  padding: clamp(64px, 8vw, 112px) clamp(20px, 4vw, 48px);
  border-top: 1px solid transparent;
  background: #fff;
}
.hp-sec:nth-child(odd) {
  background: var(--hp-surface-alt);
}
.hp-grid {
  max-width: var(--hp-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.hp-wide {
  max-width: var(--hp-max);
  margin-left: auto;
  margin-right: auto;
}

/* Left column: section label (mirrors the product pages) */
.hp-aside {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.hp-eyebrow {
  font-family: var(--hp-font);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.hp-aside__bar {
  width: 28px;
  height: 2px;
  background: var(--accent);
}

/* ===== Typography ===== */
.hp-h2 {
  margin: 0 0 14px;
  font-family: var(--hp-font);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.4;
  letter-spacing: normal;
  color: var(--text);
  text-wrap: balance;
}
.hp-h2--solo {
  margin-bottom: clamp(28px, 3vw, 40px);
} /* a title with no subtitle keeps the same distance to the content below */
.hp-h2__mobile-break {
  display: none;
}
.hp-lead {
  margin: 0 0 clamp(28px, 3vw, 40px);
  font-size: 16px;
  line-height: 1.95;
  color: var(--muted);
}
.hp-lead strong {
  color: var(--text);
  font-weight: 500;
}
.hp-lead a {
  color: var(--text);
  border-bottom: 1px solid var(--border);
  transition:
    color 0.15s,
    border-color 0.15s;
}
.hp-lead a:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.hp-sublabel {
  font-family: var(--hp-font);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--light);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hp-group + .hp-group {
  margin-top: 28px;
}

/* ===== Cards ===== */
.hp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text);
}
.hp-card__title {
  margin: 0;
  font-family: var(--hp-font);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text);
}
a.hp-card:hover .hp-card__title {
  color: var(--accent);
}
.hp-card__tag {
  margin: -4px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
}
.hp-card__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--muted);
}
.hp-card__list {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--muted);
}
.hp-card__list li {
  position: relative;
  padding-left: 14px;
}
.hp-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.hp-card__list li strong {
  display: block;
  color: var(--text);
  font-weight: 600;
}
.hp-card__links {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

/* Product grid on a 6-track base: row 1 = Fugu (4 tracks) + Namazu (2), row 2 = Marlin (3) + Translate (3).
     The layout follows the width of the content column via a container query, never the auto-fit
     heuristic, so tracks are always fully used (no empty column while resizing). */
.hp-products-wrap {
  container-type: inline-size;
  min-width: 0;
}
.hp-products {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.hp-card--feature {
  grid-column: span 4;
  padding: 26px 26px 22px;
}
.hp-card--third {
  grid-column: span 2;
}
.hp-card--half {
  grid-column: span 3;
}
.hp-card--feature .hp-card__title {
  font-size: 22px;
}
.hp-card--feature .hp-card__tag {
  font-size: 14px;
}
.hp-card--feature .hp-card__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 6px;
  gap: 10px 24px;
}
/* Fugu models (Ultra / Cyber / Max) and what each is for: a three-column strip under the bullets. */
.hp-variants {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 20px;
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.hp-variant dt {
  font-family: var(--hp-font);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
}
.hp-variant dd {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
@container (max-width:699px) {
  /* two columns: Fugu full width, Namazu + Marlin, Translate full width (no orphan) */
  .hp-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hp-card--feature {
    grid-column: 1 / -1;
  }
  .hp-card--third,
  .hp-card--half {
    grid-column: auto;
  }
  .hp-products .hp-card:last-child {
    grid-column: 1 / -1;
  }
}
@container (max-width:459px) {
  .hp-products {
    grid-template-columns: 1fr;
  }
  .hp-card--feature,
  .hp-card--third,
  .hp-card--half,
  .hp-products .hp-card:last-child {
    grid-column: auto;
  }
  .hp-card--feature .hp-card__list {
    grid-template-columns: 1fr;
  }
  .hp-variants {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
/* Fallback for browsers without container queries: stack on phones. */
@supports not (container-type: inline-size) {
  @media (max-width: 520px) {
    .hp-products {
      grid-template-columns: 1fr;
    }
    .hp-card--feature,
    .hp-card--third,
    .hp-card--half {
      grid-column: auto;
    }
    .hp-card--feature .hp-card__list,
    .hp-variants {
      grid-template-columns: 1fr;
    }
  }
}

/* ===== Fugu-style text links & buttons ===== */
.hp-more {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  color: var(--accent);
  font-family: var(--hp-font);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.5;
  transition: color 0.2s ease;
}
/* Keep the underline close to the label within the larger mobile tap target. */
.hp-more__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
}
.hp-more svg {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
}
.hp-more:focus-visible {
  color: var(--text);
}
@media (hover: hover) and (pointer: fine) {
  .hp-more:hover {
    color: var(--text);
  }
}
.hp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  margin-top: clamp(24px, 3vw, 36px);
}
.hp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 11.5px 22px;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  justify-content: center;
  text-align: center;
  max-width: 100%;
  border: 1px solid transparent;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.hp-btn--dark {
  background: var(--text);
  color: var(--bg);
}
.hp-btn--dark:hover {
  background: var(--hp-dark-hover);
}
.hp-btn--ghost {
  background: var(--bg);
  border-color: var(--hp-control-border);
  color: var(--text);
}
.hp-btn--ghost:hover {
  border-color: var(--hp-control-hover);
}

/* ===== Small tags ===== */
.hp-tag {
  display: inline-block;
  font-family: var(--hp-font);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 2px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  color: var(--muted);
  vertical-align: middle;
}
.hp-tag--accent {
  color: var(--accent);
  border-color: var(--accent);
}

/* ===== Sector filters — a quiet tab row with the product-page red accent ===== */
.hp-filters {
  display: flex;
  gap: clamp(12px, 2.4vw, 24px);
  margin: 0 0 18px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.hp-filters::-webkit-scrollbar {
  display: none;
}
.hp-filter {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--hp-font);
  font-size: clamp(13px, 1.2vw, 14px);
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.hp-filter::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.hp-filter:hover {
  color: var(--text);
}
.hp-filter.is-active {
  color: var(--accent);
}
.hp-filter.is-active::after {
  opacity: 1;
}
.hp-filter:focus-visible {
  outline-offset: -3px;
}

/* ===== Scrolling rows: floating desktop controls and controls below the cards on mobile. ===== */
.hp-research-wrap,
.hp-solutions-wrap {
  min-width: 0;
}
.hp-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.hp-row-head .hp-sublabel {
  margin: 0;
}
.hp-row-stage {
  position: relative;
}
.hp-row-nav {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 12px;
}
.hp-row-nav button {
  width: 44px;
  height: 44px;
  border-radius: 0;
  border: 1px solid var(--hp-control-border);
  background: #fff;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition:
    border-color 0.15s,
    opacity 0.15s;
}
.hp-row-nav button:not(:disabled):hover {
  border-color: var(--hp-control-hover);
}
.hp-row-nav button:disabled {
  opacity: 0.35;
  cursor: default;
  border-color: var(--border);
}
.hp-row-nav:not(:has(button:enabled)) {
  visibility: hidden;
}
.hp-row-nav svg {
  width: 14px;
  height: 14px;
}
@media (min-width: 761px) {
  .hp-row-nav {
    /* Keep an 8px viewport margin when the section gutters are narrow. */
    --hp-row-control-outset: clamp(22px, calc(4vw - 8px), 34px);
    position: absolute;
    z-index: 2;
    /* Center on the cards, excluding the scroll area's extra bottom shadow space. */
    top: calc(50% - 2px);
    inset-inline: calc(-1 * var(--hp-row-control-outset));
    justify-content: space-between;
    margin: 0;
    transform: translateY(-50%);
    pointer-events: none;
  }
  .hp-row-nav button {
    border-radius: 50%;
    background: rgb(255 255 255 / 90%);
    pointer-events: auto;
  }
  .hp-row-nav button:disabled {
    visibility: hidden;
  }
}
.hp-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(280px, 82%);
  grid-template-rows: repeat(4, auto);
  column-gap: 14px;
  row-gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 12px;
  /* Reserve space for the hover shadow without shifting the cards or CTA. */
  padding: 12px 12px 16px;
  margin: -11px -12px -4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hp-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.hp-row > * {
  scroll-snap-align: start;
}

/* ===== Shared research / solutions cards ===== */
.hp-paper,
.hp-case {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  color: var(--text);
  transition: box-shadow 0.2s ease;
}
.hp-paper:focus-visible,
.hp-case:focus-visible {
  box-shadow: 0 4px 12px -4px rgb(17 24 39 / 18%);
}
@media (hover: hover) and (pointer: fine) {
  .hp-paper:hover,
  .hp-case:hover {
    box-shadow: 0 4px 12px -4px rgb(17 24 39 / 18%);
  }
}

.hp-paper__img,
.hp-case__img {
  position: relative;
  overflow: hidden;
  background: #fff;
}
.hp-paper__img {
  aspect-ratio: 3/2;
}
.hp-case__img {
  aspect-ratio: 16/9;
}
.hp-paper__img img,
.hp-case__img img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.hp-paper__img img {
  object-fit: cover;
  object-position: center;
}
.hp-paper__img--top img {
  object-position: center top;
} /* Keep the original paper-page framing focused on its title. */
.hp-case__img img {
  object-fit: contain;
}
.hp-paper__body,
.hp-case__body {
  --hp-row-card-inset: 18px;
  /* Share metadata, title and description tracks across the entire card row. */
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 8px;
  padding: 16px var(--hp-row-card-inset) 18px;
}
.hp-paper__body::before,
.hp-case__body::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: var(--hp-row-card-inset);
  border-top: 1px solid var(--border);
}
.hp-paper__tags,
.hp-case__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.hp-case__date {
  font-family: var(--hp-font);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--light);
}
.hp-paper__title,
.hp-case__title {
  margin: 0;
  min-height: 3em; /* Two lines at 1.5 line-height; longer titles stay complete. */
  font-family: var(--hp-font);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
}
.hp-paper:hover .hp-paper__title,
.hp-case:hover .hp-case__title {
  color: var(--accent);
}
.hp-paper__desc,
.hp-case__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--muted);
}

/* Language links remain aligned with the brand and navigation at every scroll position. */
.lang-switch {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0;
  font-family: var(--hp-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.lang-switch a {
  display: inline-flex;
  align-items: center;
  height: 100%;
  color: var(--muted);
  transition: color 0.15s;
}
.lang-switch a:hover {
  color: var(--accent);
}
.lang-switch a.is-current {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.lang-switch__sep {
  color: var(--border);
}
@media (max-width: 1024px) {
  /* phones: sits left of the menu button, at the same height, also while the menu is open */
  .lang-switch {
    position: absolute;
    top: 10px;
    bottom: auto;
    right: 64px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 12px;
  }
}

/* ===== Footer ===== */
.hp-footer {
  border-top: 1px solid var(--border);
  padding: clamp(40px, 5vw, 64px) clamp(20px, 4vw, 48px) 24px;
  background: #fff;
}
.hp-footer__inner {
  max-width: var(--hp-max);
  margin: 0 auto;
}
.hp-footer__top {
  display: grid;
  grid-template-columns: minmax(200px, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: 28px;
}
.hp-footer__brand > a {
  display: inline-block;
  vertical-align: top;
}
.hp-footer__brand p {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--muted);
  max-width: 28ch;
}
.hp-footer h4 {
  margin: 0 0 12px;
  font-family: var(--hp-font);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--light);
}
.hp-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hp-footer li a {
  font-size: 15px;
  color: var(--text);
  transition: color 0.15s ease;
}
.hp-footer li a:hover {
  color: var(--accent);
}
.hp-footer__bottom {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  font-family: var(--hp-font);
  font-size: 12px;
  color: var(--light);
}
.hp-footer__bottom .left {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
}
.hp-footer__bottom .right {
  display: flex;
  gap: 18px;
  align-items: center;
}
.hp-footer__bottom a {
  display: inline-flex;
  align-items: center;
  color: var(--light);
  transition: color 0.15s;
}
.hp-footer__bottom a:hover {
  color: var(--text);
}
.hp-footer__bottom .icon-x {
  width: 13px;
  height: 13px;
}

/* ===== Careers — centered content without a section-label column ===== */
.hp-careers .hp-grid {
  grid-template-columns: minmax(0, 1fr);
}
.hp-careers__content {
  justify-self: center;
  width: 100%;
  max-width: 960px;
  text-align: center;
}
.hp-careers .hp-actions {
  justify-content: center;
}
/* Reserve the decorative canvas's size before its deferred script loads. */
.hp-dots__stage {
  max-width: 480px;
  margin: clamp(24px, 3vw, 36px) auto 0;
  color: #e10600;
  aspect-ratio: 128 / 84;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .hp-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .hp-aside {
    position: static;
    top: auto;
    margin-bottom: 16px;
  }
  .hp-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hp-footer__brand {
    grid-column: 1 / -1;
  }
  .hp-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* Fugu / Namazu mobile rhythm: 48px sections, 16–20px gutters,
   label → 10px → 28px rule → 38px → heading. */
@media (max-width: 760px) {
  :root {
    --hp-mobile-gutter: clamp(16px, 4vw, 20px);
  }
  .hp-sec {
    padding: 48px var(--hp-mobile-gutter);
    border-top: 0;
  }
  .hp-h2 {
    margin-bottom: 20px;
  }
  .hp-h2:not(.hp-h2--mobile-lines) {
    width: 100%;
    text-wrap: wrap;
  }
  /* Keep the authored Japanese title lines intact on narrow screens. */
  .hp-h2--mobile-lines {
    font-size: clamp(22px, 7vw, 26px);
    white-space: nowrap;
  }
  .hp-h2__mobile-break {
    display: initial;
  }
  .hp-h2--solo {
    margin-bottom: 32px;
  }
  .hp-lead {
    margin-bottom: 32px;
  }
  .hero {
    padding-inline: var(--hp-mobile-gutter);
  }
  .hero .tagline {
    text-wrap: balance;
  }
  .hero .tagline:lang(ja) {
    word-break: keep-all;
  }
  .hero-actions {
    width: 100%;
    max-width: 400px;
  }
  .hero-actions .hp-btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 12px;
  }
  .hp-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 24px;
  }
  .hp-products {
    gap: 16px;
  }
  .hp-card,
  .hp-card--feature {
    padding: 20px;
  }
  .hp-card--feature .hp-card__list {
    row-gap: 16px;
  }
  .hp-card__links {
    padding-top: 8px;
    gap: 4px 16px;
  }
  .hp-row {
    column-gap: 16px;
  }
  .hp-filters {
    margin-bottom: 16px;
  }
  .hp-footer {
    padding: 48px var(--hp-mobile-gutter) 24px;
  }
  .hp-footer__top {
    column-gap: 24px;
    row-gap: 32px;
  }
  .hp-footer ul {
    gap: 0;
  }
  .hp-footer li a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 8px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }
  .hp-footer__bottom {
    margin-top: 32px;
    padding-top: 0;
    gap: 16px;
  }
  .hp-footer__bottom .left {
    gap: 8px 16px;
  }
  .hp-footer__bottom .right {
    gap: 8px;
  }
  .hp-footer__bottom .right a {
    min-width: 44px;
    min-height: 44px;
  }
  .hp-footer__bottom .icon-x {
    width: 18px;
    height: 18px;
  }
}
@media (max-width: 359px) {
  .hero-actions {
    flex-direction: column;
    max-width: 320px;
  }
}
@media (max-width: 760px) and (max-height: 620px) {
  .hero {
    padding-top: calc(var(--hp-header-height) + 16px);
    padding-bottom: 144px;
  }
  .fugu-cta {
    width: 104px;
    right: var(--hp-mobile-gutter);
    bottom: 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hp-paper,
  .hp-case {
    transition: none;
  }
}

/* Header states and keyboard interaction. */
.topnav.is-hidden:not(:focus-within) {
  transform: translateY(-110%);
}
.hp-row::-webkit-scrollbar {
  display: none;
}
.hp-row > [hidden] {
  display: none;
}
.hp-card,
.hp-grid > *,
.hp-footer__top > * {
  min-width: 0;
}
.hp-case__title,
.hp-paper__title {
  transition: color 0.15s ease;
}
.hp-paper:focus-visible .hp-paper__title,
.hp-case:focus-visible .hp-case__title {
  color: var(--accent);
}
/* Keep the canvas within the hero's width: p5 windowWidth includes the scrollbar. */
.hero canvas {
  max-width: 100%;
}
/* Use the full navigation only when the brand, labels and languages fit. */
@media (min-width: 1025px) and (max-width: 1180px) {
  .topnav {
    column-gap: 16px;
  }
  .topnav__links {
    gap: 16px;
  }
}
@media (max-width: 1024px) {
  .topnav.is-open {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    transform: none;
    overscroll-behavior: contain;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
  .topnav.is-open .menu-toggle,
  .topnav.is-open .topnav__brand {
    position: fixed;
  }
  .topnav.is-open::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: var(--hp-header-height);
    background: var(--bg);
    z-index: 70;
  }
  .topnav.is-open .lang-switch {
    position: fixed;
    bottom: auto;
    z-index: 80;
  }
}
@media (max-width: 900px) {
  .hero .logo img {
    max-width: 100%;
  }
  .hp-btn {
    white-space: normal;
  }
  .hp-card__links .hp-more {
    min-height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}