/* ==========================================================================
   TheWebSeed - style.css (CLEANED + ANNOTATED)
   --------------------------------------------------------------------------
   Goals:
   - Keep the design IDENTICAL (no selector/property changes intended)
   - Add structure + notes so you can find/maintain sections quickly
   - Preserve cascade order to avoid visual regressions
   --------------------------------------------------------------------------
   Table of Contents (search these tags):
   [RESET] [GLOBAL] [BLOG]
   [NAV] [HERO] [CTA] [SECTIONS]
   [LOCAL-SEO] [SERVICE-CARDS] [MOBILE] [UTILS]
   ========================================================================== */

/* ========================= [RESET] ========================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}


/* ========================= [GLOBAL] ======================== */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f9f9f9;
  color: #333;
}


/* ========================= [BLOG] ========================= */
/* BLOG-SPECIFIC STYLING */
.blog-content-section {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 0 20px 0;
  background: transparent;
  display: block;
}

#Blog-Context {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #333;
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1em;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  word-break: break-word;
  overflow-wrap: anywhere;
}

#Blog-Context h1 {
  text-align: center;
  color: #222;
  margin-top: 1.2em;
  margin-bottom: 0.6em;
  font-size: 2em;
}

#Blog-Context h2 {
  color: #222;
  margin-top: 1.2em;
  margin-bottom: 0.6em;
  font-size: 1.25em;
  border-bottom: 2px solid #ccc;
  padding-bottom: 0.3em;
}

#Blog-Context p { margin-bottom: 1em; text-align: left; }
#Blog-Context ul { padding-left: 1.2em; margin-bottom: 1em; list-style-type: disc; }
#Blog-Context li { margin-bottom: 0.75em; }
#Blog-Context a { word-break: break-all; overflow-wrap: anywhere; color: #1666ba; text-decoration: underline; }

