/* Rivmedia – Service: SEO Services (seo-services) */
/* page: SEO services — SERP illustration hero, pillar rows, deliverables, timeline, FAQ */
.hero .glow-a { width: 560px; height: 560px; right: -140px; top: -180px;
  background: radial-gradient(circle, color-mix(in srgb, var(--blue-bright) 55%, transparent), transparent 70%); }
.hero .glow-b { width: 420px; height: 420px; left: -160px; bottom: -220px;
  background: radial-gradient(circle, color-mix(in srgb, var(--magenta) 32%, transparent), transparent 70%); }
.hero > .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--leading) clamp(32px, 5vw, 88px); align-items: center; }
.serp { background: rgba(10,10,51,.55); border: 1px solid var(--glass-border); border-radius: 20px;
  padding: 20px 22px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: rotate(1.5deg); }
.serp .sbar { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 9px 16px; margin-bottom: 16px; }
.serp .sbar .q { font-size: 13.5px; color: rgba(255,255,255,.85); }
.serp .sbar .go { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--magenta); flex: none;
  display: grid; place-items: center; color: #fff; font-size: 11px; }
.serp .res { padding: 12px 4px; border-top: 1px solid rgba(255,255,255,.08); }
.serp .res:first-of-type { border-top: 0; }
.serp .res .u { font-size: 11px; color: rgba(255,255,255,.45); margin: 0 0 3px; }
.serp .res .t { font-size: 15px; font-weight: 700; margin: 0; color: #8fb5ff; }
.serp .res.you { background: linear-gradient(90deg, rgba(53,208,255,.14), transparent); border-radius: 10px;
  border-top: 0; padding: 12px 12px; margin: 4px -8px; position: relative; }
.serp .res.you .t { color: #fff; }
.serp .res.you .badge { position: absolute; right: 10px; top: 10px; font-size: 10.5px; font-weight: 800;
  color: var(--navy); background: var(--cyan); border-radius: 999px; padding: 3px 9px; letter-spacing: .06em; }
.serp-chip { position: absolute; z-index: 3; background: #fff; color: var(--ink); border-radius: 14px;
  padding: 10px 14px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.6); display: grid; gap: 2px;
  animation: chipFloat 6s ease-in-out infinite; }
.serp-chip .k { font-size: 11px; font-weight: 800; color: var(--magenta); letter-spacing: .06em; text-transform: uppercase; }
.serp-chip .v { font-size: 13px; font-weight: 600; }
.chip-a { right: -2%; top: -4%; }
.chip-b { left: -4%; bottom: -6%; animation-delay: 2s; }
.hero-art { position: relative; }
@keyframes chipFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .serp-chip { animation: none; } }
@media (max-width: 900px) { .hero > .wrap { grid-template-columns: 1fr; } }
/* pillar rows: alternating editorial rows with mini graphics */
.pillars { padding: calc(4 * var(--leading)) 0; }
.pillar { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: calc(1.5 * var(--leading)) clamp(32px, 5vw, 96px); align-items: center;
  padding: calc(2 * var(--leading)) 0; }
.pillar + .pillar { border-top: 1px solid var(--hairline); }
.pillar:nth-child(even) .pcopy { order: 2; }
.pillar h3 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--half); color: var(--navy); }
.pillar p { font-size: 15.5px; line-height: 24px; margin: 0 0 var(--half); color: color-mix(in srgb, var(--ink) 76%, transparent); max-width: 56ch; }
.pillar .pnum { font-family: var(--font-heading); font-weight: 800; font-size: 13px; letter-spacing: .12em;
  color: var(--magenta); margin: 0 0 10px; }
.pgraphic { background: linear-gradient(160deg, var(--navy), var(--navy-deep)); border-radius: var(--r-lg);
  padding: calc(1.25 * var(--leading)); box-shadow: var(--soft-md); }
.pgraphic svg { display: block; width: 100%; height: 150px; }
@media (max-width: 900px) { .pillar { grid-template-columns: 1fr; } .pillar:nth-child(even) .pcopy { order: 0; } }
/* deliverables band */
.deliver { background: var(--tint); padding: calc(4 * var(--leading)) 0; }
.deliver .head { margin-bottom: calc(2 * var(--leading)); }
.dgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--leading); }
.dcard { background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--soft-sm);
  padding: calc(1.25 * var(--leading)) var(--leading); display: grid; gap: 8px; align-content: start;
  transition: box-shadow .2s ease, transform .2s ease; }
.dcard:hover { box-shadow: var(--soft-md); transform: translateY(-4px); }
.dcard .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--blue-bright), var(--magenta)); color: #fff;
  font-family: var(--font-heading); font-weight: 800; font-size: 15px; }
.dcard h3 { font-family: var(--font-heading); font-weight: 800; font-size: 18px; line-height: 1.25;
  letter-spacing: -0.01em; margin: 0; color: var(--navy); }
.dcard p { font-size: 14.5px; line-height: 21px; margin: 0; color: color-mix(in srgb, var(--ink) 72%, transparent); }
@media (max-width: 1040px) { .dgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dgrid { grid-template-columns: 1fr; } }
/* timeline */
.tline { padding: calc(4 * var(--leading)) 0; }
.tline .head { margin-bottom: calc(2 * var(--leading)); }
.tsteps { display: grid; gap: 0; position: relative; max-width: 760px; }
.tsteps::before { content: ""; position: absolute; left: 19px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(180deg, var(--blue-bright), var(--magenta), var(--cyan)); border-radius: 2px; }
.tstep { display: grid; grid-template-columns: 40px 1fr; gap: var(--leading); padding: var(--leading) 0; position: relative; }
.tstep .dot { width: 40px; height: 40px; border-radius: 50%; background: var(--paper); border: 2px solid var(--magenta);
  display: grid; place-items: center; font-family: var(--font-heading); font-weight: 800; font-size: 14px; color: var(--magenta); z-index: 1; }
.tstep:nth-child(odd) .dot { border-color: var(--blue-bright); color: var(--blue-bright); }
.tstep h3 { font-family: var(--font-heading); font-weight: 800; font-size: 18px; margin: 8px 0 6px; color: var(--navy); }
.tstep .when { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: color-mix(in srgb, var(--ink) 50%, transparent); }
.tstep p { font-size: 15px; line-height: 22px; margin: 0; color: color-mix(in srgb, var(--ink) 74%, transparent); max-width: 58ch; }
/* FAQ */
.faq { background: var(--tint); padding: calc(4 * var(--leading)) 0; }
.faq .head { margin-bottom: calc(1.5 * var(--leading)); }
.faq details { background: var(--paper); border-radius: var(--r-md); box-shadow: var(--soft-sm);
  padding: 0; margin-bottom: 12px; overflow: hidden; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  gap: var(--leading); padding: 18px 22px; font-family: var(--font-heading); font-weight: 800; font-size: 16.5px; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; color: var(--magenta); transition: transform .2s ease; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 22px 20px; font-size: 15px; line-height: 23px; color: color-mix(in srgb, var(--ink) 76%, transparent); max-width: 74ch; }