@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Manrope:wght@400;500;600&display=swap");

:root {
  --civic-ink: #17221f;
  --civic-muted: #596762;
  --civic-paper: #f2f0e9;
  --civic-mist: #e3e9e2;
  --civic-green: #285746;
  --civic-lime: #b9cf49;
  --civic-white: #fbfcf9;
  --civic-line: rgba(23, 34, 31, .16);
  --civic-shell: min(88vw, 1360px);
  --civic-radius: 1.25rem;
  --civic-ease: cubic-bezier(.16, 1, .3, 1);
}

body {
  background: var(--civic-white);
  color: var(--civic-ink);
  font-family: "Instrument Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.shell { width: var(--civic-shell); }
.site-header { background: rgba(251, 252, 249, .9); border-color: var(--civic-line); }
.header-inner { width: var(--civic-shell); height: 84px; grid-template-columns: 250px 1fr auto; }
.brand { font-family: "Manrope", sans-serif; font-weight: 600; letter-spacing: -.015em; text-transform: none; font-size: 1rem; }
.brand-mark { color: var(--civic-green); }
.primary-nav > a, .nav-trigger { font-size: .82rem; font-weight: 500; letter-spacing: -.01em; }
.primary-nav > a::after, .nav-trigger::after { background: var(--civic-lime); height: 3px; bottom: 1rem; }
.mega-menu { top: 84px; background: rgba(251, 252, 249, .985); border-color: var(--civic-line); }
.mega-inner { width: var(--civic-shell); }
.mega-label, .eyebrow { color: var(--civic-green); font-weight: 600; letter-spacing: .12em; }

.button {
  min-height: 50px;
  border-radius: 999px;
  padding: .78rem 1.35rem;
  border-color: var(--civic-green);
  background: var(--civic-green);
  font-weight: 600;
  letter-spacing: -.01em;
  box-shadow: inset 0 1px rgba(255,255,255,.18);
}
.button:hover { background: #1d4537; border-color: #1d4537; transform: translateY(-2px); }
.button:active { transform: translateY(1px) scale(.985); }
.button.secondary { border-color: var(--civic-line); }
.button.ghost { background: transparent; color: var(--civic-ink); border-color: var(--civic-line); }
.button.ghost:hover { background: rgba(40,87,70,.06); border-color: var(--civic-green); }

.civic-hero {
  width: var(--civic-shell);
  min-height: calc(100dvh - 84px);
  margin: auto;
  padding: clamp(3.5rem, 7vw, 7rem) 0 2.2rem;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.civic-hero-copy { align-self: center; }
.civic-hero h1 {
  max-width: 10ch;
  margin: 1.25rem 0 1.65rem;
  font: 500 clamp(3.25rem, 6.3vw, 7.3rem)/.91 "Manrope", sans-serif;
  letter-spacing: -.075em;
}
.civic-hero h1 span { color: var(--civic-green); }
.civic-hero-lede { max-width: 54ch; margin: 0 0 2rem; color: var(--civic-muted); font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.6; }
.civic-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.civic-hero-stage {
  position: relative;
  min-height: min(71vh, 760px);
  border-radius: clamp(1.1rem, 2vw, 2rem);
  overflow: hidden;
  background: #dfe5dd;
}
.civic-hero-stage > img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; }
.civic-hero-stage::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(16,29,24,.48)); pointer-events:none; }
.stage-caption { position:absolute; z-index:2; left:1.35rem; right:1.35rem; bottom:1.35rem; color:#fff; display:flex; align-items:end; justify-content:space-between; gap:2rem; }
.stage-caption strong { max-width: 20ch; font: 500 clamp(1.25rem,2vw,1.85rem)/1.15 "Manrope",sans-serif; letter-spacing:-.035em; }
.stage-caption span { flex:none; padding:.45rem .7rem; border:1px solid rgba(255,255,255,.5); border-radius:999px; font-size:.72rem; }
.orbit-note { position:absolute; z-index:3; top:1.4rem; right:1.4rem; width:9.5rem; aspect-ratio:1; border-radius:50%; background:var(--civic-lime); color:var(--civic-ink); display:grid; place-content:center; text-align:center; font-size:.72rem; line-height:1.3; transform:rotate(5deg); box-shadow:0 20px 45px rgba(23,34,31,.13); }
.orbit-note strong { display:block; font:600 1.25rem "Manrope",sans-serif; }

.trust-rail { width:var(--civic-shell); margin:0 auto; padding:1.2rem 0 2rem; border-bottom:1px solid var(--civic-line); display:grid; grid-template-columns:1.25fr repeat(3,1fr); gap:1.5rem; align-items:center; }
.trust-rail > p { margin:0; max-width:35ch; color:var(--civic-muted); font-size:.85rem; }
.trust-point { border-left:1px solid var(--civic-line); padding-left:1.25rem; }
.trust-point strong { display:block; font:600 1rem "Manrope",sans-serif; }
.trust-point span { color:var(--civic-muted); font-size:.75rem; }

.civic-section { padding:clamp(5.5rem,10vw,10rem) 0; }
.civic-section.alt { background:var(--civic-paper); }
.civic-intro { display:grid; grid-template-columns:.48fr 1.52fr; gap:clamp(2rem,7vw,8rem); margin-bottom:clamp(3rem,6vw,6rem); }
.civic-intro h2 { margin:0; max-width:15ch; font:500 clamp(2.45rem,4.8vw,5.4rem)/.98 "Manrope",sans-serif; letter-spacing:-.065em; }
.civic-intro-copy { padding-top:.5rem; }
.civic-intro-copy p { margin:0 0 1.25rem; max-width:58ch; color:var(--civic-muted); font-size:1.05rem; }

.choice-board { display:grid; grid-template-columns:1.28fr .72fr; gap:1rem; }
.choice-card { position:relative; overflow:hidden; min-height:620px; border-radius:var(--civic-radius); background:#dce4dc; color:#fff; }
.choice-card.secondary-choice { min-height:620px; }
.choice-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .85s var(--civic-ease); }
.choice-card:hover img { transform:scale(1.025); }
.choice-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,30,24,.02) 30%,rgba(15,30,24,.84)); }
.choice-copy { position:absolute; z-index:2; inset:auto clamp(1.5rem,3vw,3rem) clamp(1.5rem,3vw,3rem); }
.choice-kicker { text-transform:uppercase; letter-spacing:.12em; font-size:.68rem; color:rgba(255,255,255,.72); }
.choice-copy h3 { margin:.45rem 0 .75rem; font:500 clamp(2.5rem,4.2vw,4.8rem)/.95 "Manrope",sans-serif; letter-spacing:-.06em; }
.choice-copy p { max-width:43ch; margin:0 0 1.3rem; color:rgba(255,255,255,.78); }
.choice-link { display:inline-flex; align-items:center; gap:.65rem; padding-bottom:.25rem; border-bottom:1px solid rgba(255,255,255,.55); font-size:.82rem; font-weight:600; }

