/* ============================================================
   BEYOND Lune — pixel-perfect rebuild
   Design tokens + layout matched to beyondlune.co.jp (1440 ref)
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Noto Serif JP", serif;
  color: var(--navy);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }

/* ---------- Tokens ---------- */
:root {
  --navy:        #1F2A44;
  --navy-cta:    #17284F;
  --lavender:    #BBA0AF;
  --lavender-2:  #B8A6C9;
  --gray:        #9C9C9C;
  --ink:         #1F2A44;
  --white:       #FFFFFF;

  --f-display:   "Kaisei Decol", serif;
  --f-serif:     "Noto Serif JP", serif;
  --f-sans:      "Noto Sans JP", sans-serif;
  --f-cormorant: "Cormorant", serif;
  --f-bodoni:    "Bodoni Moda", serif;

  --pad-x: 89px;            /* desktop content side padding */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* expo-out, premium */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: 117px;
  z-index: 60;
  display: flex;
  align-items: center;
  padding: 0 var(--pad-x);
  transition: background-color .5s var(--ease-out), backdrop-filter .5s var(--ease-out);
  /* override hello-elementor's own .site-header (max-width:1140/centered) */
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  left: 0 !important;
  right: 0 !important;
  box-sizing: border-box;
}
.site-header.is-solid {
  background: rgba(31, 42, 68, 0.85);
  backdrop-filter: blur(10px);
}
.site-header__logo {
  height: 64px;
  width: auto;
  display: block;
}
.site-header__logo img { height: 100%; width: auto; filter: brightness(0) invert(1); opacity: .62; transition: opacity .4s var(--ease-out), filter .4s var(--ease-out); }
.site-header__logo:hover img { opacity: .9; }

/* ---------- ink variant: transparent header over a LIGHT first view ----------
   JS swaps site-header--solid → site-header--ink at boot; while un-scrolled the
   nav/logo render navy on the light page, and flip back to white the moment the
   solid navy bar fades in (.is-solid). No-JS keeps the old solid bar. */
