/* ==========================================================================
   /services/seo — page-only styles (shared ones are in service.css)
   ========================================================================== */

/* ---------- Hero art: a results page where we climb to #1 ----------
   Four 60px results stacked absolutely; each slides between the four slots
   (8/78/148/218px) on a 9s loop. Ours starts last and ends top, then the
   crown pops. The lens drifts (seoLensIdle) until motion.js takes over on
   pointer move. All still for reduced motion. */
.seo-art {
    justify-self: center;
    width: min(100%, 420px);
    position: relative;
    cursor: none;
}
.seo-serp {
    background: var(--c-white);
    border: 3px solid var(--c-ink);
    box-shadow: 0 10px 0 var(--c-ink);
    border-radius: var(--r-card);
    padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
    transform: rotate(-2deg);
}
.seo-serp__search {
    display: flex; align-items: center; gap: 10px;
    border: 3px solid var(--c-ink); border-radius: var(--r-pill);
    padding: 8px 14px; background: var(--c-cream);
}
.seo-serp__search svg { flex: none; display: block; }
.seo-serp__query { font-family: ui-monospace, monospace; font-size: 13px; font-weight: 700; }
.seo-serp__results { position: relative; height: 288px; }

.seo-result {
    position: absolute; left: 14px; right: 14px; top: 0; height: 60px;
    border-radius: 16px; padding: 10px 14px;
    display: flex; gap: 12px; align-items: center;
    animation: 9s cubic-bezier(.34, 1.3, .5, 1) infinite;
}
.seo-result--a { animation-name: seoRankA; }
.seo-result--b { animation-name: seoRankB; }
.seo-result--c { animation-name: seoRankC; }
.seo-result--you {
    border: 3px solid var(--c-ink); padding: 8px 12px; z-index: 2;
    animation-name: seoRankYou;
}
.seo-result__fav {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    background: var(--c-white); border: 2px solid var(--c-ink);
}
.seo-result__lines { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.seo-result__title { height: 10px; border-radius: 5px; background: var(--c-ink); opacity: .55; }
.seo-result__url   { height: 7px;  border-radius: 4px; background: var(--c-ink); opacity: .3; }
.seo-w35 { width: 35%; }
.seo-w45 { width: 45%; }
.seo-w55 { width: 55%; }
.seo-w60 { width: 60%; }
.seo-w70 { width: 70%; }
.seo-w80 { width: 80%; }

.seo-result__logo { flex: none; display: block; }
.seo-result__you { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.seo-result__name { font-family: var(--f-display); font-weight: 800; font-size: 16px; line-height: 1.1; }
.seo-result__domain { font-size: 12px; font-weight: 600; }
.seo-result__crown {
    flex: none; background: var(--c-yellow); border: 3px solid var(--c-ink);
    border-radius: 14px 14px 14px 4px; padding: 3px 9px;
    font-family: var(--f-display); font-weight: 800; font-size: 16px;
    animation: seoCrown 9s infinite;
}

/* The magnifying glass */
.seo-lens {
    position: absolute; left: 0; top: 0; width: 110px; height: 110px;
    pointer-events: none; z-index: 3;
    animation: seoLensIdle 6s ease-in-out infinite;
}
.seo-lens__handle {
    position: absolute; left: 84px; top: 84px; width: 20px; height: 54px;
    border-radius: 10px; background: var(--c-ink);
    transform: rotate(-45deg); transform-origin: 10px 0;
}
.seo-lens__glass {
    position: absolute; inset: 0; border-radius: 50%;
    border: 7px solid var(--c-ink);
    background: rgba(255, 248, 241, .28);
    box-shadow: inset 0 0 0 4px var(--c-yellow);
}
.seo-lens__shine {
    position: absolute; left: 24px; top: 20px; width: 22px; height: 10px;
    border-radius: 6px; background: var(--c-white); opacity: .85;
    transform: rotate(-35deg);
}

@keyframes seoRankYou {
    0%, 12% { transform: translateY(218px); }
    28% { transform: translateY(148px); }
    44% { transform: translateY(78px); }
    60%, 88% { transform: translateY(8px); opacity: 1; }
    92% { opacity: 0; }
    96% { transform: translateY(218px); opacity: 0; }
    100% { transform: translateY(218px); opacity: 1; }
}
@keyframes seoRankA { 0%, 52% { transform: translateY(8px); }   60%, 90% { transform: translateY(78px); }  100% { transform: translateY(8px); } }
@keyframes seoRankB { 0%, 36% { transform: translateY(78px); }  44%, 90% { transform: translateY(148px); } 100% { transform: translateY(78px); } }
@keyframes seoRankC { 0%, 20% { transform: translateY(148px); } 28%, 90% { transform: translateY(218px); } 100% { transform: translateY(148px); } }
@keyframes seoCrown {
    0%, 58% { opacity: 0; transform: scale(.4) rotate(-20deg); }
    64%, 88% { opacity: 1; transform: scale(1) rotate(-8deg); }
    93%, 100% { opacity: 0; transform: scale(.4); }
}
@keyframes seoLensIdle {
    0%, 100% { transform: translate(220px, 70px) rotate(0); }
    50% { transform: translate(160px, 40px) rotate(-6deg); }
}

/* Reduced motion: the finished state, held — us on top, crown on, lens
   resting over the result rather than every row piled into slot one. */
@media (prefers-reduced-motion: reduce) {
    .seo-art, .seo-art * { animation: none !important; }
    .seo-result--you { transform: translateY(8px); }
    .seo-result--a   { transform: translateY(78px); }
    .seo-result--b   { transform: translateY(148px); }
    .seo-result--c   { transform: translateY(218px); }
    .seo-result__crown { transform: rotate(-8deg); }
    .seo-lens { transform: translate(220px, 70px); }
}

/* ==========================================================================
   Free instant SEO check (#seo-check)
   Not in the design: built from the contact form's parts — the yellow panel,
   the cream form card, .field inputs — with a magnifier that scans a little
   page while it runs (the hero lens, scaled down) and the results card below.
   Driven by /assets/js/pages/service-seo.js; partials/seo-check-results.php
   is the same card server-rendered for the no-JavaScript path.
   ========================================================================== */

.seo-check { display: flex; flex-direction: column; gap: 24px; scroll-margin-top: 24px; }

.seo-check__panel {
    background: var(--c-yellow);
    border-radius: var(--r-panel);
    padding: clamp(24px, 4vw, 48px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}

.seo-check__intro { display: flex; flex-direction: column; gap: 18px; }
.seo-check__intro .svc-eyebrow { color: var(--c-ink); }
.seo-check__intro .h2 { text-wrap: balance; }
.seo-check__lede { font-size: 19px; line-height: 1.55; font-weight: 500; max-width: 560px; text-wrap: pretty; }

.seo-check__ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.seo-check__ticks li {
    position: relative; padding-left: 34px;
    font-size: 16px; font-weight: 600; line-height: 1.45;
}
.seo-check__ticks li::before {
    content: ''; position: absolute; left: 0; top: 0;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--c-cream); border: 2px solid var(--c-ink);
}
.seo-check__ticks li::after {
    content: ''; position: absolute; left: 7px; top: 4px;
    width: 6px; height: 11px;
    border: solid var(--c-ink); border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.seo-check__form {
    background: var(--c-cream);
    border-radius: var(--r-card);
    padding: 24px;
    display: flex; flex-direction: column; gap: 16px;
    min-width: 0;
}

.seo-check__opt { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; font-weight: 600; line-height: 1.4; cursor: pointer; }
.seo-check__box {
    flex: none; width: 22px; height: 22px; margin: 0;
    accent-color: var(--c-pink);
}

.seo-check__send { min-height: 64px; display: flex; align-items: center; padding-bottom: 6px; }
.seo-check__consent { font-size: 14px; line-height: 1.5; font-weight: 500; }
.seo-check__consent a { text-decoration: underline; font-weight: 700; }

/* ---------- "Checking your site…": the lens scanning a tiny page ---------- */
.seo-scan { display: flex; align-items: center; gap: 16px; }
.seo-scan__page {
    position: relative; flex: none;
    width: 92px; height: 58px;
    background: var(--c-white); border: 3px solid var(--c-ink); border-radius: 12px;
    box-shadow: 0 4px 0 var(--c-ink);
    padding: 9px 10px;
    display: flex; flex-direction: column; gap: 7px;
    overflow: visible;
}
.seo-scan__line { display: block; height: 6px; border-radius: 3px; background: var(--c-ink); opacity: .35; }
.seo-scan__line--a { width: 80%; opacity: .55; }
.seo-scan__line--b { width: 60%; }
.seo-scan__line--c { width: 70%; }
.seo-scan__lens {
    position: absolute; left: -6px; top: -8px; width: 40px; height: 40px;
    animation: seoScan 1.6s ease-in-out infinite alternate;
}
.seo-scan__glass {
    position: absolute; inset: 0; border-radius: 50%;
    border: 4px solid var(--c-ink);
    background: rgba(255, 248, 241, .35);
    box-shadow: inset 0 0 0 2px var(--c-yellow);
}
.seo-scan__handle {
    position: absolute; left: 31px; top: 31px; width: 8px; height: 20px;
    border-radius: 4px; background: var(--c-ink);
    transform: rotate(-45deg); transform-origin: 4px 0;
}
.seo-scan__text { font-weight: 700; font-size: 16px; }

@keyframes seoScan {
    0%   { transform: translate(0, 0) rotate(-6deg); }
    35%  { transform: translate(40px, 8px) rotate(4deg); }
    70%  { transform: translate(14px, 20px) rotate(-2deg); }
    100% { transform: translate(56px, 14px) rotate(6deg); }
}

/* ---------- Results card ---------- */
.seo-check__results:focus { outline: none; }

.seo-res {
    background: var(--c-white);
    border: 3px solid var(--c-ink);
    box-shadow: var(--sh-ink);
    border-radius: var(--r-card);
    padding: clamp(20px, 4vw, 40px);
    display: flex; flex-direction: column; gap: 24px;
    animation: hdPop .6s var(--ease-pop) both;
}

.seo-res__head { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }

.seo-res__ring { position: relative; flex: none; width: 132px; height: 132px; }
.seo-res__svg { display: block; }
.seo-res__track { fill: var(--c-cream); stroke: var(--c-line); stroke-width: 14; }
.seo-res__fill {
    fill: none; stroke: var(--tone); stroke-width: 14; stroke-linecap: round;
    animation: seoRing 1.1s cubic-bezier(.34, 1.2, .5, 1) .15s both;
}
@keyframes seoRing { from { stroke-dashoffset: 100; } }

.seo-res__score {
    position: absolute; inset: 0;
    display: flex; align-items: baseline; justify-content: center; padding-top: 44px;
    font-family: var(--f-display); font-weight: 800;
}
.seo-res__num { font-size: 40px; line-height: 1; }
.seo-res__of { font-size: 15px; margin-left: 2px; }

.seo-res--good { --tone: var(--c-teal); }
.seo-res--ok   { --tone: var(--c-yellow); }
.seo-res--poor { --tone: var(--c-pink); }

.seo-res__summary { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 260px; }
.seo-res__for { font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.seo-res__title { font-family: var(--f-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; }
.seo-res__counts { display: flex; flex-wrap: wrap; gap: 8px; }

.seo-pill {
    display: inline-flex; align-items: center;
    padding: 5px 12px; border-radius: var(--r-pill);
    border: 2px solid var(--c-ink);
    font-size: 14px; font-weight: 700;
}
.seo-pill--fail { background: var(--c-pink-tint); }
.seo-pill--warn { background: var(--c-yellow-tint); }
.seo-pill--pass { background: var(--c-teal-tint); }

.seo-res__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }

.seo-item {
    display: flex; gap: 14px; align-items: flex-start;
    border-radius: var(--r-item);
    padding: 16px 18px;
}
.seo-item--fail { background: var(--c-pink-tint); }
.seo-item--warn { background: var(--c-yellow-tint); }
.seo-item--pass { background: var(--c-teal-tint); }

.seo-item__icon {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid var(--c-ink);
    display: flex; align-items: center; justify-content: center;
}
.seo-item--fail .seo-item__icon { background: var(--c-pink); }
.seo-item--warn .seo-item__icon { background: var(--c-yellow); }
.seo-item--pass .seo-item__icon { background: var(--c-teal); }
.seo-item__svg { display: block; fill: none; stroke: var(--c-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.seo-item--fail .seo-item__svg { stroke: var(--c-white); }

.seo-item__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.seo-item__label { font-family: var(--f-display); font-weight: 800; font-size: 19px; line-height: 1.2; }
.seo-item__tag {
    display: inline-block; vertical-align: 2px; margin-right: 4px;
    background: var(--c-white); border: 2px solid var(--c-ink); border-radius: var(--r-pill);
    padding: 1px 8px;
    font-family: var(--f-body); font-size: 12px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
}
.seo-item__found { font-size: 16px; line-height: 1.5; font-weight: 500; overflow-wrap: anywhere; }
.seo-item__fix { font-size: 16px; line-height: 1.5; }
.seo-item__why { font-size: 14px; line-height: 1.5; color: var(--c-muted); }

.seo-res__passed { border-top: 2px dashed var(--c-line); padding-top: 18px; }
.seo-res__passed > .seo-res__list { margin-top: 14px; }
.seo-res__passed-sum {
    cursor: pointer; font-weight: 700; font-size: 17px;
    display: inline-flex; align-items: center; gap: 10px;
}
.seo-res__passed-sum::marker { color: var(--c-pink); }

.seo-res__cta {
    background: var(--c-lilac-tint); border-radius: var(--r-item);
    padding: clamp(18px, 3vw, 28px);
    display: flex; flex-direction: column; gap: 12px;
}
.seo-res__cta-title { font-family: var(--f-display); font-weight: 800; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.1; }
.seo-res__cta-text { font-size: 17px; line-height: 1.55; max-width: 680px; }
.seo-res__note { font-size: 13px; font-weight: 500; color: var(--c-muted); }

@media (prefers-reduced-motion: reduce) {
    .seo-scan__lens, .seo-res, .seo-res__fill { animation: none; }
    .seo-scan__lens { transform: translate(28px, 10px); }
}