.decision-path { display:grid; grid-template-columns:.84fr 1.16fr; gap:clamp(4rem,9vw,11rem); }
.decision-path aside { position:sticky; top:130px; align-self:start; }
.decision-path h2 { margin:.9rem 0 1.2rem; max-width:10ch; font:500 clamp(2.4rem,4.2vw,4.8rem)/.98 "Manrope",sans-serif; letter-spacing:-.06em; }
.decision-path aside p { max-width:40ch; color:var(--civic-muted); }
.path-list { border-top:1px solid var(--civic-line); }
.path-item { display:grid; grid-template-columns:4rem 1fr auto; gap:1rem; padding:2rem 0; border-bottom:1px solid var(--civic-line); align-items:start; transition:padding .25s var(--civic-ease); }
.path-item:hover { padding-left:.6rem; }
.path-number { font:500 .74rem "Manrope",sans-serif; color:var(--civic-green); }
.path-item h3 { margin:0 0 .45rem; font:500 1.35rem "Manrope",sans-serif; letter-spacing:-.025em; }
.path-item p { margin:0; max-width:52ch; color:var(--civic-muted); }
.path-arrow { font-size:1.2rem; color:var(--civic-green); }

.cost-panel { display:grid; grid-template-columns:1fr 1fr; min-height:650px; border-radius:var(--civic-radius); overflow:hidden; background:var(--civic-green); color:#fff; }
.cost-visual { position:relative; min-height:520px; overflow:hidden; }
.cost-visual img { width:100%; height:100%; object-fit:cover; }
.cost-content { padding:clamp(2.5rem,6vw,6.5rem); display:flex; flex-direction:column; justify-content:center; }
.cost-content .eyebrow { color:var(--civic-lime); }
.cost-content h2 { margin:1rem 0 1.3rem; font:500 clamp(2.5rem,4.3vw,5rem)/.97 "Manrope",sans-serif; letter-spacing:-.065em; }
.cost-content > p { color:rgba(255,255,255,.72); max-width:48ch; }
.cost-factors { margin:2rem 0; border-top:1px solid rgba(255,255,255,.2); }
.cost-factor { display:flex; justify-content:space-between; gap:2rem; padding:.9rem 0; border-bottom:1px solid rgba(255,255,255,.2); font-size:.82rem; }
.cost-factor span:last-child { color:rgba(255,255,255,.62); text-align:right; }

.reform-strip { display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(3rem,8vw,9rem); align-items:center; }
.reform-strip h2 { margin:.9rem 0 1.2rem; font:500 clamp(2.3rem,4vw,4.6rem)/1 "Manrope",sans-serif; letter-spacing:-.06em; }
.timeline-preview { display:grid; gap:0; border-top:1px solid var(--civic-line); }
.timeline-row { display:grid; grid-template-columns:8rem 1fr; gap:1.25rem; padding:1.25rem 0; border-bottom:1px solid var(--civic-line); }
.timeline-row time { color:var(--civic-green); font-weight:600; }
.timeline-row p { margin:0; color:var(--civic-muted); }

.contact-band { background:var(--civic-lime); }
.contact-band .cta-grid { align-items:center; }
.contact-band .eyebrow { color:var(--civic-green); }
.contact-band .field input, .contact-band .field textarea { border-color:rgba(23,34,31,.35); }
.contact-band .quick-form { background:rgba(251,252,249,.7); border:1px solid rgba(255,255,255,.55); border-radius:var(--civic-radius); padding:clamp(1.5rem,3vw,2.5rem); box-shadow:inset 0 1px rgba(255,255,255,.5); }

.site-footer { background:var(--civic-ink); }
.page-hero { background:linear-gradient(180deg,var(--civic-paper),var(--civic-white)); }
.section-head h2, .display-title, .product-hero h1, .decision-sticky h2, .cta-grid h2 { font-family:"Manrope",sans-serif; font-weight:500; }
.focus-card, .product-tile, .tech-visual, .gallery-item { border-radius:var(--civic-radius); }
.focus-grid, .product-index { background:transparent; gap:1rem; }
.quiet-cta { background:var(--civic-paper); }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .75s var(--civic-ease),transform .75s var(--civic-ease); }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 1050px) {
  .header-inner { grid-template-columns:1fr auto; }
  .civic-hero { grid-template-columns:1fr; min-height:auto; }
  .civic-hero-copy { padding-top:2rem; }
  .civic-hero-stage { min-height:620px; }
  .trust-rail { grid-template-columns:1fr 1fr; }
  .trust-point:nth-child(2) { border-left:0; padding-left:0; }
  .choice-board, .cost-panel { grid-template-columns:1fr; }
  .choice-card, .choice-card.secondary-choice { min-height:560px; }
  .decision-path, .reform-strip { grid-template-columns:1fr; }
  .decision-path aside { position:static; }
}

