/* Cochran Insurance Agency — service page system
   Design: ledger/heritage — deep navy + stamped gold, "compare slip" signature
   Fonts: Fraunces (display), Inter (body), IBM Plex Mono (numbers/data) */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --navy: #1B3A5C;
  --navy-dark: #10263D;
  --gold: #C89B3C;
  --gold-dark: #A87F28;
  --cream: #F7F5F0;
  --ink: #1D1D1B;
  --sage: #4C6B4F;
  --rule: #D8D2C4;
  --white: #FFFFFF;
  --radius: 3px;
  --max: 1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.55;
}
h1,h2,h3{
  font-family:'Fraunces',Georgia,serif;
  color:var(--navy-dark);
  line-height:1.15;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.1rem,4.2vw,3.1rem); font-weight:700;}
h2{font-size:clamp(1.5rem,2.6vw,2rem); font-weight:600;}
h3{font-size:1.15rem; font-weight:600;}
p{margin:0 0 1em;}
a{color:var(--navy);}
.mono{font-family:'IBM Plex Mono',monospace;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}

/* Top utility bar */
.topbar{background:var(--navy-dark); color:var(--cream); font-size:.85rem;}
.topbar .wrap{display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; padding:8px 24px;}
.topbar a{color:var(--cream); text-decoration:none; font-weight:600;}
.topbar a:hover{color:var(--gold);}

/* Nav */
header.site{background:var(--cream); border-bottom:1px solid var(--rule);}
nav.site{display:flex; align-items:center; justify-content:space-between; padding:16px 24px;}
.brand{font-family:'Fraunces',serif; font-weight:700; font-size:1.3rem; color:var(--navy-dark); text-decoration:none;}
.brand span{color:var(--gold-dark);}
.navlinks{display:flex; gap:24px; list-style:none; margin:0; padding:0; font-weight:600; font-size:.95rem;}
.navlinks a{text-decoration:none; color:var(--ink);}
.navlinks a:hover{color:var(--navy);}
.cta-btn{
  display:inline-block; background:var(--gold); color:var(--navy-dark)!important;
  padding:10px 20px; border-radius:var(--radius); font-weight:700; text-decoration:none;
  font-family:'IBM Plex Mono',monospace; font-size:.92rem; letter-spacing:.2px;
}
.cta-btn:hover{background:var(--gold-dark); color:var(--white)!important;}

/* Sticky mobile call bar */
.stickycall{
  position:fixed; bottom:0; left:0; right:0; background:var(--navy-dark);
  color:var(--white); padding:12px 16px; text-align:center; font-weight:700;
  font-family:'IBM Plex Mono',monospace; z-index:50; display:none;
}
.stickycall a{color:var(--gold); text-decoration:none;}
@media (max-width:720px){ .stickycall{display:block;} body{padding-bottom:52px;} .navlinks{display:none;} }

/* Hero */
.hero{background:var(--navy-dark); color:var(--cream); padding:64px 0 56px; position:relative; overflow:hidden;}
.hero::after{
  content:""; position:absolute; right:-60px; top:-60px; width:280px; height:280px;
  border:1px solid rgba(200,155,60,.25); border-radius:50%;
}
.hero .eyebrow{font-family:'IBM Plex Mono',monospace; color:var(--gold); font-size:.85rem; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:14px;}
.hero h1{color:var(--white); max-width:16ch;}
.hero p.lead{max-width:52ch; font-size:1.1rem; color:#DCE3EA;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-top:24px;}
.btn-ghost{border:1px solid rgba(255,255,255,.4); color:var(--cream); padding:10px 20px; border-radius:var(--radius); text-decoration:none; font-weight:600;}

/* Compare slip — signature element */
.slip{
  background:var(--white); border:1px dashed var(--navy); border-radius:var(--radius);
  padding:22px 24px; max-width:360px; margin-top:32px; position:relative;
  box-shadow:0 10px 30px rgba(16,38,61,.25);
}
.slip::before, .slip::after{
  content:""; position:absolute; width:20px; height:20px; background:var(--navy-dark);
  border-radius:50%; top:50%; transform:translateY(-50%);
}
.slip::before{left:-10px;} .slip::after{right:-10px;}
.slip h3{font-family:'IBM Plex Mono',monospace; font-size:.8rem; letter-spacing:1px; text-transform:uppercase; color:var(--navy); margin-bottom:12px;}
.slip-row{display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:.9rem; padding:6px 0; border-bottom:1px dotted var(--rule); color:var(--ink);}
.slip-row:last-child{border-bottom:none;}
.slip-row b{color:var(--sage);}

/* Sections */
.section{padding:56px 0;}
.section.alt{background:var(--white);}
.section-head{max-width:640px; margin:0 auto 36px; text-align:left;}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start;}
@media (max-width:800px){.grid3{grid-template-columns:1fr;} .grid2{grid-template-columns:1fr;}}
.card{background:var(--white); border:1px solid var(--rule); border-radius:var(--radius); padding:22px;}
.card .num{font-family:'IBM Plex Mono',monospace; color:var(--gold-dark); font-weight:600; font-size:.85rem;}

/* Trust strip */
.trust{background:var(--navy); color:var(--cream); padding:22px 0;}
.trust .wrap{display:flex; flex-wrap:wrap; gap:24px; justify-content:space-around; text-align:center; font-family:'IBM Plex Mono',monospace;}
.trust .stat b{display:block; font-size:1.3rem; color:var(--gold);}
.trust .stat span{font-size:.8rem; opacity:.85;}

/* FAQ */
.faq details{border-bottom:1px solid var(--rule); padding:14px 0;}
.faq summary{font-weight:600; cursor:pointer; font-family:'Fraunces',serif; font-size:1.05rem; color:var(--navy-dark);}
.faq p{margin-top:10px; color:#3a3a38;}

/* Final CTA */
.finalcta{background:var(--gold); color:var(--navy-dark); padding:44px 0; text-align:center;}
.finalcta h2{color:var(--navy-dark);}
.finalcta .cta-btn{background:var(--navy-dark); color:var(--cream)!important; margin-top:14px;}
.finalcta .cta-btn:hover{background:var(--navy);}

/* Footer */
footer.site{background:var(--navy-dark); color:#B9C4CE; padding:40px 0 24px; font-size:.9rem;}
footer.site a{color:#DCE3EA;}
.footcols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px; margin-bottom:24px;}
@media (max-width:700px){.footcols{grid-template-columns:1fr;}}
.footcols h4{color:var(--gold); font-family:'IBM Plex Mono',monospace; font-size:.8rem; letter-spacing:1px; text-transform:uppercase; margin-bottom:10px;}
.footcols ul{list-style:none; margin:0; padding:0;}
.footcols li{margin-bottom:6px;}
.finelegal{border-top:1px solid rgba(255,255,255,.1); padding-top:16px; font-size:.78rem; opacity:.7;}