/* Author Info Styling */
.blog-author-info {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin: 0.5em auto 1.5em auto; max-width: 700px; width: 100%; padding: 0 1em;
  font-size: 15px; color: #555; gap: 0.3em; text-align: center;
}
.blog-author-info .author-logo { width: 50px !important; height: 50px !important; border-radius: 50%; object-fit: cover; box-shadow: 0 0 4px rgba(0,0,0,0.1); display: block; }
.blog-author-info .author-meta { display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
.blog-author-info .author-name { font-weight: bold; color: #333; font-size: 1rem; }
.blog-author-info .publish-date { font-size: 0.93rem; color: #AAA; font-style: italic; opacity: 0.8; margin-top: 0.25em; }

/* Backlink */
.blog-backlink { margin: 2.5em auto 0 auto; text-align: center; font-size: 1.08em; color: #444; max-width: 90%; }
.blog-backlink a {
  display: inline-block; margin-top: 0.5em; padding: 9px 22px; color: #e6f6cd !important; background: #444240;
  border-radius: 24px; font-weight: bold; font-size: 1.04em; text-decoration: none; transition: background 0.18s; border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08); letter-spacing: 0.03em;
}
.blog-backlink a:visited { color: #e6f6cd !important; background: #444240; }
.blog-backlink a:hover, .blog-backlink a:active, .blog-backlink a:focus { background: #e6f6cd; color: #444240 !important; text-decoration: underline; }

/* MOBILE */
@media (max-width: 768px) {
  .blog-content-section { max-width: 100%; width: 100%; padding: 0 2vw 10px 2vw; }
  #Blog-Context { max-width: 100%; width: 100%; margin: 0; padding: 0 3vw; font-size: 16px; }
  .blog-author-info { max-width: 100%; width: 100%; padding: 0 3vw; }
  #Blog-Context h1 { font-size: 1.3em; }
  #Blog-Context h2 { font-size: 1.1em; }
  .blog-author-info .author-logo { margin-bottom: 8px; }
  .blog-backlink { font-size: 1em; max-width: 98%; }
  .blog-backlink a { padding: 9px 16px; font-size: 1em; }
}

/* ========================== [NAV] ========================== */
/* NAV */
.navbar {
  width: 100%;
  background-color: #F2F4F3;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* Slightly tighter vertical padding so we can show a larger logo
     without making the navbar feel "taller" */
  padding: 6px 20px;

  position: fixed;
  top: 0;
  z-index: 10;
}

.logo { font-size: 1.5em; }
.logo { margin: 0; }
.logo { text-decoration: none; color: inherit; }
.hamburger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; justify-content: space-between; height: 20px; }
.hamburger span { display: block; width: 25px; height: 3px; background: #000000; }
.nav-links { display: flex; gap: 20px; }
.nav-links a { color: #000000; text-decoration: none; }
.nav-links a:hover { text-decoration: underline; }


/* NAV LOGO IMAGE (replaces the old HOME icon)
   Keeps the fixed navbar height stable by constraining the image. */
.logo{
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.logo-img {
  height: 50px;
  width: auto;
  display: block;
}
@media (max-width: 768px){
  .logo-img{ height: 50px; max-width: 260px; }
  .navbar{ padding: 5px 14px; }
}


.icon-svg{
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  vertical-align: -0.15em;
  fill: currentColor; /* inherits from parent */
}

/* Now you can color it anywhere */
.icon{ color:#FFFFFF; }           /* brand green */
.icon.warn{ color:#f5c400; }      /* yellow */
.icon.muted{ color:rgba(255,255,255,.7); }



/* ========================= [HERO] ========================== */
/* HEADER & HERO IMAGE (updated to use <img>) */
header {
  position: relative;
  width: 100%;
  padding-top: 60px;                  /* space for fixed navbar */
  overflow: visible;                     /* prevent overlay overflow */
  background: #000;                   /* letterbox color if any space shows */
}

/* ensure the entire image is always visible, no cropping */
.hero-img {
  display: block;
  width: 100%;
  height: auto;                       /* maintains aspect ratio */
  /* no max-height to avoid cutting off on laptops */
  object-fit: contain;                /* keep full image visible */
  object-position: center;
  margin: 0 auto;
}

/* centered overlay content */
.header-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  pointer-events: none;               /* clicks pass through to links below if any */
}

.header-overlay p {
  max-width: 900px;
  color: #fff;
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  line-height: 1.35;
  text-shadow: 0 2px 12px rgba(0,0,0,0.65);
  pointer-events: auto;               /* allow text selection */
}

/* Prominent phone in nav */
.nav-call-cta{
  margin-left: 1rem;
  padding: .45rem .8rem;
  border-radius: 8px;
  background:#31314b; /* KNK yellow */
  color:#FFFFFF; text-decoration:none; font-weight:700;
  display:inline-flex; align-items:center; gap:.4rem;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.nav-call-cta:hover{ background:#daf7a6; color:#000000; }



/* ========================== [CTA] ========================== */
/* CTA */
.cta-button {
  display: inline-block; margin-top: 15px; padding: 10px 20px; color: #31314b; background-color: #fff;
  text-decoration: none; border-radius: 5px;
}

/* ======================== [SECTIONS] ======================= */
/* SECTIONS */
.services-section { width: 100%; max-width: 800px; padding: 40px 20px; text-align: center; }
.services { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-around; }
.service { flex: 1 1 250px; background-color: #fff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); padding: 20px; overflow: hidden; position: relative; }
.service img { width: 100%; height: auto; object-fit: cover; margin-bottom: 10px; }
.service h3, .service p { margin: 10px; color: #333; }

.services-list { max-width: 800px; margin: auto; padding: 20px; text-align: left; }
.services-list h2 { font-size: 2em; text-align: center; color: #333; }
.services-list ul { list-style-type: none; padding: 0; }
.services-list li { display: flex; align-items: center; font-size: 1.2em; padding: 10px 0; border-bottom: 1px solid #ddd; }
.services-list .icon { font-size: 1.5em; color: #d80000; margin-right: 10px; }

.abouts-section { width: 100%; max-width: 800px; padding: 40px 20px; text-align: center; }
.abouts { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-around; }
.about { flex: 1 1 250px; background-color: #fff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); padding: 20px; overflow: hidden; position: relative; }
.about img { width: 100%; height: auto; object-fit: cover; margin-bottom: 10px; }
.about h3, .about p { margin: 10px; color: #333; }

.aboutext {
    flex: 1 1 250px;
 font-size: 1.3em;
    background-color: #daf7a6;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    overflow: hidden;
    position: relative;
}

.contact-section { text-align: center; padding: 30px; padding-bottom: 0; background-color: #f9f9f9; margin-top: 20px; }
.contact-section h2 { font-size: 2em; color: #000; margin-bottom: 10px; }
.contact-section p { font-size: 1.2em; color: #333; margin-bottom: 20px; }
.call-button, .call-button2 {
  display: inline-block; padding: 15px 30px; font-size: 1.2em; color: #FFFFFF; background-color: #444240;
  text-decoration: none; border-radius: 8px; font-weight: bold;
}
.call-button2 { padding: 15px 15px; }
.call-button:hover, .call-button2:hover { background-color: #e6f6cd; color:#000000;}

.socials-section, .contacts-section { width: 100%; max-width: 800px; padding: 40px 20px; text-align: center; }
.socials, .contacts { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-around; }
.social, .contact { flex: 1 1 250px; background-color: #fff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); padding: 20px; overflow: hidden; position: relative; }
.socials img, .contacts img { height: auto; margin-bottom: 10px; }
.social h3, .service p { margin: 10px; color: #333; }

.contacts-list, .socials-list { max-width: 800px; margin: auto; padding: 20px; text-align: left; }
.contacts-list h2, .socials-list h2 { font-size: 2em; text-align: center; color: #333; }
.contacts-list ul, .socials-list ul { list-style-type: none; padding: 0; }
.contacts-list li, .socials-list li { display: flex; align-items: center; font-size: 1.2em; padding: 10px 0; border-bottom: 1px solid #ddd; }
.contacts-list .icon, .socials-list .icon { font-size: 1.5em; color: #d80000; margin-right: 1px; }

.styled-hr { border: none; border-top: 2px solid #ccc; width: 80%; margin: 20px auto; max-width: 600px; }

footer {
  width: 100%; padding: 20px; background-color: #444240; color: #e6f6cd; text-align: center; margin-top: auto;
}
.footer-content { display: flex; flex-direction: column; align-items: center; }
.footer-links { margin-top: 5px; }
.footer-links a { color: #FFFFFF; text-decoration: none; margin: 0 5px; }
footer a { color: #FFFFFF; text-decoration: none; }
footer a:visited { color: #FFFFFF; }
footer a:hover { color: #FFFFFF; }
footer a:active { color: #FFFFFF; }
footer { align-self: stretch; }


/* ========================= [MOBILE] ======================== */
/* Mobile styles */
@media (max-width: 768px) {
  .hamburger { display: flex; }
  .nav-links {
    display: none; position: absolute; top: 60px; right: 20px; flex-direction: column; gap: 15px;
/*  THIS LINE CHANGES THE NAV DROP DOWN COLOR */
    background: #F2F4F3; padding: 15px; border-radius: 5px;

  }
  .nav-links a { color: #000000; font-size: 1.2em; padding: 8px 0; text-align: center; }
  .nav-links.open { display: flex; }
  .services { flex-direction: column; }
  .service { flex: 1 1 100%; padding: 15px; }
}


/* Hero wrapper to avoid clipping and let header grow with the image */
.hero-wrap {
  position: relative;
  width: 100%;
}

/* overlay sits on top but header height is driven by the image */
.hero-wrap .header-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  pointer-events: none;
}



/* === KNK Services Pretty Styling (scoped) === */
.svc-pretty { max-width: 1100px; }

.svc-pretty .services {
  gap: 28px;
}

.svc-pretty .service {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 12px;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.svc-pretty .service:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(0,0,0,0.12);
}

.svc-pretty .service img {
  border-radius: 10px;
}

.svc-pretty .service h2,
.svc-pretty .service h3,
.svc-pretty .service h4 {
  margin: 4px 6px 0 6px;
  font-size: clamp(1.15rem, 1.9vw, 1.35rem);
  color: #111;
}

.svc-pretty .service p {
  margin: 4px 6px 6px 6px;
  color: #4a4a4a;
  line-height: 1.5;
  font-size: 0.99rem;
}

/* List as responsive cards */
.svc-pretty .services-list {
  width: 100%;
  padding: 8px 6px 14px 6px;
}

.svc-pretty .services-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.svc-pretty .services-list li {
  border: none;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.98rem;
  line-height: 1.35;
}

.svc-pretty .services-list li .icon {
  font-size: 1.2rem;
  color: #f5c400; /* KNK yellow */
  width: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Optional CTA (if added later) */
.svc-pretty .svc-cta {
  display: flex;
  justify-content: center;
  padding: 8px 0 14px;
}
.svc-pretty .svc-cta .cta-button {
  background: #31314b;
  color: #000;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.svc-pretty .svc-cta .cta-button:hover {
  background: #111;
  color: #fff;
  transform: translateY(-1px);
}

/* Tidy headings inside the section wrapper */
.svc-pretty > h1, 
.svc-pretty > h2, 
.svc-pretty > h3 {
  margin-bottom: 8px;
}

/* Mobile tuning */
@media (max-width: 768px) {
  .svc-pretty { padding-left: 10px; padding-right: 10px; }
  .svc-pretty .service { gap: 10px; }
  .svc-pretty .services-list ul { grid-template-columns: 1fr; }
}


/* === Patch: Fix spacing so card lists sit right after text (no big gaps) === */
.svc-pretty .service {
  display: flex !important;
  flex-direction: column !important;
  /* remove grid rows that caused bottom alignment */
  grid-template-rows: unset !important;
}

.svc-pretty .service p { margin-bottom: 12px; }
.svc-pretty .services-list { margin-top: 4px; }


/* Intro text styling below hero H1 */
.intro-text {
  max-width: 800px;
  margin: 0 auto 2rem auto;
  text-align: center;
  font-size: 1.05rem;
  color: #444;
  line-height: 1.6;
}


@media (max-width: 480px) {
  .intro-text {
    font-size: 0.95rem;
    padding: 0 12px;
  }
  .intro-text p {
    margin-bottom: 0.9rem;
  }
}

/* Mobile bottom dock call button */
.mobile-call-dock{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  display:none; justify-content:center; align-items:center;
  background:#e6f6cd; color:#444240; font-weight:800;
  padding:.9rem 1rem; text-decoration:none;
  box-shadow:0 -4px 18px rgba(0,0,0,.15);
}
@media (max-width:768px){
  .mobile-call-dock{ display:flex; }
  body{ padding-bottom:72px; } /* prevent overlap with page content */
}
.mobile-call-dock:hover{ background:#444240; color:#e6f6cd; }


@media (max-width: 768px) {
  
}

#services .intro-text {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.1rem;
}

@media (max-width: 768px) {
  #services .intro-text {
    font-size: 1rem;
  }
}

#services .service {
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

#services .service:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}


/* =========================================================
   GLOBAL HEADING HIERARCHY (SEO-friendly, reusable)
   - Assumes: 1 H1 per page, then H2/H3/etc as needed.
   - This styles headings consistently across all pages.
========================================================= */

h1, h2, h3, h4, h5 {
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem 0;
  color: #111;
}

h1 { font-size: clamp(2.1rem, 5.5vw, 3.2rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 4.5vw, 2.35rem); font-weight: 800; }
h3 { font-size: clamp(1.25rem, 3.5vw, 1.65rem); font-weight: 800; }
h4 { font-size: 1.15rem; font-weight: 800; }
h5 { font-size: 1.05rem; font-weight: 800; }

/* Make section headings breathe a bit more */
.page-section > h1,
.page-section > h2,
.page-section > h3 {
  margin-bottom: 1rem;
}

/* Prevent full-bleed backgrounds from causing horizontal scroll */
body { overflow-x: hidden; }


/* =========================================================
   REUSABLE SECTION BANDS (visual transitions between sections)
   Usage:
     <section class="page-section H1-Section section-band band-light section-pad-lg">...</section>
     <section class="page-section H2-Section-1 section-band band-soft section-pad-lg">...</section>
   Background variants:
     band-light | band-soft | band-tint | band-dark
========================================================= */

.page-section{
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.section-band{
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
}

/* Full-bleed background behind centered content */
.section-band::before{
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--band-bg, #ffffff);
  z-index: -1;
}

/* Background variants */
.band-light{ --band-bg: #ffffff; }
.band-soft{  --band-bg: #f3f5f7; }
.band-tint{  --band-bg: #eef6ef; }
.band-dark{  --band-bg: #31314b; color: #ffffff; }

.band-dark h1,
.band-dark h2,
.band-dark h3,
.band-dark h4,
.band-dark h5,
.band-dark p,
.band-dark a{ color: #ffffff; }

/* Padding utilities */
.section-pad-lg{ padding-top: 44px; padding-bottom: 36px; }
.section-pad-md{ padding-top: 34px; padding-bottom: 28px; }
.section-pad-sm{ padding-top: 24px; padding-bottom: 20px; }

/* Divider that reads as a chapter break */
.section-divider{
  border: 0;
  height: 1px;
  width: min(720px, 80%);
  margin: 0 auto;
  background: rgba(0,0,0,0.18);
}

/* Keep intro paragraphs consistently readable */
.intro-text{
  max-width: 900px;
  margin: 0 auto 0.85rem auto;
  font-size: 1.05rem;
  color: #444;
  line-height: 1.65;
  text-align: center;
}

/* Inline CTA inside sections: no background band of its own */
.contact-section.inline-cta{
  padding: 12px 0 0 0;
  margin-top: 0;
  background: transparent;
}

@media (max-width: 768px){
  .section-band{ padding-left: 16px; padding-right: 16px; }
  .section-pad-lg{ padding-top: 36px; padding-bottom: 30px; }
  .intro-text{ font-size: 1rem; }

  /* Mobile already has the persistent bottom call dock CTA.
     Hide the inline H1 CTA to avoid redundancy. */
  .contact-section.inline-cta{ display: none !important; }
}


/* =========================================================
   H1 SECTION: Visual + Promise Card (image + "Get found" card)
   Notes:
   - This styling intentionally DOES NOT crop the image.
   - To keep the card height balanced, keep bullets short.
   ========================================================= */

.H1-Section .h1-feature-row{
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
}

/* Desktop / large tablets */
@media (min-width: 980px){
  .H1-Section .h1-feature-row{
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 26px;
  }
}

/* Image wrapper: no padding, no background (prevents "framed" look) */
.H1-Section .h1-visual{
  width: 100%;
}

.H1-Section .h1-visual picture,
.H1-Section .h1-visual-img{
  display: block;
  width: 100%;
  height: auto; /* No cropping */
}

.H1-Section .h1-visual-img{
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.10);
}

/* Promise card styling */
.H1-Section .h1-promise-card{
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.08);
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
  box-shadow: 0 14px 34px rgba(0,0,0,0.06);
  padding: 20px 20px 16px;
  text-align: center;
}

/* Subtle accent bar on top (brand-friendly, low risk) */
.H1-Section .h1-promise-card::before{
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 14px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(49,49,75,1) 0%, rgba(47,107,58,1) 100%);
  opacity: 0.85;
}

.H1-Section .h1-promise-title{
  font-size: 1.5em;
  font-weight: 700;
  margin: 10px 0 8px;
  line-height: 1.05;
}

.H1-Section .h1-promise-sub{
  margin: 0 auto 14px;
  max-width: 34ch;
  opacity: 0.88;
}

/* Clean, compact list (prevents the card from becoming too tall) */
.H1-Section .h1-promise-list{
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 360px; /* keeps bullet layout consistent */
  margin-left: auto;
  margin-right: auto;
  display: grid;
  gap: 10px;
  text-align: left;
}

.H1-Section .h1-promise-list li{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  line-height: 1.25;
}

.H1-Section .h1-promise-list li::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(49,49,75,0.95);
  flex: 0 0 10px;
}

.H1-Section .h1-promise-list strong{
  font-weight: 700;
}
/* =========================================================
   H1 PROMISE CARD – Expert SEO Audit offer (scoped)
   - Compact, premium, modern (2026) look
   - No icons / no button-like price
   - Text-clamped so the hero stays balanced
   ========================================================= */
.H1-Section .h1-audit-cta{
  margin: 10px auto 0;
  max-width: 360px;            /* matches prior list constraint */
}

/* Hook line (clean + premium; no stripes) */
.H1-Section .h1-audit-hook{
  position: relative;
  padding: 12px 14px 12px 18px;
  border-radius: 14px;

  /* Soft, modern "spotlight" tint (on-brand, not salesy) */
  background:
    radial-gradient(120% 140% at 0% 50%, rgba(47,107,58,0.14) 0%, rgba(47,107,58,0.06) 55%, rgba(255,255,255,0.00) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.72) 100%);
  border: 1px solid rgba(49,49,75,0.12);

  box-shadow:
    0 10px 22px rgba(0,0,0,0.06),
    0 1px 0 rgba(255,255,255,0.70) inset;

  text-align: left;
}

/* Slim brand accent bar (echoes the card's top accent) */
.H1-Section .h1-audit-hook::before{
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(49,49,75,1) 0%, rgba(47,107,58,1) 100%);
  opacity: 0.95;
}

.H1-Section .h1-audit-hook strong{
  display: block;
  padding-left: 10px;          /* clears the accent bar */
  font-weight: 850;
  color: #111;
  font-size: 1.06rem;
  line-height: 1.18;
  letter-spacing: -0.01em;

  /* Clamp lines so this never grows too tall */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;       /* desktop: 2 lines max */
  overflow: hidden;
}

/* Sub line (service + price) – grid keeps badge visible without truncating awkwardly */
.H1-Section .h1-audit-sub{
  margin-top: 10px;
  padding-left: 4px;

  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 6px;
}

.H1-Section .h1-audit-subtext{
  min-width: 0;
  color: rgba(49,49,75,0.78);
  font-size: 0.98rem;
  line-height: 1.18;

  /* allow wrap but cap height */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.H1-Section .h1-audit-subtext strong{
  color: #111;
  font-weight: 850;
}

/* Price badge (label-style; intentionally NOT button-like) */
.H1-Section .h1-audit-price-badge{
  justify-self: end;
  align-self: center;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;

  background: rgba(47,107,58,0.08);
  border: 1px solid rgba(47,107,58,0.55);
  color: rgba(17,17,17,0.92);
}

/* Keep the whole CTA compact and prevent accidental clipping */
.H1-Section .h1-audit-cta,
.H1-Section .h1-audit-hook,
.H1-Section .h1-audit-sub{
  overflow: visible;
}


/* Mobile: allow 3 lines for the hook, keep subline readable */
@media (max-width: 520px){
  .H1-Section .h1-audit-hook{
    padding: 11px 12px 11px 16px;
    border-radius: 13px;
  }
  .H1-Section .h1-audit-hook strong{
    font-size: 1.02rem;
    -webkit-line-clamp: 3;
  }
  .H1-Section .h1-audit-subtext{
    font-size: 1.00rem;
  }
}

/* Desktop: align with card's left edge (prevents "floating" center look) */
@media (min-width: 980px){
  .H1-Section .h1-audit-cta{
    margin-left: 0;
    margin-right: 0;
  }
}

/* On wider screens, keep the card visually balanced with the image */
@media (min-width: 980px){
  .H1-Section .h1-promise-card{
    align-self: center; /* centers card next to image */
    text-align: left;
    padding: 22px 22px 18px;
  }
  .H1-Section .h1-promise-card::before{
    left: 22px;
    right: 22px;
  }
  .H1-Section .h1-promise-sub{
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }
  .H1-Section .h1-promise-list li{
    justify-content: flex-start;
  }
}

/* Small screens: slightly tighter radius for a cleaner look */
@media (max-width: 420px){
  .H1-Section .h1-visual-img,
  .H1-Section .h1-promise-card{
    border-radius: 16px;
  }
}


/* =========================================================
   H2 SECTION 1: Local SEO (modern layout + visual proof)
   Scoped to #local-seo to avoid affecting other sections.
========================================================= */

#local-seo .seo-grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
  text-align: left; /* override .page-section center for this layout */
}

#local-seo .seo-copy{ text-align: left; }

#local-seo .seo-eyebrow{
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 8px;
}

#local-seo h2{ margin-top: 0; margin-bottom: 12px; }

#local-seo .seo-lede{
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 18px;
  max-width: 60ch;
  color: #333;
}

#local-seo .seo-bullets{
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
  display: grid;
  gap: 14px;
}

#local-seo .seo-bullets li{
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
}

#local-seo .seo-ico{
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(126, 191, 67, 0.12);
  font-size: 16px;
}

#local-seo .seo-bullets strong{
  display: block;
  font-weight: 800;
  margin-bottom: 2px;
  color: #111;
}

#local-seo .seo-bullets span{
  display: block;
  opacity: 0.85;
  line-height: 1.45;
  color: #333;
}

#local-seo .seo-note{
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(0,0,0,0.04);
  max-width: 70ch;
}

#local-seo .seo-note p{
  margin: 0;
  line-height: 1.6;
  color: #333;
}

#local-seo .seo-cta-row{
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* Buttons (scoped) */
#local-seo .btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  background: #2F3A34; /* matches your chosen nav tone */
  color: #F2F4F3;
  font-weight: 700;
}
#local-seo .btn-primary:hover{ opacity: 0.92; }

#local-seo .btn-link{
  text-decoration: none;
  font-weight: 700;
  color: #2F3A34;
  border-bottom: 1px solid rgba(47,58,52,0.35);
}
#local-seo .btn-link:hover{ border-bottom-color: rgba(47,58,52,0.7); }

/* Right visual card */
#local-seo .seo-visual{ width: 100%; }

#local-seo .seo-card{
  border-radius: 22px;
  background: #FFFFFF;
  box-shadow: 0 18px 50px rgba(0,0,0,0.10);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
}

#local-seo .seo-card-top{
  padding: 14px 16px 10px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

#local-seo .seo-search{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  opacity: 0.85;
  color: #222;
}

#local-seo .seo-search .dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(0,0,0,0.18);
}

#local-seo .seo-search .query{
  margin-left: 6px;
  font-weight: 700;
}

#local-seo .seo-map{
  height: 160px;
  background:
    radial-gradient(circle at 30% 40%, rgba(126,191,67,0.22), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(47,58,52,0.18), transparent 55%),
    linear-gradient(180deg, rgba(47,58,52,0.06), rgba(0,0,0,0.02));
}

#local-seo .seo-pack{
  padding: 14px 16px 16px 16px;
  display: grid;
  gap: 10px;
}

#local-seo .seo-pack-item{
  border-radius: 16px;
  padding: 12px 12px;
  background: rgba(0,0,0,0.03);
}

#local-seo .seo-pack-item--featured{
  background: rgba(126,191,67,0.10);
  border: 1px solid rgba(126,191,67,0.25);
}

#local-seo .seo-pack-title{
  font-weight: 900;
  margin-bottom: 4px;
  color: #111;
}

#local-seo .seo-pack-meta{
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.92rem;
  opacity: 0.9;
  flex-wrap: wrap;
  color: #222;
}

#local-seo .stars{ letter-spacing: 1px; }
#local-seo .sep{ opacity: 0.6; }

#local-seo .tag{
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(47,58,52,0.12);
  font-weight: 800;
  font-size: 0.8rem;
  color: #111;
}

#local-seo .seo-pack-sub{
  margin-top: 4px;
  font-size: 0.9rem;
  opacity: 0.75;
  color: #333;
}

#local-seo .seo-proof{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

#local-seo .proof-pill{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.05);
  font-weight: 700;
  font-size: 0.9rem;
  color: #111;
}

/* Responsive */
@media (max-width: 900px){
  #local-seo .seo-grid{
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
  }
  #local-seo .seo-map{ height: 140px; }
}


/* --- Local SEO polish: icon alignment + map "pop" --- */

/* Add a modern accent under the H2 */
#local-seo h2{
  position: relative;
}
#local-seo h2::after{
  content:"";
  display:block;
  width: 78px;
  height: 4px;
  border-radius: 999px;
  background: rgba(126,191,67,0.85);
  margin-top: 8px;
}

/* Make bullet rows feel like designed "feature cards" */
#local-seo .seo-bullets li{
  grid-template-columns: 42px 1fr;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

/* Fix emoji centering in the icon chip (emoji baseline can look off) */
#local-seo .seo-ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  font-size: 18px;
  line-height: 1;
  align-self: center;          /* centers the chip in the row */
  display: inline-flex;        /* keep flex centering */
  align-items: center;
  justify-content: center;
  transform: translateY(1px);  /* subtle nudge for emoji baseline */
}

/* Make the "map" area look intentional (no big blank) */
#local-seo .seo-map{
  position: relative;
  overflow: hidden;
  height: 150px;
  background:
    /* parks/areas */
    radial-gradient(circle at 22% 38%, rgba(126,191,67,0.22), transparent 52%),
    radial-gradient(circle at 72% 62%, rgba(126,191,67,0.14), transparent 55%),
    /* roads */
    linear-gradient(115deg, rgba(47,58,52,0.10) 0 2px, transparent 2px 14px),
    linear-gradient(25deg, rgba(47,58,52,0.08) 0 2px, transparent 2px 16px),
    /* base */
    linear-gradient(180deg, rgba(47,58,52,0.06), rgba(0,0,0,0.02));
}

/* subtle map grid texture */
#local-seo .seo-map::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.22;
  pointer-events: none;
}

/* simple "pins" using layered radial gradients */
#local-seo .seo-map::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 55%, rgba(47,58,52,0.0) 0 10px, rgba(47,58,52,0.0) 10px),
    radial-gradient(circle at 30% 55%, rgba(255,255,255,0.95) 0 6px, rgba(255,255,255,0.0) 7px),
    radial-gradient(circle at 30% 55%, rgba(126,191,67,0.95) 0 4px, rgba(126,191,67,0.0) 5px),

    radial-gradient(circle at 62% 42%, rgba(255,255,255,0.95) 0 6px, rgba(255,255,255,0.0) 7px),
    radial-gradient(circle at 62% 42%, rgba(47,58,52,0.75) 0 4px, rgba(47,58,52,0.0) 5px),

    radial-gradient(circle at 78% 70%, rgba(255,255,255,0.95) 0 6px, rgba(255,255,255,0.0) 7px),
    radial-gradient(circle at 78% 70%, rgba(47,58,52,0.55) 0 4px, rgba(47,58,52,0.0) 5px);
  pointer-events: none;
}

/* Responsive tweak */
@media (max-width: 900px){
  #local-seo .seo-map{ height: 140px; }
}




/* --- Local SEO: revert to emoji icons + correct centering (scoped) --- */
#local-seo .seo-ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(126, 191, 67, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

/* Ensure the icon chip column is vertically centered within each bullet row */
#local-seo .seo-bullets li{
  align-items: center;
}
#local-seo .seo-bullets li > div{
  align-self: stretch;
}