.site-header--ink:not(.is-solid) .site-nav a { color: var(--navy); }
.site-header--ink:not(.is-solid) .site-nav a.is-current { color: var(--gray); }
.site-header--ink:not(.is-solid) .site-header__logo img { filter: brightness(0) invert(0); opacity: .8; }
.site-header--ink:not(.is-solid) .nav-toggle span { background: var(--navy); }
body.nav-open .site-header--ink .nav-toggle span { background: #fff; }
body.nav-open .site-header--ink:not(.is-solid) .site-nav a { color: #fff; }

.site-nav {
  margin-left: auto;
}
.site-nav ul {
  display: flex;
  align-items: center;
  gap: 34px;
}
.site-nav a {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  color: var(--white);
  letter-spacing: -0.05em;
  position: relative;
  padding-bottom: 4px;
  transition: color .35s var(--ease-out);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a.is-current { color: var(--gray); }

/* mobile menu toggle (hidden on desktop) */
.nav-toggle { display: none; }

/* ============================================================
   HERO
   ============================================================ */
/* ============================================================
   ABOUT PAGE GROUND
   Figma About-2 sits on the same peach texture as TOP-2 (verified: the
   texture at object-fit:cover reproduces the render's colour at every
   sample). Without this the sections fall back to the white body.
   ============================================================ */
.about-page { position: relative; background-color: #fdf7f0; overflow: hidden; }
.about-page__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
}
.about-page > .hero,
.about-page > .section,
.about-page > .site-footer { position: relative; z-index: 1; }

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
@media (min-width: 768px) {
  .hero { min-height: max(100vh, 900px); }
}
/* Figma About-2 composites the photo far lighter than a full-strength image
   with a scrim: fitting the render against bl-hero.jpg gives a flat
   photo-at-33%-over-#DCCFC5 across every region (err ~2/255, no gradient),
   so there is no dark scrim on the PC hero either. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: rgb(220, 207, 197);
  will-change: transform;            /* v5.4: GPU-promote the parallax layer (no visual change) */
}
.hero__bg-img {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  background-image: url("https://beyondlune.co.jp/wp-content/uploads/2026/07/bl-hero.jpg");
  background-size: cover;
  background-position: 50% 50%;
  opacity: .33;
  will-change: transform;
}
/* content tracks the centred 1440 design frame instead of hugging the
   viewport edge (client: "move" on the wide-screen capture) */
.hero__content {
  position: relative;
  z-index: 2;
  padding: 0 var(--pad-x) 208px;
  margin-inline: auto;
  width: 100%;
  max-width: 1440px;
}
.hero__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 102px;
  line-height: 1;
  color: var(--white);
  margin-bottom: 26px;
  letter-spacing: .005em;
}
.hero__catch {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 48px;
  line-height: 1.35;
  color: var(--navy);
  margin-bottom: 30px;
}
.hero__sub {
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.94;
  letter-spacing: -0.06em;
  color: #000;
  margin-bottom: 44px;
}
/* Figma About-2 FV pill = 362×94 / 24px (same as the home FV pill).
   Premium treatment is inherited from .btn-pill and left untouched. */
.hero .btn-pill {
  width: 362px; height: 94px; padding: 0; justify-content: center;
  font-size: 24px; letter-spacing: 3.12px;
}
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  background: var(--navy-cta);
  color: var(--white);
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: 18px;
  padding: 30px 56px;
  border-radius: 132px;
  position: relative;
  overflow: hidden;                 /* clip the flash sweep */
}
/* text stays WHITE on every state; NO colour change on hover (theme a:hover was hijacking it) */
.btn-pill, .btn-pill:link, .btn-pill:visited, .btn-pill:hover, .btn-pill:focus, .btn-pill:active {
  color: #fff !important;
  background: var(--navy-cta);
}
/* the ONE hover animation: a single flash-light sweep across the button */
.btn-pill::after {
  content: "";
  position: absolute; top: 0; left: -85%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 15%, rgba(255,255,255,.5) 50%, transparent 85%);
  transform: skewX(-20deg);
  pointer-events: none;
  opacity: 0;
}
.btn-pill:hover::after { animation: bl-flash .75s var(--ease-out); }
@keyframes bl-flash {
  0%   { left: -85%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 145%; opacity: 0; }
}

