/* ===========================================================
   Ausvyta · SEO landing pages (services, locations, hub)
   The page body from seo-content/*.html is rendered verbatim inside
   `.seo` and skinned here with the THEME design tokens, so the SEO
   pages match the rest of the site. All selectors are scoped under
   `.seo` so the source's generic class names never clash with the
   theme header/footer/homepage.
   =========================================================== */

.seo{
  --dark: var(--teal);
  --darker: var(--teal-900);
  --white: #ffffff;
  --radius: 18px;
  --font-display: var(--display);
  --font-body: var(--body);
}
.seo a{ color:inherit; text-decoration:none; }
.seo h1, .seo h2, .seo h3{ font-family:var(--font-display); line-height:1.12; letter-spacing:-.01em; }

/* ---------- Hero ---------- */
.seo .hero{ background:var(--dark); color:var(--white); padding:40px 0 80px; position:relative; overflow:hidden; }
.seo .hero::after{ content:""; position:absolute; right:-180px; top:-180px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,rgba(200,241,53,.14),transparent 65%); }
.seo .breadcrumb{ font-size:13px; color:#9cb3aa; margin-bottom:28px; position:relative; z-index:1; }
.seo .breadcrumb a:hover{ color:var(--lime); }
.seo .hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; position:relative; z-index:1; }
.seo .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--lime); font-weight:700; margin-bottom:18px; font-family:var(--font-display); }
.seo .eyebrow::before{ content:""; width:28px; height:2px; background:var(--lime); }
.seo .hero h1{ font-size:clamp(34px,5vw,54px); font-weight:800; margin-bottom:20px; }
.seo .hero h1 .accent{ color:var(--lime); }
.seo .hero p.lead{ font-size:17px; color:#cfdcd5; max-width:520px; margin-bottom:30px; }
.seo .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px; }
.seo .hero-checks{ display:flex; gap:10px; flex-wrap:wrap; }
.seo .chip{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:#dfe8e2; border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:7px 14px; }
.seo .chip::before{ content:"✓"; color:var(--lime); font-weight:800; }
.seo .hero-card{ background:var(--darker); border:1px solid rgba(255,255,255,.08); border-radius:24px; padding:30px; position:relative; }
.seo .hero-card .badge{ position:absolute; top:-18px; right:22px; background:var(--lime); color:var(--dark); font-family:var(--font-display); font-weight:800; font-size:13px; padding:10px 16px; border-radius:999px; transform:rotate(3deg); }
.seo .hero-card h3{ color:var(--white); font-size:20px; margin-bottom:18px; }
.seo .hero-card ul{ list-style:none; margin:0; padding:0; }
.seo .hero-card li{ display:flex; gap:12px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.07); color:#cfdcd5; font-size:14.5px; }
.seo .hero-card li:last-child{ border:none; }
.seo .hero-card li b{ color:var(--lime); font-family:var(--font-display); min-width:34px; }

/* ---------- Icons (swapped in for the source emojis) ---------- */
.seo .bento-card .icon svg{ width:22px; height:22px; }
.seo .btn svg{ width:17px; height:17px; }
.seo .area-pill svg, .seo .place-pill svg{ width:15px; height:15px; flex:none; }
.seo .hero-card li svg, .seo .step svg{ width:18px; height:18px; }

/* ---------- Buttons (dark-hero variants) ---------- */
.seo .btn{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px; padding:13px 24px; border-radius:999px; cursor:pointer; border:none; transition:.25s; font-family:var(--font-display); }
.seo .btn-lime{ background:var(--lime); color:var(--dark); }
.seo .btn-lime:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(200,241,53,.55); }
.seo .btn-outline{ background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.35); }
.seo .btn-outline:hover{ border-color:var(--lime); color:var(--lime); }

/* ---------- Marquee ---------- */
.seo .marquee{ background:var(--lime); overflow:hidden; padding:14px 0; border-top:3px solid var(--darker); border-bottom:3px solid var(--darker); }
.seo .marquee-track{ display:flex; gap:0; white-space:nowrap; animation:seo-scroll 28s linear infinite; width:max-content; }
.seo .marquee-track span{ font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--dark); padding:0 22px; position:relative; }
.seo .marquee-track span::after{ content:"✦"; position:absolute; right:-8px; opacity:.55; }
@keyframes seo-scroll{ to{ transform:translateX(-50%); } }