/* --- Local SEO layout fix: prevent oversized map image from breaking grid --- */
#local-seo .seo-copy,
#local-seo .seo-visual{
  min-width: 0;
}

#local-seo .seo-card{
  width: 100%;
  max-width: 440px;
  margin-left: auto; /* keeps the proof panel snug on the right */
}

#local-seo .seo-map-img{
  width: 100%;
  height: 150px;
  display: block;
  object-fit: cover;
}

@media (max-width: 900px){
  #local-seo .seo-card{ max-width: 100%; margin-left: 0; }
  #local-seo .seo-map-img{ height: 140px; }
}


#local-seo .seo-ico{
  transform: none;            /* ensure no prior translate overrides */
}


/* --- Local SEO: perfectly centered icons (SVG, scoped) --- */
#local-seo .seo-ico{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(126, 191, 67, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  color: rgba(47,58,52,0.92);
}
#local-seo .seo-ico-svg{
  width: 18px;
  height: 18px;
  display: block;
}

/* subtle per-icon emphasis (optional, still cohesive) */
#local-seo .seo-ico--pin{ color: rgba(126, 191, 67, 1); }
#local-seo .seo-ico--star{ color: rgba(47,58,52,0.88); }
#local-seo .seo-ico--house{ color: rgba(47,58,52,0.88); }
#local-seo .seo-ico--puzzle{ color: rgba(47,58,52,0.78); }


