:root {
  --bg:#f5f6f2;
  --paper:#fff;
  --ink:#0c1110;
  --muted:#616b67;
  --line:#dfe5e1;
  --accent:#35d399;
  --accent2:#bff5df;
  --deep:#0c1512;
  --max:1180px;
  --r:28px;
  --shadow:0 20px 70px rgba(15,35,27,.08)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  line-height:1.65;
  text-rendering:optimizeLegibility
}

img {
  max-width:100%;
  display:block
}

a {
  color:inherit;
  text-decoration:none
}

button,input,textarea {
  font:inherit
}

.skip-link {
  position:absolute;
  left:-9999px;
  top:auto
}

.skip-link:focus {
  left:1rem;
  top:1rem;
  z-index:9999;
  background:#fff;
  padding:.7rem 1rem;
  border-radius:12px
}

.wrap {
  width:min(var(--max),calc(100% - 40px));
  margin-inline:auto
}

.section {
  padding:96px 0
}

.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
  font-size:.76rem;
  color:#1a7356
}

.eyebrow:before {
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent)
}

h1,h2,h3 {
  line-height:1.04;
  letter-spacing:-.045em;
  margin:0
}

h1 {
  font-size:clamp(3rem,7.2vw,6.8rem)
}

h2 {
  font-size:clamp(2.2rem,5vw,4.8rem)
}

h3 {
  font-size:clamp(1.25rem,2vw,1.7rem)
}

p {
  margin:0 0 1.1rem;
  color:var(--muted)
}

.lead {
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  max-width:650px
}

.muted {
  color:var(--muted)
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  padding:.9rem 1.2rem;
  border-radius:14px;
  border:1px solid var(--ink);
  font-weight:800;
  transition:.22s ease;
  background:var(--ink);
  color:white
}

.btn:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(10,20,15,.15)
}

.btn.secondary {
  background:transparent;
  color:var(--ink);
  border-color:var(--line)
}

.btn.secondary:hover {
  border-color:var(--ink);
  box-shadow:none
}

.btn.small {
  padding:.65rem .9rem;
  border-radius:11px;
  font-size:.9rem
}

.arrow {
  font-size:1.1em
}

.topbar {
  border-bottom:1px solid var(--line);
  background:rgba(245,246,242,.88);
  backdrop-filter:blur(14px);
  position:sticky;
  top:0;
  z-index:100
}

.nav {
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900
}

.brand img {
  width:45px;
  height:45px;
  object-fit:contain
}

.brand span {
  white-space:nowrap
}

.navlinks {
  display:flex;
  align-items:center;
  gap:24px
}

.navlinks a {
  font-size:.92rem;
  color:#26312d
}

.navlinks a:hover,.navlinks a[aria-current="page"] {
  color:#087453
}

.menu {
  display:none;
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  width:44px;
  height:44px
}


.cta {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:30px
}


.section-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:42px
}

.section-head p {
  max-width:520px
}

.dark {
  background:var(--deep);
  color:#fff
}

.dark p,.dark .muted {
  color:#aab8b2
}

.dark .eyebrow {
  color:#7be7bd
}

.dark .eyebrow:before {
  background:#7be7bd
}

.results-grid {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:22px
}

.result-feature,.card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden
}

.dark .card,.dark .result-feature {
  background:#111d19;
  border-color:#22332c
}

.result-feature {
  padding:28px;
  min-height:420px;
  position:relative
}

.result-feature .screen {
  margin-top:28px;
  border:1px solid #dfe5e1;
  border-radius:18px;
  background:#f8faf8;
  padding:16px
}

.browserbar {
  height:18px;
  display:flex;
  gap:5px
}

.browserbar i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#c9d0cc
}

.screen-graph {
  height:210px;
  border-radius:14px;
  background:linear-gradient(180deg,#fff,#eef7f2);
  position:relative;
  overflow:hidden
}

.screen-graph svg {
  width:100%;
  height:100%
}

.metric-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}

