/*
  CAKGLO July identity bridge
  Applies the approved Claude visual baseline to the cgtp pages without
  changing their page-specific content, markup, or SEO data.
*/
:root {
  --navy: #1b2a4a;
  --wine: #7b1c2d;
  --cream: #faf7f2;
  --sand: #eee6da;
  --ink: #2d2b2a;
  --muted: #706b64;
  --line: #e2dbd1;
}

body {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--navy);
  line-height: 1.16;
  text-wrap: pretty;
}

/* Same compact, single-brand header rhythm as the approved July pages. */
.site-header {
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
}

.site-header .global-nav,
.site-header .nav {
  min-height: 58px;
  padding-block: 10px;
}

.site-header .brand img {
  width: 82px;
  height: 34px;
  object-fit: contain;
  border-radius: 4px;
}

.site-header .brand > span { display: none; }

.site-header .nav-link,
.site-header .drop-btn,
.site-header .nav-links > a,
.site-header .nav-drop-btn {
  font-size: .9rem;
  font-weight: 600;
}

.site-header .nav-link:hover,
.site-header .drop-btn:hover,
.site-header .nav-links > a:hover,
.site-header .nav-drop-btn:hover {
  background: var(--cream);
}

/* Do not leave a large blank band between breadcrumb and hero copy. */
.hero .crumbs,
.hero .breadcrumb {
  padding-top: 14px;
  margin-bottom: 10px;
}

.hero .hero-grid {
  gap: clamp(28px, 5vw, 48px);
  padding-block: clamp(30px, 5vw, 68px) clamp(24px, 3vw, 40px);
}

.hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 6px 0 16px;
}

.hero h1 em {
  color: var(--wine);
  font-style: italic;
}

.hero .lead,
.hero .hero-sub {
  color: #5a554f;
  font-size: 1.06rem;
  line-height: 1.6;
}

.btn,
.nav-quote {
  border-radius: 6px;
  font-size: .92rem;
  font-weight: 700;
}

.btn-primary,
.nav-quote {
  background: var(--wine);
  border-color: var(--wine);
}

section { padding-block: clamp(56px, 7vw, 92px); }

.section-head h2,
.sec-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 800;
}

.section-head > p,
.sec-head > p { color: var(--muted); }

.final,
.final-light {
  background: #fff;
  color: var(--ink);
}

.final h2,
.final-light h2 { color: var(--navy); }

/* The identity bridge turns .final white — the navy-era leftovers must follow (2026-07-17):
   hero-actions in a centered final must center, and the white-outline secondary
   button was invisible on the now-white background. */
.final .hero-actions,
.final-light .hero-actions { justify-content: center; }
.final .btn-secondary,
.final-light .btn-secondary { background: #fff; color: var(--navy); border-color: var(--navy); }
.final .btn-secondary:hover,
.final .btn-secondary:focus-visible,
.final-light .btn-secondary:hover,
.final-light .btn-secondary:focus-visible { background: var(--navy); color: #fff; }

@media (max-width: 760px) {
  .site-header .global-nav,
  .site-header .nav { min-height: 56px; }

  .hero .hero-grid { padding-top: 28px; }

  .hero h1 { font-size: clamp(2rem, 10vw, 2.8rem); }
}

/* about-card hero steps (products family, 2026-07-16) */
.about-card .hero-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px;counter-reset:hs}
.about-card .hero-steps li{counter-increment:hs;display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start}
.about-card .hero-steps li::before{content:counter(hs);width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--navy,#17233f);color:#fff;font-size:.78rem;font-weight:700}
.about-card .hero-steps b{display:block;font-size:.92rem}
.about-card .hero-steps span{font-size:.82rem;color:var(--muted,#6a6459);line-height:1.5}