/* ============================================================
   Crownridge Group — layout.css
   ============================================================ */

/* ---------- Header (two-tier, green) ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--green); color: var(--on-green); }
.header-utility { display: none; border-bottom: 1px solid var(--on-green-line); }
.util-inner { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.util-loc { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-green-55); }
.util-links { display: flex; gap: 1.9rem; }
.util-links a { font-size: 0.78rem; letter-spacing: 0.04em; color: var(--on-green-70); transition: color 0.2s ease; }
.util-links a:hover { color: var(--brass-dark); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 74px; border-bottom: 1px solid var(--on-green-line); }
.wordmark { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; letter-spacing: -0.01em; white-space: nowrap; color: var(--on-green); display: inline-flex; align-items: center; }
.wordmark .wm-thin { color: var(--on-green-70); font-style: italic; }
.wordmark img { display: block; height: 46px; width: auto; }
.footer-brand .wordmark img { height: 42px; }
@media (max-width: 520px) { .wordmark img { height: 40px; } }
.site-nav { display: none; }
@media (min-width: 720px) { .header-utility { display: block; } }
@media (min-width: 960px) {
  .site-nav { display: flex; gap: 2rem; margin-left: auto; }
  .site-nav a { font-size: 0.92rem; font-weight: 500; color: var(--on-green-70); position: relative; padding: 0.25rem 0; transition: color 0.2s ease; }
  .site-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--brass-dark); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
  .site-nav a:hover { color: var(--on-green); }
  .site-nav a:hover::after { transform: scaleX(1); }
}

/* ---------- Hero (green, left-aligned) ---------- */
.hero { background: var(--green); color: var(--on-green); padding-block: clamp(4rem, 9vw, 7.5rem); }
.hero-inner { max-width: 60rem; }
.hero h1 { color: var(--ivory); max-width: 20ch; margin-bottom: 1.75rem; }
.hero-lead { max-width: 52ch; font-size: clamp(1.1rem, 1.6vw, 1.28rem); color: var(--on-green-70); margin-bottom: 2.25rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem; }
.hero-scale { list-style: none; margin: 0; padding: 2rem 0 0; border-top: 1px solid var(--on-green-line); display: flex; flex-wrap: wrap; gap: 1.25rem 3rem; }
.hero-scale li { color: var(--on-green-55); font-size: 0.98rem; }
.hero-scale strong { color: var(--on-green); font-weight: 600; }

/* ---------- Wide image band ---------- */
.band-media { display: block; }
.band-media img { width: 100%; height: clamp(260px, 42vw, 560px); object-fit: cover; }

/* ---------- Sections ---------- */
.section { padding-block: var(--section-y); }
.section-tint { background: var(--ivory-2); }
.section-dark { background: var(--green); color: var(--on-green); }
.section-dark h2, .section-dark h3 { color: var(--on-green); }
.section-head { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.section-head h2 { text-wrap: balance; }

/* ---------- Intro statement ---------- */
.intro-grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); }
.intro-grid > h2 { max-width: 20ch; }
.intro-body p { color: var(--ink-70); max-width: 52ch; }
.intro-body p + p { margin-top: 1.1rem; }
@media (min-width: 860px) { .intro-grid { grid-template-columns: 1.1fr 0.9fr; align-items: start; } }

/* ---------- Capabilities (directory) ---------- */
.cap-grid { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.cap { background: var(--ivory-2); padding: clamp(1.6rem, 2.6vw, 2.25rem) clamp(1.4rem, 2vw, 2rem); border-top: 2px solid transparent; transition: border-color 0.25s ease, background 0.25s ease; }
.section-tint .cap { background: var(--ivory-2); }
.cap:hover { border-top-color: var(--brass); background: #fff; }
.cap h3 { margin-bottom: 0.6rem; }
.cap p { color: var(--ink-70); font-size: 0.97rem; }
@media (min-width: 640px) { .cap-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .cap-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Industries ---------- */
.industries { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr; }
.industries li { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.9rem); padding: 1.1rem 0; border-bottom: 1px solid var(--line); color: var(--ink); transition: color 0.2s ease, padding-left 0.25s ease; }
.industries li:hover { color: var(--brass-ink); padding-left: 0.6rem; }
@media (min-width: 680px) { .industries { grid-template-columns: 1fr 1fr; column-gap: 3.5rem; } }

/* ---------- Global reach (green) ---------- */
.reach-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.reach-copy h2 { color: var(--ivory); max-width: 16ch; margin-bottom: 2rem; }
.reach-figures { display: flex; flex-wrap: wrap; gap: 2.5rem; }
.reach-figures .rf { display: block; font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--brass-dark); line-height: 1; }
.reach-figures .rl { color: var(--on-green-55); font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; }
.offices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.5rem; }
.offices li { color: var(--on-green-70); padding-bottom: 0.9rem; border-bottom: 1px solid var(--on-green-line); font-size: 1.02rem; }
@media (min-width: 860px) { .reach-grid { grid-template-columns: 1fr 1fr; align-items: start; } .offices { grid-template-columns: 1fr 1fr 1fr; } }