.metric {
  padding:26px
}

.metric strong {
  font-size:2.2rem;
  letter-spacing:-.05em;
  display:block
}

.metric span {
  color:var(--muted)
}

.dark .metric span {
  color:#9dacA5
}

.services-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}

.service {
  padding:28px;
  min-height:290px;
  display:flex;
  flex-direction:column
}

.iconbox {
  width:48px;
  height:48px;
  border-radius:14px;
  background:#dff8ec;
  color:#0b6c4e;
  display:grid;
  place-items:center;
  margin-bottom:34px
}

.iconbox svg {
  width:24px;
  height:24px
}

.service p {
  margin-top:12px
}

.service a {
  margin-top:auto;
  font-weight:800;
  color:#0b7856
}

.work-grid {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:22px
}

.project {
  grid-column:span 6;
  padding:0
}

.project.large {
  grid-column:span 12
}

.project-visual {
  min-height:320px;
  padding:30px;
  background:linear-gradient(145deg,#0c1512,#193a2d);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden
}

.project-visual.light {
  background:linear-gradient(145deg,#f8efe5,#e8dccd)
}

.project-visual .mock {
  width:82%;
  max-width:720px;
  border-radius:18px;
  background:#fff;
  padding:10px;
  box-shadow:0 20px 70px rgba(0,0,0,.23);
  transform:rotate(-2deg)
}

.mock .mock-top {
  height:16px;
  background:#eff2ef;
  border-radius:9px;
  margin-bottom:8px
}

.mock-body {
  border-radius:10px;
  min-height:200px;
  background:linear-gradient(135deg,#0d1512 0 55%,#2a7e5d 55%)
}

.project-visual.light .mock-body {
  background:linear-gradient(135deg,#faf7f1 0 55%,#2d2016 55%)
}

.project-body {
  padding:28px
}

.project-meta {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:16px 0 22px
}

.tag {
  font-size:.78rem;
  border:1px solid var(--line);
  padding:.34rem .58rem;
  border-radius:999px;
  color:#4b5652
}

.about-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:58px;
  align-items:center
}

.about-img {
  border-radius:34px;
  overflow:hidden;
  background:#e9ece8
}

.about-img img {
  aspect-ratio:4/5;
  object-fit:cover
}

.timeline {
  margin-top:30px;
  border-top:1px solid var(--line)
}

.timeline-item {
  display:grid;
  grid-template-columns:140px 1fr;
  gap:28px;
  padding:22px 0;
  border-bottom:1px solid var(--line)
}

.timeline-item b {
  font-size:.95rem
}

.quote {
  font-size:clamp(1.4rem,2.7vw,2.3rem);
  line-height:1.32;
  letter-spacing:-.03em;
  color:var(--ink)
}

.reviews {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}

.review {
  padding:26px
}

.review .stars {
  letter-spacing:.12em;
  color:#0b7856;
  font-weight:900
}

.review footer {
  margin-top:20px;
  font-weight:800
}

.review footer span {
  display:block;
  font-weight:500;
  color:var(--muted);
  font-size:.9rem
}

.benefits {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px
}

.benefit {
  padding:24px
}

.benefit b {
  display:block;
  margin:16px 0 7px
}

.cta-band {
  background:#0c1512;
  color:#fff;
  border-radius:36px;
  padding:54px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:28px
}

.cta-band p {
  color:#b8c4be
}

.footer {
  padding:60px 0 24px;
  background:#08100d;
  color:#fff;
  margin-top:80px
}

.footer-grid {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:40px
}

.footer .brand img {
  width:65px;
  height:65px
}

.footer p,.footer a {
  color:#aeb9b4
}

.footer a:hover {
  color:white
}

.socials {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px
}

.social-link {
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid #26352f;
  display:grid;
  place-items:center
}

.social-link img {
  width:20px;
  height:20px;
  filter:invert(1);
  opacity:.82
}

.social-link:hover {
  background:#13231d
}

.copyright {
  border-top:1px solid #1b2a24;
  margin-top:42px;
  padding-top:20px;
  font-size:.86rem;
  color:#84918b
}

.page-hero {
  padding:90px 0 60px
}

.page-hero h1 {
  max-width:900px;
  font-size:clamp(3rem,6vw,6rem)
}

.page-hero p {
  max-width:760px;
  font-size:1.18rem;
  margin-top:24px
}

.content-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:48px
}

.prose {
  font-size:1.05rem
}

.prose h2 {
  font-size:2.4rem;
  margin:2.5rem 0 1rem
}

.prose h3 {
  font-size:1.5rem;
  margin:2rem 0 .8rem
}

.prose p,.prose li {
  color:#404b47
}

.prose ul,.prose ol {
  padding-left:1.2rem
}

.prose blockquote {
  border-left:4px solid var(--accent);
  padding:1rem 1.4rem;
  background:#edf8f2;
  border-radius:0 18px 18px 0;
  margin:2rem 0
}

.toc {
  position:sticky;
  top:100px;
  align-self:start;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:22px
}

.toc b {
  display:block;
  margin-bottom:10px
}

.toc a {
  display:block;
  padding:.35rem 0;
  color:var(--muted);
  font-size:.92rem
}

.toc a:hover {
  color:#0c7555
}

.blog-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}

.post-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden
}