/* --- Local SEO bullets: image media block + text (scoped) --- */
#local-seo .seo-bullets li{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

#local-seo .seo-bullet-media{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(126,191,67,0.14);
  display: grid;
  place-items: center;
  overflow: hidden;
}

#local-seo .seo-bullet-img{
  width: 36px;
  height: 36px;
  display: block;
  object-fit: contain;
}

#local-seo .seo-bullet-text strong{
  display: block;
  font-weight: 800;
  margin-bottom: 2px;
  color: #111;
}

#local-seo .seo-bullet-text span{
  display: block;
  color: #333;
  opacity: 0.9;
  line-height: 1.45;
}


/* --- Mobile tightening: H1 promise card subtitle (prevents excessive wrap/blank feel) --- */
@media (max-width: 820px){
  .H1-Section .h1-promise-sub{
    line-height: 1.35;
    margin-bottom: 10px;
    max-width: 42ch; /* allows a bit more line length so it wraps less */
  }
  .H1-Section .h1-promise-title{
    margin: 8px 0 6px;
  }
}



/* --- v2 tweak: SEO tiles use full-height image strip (no chip centering issues) --- */
#local-seo .seo-bullets li{
  grid-template-columns: 96px 1fr;
  align-items: stretch;
  gap: 14px;
  padding: 14px 16px;
  min-height: 94px;
}

#local-seo .seo-bullet-media{
  width: 100%;
  height: auto;
  align-self: stretch;
  border-radius: 16px;
  background: rgba(126,191,67,0.10);
  overflow: hidden;
  display: block;
}

#local-seo .seo-bullet-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Keep the text vertically centered next to the image strip */
#local-seo .seo-bullet-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Slightly tighter on small screens so copy doesn't feel padded */
@media (max-width: 520px){
  #local-seo .seo-bullets li{
    grid-template-columns: 88px 1fr;
    padding: 12px 14px;
    min-height: 90px;
  }
}


/* =========================================================
   Local SEO "Why this matters" callout — make it pop (2026 UX)
   Scoped to #local-seo to avoid side effects.
========================================================= */
#local-seo .seo-note{
  position: relative;
  margin-top: 18px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72));
  box-shadow: 0 18px 50px rgba(0,0,0,0.10);
}

/* Soft accent glow + top highlight */
#local-seo .seo-note::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 25%, rgba(126,191,67,0.26), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(0,0,0,0.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0));
  pointer-events: none;
}

/* Left accent rail */
#local-seo .seo-note::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, rgba(126,191,67,0.95), rgba(49,49,75,0.95));
  opacity: 0.95;
  pointer-events: none;
}

#local-seo .seo-note-inner{
  position: relative;
  padding: 16px 16px 16px 18px;
}

/* Title gives structure so it reads like a designed component */
#local-seo .seo-note-title{
  margin: 0 0 8px 0;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #111;
}

/* Improve readability + keep the paragraph from feeling “washed out” */
#local-seo .seo-note p{
  margin: 0;
  line-height: 1.65;
  color: rgba(17,17,17,0.86);
  font-size: 1.02rem;
}

/* CTA row: more “designed” spacing */
#local-seo .seo-cta-row{
  margin-top: 20px;
}

/* Primary button: slightly richer depth */
#local-seo .btn-primary{
  box-shadow: 0 12px 26px rgba(0,0,0,0.14);
  border: 1px solid rgba(255,255,255,0.18);
}
#local-seo .btn-primary:focus-visible{
  outline: 3px solid rgba(126,191,67,0.45);
  outline-offset: 3px;
}
#local-seo .btn-link:focus-visible{
  outline: 3px solid rgba(126,191,67,0.35);
  outline-offset: 4px;
  border-bottom-color: transparent;
}

/* Mobile: keep it punchy but not bulky */
@media (max-width: 520px){
  #local-seo .seo-note-inner{
    padding: 14px 14px 14px 16px;
  }
  #local-seo .seo-note-title{
    font-size: 1.0rem;
  }
  #local-seo .seo-note p{
    font-size: 0.98rem;
  }
}



/* =========================================================
   Local SEO layout fix (desktop): full-width intro + full-width note
   Preserves existing 2026 styling; only adjusts layout.
========================================================= */
#local-seo .seo-foot{
  width: 100%;
}

@media (min-width: 900px){
  #local-seo .seo-head{ grid-area: head; }
  #local-seo .seo-left{ grid-area: left; }
  #local-seo .seo-visual{ grid-area: visual; }
  #local-seo .seo-foot{ grid-area: foot; }


  #local-seo .seo-grid{
    align-items: start;
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-areas:
      "head head"
      "left visual"
      "foot foot";
  }

  /* Let these span naturally across the full container width */
  #local-seo .seo-lede{
    max-width: none;
  }
  #local-seo .seo-note{
    max-width: none;
  }
}
/* =========================================================
   Local SEO: "Why this matters" moved into the header area
   + adds a small kicker label for quick scanning.
   (Keeps existing layout, only improves hierarchy.)
========================================================= */
#local-seo .seo-note{
  margin: 16px 0 22px;
}
#local-seo .seo-note-kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(47,58,52,0.88);
  margin-bottom: 10px;
}
#local-seo .seo-note-kicker::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(126,191,67,0.92);
  box-shadow: 0 0 0 4px rgba(126,191,67,0.18);
}


/* =========================
   Local SEO (H2) layout upgrade
   - Headline + lede + "Why this matters" spans full width (desktop)
   - Bullets left / map proof right
   - CTAs full width below
   ========================= */

#local-seo .seo-grid{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "head"
    "left"
    "visual"
    "foot";
  gap: 22px;
  align-items: start;
  text-align: left;
}

#local-seo .seo-head{ grid-area: head; }
#local-seo .seo-left{ grid-area: left; }
#local-seo .seo-visual{ grid-area: visual; }
#local-seo .seo-foot{ grid-area: foot; }

@media (min-width: 900px){
  #local-seo .seo-grid{
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-areas:
      "head head"
      "left visual"
      "foot foot";
    gap: 40px;
    align-items: start;
  }

  /* Let the intro + note breathe across the full container */
  #local-seo .seo-lede{ max-width: none; }
}

/* "Why this matters" callout (substance-first) */
#local-seo .seo-note{
  margin-top: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 14px 36px rgba(0,0,0,0.08);
  overflow: hidden;
  max-width: none; /* allow full-width in header */
}

#local-seo .seo-note-inner{
  position: relative;
  padding: 18px 18px 18px 18px;
}

#local-seo .seo-note-inner:before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, rgba(126,191,67,1), rgba(47,58,52,1));
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}

#local-seo .seo-note-kicker{
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(17,17,17,0.65);
  margin: 0 0 6px 10px;
}

#local-seo .seo-note-title{
  margin: 0 0 8px 10px;
  font-size: 1.2rem;
  line-height: 1.2;
}

#local-seo .seo-note p{
  margin: 0 0 0 10px;
  line-height: 1.65;
  color: #222;
}

/* Keep CTAs visually attached and consistent */
#local-seo .seo-foot .seo-cta-row{ margin-top: 8px; }

/* =========================================================
   Patch: Remove unintended "double-rail" look on the Local SEO note
   (Single accent rail + cleaner glow)
========================================================= */
#local-seo .seo-note{
  padding: 0 !important;           /* avoid legacy padding stacking */
  max-width: none !important;      /* never cap width */
}
#local-seo .seo-note::after{
  width: 5px;                      /* slightly slimmer rail */
}
#local-seo .seo-note::before{
  /* move the green glow away from the far-left edge so it doesn't read as a 2nd rail */
  background:
    radial-gradient(circle at 55% 20%, rgba(126,191,67,0.22), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(0,0,0,0.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0));
}

/* =========================================================
   UX Tweak (Requested): H2 Local SEO section full-bleed background
   - Only changes the SECTION BAND color (not the inner callout/card)
   - Keeps the existing layout/styles intact
========================================================= */
#local-seo.section-band{
  --band-bg: #f5faf6; /* ultra-soft green tint (closer to page bg) */
}


/* =========================================================
   UX Tweak (Requested v2): Make the "Why this matters" callout pop
   on the new soft-green section band.
   - Keeps the left accent rail exactly as-is
   - Only strengthens the card surface + glow contrast
========================================================= */
#local-seo .seo-note{
  /* slightly more opaque + gentle surface gradient so it stands off the band */
  background: linear-gradient(135deg,
    rgba(255,255,255,0.97) 0%,
    rgba(255,255,255,0.93) 58%,
    rgba(248,250,252,0.90) 100%) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,0.10) !important;
}




/* === UX tweak: cleaner callout card on green section band (keeps left rail) === */
#local-seo .seo-note{
  background: linear-gradient(180deg, rgba(151,199,102,0.16) 0%, rgba(255,255,255,0.96) 55%, #ffffff 100%) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06) !important;
}
#local-seo .seo-note::before{
  background:
    radial-gradient(circle at 18% 22%, rgba(126,191,67,0.20), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0));
}
#local-seo .seo-note p{
  color: rgba(17,17,17,0.88) !important;
}

/* === WEB DESIGN SECTION (H2-SECTION-2) === */
/* Scope everything to #web-design so we don't affect other sections. */

#web-design .webdesign-shell {
  max-width: 1100px;
  margin: 0 auto;
}

#web-design .webdesign-header {
  text-align: center;
  margin-bottom: 28px;
}

#web-design .webdesign-kicker {
  font-size: 0.85rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 10px;
}

