/* ============================================================
   SEO AND GEO PAGE (services/seo-and-geo/ only, after site.css and
   service-page.css). Prefix sgx-. The layout, type and How it works are
   shared (service-page.css, svt- slots); this file styles only:
   1 the hero field - a column of search results drawn in brand blocks,
     under a faint search bar; one result lights cobalt and climbs to the
     top, one row at a time, while the others step down
   2 the widget - a search is typed, Example Ltd rises to the top of the
     results, then an AI answer cites it as a source (svc-seo.js steps
     .sgx-s1 to .sgx-s4)
   Both play once via [data-svt-in] (service-page.js). The plain rules are
   the finished state; the "before" states apply only under html.svt-on
   without reduced motion, so with reduced motion or no script everything
   shows its finished state.
   ============================================================ */
#site .svt-page { --sgx-mu2: #607086; }

/* ============ 1 HERO: the results field ============ */
/* 10 x 8 cells (44px at full size, it scales to its slot), faint slots
   as one tiled square, edges faded */
#site .sgx-vis { position: relative; width: min(100%, 440px); aspect-ratio: 10 / 8; container-type: inline-size; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 90%, transparent), linear-gradient(to bottom, #000 82%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 12%, #000 90%, transparent), linear-gradient(to bottom, #000 82%, transparent); mask-composite: intersect; }
#site .sgx-fd { --c: 10cqi; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Crect x='1' y='1' width='42' height='42' rx='3' fill='%230B1B33' fill-opacity='.02'/%3E%3C/svg%3E") 0 0 / var(--c) var(--c); }
/* the search bar along the top row */
#site .sgx-sbar { position: absolute; left: calc(var(--c) + 1px); top: calc(var(--c) * .14); width: calc(var(--c) * 8 - 2px); height: calc(var(--c) * .72);
  border: 1.5px solid rgba(11,27,51,.2); border-radius: 100px; background: #fff; color: rgba(11,27,51,.42); }
#site .sgx-sbar svg { position: absolute; left: calc(var(--c) * .26); top: 50%; width: calc(var(--c) * .34); height: auto; translate: 0 -50%; }
#site .sgx-sbar i { position: absolute; left: calc(var(--c) * .82); top: 50%; width: calc(var(--c) * 2.6); height: calc(var(--c) * .14); border-radius: 100px; background: rgba(11,27,51,.14); translate: 0 -50%; }
/* a result: its block, a title line and a shorter line */
#site .sgx-row { position: absolute; left: 0; top: calc(var(--y) * var(--c)); width: 100%; height: var(--c); }
#site .sgx-row i { position: absolute; display: block; }
#site .sgx-blk { left: calc(var(--c) + 1px); top: 1px; width: calc(var(--c) - 2px); height: calc(var(--c) - 2px); border-radius: 3px; background: var(--nvy); opacity: var(--o); }
#site .sgx-l1, #site .sgx-l2 { left: calc(var(--c) * 2.3); border-radius: 100px; background: var(--nvy); }
#site .sgx-l1 { top: calc(var(--c) * .27); width: calc(var(--w) * var(--c)); height: calc(var(--c) * .18); opacity: calc(var(--o) * .9); }
#site .sgx-l2 { top: calc(var(--c) * .58); width: calc(var(--w2) * var(--c)); height: calc(var(--c) * .13); opacity: calc(var(--o) * .6); }
/* the business, finished: cobalt, at the top */
#site .sgx-up .sgx-blk { background: var(--cb); opacity: 1; box-shadow: 0 10px 22px -10px rgba(44,95,216,.7); }
#site .sgx-up .sgx-l1 { background: var(--cb); opacity: .42; }
#site .sgx-up .sgx-l2 { background: var(--cb); opacity: .24; }

/* ============ 2 WHAT YOU GET: the search widget ============ */
#site .sgx-w { margin: 0; container-type: inline-size; }
#site .sgx-card { --h: max(50px, 13.5cqi); padding: 6cqi; border: 1px solid rgba(11,27,51,.08); border-radius: 14px; background: #fff;
  box-shadow: 0 1px 1px rgba(11,27,51,.04), 0 2px 6px -2px rgba(11,27,51,.08), 0 40px 80px -36px rgba(11,27,51,.45); }
#site .sgx-top { display: flex; align-items: center; gap: 3cqi; }
#site .sgx-q { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2.4cqi; height: max(42px, 11cqi); padding: 0 4cqi;
  border: 1px solid rgba(11,27,51,.16); border-radius: 100px; font-size: max(14px, 3.7cqi); color: var(--svt-ink); white-space: nowrap; overflow: hidden; }
#site .sgx-q svg { flex: none; width: max(15px, 4cqi); height: auto; color: var(--sgx-mu2); }
#site .sgx-caret { display: none; width: 1.5px; height: 1.15em; margin-left: calc(-2.4cqi + 1px); background: var(--cb); }
#site .sgx-tag { flex: none; font-family: var(--svt-mono); font-size: max(12.5px, 2.9cqi); line-height: 1; text-transform: uppercase; letter-spacing: .03em; color: var(--sgx-mu2);
  padding: 1.6cqi 2.4cqi; border: 1px solid var(--svt-ln); border-radius: 100px; }