.post-thumb {
  height:180px;
  background:linear-gradient(135deg,#0d1512,#267858);
  padding:22px;
  display:flex;
  align-items:flex-end;
  color:#fff
}

.post-thumb.light {
  background:linear-gradient(135deg,#eaf7f1,#b9ecd6);
  color:#0d1512
}

.post-body {
  padding:22px
}

.post-body h3 {
  margin:8px 0 12px
}

.post-meta {
  font-size:.8rem;
  color:var(--muted)
}

.contact-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:40px
}

.contact-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  padding:30px
}

.contact-list {
  display:grid;
  gap:12px;
  margin-top:24px
}

.contact-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px
}

.contact-item svg {
  width:22px;
  height:22px
}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}

.field {
  display:grid;
  gap:6px
}

.field.full {
  grid-column:1/-1
}

.field input,.field textarea {
  border:1px solid #cfd7d2;
  border-radius:14px;
  background:#fbfcfa;
  padding:14px 15px;
  outline:none
}

.field input:focus,.field textarea:focus {
  border-color:#1d9b70;
  box-shadow:0 0 0 3px rgba(53,211,153,.12)
}

.field textarea {
  min-height:150px;
  resize:vertical
}

.case-facts {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:28px 0
}

.fact {
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px
}

.fact b {
  display:block;
  font-size:1.1rem
}

.not-found {
  min-height:78vh;
  display:grid;
  place-items:center;
  text-align:center;
  overflow:hidden
}

.nf-wrap {
  position:relative
}

.nf-number {
  font-size:clamp(8rem,26vw,22rem);
  line-height:.8;
  font-weight:950;
  letter-spacing:-.09em;
  color:#d8eee4;
  position:relative
}

.nf-number span {
  display:inline-block;
  animation:float 3.2s ease-in-out infinite
}

.nf-number span:nth-child(2) {
  animation-delay:.2s;
  color:#3bd29a
}

.nf-number span:nth-child(3) {
  animation-delay:.4s
}

.nf-orbit {
  position:absolute;
  width:420px;
  height:420px;
  border:1px solid #a8d8c4;
  border-radius:50%;
  left:50%;
  top:45%;
  transform:translate(-50%,-50%);
  animation:spin 14s linear infinite
}

.nf-dot {
  width:16px;
  height:16px;
  border-radius:50%;
  background:#0d1512;
  position:absolute;
  top:-8px;
  left:50%
}