#web-design .webdesign-lede {
  max-width: 840px;
  margin: 14px auto 0;
  font-size: 1.12rem;
  line-height: 1.55;
  opacity: 0.92;
}

#web-design .webdesign-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 28px;
  align-items: start;
}

/* Visual card — create a focal point (“hero within the section”). */
#web-design .webdesign-visual-card {
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,0.06);
  background:
    radial-gradient(1100px 500px at 20% 10%, rgba(120, 200, 120, 0.20), rgba(255,255,255,0) 55%),
    radial-gradient(900px 460px at 90% 20%, rgba(0,0,0,0.05), rgba(255,255,255,0) 60%),
    rgba(255,255,255,0.72);
  box-shadow: 0 22px 55px rgba(0,0,0,0.10);
  overflow: hidden;
  position: relative;
  /* NOTE: removed sticky behavior to prevent overlap while scrolling on desktop */
}

#web-design .webdesign-visual-top {
  display: flex;
  gap: 10px;
  padding: 14px 16px 10px;
  opacity: 0.55;
}

#web-design .webdesign-visual-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.16);
}

#web-design .webdesign-visual-stage {
  /* Make the hero image fill the card — no padded frame showing */
  padding: 0;
  line-height: 0;
  aspect-ratio: 1200 / 760;
  overflow: hidden;
}

#web-design .webdesign-visual-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  filter: none;
}

#web-design .webdesign-visual-caption {
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
}

#web-design .webdesign-caption-title {
  font-weight: 800;
  letter-spacing: -0.01em;
}

#web-design .webdesign-caption-sub {
  margin-top: 6px;
  opacity: 0.75;
  font-size: 0.95rem;
}

/* Benefits stack — avoid “tile fatigue” by using rows with icons instead of 6 identical cards. */
#web-design .webdesign-content {
  padding-top: 6px;
}

#web-design .webdesign-benefits {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
 text-align: left;
}

#web-design .webdesign-benefit {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.82);
  box-shadow: 0 14px 30px rgba(0,0,0,0.07);
}

#web-design .webdesign-media{
  width: 112px;
  border-radius: 16px;
  background: #eef6ea;
  border: 1px solid rgba(76, 175, 80, .22);
  display: grid;
  place-items: center;
  overflow: hidden;
}
#web-design .webdesign-media img{
  width: 74px;
  height: 74px;
  object-fit: contain;
  display: block;
}

#web-design .webdesign-icon svg {
  width: 22px;
  height: 22px;
}

#web-design .webdesign-benefit-title {
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

#web-design .webdesign-benefit-desc {
  opacity: 0.82;
  line-height: 1.45;
}

/* CTA */
#web-design .webdesign-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
  margin-bottom: 10px;
}

#web-design .webdesign-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid transparent;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
}

#web-design .webdesign-btn-primary {
  background: #1f2d2a;
  color: #fff;
  box-shadow: 0 16px 32px rgba(0,0,0,0.18);
}

#web-design .webdesign-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 38px rgba(0,0,0,0.22);
}

#web-design .webdesign-btn-ghost {
  background: rgba(255,255,255,0.8);
  color: #1f2d2a;
  border-color: rgba(0,0,0,0.10);
}

#web-design .webdesign-btn-ghost:hover {
  transform: translateY(-1px);
  border-color: rgba(0,0,0,0.16);
  box-shadow: 0 14px 26px rgba(0,0,0,0.10);
}

#web-design .webdesign-micro {
  font-size: 0.95rem;
  opacity: 0.72;
  line-height: 1.35;
}

/* Responsive: stack visual above benefits; remove sticky. */
@media (max-width: 980px) {
  #web-design .webdesign-grid {
    grid-template-columns: 1fr;
  }
  #web-design .webdesign-visual-card {
    position: relative;
    top: auto;
  }
}
/* === END WEB DESIGN SECTION === */


/* ========================================================================== 
   Web Design section hotfix (prevents header black overlay / unreadable text)
   - Does NOT change layout; only ensures header remains readable.
   ========================================================================== */
#web-design{
  --band-bg: #ffffff;
}

#web-design .webdesign-header{
  background: transparent !important;
  opacity: 1 !important;
  position: relative;
  z-index: 1;
}

#web-design .webdesign-header::before,
#web-design .webdesign-header::after,
#web-design .webdesign-shell::before,
#web-design .webdesign-shell::after{
  content: none !important;
}

#web-design .webdesign-kicker{ color: #6b6b6b !important; }
#web-design h2{ color: #0b0b0b !important; }
#web-design .webdesign-lede{ color: #2a2a2a !important; }
.webdesign-left-col{
  display: grid;
  gap: 16px;
  align-content: start;
}

.webdesign-proof-card{
  background: linear-gradient(180deg, rgba(151,199,102,0.16) 0%, rgba(255,255,255,0.96) 55%, #ffffff 100%);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  padding: 18px 18px 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

.webdesign-proof-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #3c3c3c;
  margin-bottom: 8px;
  opacity: .9;
}
.webdesign-proof-kicker:before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #8bc34a;
  box-shadow: 0 0 0 4px rgba(139,195,74,.18);
}

.webdesign-proof-title{
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.2;
}

.webdesign-proof-list{
  margin: 0 0 14px;
  padding-left: 18px;
  color: #2f2f2f;
}
.webdesign-proof-list li{
  margin: 6px 0;
  line-height: 1.35;
}

/* --- Web Design section: WHAT YOU GET card list styling (restore aligned green-dot bullets) --- */
.webdesign-proof-list{
  list-style: none;
  padding: 0;
  margin: 14px auto 16px;
  max-width: 520px;
  display: grid;
  gap: 12px;
  text-align: left;
  color: #333;
}
.webdesign-proof-list li{
  margin: 0;
  display: grid;
  grid-template-columns: 14px 1fr;
  column-gap: 12px;
  align-items: start;
  line-height: 1.55;
  font-size: 1.02rem;
}
.webdesign-proof-list li::before{
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #8fd15a;
  box-shadow: 0 0 0 5px rgba(143, 209, 90, 0.25);
  margin-top: 6px;
}
.webdesign-proof-list li strong{
  font-weight: 800;
}
@media (max-width: 520px){
  .webdesign-proof-list{ max-width: 100%; }
  .webdesign-proof-list li{ column-gap: 10px; }
}

.webdesign-proof-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: #2f2f2f;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}
.webdesign-proof-cta:hover{ filter: brightness(1.05); }




/* Web Design section responsive tweaks */
@media (max-width: 768px){
  #web-design .webdesign-grid{
    grid-template-columns: 1fr;
  }
  #web-design .webdesign-benefit{
    grid-template-columns: 96px 1fr;
    gap: 14px;
    padding: 16px;
  }
  #web-design .webdesign-media{
    width: 100%;
    border-radius: 16px;
  }
  #web-design .webdesign-media img{
    width: 100%;
    height: 100%;
  }
}



/* =======================================================================
   WEB DESIGN SECTION (id="web-design") — targeted fixes (no other sections)
   Goals:
   1) Make the left image block inside benefit tiles span the full tile height on desktop (match SEO tiles)
   2) Restore "WHAT YOU GET" bullet list alignment (no overly-narrow wrapping / weird indents)
   ======================================================================= */

#web-design .webdesign-benefit-card{
  align-items: stretch; /* ensure both grid columns stretch to the same height */
}

#web-design .webdesign-media{
  /* Match the SEO tile treatment: media column becomes a full-height visual rail */
  align-self: stretch;
  height: 100%;
  padding: 0;               /* remove inner whitespace so image fills the rail */
  overflow: hidden;
  display: block;           /* avoid grid centering that can create empty space */
  background: #eaf7e6;      /* keep the soft green rail */
}

#web-design .webdesign-media img{
  display: block;           /* removes baseline gaps */
  width: 100%;
  height: 100%;
  object-fit: cover;        /* fill the rail cleanly */
}

/* "WHAT YOU GET" list — allow text to use full card width and keep bullet alignment consistent */
#web-design .webdesign-proof-list{
  max-width: none;          /* was causing narrow wrapping + large blank areas */
  width: 100%;
  margin: 14px 0 16px;      /* keep spacing but don’t center-constrain the list */
}

#web-design .webdesign-proof-list li{
  /* Use an explicit dot + copy wrapper so grid auto-placement never drops
     the trailing text into the tiny left column (which caused 1-word-per-line wraps). */
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 14px;
  align-items: start;
  text-align: left;
}

/* Disable the earlier pseudo-bullet for this list (we render the dot in HTML for reliability). */
#web-design .webdesign-proof-list li::before{ content: none !important; }

#web-design .webdesign-proof-list .dot{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #9ad34a;
  box-shadow: 0 0 0 5px rgba(154,211,74,0.20);
  margin-top: 6px; /* align with first line of text */
}

#web-design .webdesign-proof-copy{ min-width: 0; }
#web-design .webdesign-proof-copy strong{ display:block; }
#web-design .webdesign-proof-copy span{ display:block; margin-top: 2px; }

/* On very small screens, slightly tighten spacing without changing layout */
@media (max-width: 520px){
  #web-design .webdesign-media{ border-radius: 16px; }
}

/* ========================================================================== */
/* SOCIAL MEDIA SECTION (H3-Section-1)                                         */
/* Only styles scoped under #social-media to avoid impacting other sections.   */
/* ========================================================================== */

#social-media .sm-head{
  text-align:center;
  max-width: 860px;
  margin: 0 auto 28px;
}

#social-media .sm-eyebrow{
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: rgba(0,0,0,.55);
  margin-bottom: 10px;
}

#social-media h3{
  margin: 0 0 10px;
}

#social-media .sm-lead{
  margin: 0 auto;
  line-height: 1.55;
  color: rgba(0,0,0,.72);
  font-size: 1.06rem;
}

#social-media .sm-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 26px;
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
}

/* --- Left column (phone/feed preview) --- */
#social-media .sm-phone{
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.70);
  box-shadow: 0 18px 50px rgba(0,0,0,.07);
}

#social-media .sm-phone-top{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 12px 14px;
  background: linear-gradient(90deg, rgba(160,206,120,.25), rgba(255,255,255,.65));
  border-bottom: 1px solid rgba(0,0,0,.06);
}

#social-media .sm-phone-top .dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(0,0,0,.12);
}

#social-media .sm-phone-title{
  margin-left: 6px;
  font-weight: 700;
  font-size: .92rem;
  color: rgba(0,0,0,.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#social-media .sm-feed{
  padding: 14px;
  display:flex;
  flex-direction: column;
  gap: 12px;
}

#social-media .sm-post{
  display:flex;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
}

