/* Costello Strategy Group · consultcsg.com
   Shared stylesheet for all pages. Brand kit: see ../brand/jon-costello-brand-kit.md */

:root {
  --navy:#0B1F3A; --navy-2:#12294A; --gold:#C8A24C; --gold-dk:#B8923F; --teal:#0F6E7C;
  --offwhite:#FAFAFA; --gray:#F2F3F5; --frame:#E6EBF2;
  --ink:#1C1F26; --slate:#2E3138; --muted:#5A616B;
  --head:'Roboto Slab','Rockwell',Georgia,serif;
  --body:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --label:'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
html,body { scroll-behavior:smooth; }
body { font-family:var(--body); color:var(--ink); background:var(--offwhite); line-height:1.65; -webkit-font-smoothing:antialiased; }
a { color:var(--teal); text-decoration:none; }

.wrap { max-width:1180px; margin:0 auto; padding:0 28px; }
.wrap-tight { max-width:980px; margin:0 auto; padding:0 28px; }

.eyebrow {
  font-family:var(--label); font-size:11.5px; font-weight:600;
  letter-spacing:3px; text-transform:uppercase; color:var(--gold);
}

/* TOP BAR */
.topbar { background:var(--navy); position:sticky; top:0; z-index:50; border-bottom:1px solid rgba(200,162,76,0.15); }
.topbar .wrap { display:flex; align-items:center; justify-content:space-between; padding:18px 28px; }
.brand-lockup { display:flex; align-items:center; gap:14px; text-decoration:none; }
.brand-mark {
  height:68px; width:auto; display:block;
}
/* Nav logo: prominent anchor in the header */
.topbar .brand-mark { height:100px; }
.brand-name {
  font-family:var(--head); font-weight:900; font-size:15px;
  color:#fff; letter-spacing:3.2px; text-transform:uppercase;
}
.topnav { display:flex; align-items:center; gap:30px; }
.topnav a {
  font-family:var(--label); font-size:12px; font-weight:600;
  letter-spacing:1.6px; text-transform:uppercase; color:rgba(255,255,255,0.78);
}
.topnav a:hover { color:#fff; }
.topnav a.cta {
  background:var(--gold); color:var(--navy);
  padding:11px 20px; border-radius:3px;
  transition:background .15s;
}
.topnav a.cta:hover { background:var(--gold-dk); color:var(--navy); }

/* HERO (homepage) */
.hero {
  background:var(--navy);
  color:#fff; padding:88px 0 96px; position:relative; overflow:hidden;
  border-bottom:1px solid var(--gold);
}
.hero::before {
  content:''; position:absolute; right:-4%; top:50%; transform:translateY(-50%);
  width:580px; height:580px;
  background:radial-gradient(circle, rgba(200,162,76,0.10) 0%, rgba(200,162,76,0) 60%);
  pointer-events:none; z-index:0;
}
.hero::after {
  content:""; position:absolute; top:80px; right:84px;
  width:630px; height:614px;
  background:url('/brand/florida-hero-emblem.svg') no-repeat center / contain;
  opacity:1; /* opacities baked into the asset -- do not dim */
  pointer-events:none; z-index:1;
}
@media (max-width:820px) { .hero::after { display:none; } }
.hero .wrap { position:relative; z-index:2; }
.hero .eyebrow { margin-bottom:24px; }
.hero h1 {
  font-family:var(--head); font-weight:900; font-size:90px; line-height:0.96;
  margin-bottom:24px; letter-spacing:-1px; max-width:14ch;
}
.hero .lede {
  font-size:19px; color:rgba(255,255,255,0.84); max-width:36em;
  line-height:1.6; margin-bottom:32px; font-weight:300;
}
/* Hero pull quote */
.hero-callout {
  margin:0 0 34px; max-width:none;
  background:transparent; border-left:4px solid var(--gold);
  color:var(--gold); font-size:20px; font-weight:600; line-height:1.4;
  padding:4px 0 4px 20px; border-radius:0; white-space:nowrap;
}

/* PAGE HERO (interior pages: smaller) */
.page-hero {
  background:var(--navy); color:#fff; padding:60px 0 56px; position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; right:-100px; top:50%; transform:translateY(-50%);
  width:380px; height:380px;
  background:radial-gradient(circle, rgba(200,162,76,0.10) 0%, rgba(200,162,76,0) 60%);
  pointer-events:none;
}
.page-hero .eyebrow { margin-bottom:14px; display:inline-block; }
.page-hero h1 {
  font-family:var(--head); font-weight:900; font-size:54px; line-height:1.05;
  margin-bottom:16px; letter-spacing:-0.5px;
}
.page-hero p {
  font-size:18px; color:rgba(255,255,255,0.82); max-width:42em;
  line-height:1.6; font-weight:300;
}

/* BUTTONS */
.btns { display:flex; flex-wrap:wrap; gap:14px; }
.btn {
  display:inline-block; font-family:var(--label); font-size:12.5px; font-weight:700;
  letter-spacing:1.4px; text-transform:uppercase; padding:15px 28px; border-radius:3px;
  text-decoration:none; transition:all .15s; cursor:pointer; border:none;
}
.btn-gold { background:var(--gold); color:var(--navy); }
.btn-gold:hover { background:var(--gold-dk); }
.btn-ghost { background:transparent; color:#fff; border:1.5px solid var(--gold); }
.btn-ghost:hover { background:var(--gold); color:var(--navy); border-color:var(--gold); }
.btn-navy { background:var(--navy); color:#fff; }
.btn-navy:hover { background:#152d52; }
.btn-outline-navy { background:transparent; color:var(--navy); border:1.5px solid var(--navy); }
.btn-outline-navy:hover { background:var(--navy); color:#fff; }

/* SECTIONS */
section.block { padding:84px 0; scroll-margin-top:148px; }
section.block.alt { background:var(--gray); }
section.block.dark { background:var(--navy); color:#fff; }
section.block.dark h2, section.block.dark h3 { color:#fff; }

.section-head { margin-bottom:44px; max-width:780px; }
.section-head .eyebrow { margin-bottom:14px; display:inline-block; }
.section-head h2 {
  font-family:var(--head); font-weight:900; font-size:44px; line-height:1.05;
  color:var(--navy); margin-bottom:14px; letter-spacing:-0.4px;
}
section.block.dark .section-head h2 { color:#fff; }
.section-head p.lede {
  font-size:17.5px; color:var(--slate); line-height:1.6; max-width:46em;
}
section.block.dark .section-head p.lede { color:rgba(255,255,255,0.84); }

/* Blue divider under a section head (audit) */
.section-head.ruled { margin-bottom:0; }
.rule-blue { height:2px; background:var(--navy); border:0; margin:26px 0 34px; }

/* SERVICES GRID */
.services { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.svc {
  background:#fff; border:1px solid var(--frame); border-top:4px solid var(--gold);
  padding:34px 30px; transition:transform .15s, box-shadow .15s;
}
.svc:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(11,31,58,0.08); }
.svc .svc-num {
  font-family:var(--label); font-size:11px; font-weight:600;
  letter-spacing:2px; color:var(--gold); margin-bottom:10px;
}
.svc h3 {
  font-family:var(--head); font-weight:900; font-size:22px;
  color:var(--navy); margin-bottom:12px; letter-spacing:-0.2px;
}
.svc p {
  font-size:15px; color:var(--slate); line-height:1.65;
}
/* What We Do: blue top rule and blue problem-statement headlines; gold eyebrow stays */
#services .svc { border-top-color:var(--navy); }
#services .svc h3 {
  font-size:24px; color:var(--navy); font-weight:900; letter-spacing:-0.2px;
}
/* Why CSG: two-column layout to seat four cards cleanly */
#why .services { grid-template-columns:repeat(2,1fr); }

/* AUDIENCE / WHO WE SERVE */
.audience { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:32px; }
.aud-card {
  background:#fff; border-left:3px solid var(--gold); padding:24px 22px;
}
section.block.alt .aud-card { background:var(--offwhite); }
.aud-card h4 {
  font-family:var(--head); font-weight:700; font-size:16px;
  color:var(--navy); margin-bottom:8px;
}
.aud-card p { font-size:14px; color:var(--slate); line-height:1.55; }

/* PROOF / LOGO WALL */
.logo-wall {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:14px; margin-top:32px;
}
.logo-wall .cell {
  background:#fff; border:1px solid var(--frame); border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  padding:24px 18px; min-height:100px; text-align:center;
}
.logo-wall .cell img {
  max-height:42px; max-width:140px; width:auto; height:auto;
  filter:grayscale(100%) opacity(0.6); transition:filter .2s;
}
.logo-wall .cell:hover img { filter:none; opacity:1; }
.logo-wall .cell .txt {
  font-family:var(--label); font-size:12.5px; font-weight:700;
  letter-spacing:0.4px; color:var(--navy); line-height:1.3;
}
.logo-wall.gov .cell img { filter:grayscale(100%) opacity(0.6); max-height:104px; max-width:180px; }
.logo-wall.gov .cell:hover img { filter:none; opacity:1; }
.logo-wall.gov .cell { min-height:148px; padding:22px 18px; }
.gov-label {
  font-family:var(--label); font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:var(--gold); font-weight:600;
  margin:34px 0 12px;
}
.footnote {
  font-size:13px; color:var(--muted); margin-top:26px; line-height:1.55;
}

/* FOUNDER */
.founder { display:grid; grid-template-columns:280px 1fr; gap:48px; align-items:start; }
.founder .portrait {
  width:280px; height:auto; border-radius:6px; display:block;
  box-shadow:0 8px 32px rgba(11,31,58,0.18);
}
.founder .portrait-wrap { position:relative; }
.founder .portrait-wrap::after {
  content:''; position:absolute; left:-14px; bottom:-14px;
  width:100%; height:100%; border:2px solid var(--gold);
  border-radius:6px; z-index:-1;
}
.founder h3 {
  font-family:var(--head); font-weight:900; font-size:32px;
  color:var(--navy); margin-bottom:14px; letter-spacing:-0.2px;
}
.founder p {
  font-size:16px; color:var(--slate); line-height:1.7;
  margin-bottom:14px; max-width:42em;
}
.founder .creds {
  display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 22px;
}
.founder .creds span {
  font-family:var(--label); font-size:11px; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--gold); font-weight:600;
  border:1px solid var(--frame); padding:6px 12px; border-radius:3px;
}

/* INSIGHTS / BRIEF */
.brief-card {
  display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center;
  background:#fff; border:1px solid var(--frame); padding:48px;
  border-radius:8px; border-top:4px solid var(--gold);
}
.brief-card .eyebrow { margin-bottom:14px; display:inline-block; }
.brief-card h3 {
  font-family:var(--head); font-weight:900; font-size:34px;
  color:var(--navy); margin-bottom:14px; letter-spacing:-0.3px;
}
.brief-card p {
  font-size:16px; color:var(--slate); line-height:1.65;
  margin-bottom:22px;
}
.brief-preview {
  background:var(--navy); color:#fff; padding:32px 28px;
  border-radius:6px; position:relative;
}
.brief-preview .pre-eyebrow {
  font-family:var(--label); font-size:10px; letter-spacing:2.4px;
  text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:10px;
}
.brief-preview .pre-title {
  font-family:var(--head); font-weight:700; font-size:22px;
  color:#fff; line-height:1.2; margin-bottom:10px;
}
.brief-preview .pre-by {
  font-family:var(--label); font-size:11px; letter-spacing:1.4px;
  text-transform:uppercase; color:rgba(255,255,255,0.55); font-weight:600;
}

/* CTA BAND */
.ctaband {
  background:var(--navy); color:#fff; padding:84px 0; text-align:center;
  position:relative; overflow:hidden;
}
.ctaband::before {
  content:''; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:600px; height:600px;
  background:radial-gradient(circle, rgba(200,162,76,0.06) 0%, rgba(200,162,76,0) 70%);
}
.ctaband .eyebrow { display:inline-block; margin-bottom:18px; position:relative; }
.ctaband h2 {
  font-family:var(--head); font-weight:900; font-size:48px; line-height:1.05;
  color:#fff; margin-bottom:18px; position:relative; letter-spacing:-0.4px;
}
.ctaband p {
  font-size:18px; color:rgba(255,255,255,0.84); margin-bottom:32px;
  max-width:46em; margin-left:auto; margin-right:auto; position:relative;
}
.ctaband .btns { justify-content:center; position:relative; }

/* ENGAGEMENT NARRATIVES (work page) */
.engagements { display:grid; grid-template-columns:1fr; gap:18px; margin-top:24px; }
.engagement {
  background:#fff; border:1px solid var(--frame); border-left:4px solid var(--gold);
  padding:32px 36px;
}
.engagement .eyebrow { margin-bottom:8px; display:inline-block; }
.engagement h3 {
  font-family:var(--head); font-weight:900; font-size:24px;
  color:var(--navy); margin-bottom:10px; letter-spacing:-0.2px;
}
.engagement p { font-size:15.5px; color:var(--slate); line-height:1.65; }

/* CROSS-CUTTING STRIP (work page, under the service lines) */
.crosscut {
  margin-top:22px; background:var(--navy); color:#fff;
  border:1px solid rgba(200,162,76,0.25); border-left:4px solid var(--gold);
  padding:28px 36px;
}
.crosscut .eyebrow { display:inline-block; margin-bottom:10px; }
.crosscut h3 {
  font-family:var(--head); font-weight:900; font-size:22px;
  color:#fff; margin-bottom:10px; letter-spacing:-0.2px;
}
.crosscut p { font-size:15.5px; color:rgba(255,255,255,0.85); line-height:1.65; margin:0; max-width:62em; }

/* PRINCIPLES (about page) */
.principles { display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; margin-top:32px; }
.principle {
  background:#fff; border-top:3px solid var(--gold); padding:28px 26px;
}
.principle .num {
  font-family:var(--head); font-weight:900; font-size:32px;
  color:var(--gold); line-height:1; margin-bottom:14px;
}
.principle h4 {
  font-family:var(--head); font-weight:900; font-size:18px;
  color:var(--navy); margin-bottom:10px; letter-spacing:-0.2px;
}
.principle p { font-size:14.5px; color:var(--slate); line-height:1.6; }

/* CONTACT PAGE */
.contact-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:start; }
.contact-card {
  background:#fff; border:1px solid var(--frame); padding:36px 32px;
  border-top:4px solid var(--gold);
}
.contact-card h3 {
  font-family:var(--head); font-weight:900; font-size:24px;
  color:var(--navy); margin-bottom:10px; letter-spacing:-0.2px;
}
.contact-card p { font-size:14.5px; color:var(--slate); line-height:1.6; margin-bottom:18px; }
.contact-card.dark {
  background:var(--navy); color:#fff; border:1px solid rgba(200,162,76,0.2);
}
.contact-card.dark h3 { color:#fff; }
.contact-card.dark p { color:rgba(255,255,255,0.82); }

.contact-methods { display:grid; grid-template-columns:1fr; gap:14px; }
.method {
  background:#fff; border:1px solid var(--frame); padding:20px 22px;
  display:flex; align-items:center; gap:18px;
  transition:border-color .15s;
}
.method:hover { border-color:var(--gold); }
.method .icon {
  width:44px; height:44px; flex:0 0 auto; border-radius:6px;
  background:var(--frame); display:flex; align-items:center; justify-content:center;
  color:var(--navy); font-weight:700;
}
.method .info h4 {
  font-family:var(--label); font-size:11px; letter-spacing:1.8px;
  text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:4px;
}
.method .info p { font-size:14px; color:var(--slate); line-height:1.4; margin:0; }
.method .info a { color:var(--navy); font-weight:600; }

/* CONTACT FORM */
form.inquire { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
form.inquire .full { grid-column:1 / -1; }
form.inquire label {
  display:block; font-family:var(--label); font-size:11px; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:6px;
}
form.inquire input, form.inquire textarea, form.inquire select {
  width:100%; padding:12px 14px; font-size:15px; font-family:var(--body);
  border:1px solid var(--frame); border-radius:3px; background:#fff;
  color:var(--ink);
}
form.inquire input:focus, form.inquire textarea:focus, form.inquire select:focus {
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(200,162,76,0.18);
}
form.inquire textarea { min-height:120px; resize:vertical; line-height:1.5; }
form.inquire button { margin-top:8px; }
form.inquire .fine {
  font-size:12.5px; color:var(--muted); margin-top:10px; line-height:1.5;
}

/* CONTACT FORM -- service checkboxes (navy box, gold check) + states */
.checkgrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.checkitem {
  position:relative; display:flex; align-items:center; gap:10px; cursor:pointer;
  font-size:14px; color:var(--slate); border:1px solid var(--frame);
  border-radius:3px; padding:11px 13px; transition:border-color .15s, background .15s;
}
.checkitem:hover { border-color:var(--gold); }
.checkitem input { position:absolute; opacity:0; width:0; height:0; }
.checkitem .box {
  width:18px; height:18px; flex:0 0 auto; border:1.5px solid var(--navy);
  border-radius:3px; background:#fff; display:flex; align-items:center; justify-content:center;
}
.checkitem input:checked ~ .box { background:var(--navy); border-color:var(--navy); }
.checkitem input:checked ~ .box::after {
  content:'\2713'; color:var(--gold); font-size:12px; font-weight:700; line-height:1;
}
.checkitem input:focus-visible ~ .box { box-shadow:0 0 0 3px rgba(200,162,76,0.3); }
.form-error {
  background:#FDECEC; border:1px solid #E4A9A9; color:#8E2A2A;
  padding:11px 13px; border-radius:3px; font-size:13.5px; margin-bottom:12px;
}
.form-success {
  background:var(--navy); color:#fff; border-radius:6px; padding:30px 28px;
  border-top:4px solid var(--gold);
}
.form-success h4 {
  font-family:var(--head); font-weight:900; font-size:22px; color:#fff;
  margin-bottom:10px; letter-spacing:-0.2px;
}
.form-success p { font-size:15px; color:rgba(255,255,255,0.85); line-height:1.6; }
.btn[disabled] { opacity:0.6; cursor:default; }
@media (max-width:880px) { .checkgrid { grid-template-columns:1fr; } }

/* FOOTER */
footer { background:var(--navy); color:rgba(255,255,255,0.6); padding:48px 0 32px; border-top:1px solid rgba(200,162,76,0.15); }
footer .wrap { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
footer .col-brand .brand-lockup { margin-bottom:14px; }
footer .col-brand .brand-img { width:100%; max-width:320px; height:auto; display:block; margin-bottom:14px; }
footer .col-brand p { font-size:13px; line-height:1.55; color:rgba(255,255,255,0.55); }
footer h5 {
  font-family:var(--label); font-size:11px; letter-spacing:1.8px;
  text-transform:uppercase; color:var(--gold); font-weight:600;
  margin-bottom:12px;
}
footer ul { list-style:none; }
footer li { margin-bottom:7px; }
footer a {
  font-size:13.5px; color:rgba(255,255,255,0.74);
}
footer a:hover { color:#fff; }
footer .legal {
  border-top:1px solid rgba(255,255,255,0.08); margin-top:36px;
  padding-top:18px; text-align:center;
  font-size:12px; color:rgba(255,255,255,0.42);
  grid-column:1 / -1;
}

/* MOBILE */
@media (max-width:880px) {
  .hero h1 { font-size:56px; }
  .hero .lede { font-size:17px; }
  .hero-callout { white-space:normal; font-size:18px; }
  .page-hero h1 { font-size:38px; }
  .section-head h2 { font-size:32px; }
  .services, .audience, .brief-card, .founder, .contact-grid { grid-template-columns:1fr; gap:18px; }
  .principles { grid-template-columns:1fr; }
  .founder .portrait { max-width:240px; }
  .founder .portrait-wrap::after { display:none; }
  .topnav a.nav-hide { display:none; }
  footer .wrap { grid-template-columns:1fr 1fr; }
  .ctaband h2 { font-size:36px; }
  form.inquire { grid-template-columns:1fr; }
}