/* thin flowing-line motif (echoes yugeisha reference) */
.hero__lines {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: soft-light;
}
.hero__lines path {
  fill: none;
  stroke: rgba(255,255,255,.6);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section { position: relative; }
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* big faint English watermark word */
.wm {
  font-family: var(--f-cormorant);
  font-weight: 400;
  color: rgba(31, 42, 68, 0.08);
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

/* ============================================================
   MISSION / VISION
   ============================================================ */
/* Figma About-2 mv section = 798h: content starts at 82 and ends 41 above the
   CEO block (measured off the render, not the old 118/118 guess). */
.mv {
  padding: 60px 0 41px;   /* was 82 — nudge the whole M/V block up a touch (matches the SP treatment) */
}
/* Figma About-2: cols 537 + gap 159 = 1233. At 471 the lead wrapped onto a
   4th line and left the outer margins empty (client arrowed both sides). */
.mv__inner {
  max-width: 1233px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 537px 537px;
  justify-content: space-between;
  position: relative;
}
.mv__inner::before {           /* center divider — Figma: 447h starting 120 into the inner */
  content: "";
  position: absolute;
  top: 120px; height: 447px; left: 50%;
  width: 1px;
  background: rgba(31,42,68,.18);
}
.mv__col { position: relative; }
.mv__head { position: relative; margin-bottom: 88px; height: 150px; overflow: visible; }
/* Figma About-2: big italic Cormorant watermark, tilted -6.6°, faint gray */
.mv__wm {
  position: absolute;
  /* top -18→61 so the faint watermark sits CENTRED behind the solid label
     (client wanted the PC M/V same as the SP fix — the wm was riding ~79px high
     above the label). SP overrides this to top:34. */
  left: -6px; top: 61px;
  font-family: var(--f-cormorant);
  font-style: italic;
  font-weight: 400;
  font-size: 150px;
  line-height: 1;
  letter-spacing: 18px;
  color: rgba(156, 156, 156, 0.2);
  white-space: nowrap;
  transform: rotate(-6.6deg);
  transform-origin: left center;
  pointer-events: none;
}
/* sits at the LEFT of the watermark, per the client's reference crop */
.mv__label {
  position: absolute;
  left: 40px; top: 92px;
  font-family: var(--f-cormorant);
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  letter-spacing: 2.4px;
  color: var(--navy);
}
.mv__lead {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.425;      /* Figma line advance 57px */
  letter-spacing: 8px;
  color: var(--lavender);
  /* soft, light shadow like the Figma — the old 2/4/4 rgba(0,0,0,.25) was a hard
     black drop that bled onto the rose text and read as a muddy purple (client:
     "text color figma se match nahi"). Keep only a gentle depth. */
  text-shadow: 0 2px 6px rgba(0,0,0,.12);
  margin-bottom: 34px;
}
.mv__text {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.88;
  letter-spacing: 3.12px;
  color: var(--navy);
}

/* ============================================================
   CEO MESSAGE
   ============================================================ */
/* Figma About-2 代表メッセージ = 1247h. Measured rhythm off the render: label ink
   @99, heading @235, then body+sign on one unbroken 50px baseline grid @380..1130. */
.ceo {
  position: relative;
  padding: 96px 50px 84px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.ceo__bg {
  position: absolute; inset: 0; z-index: -2;
  background-image: url("https://beyondlune.co.jp/wp-content/uploads/2026/07/bl-sphere.jpg");
  background-size: cover;
  background-position: center;
}
.ceo__bg::after {                 /* soften like live (image at ~44%) */
  content: ""; position: absolute; inset: 0;
  background: rgba(255,255,255,.30);
}
.ceo__scrim {                     /* gentle depth so white text stays legible yet airy */
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(31,42,68,.22) 0%, rgba(31,42,68,.08) 32%, rgba(31,42,68,.10) 68%, rgba(31,42,68,.20) 100%);
}
.ceo__label {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 48px;
  line-height: 1;
  letter-spacing: 4.32px;
  color: var(--white);
  margin-bottom: 80px;
}
.ceo__head {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: 64px;
  line-height: 1.25;
  letter-spacing: 8.32px;
  color: var(--white);
  text-shadow: 2px 4px 4px rgba(0,0,0,.25);
  margin-bottom: 59px;
}
/* one sentence per line (breaks are authored in the markup) — do not cap the
   width or the long sentences re-wrap and the 50px grid breaks */
.ceo__body {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 50px;
  color: var(--white);
  margin: 0 auto;
}
.ceo__sign {
  margin-top: 0;
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 50px;
  color: var(--white);
}

/* ============================================================
   COMPANY PROFILE
   ============================================================ */
.company {
  padding: 130px 80px 185px;
  text-align: center;
  position: relative;
}
/* PC watermark is the full-width uppercase "COMPANY PROFILE"; the element's
   text stays "Company Profile" because SP-2 uses it as a cased eyebrow. */
.company__wm {
  font-family: var(--f-cormorant);
  font-style: italic;
  font-weight: 400;
  font-size: 180px;
  line-height: 1;
  letter-spacing: -7.2px;
  text-transform: uppercase;
  color: rgba(156, 156, 156, 0.1);
  margin-bottom: -135px;
  white-space: nowrap;
}
.company__label {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 48px;
  letter-spacing: 4.32px;
  color: var(--navy);
  margin-bottom: 131px;
}
.company__table {
  max-width: 947px;
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 50px;
}
/* Figma draws no rules between the rows */
.company__row {
  display: grid;
  grid-template-columns: 128px 734px;
  gap: 85px;
  align-items: start;
}
.company__key {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 46px;
  color: var(--navy);
}
.company__val {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 46px;      /* Figma: rows pitch 96 = 46 line + 50 gap */
  color: var(--navy);
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  position: relative;
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: 120px 20px 128px;
  overflow: hidden;
}
.contact__wm {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-cormorant);
  font-weight: 400;
  font-size: 250px;
  line-height: 1;
  color: rgba(156, 156, 156, 0.20);
  pointer-events: none;
  white-space: nowrap;
}
.contact__label {
  position: relative;
  font-family: var(--f-cormorant);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: .04em;
  color: var(--gray);
  margin-bottom: 18px;
}
.contact__title {
  position: relative;
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 48px;
  color: var(--white);
  margin-bottom: 26px;
}
.contact__sub {
  position: relative;
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 2;
  color: rgba(255,255,255,.85);
  margin-bottom: 46px;
}
.contact .btn-pill,
.contact .btn-pill:hover, .contact .btn-pill:focus {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.7);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: 30px 20px 40px;
  border-top: 1px solid rgba(255,255,255,.12);
  /* override hello-elementor's own .site-footer (max-width:1140/centered) so
     our footer spans the full viewport instead of a 1140px centered strip */
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
}
.site-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}
/* 2026-07-22 client: hide the "BEYOND Lune" wordmark, keep only the (bigger)
   logo — .site-footer is text-align:center so the inline-flex mark stays centred */
