/* GiXiO homepage — "Ink, refined" (design 2a) */
:root {
  --ink: #111213;
  --paper: #ecebe7;
  --muted: #a7a59e;
  --dim: #6e6c66;
  --line: #2a2b2d;
  --line-soft: #1f2022;
  --field: #3a3b3e;
  --row-hover: #161718;
  --paper-text: #4a4b4e;
  --paper-line: #d6d5d0;
  --gutter: 56px;
  --section-y: 120px;
  --sans: "Noto Sans JP", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { opacity: .7; }
input, textarea, select, button { font: inherit; color: inherit; }
p, h1, h2 { margin: 0; }
img { display: block; }

.wrap { max-width: 1280px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--dim); }
.eyebrow--sm { font-size: 11px; }

.btn { display: inline-block; font-size: 14px; font-weight: 500; border: 0; cursor: pointer; }
.btn--light { background: var(--paper); color: var(--ink); padding: 14px 22px; }
.btn--dark { background: var(--ink); color: var(--paper); padding: 16px 28px; }
.btn--lg { padding: 16px 28px; }

/* Logo: light parts pushed to pure white, dark tile blended away against the ink background */
.logo { filter: grayscale(1) invert(1) brightness(1.8); mix-blend-mode: lighten; width: auto; }
.logo-link { display: flex; align-items: center; }
.logo-link:hover { opacity: 1; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--ink); border-bottom: 1px solid var(--line-soft); }
.site-header .wrap { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; padding-bottom: 8px; }
.site-header .logo { height: 100px; }
[id] { scroll-margin-top: 130px; }
.nav__links { display: contents; }
.nav { display: flex; gap: 36px; align-items: center; font-size: 13px; color: var(--muted); }
.lang { display: flex; border: 1px solid var(--line); font-family: var(--mono); font-size: 11px; }
.lang a, .lang span { padding: 6px 10px; }
.lang [aria-current] { background: var(--paper); color: var(--ink); }
.lang [aria-disabled] { cursor: default; }
.nav__cta { color: var(--ink); background: var(--paper); padding: 10px 18px; font-weight: 500; }

/* Hero */
.hero { padding-top: 128px; padding-bottom: 96px; }
.hero .eyebrow { margin-bottom: 40px; }
.hero h1 {
  margin-bottom: 56px; max-width: 1140px;
  font-weight: 300; font-size: clamp(48px, 9.375vw, 120px); line-height: .95; letter-spacing: -.045em;
  text-wrap: pretty;
}
.hero__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; max-width: 1140px; font-size: 16px; line-height: 1.65; color: var(--muted); }
.hero__actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.link-underline { color: var(--paper); border-bottom: 1px solid var(--field); padding-bottom: 3px; font-size: 14px; }

/* Facts strip */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fact { padding: 28px 32px; border-right: 1px solid var(--line); }
.fact:first-child { padding-left: 0; }
.fact:last-child { border-right: 0; padding-right: 0; }
.fact__value { margin-bottom: 6px; font-size: 40px; font-weight: 300; letter-spacing: -.03em; line-height: 1; }
.fact__label { font-size: 13px; color: var(--dim); }

/* Holdings */
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 32px; }
.section-head__note { font-size: 14px; color: var(--muted); }
.holding {
  display: grid; grid-template-columns: 1fr 1fr 160px; align-items: center; gap: 40px;
  padding: 44px 0; border-top: 1px solid var(--line);
}
a.holding:hover { opacity: 1; background: var(--row-hover); margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
.holding__name { display: block; margin-bottom: 10px; font-size: 56px; font-weight: 300; letter-spacing: -.03em; line-height: 1; }
.holding__tag { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--dim); }
.holding__desc { font-size: 14px; line-height: 1.7; color: var(--muted); }
.holding__link { font-size: 13px; text-align: right; color: var(--muted); }
.holding--exit { padding: 32px 0; border-bottom: 1px solid var(--line); color: var(--dim); }
.holding--exit .holding__name { font-size: 32px; color: var(--muted); }
.holding--exit .holding__tag,
.holding--exit .holding__desc,
.holding--exit .holding__link { color: inherit; }

/* Investing (light band) */
.investing { background: var(--paper); color: var(--ink); }
.investing__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-bottom: 80px; }
.investing__intro .eyebrow { margin-bottom: 24px; }
.investing h2 { font-weight: 300; font-size: clamp(40px, 5.625vw, 72px); line-height: .98; letter-spacing: -.04em; text-wrap: pretty; }
.investing__lede { align-self: end; max-width: 520px; font-size: 17px; line-height: 1.65; color: var(--paper-text); }
.criteria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-bottom: 64px; font-size: 15px; line-height: 1.6; }
.criteria > div { border-top: 1px solid var(--ink); padding-top: 18px; }
.criteria .eyebrow { margin-bottom: 8px; }
.pillars-label { margin-bottom: 24px; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--paper-line); border: 1px solid var(--paper-line); }
.pillar { background: var(--paper); padding: 28px 28px 32px; }
.pillar__title { margin-bottom: 10px; font-size: 22px; font-weight: 400; letter-spacing: -.02em; }
.pillar__body { font-size: 14px; line-height: 1.7; color: var(--paper-text); }
.investing .btn--dark { margin-top: 56px; }

