/* Common components: Nav, Footer, Sidebar (variant C), and shared sections */

/* ── Site Header (top nav) ───────────────────────────────────────────── */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 56px;
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  position: sticky;
  top: var(--switcher-h-pc);
  z-index: 50;
  gap: 24px;
}

.site-header__logo {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.site-header__logo .name {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.site-header__logo .inc {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  opacity: 0.6;
  letter-spacing: 0.08em;
}

.site-header__logo .name-jp {
  font-size: 11px;
  opacity: 0.55;
  margin-left: 8px;
  font-weight: 400;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  opacity: 0.78;
  transition: opacity 0.15s;
}

.site-nav__link:hover, .site-nav__link[aria-current="page"] {
  opacity: 1;
}

.site-nav__link .en {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}

.site-nav__link .jp {
  font-size: 10px;
  margin-top: 2px;
  opacity: 0.65;
}

.site-nav__link[aria-current="page"] {
  font-weight: 700;
}

.site-nav__cta {
  border: 1px solid var(--ink);
  padding: 9px 16px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 6px;
}

.site-nav__cta:hover {
  background: var(--ink);
  color: var(--paper);
  opacity: 1;
}

/* Mobile hamburger */
.hamburger {
  display: none;
  background: transparent;
  border: 1px solid var(--ink);
  padding: 8px 12px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.mobile-drawer {
  display: none;
  position: fixed;
  top: calc(var(--switcher-h-pc) + 60px);
  left: 0;
  right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  padding: 24px 28px;
  z-index: 40;
}

.mobile-drawer[data-open="true"] { display: block; }

.mobile-drawer__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mobile-drawer__link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 16px;
  border-bottom: 1px solid var(--grid);
  padding-bottom: 14px;
}

.mobile-drawer__link .en {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

@media (max-width: 1023px) {
  .site-header {
    padding: 16px 28px;
    top: var(--switcher-h-pc);
  }
  .site-nav { display: none; }
  .hamburger { display: inline-flex; align-items: center; gap: 6px; }
}

@media (max-width: 767px) {
  .site-header {
    padding: 14px 20px;
    top: var(--switcher-h-mobile);
  }
  .mobile-drawer { top: calc(var(--switcher-h-mobile) + 56px); padding: 20px; }
  .site-header__logo .name-jp { display: none; }
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--ink);
  padding: 48px 56px 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
  gap: 40px;
}

.site-footer__brand .name {
  font-size: 22px;
  font-weight: 900;
}

.site-footer__brand .name-jp {
  font-size: 11px;
  opacity: 0.6;
  margin-top: 2px;
}

.site-footer__brand .addr {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  opacity: 0.7;
  margin-top: 16px;
  line-height: 1.8;
}

.site-footer__brand .mission {
  font-size: 11px;
  opacity: 0.65;
  margin-top: 18px;
  line-height: 1.7;
}

.site-footer__group .title {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  opacity: 0.6;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.site-footer__group .title .jp {
  margin-left: 6px;
  opacity: 0.75;
  text-transform: none;
  letter-spacing: 0.04em;
}

.site-footer__group ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}

.site-footer__bottom {
  grid-column: 1 / -1;
  border-top: 1px solid var(--grid);
  padding-top: 18px;
  margin-top: 8px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  opacity: 0.55;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 1023px) {
  .site-footer {
    padding: 40px 28px 28px;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .site-footer {
    grid-template-columns: 1fr;
    padding: 32px 20px 24px;
    gap: 28px;
  }
}

/* ── Sidebar (variant C) ─────────────────────────────────────────────── */
.with-sidebar { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - var(--switcher-h-pc)); }

.site-sidebar {
  background: var(--tan);
  border-right: 1px solid var(--ink);
  padding: 28px 24px;
  position: sticky;
  top: var(--switcher-h-pc);
  height: calc(100vh - var(--switcher-h-pc));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.site-sidebar__brand .name {
  font-size: 22px;
  font-weight: 900;
}

.site-sidebar__brand .name-jp {
  font-size: 11px;
  opacity: 0.6;
}

.site-sidebar__brand .est {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  opacity: 0.55;
  margin-top: 4px;
  letter-spacing: 0.08em;
}

.site-sidebar nav {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.site-sidebar__link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  opacity: 0.78;
}

.site-sidebar__link .num { opacity: 0.5; }
.site-sidebar__link .en { letter-spacing: 0.08em; }
.site-sidebar__link .jp {
  font-family: var(--font-base);
  font-size: 12px;
}

.site-sidebar__link[aria-current="page"] {
  opacity: 1;
  font-weight: 700;
}

.site-sidebar__link[aria-current="page"] .marker { margin-left: auto; }

.site-sidebar__foot {
  font-family: ui-monospace, monospace;
  font-size: 9px;
  opacity: 0.5;
  line-height: 1.6;
}

@media (max-width: 1023px) {
  .with-sidebar { display: block; }
  .site-sidebar {
    position: static;
    height: auto;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--ink);
  }
  .site-sidebar nav {
    flex-direction: row;
    overflow-x: auto;
    margin-top: 18px;
    gap: 16px;
    padding-bottom: 4px;
  }
  .site-sidebar__foot { display: none; }
  .site-sidebar__link { flex-shrink: 0; }
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero {
  padding: 80px 56px 88px;
  border-bottom: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: end;
}

.hero__eyebrow {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  opacity: 0.6;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.hero__title {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.hero__sub {
  margin-top: 18px;
  font-size: 14px;
  color: var(--ink-soft);
}

.hero__media {
  aspect-ratio: 4 / 3;
}

@media (max-width: 1023px) {
  .hero { padding: 56px 28px 64px; grid-template-columns: 1fr; gap: 32px; }
  .hero__title { font-size: 48px; }
}

@media (max-width: 767px) {
  .hero { padding: 40px 20px 48px; }
  .hero__title { font-size: 36px; }
}

/* ── Mission band ────────────────────────────────────────────────────── */
.mission-band {
  padding: 56px;
  border-bottom: 1px solid var(--ink);
  background: var(--tan);
}

.mission-band__label {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  opacity: 0.6;
  letter-spacing: 0.14em;
  margin-bottom: 14px;
}

.mission-band__text {
  font-size: 30px;
  line-height: 1.5;
  font-weight: 500;
  max-width: 880px;
}

.mission-band__en {
  display: block;
  font-size: 13px;
  font-family: ui-monospace, monospace;
  opacity: 0.55;
  margin-top: 10px;
}

@media (max-width: 1023px) {
  .mission-band { padding: 40px 28px; }
  .mission-band__text { font-size: 24px; }
}

@media (max-width: 767px) {
  .mission-band { padding: 32px 20px; }
  .mission-band__text { font-size: 20px; }
}

/* ── Business grid ───────────────────────────────────────────────────── */
.biz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}

.biz-card {
  border: 1px solid var(--ink);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 240px;
  background: var(--paper);
}

.biz-card__num {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  opacity: 0.55;
  letter-spacing: 0.08em;
}

.biz-card__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.biz-card__title .en {
  display: block;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  opacity: 0.6;
  margin-top: 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
}

.biz-card__desc {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.75;
  margin-top: auto;
}

@media (max-width: 1023px) {
  .biz-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .biz-grid { grid-template-columns: 1fr; gap: 14px; }
  .biz-card { padding: 22px; min-height: 0; }
}

/* ── Numbers ─────────────────────────────────────────────────────────── */
.numbers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.number {
  padding: 36px 24px;
  border-right: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.number:last-child { border-right: none; }

.number__v {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}

.number__jp { font-size: 13px; }
.number__en {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  opacity: 0.55;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 1023px) {
  .numbers { grid-template-columns: repeat(3, 1fr); }
  .number:nth-child(3n) { border-right: none; }
  .number:nth-child(n+4) { border-top: 1px solid var(--ink); }
  .number__v { font-size: 32px; }
}

@media (max-width: 767px) {
  .numbers { grid-template-columns: 1fr 1fr; }
  .number { padding: 24px 16px; }
  .number:nth-child(2n) { border-right: none; }
  .number:nth-child(3n) { border-right: 1px solid var(--ink); }
  .number:nth-child(n+3) { border-top: 1px solid var(--ink); }
  .number__v { font-size: 28px; }
}

/* ── Works ───────────────────────────────────────────────────────────── */
.works-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.work-card { border: 1px solid var(--ink); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.work-card__media { aspect-ratio: 4 / 3; }
.work-card__cat { font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 0.08em; opacity: 0.55; text-transform: uppercase; }
.work-card__title { font-size: 14px; font-weight: 500; line-height: 1.5; }
.work-card__title .en { display: block; font-size: 11px; opacity: 0.55; margin-top: 4px; font-family: ui-monospace, monospace; }

@media (max-width: 1023px) {
  .works-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .works-grid { grid-template-columns: 1fr; }
}

/* Works table (E variant) */
.works-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.works-table th, .works-table td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--grid); }
.works-table th { font-family: ui-monospace, monospace; font-size: 11px; opacity: 0.6; letter-spacing: 0.08em; text-transform: uppercase; }
.works-table tr:hover td { background: var(--tan); }

@media (max-width: 767px) {
  .works-table { font-size: 13px; }
  .works-table th, .works-table td { padding: 10px 6px; }
  .works-table .col-hide-mobile { display: none; }
}

/* ── News list ───────────────────────────────────────────────────────── */
.news-list {
  display: flex;
  flex-direction: column;
}

.news-item {
  display: grid;
  grid-template-columns: 120px 100px 1fr 20px;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--grid);
  align-items: center;
  font-size: 14px;
}

.news-item__date { font-family: ui-monospace, monospace; font-size: 12px; opacity: 0.65; }
.news-item__cat .tag { font-size: 9px; padding: 3px 7px; }
.news-item__title { line-height: 1.5; }
.news-item__title .en { display: block; font-size: 11px; opacity: 0.55; margin-top: 3px; font-family: ui-monospace, monospace; }
.news-item__arrow { text-align: right; opacity: 0.5; }

@media (max-width: 767px) {
  .news-item { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .news-item__arrow { display: none; }
}

/* ── Strengths ───────────────────────────────────────────────────────── */
.strengths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.strength {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.strength__num {
  font-family: ui-monospace, monospace;
  font-size: 56px;
  font-weight: 300;
  line-height: 1;
  color: var(--accent);
  opacity: 0.4;
}

.strength__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.strength__title .en {
  display: block;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  opacity: 0.6;
  margin-top: 4px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.strength__desc { font-size: 13px; color: var(--ink-soft); line-height: 1.75; }

@media (max-width: 1023px) { .strengths { grid-template-columns: 1fr; gap: 28px; } }

/* ── Case study ──────────────────────────────────────────────────────── */
.case-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.case-card { border: 1px solid var(--ink); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.case-card .tag { align-self: flex-start; }
.case-card__title { font-size: 16px; font-weight: 700; line-height: 1.4; }
.case-card__title .en { display: block; font-size: 11px; opacity: 0.6; font-family: ui-monospace, monospace; margin-top: 4px; font-weight: 400; }
.case-card__desc { font-size: 12px; color: var(--ink-soft); line-height: 1.7; }

@media (max-width: 1023px) { .case-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .case-grid { grid-template-columns: 1fr; } }

/* ── Clients ─────────────────────────────────────────────────────────── */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top: 1px solid var(--grid);
  border-left: 1px solid var(--grid);
}

.client-cell {
  border-right: 1px solid var(--grid);
  border-bottom: 1px solid var(--grid);
  padding: 28px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink-soft);
  background: var(--paper);
  min-height: 80px;
}

@media (max-width: 1023px) { .clients-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .clients-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Members ─────────────────────────────────────────────────────────── */
.members-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.member { display: flex; flex-direction: column; gap: 8px; }
.member__photo { aspect-ratio: 3 / 4; }
.member__name { font-size: 15px; font-weight: 700; }
.member__role { font-size: 12px; color: var(--ink-soft); }
.member__role .en { display: block; font-family: ui-monospace, monospace; font-size: 10px; opacity: 0.55; margin-top: 2px; }

@media (max-width: 1023px) { .members-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .members-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

/* ── Columns ─────────────────────────────────────────────────────────── */
.columns-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.column-card { display: flex; flex-direction: column; gap: 10px; }
.column-card__thumb { aspect-ratio: 16 / 9; }
.column-card__date { font-family: ui-monospace, monospace; font-size: 11px; opacity: 0.55; }
.column-card__title { font-size: 16px; font-weight: 700; line-height: 1.5; }
.column-card__title .en { display: block; font-size: 11px; opacity: 0.55; margin-top: 4px; font-family: ui-monospace, monospace; font-weight: 400; }

@media (max-width: 1023px) { .columns-grid { grid-template-columns: 1fr; } }

/* ── Company outline + Access ─────────────────────────────────────────── */
.company-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: start; }
.outline-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.outline-table th, .outline-table td { padding: 14px 0; border-bottom: 1px solid var(--grid); text-align: left; vertical-align: top; }
.outline-table th { width: 32%; font-weight: 500; color: var(--ink-soft); }

@media (max-width: 1023px) { .company-grid { grid-template-columns: 1fr; } }

/* ── Banners ─────────────────────────────────────────────────────────── */
.banner {
  padding: 56px;
  border-bottom: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 24px;
  align-items: center;
}

.banner__title { font-size: 32px; font-weight: 700; line-height: 1.3; }
.banner__title .en { display: block; font-family: ui-monospace, monospace; font-size: 12px; opacity: 0.55; margin-top: 6px; font-weight: 400; letter-spacing: 0.08em; }
.banner__sub { font-size: 13px; color: var(--ink-soft); margin-top: 8px; }

@media (max-width: 1023px) {
  .banner { padding: 40px 28px; grid-template-columns: 1fr; }
  .banner__title { font-size: 26px; }
}

@media (max-width: 767px) { .banner { padding: 32px 20px; } .banner__title { font-size: 22px; } }

/* ── Forms (contact) ─────────────────────────────────────────────────── */
.form { display: grid; gap: 18px; max-width: 720px; }
.form__row { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--grid); }
.form__row label { font-size: 13px; font-weight: 500; padding-top: 8px; }
.form__row label .req { color: var(--accent); margin-left: 4px; font-size: 11px; }
.form__row input, .form__row textarea, .form__row select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--ink); background: var(--paper);
  font-family: inherit; font-size: 14px; color: var(--ink);
}
.form__row textarea { min-height: 140px; resize: vertical; }
.form__submit { display: flex; gap: 12px; margin-top: 16px; }

@media (max-width: 767px) {
  .form__row { grid-template-columns: 1fr; gap: 6px; }
  .form__row label { padding-top: 0; }
}