.site-footer__logo img { height: 80px; filter: brightness(0) invert(1); }
.site-footer__logo span { display: none; }
.footer-nav ul {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 22px;
}
.footer-nav a {
  font-family: var(--f-bodoni);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  color: var(--white);
  transition: opacity .3s;
}
.footer-nav a:hover { opacity: .7; }
/* Footer SNS row (v4.2) — same Bodoni italic voice as .footer-nav, smaller */
.site-footer__sns {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 10px 30px; margin-bottom: 22px;
}
.site-footer__sns a {
  font-family: var(--f-bodoni); font-style: italic; font-weight: 500;
  font-size: 20px; color: var(--white); transition: opacity .3s;
}
.site-footer__sns a:hover { opacity: .7; }
.site-footer__copy {
  font-family: var(--f-cormorant);
  font-size: 14px;
  letter-spacing: .06em;
  color: rgba(255,255,255,.65);
}

/* ============================================================
   LENIS SMOOTH-SCROLL — official required stylesheet (v5.4).
   Without this the browser's native scroll-behavior fights Lenis
   and the wheel reads as stutter / カクカク on PC. No visual change.
   ============================================================ */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ============================================================
   FLOATING CTA
   ============================================================ */
.float-cta {
  position: fixed;
  right: 34px; bottom: 34px;
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--navy-cta);
  color: var(--white);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 15px;
  padding: 16px 26px;
  border-radius: 100px;
  box-shadow: 0 10px 30px rgba(23,40,79,.28);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--ease-out), transform .45s var(--ease-out), box-shadow .4s var(--ease-out);
  overflow: hidden;                 /* clip the flash sweep */
}
.float-cta, .float-cta:hover, .float-cta:focus { color: #fff !important; background: var(--navy-cta); }
.float-cta.is-in { opacity: 1; transform: translateY(0); }
/* spec: on hover the CTA lifts slightly + shadow intensifies (higher specificity than .is-in so it wins) */
.float-cta.is-in:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(23,40,79,.45); }
/* same single flash-light sweep on hover — no colour/position change */
.float-cta::after {
  content: ""; position: absolute; top: 0; left: -85%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 15%, rgba(255,255,255,.5) 50%, transparent 85%);
  transform: skewX(-20deg); pointer-events: none; opacity: 0;
}
.float-cta:hover::after { animation: bl-flash .75s var(--ease-out); }
/* v5.4 client: floating お問い合わせ CTA felt small on PC → a touch bigger.
   PC (≥1101) only; tablet & mobile sizes are untouched. */
@media (min-width: 1101px) {
  .float-cta { font-size: 18px; padding: 20px 34px; gap: 14px; }
}

/* ============================================================
   INTRO VEIL (premium first-view)
   ============================================================ */