/* ---------- Sections ---------- */
.seo section{ padding:88px 0; }
.seo .section-head{ text-align:center; max-width:660px; margin:0 auto 52px; }
.seo .section-head .eyebrow{ justify-content:center; }
.seo .section-head .eyebrow::after{ content:""; width:28px; height:2px; background:var(--lime); }
.seo .section-head h2{ font-size:clamp(28px,3.6vw,40px); font-weight:800; margin-bottom:14px; }
.seo .section-head p{ color:var(--muted); font-size:16.5px; }
.seo .dark-section{ background:var(--dark); color:var(--white); }
.seo .dark-section .section-head h2{ color:var(--white); }
.seo .dark-section .section-head p{ color:#aebfb8; }

/* ---------- Bento ---------- */
.seo .bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.seo .bento-card{ background:var(--white); border-radius:var(--radius); padding:28px; transition:.25s; border:1px solid rgba(17,56,47,.06); }
.seo .bento-card:hover{ transform:translateY(-5px); box-shadow:0 20px 40px -18px rgba(17,56,47,.22); }
.seo .bento-card .icon{ width:46px; height:46px; border-radius:13px; background:var(--dark); color:var(--lime); display:grid; place-items:center; font-size:20px; margin-bottom:18px; }
.seo .bento-card h3{ font-size:18px; margin-bottom:8px; }
.seo .bento-card p{ font-size:14.5px; color:var(--muted); }
.seo .bento-card.lime{ background:var(--lime); }
.seo .bento-card.lime .icon{ background:var(--dark); color:var(--lime); }
.seo .bento-card.lime p{ color:#2e4a1d; }

/* ---------- Steps ---------- */
.seo .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.seo .step{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); padding:30px; }
.seo .step .num{ font-family:var(--font-display); font-weight:800; font-size:34px; color:var(--lime); margin-bottom:14px; }
.seo .step h3{ color:var(--white); font-size:19px; margin-bottom:10px; }
.seo .step p{ font-size:14.5px; color:#aebfb8; }

/* ---------- Article ---------- */
.seo .article{ max-width:780px; margin:0 auto; }
.seo .article h2{ font-size:clamp(24px,3vw,32px); font-weight:800; margin:48px 0 18px; }
.seo .article h2:first-child{ margin-top:0; }
.seo .article h3{ font-size:20px; margin:30px 0 12px; }
.seo .article p{ margin-bottom:16px; color:#33473f; font-size:16.5px; }
.seo .article ul{ margin:0 0 18px 22px; color:#33473f; }
.seo .article ul li{ margin-bottom:8px; }
.seo .article a.inline-link{ color:var(--dark); font-weight:700; border-bottom:2px solid var(--lime); transition:.2s; }
.seo .article a.inline-link:hover{ background:var(--lime); }
.seo .callout{ background:var(--white); border-left:5px solid var(--lime); border-radius:12px; padding:22px 26px; margin:28px 0; font-size:15.5px; }
.seo .callout strong{ font-family:var(--font-display); }

/* ---------- Price factors ---------- */
.seo .price-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.seo .price-card{ background:var(--white); border-radius:var(--radius); padding:26px; display:flex; gap:18px; align-items:flex-start; }
.seo .price-card .dot{ flex:0 0 12px; width:12px; height:12px; border-radius:50%; background:var(--lime); margin-top:7px; box-shadow:0 0 0 5px rgba(200,241,53,.25); }
.seo .price-card h3{ font-size:17px; margin-bottom:6px; }
.seo .price-card p{ font-size:14.5px; color:var(--muted); }

/* ---------- FAQ ---------- */
.seo .faq{ max-width:780px; margin:0 auto; }
.seo .faq-item{ background:var(--white); border-radius:14px; margin-bottom:12px; overflow:hidden; border:1px solid rgba(17,56,47,.07); }
.seo .faq-q{ width:100%; background:none; border:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 24px; font-family:var(--font-display); font-weight:700; font-size:16.5px; text-align:left; color:var(--ink); }
.seo .faq-q .pm{ flex:0 0 30px; width:30px; height:30px; border-radius:50%; background:var(--cream); display:grid; place-items:center; font-size:18px; transition:.3s; }
.seo .faq-item.open .pm{ background:var(--lime); transform:rotate(45deg); }
.seo .faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.seo .faq-a p{ padding:0 24px 22px; color:var(--muted); font-size:15px; }

/* ---------- Areas / places ---------- */
.seo .areas{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.seo .area-pill{ background:var(--white); border:1.5px solid rgba(17,56,47,.12); border-radius:999px; padding:12px 22px; font-weight:600; font-size:15px; transition:.2s; display:inline-flex; align-items:center; gap:8px; }
.seo .area-pill:hover{ background:var(--dark); color:var(--white); border-color:var(--dark); }
.seo .places{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.seo .place-pill{ background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.18); color:#dfe8e2; border-radius:999px; padding:12px 22px; font-weight:600; font-size:15px; display:inline-flex; align-items:center; gap:8px; transition:.2s; }
.seo a.place-pill:hover{ background:var(--lime); color:var(--dark); border-color:var(--lime); }

/* ---------- CTA ---------- */
.seo .cta-box{ background:var(--darker); border-radius:28px; padding:64px 40px; text-align:center; position:relative; overflow:hidden; }
.seo .cta-box::before{ content:""; position:absolute; left:-120px; bottom:-120px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(200,241,53,.16),transparent 65%); }
.seo .cta-box h2{ color:var(--white); font-size:clamp(26px,3.4vw,38px); font-weight:800; margin-bottom:14px; position:relative; }
.seo .cta-box p{ color:#aebfb8; margin-bottom:30px; position:relative; }
.seo .cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; }

/* ---------- Reveal ----------
   The source script adds .visible; the theme's theme.js may add .in to shared
   selectors (e.g. .section-head). Honour both so nothing stays hidden. */
.seo .reveal{ opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease; }
.seo .reveal.visible,
.seo .reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .seo .hero-grid{ grid-template-columns:1fr; }
  .seo .bento{ grid-template-columns:repeat(2,1fr); }
  .seo .steps{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .seo .bento{ grid-template-columns:1fr; }
  .seo .price-grid{ grid-template-columns:1fr; }
  .seo section{ padding:64px 0; }
}