:root {
  --bg: #07090c;
  --surface: #0d1116;
  --surface-soft: #10151c;
  --text: #f6f2ea;
  --muted: #b9b4aa;
  --accent: #d7ab62;
  --accent-soft: rgba(215, 171, 98, 0.28);
  --line: rgba(215, 171, 98, 0.36);
  --max: 1360px;
  --serif: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --sans: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: var(--sans);
  line-height: 1.8;
  letter-spacing: 0.025em;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.section-shell { width: min(var(--max), calc(100% - 96px)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 104px;
  padding: 0 48px;
  background: rgba(7, 9, 12, 0.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.brand { display: inline-flex; align-items: center; width: 174px; height: 82px; overflow: hidden; }
.brand-logo { display: block; width: 174px; height: 82px; object-fit: contain; object-position: left center; mix-blend-mode: screen; }
.site-nav { display: flex; align-items: center; gap: 0; font-family: var(--serif); }
.site-nav > a, .site-nav-link { position: relative; padding: 8px 26px; color: var(--muted); font-size: 0.96rem; transition: color 180ms ease; }
.site-nav > * + *::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 24px; background: var(--line); transform: translateY(-50%); }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--text); }
.site-nav-item { position: relative; display: flex; align-items: center; }
.site-submenu { position: absolute; top: 100%; right: 0; z-index: 25; display: grid; min-width: 270px; padding: 10px; border: 1px solid var(--line); background: rgba(7, 9, 12, 0.98); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease; }
.site-nav-item:hover .site-submenu, .site-nav-item:focus-within .site-submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.site-submenu a { display: block; padding: 12px 14px; color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.site-submenu a:hover, .site-submenu a:focus-visible { color: var(--text); background: rgba(215, 171, 98, 0.08); }
.menu-toggle { display: none; border: 1px solid var(--line); color: var(--text); background: transparent; padding: 8px 12px; font: inherit; }

.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 0.95fr); align-items: center; min-height: 650px; padding-block: 86px 72px; overflow: hidden; }
.hero-copy { position: relative; z-index: 1; max-width: 680px; container-type: inline-size; }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { margin-bottom: 25px; font-family: var(--serif); font-size: clamp(2.2rem, 3.6vw, 6.2rem); font-weight: 400; line-height: 1.24; letter-spacing: 0.04em; }
.hero h1 em { color: var(--text); font-style: normal; }
.hero-title-line, .hero-lede-line { display: inline-block; white-space: nowrap; }
.accent-line, .card-line { display: block; width: 58px; height: 2px; background: var(--accent); }
.hero-lede { max-width: 520px; margin: 24px 0 0; color: var(--muted); font-size: clamp(0.8rem, 1.25vw, 1.2rem); line-height: 1.62; }
.hero-business-axis { position: relative; z-index: 2; display: grid; align-self: center; justify-self: end; width: min(100%, 640px); color: var(--text); }
.hero-business-heading { display: grid; gap: 10px; }
.hero-business-kicker { margin: 0; color: var(--accent); font-family: var(--serif); font-size: 1.02rem; letter-spacing: 0.16em; }
.hero-business-rule { display: block; width: 100%; height: 1px; background: var(--line); }
.hero-business-row { display: grid; grid-template-columns: minmax(170px, 0.96fr) minmax(0, 1.34fr) auto; align-items: center; gap: 22px; padding: 28px 0 26px; border-bottom: 1px solid var(--line); transition: color 180ms ease, background 180ms ease; }
.hero-business-row:hover, .hero-business-row:focus-visible { color: var(--accent); background: linear-gradient(90deg, transparent, rgba(215,171,98,0.06)); }
.hero-business-row:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }
.hero-business-name { color: var(--accent); font-family: var(--serif); font-size: clamp(1rem, 1.42vw, 1.26rem); letter-spacing: 0.06em; white-space: nowrap; }
.hero-business-description { color: var(--text); font-size: clamp(0.74rem, 0.98vw, 0.9rem); line-height: 1.85; }
.hero-business-arrow { justify-self: end; color: var(--accent); font-family: var(--sans); font-size: 1.45rem; line-height: 1; transition: transform 180ms ease; }
.hero-business-row:hover .hero-business-arrow, .hero-business-row:focus-visible .hero-business-arrow { transform: translateX(5px); }
.hero-business-link { justify-self: end; display: inline-flex; align-items: center; gap: 32px; margin-top: 27px; padding-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--muted); font-family: var(--serif); font-size: 0.82rem; }
.hero-business-link:hover, .hero-business-link:focus-visible { color: var(--accent); }
.hero-business-link span { color: var(--accent); font-family: var(--sans); font-size: 1.2rem; }
/* Keep the accepted PNG geometry while its luminance mask removes the baked near-black background. */
.hero-emblem { position: absolute; left: -2%; right: auto; top: 50%; z-index: 0; width: min(1120px, 82vw); color: var(--accent); opacity: 0.30; transform: translateY(-50%); pointer-events: none; }
.hero-emblem img { display: block; width: 100%; height: auto; visibility: visible; mix-blend-mode: normal; -webkit-mask-image: url("assets/eterna-orbital-monogram-v1.png"); mask-image: url("assets/eterna-orbital-monogram-v1.png"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center; -webkit-mask-mode: luminance; mask-mode: luminance; }
.hero-emblem .emblem-inner { opacity: 0.38; stroke-dasharray: 3 10; }
.hero-emblem .emblem-letter { stroke-width: 1.8; }
.hero-emblem .emblem-diamond { stroke-width: 2.2; }
.hero-emblem .emblem-cross { opacity: 0.16; stroke-width: 0.8; }
.hero-side-note { position: absolute; right: 3%; top: 20%; z-index: 2; display: grid; gap: 8px; width: 150px; padding: 8px 0 8px 16px; border-left: 1px solid var(--accent); color: var(--accent); text-align: left; }
.hero-side-note-kicker { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.22em; }
.hero-side-note strong { font-family: var(--serif); font-size: 0.75rem; font-weight: 400; line-height: 1.45; letter-spacing: 0.08em; }
.hero-side-note small { color: var(--muted); font-size: 0.68rem; letter-spacing: 0.08em; }

.business { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding: 120px 0 196px; scroll-margin-top: 100px; }
.business-lede { grid-column: 1 / -1; margin: 0 0 2px; color: var(--text); font-family: var(--serif); font-size: clamp(1.35rem, 2.2vw, 2rem); letter-spacing: 0.04em; }
.business-card { position: relative; display: grid; grid-template-columns: 0.7fr 1.3fr; align-items: center; min-height: 300px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(120deg, var(--surface) 0%, var(--surface-soft) 100%); }
.business-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 55%, rgba(215,171,98,0.08), transparent 40%); pointer-events: none; }
.business-icon { position: relative; z-index: 1; width: 145px; height: 145px; margin-inline: auto; color: var(--accent); }
.business-icon.media-icon { width: 160px; height: auto; object-fit: contain; }
.target-icon { border: 1px solid rgba(215,171,98,0.4); border-radius: 50%; background: radial-gradient(circle, var(--accent) 0 4px, transparent 5px); background-size: 100% 100%; }
.target-icon::before, .target-icon::after { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: var(--accent); opacity: 0.7; }
.target-icon::after { inset: 0 auto 0 50%; width: 1px; height: auto; }
.target-icon span { position: absolute; inset: 18%; border: 1px solid rgba(215,171,98,0.45); border-radius: 50%; }
.target-icon span:nth-child(2) { inset: 35%; }
.target-icon span:nth-child(3) { inset: 48%; }
.clapper-icon { display: grid; align-content: center; gap: 0; }
.clapper-icon .clapper-top { display: block; height: 35px; border: 1px solid var(--accent); transform: skew(-16deg); background: repeating-linear-gradient(135deg, transparent 0 15px, rgba(215,171,98,0.35) 15px 17px); }
.clapper-icon .clapper-body { display: block; height: 75px; border: 1px solid var(--accent); border-top: 0; }
.clapper-icon .clapper-body::after { content: ""; display: block; width: 70%; height: 1px; margin: 26px auto 0; background: var(--accent); box-shadow: 0 18px var(--accent); opacity: 0.7; }
.business-card-copy { position: relative; z-index: 1; padding: 34px 42px 34px 0; }
.business-card h3 { margin: 0 0 16px; font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 2rem); font-weight: 400; }
.business-card .card-line { width: 42px; }
.business-card p { max-width: 360px; margin: 18px 0 24px; color: var(--muted); font-size: 0.9rem; line-height: 1.9; }
.outline-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 34px; min-width: 175px; padding: 10px 18px; border: 1px solid var(--accent); color: var(--accent); font-family: var(--serif); font-size: 0.9rem; transition: color 180ms ease, background 180ms ease; }
.outline-button:hover, .outline-button:focus-visible { color: var(--bg); background: var(--accent); }
.outline-button span { font-family: var(--sans); font-size: 1.1rem; }

