/* CCG Solutions — Editorial Reset (v13)
   Goal: radically different look. Flat, typographic, calm. */

:root{
  --bg:#ffffff;
  --ink:#0b0f19;
  --muted:#505868;
  --rule:#e6e8ee;
  --link:#1e40af;       /* rich blue */
  --link-hover:#0b3397;
  --accent:#0ea5a5;     /* teal for small touches */
}

*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:18px/1.72 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--link-hover)}

.container{max-width:1060px;margin-inline:auto;padding:0 24px}
.rule{border-top:1px solid var(--rule)}

h1,h2,h3{line-height:1.18;margin:0 0 .6rem;color:#0b0f19}
h1{font-size:clamp(2.2rem,4.2vw,3.2rem);letter-spacing:.2px}
h2{font-size:clamp(1.6rem,2.6vw,2.2rem)}
h3{font-size:1.15rem}
p{margin:0 0 1rem;color:var(--muted)}

header.site-header{border-bottom:1px solid var(--rule);background:#fff;position:sticky;top:0;z-index:20}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:80px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit}
.brand span{font-weight:700;letter-spacing:.2px}
nav.primary{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
nav.primary a{text-decoration:none;color:#111;padding:.35rem .55rem;border-radius:.35rem}
nav.primary a:hover{background:#f3f4f6}
.menu-toggle{display:none}
@media (max-width:780px){
  nav.primary{display:none;position:absolute;right:24px;top:80px;background:#fff;border:1px solid var(--rule);border-radius:.5rem;padding:.6rem}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--rule);padding:.45rem .7rem;border-radius:.45rem}
}

/* HERO — centered, photo underneath */
.hero{padding:84px 0 48px}
.hero .lead{max-width:760px;margin:0 auto;text-align:center}
.hero .lead p{margin-top:.4rem}
.hero-photo{margin-top:28px;border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.cta-row{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.85rem 1.15rem;border-radius:.5rem;border:1px solid #111;background:#111;color:#fff;text-decoration:none;font-weight:650}
.btn:hover{background:#0b0f19}
.btn.ghost{background:#fff;color:#111;border-color:var(--rule)}
.btn.ghost:hover{border-color:#111}

/* SECTION SHELLS */
.section{padding:84px 0}
.section .section-intro{display:flex;align-items:end;justify-content:space-between;margin-bottom:1rem}
.kicker{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:#6b7280}

/* SERVICES — list style with tiny icons */
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.service{display:grid;grid-template-columns:32px 1fr;gap:14px}
.service svg{width:26px;height:26px;stroke:#0b3397}
@media (max-width:820px){.services{grid-template-columns:1fr}}

/* PROJECTS — simple 3-up thumbnails */
.showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.showcase figure{margin:0}
.showcase figcaption{font-size:.95rem;color:#6b7280;margin-top:.4rem}
@media (max-width:900px){.showcase{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.showcase{grid-template-columns:1fr}}

/* PROCESS — numbered list with rules */
.process{counter-reset:step;display:grid;gap:18px}
.process li{list-style:none;padding:16px 0;border-top:1px solid var(--rule)}
.process li:first-child{border-top:none}
.process li strong::before{counter-increment:step;content:counter(step) ". ";color:#0b3397}

/* TESTIMONIALS — pull quotes */
.quotes{display:grid;gap:20px}
blockquote{margin:0;padding:0;border-left:3px solid #dbe2ff;padding-left:16px}
blockquote p{color:#0b0f19}
blockquote cite{color:#6b7280;font-style:normal}

/* CONTACT — two columns, plain inputs */
.contact{display:grid;grid-template-columns:1.05fr .95fr;gap:24px}
label{display:block;font-weight:600;margin:.6rem 0 .3rem;color:#0b0f19}
input,textarea{width:100%;padding:.7rem .85rem;border:1px solid var(--rule);border-radius:6px;background:#fff;color:#111}
input:focus,textarea:focus{outline:2px solid rgba(30,64,175,.15);border-color:#bcd0ff}
.form-note{font-size:.95rem;color:#6b7280}

/* FOOTER — clear grid with business info */
footer.site-footer{border-top:1px solid var(--rule);padding:40px 0;background:#fff}
.footer-grid{display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:24px;align-items:start}
.footer-col h4{margin:0 0 .5rem;font-size:1rem;color:#0b0f19}
footer nav{display:grid;gap:.35rem}
footer a{text-decoration:none;color:#1f2937}
footer a:hover{text-decoration:underline}
.legal{color:#6b7280;margin-top:.8rem}

.hero-logo{width:96px;height:96px;object-fit:contain;margin:0 auto 12px;display:block}
.hero-divider{width:60px;height:2px;background:#e5e7eb;margin:0 auto 24px}
.btn{background:var(--link);border:1px solid var(--link);color:#fff}
.btn:hover{background:var(--link-hover);border-color:var(--link-hover)}

.btn{color:#fff !important}
.hero-logo{width:192px;height:192px;object-fit:contain;margin:0 auto 16px;display:block}
.hero-illustration img{max-width:480px;margin:32px auto 0;display:block;opacity:.9}

.hero-logo{width:160px;height:160px;object-fit:contain;margin:12px auto 12px;display:block}
.btn{background:var(--link);border:1px solid var(--link);color:#fff !important}
.btn:hover{background:var(--link-hover);border-color:var(--link-hover)}
.btn.ghost{background:#fff;color:#111 !important;border:1px solid var(--rule)}
.btn.ghost:hover{border-color:var(--link-hover);color:var(--link-hover) !important}

/* v17 adjustments */
.hero{padding:56px 0 40px} /* was 84px 0 48px */
.hero-logo{width:160px;height:160px;margin:0 auto 8px;display:block} /* tighter than v16 */

.btn.ghost{background:#fff !important;border:1px solid var(--link) !important;color:var(--link) !important}
.btn.ghost:hover{border-color:var(--link-hover) !important;color:var(--link-hover) !important}

/* v19: consistent header logo size */
.brand img{width:40px;height:40px;object-fit:cover}

/* v25 adjustments */
nav.primary{justify-content:center !important}

.hero-logo{width:320px !important;height:320px !important}

/* v32: SMS disclaimer styling */
.sms-disclaimer{margin-top:12px;color:#6b7280;font-size:.85rem}

.form-disclaimer{margin:.4rem 0 0;color:#6b7280;font-size:.85rem}

/* v34 normalize */
.sms-disclaimer{margin:16px 0;color:#6b7280;font-size:.85rem;text-align:center}

/* v36 disclaimers */
.sms-disclaimer{
  margin:16px 0;
  color:#6b7280;
  font-size:.85rem;
  text-align:center;
}
.consent-wrap{
  display:flex;
  align-items:flex-start;
  gap:.5rem;
  font-size:.95rem;
  color:#374151;
  margin:.75rem 0 1rem;
}
.consent-wrap input{margin-top:.25rem;}


/* v38 contact layout improvements */
#contact .container{}
#contact .form-wrap{max-width:680px;margin:0 auto}
.form-disclaimer{max-width:680px;margin:.6rem auto 0;color:#6b7280;font-size:.85rem}

/* If there's a two-column grid for contact, stack on mobile */
@media (max-width: 900px){
  .contact-grid{display:block}
  .contact-main{order:1}
  .contact-aside{order:2;margin-top:24px}
}

/* Ensure footer disclaimer is visible and centered */
.sms-disclaimer{margin:16px 0;color:#6b7280;font-size:.85rem;text-align:center}


/* v47: Contact = form only; centered consent; mobile-friendly */
.contact-single{ display:flex; justify-content:center; }
.form-wrap{ max-width:720px; width:100%; margin:0 auto; }
.form-disclaimer.center{ text-align:center; color:#6b7280; font-size:.9rem; margin:.8rem 0 0; }
#contact iframe, #contact .zf_main_div{ width:100% !important; max-width:100% !important; min-width:0 !important; }
@media (max-width: 900px){ .form-wrap{ max-width:100%; } }

/* v51: FAQ and areas layout */
details>summary{cursor:pointer;font-weight:600;margin:.5rem 0}
details p{margin:.5rem 0 1rem}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:900px){.grid{display:block}}
.columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.columns li{list-style:disc;margin-left:1.25rem}

/* v52: utilities and footer links */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.footer-links{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem}
.footer-links a{color:inherit;opacity:.9}
.footer-links a:hover{opacity:1;text-decoration:underline}