@keyframes spin {
  to {
    transform:translate(-50%,-50%) rotate(360deg)
  }
}

@keyframes float {
  50% {
    transform:translateY(-14px)
  }
}

.nf-copy {
  position:relative;
  z-index:2;
  max-width:620px;
  margin:28px auto 0
}

.schema-note {
  font-size:.85rem;
  color:var(--muted)
}

@media (max-width:980px) {
  .navlinks {
    position:fixed;
    inset:76px 20px auto 20px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:18px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    box-shadow:var(--shadow)
  }
  .navlinks.open {
    display:flex
  }
  .menu {
    display:block
  }
  .about-grid,.results-grid,.contact-grid,.content-grid {
    grid-template-columns:1fr
  }
  .services-grid,.blog-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .reviews {
    grid-template-columns:1fr 1fr
  }
  .benefits {
    grid-template-columns:1fr 1fr
  }
  .footer-grid {
    grid-template-columns:1fr 1fr
  }
  .toc {
    position:static
  }
  .case-facts {
    grid-template-columns:1fr 1fr
  }
}

@media (max-width:640px) {
  .wrap {
    width:min(100% - 26px,var(--max))
  }
  .section {
    padding:68px 0
  }
  .section-head {
    align-items:start;
    flex-direction:column
  }
  .services-grid,.blog-grid,.reviews,.benefits,.footer-grid {
    grid-template-columns:1fr
  }
  .work-grid {
    display:block
  }
  .project {
    margin-bottom:18px
  }
  .project-visual {
    min-height:250px
  }
  .timeline-item {
    grid-template-columns:1fr;
    gap:8px
  }
  .cta-band {
    padding:34px 24px;
    align-items:flex-start;
    flex-direction:column
  }
  .form-grid {
    grid-template-columns:1fr
  }
  .field.full {
    grid-column:auto
  }
  .case-facts {
    grid-template-columns:1fr
  }
  .brand span {
    font-size:.9rem
  }
  .nav .btn.small {
    display:none
  }
}

.ayra-toggle {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-size: 25px;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}

.ayra-chat {
  position: fixed;
  right: 22px;
  bottom: 92px;
  width: 360px;
  height: 520px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  z-index: 9999;
  display: none;
  overflow: hidden;
  flex-direction: column;
}

.ayra-chat.open {
  display: flex;
}

.ayra-header {
  padding: 18px;
  background: #111;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ayra-header strong,
.ayra-header small {
  display: block;
}

.ayra-header small {
  opacity: .7;
  margin-top: 3px;
}

.ayra-close {
  border: 0;
  background: none;
  color: white;
  font-size: 28px;
  cursor: pointer;
}

.ayra-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #f7f7f5;
}

.ayra-message {
  max-width: 82%;
  padding: 11px 14px;
  margin-bottom: 10px;
  border-radius: 14px;
  line-height: 1.45;
  font-size: 14px;
}

.ayra-message.bot {
  background: #fff;
  border: 1px solid #e7e7e7;
}

.ayra-message.user {
  background: #111;
  color: white;
  margin-left: auto;
}

.ayra-quick {
  padding: 10px 14px;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  border-top: 1px solid #eee;
}

.ayra-quick button {
  white-space: nowrap;
  border: 1px solid #ddd;
  background: white;
  border-radius: 20px;
  padding: 7px 11px;
  cursor: pointer;
}

.ayra-form {
  padding: 12px;
  display: flex;
  gap: 8px;
  border-top: 1px solid #eee;
}

.ayra-form input {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 22px;
  padding: 11px 15px;
  outline: none;
}

.ayra-form button {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: #111;
  color: white;
  cursor: pointer;
}

@media (max-width: 500px) {
  .ayra-chat {
    left: 12px;
    right: 12px;
    bottom: 85px;
    width: auto;
    height: 70vh;
  }
}