#social-media .sm-avatar{
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.03));
  flex: 0 0 auto;
}

#social-media .sm-avatar.accent{
  background: linear-gradient(180deg, rgba(139,200,90,.55), rgba(139,200,90,.18));
}

#social-media .sm-post-body{ flex: 1; min-width: 0; }

#social-media .sm-post-line{
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  margin-bottom: 8px;
}

#social-media .sm-post-line.w70{ width: 70%; }
#social-media .sm-post-line.w85{ width: 85%; }
#social-media .sm-post-line.w90{ width: 90%; }
#social-media .sm-post-line.w95{ width: 95%; }
#social-media .sm-post-line.w65{ width: 65%; }
#social-media .sm-post-line.w80{ width: 80%; }

#social-media .sm-post-chiprow{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

#social-media .sm-chip{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .78rem;
  color: rgba(0,0,0,.70);
  background: rgba(0,0,0,.05);
}

#social-media .sm-chip.accent{
  background: rgba(139,200,90,.22);
  color: rgba(0,0,0,.75);
}

#social-media .sm-post-media{
  height: 74px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(139,200,90,.20), rgba(0,0,0,.04));
  border: 1px solid rgba(0,0,0,.06);
  margin-top: 8px;
}

#social-media .sm-post-actions{
  display:flex;
  gap: 10px;
  margin-top: 8px;
}

#social-media .sm-post-actions span{
  width: 32px; height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.07);
}

#social-media .sm-phone-bottom{
  display:flex;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.75);
}

#social-media .sm-phone-bottom span{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(0,0,0,.12);
}

#social-media .sm-phone-bottom span.active{
  background: rgba(139,200,90,.75);
}

#social-media .sm-left-note{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
  color: rgba(0,0,0,.70);
  line-height: 1.45;
}

/* --- Right column (callout + deliverables) --- */
#social-media .sm-callout{
  border-radius: 22px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 40px rgba(0,0,0,.05);
  padding: 18px 18px 16px;
}

#social-media .sm-callout-eyebrow{
  display:flex;
  align-items:center;
  gap: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .78rem;
  color: rgba(0,0,0,.55);
  margin-bottom: 10px;
}

#social-media .sm-dot{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(139,200,90,.38);
  border: 2px solid rgba(139,200,90,.65);
}

#social-media .sm-callout h4{
  margin: 0 0 10px;
  font-size: 1.20rem;
}

#social-media .sm-bullets{
  margin: 0;
  padding: 0 0 0 18px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  color: rgba(0,0,0,.72);
}

#social-media .sm-bullets li{
  line-height: 1.45;
}

#social-media .sm-callout-foot{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.08);
  color: rgba(0,0,0,.62);
  font-size: .98rem;
}

/* Deliverable mini tiles (subtle visual variety without adding external images) */
#social-media .sm-mini-grid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

#social-media .sm-mini{
  display:flex;
  gap: 14px;
  padding: 14px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
}

#social-media .sm-mini-media{
  width: 76px;
  height: 76px;
  border-radius: 18px;
  flex: 0 0 auto;
  background: linear-gradient(135deg, rgba(139,200,90,.18), rgba(0,0,0,.04));
  border: 1px solid rgba(139,200,90,.24);
}

#social-media .sm-mini-media.alt{
  background: linear-gradient(135deg, rgba(0,0,0,.05), rgba(139,200,90,.18));
}

#social-media .sm-mini-title{
  font-weight: 800;
  margin-bottom: 4px;
}

#social-media .sm-mini-text{
  color: rgba(0,0,0,.66);
  line-height: 1.40;
}

#social-media .sm-examples-foot{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.08);
  opacity: .8;
  line-height: 1.45;
  text-align: center;
}

#social-media .sm-cta-row{
  display:flex;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* Respect existing .btn styles if present; only add small guardrails */
#social-media .sm-cta-row .btn{
  text-decoration: none;
}

@media (max-width: 980px){
  #social-media .sm-grid{
    grid-template-columns: 1fr;
  }
  #social-media .sm-left{
    order: 2;
  }
  #social-media .sm-right{
    order: 1;
  }
}

@media (max-width: 520px){
  #social-media .sm-head{ margin-bottom: 22px; }
  #social-media .sm-lead{ font-size: 1.02rem; }
}

/* ================================
   SOCIAL MEDIA SECTION (scoped)
   Only affects #social-media
   ================================ */
#social-media .sm-head{
  max-width: 980px;
  margin: 0 auto 28px;
  text-align: center;
}

#social-media .sm-eyebrow{
  letter-spacing: .22em;
  font-size: 12px;
  opacity: .65;
  margin-bottom: 10px;
}

#social-media .sm-lead{
  margin: 14px auto 0;
  max-width: 900px;
  line-height: 1.55;
}

#social-media .sm-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}

#social-media .sm-benefits{
  background: linear-gradient(180deg, rgba(151,199,102,0.16) 0%, rgba(255,255,255,0.96) 55%, #ffffff 100%);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  padding: 18px 18px 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

#social-media .sm-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.60);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .22em;
  opacity: .8;
  margin-bottom: 14px;
}

#social-media .sm-pill-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #9ED36A;
  box-shadow: 0 0 0 6px rgba(158, 211, 106, .25);
}

#social-media .sm-benefits-title{
  font-size: 1.15rem; font-weight: 800; 
  line-height: 1.15;
  margin: 0 0 10px;
}

#social-media .sm-benefits-sub{
  margin: 0 0 16px;
  opacity: .85;
  line-height: 1.5;
}

#social-media .sm-checklist{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  align-self: stretch;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

#social-media .sm-checklist li{
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  line-height: 1.45;
  text-align: left;
  justify-items: start;
}

/* Prevent ultra-narrow text wrapping in the Social Media "What you get" list */
#social-media .sm-li-text{ min-width: 0; }
#social-media .sm-li-text > span{ display:block; margin-top: 6px; }

#social-media .sm-check{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(158, 211, 106, .30);
  border: 1px solid rgba(158, 211, 106, .65);
  margin-top: 3px;
  position: relative;
}

#social-media .sm-check::after{
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: #9ED36A;
}

#social-media .sm-benefits-foot{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.08);
  opacity: .8;
  line-height: 1.45;
}

#social-media .sm-examples{
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,.06);
  min-width: 0; /* critical for preventing overflow in grid */
}

#social-media .sm-examples-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 2px 12px;
}

#social-media .sm-examples-head h4{
  margin: 0;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .7;
}


#social-media .sm-examples-head p{
  margin: 0;
  opacity: .92;
  font-size: 16px;
  font-weight: 800;
  text-align: right;
  line-height: 1.2;
}


#social-media .sm-carousel{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.07);
}

#social-media .sm-viewport{
  width: 100%;
  aspect-ratio: 3 / 2; /* 1536×1024 */
  overflow: hidden;
  touch-action: pan-y;
  background: #fff;
}

#social-media .sm-track{
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform .35s ease;
  will-change: transform;
}

#social-media .sm-slide{
  flex: 0 0 100%;
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

#social-media .sm-slide img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* no cropping */
  display: block;
}

#social-media .sm-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.85);
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

#social-media .sm-prev{ left: 12px; }
#social-media .sm-next{ right: 12px; }

#social-media .sm-arrow:hover{ background: rgba(255,255,255,.95); }

#social-media .sm-dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 10px 10px;
  background: rgba(255,255,255,.85);
}

#social-media .sm-dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(0,0,0,.10);
  cursor: pointer;
}

#social-media .sm-dot.is-active{
  background: #9ED36A;
  border-color: rgba(158, 211, 106, .75);
}

#social-media .sm-caption{
  font-size: 13px;
  text-align: center;
  padding: 10px 12px 14px;
  opacity: .8;
  background: rgba(255,255,255,.85);
}

#social-media .sm-examples-foot{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.08);
  opacity: .8;
  line-height: 1.45;
  text-align: center;
}

#social-media .sm-cta-row{
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 900px){
  #social-media .sm-layout{
    grid-template-columns: 1fr;
  }
  #social-media .sm-examples-head{
    flex-direction: column;
    align-items: flex-start;
  }
  #social-media .sm-examples-head p{
  margin: 0;
  opacity: .92;
  font-size: 16px;
  font-weight: 800;
  text-align: right;
  line-height: 1.2;
}

  #social-media .sm-arrow{
    width: 40px;
    height: 40px;
  }
  #social-media .sm-prev{ left: 10px; }
  #social-media .sm-next{ right: 10px; }
}

@media (max-width: 520px){
  #social-media .sm-examples{
    padding: 14px;
  }
  #social-media .sm-benefits{
    padding: 18px 16px 14px;
  }
  #social-media .sm-viewport{
    aspect-ratio: 3 / 2;
  }
}

/* =========================
   AI Services section ONLY
   Scoped to #ai-services to avoid impacting other sections
   ========================= */
#ai-services .ai-head{max-width: 860px; margin: 0 auto 18px; text-align: center;}
#ai-services .ai-eyebrow{
  display: inline-block;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  margin-bottom: 8px;
}
#ai-services .ai-lead{max-width: 860px; margin: 0 auto; line-height: 1.7; color: rgba(0,0,0,.78);}
#ai-services .ai-layout{
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: 18px;
  max-width: 1100px;
  margin: 18px auto 0;
  align-items: start;
}

#ai-services .ai-left-col{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* AI visual card (copy of Web Design visual card, isolated so edits won't affect Web Design) */
#ai-services .ai-visual-card{
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,0.06);
  background:
    radial-gradient(1100px 500px at 20% 10%, rgba(120, 200, 120, 0.20), rgba(255,255,255,0) 55%),
    radial-gradient(900px 460px at 90% 20%, rgba(0,0,0,0.05), rgba(255,255,255,0) 60%),
    rgba(255,255,255,0.72);
  box-shadow: 0 22px 55px rgba(0,0,0,0.10);
  overflow: hidden;
  position: relative;
}

#ai-services .ai-visual-top{
  display: flex;
  gap: 10px;
  padding: 14px 16px 10px;
  opacity: 0.55;
}
#ai-services .ai-visual-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.16);
}

#ai-services .ai-visual-stage{
  padding: 0;
  line-height: 0;
  aspect-ratio: 1200 / 760;
  overflow: hidden;
}
#ai-services .ai-visual-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  filter: none;
}

#ai-services .ai-visual-caption{
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
}
#ai-services .ai-caption-title{font-weight: 800; letter-spacing: -0.01em;}
#ai-services .ai-caption-sub{margin-top: 6px; opacity: 0.75; font-size: 0.95rem;}