.strength { display: grid; grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr); gap: 46px; padding-block: 100px 62px; border-top: 1px solid var(--line); }
.section-label { margin: 0 0 14px; color: var(--accent); font-family: var(--serif); font-size: 0.9rem; letter-spacing: 0.2em; }
.strength-intro h2 { margin: 32px 0 28px; font-family: var(--serif); font-size: clamp(2.6rem, 4vw, 4.4rem); font-weight: 400; line-height: 1.45; letter-spacing: 0.05em; }
.strength-intro p:not(.section-label) { max-width: 560px; color: var(--muted); font-size: clamp(0.86rem, 1.1vw, 1rem); line-height: 2.1; }
.cycle-wrap { min-width: 0; }
.cycle-diagram { position: relative; width: min(620px, 100%); aspect-ratio: 1; margin-inline: auto; }
.cycle-arcs { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 2.6; opacity: 1; pointer-events: none; }
.cycle-arcs path { fill: none; }
.cycle-center { position: absolute; inset: 30% 20%; display: grid; place-items: center; align-content: center; text-align: center; }
.cycle-center span { color: var(--accent); font-family: var(--serif); font-size: clamp(0.75rem, 1.3vw, 1rem); letter-spacing: 0.17em; }
.cycle-center strong { margin-top: 20px; font-family: var(--serif); font-size: clamp(1.35rem, 2.4vw, 2.05rem); font-weight: 400; line-height: 1.65; }
.cycle-node { position: absolute; z-index: 1; display: grid; width: 23.2258%; aspect-ratio: 1; place-content: center; border: 1px solid var(--accent); border-radius: 50%; outline: 1px dashed rgba(215,171,98,0.45); outline-offset: -7px; background: rgba(7,9,12,0.94); text-align: center; }
.cycle-node b { color: var(--accent); font-family: var(--serif); font-size: 1rem; font-weight: 400; }
.cycle-node strong { margin-top: 2px; color: var(--accent); font-family: var(--serif); font-size: 0.9rem; letter-spacing: 0.06em; }
.cycle-node small { margin-top: 6px; color: var(--text); font-family: var(--serif); font-size: 0.78rem; line-height: 1.4; }
.node-discover { top: 24.3548%; left: 23.0645%; transform: translate(-50%, -50%); }
.node-create { top: 24.3548%; left: 76.9355%; transform: translate(-50%, -50%); }
.node-connect { top: 75.6452%; left: 76.9355%; transform: translate(-50%, -50%); }
.node-grow { top: 75.6452%; left: 23.0645%; transform: translate(-50%, -50%); }
.cycle-feedback { width: fit-content; max-width: 100%; margin: -12px auto 0; padding: 8px 30px; border: 1px solid var(--accent); border-radius: 99px; color: var(--accent); font-family: var(--serif); font-size: 0.82rem; text-align: center; }