.project-visual img {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  object-position: top;
  border-radius: 18px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.18);
}

.project.large .project-visual img {
  max-height: 520px;
}

.whatsapp-sticky {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;

  display: flex;
  flex-direction: column;
  align-items: center;

  background: #ffffff;
  color: #0c1110;

  border: 1px solid #dfe5e1;
  border-left: 0;

  border-radius: 0 16px 16px 0;

  box-shadow: 0 10px 35px rgba(15, 35, 27, 0.12);

  overflow: hidden;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.whatsapp-sticky:hover {
  transform: translateY(-50%) translateX(4px);
  box-shadow: 0 14px 40px rgba(15, 35, 27, 0.18);
}

.whatsapp-icon {
  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  background: #25d366;
}

.whatsapp-icon svg {
  width: 28px;
  height: 28px;
  fill: #ffffff;
}

.whatsapp-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);

  padding: 14px 10px;

  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;

  white-space: nowrap;
}

@media (max-width: 640px) {
  .whatsapp-sticky {
    top: 50%;
  }

  .whatsapp-icon {
    width: 48px;
    height: 48px;
  }

  .whatsapp-text {
    padding: 12px 8px;
    font-size: 12px;
  }
}



/* =========================================================
   HOME HERO — SEO SPECIALIST EDITORIAL DESIGN
   Integrated homepage hero + SEO sections
========================================================= */

.specialist-hero{
  position:relative;
  overflow:hidden;
  background:#f2f1ed;
  color:#0a0a0a;
  border-radius:0 0 28px 28px;
}

.specialist-hero-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 14% 12%, rgba(255,180,140,.38), transparent 28%),
    radial-gradient(circle at 84% 14%, rgba(189,216,255,.42), transparent 30%),
    radial-gradient(circle at 50% 88%, rgba(255,230,160,.34), transparent 28%),
    linear-gradient(180deg,#f4f1ed 0%,#eef1f3 55%,#f2eee9 100%);
}

.specialist-hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.16;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.04) 0,
      rgba(0,0,0,.04) 1px,
      transparent 1px,
      transparent 3px
    );
  mix-blend-mode:multiply;
}

.specialist-hero-inner{
  position:relative;
  min-height:700px;
  padding:30px 0 0;
}

.specialist-hero-top{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.08em;
}

.specialist-mini{
  color:#6f6f69;
}

.specialist-title-wrap{
  position:absolute;
  z-index:2;
  top:72px;
  left:50%;
  width:min(1120px,92%);
  transform:translateX(-50%);
  text-align:center;
}

.specialist-kicker{
  display:block;
  margin-bottom:8px;
  font-size:clamp(1rem,1.5vw,1.4rem);
  font-weight:900;
  letter-spacing:-.03em;
}

.specialist-title-wrap h1{
  margin:0;
  line-height:.78;
  letter-spacing:-.085em;
  font-weight:950;
  text-transform:uppercase;
}

.specialist-seo{
  display:block;
  margin-bottom:-4px;
  font-size:clamp(2.2rem,4vw,4.6rem);
}

.specialist-word{
  display:block;
  font-size:clamp(6.5rem,15vw,13.5rem);
}

.specialist-subline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:8px;
  font-size:clamp(1.1rem,2.2vw,2rem);
  font-weight:900;
  letter-spacing:-.04em;
}

.specialist-arrow{
  font-size:1.6em;
  transform:rotate(-4deg);
}

.specialist-left-note{
  position:absolute;
  z-index:4;
  left:0;
  bottom:118px;
  width:230px;
}

.specialist-left-note p{
  margin:0 0 18px;
  font-size:.82rem;
  line-height:1.6;
  color:#343431;
}

.specialist-left-note a{
  color:inherit;
  font-weight:800;
}

.specialist-orbit{
  display:block;
  width:46px;
  height:46px;
  margin-bottom:16px;
  border:2px solid #111;
  transform:rotate(45deg);
  position:relative;
}

