@import "https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600&display=swap";

/*
 * Institutional layout, original SPD palette.
 * Scoped to <body class="theme-institutional">. Rules here are unlayered,
 * so they override the layered rules in site.css.
 *
 * Tokens match the original homepage:
 *   #050505 / #111, #f3f3f0 / #ecece8, #fff,
 *   #c9c9c4 / #deded8, #111, #595a57, #15c95a / #19ef86.
 * Header and footer colors stay with site.css.
 */

.theme-institutional {
  --inst-bg: #f3f3f0;
  --inst-bg-alt: #ecece8;
  --inst-card: #fff;
  --inst-line: #deded8;
  --inst-line-strong: #c9c9c4;
  --inst-text: #111;
  --inst-muted: #595a57;
  --inst-green: #15c95a;
  --inst-green-bright: #19ef86;
  --inst-black: #050505;
  --inst-dark: #111;
  --inst-on-dark: #fff;
  --inst-on-dark-muted: #deded8;
  --inst-dark-line: rgba(255, 255, 255, .16);
  --inst-latin: "Manrope", "Noto Sans JP", sans-serif;
  --inst-ease: cubic-bezier(.2, 0, 0, 1);

  margin: 0;
  color: var(--inst-text);
  background: var(--inst-bg);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  line-height: 1.75;
  letter-spacing: .015em;
  -webkit-font-smoothing: antialiased;
}
.theme-institutional ::selection { color: var(--inst-black); background: var(--inst-green-bright); }
.theme-institutional :focus-visible { outline: 2px solid #005fcc; outline-offset: 3px; }

html:has(body.theme-institutional) { background: var(--inst-bg, #f3f3f0); }

/* ---------- Shared footer addition ---------- */
.inst-footer-disclaimer {
  margin: 48px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16);
  color: #c9c9c4; font-size: 11px; line-height: 1.8;
}
.theme-institutional .inst-footer-disclaimer + .subpage-footer-bottom { margin-top: 22px; }

/* ---------- Primitives ---------- */
.inst-container { width: min(calc(100% - 72px), 1200px); margin-inline: auto; }
.inst-section { padding-block: 132px; }
.inst-eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 22px;
  color: var(--inst-muted); font-family: var(--inst-latin); font-size: 12px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
}
.inst-eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--inst-green); }
.inst-latin-title {
  margin: 0; color: var(--inst-text); font-family: var(--inst-latin); font-size: clamp(38px, 4.4vw, 56px); font-weight: 400;
  line-height: 1.08; letter-spacing: -.02em;
}
.inst-jp-title { margin: 14px 0 0; color: var(--inst-muted); font-size: 15px; font-weight: 500; letter-spacing: .12em; }
.inst-lead { margin: 26px 0 0; max-width: 560px; color: var(--inst-muted); font-size: 16px; line-height: 1.95; }
.inst-note {
  margin: 28px 0 0; padding: 14px 18px; color: var(--inst-muted); background: var(--inst-card);
  border-left: 2px solid var(--inst-green); font-size: 13px; line-height: 1.8;
}


.inst-button {
  min-height: 52px; padding: 13px 24px; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  border: 1px solid transparent; border-radius: 2px; font-size: 14px; font-weight: 600; letter-spacing: .04em;
  text-decoration: none; transition: background 200ms var(--inst-ease), color 200ms var(--inst-ease), border-color 200ms var(--inst-ease);
}
.inst-button--primary { color: var(--inst-black); background: var(--inst-green); border-color: var(--inst-green); }
.inst-button--primary:hover { background: var(--inst-green-bright); border-color: var(--inst-green-bright); }
.inst-button--line { color: var(--inst-on-dark); background: transparent; border-color: rgba(255, 255, 255, .48); }
.inst-button--line:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.inst-button .arrow { transition: transform 200ms var(--inst-ease); }
.inst-button:hover .arrow, .inst-link:hover .arrow { transform: translateX(4px); }
.inst-link {
  display: inline-flex; align-items: center; gap: 10px; color: var(--inst-text);
  font-size: 14px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--inst-green);
  text-underline-offset: .35em;
}

.inst-tag {
  display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 3px 10px;
  border: 1px solid var(--inst-line-strong); border-radius: 2px; color: var(--inst-text); background: var(--inst-card);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; white-space: nowrap;
}
.inst-tag::before { content: ""; width: 6px; height: 6px; background: var(--inst-green); border-radius: 50%; }
.inst-tag--live { border-color: var(--inst-green); }
.inst-tag--preparing { border-style: dashed; }
.inst-tag--preparing::before { border-radius: 0; transform: rotate(45deg); }
.inst-tag--future { border-style: dashed; }
.inst-tag--future::before { background: transparent; border: 1px solid var(--inst-muted); }
.inst-tag--listing::before { border-radius: 0; }

