/* ==========================================================================
   Shared layout CSS for secondary pages (verticals + blog posts).
   Pulls design tokens from colors_and_type.css; supplies the nav, footer,
   hero, and content patterns the vertical/blog pages need.
   The main index.html keeps its own inline styles untouched.
   ========================================================================== */

:root { --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --page-max: 1360px; --gutter: 48px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--fg); font-family: var(--font-sans); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
h1, h2, h3, h4 { font-family: var(--font-sans); color: var(--sia-navy); margin: 0; letter-spacing: -0.02em; }
h1 { font-size: clamp(40px, 4.4vw, 72px); font-weight: 600; line-height: 1.04; }
h2 { font-size: clamp(30px, 3vw, 48px); font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; }
h3 { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
p  { margin: 0; line-height: 1.6; color: var(--fg-2); }
.lead { font-size: 19px; line-height: 1.5; color: var(--fg-2); font-weight: 300; }
.eyebrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sia-teal-dark); font-weight: 600; display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 24px; height: 1.5px; background: var(--sia-teal-dark); display: block; }
.mark { color: var(--sia-teal-dark); }

/* ---- TOPBAR (frames RegAI as a Sia sub-property) ---- */
.topbar { background: var(--sia-navy); color: rgba(255,255,255,0.72); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.topbar .inner { max-width: var(--page-max); margin: 0 auto; padding: 9px var(--gutter); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.topbar a.back { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.78); transition: color 150ms; }
.topbar a.back:hover { color: var(--sia-mint); }
.topbar a.back svg { transition: transform 200ms var(--ease-out); }
.topbar a.back:hover svg { transform: translateX(-3px); }
.topbar .tag { color: rgba(255,255,255,0.5); }
.topbar .tag a { color: var(--sia-mint); }

/* ---- NAV ---- */
.nav { position: sticky; top: 0; left: 0; right: 0; z-index: 50; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(255,255,255,0.85); border-bottom: 1px solid rgba(10,21,30,0.06); }
.nav .inner { max-width: var(--page-max); margin: 0 auto; padding: 14px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.nav .brand { display: flex; align-items: center; }
.nav .brand .logo { height: 56px; width: auto; margin: -14px 0; }
.nav ul { display: flex; list-style: none; gap: 32px; padding: 0; margin: 0; font-size: 15px; color: var(--fg-2); font-weight: 500; }
.nav .right { display: flex; gap: 12px; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-weight: 600; font-size: 15px; padding: 12px 22px; cursor: pointer; border: 0; transition: all 180ms var(--ease-out); }
.btn.primary { background: var(--sia-navy); color: #fff; }
.btn.primary:hover { background: #000; }
.btn.ghost { background: transparent; color: var(--sia-navy); border: 1px solid rgba(10,21,30,0.15); }
.btn.ghost:hover { border-color: var(--sia-navy); }
.btn svg { width: 14px; height: 14px; }

/* ---- HERO (vertical) ---- */
.v-hero { padding: 88px 0 96px; background: linear-gradient(160deg, #FBF4EC 0%, #F3E8D6 45%, #E9DCC3 85%, #F2E5CE 100%); position: relative; overflow: hidden; }
.v-hero .inner { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 64px; align-items: center; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
.v-hero h1 { margin: 18px 0 0; }
.v-hero h1 .mark { color: var(--sia-teal-dark); }
.v-hero .sub { margin-top: 22px; font-size: 19px; line-height: 1.55; color: var(--fg-2); font-weight: 300; max-width: 640px; }
.v-hero .cta-row { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }
.v-hero .stats { margin-top: 56px; display: flex; gap: 48px; padding-top: 32px; border-top: 1px solid rgba(10,21,30,0.12); flex-wrap: wrap; }
.v-hero .stat .n { font-size: 40px; font-weight: 600; color: var(--sia-navy); letter-spacing: -0.03em; line-height: 1; }
.v-hero .stat .n em { color: var(--sia-teal-dark); font-style: normal; font-size: 22px; vertical-align: top; margin-left: 2px; }
.v-hero .stat .l { font-size: 13px; color: var(--fg-3); margin-top: 8px; letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--font-mono); }
.v-hero .visual { aspect-ratio: 4/5; background: url('/assets/imagery/abstract_03_glass.png') center/cover no-repeat; }

/* ---- SECTIONS ---- */
.section { padding: 96px 0; }
.section.soft { background: var(--bg-soft); }
.section.navy { background: var(--sia-navy); color: #fff; }
.section.navy h1, .section.navy h2 { color: #fff; }
.section.navy p { color: rgba(255,255,255,0.78); }
.section.navy .eyebrow, .section.navy .eyebrow::before { color: var(--sia-mint); background: var(--sia-mint); }
.section.navy .eyebrow::before { background: var(--sia-mint); }
.section-head { max-width: 820px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-top: 16px; text-wrap: balance; }
.section-head .lead { margin-top: 18px; }

/* ---- FRAMEWORKS GRID ---- */
.frameworks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(10,21,30,0.08); border: 1px solid rgba(10,21,30,0.08); }
.frameworks-grid .fw { background: #fff; padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 6px; }
.frameworks-grid .fw .juris { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sia-teal-dark); font-weight: 600; }
.frameworks-grid .fw .name { font-size: 17px; font-weight: 600; color: var(--sia-navy); letter-spacing: -0.005em; }
.frameworks-grid .fw .domain { font-size: 13px; color: var(--fg-3); margin-top: 4px; line-height: 1.4; }

/* ---- CASE CARD ---- */
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.case-card { background: #fff; border: 1px solid rgba(10,21,30,0.08); padding: 36px 36px 32px; display: flex; flex-direction: column; gap: 22px; }
.case-card .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sia-teal-dark); border: 1px solid var(--sia-teal-dark); padding: 6px 12px; align-self: flex-start; }
.case-card h3 { font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; color: var(--sia-navy); font-weight: 600; }
.case-card .sum { font-size: 15px; color: var(--fg-2); line-height: 1.55; }
.case-card .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 2px solid var(--sia-navy); padding-top: 18px; }
.case-card .metric .n { font-size: 28px; font-weight: 600; color: var(--sia-navy); letter-spacing: -0.025em; line-height: 1; }
.case-card .metric .n em { color: var(--sia-teal-dark); font-style: normal; font-size: 16px; vertical-align: top; margin-left: 2px; }
.case-card .metric .l { font-size: 11px; color: var(--fg-3); margin-top: 6px; font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }

/* ---- TESTIMONIAL ---- */
.tm { max-width: 880px; margin: 0 auto; padding: 40px 36px; background: #fff; border: 1px solid rgba(10,21,30,0.08); position: relative; }
.tm::before { content: "\201C"; position: absolute; top: 8px; left: 24px; font-family: Georgia, serif; font-size: 80px; line-height: 1; color: var(--sia-mint); font-weight: 700; }
.tm blockquote { margin: 0; padding-top: 36px; font-size: 19px; line-height: 1.5; color: var(--sia-navy); letter-spacing: -0.005em; }
.tm figcaption { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(10,21,30,0.08); display: flex; flex-direction: column; gap: 4px; }
.tm figcaption .who { font-size: 14px; font-weight: 600; color: var(--sia-navy); }
.tm figcaption .org { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sia-teal-dark); font-weight: 600; }

/* ---- CTA ---- */
.cta-band { padding: 96px 0; background: linear-gradient(135deg, #FBF4EC 0%, #F0E2CB 100%); }
.cta-band .inner { max-width: 720px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.cta-band h2 { color: var(--sia-navy); }
.cta-band p { font-size: 18px; margin-top: 18px; }
.cta-band .row { margin-top: 32px; display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---- BREADCRUMBS ---- */
.crumbs { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 16px; }
.crumbs a { color: var(--sia-teal-dark); }
.crumbs a:hover { text-decoration: underline; }

/* ---- FOOTER ---- */
footer.site-footer { background: var(--sia-navy); color: rgba(255,255,255,0.7); padding: 80px 0 36px; }
footer.site-footer .inner { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
footer.site-footer .top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.1); }
footer.site-footer .brand-mark { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 22px; }
footer.site-footer .brand-mark img { height: 32px; width: auto; display: block; }
footer.site-footer .brand-mark .divider { width: 1px; height: 22px; background: rgba(255,255,255,0.2); }
footer.site-footer .brand-mark .product { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.92); }
footer.site-footer .brand-mark .product .mark { color: var(--sia-mint); }
footer.site-footer .brand img { display: block; }
footer.site-footer .brand p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.6); max-width: 340px; }
footer.site-footer .brand p a { color: rgba(255,255,255,0.85); border-bottom: 1px solid rgba(0,222,204,0.3); }
footer.site-footer .brand p a:hover { color: var(--sia-mint); }
footer.site-footer h5 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; font-weight: 600; margin: 0 0 18px; }
footer.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
footer.site-footer a { font-size: 14px; color: rgba(255,255,255,0.7); transition: color 150ms; }
footer.site-footer a:hover { color: var(--sia-mint); }
footer.site-footer .bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; font-size: 13px; color: rgba(255,255,255,0.5); font-family: var(--font-mono); letter-spacing: 0.06em; }
footer.site-footer .bottom .links { display: flex; gap: 24px; }

/* ---- BLOG ---- */
.post { padding: 130px 0 80px; }
.post .article-wrap { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.post h1 { font-size: clamp(36px, 3.6vw, 56px); margin-top: 14px; }
.post .meta-row { margin: 18px 0 32px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); letter-spacing: 0.12em; text-transform: uppercase; display: flex; gap: 16px; flex-wrap: wrap; }
.post .lede { font-size: 21px; line-height: 1.5; color: var(--fg-2); font-weight: 300; margin: 0 0 36px; }
.post article h2 { font-size: clamp(24px, 2vw, 32px); margin: 48px 0 18px; }
.post article h3 { font-size: 20px; margin: 32px 0 12px; }
.post article p, .post article ul, .post article ol { font-size: 16px; line-height: 1.7; color: var(--fg); margin: 0 0 18px; }
.post article ul, .post article ol { padding-left: 22px; }
.post article li { margin-bottom: 6px; }
.post article a { color: var(--sia-teal-dark); border-bottom: 1px solid rgba(0,162,163,0.3); }
.post article a:hover { border-bottom-color: var(--sia-teal-dark); }
.post article blockquote { border-left: 3px solid var(--sia-mint); padding: 8px 0 8px 22px; margin: 28px 0; font-style: italic; color: var(--sia-navy); font-size: 18px; line-height: 1.5; }
.post article code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-soft); padding: 2px 6px; }
.post .related { margin-top: 64px; padding-top: 36px; border-top: 1px solid rgba(10,21,30,0.1); }
.post .related h4 { font-size: 14px; font-family: var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); font-weight: 600; margin: 0 0 14px; }
.post .related ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.post .related a { color: var(--sia-navy); border-bottom: 0; }
.post .related a:hover { color: var(--sia-teal-dark); }