#site .sgx-k { display: flex; align-items: center; gap: 1.6cqi; margin: 6cqi 0 2cqi; font-family: var(--svt-mono); font-size: max(12.5px, 2.9cqi); line-height: 1.3;
  text-transform: uppercase; letter-spacing: .03em; color: var(--sgx-mu2); }
#site .sgx-k svg { width: max(15px, 3.8cqi); height: auto; fill: var(--cb); }
/* the results: four rows placed by --p, so the business can rise */
#site .sgx-res { position: relative; height: calc(var(--h) * 4); }
#site .sgx-r { position: absolute; left: 0; right: 0; top: calc(var(--p) * var(--h)); height: var(--h); display: flex; align-items: center; gap: 3.4cqi;
  padding: 0 2.6cqi; border-radius: 8px; box-shadow: inset 0 -1px 0 var(--svt-ln2); }
#site .sgx-r:last-child { box-shadow: none; }
#site .sgx-fav { flex: none; width: max(22px, 6.4cqi); height: max(22px, 6.4cqi); border-radius: 4px; background: rgba(11,27,51,.1); }
#site .sgx-rt { display: flex; flex-direction: column; min-width: 0; }
#site .sgx-rt b { font-size: max(14.5px, 3.8cqi); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--svt-ink); }
#site .sgx-rt em { font-style: normal; font-size: max(13px, 3.2cqi); line-height: 1.35; color: var(--svt-mu); }
#site .sgx-sk { flex: 1; display: flex; flex-direction: column; gap: 1.6cqi; }
#site .sgx-sk i { display: block; width: var(--w); height: max(7px, 2cqi); border-radius: 100px; background: rgba(11,27,51,.08); }
#site .sgx-sk i + i { height: max(6px, 1.6cqi); background: rgba(11,27,51,.055); }
/* the business, finished: on top and lit */
#site .sgx-me { background: rgba(44,95,216,.06); box-shadow: inset 2px 0 0 var(--cb); }
#site .sgx-me .sgx-fav { background: var(--cb); }
/* the AI answer, citing it */
#site .sgx-ai { margin-top: 5cqi; padding: 4.6cqi 5cqi 5cqi; border: 1px solid rgba(44,95,216,.14); border-radius: 10px; background: #F5F8FE; }
#site .sgx-ai .sgx-k { margin-top: 0; }
#site .sgx-ans { margin: 0; font-size: max(14.5px, 3.9cqi); line-height: 1.5; color: var(--svt-ink); }
#site .sgx-ans mark { white-space: nowrap; padding: 0 .2em; border-radius: 3px; font-weight: 600; color: #1E4BB8; background: rgba(44,95,216,.12); }
#site .sgx-src { display: flex; flex-wrap: wrap; align-items: center; gap: 2cqi; margin-top: 4cqi; }
#site .sgx-sl { font-size: max(13px, 3.2cqi); color: var(--svt-mu); margin-right: 1cqi; }
#site .sgx-chip { display: inline-flex; align-items: center; gap: 1.6cqi; height: max(30px, 7.6cqi); padding: 0 3cqi; border: 1px solid rgba(44,95,216,.35); border-radius: 100px;
  background: #fff; font-size: max(13px, 3.2cqi); font-weight: 500; color: var(--svt-ink); }
#site .sgx-chip i { display: block; width: max(10px, 2.4cqi); height: max(10px, 2.4cqi); border-radius: 2px; background: var(--cb); }
#site .sgx-blank { border-color: var(--svt-ln2); }
#site .sgx-blank i { background: rgba(11,27,51,.14); }
#site .sgx-blank b { display: block; width: max(44px, 11cqi); height: max(7px, 1.8cqi); border-radius: 100px; background: rgba(11,27,51,.08); }

/* the heading on two lines ("In the results, / and in the answer.") */
/* a narrow widget: drop the blank second source so the row stays on one line */
@container (max-width: 360px) {
  #site .sgx-blank { display: none; }
  #site .sgx-q { padding: 0 3.4cqi; }
}

@media (max-width: 900px) {
  /* the field cropped under the copy: the search bar and the six rows */
  #site .sgx-vis { width: min(100%, 400px); aspect-ratio: 10 / 7.4; }
}

