:root {
  --hub-ink: #08213f;
  --hub-orange: #ef6a1a;
  --hub-paper: #fbfaf6;
  --hub-muted: #526478;
  --hub-line: rgba(8, 33, 63, 0.14);
}

.information-hub { color: var(--hub-ink); background: var(--hub-paper); }
.hub-hero {
  position: relative; isolation: isolate; min-height: 520px;
  padding: clamp(72px, 9vw, 124px) clamp(24px, 8vw, 128px);
  overflow: hidden; color: #fff;
  background: linear-gradient(112deg, rgba(5,28,54,.98), rgba(8,47,82,.86)), url("/images/okinawa-civic-texture.webp") center / cover no-repeat;
}
.hub-hero::after {
  position: absolute; z-index: -1; top: -110px; right: -80px;
  width: min(48vw, 620px); aspect-ratio: 1; content: "";
  border: 1px solid rgba(255,255,255,.18); border-radius: 50%;
  box-shadow: 0 0 0 62px rgba(255,255,255,.025), 0 0 0 124px rgba(255,255,255,.018);
}
.hub-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(52px,7vw,86px); color: rgba(255,255,255,.58); letter-spacing: .13em; font: 800 9px/1 Arial,sans-serif; }
.hub-breadcrumb a:hover { color: #fff; }
.hub-eyebrow { display: flex; align-items: center; gap: 14px; margin: 0; color: #ff9c62; letter-spacing: .24em; font: 800 10px/1 Arial,sans-serif; }
.hub-eyebrow::after { width: 42px; height: 1px; content: ""; background: var(--hub-orange); }
.hub-hero h1 { max-width: 920px; margin: 24px 0; letter-spacing: -.055em; font-size: clamp(46px,6.2vw,84px); line-height: 1.25; }
.hub-hero h1 em { color: var(--hub-orange); font-style: normal; }
.hub-hero > p:last-child { max-width: 760px; margin: 0; color: rgba(255,255,255,.72); font-size: 15px; line-height: 2; }
.hub-section { padding: clamp(78px,9vw,128px) clamp(24px,8vw,128px); }
.hub-section.alt { background: #edf5f5; }
.hub-section.dark { color: #fff; background: #061a31; }
.hub-section-head { display: grid; grid-template-columns: minmax(170px,.42fr) minmax(0,1.58fr); gap: clamp(32px,6vw,82px); margin-bottom: 46px; }
.hub-section-head > p { margin: 10px 0 0; color: var(--hub-orange); letter-spacing: .22em; font: 800 10px/1 Arial,sans-serif; }
.hub-section-head h2 { margin: 0; letter-spacing: -.045em; font-size: clamp(34px,4.4vw,60px); line-height: 1.38; }
.hub-section-head div > p { max-width: 760px; margin: 18px 0 0; color: var(--hub-muted); font-size: 14px; line-height: 1.95; }
.hub-section.dark .hub-section-head div > p { color: rgba(255,255,255,.65); }
.hub-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--hub-line); border-left: 1px solid var(--hub-line); }
.hub-card { position: relative; display: flex; flex-direction: column; min-height: 340px; padding: 28px; border-right: 1px solid var(--hub-line); border-bottom: 1px solid var(--hub-line); background: #fff; }
.hub-card > small, .hub-record > time { color: #b94700; letter-spacing: .16em; font: 800 9px/1 Arial,sans-serif; }
.hub-card h3 { margin: 54px 0 16px; font-size: clamp(22px,2.2vw,30px); line-height: 1.5; }
.hub-card p { margin: 0; color: var(--hub-muted); font-size: 13px; line-height: 1.9; }
.hub-card a, .hub-card > span { display: flex; justify-content: space-between; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--hub-line); font-size: 11px; font-weight: 800; }
.hub-card a::after { color: var(--hub-orange); content: "↗"; font-size: 17px; }
.hub-records { display: grid; border-top: 1px solid var(--hub-line); }
.hub-record { display: grid; grid-template-columns: 132px 150px minmax(0,1fr); gap: 26px; padding: 28px 0; border-bottom: 1px solid var(--hub-line); }
.hub-record > span { color: var(--hub-orange); letter-spacing: .12em; font: 800 9px/1.5 Arial,sans-serif; }
.hub-record h3 { margin: 0 0 10px; font-size: 21px; }
.hub-record p { margin: 0; color: var(--hub-muted); font-size: 13px; line-height: 1.85; }
.hub-record ul { margin: 12px 0 0; padding-left: 1.25em; color: var(--hub-muted); font-size: 12px; line-height: 1.9; }
.hub-contact { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 36px; padding: 34px; border: 1px solid rgba(255,255,255,.22); }
.hub-contact h3 { margin: 0 0 12px; font-size: 26px; }
.hub-contact p { margin: 0; color: rgba(255,255,255,.65); font-size: 13px; line-height: 1.8; }
.hub-contact nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.hub-contact a { min-width: 150px; padding: 17px 20px; color: var(--hub-ink); background: var(--hub-orange); text-align: center; font-size: 11px; font-weight: 800; }
.hub-contact a:last-child { color: #fff; border: 1px solid rgba(255,255,255,.3); background: transparent; }
.hub-note { margin: 26px 0 0; padding: 20px 22px; border-left: 4px solid var(--hub-orange); color: var(--hub-muted); background: rgba(8,33,63,.04); font-size: 12px; line-height: 1.85; }
.status-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.status-grid .hub-card { min-height: 310px; }
.status-label { display: inline-flex; align-items: center; align-self: flex-start; margin-top: 22px; padding: 8px 10px; color: #fff; border-radius: 999px; background: #0c6672; letter-spacing: .08em; font-size: 10px; font-weight: 800; }
.status-label.draft { background: #9b470d; }
.status-label.reference { background: #526478; }
.status-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; margin: 0; background: var(--hub-line); border: 1px solid var(--hub-line); }
.status-list > div { padding: 24px; background: #fff; }
.status-list dt { margin: 0 0 10px; color: #b94700; letter-spacing: .14em; font: 800 10px/1.4 Arial,sans-serif; }
.status-list dd { margin: 0; color: var(--hub-muted); font-size: 13px; line-height: 1.9; }
.status-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.status-actions a { padding: 15px 19px; color: #fff; border: 1px solid rgba(255,255,255,.28); font-size: 11px; font-weight: 800; }
.status-actions a:first-child { color: var(--hub-ink); border-color: var(--hub-orange); background: var(--hub-orange); }

@media (max-width: 900px) {
  .hub-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hub-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hub-record { grid-template-columns: 110px 120px minmax(0,1fr); gap: 18px; }
}
@media (max-width: 720px) {
  .hub-hero { min-height: 0; padding: 56px 18px 78px; }
  .hub-hero h1 { font-size: clamp(43px,13vw,60px); }
  .hub-hero > p:last-child { font-size: 14px; }
  .hub-section { padding: 72px 18px; }
  .hub-section-head { display: block; }
  .hub-section-head > p { margin-bottom: 24px; }
  .hub-card-grid { grid-template-columns: 1fr; }
  .hub-card, .hub-card:last-child:nth-child(odd) { grid-column: auto; min-height: 300px; }
  .hub-record { grid-template-columns: 1fr; gap: 8px; }
  .hub-record h3 { margin-top: 10px; }
  .hub-contact { grid-template-columns: 1fr; padding: 24px; }
  .hub-contact nav { display: grid; justify-content: stretch; }
  .status-grid, .status-list { grid-template-columns: 1fr; }
  .status-grid .hub-card { min-height: 280px; }
}