/* CamControl marketing site — brand kit v3 (walnut / terracotta / cream, Newsreader + Inter). */

/* ---- self-hosted fonts (woff2 fetched into ../fonts/) ---- */
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/newsreader-400.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/newsreader-500.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:italic; font-weight:400; font-display:swap;
  src:url("../fonts/newsreader-400i.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/inter-600.woff2") format("woff2"); }

:root{
  --walnut:#2C2A26; --walnut-deep:#211F1C; --terracotta:#B5532A; --terracotta-light:#C6744A;
  --terracotta-bright:#DD8A5E; --cream:#FBF7F1; --bone:#F4EFE8; --sage:#6B8B5B; --sage-soft:#98B385;
  --gray:#6B665E; --ink:#46433D; --hairline:#E0D9CD; --paper:#FFFFFF;
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --measure:66ch;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{margin:0; font-family:var(--sans); font-size:17px; line-height:1.65; color:var(--ink);
  background:var(--cream); -webkit-font-smoothing:antialiased;}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}
.narrow{max-width:var(--measure);}
a{color:var(--terracotta); text-decoration:none;}
a:hover{color:var(--terracotta-light);}
h1,h2,h3{font-family:var(--serif); color:var(--walnut); font-weight:500; letter-spacing:-0.01em; line-height:1.15;}
img{max-width:100%; height:auto;}

/* header */
.site-header{position:sticky; top:0; z-index:20; background:rgba(251,247,241,.9);
  backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--hairline);}
.site-header .wrap{display:flex; align-items:center; gap:20px; padding:16px 24px;}
.logo{display:inline-flex; align-items:center; gap:10px; text-decoration:none;}
.logo .mark{display:block; flex:none;}
.logo .wordmark{font-family:var(--serif); font-weight:500; font-size:22px; line-height:1; letter-spacing:.005em;}
.site-header .logo .wordmark{color:var(--walnut);}
.site-header nav{margin-left:auto; display:flex; align-items:center; gap:26px;}
.site-header nav a{color:var(--walnut); font-size:15px; font-weight:500;}
.site-header nav a:hover{color:var(--terracotta);}
.btn{display:inline-block; background:var(--terracotta); color:var(--cream)!important; font-weight:600;
  font-size:15px; padding:11px 20px; border-radius:8px; border:1px solid transparent; transition:.15s;}
.btn:hover{background:var(--terracotta-light); color:var(--cream)!important;}
.btn-ghost{background:transparent; color:var(--walnut)!important; border-color:var(--hairline);}
.btn-ghost:hover{border-color:var(--terracotta); color:var(--terracotta)!important; background:transparent;}

/* hero */
.hero{padding:88px 0 56px; text-align:center;}
.hero h1{font-size:clamp(34px,5vw,54px); margin:0 auto 20px; max-width:16ch;}
.hero .lede{font-size:clamp(18px,2.2vw,22px); color:var(--gray); max-width:42ch; margin:0 auto 32px; line-height:1.55;}
.hero .cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.eyebrow{font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--terracotta); margin-bottom:16px;}

/* sections */
section{padding:56px 0;}
section.alt{background:var(--bone);}
.section-head{text-align:center; max-width:44ch; margin:0 auto 40px;}
.section-head h2{font-size:clamp(26px,3.4vw,36px); margin:0 0 10px;}
.section-head p{color:var(--gray); margin:0;}
.grid{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.card{background:var(--paper); border:1px solid var(--hairline); border-radius:14px; padding:26px;}
.card h3{font-size:20px; margin:0 0 8px;}
.card p{margin:0; color:var(--ink); font-size:16px;}
.card .num{font-family:var(--serif); font-size:15px; color:var(--terracotta); border:1px solid var(--terracotta);
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center; margin-bottom:14px;}

/* KY rate callout */
.callout{background:var(--walnut); color:var(--bone); border-radius:18px; padding:40px; text-align:center;}
.callout h2{color:var(--cream); font-size:clamp(24px,3vw,32px); margin:0 0 10px;}
.callout p{color:#CFC7BA; max-width:48ch; margin:0 auto 24px;}
.callout .btn{background:var(--terracotta-bright);}
.callout .btn:hover{background:var(--terracotta-light);}

/* legal / prose */
.prose{padding:56px 0 72px;}
.prose h1{font-size:clamp(28px,4vw,38px); margin:0 0 6px;}
.prose .meta{color:var(--gray); font-size:15px; margin:0 0 28px;}
.prose h2{font-size:22px; color:var(--terracotta); margin:38px 0 10px;}
.prose h3{font-size:17px; margin:22px 0 6px;}
.prose p,.prose li{color:var(--ink);}
.prose .note{background:var(--bone); border:1px solid var(--hairline); border-radius:10px; padding:14px 18px;
  font-size:15px; color:var(--gray); margin:18px 0;}
.prose address{font-style:normal; color:var(--ink);}
hr.rule{height:1px; background:var(--hairline); border:0; margin:34px 0;}

/* footer */
.site-footer{background:var(--walnut-deep); color:#B7AFA4; font-size:14px; padding:40px 0;}
.site-footer .wrap{display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center;}
.site-footer .logo .wordmark{color:var(--cream); font-size:19px;}
.site-footer a{color:#CFC7BA;}
.site-footer a:hover{color:var(--terracotta-bright);}
.site-footer .spacer{margin-left:auto;}
.site-footer .fine{width:100%; color:#8A837A; font-size:13px; border-top:1px solid #33302B; padding-top:16px; margin-top:8px;}

@media (max-width:640px){
  .site-header nav{gap:16px;} .site-header nav .navlink{display:none;}
  .hero{padding:60px 0 40px;} section{padding:44px 0;}
}