/* hub.css -- hub and informational pages (Solutions, Technology, Resources,
   About, Contact, Markets and the destination pages under them). Built on
   inner-page.css and the Visual System v3 tokens (design-system-v3.css,
   inner-v3.css). Owner direction 2026-10-14: the homepage stays brief and the
   detail lives here, one click away. */
.hub-hero { min-height: 0; padding-bottom: 56px; }
.hub-hero .hero-bg {
  background-image:
    linear-gradient(180deg, rgba(5, 11, 20, .7) 0%, rgba(5, 11, 20, .9) 62%, rgba(5, 11, 20, 1) 100%),
    url('assets/salian-avenue-1.webp');
  background-position: center 34%;
}
@media (max-width: 760px) {
  .hub-hero .hero-bg { background-image: linear-gradient(180deg, rgba(5, 11, 20, .7) 0%, rgba(5, 11, 20, .9) 62%, rgba(5, 11, 20, 1) 100%), url('assets/salian-avenue-1-mobile.webp'); }
}
.hub-hero .hero-lede { max-width: 62ch; }

.hub-section { padding-top: 44px; padding-bottom: 20px; }
.hub-section > h2 { max-width: 34ch; }
.hub-section > p { color: var(--bone-soft); font-size: 16px; line-height: 1.65; max-width: 70ch; margin: 0 0 14px; }