/* ---------- Insights (featured + list) ---------- */
.insights-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.feature-media { border-radius: var(--radius); overflow: hidden; margin-bottom: 1.5rem; }
.feature-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.feature:hover .feature-media img { transform: scale(1.03); }
.post-cat { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-ink); margin-bottom: 0.7rem; }
.feature h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 0.8rem; }
.feature-x { color: var(--ink-70); max-width: 46ch; }
.insight-list { list-style: none; margin: 0; padding: 0; }
.insight-list li { padding: 1.3rem 0; border-top: 1px solid var(--line); }
.insight-list li:last-child { border-bottom: 1px solid var(--line); }
.il-meta { display: block; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-55); margin-bottom: 0.4rem; }
.insight-list h4 { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--ink); }
@media (min-width: 900px) { .insights-grid { grid-template-columns: 1.1fr 0.9fr; align-items: start; } }

/* ---------- Leadership ---------- */
.people { display: grid; gap: 1.75rem; grid-template-columns: 1fr 1fr; }
.person { margin: 0; }
.person img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); margin-bottom: 1rem; filter: grayscale(0.15); }
.p-name { display: block; font-family: var(--serif); font-size: 1.25rem; color: var(--ink); }
.p-title { display: block; color: var(--ink-55); font-size: 0.92rem; margin-top: 0.15rem; }
@media (min-width: 820px) { .people { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }

/* ---------- FAQ ---------- */
.faq-layout { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.faq-head { margin-bottom: 0; }
@media (min-width: 900px) { .faq-layout { grid-template-columns: 0.8fr 1.2fr; align-items: start; } .faq-head { position: sticky; top: 110px; } }

.offices-note { color: var(--on-green-70); font-size: clamp(1.1rem, 2vw, 1.45rem); line-height: 1.5; max-width: 48ch; }

/* ---------- CTA band (green, centered) ---------- */
.cta-cr { text-align: center; max-width: 44rem; margin-inline: auto; }
.cta-cr h2 { color: var(--ivory); margin-bottom: 1rem; }
.cta-cr p { color: var(--on-green-70); max-width: 40ch; margin: 0 auto 2rem; }

/* ---------- Contact (split) ---------- */
.contact-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.contact-copy { max-width: 38ch; }
.contact-copy h2 { margin: 0.4rem 0 1.25rem; }
.contact-copy p { color: var(--ink-70); }
.contact-note { margin-top: 1.25rem; color: var(--brass-ink); font-weight: 500; }
.contact-row { display: grid; gap: 0.35rem; padding-block: 1.25rem; border-top: 1px solid var(--line); }
.contact-row:last-child { border-bottom: 1px solid var(--line); }
.contact-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-55); }
.contact-value { font-size: 1.15rem; }
a.contact-value { transition: color 0.2s ease; }
a.contact-value:hover { color: var(--brass-ink); }
@media (min-width: 820px) { .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ---------- Footer (fat, green) ---------- */
.site-footer { background: var(--green-2); color: var(--on-green); padding-block: clamp(3rem, 6vw, 4.5rem); }
.footer-top { display: grid; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--on-green-line); }
.footer-brand .wordmark { color: var(--on-green); font-size: 1.4rem; }
.footer-brand p { color: var(--on-green-55); margin-top: 0.85rem; max-width: 30ch; font-size: 0.92rem; }
.footer-hq { font-style: normal; }
.footer-col h3 { font-family: var(--sans); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-dark); margin-bottom: 1rem; }
.footer-col a { display: block; color: var(--on-green-70); font-size: 0.95rem; padding: 0.3rem 0; transition: color 0.2s ease; }
.footer-col a:hover { color: var(--on-green); }
.footer-base { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; padding-top: 2rem; }
.footer-base p { color: var(--on-green-55); font-size: 0.85rem; }
@media (min-width: 760px) { .footer-top { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; } }