.strength-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strength-steps article { min-height: 190px; padding: 30px 30px 28px; }
.strength-steps article + article { border-left: 1px solid var(--line); }
.strength-steps h3 { margin: 0; color: var(--accent); font-family: var(--serif); font-size: 1.05rem; font-weight: 400; letter-spacing: 0.08em; }
.strength-steps h3 b { margin-right: 8px; font-weight: 400; }
.strength-steps p { margin: 12px 0 16px; color: var(--text); font-family: var(--serif); font-size: 0.98rem; }
.strength-steps .card-line { width: 40px; }
.strength-steps small { display: block; margin-top: 15px; color: var(--muted); font-size: 0.8rem; line-height: 1.8; }

.contact-band { margin-top: 82px; border-block: 1px solid var(--line); background: var(--surface); }
.contact-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 150px; }
.contact-inner h2 { margin: 0; font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 400; }
.light-button { min-width: 200px; }
.site-footer { display: flex; justify-content: space-between; gap: 20px; padding-block: 28px 42px; color: var(--muted); font-family: var(--serif); font-size: 0.8rem; letter-spacing: 0.1em; }
.site-footer small { font-family: var(--sans); letter-spacing: 0.08em; }

/* The three explicit copy lines must not wrap again inside the two-column layout. */
@media (min-width: 1181px) {
  .strength { grid-template-columns: minmax(520px, 0.9fr) minmax(0, 1.1fr); }
}

@media (max-width: 1180px) {
  .strength { grid-template-columns: 1fr; }
  .strength-intro p:not(.section-label) { max-width: 620px; font-size: 1rem; }
}