/* ============ the once-only motions ============ */
@keyframes sgx-climb {
  0%   { translate: 0 calc(var(--c) * 5); animation-timing-function: cubic-bezier(.6,0,.3,1); }
  14%, 20% { translate: 0 calc(var(--c) * 4); animation-timing-function: cubic-bezier(.6,0,.3,1); }
  34%, 40% { translate: 0 calc(var(--c) * 3); animation-timing-function: cubic-bezier(.6,0,.3,1); }
  54%, 60% { translate: 0 calc(var(--c) * 2); animation-timing-function: cubic-bezier(.6,0,.3,1); }
  74%, 80% { translate: 0 var(--c); animation-timing-function: cubic-bezier(.6,0,.3,1); }
  94%, 100% { translate: 0 0; }
}
@keyframes sgx-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  /* hero: the business starts at the bottom, navy like the rest, lights
     cobalt, then climbs a row per hop (2.2s, a hop every .44s); each row it
     passes steps down one at the same moment */
  html.svt-on #site .sgx-vis .sgx-row { translate: 0 calc(var(--c) * -1); }
  html.svt-on #site .sgx-vis .sgx-up { translate: 0 calc(var(--c) * 5); }
  html.svt-on #site .sgx-vis .sgx-up .sgx-blk { background: var(--nvy); opacity: .18; box-shadow: none; }
  html.svt-on #site .sgx-vis .sgx-up .sgx-l1, html.svt-on #site .sgx-vis .sgx-up .sgx-l2 { background: var(--nvy); opacity: .1; }
  html.svt-on #site .sgx-vis.svt-in .sgx-row { translate: 0 0; transition: translate .31s cubic-bezier(.6,0,.3,1) calc(1s + var(--s) * .44s); }
  html.svt-on #site .sgx-vis.svt-in .sgx-up { translate: 0 0; transition: none; animation: sgx-climb 2.2s linear 1s both; }
  html.svt-on #site .sgx-vis.svt-in .sgx-up .sgx-blk { background: var(--cb); opacity: 1; box-shadow: 0 10px 22px -10px rgba(44,95,216,.7);
    transition: background-color .5s ease .3s, opacity .5s ease .3s, box-shadow .6s ease 3.2s; }
  html.svt-on #site .sgx-vis.svt-in .sgx-up .sgx-l1 { background: var(--cb); opacity: .42; transition: background-color .5s ease .3s, opacity .5s ease .3s; }
  html.svt-on #site .sgx-vis.svt-in .sgx-up .sgx-l2 { background: var(--cb); opacity: .24; transition: background-color .5s ease .3s, opacity .5s ease .3s; }

  /* widget: the query types (svc-seo.js), the results come in with the
     business in last place (s1), it rises to the top while the others step
     down (s2), the AI answer appears (s3) and cites it (s4) */
  html.svt-on #site .sgx-w.sgx-typing .sgx-caret { display: block; animation: sgx-blink .9s steps(1) infinite; }
  html.svt-on #site .sgx-w .sgx-r { opacity: 0; transform: translateY(8px); translate: 0 calc(var(--h) * -1); }
  html.svt-on #site .sgx-w .sgx-me { translate: 0 calc(var(--h) * 3); background: transparent; box-shadow: inset 0 -1px 0 var(--svt-ln2); }
  html.svt-on #site .sgx-w .sgx-me .sgx-fav { background: rgba(11,27,51,.1); }
  html.svt-on #site .sgx-w.sgx-s1 .sgx-r { opacity: 1; transform: none; transition: opacity .4s ease calc(var(--p) * .07s), transform .5s ease calc(var(--p) * .07s); }
  html.svt-on #site .sgx-w.sgx-s1 .sgx-me { transition-delay: .21s; }
  html.svt-on #site .sgx-w.sgx-s2 .sgx-r { translate: 0 0; transition: opacity .4s ease, transform .5s ease, translate .8s cubic-bezier(.65,0,.25,1); }
  html.svt-on #site .sgx-w.sgx-s2 .sgx-me { background: rgba(44,95,216,.06); box-shadow: inset 2px 0 0 var(--cb);
    transition: opacity .4s ease, transform .5s ease, translate .8s cubic-bezier(.65,0,.25,1), background-color .5s ease .6s, box-shadow .5s ease .6s; }
  html.svt-on #site .sgx-w.sgx-s2 .sgx-me .sgx-fav { background: var(--cb); transition: background-color .5s ease .5s; }
  html.svt-on #site .sgx-w .sgx-ai { opacity: 0; transform: translateY(10px); }
  html.svt-on #site .sgx-w.sgx-s3 .sgx-ai { opacity: 1; transform: none; transition: opacity .5s ease, transform .6s cubic-bezier(.16,.6,.18,1); }
  html.svt-on #site .sgx-w .sgx-ans mark { color: inherit; background: transparent; }
  html.svt-on #site .sgx-w.sgx-s4 .sgx-ans mark { color: #1E4BB8; background: rgba(44,95,216,.12); transition: color .4s ease, background-color .4s ease; }
  html.svt-on #site .sgx-w .sgx-chip { opacity: 0; transform: scale(.92); }
  html.svt-on #site .sgx-w.sgx-s3 .sgx-blank { opacity: 1; transform: none; transition: opacity .4s ease .3s, transform .4s ease .3s; }
  html.svt-on #site .sgx-w.sgx-s4 .sgx-chip:not(.sgx-blank) { opacity: 1; transform: none; transition: opacity .35s ease .15s, transform .45s cubic-bezier(.3,1.4,.5,1) .15s; }
}