.specialist-orbit::before,
.specialist-orbit::after{
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid #111;
}

.specialist-orbit::after{
  inset:16px;
  background:#111;
}

.specialist-social-links{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.specialist-social-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 9px;
  border:1px solid #b9b9b3;
  border-radius:999px;
  text-decoration:none;
  font-size:.62rem;
  letter-spacing:.06em;
}

.specialist-person{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:0;
  width:min(570px,46vw);
  transform:translateX(-50%);
  pointer-events:none;
}

.specialist-person img{
  display:block;
  width:100%;
  height:auto;
  max-height:630px;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 28px 30px rgba(0,0,0,.18));
}

.specialist-cta-card{
  position:absolute;
  z-index:5;
  right:0;
  top:390px;
  bottom:auto;
  width:235px;
  padding:0;
  background:transparent;
}

.specialist-score{
  display:block;
  margin-bottom:8px;
  font-size:1rem;
  font-weight:950;
}

.specialist-cta-card p{
  margin:0 0 18px;
  color:#464640;
  line-height:1.5;
  font-size:.8rem;
}

.specialist-contact{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-width:175px;
  min-height:58px;
  padding:0 18px;
  background:#111;
  color:#fff;
  border-radius:999px;
  text-decoration:none;
  font-size:.78rem;
  font-weight:900;
}

.specialist-cta-card ul{
  margin:20px 0 0;
  padding:18px 0 0;
  list-style:none;
  border-top:1px solid #bdbdb7;
}

.specialist-cta-card li{
  margin:8px 0;
  font-size:.73rem;
}

.specialist-cta-card li a{
  color:#20201e;
  text-decoration:none;
  font-weight:750;
}

.specialist-proof{
  position:relative;
  z-index:6;
  border-top:1px solid rgba(0,0,0,.1);
  background:rgba(255,255,255,.52);
  backdrop-filter:blur(12px);
}

.specialist-proof-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.specialist-proof-grid a{
  display:grid;
  gap:3px;
  padding:20px 22px;
  color:#111;
  text-decoration:none;
  border-right:1px solid rgba(0,0,0,.1);
}

.specialist-proof-grid a:last-child{
  border-right:0;
}

.specialist-proof-grid strong{
  font-size:.82rem;
}

.specialist-proof-grid span{
  color:#71716b;
  font-size:.72rem;
}

.seo-intro-section{
  background:#fff;
}

.seo-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(35px,7vw,100px);
  align-items:start;
}

.seo-intro-grid h2{
  margin:10px 0 0;
  font-size:clamp(2.2rem,4.8vw,4.8rem);
  line-height:.95;
  letter-spacing:-.055em;
}

.seo-intro-copy{
  display:grid;
  gap:18px;
}

.seo-intro-copy p{
  margin:0;
  color:#5f625f;
  line-height:1.8;
}

.seo-intro-copy a,
.seo-guide-card a,
.faq-item a{
  color:inherit;
  font-weight:850;
  text-underline-offset:3px;
}

.seo-resource-section{
  background:#f5f5f1;
}

.seo-guides-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.seo-guide-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:360px;
  padding:28px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
}

.seo-guide-card .eyebrow{
  margin-bottom:14px;
  font-size:.7rem;
  line-height:1.3;
}

.seo-guide-card h3{
  margin:0 0 15px;
  font-size:clamp(1.35rem,2vw,1.75rem);
  line-height:1.12;
  letter-spacing:-.035em;
  overflow-wrap:anywhere;
}

.seo-guide-card p{
  margin:0 0 24px;
  color:var(--muted);
  font-size:.94rem;
  line-height:1.7;
  overflow-wrap:anywhere;
}

.seo-guide-card > a{
  display:inline-flex;
  align-items:center;
  margin-top:auto;
  color:#0b7856;
  font-size:.88rem;
  font-weight:850;
  line-height:1.45;
  text-decoration:none;
}

