/* =========================================================
   Shelby County Hosting: shared styles for service pages
   Royal navy + antique gold. Keep this file alongside the
   service pages and index.html in the same folder.
   ========================================================= */
:root{
  --ink:#0A1430;
  --ink-2:#060D22;
  --slate:#13265A;
  --slate-2:#173068;
  --parchment:#E7EDF8;
  --parchment-2:#F2F6FC;
  --clay:#2E55E0;
  --clay-light:#4C72F0;
  --brass:#C8A24A;
  --brass-light:#E2C474;
  --moss:#6E8FE8;
  --text-light:#EAF0FB;
  --text-dim:rgba(234,240,251,0.66);
  --text-faint:rgba(234,240,251,0.42);
  --text-ink:#0C1B3D;
  --text-ink-dim:rgba(12,27,61,0.66);
  --line-light:rgba(234,240,251,0.12);
  --line-brass:rgba(200,162,74,0.38);
  --radius-s:6px;
  --radius-m:10px;
  --container:1100px;
  --pad-side:clamp(20px,5vw,64px);
  --pad-section:clamp(56px,8vw,104px);
  --ff-display:'Fraunces',serif;
  --ff-body:'IBM Plex Sans',system-ui,sans-serif;
  --ff-mono:'IBM Plex Mono',monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--ink);color:var(--text-light);font-family:var(--ff-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p{margin:0;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:2px solid var(--brass-light);outline-offset:3px;border-radius:2px;}

.wrap{max-width:var(--container);margin:0 auto;padding-left:var(--pad-side);padding-right:var(--pad-side);}
.section{padding-top:var(--pad-section);padding-bottom:var(--pad-section);}

.eyebrow{font-family:var(--ff-mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-light);display:inline-flex;align-items:center;gap:10px;}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brass);box-shadow:0 0 0 3px rgba(200,162,74,0.18);flex-shrink:0;}
.eyebrow.on-light{color:var(--clay);}
.eyebrow.on-light::before{background:var(--clay);box-shadow:0 0 0 3px rgba(46,85,224,0.16);}

.h-display{font-family:var(--ff-display);font-weight:600;letter-spacing:-0.01em;line-height:1.05;}

.btn{font-family:var(--ff-mono);font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;padding:15px 26px;border-radius:var(--radius-s);display:inline-flex;align-items:center;gap:10px;border:1px solid transparent;transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;white-space:nowrap;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--clay);color:#fff;}
.btn-primary:hover{background:var(--clay-light);}
.btn-ghost-dark{background:transparent;border-color:var(--line-brass);color:var(--text-light);}
.btn-ghost-dark:hover{border-color:var(--brass-light);color:var(--brass-light);}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(10,20,48,0.80);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-light);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px;}
.nav-brand{display:flex;align-items:center;gap:10px;}
.nav-mark{width:30px;height:30px;flex-shrink:0;}
.nav-name{font-family:var(--ff-mono);font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-light);line-height:1.2;}
.nav-name span{display:block;font-size:10px;color:var(--text-faint);letter-spacing:.1em;margin-top:2px;}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{font-family:var(--ff-mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim);transition:color .15s ease;}
.nav-links a:hover{color:var(--brass-light);}
.nav-cta{display:flex;align-items:center;gap:20px;}
.nav-toggle{display:none;background:transparent;border:1px solid var(--line-brass);border-radius:var(--radius-s);width:42px;height:38px;align-items:center;justify-content:center;}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:18px;height:1.5px;background:var(--text-light);position:relative;transition:transform .2s ease, opacity .2s ease;}
.nav-toggle span::before{position:absolute;top:-6px;}
.nav-toggle span::after{position:absolute;top:6px;}
.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}

/* ---------- BREADCRUMB + HERO ---------- */
.svc-hero{position:relative;overflow:hidden;padding-top:calc(96px + clamp(40px,6vw,72px));padding-bottom:clamp(48px,7vw,82px);
  background:radial-gradient(ellipse 800px 460px at 80% 0%, rgba(46,85,224,0.22), transparent 62%),radial-gradient(ellipse 700px 480px at 4% 100%, rgba(200,162,74,0.07), transparent 60%),linear-gradient(180deg,var(--ink),var(--ink-2));}
