/* ============================================================
   Compatibility layer — restyles the OLD page components
   (services, vendors, white-papers, case-studies, root pages)
   into the new design system. Scoped to .page so it never
   touches the new nav/footer. Load AFTER site.css.
   ============================================================ */

.page{max-width:1240px; margin:0 auto; padding:clamp(48px,8vh,100px) 7vw; color:var(--body); font-size:17px; line-height:1.75;}
.page > *:first-child{margin-top:0;}

/* headings */
.page h1{font-family:var(--serif); font-weight:500; font-size:clamp(38px,6vw,72px); line-height:1.04; letter-spacing:-.015em; color:var(--ink); margin:0 0 24px;}
.page h2{font-family:var(--serif); font-weight:500; font-size:clamp(26px,3vw,40px); line-height:1.12; letter-spacing:-.01em; color:var(--ink); margin:52px 0 18px;}
.page h3{font-family:var(--serif); font-weight:500; font-size:22px; color:var(--ink); margin:34px 0 12px;}
.page h4{font-family:var(--serif); font-weight:500; font-size:18px; color:var(--ink); margin:24px 0 10px;}
.page p{margin:0 0 20px; color:var(--body); line-height:1.75;}
.page a{color:#8a7a2c; text-decoration:none;}
.page a:hover{text-decoration:underline;}
.page strong{color:var(--ink); font-weight:600;}
.page hr{border:none; border-top:1px solid var(--line); margin:40px 0;}
.page img{border-radius:4px;}

/* lists */
.page ul, .page ol{margin:0 0 20px; padding-left:0; list-style:none;}
.page li{position:relative; padding-left:28px; margin-bottom:12px; line-height:1.65;}
.page ul > li::before{content:''; position:absolute; left:0; top:10px; width:7px; height:7px; background:var(--accent); border-radius:50%;}
.page ol{counter-reset:co;}
.page ol > li{counter-increment:co;}
.page ol > li::before{content:counter(co); position:absolute; left:0; top:0; color:var(--accent); font-family:var(--serif); font-size:15px;}

/* labels, kickers, eyebrows, tags, meta */
.page [class*="label"], .page [class*="kicker"], .page [class*="eyebrow"],
.page .c-lbl, .page [class*="-tag"], .page [class*="qtag"], .page [class*="flag"]{
  font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); font-weight:600;
}
.page [class*="section-heading"]{font-family:var(--serif); font-weight:500; font-size:clamp(26px,3vw,40px); color:var(--ink); letter-spacing:-.01em; text-transform:none;}

/* big stat / numeral figures */
.page [class*="stat-num"], .page [class*="teaser-num"], .page [class*="takeaway-num"],
.page [class*="proof"], .page [class*="-amount"]{
  font-family:var(--serif); font-weight:500; color:var(--ink); line-height:1;
}

/* generic cards */
.page [class*="card"], .page .quad, .page .role-card, .page .lever, .page .takeaway,
.page .teaser-item, .page .related-card, .page .testimonial, .page .callout, .page .bluf-box{
  border:1px solid var(--line); border-radius:4px; padding:28px 30px; background:var(--white);
}
.page .callout, .page .bluf-box, .page .callout-box{
  border:none; border-left:3px solid var(--accent); border-radius:0 5px 5px 0; background:var(--grey);
}

/* generic grids */
.page [class*="grid"], .page [class*="cases"], .page .matrix, .page .quad{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px;
}

/* buttons */
.page .btn-solid, .page .btn-brass, .page .btn-solid-lg{
  display:inline-block; font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--ink) !important; background:var(--accent); padding:15px 28px; border-radius:2px; text-decoration:none;
}
.page .btn-ghost, .page .btn-ghost-lg, .page .action-link{
  display:inline-block; font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--ink) !important; border:1px solid var(--ink); padding:14px 27px; border-radius:2px; text-decoration:none;
}
.page .btn-solid:hover, .page .btn-brass:hover, .page .btn-ghost:hover{text-decoration:none; opacity:.9;}

/* tables */
.page table{width:100%; border-collapse:collapse; margin:0 0 24px; font-size:15px;}
.page th, .page td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.5;}
.page th{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:700;}

/* blockquotes */
.page blockquote{margin:36px 0; padding:4px 0 4px 28px; border-left:3px solid var(--accent); font-family:var(--serif); font-style:italic; font-size:clamp(20px,2.4vw,28px); line-height:1.3; color:var(--ink);}

/* breadcrumb */
.page .breadcrumb, .breadcrumb{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:30px;}
.page .breadcrumb ul, .breadcrumb ul{list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0;}
.page .breadcrumb li, .breadcrumb li{padding-left:0;}
.page .breadcrumb li::before{display:none;}
.page .breadcrumb a, .breadcrumb a{color:var(--faint);}

/* dark CTA / contact bands */
.page [class*="bottom-cta"], .page [class*="cta-band"], .page [class*="cta-section"],
.page [class*="contact-section"]{
  background:var(--ink); color:#FFFFFF; padding:clamp(40px,7vh,80px); border-radius:6px; margin:48px 0; text-align:center;
}
.page [class*="cta"] h2, .page [class*="cta"] h3, .page [class*="contact-section"] h2{color:#FFFFFF;}
.page [class*="cta"] p, .page [class*="contact-section"] p{color:#c9c1b0;}

/* author box */
.page .author-box, .page .author-section{border:1px solid var(--line); border-radius:4px; padding:24px 28px; margin:40px 0;}
.page .author-initial, .page .byline-avatar{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--ink); color:#FFFFFF; font-family:var(--serif);}

/* access banner / gates on white papers */
.page .access-banner{background:var(--grey); border-left:3px solid var(--accent); padding:20px 24px; border-radius:0 5px 5px 0; margin:0 0 32px;}

/* spacing for sections that were full-bleed before */
.page section{margin:40px 0;}