.seo-tools-band{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) auto;
  gap:35px;
  align-items:center;
  margin-top:18px;
  padding:34px;
  background:#0e1211;
  color:#fff;
  border-radius:24px;
}

.seo-tools-band h2{
  margin:10px 0 12px;
  font-size:clamp(1.9rem,3.5vw,3.3rem);
  line-height:1;
  letter-spacing:-.045em;
}

.seo-tools-band p{
  margin:0;
  max-width:720px;
  color:#c4cac6;
  line-height:1.7;
}

.seo-tools-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.seo-tools-band .btn{
  background:#fff;
  color:#111;
  border-color:#fff;
}

.seo-tools-band .btn.secondary{
  background:transparent;
  color:#fff;
  border-color:#4b544f;
}

.faq-section{
  background:#fff;
}

.faq-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.faq-item{
  border:1px solid #dfe2dd;
  border-radius:18px;
  background:#fff;
  padding:0 20px;
}

.faq-item summary{
  cursor:pointer;
  padding:20px 0;
  font-weight:900;
  list-style:none;
}

.faq-item summary::-webkit-details-marker{
  display:none;
}

.faq-item summary::after{
  content:"+";
  float:right;
  font-size:1.2rem;
}

.faq-item[open] summary::after{
  content:"−";
}

.faq-item p{
  margin:0;
  padding:0 0 20px;
  color:#666963;
  line-height:1.7;
}

@media(max-width:1050px){
  .specialist-hero-inner{
    min-height:660px;
  }

  .specialist-left-note{
    width:200px;
  }

  .specialist-cta-card{
    top:360px;
    width:205px;
  }

  .specialist-word{
    font-size:clamp(6rem,14vw,10rem);
  }

  .seo-guides-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:820px){
  .specialist-hero-inner{
    min-height:auto;
    padding:24px 0 0;
  }

  .specialist-hero-top{
    position:relative;
    margin-bottom:34px;
  }

  .specialist-title-wrap,
  .specialist-left-note,
  .specialist-person,
  .specialist-cta-card{
    position:relative;
    inset:auto;
    left:auto;
    right:auto;
    bottom:auto;
    top:auto;
    width:auto;
    transform:none;
  }

  .specialist-title-wrap{
    width:100%;
    text-align:left;
  }

  .specialist-title-wrap h1{
    line-height:.82;
  }

  .specialist-word{
    font-size:clamp(4.6rem,19vw,8rem);
  }

  .specialist-seo{
    font-size:clamp(1.9rem,8vw,3.3rem);
  }

  .specialist-subline{
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:10px;
    font-size:1.25rem;
  }

  .specialist-person{
    width:min(520px,92%);
    margin:18px auto 0;
  }

  .specialist-person img{
    max-height:630px;
  }

  .specialist-left-note{
    margin-top:24px;
    width:100%;
    max-width:620px;
  }

  .specialist-cta-card{
    position:relative;
    top:auto;
    right:auto;
    bottom:auto;
    width:100%;
    max-width:620px;
    margin:24px 0 34px;
  }

  .specialist-proof-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .specialist-proof-grid a:nth-child(2){
    border-right:0;
  }

  .specialist-proof-grid a:nth-child(-n+2){
    border-bottom:1px solid rgba(0,0,0,.1);
  }

  .seo-intro-grid,
  .seo-tools-band{
    grid-template-columns:1fr;
  }

  .seo-tools-actions{
    justify-content:flex-start;
  }

  .faq-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:620px){
  .specialist-hero{
    border-radius:0 0 20px 20px;
  }

  .specialist-hero-top{
    font-size:.64rem;
  }

  .specialist-mini{
    display:none;
  }

  .specialist-kicker{
    font-size:.84rem;
  }

  .specialist-word{
    font-size:17vw;
    letter-spacing:-.075em;
  }

  .specialist-subline{
    font-size:1rem;
  }

  .specialist-left-note{
    margin-top:18px;
  }

  .specialist-person{
    width:100%;
  }

  .specialist-contact{
    width:100%;
  }

  .specialist-proof-grid{
    grid-template-columns:1fr;
  }

  .specialist-proof-grid a{
    border-right:0;
    border-bottom:1px solid rgba(0,0,0,.1);
  }

  .specialist-proof-grid a:last-child{
    border-bottom:0;
  }

  .seo-intro-grid h2{
    font-size:2.35rem;
  }

  .seo-guides-grid{
    grid-template-columns:1fr;
  }

  .seo-guide-card{
    min-height:auto;
  }

  .seo-tools-band{
    padding:24px 20px;
    border-radius:18px;
  }

  .seo-tools-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .seo-tools-actions .btn{
    width:100%;
  }
}


