/* ==========================================================
   Local Guide Marketing :: design system
   Direction: "field guide to the map pack." Map-paper white,
   park green, pin red used only for pins, star gold.
   Signature: a dotted walking-route line that runs through the
   page; sections are stops, tiers are four stops on ONE route,
   and every route ends at a pin (the call).
   ========================================================== */

:root{
  --mint:       #2E9068;   /* darkened from logo #57B984 for text contrast on white */
  --mint-bright:#57B984;
  --ink:        #14102E;
  --ink-soft:   #4C4763;
  --paper:      #FBFAFE;
  --paper-dim:  #F2F0F9;
  --green:      #4620A9;
  --green-deep: #351880;
  --green-tint: #ECE6F9;
  --pin:        #C27932;
  --gold:       #DFA32F;
  --line:       #DEDAEC;
  --radius:     14px;
  --font-display:"Bricolage Grotesque", system-ui, sans-serif;
  --font-body:  "Figtree", system-ui, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  font-size:1.06rem;
  /* faint map graticule */
  background-image:
    linear-gradient(var(--paper-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-dim) 1px, transparent 1px);
  background-size:56px 56px;
}

img{max-width:100%;display:block}
a{color:var(--green-deep)}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(251,252,249,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  max-width:1080px;margin:0 auto;padding:.85rem 1.25rem;
  display:flex;align-items:center;gap:1.4rem;
}
.brand{
  font-family:var(--font-display);font-weight:700;font-size:1.12rem;
  color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:.5rem;
}
.brand svg{flex:none}
.nav-links{display:flex;gap:1.15rem;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav-links a{
  text-decoration:none;color:var(--ink-soft);font-weight:600;font-size:.95rem;
}
.nav-links a:hover{color:var(--green-deep)}
.nav-links a.btn{color:#fff}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--green);color:#fff;
  padding:.72rem 1.35rem;border-radius:999px;text-decoration:none;
  font-weight:700;font-size:.98rem;border:2px solid var(--green);
  transition:background .15s ease;
}
.btn:hover{background:var(--green-deep);border-color:var(--green-deep)}
.btn.ghost{background:transparent;color:var(--green-deep)}
.btn.ghost:hover{background:var(--green-tint)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---------- layout ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 1.25rem}
.narrow{max-width:760px}
section{padding:4.2rem 0}
section.dim{background:var(--paper-dim)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--font-display);line-height:1.12;letter-spacing:-.015em}
h1{font-size:clamp(2.3rem,5.4vw,3.7rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800;margin-bottom:1rem}
h3{font-size:1.28rem;font-weight:700;margin-bottom:.5rem}
p{margin-bottom:1rem;max-width:68ch}
.lede{font-size:1.22rem;color:var(--ink-soft)}
.eyebrow{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green-deep);display:block;margin-bottom:.8rem;
}

/* ---------- hero ---------- */
.hero{padding:5.5rem 0 4.5rem;position:relative;overflow:hidden}
.hero .lede{margin:1.3rem 0 2rem}
.hero-ctas{display:flex;gap:.9rem;flex-wrap:wrap}
.hero-note{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-soft);margin-top:1.6rem}

/* ---------- the route (signature) ---------- */
.route{position:relative;padding-left:2.6rem}
.route::before{
  content:"";position:absolute;left:11px;top:6px;bottom:6px;width:0;
  border-left:3px dotted var(--green);
}
.stop{position:relative;padding:1.4rem 0 1.6rem}
.stop::before{
  content:"";position:absolute;left:-2.6rem;top:1.7rem;width:22px;height:22px;
  background:var(--paper);border:3px solid var(--green);border-radius:50%;
}
.stop.end::before{
  background:var(--pin);border-color:var(--pin);
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);
}
.stop .eyebrow{margin-bottom:.35rem}

/* ---------- cards ---------- */
.grid{display:grid;gap:1.4rem}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.7rem 1.6rem;
}
.card h3{display:flex;align-items:center;gap:.55rem}
.card .btn{margin-top:.6rem}

/* ---------- tier route (horizontal on desktop) ---------- */
.tiers{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));position:relative;margin-top:2.4rem}
.tier{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem 1.4rem;position:relative;
}
.tier::before{
  content:"";position:absolute;top:-14px;left:1.4rem;width:20px;height:20px;
  border-radius:50%;background:var(--paper);border:3px solid var(--green);
}
.tier.gold::before{background:var(--gold);border-color:var(--gold)}
.tier .depth{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:.4rem;
}
.tier h3{font-size:1.2rem}
.tier .promise{font-weight:700;color:var(--green-deep);margin-bottom:.6rem}
.tier ul{margin:.4rem 0 .8rem 1.1rem}
.tier li{margin-bottom:.35rem}
.tier .ph{
  font-family:var(--font-mono);font-size:.8rem;background:var(--green-tint);
  border-radius:8px;padding:.5rem .7rem;color:var(--green-deep);
}
.tiers-rail{height:0;border-top:3px dotted var(--green);margin:0 .5rem;transform:translateY(24px)}
@media(max-width:720px){.tiers-rail{display:none}}