.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: radial-gradient(130% 125% at 50% 12%, #172140 0%, #101a30 45%, #0a1120 100%);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.intro.is-hidden { pointer-events: none; }
.intro__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intro__lines path {
  fill: none;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.intro__lines-g.is-drift { animation: introDrift 24s ease-in-out infinite alternate; }
@keyframes introDrift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-14px,10px,0) scale(1.03); }
}
.intro__mark {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
}
.intro__mark-logo { height: 74px; margin: 0 auto 20px; filter: brightness(0) invert(1); opacity: .95; }
.intro__mark-word {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 42px;
  letter-spacing: .32em;
  padding-left: .32em;
  color: #fff;
  line-height: 1;
}
.intro__mark-rule {
  width: 0; height: 1px; margin: 22px auto 0;
  background: rgba(184,166,201,.6);
}
.intro__mark-tag {
  font-family: var(--f-cormorant);
  font-size: 13px;
  letter-spacing: .52em;
  padding-left: .52em;
  text-transform: uppercase;
  color: rgba(199,187,214,.9);
  margin-top: 16px;
}

/* ============================================================
   BRAND INTRO (home FV) — the site opens on the mark: monogram +
   "BEYOND Lune" rise together at the centre of a navy veil, then
   each flies to its own place in the page (logo → header slot,
   wordmark → FV title slot; JS-measured FLIP) as the veil melts.
   Shown once per session — the inline head gate adds
   html.bl-intro-on before first paint, so there is never a flash.
   ============================================================ */
/* the markup carries style="display:none" so it stays invisible on any page
   still serving older CSS — the gate class + !important switches it on here */