/* =========================================================
   WHO I HELP
========================================================= */

.audience-section{
  background:#eef1ec;
}

.audience-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.audience-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:330px;
  padding:26px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
}

.audience-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  margin-bottom:42px;
  border:1px solid var(--line);
  border-radius:50%;
  color:#087453;
  font-size:.72rem;
  font-weight:900;
}

.audience-card h3{
  margin:0 0 13px;
  font-size:1.45rem;
}

.audience-card p{
  margin:0 0 24px;
  font-size:.92rem;
  line-height:1.7;
}

.audience-card a{
  margin-top:auto;
  color:#087453;
  font-size:.86rem;
  font-weight:850;
}


/* =========================================================
   SEO PROBLEMS
========================================================= */

.seo-problems-section{
  background:#fff;
}

.seo-problems-panel{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(35px,6vw,85px);
  padding:clamp(30px,5vw,62px);
  background:#0c1512;
  color:#fff;
  border-radius:36px;
}

.seo-problems-copy{
  align-self:center;
}

.seo-problems-copy .eyebrow{
  color:#7be7bd;
}

.seo-problems-copy .eyebrow::before{
  background:#7be7bd;
}

.seo-problems-copy h2{
  margin:12px 0 20px;
  font-size:clamp(2.2rem,4.5vw,4.4rem);
  line-height:.97;
}

.seo-problems-copy p{
  max-width:600px;
  color:#aebbb5;
  line-height:1.8;
}

.seo-problems-copy .btn.secondary{
  color:#fff;
  border-color:#3a4a43;
}

.seo-problems-copy .btn.secondary:hover{
  border-color:#fff;
}

.seo-problem-list{
  border-top:1px solid #2a3a33;
}

.seo-problem-list > a{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:14px;
  padding:18px 0;
  color:#fff;
  border-bottom:1px solid #2a3a33;
  text-decoration:none;
  transition:.18s ease;
}

.seo-problem-list > a:hover{
  padding-left:8px;
}

.seo-problem-list > a > span{
  color:#75dcb5;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
}

.seo-problem-list strong{
  display:block;
  margin-bottom:4px;
  font-size:.96rem;
  line-height:1.35;
}

.seo-problem-list small{
  display:block;
  color:#91a099;
  font-size:.78rem;
  line-height:1.55;
}


/* =========================================================
   EXTRA RESPONSIVE RULES FOR NEW HOME SECTIONS
========================================================= */

@media(max-width:1050px){
  .audience-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:820px){
  .seo-problems-panel{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){
  .audience-grid{
    grid-template-columns:1fr;
  }

  .audience-card{
    min-height:auto;
    padding:22px;
  }

  .audience-number{
    margin-bottom:28px;
  }

  .seo-problems-panel{
    padding:26px 20px;
    border-radius:24px;
  }

  .seo-problems-copy h2{
    font-size:2.35rem;
  }

  .seo-problem-list > a{
    grid-template-columns:34px minmax(0,1fr);
  }
}