#ai-services .ai-benefits{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  padding: 22px 22px 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,.06);
  text-align: left;
}

#ai-services .ai-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(151,199,102,0.14);
  border: 1px solid rgba(0,0,0,.06);
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(0,0,0,.62);
}
#ai-services .ai-dot{
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(151,199,102,0.8);
  box-shadow: 0 0 0 6px rgba(151,199,102,0.18);
}
#ai-services .ai-benefits h4{
  margin: 14px 0 8px;
  font-size: 34px;
  line-height: 1.15;
}
#ai-services .ai-sub{margin: 0 0 14px; color: rgba(0,0,0,.70); line-height: 1.65;}

#ai-services .ai-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
#ai-services .ai-list li{
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
}
#ai-services .ai-list li::before{
  content: "";
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(151,199,102,0.75);
  box-shadow: 0 0 0 6px rgba(151,199,102,0.18);
  margin-top: 4px;
}
#ai-services .ai-list strong{font-size: 18px;}
#ai-services .ai-list span{color: rgba(0,0,0,.72); line-height: 1.55;}

#ai-services .ai-cards{display: grid; gap: 14px;}
#ai-services .ai-card{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  padding: 18px 18px 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  text-align: left;
}
#ai-services .ai-card--primary{
  background: linear-gradient(180deg, rgba(151,199,102,0.14) 0%, rgba(255,255,255,0.96) 55%, #ffffff 100%);
}
#ai-services .ai-card h4{margin: 0 0 8px; font-size: 22px;}
#ai-services .ai-card p{margin: 0 0 12px; color: rgba(0,0,0,.72); line-height: 1.65;}

/* AI Services: stacked image tiles (scoped) */
#ai-services .ai-right-col{
  display: flex;
  flex-direction: column;
}

#ai-services .ai-feature-tiles{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

#ai-services .ai-feature-tiles li{
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 14px;
  align-items: center;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(241,250,241,.88));
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
  min-width: 0;
}

#ai-services .ai-feature-media{
  width: 108px;
  height: 100%;
  min-height: 92px;
  background:
    radial-gradient(220px 120px at 25% 20%, rgba(151,199,102,0.18), rgba(255,255,255,0) 60%),
    rgba(255,255,255,0.60);
  border-right: 1px solid rgba(0,0,0,.05);
}

#ai-services .ai-feature-media img{
  width: 100%;
  height: 100%;
  min-height: 92px;
  display: block;
  object-fit: cover;
}

#ai-services .ai-feature-text{
  padding: 14px 16px 14px 0;
  min-width: 0;
  text-align: left;
}

#ai-services .ai-feature-text strong{
  display: block;
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 4px;
  letter-spacing: .1px;
  color: #111;
}

#ai-services .ai-feature-text span{
  display: block;
  color: rgba(0,0,0,.72);
  line-height: 1.45;
  text-align: left;
}

@media (max-width: 900px){
  #ai-services .ai-feature-tiles li{
    grid-template-columns: 96px 1fr;
  }
  #ai-services .ai-feature-media{width: 96px;}
  #ai-services .ai-feature-media img{min-height: 86px;}

  #ai-services .ai-feature-text strong{font-size: 15px;}
  #ai-services .ai-feature-text span{font-size: 14px;}
}

#ai-services .ai-mini{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

#ai-services .ai-mini-item{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#ai-services .ai-mini-media{
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background:
    radial-gradient(120px 70px at 15% 25%, rgba(151,199,102,.22), rgba(255,255,255,0) 65%),
    radial-gradient(120px 70px at 90% 20%, rgba(0,0,0,.06), rgba(255,255,255,0) 70%),
    rgba(255,255,255,.55);
}

#ai-services .ai-mini-icon{
  width: 30px;
  height: 30px;
  color: rgba(0,0,0,.74);
}

#ai-services .ai-mini-meta{
  padding: 10px 10px 11px;
  display: grid;
  gap: 4px;
  min-width: 0;
}

#ai-services .ai-mini-title{
  font-weight: 800;
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ai-services .ai-mini-sub{
  font-size: 13px;
  color: rgba(0,0,0,.68);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}

/* subtle per-tile accent (optional) */
#ai-services .ai-mini-item--content .ai-mini-media{
  background:
    radial-gradient(140px 70px at 15% 25%, rgba(151,199,102,.32), rgba(255,255,255,0) 70%),
    radial-gradient(120px 70px at 90% 20%, rgba(0,0,0,.05), rgba(255,255,255,0) 70%),
    rgba(255,255,255,.55);
}
#ai-services .ai-mini-item--reviews .ai-mini-media{
  background:
    radial-gradient(140px 70px at 15% 25%, rgba(255,206,80,.30), rgba(255,255,255,0) 70%),
    radial-gradient(120px 70px at 90% 20%, rgba(0,0,0,.05), rgba(255,255,255,0) 70%),
    rgba(255,255,255,.55);
}
#ai-services .ai-mini-item--workflows .ai-mini-media{
  background:
    radial-gradient(140px 70px at 15% 25%, rgba(120,170,255,.26), rgba(255,255,255,0) 70%),
    radial-gradient(120px 70px at 90% 20%, rgba(0,0,0,.05), rgba(255,255,255,0) 70%),
    rgba(255,255,255,.55);
}

#ai-services .ai-steps{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
}
#ai-services .ai-steps li{color: rgba(0,0,0,.74); line-height: 1.55;}
#ai-services .ai-steps strong{font-size: 15px;}
#ai-services .ai-steps span{display:block; color: rgba(0,0,0,.70);}

#ai-services .ai-card--placeholder{
  background: rgba(255,255,255,.85);
  border-style: dashed;
}
#ai-services .ai-muted{margin: 0; color: rgba(0,0,0,.62);}

@media (max-width: 900px){
  #ai-services .ai-layout{grid-template-columns: 1fr; gap: 14px;}
  #ai-services .ai-benefits h4{font-size: 30px;}
  #ai-services .ai-mini{grid-template-columns: 1fr; }
}




/* =========================================================
   AI Services: ai-benefits mirrors tc-benefits
   - Scoped to #ai-services
   - Independent class names (ai-*) so you can tweak without affecting tc-*
========================================================= */

#ai-services .ai-benefits{
  background: linear-gradient(180deg, rgba(151,199,102,0.14) 0%, rgba(255,255,255,0.94) 56%, #ffffff 100%);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  padding: 22px 22px 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  text-align: left;
}

#ai-services .ai-benefits .ai-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.06);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .78rem;
  color: rgba(0,0,0,.55);
  margin-bottom: 14px;
}

#ai-services .ai-pill-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(151,199,102,.55);
  box-shadow: 0 0 0 4px rgba(151,199,102,.20);
}

#ai-services .ai-benefits .ai-benefits-title{
  margin: 14px 0 8px;
  font-size: clamp(1.4rem, 2.3vw, 2rem);
  line-height: 1.12;
}

#ai-services .ai-benefits-sub{
  margin: 0 0 14px;
  color: rgba(0,0,0,.65);
  line-height: 1.5;
}

/* checklist mirrors tc-checklist */
#ai-services .ai-checklist{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
  align-self: stretch;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

#ai-services .ai-checklist li{
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  line-height: 1.45;
  text-align: left;
  justify-items: start;
}

/* prevent ultra-narrow text wrapping */
#ai-services .ai-li-text{ min-width: 0; }
#ai-services .ai-li-text > span{ display:block; margin-top: 6px; }

#ai-services .ai-check{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(158, 211, 106, .30);
  border: 1px solid rgba(158, 211, 106, .65);
  margin-top: 3px;
  position: relative;
}

#ai-services .ai-check::after{
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: #9ED36A;
}

#ai-services .ai-benefits-foot{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.08);
  opacity: .8;
  line-height: 1.45;
}

@media (max-width: 900px){
  #ai-services .ai-benefits .ai-benefits-title{ font-size: clamp(1.25rem, 6vw, 1.9rem); }
}
/* =========================
   Technology Consulting (section-specific)
   ========================= */
#tech-consulting .tc-eyebrow{
  font-size: 0.85rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.7;
  text-align: center;
  margin-bottom: 10px;
}

#tech-consulting .tc-wrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: start;
  margin-top: 18px;
}

#tech-consulting .tc-left,
#tech-consulting .tc-right{
  min-width: 0;
}

#tech-consulting .tc-benefits{
  background: linear-gradient(180deg, rgba(151,199,102,0.14) 0%, rgba(255,255,255,0.94) 56%, #ffffff 100%);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  padding: 22px 22px 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

#tech-consulting .tc-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.06);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .78rem;
  color: rgba(0,0,0,.55);
}

#tech-consulting .tc-pill-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(151,199,102,.55);
  box-shadow: 0 0 0 4px rgba(151,199,102,.20);
}

#tech-consulting .tc-title{
  margin: 14px 0 8px;
  font-size: clamp(1.4rem, 2.3vw, 2rem);
  line-height: 1.12;
}

#tech-consulting .tc-sub{
  margin: 0 0 14px;
  color: rgba(0,0,0,.65);
}

#tech-consulting .tc-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

#tech-consulting .tc-list li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.4;
}
#tech-consulting .tc-bullet{
  flex: 0 0 22px;
  margin-top: 2px;
}


#tech-consulting .tc-bullet{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(151,199,102,.52);
  box-shadow: 0 0 0 4px rgba(151,199,102,.18);
  margin-top: 4px;
}

#tech-consulting .tc-note{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px dashed rgba(0,0,0,.12);
  background: rgba(255,255,255,.65);
  color: rgba(0,0,0,.65);
  display: flex;
  align-items: center;
  gap: 12px;
}

#tech-consulting .tc-note-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(151,199,102,.55);
  box-shadow: 0 0 0 4px rgba(151,199,102,.16);
  flex: 0 0 auto;
}

#tech-consulting .tc-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

#tech-consulting .tc-card{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 14px 14px 12px;
}

#tech-consulting .tc-card-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

#tech-consulting .tc-icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(151,199,102,.16);
  border: 1px solid rgba(0,0,0,.06);
  font-size: 18px;
}

#tech-consulting .tc-card h5{
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.1;
}

#tech-consulting .tc-card p{
  margin: 0;
  color: rgba(0,0,0,.65);
  line-height: 1.35;
}