.bl-intro { position: fixed; inset: 0; z-index: 400; display: none; }
html.bl-intro-on .bl-intro {
  display: block !important;
  /* failsafe: if scripts never arrive, the veil releases itself */
  animation: blIntroFail 1s ease 8s forwards;
}
html.bl-intro-on body {
  overflow: hidden;                              /* no scrolling behind the veil */
  animation: blIntroUnlock 0s 9s forwards;       /* …and that lock also self-releases */
}
.bl-intro__veil {
  position: absolute; inset: 0;
  background: radial-gradient(130% 125% at 50% 12%, #223052 0%, #1F2A44 55%, #141D33 100%);
}
.bl-intro__mark {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 34px;
}
.bl-intro__logo {
  height: clamp(88px, 12vw, 132px); width: auto;
  filter: brightness(0) invert(1);               /* same white treatment as the header logo */
  opacity: 0;
  animation: blIntroRise 1.15s var(--ease-out) .35s forwards;
}
.bl-intro__word {
  /* metrics must MATCH .top2-fv__title (family/weight/line-height, no tracking)
     so the FLIP scale lands pixel-perfect on the real title */
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(30px, 4.4vw, 56px); line-height: 1.2;
  color: #fff; white-space: nowrap;
  opacity: 0;
  animation: blIntroRise 1.2s var(--ease-out) .62s forwards;
}
@keyframes blIntroRise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes blIntroFail { to { opacity: 0; visibility: hidden; } }
@keyframes blIntroUnlock { to { overflow-x: hidden; overflow-y: auto; } }

/* ---------- animation initial states (JS-gated) ---------- */
.js-anim .reveal { opacity: 0; }

/* ============================================================
   RESPONSIVE — tablet
   ============================================================ */
@media (max-width: 1100px) {
  :root { --pad-x: 48px; }
  .hero__title { font-size: 78px; }
  .hero__catch { font-size: 38px; }
  .site-nav a { font-size: 22px; }
  .mv__inner { grid-template-columns: 1fr; gap: 90px; max-width: 620px; }
  .mv__inner::before { display: none; }
  .ceo { padding: 100px 48px 110px; }
  .ceo__head { font-size: 48px; }
  .contact__wm { font-size: 170px; }
}

/* ============================================================
   RESPONSIVE — mobile (SP 390)
   ============================================================ */
@media (max-width: 767px) {
  :root { --pad-x: 24px; }
  .site-header { height: 63px; padding: 0 20px; }
  .site-header__logo { height: 40px; }
  .site-nav { display: none; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; gap: 6px; z-index: 80; position: relative;
    margin-left: auto; background: none; border: 0; cursor: pointer; padding: 8px;
  }
  .nav-toggle span { width: 28px; height: 2px; background: #fff; display: block; transition: transform .4s var(--ease-out), opacity .3s; }

  /* When the menu is open, strip the header's backdrop-filter. A filtered
     ancestor becomes the containing block for its position:fixed children, which
     would trap the full-screen nav inside the 63px header (menu shows cut off /
     page visible behind once scrolled). Removing it lets the nav cover the
     viewport again. */
  body.nav-open .site-header,
  body.nav-open .site-header.is-solid,
  body.nav-open .site-header--solid {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
  }
  body.nav-open .site-nav {
    display: flex; position: fixed; inset: 0; z-index: 70;
    width: 100vw; height: 100vh; height: 100dvh;
    background: rgba(31,42,68,.97); backdrop-filter: blur(6px);
    flex-direction: column; align-items: center; justify-content: center;
  }
  body.nav-open .site-nav ul { flex-direction: column; gap: 30px; }
  body.nav-open .site-nav a { font-size: 30px; color: #fff; }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* ---- About FV — SP per Figma About/SP-2 37:1874 (390×569): the team photo
     sits at 48% over the cream ground, content is a left stack from y114 ---- */
  .hero { min-height: 0; height: 569px; align-items: flex-start; background: #FEF8EF; }
  .hero__bg { background: #FEF8EF; }           /* cream ground on SP, not the PC taupe */
  .hero__bg-img {
    background-image: url("https://beyondlune.co.jp/wp-content/uploads/2026/07/about-hero.png");
    background-position: 50% 30%;
    opacity: .48;
  }
  /* Figma About/SP-2: content frame w331 @top114, column gap 34 */
  .hero__content { margin-top: 114px; width: 331px; max-width: 100%; padding: 0; margin-inline: auto; }
  .hero__title { font-size: 40px; line-height: 58px; margin-bottom: 34px; }
  .hero__catch { font-size: 32px; line-height: 62px; letter-spacing: 2.88px; margin-bottom: 34px; text-shadow: 2px 4px 4px rgba(0,0,0,.25); }
  .hero__sub { font-size: 12px; line-height: 23px; letter-spacing: -0.96px; color: #000; margin-bottom: 34px; }
  .btn-pill { font-size: 15px; padding: 20px 34px; }
  /* must restate font-size/tracking: the PC `.hero .btn-pill` rule has equal
     specificity and would otherwise leak its 24px in and wrap the label */
  .hero .btn-pill {
    width: 221px; height: 58px; padding: 0; justify-content: center;
    font-size: 15px; letter-spacing: 1.95px;
    box-shadow: 4px 4px 4px rgba(0,0,0,.25);
  }

  /* ---- Mission / Vision — SP (stack gap50, 297px divider between the two) ---- */
  /* v4.0: padding-top back to Figma's 70 (the 48 was the "sara text thoda top"
     tweak; client 2026-07-19 asked for SP to match Figma exactly) */
  .mv { padding: 70px 0 70px; }
  /* Figma About/SP-2: the Mission/Vision stack is a 360-wide centred frame */
  /* v4.0: About/SP-2 puts ~206px between the Mission column's last line and the
     Vision label (divider 74 below the body, label 132 further down) — the old
     gap 50 stacked them 140px too close */
  .mv__inner { width: 360px; max-width: calc(100% - 30px); margin: 0 auto; gap: 102px; }
  .mv__col + .mv__col { position: relative; }
  .mv__col + .mv__col::before {
    content: ""; position: absolute; top: -38px; left: 50%; transform: translateX(-50%);
    width: 297px; height: 1px; background: rgba(31,42,68,.35);
  }
  /* Figma About/SP-2: wm 96/116 ls .12em rotate -6.6; label 48/58 @18.69,66.21;
     label-group -> lead gap 31; lead 32/46; lead -> text gap 34; text 16/45 */
  /* v4.0: wm back to Figma's top:0 (the 34 was the "wm centred behind label"
     tweak; superseded by the 2026-07-19 pixel-perfect-to-Figma request) */
  .mv__wm { font-size: 96px; line-height: 116px; letter-spacing: 11.52px; top: 0; left: 0; }
  .mv__label { font-size: 48px; line-height: 58px; letter-spacing: 2.4px; top: 66px; left: 19px; }
  .mv__head { height: 153px; margin-bottom: 31px; }
  .mv__lead { font-size: 32px; line-height: 46px; letter-spacing: 0.64px; margin-bottom: 34px; }
  .mv__text { font-size: 16px; line-height: 45px; letter-spacing: 0; }
  .mv__col + .mv__col .mv__lead { letter-spacing: 2.56px; }
  .mv__col + .mv__col .mv__text { letter-spacing: 2.08px; }

  /* ---- 代表メッセージ — SP (36 / 24 / 12 line29 per spec) ---- */
  /* SP-2 Frame 19: column gap 30 between label / heading / body */
  /* v4.0 paddings/gaps measured off About/SP-2: section 2016→3263, label ink
     2110, sign end 3152 → pt 86 / pb 104, label→head 42, body→sign 18 */
  /* 18px sides: the longest forced lines carry ~344px of ink — at 24px padding
     (342 col) they each orphan one character onto its own line */
  .ceo { padding: 86px 18px 104px; }
  .ceo__label { font-size: 36px; letter-spacing: 3.24px; margin-bottom: 42px; }
  .ceo__head { font-size: 24px; line-height: 34px; letter-spacing: 3.12px; margin-bottom: 30px; }
  .ceo__body { font-size: 12px; line-height: 29px; }
  .ceo__sign { font-size: 12px; line-height: 29px; margin-top: 18px; }

  /* ---- 会社概要 — SP (soft lilac ground, small eyebrow, 2-col rows, no rules) ---- */
  /* v4.0: ground + top pad to About/SP-2 (band 3263-3869 reads #FCF6F6) */
  .company { padding: 64px 24px 84px; background: #FCF6F6; }
  /* SP-2 uses this as a cased 16px eyebrow, not the PC's uppercase watermark */
  .company__wm {
    font-size: 16px; font-weight: 700; letter-spacing: 2.08px;
    font-style: normal; text-transform: none; white-space: normal;
    color: var(--gray); margin-bottom: 12px;
  }
  .company__label { font-size: 24px; margin-bottom: 24px; letter-spacing: normal; }
  .company__table { max-width: 322px; gap: 25px; }
  .company__row { grid-template-columns: 73px 1fr; gap: 36px; }
  /* the 322px table gives Figma's 213px value column, which is what holds each
     row to its intended line count — below ~370px the 24px side padding starts
     squeezing it and the rows re-wrap, so give the padding back */
  @media (max-width: 380px) {
    .company { padding-left: 12px; padding-right: 12px; }
  }
  /* key must restate line-height: the PC rule's 46px box otherwise drops the
     key ~12px below the val baseline and inflates every row to a 71px pitch */
  .company__key { font-size: 15px; line-height: 23px; }
  .company__val { font-size: 15px; line-height: 23px; }
  .company__val a { color: inherit; text-decoration: none; }

  /* ---- Contact block — SP (24 / 15, no giant watermark) ---- */
  .contact { padding: 76px 20px 84px; }
  .contact__wm { display: none; }
  .contact__label { font-size: 16px; letter-spacing: 2.08px; color: var(--gray); }
  .contact__title { font-size: 24px; }
  .contact__sub { font-size: 15px; }

  /* ---- footer brand/nav — SP (logo58 + name24 #FFEAEA, 3-col nav, copy 10) ---- */
  .site-footer__logo img { height: 84px; } /* 2026-07-22 client: bigger logo */
  .site-footer__logo span { font-size: 24px; color: #FFEAEA; }
  /* flex-wrap, not the old 3-col grid: プライバシーポリシー joined the list at
     the same 20px and a fixed 3-track row would overflow 390 */
  .footer-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 15px; padding: 0 12px; }
  /* the two-word Privacy Policy item must wrap as a unit, never mid-label
     (content also carries an   so this holds even pre-upload) */
  .footer-nav a, .bl2-footer__nav a { white-space: nowrap; }
  .footer-nav a { font-size: 20px; }
  .site-footer__copy { font-size: 10px; }

  .float-cta { right: 16px; bottom: 16px; font-size: 13px; padding: 13px 20px; }
  .intro__mark-word { font-size: 30px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .js-anim .reveal { opacity: 1 !important; transform: none !important; }
  * { animation: none !important; transition: none !important; }
}