/* Cooper's Communications — shared stylesheet.
   Mobile-first, system font stack, contrast-safe palette, no build step.
   {{COPY:...}} / {{FORM:...}} tokens mark where final copy lands. */
:root{
  --bg:#ffffff; --bg-alt:#f5f7fb; --text:#1a2332; --muted:#4b5a6b;
  --brand:#1d4ed8; --brand-dark:#1e3a8a; --on-brand:#ffffff;
  --header-bg:#0f1b2d; --header-text:#ffffff; --footer-bg:#0f1b2d;
  --footer-text:#d7e0ec; --border:#d7dee8; --maxw:68rem; --radius:10px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  line-height:1.65;font-size:1.0625rem}
img{max-width:100%;height:auto}
a{color:var(--brand)}
a:visited{color:var(--brand-dark)}
/* dark surfaces: links always light, visited included (blue-on-black reads at 1.6:1) */
.site-header a,.site-header a:visited{color:var(--header-text)}
.site-footer a,.site-footer a:visited{color:var(--footer-text)}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:1.25rem}
.skip-link{position:absolute;left:1rem;top:-3.5rem;z-index:100;background:var(--brand);color:#fff;
  padding:.6rem 1rem;border-radius:.5rem;transition:top .15s}
.skip-link:focus{top:.5rem}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.site-header{background:var(--header-bg);color:var(--header-text);position:sticky;top:0;z-index:50}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;padding-block:.75rem}
.brand{font-weight:700;color:#fff;text-decoration:none;font-size:1.15rem}
.nav-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem}
.nav-list a{color:var(--header-text);text-decoration:none;padding:.5rem .7rem;border-radius:.4rem;font-weight:600;font-size:.98rem}
.nav-list a:hover,.nav-list a:focus-visible{background:rgba(255,255,255,.16)}
.nav-list a[aria-current="page"]{background:var(--brand);color:#fff}
.site-main{display:block}
.hero{background:linear-gradient(180deg,var(--bg-alt),var(--bg));padding-block:2.75rem 3rem}
.hero-simple{padding-block:2.25rem}
.hero-eyebrow{margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--brand);font-size:.85rem}
.hero h1,.hero-simple h1{font-size:clamp(2rem,5vw,3rem);line-height:1.1;margin:.2rem 0}
.hero-lede,.section-lede,.post-summary{font-size:1.2rem;color:var(--muted);max-width:60ch;margin:.5rem 0 0}
.hero-actions,.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}
.btn{display:inline-block;padding:.7rem 1.15rem;border-radius:.55rem;text-decoration:none;font-weight:600;border:2px solid transparent}
.btn-primary{background:var(--brand);color:var(--on-brand)}
/* brand-blue surfaces carry white text only — never the dark ink; a:visited (0,1,1)
   out-specifies .btn-primary, so visited variants are pinned explicitly */
.btn-primary,.btn-primary:visited{color:var(--on-brand)}
.btn-secondary,.btn-secondary:visited{color:var(--brand)}
.site-header .nav-list a[aria-current="page"],.skip-link{color:var(--on-brand)}
.btn-primary:hover{background:var(--brand-dark)}
.btn-secondary{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn-secondary:hover{background:rgba(29,78,216,.08)}
.section{padding-block:2.5rem}
.section-alt{background:var(--bg-alt)}
.section h2{font-size:1.7rem;margin:.2rem 0 .75rem}
.section-cta{margin-top:1.5rem}
.list{margin:0;padding-left:1.2rem}
.list li{margin-bottom:.5rem}
.card-grid,.post-grid{display:grid;gap:1.25rem;grid-template-columns:1fr;margin-top:1.5rem}
.card,.post-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem}
.card h3,.post-card h3{margin:.1rem 0 .5rem;font-size:1.25rem}
.post-card-title a{text-decoration:none;color:var(--brand)}
.post-date{color:var(--muted);font-size:.9rem;margin:.2rem 0 .6rem}
.post-excerpt{color:var(--muted);margin:0 0 .75rem}
.post-card-cta{margin:0}
.post-container{max-width:50rem}
.post-header{border-bottom:1px solid var(--border);padding-bottom:1rem;margin-bottom:1.5rem}
.post h1{font-size:clamp(1.8rem,4.5vw,2.6rem);margin:.3rem 0 0}
.post-body{font-size:1.1rem}
.post-body p{margin:0 0 1.1rem}
.post-footer{margin-top:2rem;border-top:1px solid var(--border);padding-top:1rem}
.back-link{text-decoration:none;font-weight:600}
.site-footer{background:var(--footer-bg);color:var(--footer-text);padding-block:2.25rem}
.footer-inner{display:grid;gap:1.1rem}
.footer-brand{font-weight:700;color:#fff;margin:0}
.footer-contact{margin:0}
.footer-contact a{color:#fff}
.footer-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin:.25rem 0 0;padding:0}
.footer-nav a{color:var(--footer-text);text-decoration:none}
.footer-nav a:hover,.footer-nav a:focus-visible{color:#fff;text-decoration:underline}
.footer-copy{margin:.25rem 0 0;color:var(--footer-text)}
@media (min-width:640px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .post-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:960px){
  .card-grid{grid-template-columns:repeat(3,1fr)}
  .post-grid{grid-template-columns:repeat(3,1fr)}
  .site-footer .footer-inner{grid-template-columns:1fr}
}

/* margin-topography v4 (owner: let the terrain live across the whole canvas):
   pattern full-bleed always >=1024; the sheet becomes frosted glass so the terrain
   shows through everywhere while text keeps an armored, blurred runway underneath. */
html{background:#f5f7fb}
main.site-main{max-width:min(72rem,86vw);margin-block:1.25rem;margin-inline:auto;background:rgba(255,255,255,.58);
  backdrop-filter:blur(14px) saturate(1.06);-webkit-backdrop-filter:blur(14px) saturate(1.06);
  border-radius:22px;overflow:hidden;box-shadow:0 0 0 1px rgba(215,222,232,.35),0 18px 60px rgba(15,27,45,.13)}
main.site-main .hero{background:none}
main.site-main .section{background:none}
main.site-main .section-alt{background:rgba(245,247,251,.45)}
main.site-main .card,main.site-main .post-card,main.site-main .site-header,main.site-main .site-footer{background:var(--bg)}
main.site-main .site-header,main.site-main .site-footer{background:var(--header-bg)}

/* contact form: born for hands, not spreadsheets */
.contact-form{display:grid;gap:.35rem;max-width:36rem;margin-inline:auto;padding:1.6rem 1.6rem 1.4rem;
  background:rgba(255,255,255,.75);border:1px solid var(--border);border-radius:16px;
  box-shadow:0 10px 34px rgba(15,27,45,.07)}
.contact-form label{font-size:.86rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:.5rem}
.contact-form input,.contact-form textarea{width:100%;padding:.8rem .95rem;font:inherit;color:var(--text);
  background:#fff;border:1px solid var(--border);border-radius:10px;transition:border-color .15s, box-shadow .15s}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,78,216,.14)}
.contact-form .cf-turnstile{margin-top:.9rem}
.contact-form button{margin-top:1.1rem;justify-self:start;padding-inline:2.2rem}
.form-status{min-height:1.4em;margin:.6rem 0 0;color:var(--muted)}
@media (min-width:1024px){
  body{background:#f5f7fb url(/img/terrain.svg) center top/cover no-repeat fixed}
}
@media (min-width:1280px){
  body{background-image:url(/img/terrain.svg)}
}