/* ---------- misc ---------- */
.pinlist{list-style:none;margin:1rem 0}
.pinlist li{padding-left:1.9rem;position:relative;margin-bottom:.75rem;max-width:66ch}
.pinlist li::before{
  content:"";position:absolute;left:0;top:.42em;width:13px;height:13px;
  background:var(--pin);border-radius:50% 50% 50% 0;transform:rotate(-45deg);
}
.stars{color:var(--gold);letter-spacing:.15em;font-size:1.05rem}
.callout{
  background:var(--green-tint);border-radius:var(--radius);
  padding:1.6rem 1.7rem;border:1px solid #CFC4EE;margin:1.6rem 0;
}
table.compare{width:100%;border-collapse:collapse;margin:1.5rem 0;background:#fff;border-radius:var(--radius);overflow:hidden}
.compare th,.compare td{border:1px solid var(--line);padding:.8rem .9rem;text-align:left;vertical-align:top;font-size:.96rem}
.compare th{background:var(--green-tint);font-family:var(--font-display)}
form.simple{display:grid;gap:.9rem;max-width:460px}
form.simple label{font-weight:700;font-size:.92rem}
form.simple input,form.simple textarea{
  padding:.7rem .8rem;border:1.5px solid var(--line);border-radius:10px;
  font:inherit;background:#fff;width:100%;
}
form.simple input:focus,form.simple textarea:focus{outline:3px solid var(--gold);outline-offset:1px}

/* ---------- footer ---------- */
footer.site{background:#1D0B4B;color:#DFDAEE;padding:3.4rem 0 2.4rem;margin-top:2rem}
footer.site a{color:#C4B4F0;text-decoration:none}
footer.site a:hover{text-decoration:underline}
.foot-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.foot-grid h4{font-family:var(--font-display);color:#fff;margin-bottom:.6rem;font-size:1rem}
.nap{font-family:var(--font-mono);font-size:.84rem;line-height:1.8}
.brandline{margin-top:2.4rem;border-top:1px solid #2A2347;padding-top:1.4rem;font-size:.85rem;color:#9C93B8;max-width:72ch}

@media(max-width:720px){
  .nav-links{gap:.8rem;font-size:.88rem}
  section{padding:3.1rem 0}
  .hero{padding:3.6rem 0 3rem}
}

.lg-mint{color:var(--mint)}
.stop::before{border-color:var(--mint-bright)}

/* ---------- 2026-07 update: new logo, portrait, mobile fixes ---------- */
.brand-logo{height:42px;width:auto;display:block}
.hero-logo{max-width:300px;width:100%;height:auto;margin-bottom:1.4rem}

.portrait{
  width:100%;max-width:340px;height:auto;border-radius:var(--radius);
  border:1px solid var(--line);margin-top:2rem;
}
.audit-grid{display:grid;gap:2rem;grid-template-columns:1fr;align-items:start}
.portrait.side{margin-top:0}
@media(min-width:860px){
  .audit-grid{grid-template-columns:1.5fr 1fr}
  .portrait.side{max-width:100%;position:sticky;top:90px}
}

/* keep the pricing table usable on small screens */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll table.compare{min-width:560px;margin:0}

/* mobile */
@media(max-width:720px){
  .brand-logo{height:34px}
  .nav{gap:.8rem;flex-wrap:wrap}
  .nav-links{gap:.7rem .9rem;font-size:.88rem}
  .nav-links a.btn{padding:.55rem 1rem;font-size:.88rem}
  .hero-ctas .btn{width:100%;text-align:center}
  .portrait{max-width:240px;margin-left:auto;margin-right:auto}
  .audit-grid .portrait.side{margin:0 auto}
  .hero-logo{max-width:230px}
  h1{overflow-wrap:break-word}
  .wrap{padding:0 1rem}
}

/* ---------- banner images + GHL form embed ---------- */
.banner{
  width:100%;height:auto;border-radius:var(--radius);
  border:1px solid var(--line);margin-top:2rem;
}
.form-embed{
  background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);
  padding:1rem;max-width:560px;min-height:460px;
}
.form-embed iframe{display:block;width:100%;min-height:460px}
@media(max-width:720px){
  .form-embed{padding:.6rem;max-width:100%}
  .banner{margin-top:1.5rem}
}

/* ---------- about hero: portrait beside the H1 ---------- */
.about-hero{display:grid;gap:2rem;grid-template-columns:1fr;align-items:center}
.about-portrait{margin-top:0;justify-self:center}
@media(min-width:860px){
  .about-hero{grid-template-columns:1.55fr 1fr}
  .about-portrait{max-width:300px;justify-self:end}
}
@media(min-width:721px) and (max-width:859px){
  .about-hero{grid-template-columns:1.4fr 1fr}
  .about-portrait{max-width:250px;justify-self:end}
}