/* ---------- Hero ---------- */
.inst-hero {
  position: relative; min-height: min(900px, calc(100svh - 88px)); display: grid; align-items: center;
  overflow: hidden; isolation: isolate; color: var(--inst-on-dark); background: var(--inst-black);
  border-bottom: 1px solid rgba(255, 255, 255, .11);
}
.inst-hero::before {
  content: ""; position: absolute; z-index: -2; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%);
}
.inst-horizon {
  position: absolute; z-index: -1; left: 50%; top: 72%; width: max(150%, 1600px); aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%; border-top: 1px solid rgba(25, 239, 134, .55);
  background: radial-gradient(closest-side, rgba(5, 5, 5, 0) 92%, rgba(21, 201, 90, .12) 97%, transparent 100%);
  box-shadow: 0 -40px 120px -30px rgba(21, 201, 90, .28), inset 0 40px 90px -40px rgba(25, 239, 134, .22);
  animation: inst-rise 1.6s var(--inst-ease) both;
}
.inst-hero-whale {
  position: absolute; z-index: -1; inset: 0; opacity: .42; mix-blend-mode: screen;
  background: url("/assets/spd-data-whale-hero-v2.png") 78% 40% / cover no-repeat;
  background: image-set(
      url("/assets/spd-data-whale-hero-v2.avif") type("image/avif"),
      url("/assets/spd-data-whale-hero-v2.webp") type("image/webp"),
      url("/assets/spd-data-whale-hero-v2.png") type("image/png")
    ) 78% 40% / cover no-repeat;
  mask-image: linear-gradient(90deg, transparent 20%, #000 70%);
}
@keyframes inst-rise { from { opacity: 0; transform: translate(-50%, 6%); } to { opacity: 1; transform: translate(-50%, 0); } }
.inst-hero-inner { padding-block: 120px 140px; text-align: center; }
.inst-status { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 0 34px; }
.inst-hero .inst-tag { color: #fff; background: transparent; border-color: rgba(255, 255, 255, .35); }
.inst-hero .inst-tag::before { background: var(--inst-green-bright); }
.inst-hero .inst-tag--preparing { border-color: var(--inst-green-bright); }
.inst-display {
  margin: 0; font-family: var(--inst-latin); font-size: clamp(44px, 7.4vw, 104px); font-weight: 300;
  line-height: 1.02; letter-spacing: -.03em; text-transform: uppercase; color: #fff;
}
.inst-display em { font-style: normal; color: var(--inst-green-bright); }
.inst-hero-title { margin: 34px 0 0; color: #fff; font-size: clamp(18px, 1.8vw, 22px); font-weight: 500; letter-spacing: .14em; }
.inst-hero-lead { max-width: 720px; margin: 22px auto 0; color: var(--inst-on-dark-muted); font-size: 16px; line-height: 1.95; }
.inst-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.inst-hero-note { margin: 30px auto 0; color: #c9c9c4; font-size: 12px; }

/* ---------- Firm overview + facts ---------- */
.inst-overview-layout { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
.inst-facts { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; background: var(--inst-card); border: 1px solid var(--inst-line); }
.inst-fact { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 34px 28px; border-bottom: 1px solid var(--inst-line); }
.inst-fact:nth-child(odd) { border-right: 1px solid var(--inst-line); }
.inst-fact dd {
  margin: 0; color: var(--inst-text); font-family: var(--inst-latin); font-size: clamp(34px, 3.6vw, 50px); font-weight: 400;
  line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.inst-fact dd small { font-size: .5em; color: var(--inst-muted); letter-spacing: 0; }
.inst-fact dt { margin-top: 14px; color: var(--inst-muted); font-size: 13px; line-height: 1.7; }
.inst-facts-note { margin: 18px 0 0; color: var(--inst-muted); font-size: 11px; line-height: 1.8; }

/* ---------- Business overview ---------- */
.inst-business { background: var(--inst-bg-alt); border-block: 1px solid var(--inst-line); }
.inst-business-layout { display: grid; grid-template-columns: 4fr 8fr; gap: 80px; align-items: start; }
.inst-sticky { position: sticky; top: 132px; }
.inst-lines { border-top: 1px solid var(--inst-line-strong); }
.inst-line-item { padding: 40px 0 44px; border-bottom: 1px solid var(--inst-line); }
.inst-line-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.inst-index { color: var(--inst-muted); font-family: var(--inst-latin); font-size: 14px; letter-spacing: .08em; }
.inst-line-item h3 { margin: 18px 0 0; color: var(--inst-text); font-size: clamp(24px, 2.3vw, 32px); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.inst-line-item h3 small { display: block; margin-top: 6px; color: var(--inst-muted); font-size: 13px; font-weight: 500; letter-spacing: .06em; }
.inst-line-item p { max-width: 660px; margin: 16px 0 0; color: var(--inst-muted); font-size: 15px; line-height: 1.9; }
.inst-line-item .inst-link { margin-top: 22px; }
.inst-rail { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 22px 0 0; padding: 0; list-style: none; }
.inst-rail li { color: var(--inst-text); font-size: 13px; font-weight: 600; }
.inst-rail li::before { content: "— "; color: var(--inst-green); }
.inst-business .inst-small { margin: 28px 0 0; color: var(--inst-muted); font-size: 12px; }

/* ---------- Investment approach ---------- */
.inst-approach-head { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: end; margin-bottom: 64px; }
.inst-approach-head .inst-note { margin: 0; }
.inst-pillars { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--inst-card); border: 1px solid var(--inst-line); border-top: 1px solid var(--inst-line-strong); }
.inst-pillar { padding: 48px 28px 40px; }
.inst-pillar + .inst-pillar { border-left: 1px solid var(--inst-line); }
.inst-pillar h3 { margin: 0; color: var(--inst-text); font-size: 26px; font-weight: 500; line-height: 1.3; }
.inst-pillar h3 span { display: block; margin-bottom: 8px; color: var(--inst-muted); font-family: var(--inst-latin); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.inst-pillar p { margin: 16px 0 0; color: var(--inst-muted); font-size: 14px; line-height: 1.9; }
.inst-approach-foot { margin-top: 40px; }

/* ---------- Controls ---------- */
.inst-controls { background: var(--inst-bg-alt); border-block: 1px solid var(--inst-line); }
.inst-control-list { margin: 0; padding: 0; list-style: none; background: var(--inst-card); border: 1px solid var(--inst-line); border-top: 1px solid var(--inst-line-strong); }
.inst-control-list li { display: grid; grid-template-columns: 56px 1fr 1.4fr; gap: 24px; align-items: baseline; padding: 28px 24px; border-bottom: 1px solid var(--inst-line); }
.inst-control-list li:last-child { border-bottom: 0; }
.inst-control-list span { color: var(--inst-muted); font-family: var(--inst-latin); font-size: 13px; letter-spacing: .1em; }
.inst-control-list h3 { margin: 0; color: var(--inst-text); font-size: 19px; font-weight: 500; }
.inst-control-list p { margin: 0; color: var(--inst-muted); font-size: 14px; line-height: 1.85; }
.inst-controls .inst-note { margin-top: 32px; }

/* ---------- Regulatory filing ---------- */
#compliance { color: var(--inst-on-dark); background: var(--inst-dark); }
#compliance .inst-eyebrow { color: #c9c9c4; }
#compliance .inst-eyebrow::before { background: var(--inst-green-bright); }
#compliance .inst-latin-title { color: #fff; }
#compliance .inst-lead { color: var(--inst-on-dark-muted); }
#compliance .inst-link { color: #fff; text-decoration-color: var(--inst-green-bright); }
#compliance .inst-tag { color: #fff; background: transparent; border-color: var(--inst-green); }
#compliance .inst-tag::before { background: var(--inst-green-bright); }
.inst-reg { display: grid; grid-template-columns: 5fr 7fr; margin-top: 56px; background: var(--inst-black); border: 1px solid var(--inst-dark-line); border-top: 2px solid var(--inst-green); }
.inst-reg-meta { padding: 36px 40px 40px 32px; border-right: 1px solid var(--inst-dark-line); }
.inst-reg-date { margin-top: 20px; color: #fff; font-family: var(--inst-latin); font-size: clamp(40px, 4.2vw, 56px); font-weight: 400; line-height: 1; letter-spacing: -.03em; }
.inst-reg-date small { display: block; margin-top: 12px; color: #c9c9c4; font-family: "Noto Sans JP", sans-serif; font-size: 12px; letter-spacing: .14em; }
.inst-reg-meta dl { display: grid; gap: 0; margin: 32px 0 0; }
.inst-reg-meta dl div { display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--inst-dark-line); }
.inst-reg-meta dt { color: #c9c9c4; font-size: 12px; }
.inst-reg-meta dd { margin: 0; color: #fff; font-size: 13px; }
.inst-reg-meaning { display: grid; grid-template-columns: 1fr 1fr; }
.inst-reg-block { padding: 36px 0 40px 40px; }
.inst-reg-block + .inst-reg-block { border-left: 1px solid var(--inst-dark-line); }
.inst-reg-label { margin: 0; color: #fff; font-size: 13px; font-weight: 700; }
.inst-reg-block ul { list-style: none; margin: 22px 0 0; padding: 0; }
.inst-reg-block li { position: relative; padding: 12px 0 12px 22px; border-top: 1px solid var(--inst-dark-line); color: var(--inst-on-dark-muted); font-size: 14px; }
.inst-reg-block li::before { content: "＋"; position: absolute; left: 0; color: var(--inst-green-bright); }
.inst-reg-block p { margin: 22px 0 0; color: var(--inst-on-dark-muted); font-size: 14px; line-height: 1.85; }
.inst-reg-actions { margin-top: 30px; }

/* ---------- News ---------- */
.inst-news { color: var(--inst-text); background: var(--inst-bg); }
.inst-news-list { margin-top: 48px; border-top: 1px solid var(--inst-line); }
.inst-news-item {
  display: grid; grid-template-columns: 150px 1fr 40px; gap: 24px; align-items: center; padding: 26px 0;
  border-bottom: 1px solid var(--inst-line); color: var(--inst-text); text-decoration: none; transition: padding 200ms var(--inst-ease), background 200ms var(--inst-ease);
}
.inst-news-item:hover { padding-inline: 12px; background: var(--inst-card); }
.inst-news-date { color: var(--inst-muted); font-family: var(--inst-latin); font-size: 13px; letter-spacing: .04em; }
.inst-news-title { color: var(--inst-text); font-size: 17px; font-weight: 500; line-height: 1.6; }
.inst-news-title small { display: block; margin-top: 4px; color: var(--inst-muted); font-size: 12px; font-weight: 500; }
.inst-news-go { color: var(--inst-green); font-size: 18px; text-align: right; }
.inst-news-foot { margin-top: 28px; text-align: right; }

/* ---------- Contact ---------- */
.inst-contact { position: relative; overflow: hidden; color: var(--inst-black); background: var(--inst-green); }
.inst-contact .inst-eyebrow { color: var(--inst-black); }
.inst-contact .inst-eyebrow::before { background: var(--inst-black); }
.inst-contact .inst-latin-title,
.inst-contact .inst-jp-title,
.inst-contact .inst-lead { color: var(--inst-black); }
.inst-contact-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: end; }
.inst-contact-actions { display: grid; gap: 12px; justify-items: stretch; }
.inst-contact .inst-button--primary { color: #fff; background: var(--inst-black); border-color: var(--inst-black); }
.inst-contact .inst-button--primary:hover { background: var(--inst-dark); border-color: var(--inst-dark); }
.inst-contact .inst-button--line { color: var(--inst-black); background: transparent; border-color: rgba(5, 5, 5, .45); }
.inst-contact .inst-button--line:hover { border-color: var(--inst-black); background: rgba(5, 5, 5, .08); }
.inst-contact .inst-small { margin: 40px 0 0; padding-top: 18px; border-top: 1px solid rgba(5, 5, 5, .28); color: var(--inst-black); font-size: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .inst-overview-layout, .inst-business-layout, .inst-approach-head { gap: 48px; }
  .inst-reg { grid-template-columns: 1fr; }
  .inst-reg-meta { padding-right: 32px; border-right: 0; border-bottom: 1px solid var(--inst-dark-line); }
}
@media (max-width: 860px) {
  .inst-container { width: min(calc(100% - 40px), 1200px); }
  .inst-section { padding-block: 88px; }
  .inst-hero-inner { padding-block: 88px 110px; }
  /* Scrim the lead so whale highlights (screen blend) stay behind the glyphs. */
  .inst-hero-lead {
    padding: 10px 14px;
    background: rgba(5, 5, 5, .78);
  }
  .inst-overview-layout, .inst-business-layout, .inst-approach-head, .inst-contact-layout { grid-template-columns: 1fr; }
  .inst-sticky { position: static; }
  .inst-pillars { grid-template-columns: 1fr; }
  .inst-pillar { padding: 28px 20px; }
  .inst-pillar + .inst-pillar { border-left: 0; border-top: 1px solid var(--inst-line); }
  .inst-control-list li { grid-template-columns: 44px 1fr; }
  .inst-control-list p { grid-column: 2; }
}
@media (max-width: 620px) {
  .inst-section { padding-block: 72px; }
  .inst-display { font-size: clamp(38px, 11vw, 52px); }
  .inst-hero-title { letter-spacing: .06em; }
  .inst-actions { display: grid; }
  .inst-facts { grid-template-columns: 1fr; }
  .inst-fact, .inst-fact:nth-child(odd), .inst-fact:nth-child(even) { padding: 28px 20px; border-right: 0; }
  .inst-reg-meaning { grid-template-columns: 1fr; }
  .inst-reg-meta { padding-left: 20px; padding-right: 20px; }
  .inst-reg-block, .inst-reg-block:first-child { padding: 28px 20px; }
  .inst-reg-block + .inst-reg-block { border-left: 0; border-top: 1px solid var(--inst-dark-line); }
  .inst-news-item { grid-template-columns: 1fr 28px; gap: 8px 16px; }
  .inst-news-date { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .inst-horizon { animation: none; }
  .theme-institutional *, .theme-institutional *::before, .theme-institutional *::after { transition-duration: .01ms !important; }
}