/* ---- RESPONSIVE ---- */
@media (max-width: 1100px) {
  .v-hero .inner { grid-template-columns: 1fr; gap: 48px; }
  .v-hero .visual { display: none; }
  .case-grid { grid-template-columns: 1fr; }
  .frameworks-grid { grid-template-columns: repeat(2, 1fr); }
  footer.site-footer .top { grid-template-columns: 1fr 1fr; }
  .nav ul { display: none; }
}
@media (max-width: 640px) {
  :root { --gutter: 20px; }
  h1 { font-size: 36px; line-height: 1.06; }
  h2 { font-size: 28px; line-height: 1.1; }
  h3 { font-size: 20px; }
  .lead, .post .lede { font-size: 17px; }
  .topbar .inner { padding: 7px var(--gutter); font-size: 10px; letter-spacing: 0.1em; }
  .topbar .tag { display: none; }
  .nav .inner { padding: 12px var(--gutter); gap: 10px; }
  .nav .brand .logo { height: 44px; margin: -12px 0; }
  .nav .right .btn.ghost { display: none; }
  .nav .right .btn.primary { padding: 9px 14px; font-size: 13px; }
  .v-hero { padding: 110px 0 64px; }
  .v-hero .stats { gap: 24px 28px; flex-wrap: wrap; }
  .v-hero .stat .n { font-size: 32px; }
  .section { padding: 64px 0; }
  .section-head { margin-bottom: 32px; }
  .frameworks-grid { grid-template-columns: 1fr; }
  .case-card { padding: 24px 22px 26px; gap: 16px; }
  .case-card h3 { font-size: 20px; }
  .case-card .metric .n { font-size: 22px; }
  .case-card .metric .l { font-size: 10px; }
  .tm { padding: 28px 22px; }
  .tm blockquote { font-size: 16px; padding-top: 28px; }
  .cta-band { padding: 64px 0; }
  footer.site-footer { padding: 56px 0 28px; }
  footer.site-footer .top { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
  footer.site-footer .bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .post { padding: 100px 0 64px; }
  .post h1 { font-size: 32px; }
  .post .lede { font-size: 18px; }
  .post article p, .post article ul, .post article ol { font-size: 15px; }
}