@media (max-width: 760px) {
  :root { --civic-shell:min(90vw,1360px); }
  .header-inner { height:72px; }
  .civic-hero { padding:3.5rem 0 1.5rem; gap:2.5rem; }
  .civic-hero h1 { font-size:clamp(3rem,15vw,4.6rem); }
  .civic-hero-stage { min-height:500px; }
  .orbit-note { width:7.6rem; }
  .stage-caption { align-items:start; flex-direction:column; gap:.8rem; }
  .trust-rail { grid-template-columns:1fr; }
  .trust-point, .trust-point:nth-child(2) { border-left:0; padding:1rem 0 0; border-top:1px solid var(--civic-line); }
  .civic-intro { grid-template-columns:1fr; gap:1.5rem; }
  .choice-card, .choice-card.secondary-choice { min-height:520px; }
  .path-item { grid-template-columns:2.2rem 1fr; }
  .path-arrow { display:none; }
  .timeline-row { grid-template-columns:1fr; gap:.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}

.tool-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.tool-panel { padding:clamp(1.5rem,3vw,3rem); border:1px solid var(--civic-line); border-radius:var(--civic-radius); background:var(--civic-white); }
.tool-panel h2 { margin:.6rem 0 1rem; font:500 clamp(1.6rem,2.4vw,2.5rem)/1.05 "Manrope",sans-serif; letter-spacing:-.04em; }
.tool-panel p { color:var(--civic-muted); }
.compare-table { width:100%; border-collapse:collapse; font-size:.92rem; }
.compare-table th,.compare-table td { padding:1.1rem; text-align:left; border-bottom:1px solid var(--civic-line); vertical-align:top; }
.compare-table thead th { position:sticky; top:84px; background:var(--civic-white); z-index:2; font:600 1.05rem "Manrope",sans-serif; }
.compare-table tbody th { width:28%; color:var(--civic-muted); font-weight:500; }
.project-tile { min-height:520px; }
.project-tile h2 { font:500 2rem "Manrope",sans-serif; margin:.35rem 0 .8rem; }
.empty-state { padding:5rem 0; border-top:1px solid var(--civic-line); }
.spec-list { margin:2rem 0 0; border-top:1px solid var(--civic-line); }
.spec-list > div { display:grid; grid-template-columns:9rem 1fr; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--civic-line); }
.spec-list dt { color:var(--civic-muted); }
.spec-list dd { margin:0; }
@media (max-width:760px){.tool-grid{grid-template-columns:1fr}.compare-wrap{overflow-x:auto}.compare-table{min-width:720px}.spec-list>div{grid-template-columns:1fr;gap:.25rem}}