.breadcrumb{font-family:var(--ff-mono);font-size:12px;letter-spacing:.04em;color:var(--text-faint);margin-bottom:22px;}
.breadcrumb a{color:var(--text-dim);}
.breadcrumb a:hover{color:var(--brass-light);}
.breadcrumb span{margin:0 8px;color:var(--text-faint);}
.svc-hero h1{font-family:var(--ff-display);font-weight:600;letter-spacing:-.01em;line-height:1.04;font-size:clamp(33px,4.6vw,54px);max-width:16ch;margin-bottom:20px;}
.svc-hero .lead{font-size:18px;color:var(--text-dim);max-width:60ch;margin-bottom:30px;}
.svc-hero .hero-actions{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- CONTENT ---------- */
.svc-body{background:var(--ink);}
.svc-body .wrap{max-width:880px;}
.svc-lede{font-size:18.5px;color:var(--text-light);line-height:1.7;}
.svc-lede p{margin-bottom:20px;}
.svc-lede p:last-child{margin-bottom:0;}

.block{margin-top:clamp(48px,7vw,80px);}
.block h2{font-family:var(--ff-display);font-weight:600;font-size:clamp(24px,3vw,34px);margin-bottom:8px;}
.block .sub{color:var(--text-dim);margin-bottom:26px;max-width:60ch;}

.included{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.included li{background:var(--slate);border:1px solid var(--line-light);border-radius:var(--radius-m);padding:20px 22px;}
.included li b{font-family:var(--ff-display);font-weight:600;font-size:17px;display:block;margin-bottom:6px;}
.included li span{color:var(--text-dim);font-size:14.5px;}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s;}
.steps .step{position:relative;padding-top:28px;border-top:2px solid var(--line-light);}
.steps .step::before{counter-increment:s;content:counter(s);position:absolute;top:-2px;left:0;transform:translateY(-50%);background:var(--clay);color:#fff;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--ff-mono);font-size:13px;}
.steps .step h3{font-family:var(--ff-display);font-weight:600;font-size:17px;margin-bottom:8px;}
.steps .step p{color:var(--text-dim);font-size:14px;}

.callout{background:linear-gradient(180deg,rgba(200,162,74,0.12),rgba(19,38,90,0.5));border:1px solid var(--brass);border-radius:var(--radius-m);padding:28px 30px;}
.callout .eyebrow{margin-bottom:14px;}
.callout h3{font-family:var(--ff-display);font-weight:600;font-size:21px;margin-bottom:10px;}
.callout p{color:var(--text-dim);margin-bottom:16px;}

.pricing-note{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;background:var(--slate);border:1px solid var(--line-light);border-radius:var(--radius-m);padding:24px 28px;}
.pricing-note .amt{font-family:var(--ff-display);font-weight:700;font-size:32px;color:var(--text-light);white-space:nowrap;}
.pricing-note .amt span{font-family:var(--ff-mono);font-size:13px;color:var(--text-faint);font-weight:400;}
.pricing-note .note{color:var(--text-dim);font-size:14.5px;}

.faq-list{display:grid;gap:14px;}
.faq-list .qa{background:var(--slate);border:1px solid var(--line-light);border-radius:var(--radius-m);padding:22px 24px;}
.faq-list .qa h3{font-family:var(--ff-display);font-weight:600;font-size:18px;margin-bottom:8px;}
.faq-list .qa p{color:var(--text-dim);font-size:15px;}

/* ---------- RELATED ---------- */
.related{background:var(--ink-2);}
.related h2{font-family:var(--ff-display);font-weight:600;font-size:clamp(22px,2.6vw,30px);margin-bottom:26px;}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.related-grid a{background:var(--slate);border:1px solid var(--line-light);border-radius:var(--radius-m);padding:22px 24px;transition:background .2s ease, border-color .2s ease;display:flex;flex-direction:column;gap:8px;}
.related-grid a:hover{background:var(--slate-2);border-color:var(--line-brass);}
.related-grid b{font-family:var(--ff-display);font-weight:600;font-size:17px;}
.related-grid span{color:var(--text-dim);font-size:14px;}
.related-grid em{font-family:var(--ff-mono);font-style:normal;font-size:12px;color:var(--brass-light);margin-top:4px;}

/* ---------- CTA BAND ---------- */
.cta-band{background:linear-gradient(120deg,#CBA850 0%,#A8822F 100%);}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.cta-band h2{font-family:var(--ff-display);font-weight:600;font-size:clamp(24px,3vw,34px);color:var(--ink);max-width:520px;}
.cta-band p{color:rgba(10,20,48,0.78);margin-top:8px;max-width:460px;}
.cta-band .btn-band{background:var(--ink);color:var(--text-light);border-color:var(--ink);}
.cta-band .btn-band:hover{background:#0c1a40;}

/* ---------- FOOTER ---------- */
footer{background:var(--ink-2);border-top:1px solid var(--line-light);padding-top:56px;padding-bottom:30px;}
.footer-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid var(--line-light);margin-bottom:26px;}
.footer-brand{display:flex;align-items:center;gap:10px;}
.footer-cols{display:flex;gap:56px;flex-wrap:wrap;}
.footer-col h4{font-family:var(--ff-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);margin-bottom:16px;}
.footer-col a{display:block;font-size:14px;color:var(--text-dim);margin-bottom:11px;}
.footer-col a:hover{color:var(--brass-light);}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--ff-mono);font-size:11.5px;color:var(--text-faint);}
.footer-bottom a{color:var(--brass-light);}
.footer-bottom a:hover{text-decoration:underline;}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
.reveal.is-visible{opacity:1;transform:none;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:820px){
  .included{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr 1fr;gap:30px 18px;}
  .related-grid{grid-template-columns:1fr;}
  .cta-band .wrap{flex-direction:column;align-items:flex-start;}
}
@media (max-width:760px){
  .nav-links,.nav-cta .btn-ghost-dark{display:none;}
  .nav-toggle{display:flex;}
  .nav.is-open .nav-links{display:flex;flex-direction:column;align-items:flex-start;gap:0;position:absolute;top:100%;left:0;right:0;background:var(--ink);border-bottom:1px solid var(--line-light);padding:8px var(--pad-side) 18px;}
  .nav.is-open .nav-links a{padding:12px 0;width:100%;border-bottom:1px solid var(--line-light);}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr;}
  .hero-actions .btn{flex:1;justify-content:center;}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;transition-duration:0.001ms !important;}
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;}
}