/* Responsive */
@media (max-width: 900px){
  #tech-consulting .tc-wrap{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  #tech-consulting .tc-grid{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Technology Consulting: tc-benefits mirrors sm-benefits
   - Scoped to #tech-consulting
   - Independent class names (tc-*) so you can tweak without affecting sm-*
========================================================= */

#tech-consulting .tc-benefits{
  background: linear-gradient(180deg, rgba(151,199,102,0.16) 0%, rgba(255,255,255,0.96) 55%, #ffffff 100%);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  padding: 18px 18px 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

#tech-consulting .tc-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.60);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .22em;
  opacity: .8;
  margin-bottom: 14px;
}

#tech-consulting .tc-pill-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #9ED36A;
  box-shadow: 0 0 0 6px rgba(158, 211, 106, .25);
}

#tech-consulting .tc-benefits-title{
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
  margin: 0 0 10px;
}

#tech-consulting .tc-benefits-sub{
  margin: 0 0 16px;
  opacity: .85;
  line-height: 1.5;
}

/* checklist mirrors sm-checklist */
#tech-consulting .tc-checklist{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  align-self: stretch;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

#tech-consulting .tc-checklist li{
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  line-height: 1.45;
  text-align: left;
  justify-items: start;
}

/* prevent ultra-narrow text wrapping */
#tech-consulting .tc-li-text{ min-width: 0; }
#tech-consulting .tc-li-text > span{ display:block; margin-top: 6px; }

#tech-consulting .tc-check{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(158, 211, 106, .30);
  border: 1px solid rgba(158, 211, 106, .65);
  margin-top: 3px;
  position: relative;
}

#tech-consulting .tc-check::after{
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: #9ED36A;
}

#tech-consulting .tc-benefits-foot{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.08);
  opacity: .8;
  line-height: 1.45;
}


/* =========================================================
   SOCIAL MEDIA: Examples card top + bottom polish (scoped)
   - Only affects #social-media .sm-examples head + CTA row
   ========================================================= */
#social-media .sm-examples-head{
  background: linear-gradient(135deg, rgba(49,49,75,0.10), rgba(126,191,67,0.10));
  border: 1px solid rgba(49,49,75,0.14);
  border-radius: 16px;
  padding: 12px 14px;
  margin: 0 0 12px 0;
  box-shadow: 0 10px 24px rgba(0,0,0,0.05);
}

#social-media .sm-examples-head h4{
  margin: 0;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .7;
}


#social-media .sm-examples-head h4::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(126,191,67,0.95);
  box-shadow: 0 0 0 6px rgba(126,191,67,0.18);
}

#social-media .sm-examples-head p{
  margin: 0;
  opacity: .92;
  font-size: 16px;
  font-weight: 800;
  text-align: right;
  line-height: 1.2;
}


@media (max-width: 520px){
  #social-media .sm-examples-head{
    flex-direction: column;
    align-items: flex-start;
  }
  #social-media .sm-examples-head p{
  margin: 0;
  opacity: .92;
  font-size: 16px;
  font-weight: 800;
  text-align: right;
  line-height: 1.2;
}

}

/* Buttons: style the two links under the carousel (scoped) */
#social-media .sm-cta-row .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}

#social-media .sm-cta-row .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}

#social-media .sm-cta-row .btn:active{
  transform: translateY(0px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.10);
}

#social-media .sm-cta-row .btn-dark{
  background: #31314b;
  color: #FFFFFF;
}

#social-media .sm-cta-row .btn-dark:hover{
  opacity: 0.92;
}

#social-media .sm-cta-row .btn-ghost{
  background: rgba(255,255,255,0.45);
  color: #31314b;
  border-color: rgba(49,49,75,0.28);
}

#social-media .sm-cta-row .btn-ghost:hover{
  background: rgba(49,49,75,0.06);
  border-color: rgba(49,49,75,0.40);
}


/* ===== H1 SEO AUDIT IMAGE CTA ===== */

.h1-audit-cta{
  width:100%;
  margin-top:14px;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}

.h1-audit-image{
  width:100%;
  height:auto;
  display:block;
  max-height:300px;
  object-fit:contain;
  border-radius: 14px;
}

/* ===== H1 SEO AUDIT IMAGE CTA (isolated) ===== */
.h1-audit-cta{
  width:100%;
  margin-top:14px;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}

.h1-audit-image{
  width:100%;
  height:auto;
  display:block;
  max-height:300px;
  object-fit:contain;
  border-radius:14px;
  /* inset integration so image feels embedded */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.35),
    inset 0 -18px 30px rgba(0,0,0,.08);
}

/* ===== Company Tagline (new isolated class) ===== */
.company-tagline{
  margin: 10px 0 12px;
  text-align: center;
  font-weight: 800;
  font-size: clamp(18px, 1.8vw, 28px);
  line-height: 1.18;
  letter-spacing: .2px;
  /* make it feel distinct from body copy */
  font-style: italic;
  text-wrap: balance;
}

/* two-tone emphasis */
.company-tagline-part1{
  color: #444240;
}

.company-tagline-part2{
  color: #7FB734;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
/* subtle modern accent underline (keeps it “styled” without looking gimmicky) */


/* === Social Media section polish: compact Examples header + balanced card (scoped to #social-media only) === */
#social-media .sm-examples{
  display: flex;
  flex-direction: column;
}

#social-media .sm-examples-head{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 2px 2px 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden; /* prevents indicator glow artifacts */
}

#social-media .sm-examples-title{
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#social-media .sm-examples-title::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(126,191,67,0.95);
  box-shadow: 0 0 0 6px rgba(126,191,67,0.18);
  flex: 0 0 auto;
}

/* Keep the Examples button visually grounded at the bottom of the card */
#social-media .sm-cta-row{
  margin-top: auto;
}



/* ===== Social Media section polish: compact examples header + balanced CTAs (scoped) ===== */
#social-media .sm-examples{
  display: flex;
  flex-direction: column;
}

#social-media .sm-benefits{
  display: flex;
  flex-direction: column;
}

/* Remove legacy pseudo-dot that could bleed into the header area */
#social-media .sm-examples-title::before,
#social-media .sm-examples-head h4::before{
  content: none !important;
  display: none !important;
}

/* Compact, centered header that uses the full width (no wasted space) */
#social-media .sm-examples-head{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 2px 2px 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.04);
  overflow: hidden; /* prevents any decorative elements from bleeding */
}

#social-media .sm-examples-title{
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

/* green dot used in the Examples header */
#social-media .sm-examples-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(126,191,67,0.95);
  box-shadow: 0 0 0 6px rgba(126,191,67,0.18);
  flex: 0 0 auto;
}

/* Make the benefits CTA sit at the bottom to feel like the final step */
#social-media .sm-cta-row--benefits{
  margin-top: auto;
  padding-top: 14px;
}
@media (max-width: 520px){
  #social-media .sm-examples-title{ white-space: normal; }
}


/* =========================================================
   AI Services: image tiles (replaces text mini-tiles)
   Scoped to #ai-services only (Rule #1 safe)
========================================================= */

#ai-services .ai-mini.ai-mini--images{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}

#ai-services .ai-mini-imgtile{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#ai-services .ai-mini-imgmedia{
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(140px 80px at 15% 25%, rgba(151,199,102,.22), rgba(255,255,255,0) 70%),
    rgba(255,255,255,.55);
  overflow: hidden;
}

#ai-services .ai-mini-imgmedia img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#ai-services .ai-mini-imgbody{
  padding: 10px 12px 12px;
  display: grid;
  gap: 4px;
  min-width: 0;
}

#ai-services .ai-mini-imgtitle{
  font-weight: 800;
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ai-services .ai-mini-imgsub{
  font-size: 13px;
  color: rgba(0,0,0,.68);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px){
  #ai-services .ai-mini-imgmedia{ aspect-ratio: 16 / 9; }
  #ai-services .ai-mini-imgbody{ padding: 10px 12px 12px; }
}

/* =========================================================
   ABOUT PAGE ONLY: Expectations section layout fix
   Goal: Make the "Core Values" tiles span full width by
   converting the inherited 2-column seo-grid to 1-column.
   (Scoped to About page via #local-seo.about-expectations)
========================================================= */
#local-seo.about-expectations .seo-grid.about-expectations-grid{
  grid-template-columns: 1fr;
  align-items: start;
  gap: 26px;
}

/* Keep copy area full width (defensive; no impact elsewhere) */
#local-seo.about-expectations .seo-copy{
  width: 100%;
}


/* =========================================================
   ABOUT PAGE ONLY: H1 intro text readability polish
   - Scoped to .about-h1 so it cannot affect the home page
   - No existing selectors modified; this is appended only
========================================================= */
.about-h1 .intro-text{
  max-width: 720px;
  margin: 0 auto 1.6rem auto;
  padding: 16px 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(0,0,0,0.06);
  text-align: left;
  font-size: 1.05rem;
  line-height: 1.75;
  color: #333;
}

/* Slightly tighter spacing between lines/blocks without changing copy */
.about-h1 .intro-text p{
  margin: 0;
}

/* Improve rag/line breaks on modern browsers */
.about-h1 .intro-text{
  text-wrap: pretty;
}

@media (max-width: 768px){
  .about-h1 .intro-text{
    max-width: 900px; /* let it breathe on mobile */
    padding: 14px 14px;
    font-size: 1rem;
    line-height: 1.7;
    text-align: left;
  }
}

@media (min-width: 980px){
  .about-h1 .intro-text{
    max-width: 760px;
    padding: 18px 22px;
  }
}


/* =========================================================
   FAQ / Blog List Styling (wrapper-only; does not change UL/LI structure)
   ========================================================= */
.faq-list-wrap{
  margin: 18px auto 0;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.faq-list-wrap ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.faq-list-wrap li{
  position: relative;
  padding: 16px 16px 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.faq-list-wrap li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(76,175,80,0.85), rgba(34,139,34,0.55));
  opacity: 0.9;
}

.faq-list-wrap li > a{
  display: block;
  font-weight: 800;
  line-height: 1.22;
  text-decoration: none;
  color: inherit;
  padding-left: 10px; /* room for accent bar */
  overflow-wrap: anywhere;
}

.faq-list-wrap li > a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faq-list-wrap li > a:focus-visible{
  outline: 3px solid rgba(34,139,34,0.45);
  outline-offset: 4px;
  border-radius: 12px;
}

.faq-list-wrap li > div{
  padding-left: 10px; /* align with title */
  font-size: 0.95rem;
  line-height: 1.35;
  color: rgba(0,0,0,0.68);
}

@media (min-width: 860px){
  .faq-list-wrap{
    padding: 18px;
  }
  .faq-list-wrap ul{
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

@media (min-width: 1100px){
  .faq-list-wrap ul{
    grid-template-columns: 1fr 1fr;
  }
}