/* History */
.history { border-bottom: 1px solid var(--line); }
.history .wrap { display: grid; grid-template-columns: 320px 1fr; gap: 64px; }
.history .eyebrow { margin-bottom: 16px; }
.history__lede { max-width: 260px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.timeline { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.timeline li { display: grid; grid-template-columns: 120px 1fr; gap: 32px; padding: 22px 0; border-top: 1px solid var(--line); font-size: 16px; }
.timeline time { font-family: var(--mono); font-size: 14px; color: var(--muted); }

/* Contact */
.contact .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; }
.contact .eyebrow { margin-bottom: 24px; }
.contact h2 { margin-bottom: 32px; font-weight: 300; font-size: clamp(38px, 4.375vw, 56px); line-height: 1; letter-spacing: -.035em; text-wrap: pretty; }
.contact__lede { margin-bottom: 40px; max-width: 440px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.company-info { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 24px; font-size: 14px; color: var(--muted); }
.company-info strong { font-weight: 400; color: var(--paper); }

.form { display: flex; flex-direction: column; gap: 22px; padding-top: 56px; font-size: 14px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field {
  width: 100%; border: 0; border-bottom: 1px solid var(--field); border-radius: 0;
  background: transparent; padding: 12px 0; outline: none; color: var(--paper);
}
.field::placeholder { color: var(--dim); }
.field:focus { border-bottom-color: var(--muted); }
select.field { color: var(--muted); appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 10px) 50%, calc(100% - 5px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 24px; }
select.field option { background: var(--ink); color: var(--paper); }
textarea.field { resize: vertical; }
.form .btn--light { align-self: flex-start; padding: 16px 28px; }
.form__status { min-height: 1.5em; font-size: 13px; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); font-size: 12px; color: var(--dim); }
.site-footer .wrap { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding-top: 32px; padding-bottom: 32px; }
.site-footer__brand { display: flex; align-items: center; gap: 12px; }
.site-footer .logo { height: 54px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 28px; }

/* Responsive — not in the 1280px mock; scales the same system down */
@media (max-width: 1100px) {
  :root { --gutter: 40px; --section-y: 96px; }
  .nav { gap: 24px; }
  .site-header .logo { height: 86px; }
  .hero { padding-top: 96px; padding-bottom: 80px; }
  .hero__cols { grid-template-columns: 1fr 1fr; }
  .hero__actions { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 24px; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(2) { border-right: 0; padding-right: 0; }
  .fact:nth-child(3) { padding-left: 0; }
  .fact:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .holding { grid-template-columns: 1fr 1fr; gap: 16px 40px; }
  .holding__link { grid-column: 2; text-align: left; }
  .holding__name { font-size: 44px; }
  .criteria { grid-template-columns: 1fr 1fr; }
  .history .wrap { grid-template-columns: 1fr; gap: 32px; }
  .contact .wrap { gap: 56px; }
}

@media (max-width: 760px) {
  :root { --gutter: 16px; --section-y: 72px; }
  .site-header .wrap { flex-wrap: wrap; gap: 12px; }
  .site-header .logo { height: 72px; }
  [id] { scroll-margin-top: 100px; }
  .nav__links { display: none; }
  .nav { gap: 12px; }
  .hero { padding-top: 64px; padding-bottom: 56px; }
  .hero .eyebrow { margin-bottom: 28px; font-size: 11px; }
  .hero h1 { margin-bottom: 40px; }
  .hero__cols { grid-template-columns: 1fr; gap: 20px; }
  .hero__actions { flex-direction: column; align-items: flex-start; margin-top: 12px; }
  .facts { grid-template-columns: 1fr; }
  .fact, .fact:nth-child(n) { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .fact:last-child { border-bottom: 0; }
  .fact__value { font-size: 34px; }
  .section-head { flex-direction: column; gap: 12px; }
  .holding { grid-template-columns: 1fr; gap: 14px; padding: 32px 0; }
  .holding__link { grid-column: auto; }
  .holding__name { font-size: 38px; }
  a.holding:hover { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .investing__intro { grid-template-columns: 1fr; gap: 28px; margin-bottom: 56px; }
  .criteria { grid-template-columns: 1fr; gap: 28px; margin-bottom: 48px; }
  .pillars { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 64px 1fr; gap: 16px; font-size: 15px; }
  .contact .wrap { grid-template-columns: 1fr; gap: 16px; }
  .form { padding-top: 24px; }
  .form__row { grid-template-columns: 1fr; }
  .site-footer .wrap { grid-template-columns: 1fr; }
  .site-footer__brand { flex-direction: column; align-items: flex-start; }
  .site-footer .logo { height: 44px; }
  .site-footer nav { gap: 16px 24px; }
}

/* Japanese: no kerning tricks on CJK, slightly smaller display sizes */
html[lang="ja"] .hero h1 { font-size: clamp(40px, 7.2vw, 92px); letter-spacing: -.02em; line-height: 1.1; }
html[lang="ja"] .investing h2 { font-size: clamp(34px, 4.6vw, 60px); letter-spacing: -.02em; line-height: 1.15; }
html[lang="ja"] .contact h2 { font-size: clamp(32px, 3.6vw, 46px); letter-spacing: -.02em; line-height: 1.15; }
html[lang="ja"] .holding__name,
html[lang="ja"] .fact__value { letter-spacing: -.02em; }
html[lang="ja"] .eyebrow { letter-spacing: .1em; }

/* Turnstile widget */
.cf-turnstile { min-height: 65px; }