@media (max-width: 980px) {
  .site-header { padding-inline: 28px; }
  .section-shell { width: min(var(--max), calc(100% - 56px)); }
  .hero { grid-template-columns: 1fr; min-height: 620px; }
  .hero-emblem { left: 0; right: -18%; top: 56%; width: min(760px, 96vw); opacity: 0.26; }
  .hero-side-note { display: none; }
  .hero-copy { max-width: 580px; }
  .hero-business-axis { align-self: start; justify-self: stretch; width: 100%; margin-top: 24px; }
  .hero-business-row { grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.2fr) auto; }
  .business { grid-template-columns: 1fr; }
  .strength { grid-template-columns: 1fr; }
  .strength-intro p:not(.section-label) { max-width: 620px; }
}

@media (max-width: 680px) {
  .site-header { min-height: 70px; padding-inline: 18px; }
  .site-header { min-height: 72px; }
  .brand { width: 132px; height: 58px; }
  .brand-logo { width: 132px; height: 58px; }
  .menu-toggle { display: inline-flex; }
  .site-nav { position: absolute; inset: 72px 0 auto; display: none; flex-direction: column; align-items: stretch; padding: 8px 18px 18px; background: rgba(7,9,12,0.98); border-bottom: 1px solid var(--line); }
  .site-nav.is-open { display: flex; }
  .site-nav > a, .site-nav-link { padding: 14px 10px; }
  .site-nav > * + *::before { inset: 0 0 auto; width: auto; height: 1px; transform: none; }
  .site-nav-item { display: block; }
  .site-submenu { position: static; min-width: 0; padding: 0 0 4px 14px; border: 0; background: transparent; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .site-submenu a { padding: 10px 10px; font-size: 0.78rem; white-space: normal; }
  .section-shell { width: calc(100% - 36px); }
  .hero { min-height: 590px; padding-block: 64px 56px; }
  .hero h1 { font-size: clamp(1.8rem, 8vw, 3.5rem); letter-spacing: 0.02em; }
  .hero-lede { font-size: clamp(0.8rem, 3.2vw, 0.92rem); }
  .hero-emblem { left: auto; right: -62%; top: 72%; width: 100vw; opacity: 0.12; }
  .hero-business-axis { margin-top: 28px; }
  .hero-business-kicker { font-size: 0.88rem; }
  .hero-business-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; padding: 21px 0 19px; }
  .hero-business-name { grid-column: 1; grid-row: 1; font-size: 0.92rem; }
  .hero-business-description { grid-column: 1; grid-row: 2; font-size: 0.72rem; }
  .hero-business-arrow { grid-column: 2; grid-row: 1 / span 2; }
  .hero-business-link { margin-top: 21px; font-size: 0.75rem; }
  .business-card { grid-template-columns: 86px minmax(0, 1fr); min-height: 255px; }
  .business-icon { width: 78px; height: 78px; }
  .business-icon.media-icon { width: 82px; height: auto; }
  .clapper-icon .clapper-top { height: 22px; }
  .clapper-icon .clapper-body { height: 48px; }
  .clapper-icon .clapper-body::after { margin-top: 15px; box-shadow: 0 12px var(--accent); }
  .business-card-copy { padding: 26px 20px 26px 0; }
  .business-card h3 { font-size: 1.16rem; }
  .business-card p { font-size: 0.78rem; }
  .outline-button { min-width: 145px; padding: 8px 12px; font-size: 0.78rem; }
  .strength { gap: 30px; padding-block: 70px 42px; }
  .strength-intro h2 { font-size: 2.45rem; }
  .strength-intro p:not(.section-label) { font-size: 1rem; }
  .cycle-node { width: 23.2258%; outline-offset: -5px; }
  .cycle-node b { font-size: 0.75rem; }
  .cycle-node strong { font-size: 0.63rem; }
  .cycle-node small { font-size: 0.58rem; }
  .cycle-center span { font-size: 0.6rem; }
  .cycle-center strong { margin-top: 10px; font-size: 1rem; }
  .cycle-feedback { margin-top: 2px; padding: 6px 16px; font-size: 0.62rem; }
  .strength-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strength-steps article { min-height: 165px; padding: 22px 16px; }
  .strength-steps article:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .strength-steps article:nth-child(4) { border-top: 1px solid var(--line); }
  .strength-steps h3 { font-size: 0.82rem; letter-spacing: 0.04em; }
  .strength-steps p { font-size: 0.78rem; }
  .strength-steps small { font-size: 0.68rem; }
  .contact-inner { align-items: flex-start; flex-direction: column; padding-block: 32px; }
  .contact-inner h2 { font-size: 1.8rem; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 8px; }
}

/* Keep the two intentional hero lines intact while scaling to the available copy width. */
@supports (font-size: 1cqw) {
  .hero h1 { font-size: clamp(2.2rem, 12.7cqw, 6.2rem); }
  .hero-lede { font-size: clamp(0.8rem, 3.2cqw, 1.2rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}