.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 14px; margin: 20px 0 0; padding: 0; list-style: none; }
.hub-card { position: relative; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 18px 20px 18px; border: 1px solid var(--hairline); border-left: 3px solid var(--sd-gold-muted, rgba(var(--gold-rgb), .55)); border-radius: var(--sd-radius, 3px); background: var(--sd-surface-1, #0e1624); transition: border-color .18s; }
.hub-card:hover, .hub-card:focus-within { border-color: rgba(var(--gold-rgb), .7); }
.hub-card h3 { margin: 0; font-family: var(--sd-font-display, Inter, sans-serif); font-weight: 600; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.hub-card h3 a { color: var(--sd-text-1, var(--bone)); text-decoration: none; }
.hub-card h3 a::after { content: ""; position: absolute; inset: 0; }
.hub-card h3 a:focus-visible { outline: none; }
.hub-card:has(h3 a:focus-visible) { outline: 2px solid var(--sd-cyan, var(--cyan)); outline-offset: 2px; }
.hub-card p { margin: 0; color: var(--bone-soft); font-family: var(--sd-font-body, Inter, sans-serif); font-size: 15px; line-height: 1.6; }
.hub-card .hub-kind { font-family: var(--sd-font-tech, 'JetBrains Mono', monospace); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--sd-cyan, var(--cyan)); }
.hub-card .hub-go { margin-top: auto; font-family: var(--sd-font-body, Inter, sans-serif); font-size: 13.5px; color: var(--sd-gold, var(--gold)); }

.hub-steps { counter-reset: hub-step; display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; max-width: 78ch; }
.hub-steps li { counter-increment: hub-step; position: relative; padding: 14px 18px 14px 58px; border: 1px solid var(--hairline); border-radius: var(--sd-radius, 3px); background: rgba(8, 17, 28, .7); color: var(--bone-soft); font-size: 15.5px; line-height: 1.6; }
.hub-steps li::before { content: counter(hub-step, upper-roman); position: absolute; left: 16px; top: 14px; width: 30px; font-family: var(--sd-font-brand, Cinzel, serif); font-weight: 700; font-size: 15px; color: var(--sd-gold, var(--gold)); }
.hub-steps b { color: var(--sd-text-1, var(--bone)); font-weight: 600; }

.hub-list { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; max-width: 78ch; }
.hub-list li { position: relative; padding-left: 20px; color: var(--bone-soft); font-size: 15.5px; line-height: 1.6; }
.hub-list li::before { content: "\25b8"; position: absolute; left: 0; color: var(--sd-gold, var(--gold)); }
.hub-list b { color: var(--sd-text-1, var(--bone)); font-weight: 600; }

.hub-router { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; max-width: 70ch; }
.hub-router a { display: flex; flex-direction: column; gap: 2px; min-height: 56px; padding: 12px 16px; border: 1px solid var(--hairline); border-radius: var(--sd-radius, 3px); background: var(--sd-surface-1, #0e1624); color: var(--sd-text-1, var(--bone)); text-decoration: none; font-size: 15.5px; }
.hub-router a:hover { border-color: rgba(var(--cyan-rgb), .6); }
.hub-router a span { color: var(--bone-soft); font-size: 13.5px; }

.hub-note { margin: 22px 0 0; padding: 14px 18px; max-width: 78ch; border-left: 2px solid rgba(var(--gold-rgb), .65); background: rgba(8, 17, 28, .6); color: var(--bone-soft); font-size: 14.5px; line-height: 1.65; }
.hub-note b { color: var(--sd-text-1, var(--bone)); }
.hub-cui { border-left-color: var(--sd-red, #ff5a68); }

.hub-facts { display: grid; grid-template-columns: minmax(0, 14ch) 1fr; gap: 1px; margin: 16px 0 0; max-width: 78ch; border: 1px solid var(--hairline); background: var(--hairline); }
.hub-facts dt, .hub-facts dd { margin: 0; padding: 10px 14px; background: var(--sd-bg-1, #08111c); font-size: 14.5px; line-height: 1.55; }
.hub-facts dt { font-family: var(--sd-font-tech, 'JetBrains Mono', monospace); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sd-gold, var(--gold)); }
.hub-facts dd { color: var(--bone-soft); }
@media (max-width: 560px) { .hub-facts { grid-template-columns: 1fr; } .hub-facts dt { padding-bottom: 2px; } }

.hub-final { margin-top: 40px; }

/* Contact page form: visible labels over the shared contact-form.js fields. */
.ct-form { display: grid; gap: 14px; max-width: 560px; margin: 20px 0 0; }
.ct-field { display: grid; gap: 6px; }
.ct-form label { display: block; color: var(--sd-text-1, var(--bone)); font-size: 14.5px; font-weight: 500; }
.ct-form label .ct-opt { color: var(--bone-soft); font-weight: 400; }
.ct-form input, .ct-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: var(--sd-radius, 3px); background: var(--sd-bg-1, #08111c); color: var(--sd-text-1, var(--bone)); font: 16px/1.5 var(--sd-font-body, Inter, sans-serif); }
.ct-form input:focus, .ct-form textarea:focus { border-color: var(--sd-cyan, var(--cyan)); outline: 2px solid rgba(var(--cyan-rgb), .35); outline-offset: 0; }
.ct-form textarea { min-height: 140px; resize: vertical; }
.ct-form [aria-invalid="true"] { border-color: var(--sd-red, #ff5a68); }
.ct-intent { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.ct-intent legend { margin-bottom: 8px; color: var(--sd-text-1, var(--bone)); font-size: 14.5px; font-weight: 500; }
.ct-form .intent-btn { flex: 1 1 140px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--sd-radius, 3px); background: transparent; color: var(--bone-soft); font: 500 14px/1.2 var(--sd-font-body, Inter, sans-serif); letter-spacing: .02em; cursor: pointer; }
.ct-form .intent-btn.active, .ct-form .intent-btn[aria-pressed="true"] { border-color: var(--sd-gold, var(--gold)); color: var(--sd-gold, var(--gold)); background: rgba(var(--gold-rgb), .08); }
.ct-form #cf-submit { justify-self: start; min-height: 48px; padding: 12px 26px; border: 1px solid var(--sd-gold, var(--gold)); border-radius: var(--sd-radius, 3px); background: rgba(var(--gold-rgb), .14); color: var(--sd-text-1, var(--bone)); font: 600 15px/1.2 var(--sd-font-body, Inter, sans-serif); letter-spacing: .04em; cursor: pointer; }
.ct-form #cf-submit:hover { background: rgba(var(--gold-rgb), .26); }
.ct-form #cf-submit:disabled { opacity: .7; cursor: default; }
.ct-form .cf-status { margin: 0; min-height: 1.5em; color: var(--bone-soft); font-size: 14.5px; line-height: 1.55; }
.ct-form .cf-status.is-error { color: #ffb4bb; }
.ct-form .cf-status.is-ok { color: #9ff0c0; }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ct-direct { display: grid; gap: 6px; margin: 18px 0 0; color: var(--bone-soft); font-size: 15px; }
.ct-direct a { color: var(--sd-gold, var(--gold)); }

@media print {
  .hub-card { break-inside: avoid; }
  .ct-form { display: none; }
}