/* ===== CGS service pages (preview): brings inner service pages in line with the approved homepage =====
   Loaded after styles.css, site-v2.css and motion.css on pages with <body class="svc">.
   Layout and styling only; all copy lives in the HTML unchanged. */

/* ---------- Type scale (matches the homepage) ---------- */
.svc main h2 { font-weight: 600; letter-spacing: -0.03em; font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.05; }
.svc main h3 { letter-spacing: -0.02em; }
.svc em.it { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }

/* ---------- Buttons (match the homepage consultation pill) ---------- */
.svc .svc-cta {
  background: var(--paper); color: var(--ink); border-radius: 999px; padding: 1.05rem 1.6rem; font-size: 1rem;
  box-shadow: 0 0 0 5px rgba(243, 238, 227, .12);
  transition: background-color .35s ease, box-shadow .45s ease, translate .45s cubic-bezier(.16, 1, .3, 1), scale .2s ease;
}
.svc .svc-cta .arr { display: inline-block; margin-left: 6px; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.svc .svc-cta:hover, .svc .svc-cta:focus-visible { background: #fff; box-shadow: 0 0 0 8px rgba(243, 238, 227, .16), 0 14px 30px rgba(0, 0, 0, .28); }
.svc .svc-cta:hover .arr, .svc .svc-cta:focus-visible .arr { transform: translateX(4px); }
.svc .svc-cta:focus-visible { outline-color: var(--sage); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .svc .svc-cta:hover { translate: 0 -2px; }
}
.svc .svc-cta:active { scale: .98; }

/* ---------- Hero ---------- */
.svc-hero { overflow: hidden; overflow: clip; padding-block: clamp(48px, 6vw, 88px) clamp(56px, 7vw, 104px); }
.svc-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.svc-hero h1 { font-weight: 700; font-size: clamp(2.6rem, 5.6vw, 5rem); line-height: .95; letter-spacing: -0.048em; max-width: 11em; }
.svc-hero h1 em.it { display: block; color: var(--sage); font-size: 1.06em; letter-spacing: -0.025em; margin-top: .06em; }
.svc-hero .lead { margin-top: 26px; max-width: 31em; }
.svc-hero .hero-cta { margin-top: 32px; }
.svc-kicker { display: inline-flex; align-items: center; gap: 10px; }
.svc-kicker span { width: 28px; height: 2px; background: var(--sage); }

/* search illustration (decorative; reuses wording already on the site) */
.ga-visual { max-width: 540px; width: 100%; justify-self: end; }
.ga-stage { position: relative; padding: 8px 0 64px; }
.page-hero .ga-visual p.ga-note { margin-top: 10px; text-align: right; font-size: .8rem; color: var(--sage); }
.ga-search { background: var(--paper); color: var(--ink); border-radius: 22px; padding: 18px; box-shadow: 0 30px 60px rgba(0, 0, 0, .32); rotate: -1.5deg; }
.ga-bar { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--rule); border-radius: 999px; padding: 11px 16px; font-size: .95rem; }
.ga-icon { position: relative; flex: none; width: 13px; height: 13px; border: 2px solid var(--muted); border-radius: 50%; }
.ga-icon::after { content: ''; position: absolute; right: -5px; bottom: -4px; width: 6px; height: 2px; background: var(--muted); rotate: 45deg; }
.ga-q { white-space: nowrap; color: var(--ink); }
.ga-result { margin-top: 12px; border-radius: 14px; padding: 14px 16px; }
.ga-ad { background: #fff; border: 1.5px solid var(--ink); }
.page-hero .ga-visual p.ga-spons { font-size: .8rem; color: var(--muted); }
.page-hero .ga-visual p.ga-spons b { color: var(--ink); }
.page-hero .ga-visual p.ga-title { font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; line-height: 1.25; margin-top: 4px; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(31, 58, 46, .25); text-underline-offset: 3px; }
.page-hero .ga-visual p.ga-desc { font-size: .88rem; color: var(--ink-soft); margin-top: 4px; }
.ga-btn { display: inline-block; margin-top: 10px; font-size: .78rem; font-weight: 600; border: 1px solid var(--rule); border-radius: 999px; padding: 4px 12px; }
.ga-org { background: rgba(255, 255, 255, .55); border: 1px solid var(--rule); display: grid; gap: 7px; }
.ga-org i { display: block; height: 8px; width: 55%; border-radius: 4px; background: #c9cdc2; }
.ga-org i.s { height: 6px; width: 92%; background: var(--rule); }
.ga-org i.t { height: 6px; width: 70%; background: var(--rule); }
.ga-chip { position: absolute; left: -8px; bottom: 0; display: flex; align-items: center; gap: 12px; background: var(--paper); color: var(--ink); border-radius: 16px; padding: 14px 18px; box-shadow: 0 24px 50px rgba(0, 0, 0, .3); rotate: 1.5deg; }
.ga-chip .ok { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-size: .9rem; }
.ga-chip b { display: block; font-size: .98rem; }
.ga-chip small { display: block; font-size: .8rem; color: var(--muted); }

/* ---------- Split layout: heading stays in view beside the content ---------- */
.svc-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.svc-split > .section-head { position: sticky; top: 128px; margin-bottom: 0; }

/* numbered "What's included" list */
.svc-numbered { counter-reset: svc; }
.svc-numbered li { counter-increment: svc; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 14px; padding: 24px 12px; margin-inline: -12px; transition: background-color .3s ease; }
.svc-numbered li::before { content: counter(svc, decimal-leading-zero); grid-row: 1 / span 2; font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; color: var(--muted); padding-top: 3px; }
.svc-numbered li > * { grid-column: 2; }
.svc-numbered p { max-width: 40em; }
@media (hover: hover) { .svc-numbered li:hover { background: rgba(31, 58, 46, .04); } }

/* ---------- How campaigns are organized: each level sits inside the one above ---------- */
.nest, .nest ol { list-style: none; margin: 0; padding: 0; }
.nest li { display: grid; grid-template-columns: minmax(170px, 220px) minmax(0, 1fr); gap: 24px; padding: 24px; border-radius: 22px; border: 1px solid rgba(243, 238, 227, .22); }
.nest .lvl-2 { background: rgba(243, 238, 227, .05); }
.nest .lvl-3 { background: rgba(243, 238, 227, .09); }
.nest .lvl-4 { display: block; background: var(--paper); border-color: transparent; color: var(--ink-soft); box-shadow: 0 20px 44px rgba(0, 0, 0, .28); }
.nest .lvl { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); margin-bottom: 8px; }
.nest h3 { font-size: 1.3rem; margin-bottom: 8px; color: var(--paper); }
.nest p { font-size: .95rem; color: var(--on-dark); }
.nest .eg { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(185, 194, 181, .5); font-size: .9rem; color: var(--sage); }
.nest .eg b { display: block; font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--paper); margin-bottom: 2px; }
.nest .lvl-4 .lvl { color: var(--ink); }
.nest .lvl-4 h3 { color: var(--ink); }
.nest .lvl-4 p { color: var(--ink-soft); }
.nest .lvl-4 .eg { color: var(--muted); border-top-color: var(--rule); }
.nest .lvl-4 .eg b { color: var(--ink); }
.section-ink .tree-note { color: var(--sage); }

/* ---------- How it works: the homepage timeline ---------- */
.svc .timeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); padding-top: 10px; }
.svc .timeline::before { content: ''; position: absolute; left: 0; right: 0; top: 17px; height: 2px; background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 75%, var(--sage) 100%); opacity: .85; }
.svc .timeline li { position: relative; padding-top: 34px; }
.svc .tl-node { position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--paper-alt); border: 2px solid var(--ink); }
.svc .timeline li:last-child .tl-node { background: var(--ink); }
.svc .tl-num { display: block; font-family: var(--font-sans); font-weight: 700; font-size: clamp(2.6rem, 4.2vw, 3.6rem); line-height: 1; letter-spacing: -0.05em; color: var(--ink); margin-bottom: 14px; }
.svc .timeline h3 { font-size: 1.35rem; margin-bottom: 8px; }
.svc .timeline p { font-size: 0.98rem; max-width: 22em; }

/* ---------- Reporting: the report as a cream sheet on forest ---------- */
.report-panel { background: var(--paper); color: var(--ink-soft); border-radius: 24px; padding: clamp(22px, 3vw, 40px) clamp(20px, 3vw, 44px) clamp(10px, 1.5vw, 18px); box-shadow: 0 30px 60px rgba(0, 0, 0, .25); }
.report-panel h3 { color: var(--ink); }
.report-panel .report li { padding-inline: 12px; margin-inline: -12px; transition: background-color .3s ease; }
.report-panel .report li:last-child { border-bottom: 0; }
.report-panel .src { justify-self: start; display: inline-block; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--rule); background: var(--field); color: var(--ink); font-size: .8rem; font-weight: 600; }
@media (hover: hover) { .report-panel .report li:hover { background: rgba(31, 58, 46, .04); } }

/* ---------- Motion (none for reduced-motion visitors; nothing fades on the way out) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .svc-copy > * { animation: xaRise 1s cubic-bezier(.16, 1, .3, 1) both; }
  .js .svc-copy > :nth-child(-n+2) { animation: xaSettle .7s cubic-bezier(.16, 1, .3, 1) both; }
  .js .svc-copy > :nth-child(3) { animation-delay: .2s; }
  .js .svc-copy > :nth-child(4) { animation-delay: .3s; }

  /* search demo, about 3s end to end: card arrives, query types, results appear,
     the ad is chosen, the inquiry is recorded. Then a gentle float (desktop and tablet). */
  .js .ga-search { animation: xaIn .8s cubic-bezier(.16, 1, .3, 1) .15s both, gaFloat 7s ease-in-out 3.2s infinite alternate; }
  .js .ga-bar { animation: gaBar 1s ease .4s both; }
  .js .ga-q { animation: gaType .7s steps(17, end) .5s both; }
  .js .ga-ad { animation: xaIn .6s cubic-bezier(.16, 1, .3, 1) 1.25s both, gaFocus 1s ease 1.75s both; }
  .js .ga-org { animation: xaIn .6s cubic-bezier(.16, 1, .3, 1) 1.35s both; }
  .js .ga-org + .ga-org { animation-delay: 1.45s; }
  .js .ga-btn { animation: gaPress .5s ease 1.85s both; }
  .js .ga-chip { animation: xaFade .7s cubic-bezier(.34, 1.56, .64, 1) 2.25s both, gaFloat 8s ease-in-out 3.4s infinite alternate-reverse; }
  .js .svc-hero.is-paused * { animation-play-state: paused !important; }

  /* the nested levels arrive outer to inner */
  .js .nest li.reveal { transform: translateY(16px); }
  .js .nest li.reveal.is-visible { transform: none; }
}
@keyframes gaType { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes gaBar { 0% { border-color: var(--rule); } 15%, 85% { border-color: var(--ink); } 100% { border-color: var(--rule); } }
@keyframes gaFocus { 0% { box-shadow: 0 0 0 0 rgba(185, 194, 181, 0); } 30% { box-shadow: 0 0 0 7px rgba(185, 194, 181, .75); } 100% { box-shadow: 0 0 0 0 rgba(185, 194, 181, 0); } }
@keyframes gaPress { 0% { background: transparent; color: var(--ink); border-color: var(--rule); scale: 1; } 40% { scale: .92; } 100% { background: var(--ink); color: var(--paper); border-color: var(--ink); scale: 1; } }
@keyframes gaFloat { from { transform: translateY(0); } to { transform: translateY(-6px); } }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .svc-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .ga-visual { justify-self: center; max-width: 520px; }
}
@media (max-width: 900px) {
  .svc-split { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .svc-split > .section-head { position: static; margin-bottom: clamp(28px, 5vw, 40px); }
  .nest li { display: block; padding: 18px 16px; border-radius: 18px; }
  .nest li > ol { margin-top: 18px; }
  .svc .timeline { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
  .svc .timeline::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 80%, var(--sage) 100%); }
  .svc .timeline li { padding: 0 0 30px 40px; }
  .svc .timeline li:last-child { padding-bottom: 0; }
  .svc .tl-node { top: 4px; }
  .svc .tl-num { font-size: 2.2rem; margin-bottom: 8px; }
}
@media (max-width: 560px) {
  /* phones: no continuous float, to save battery */
  .js .ga-search { animation-name: xaIn, none; }
  .js .ga-chip { animation-name: xaFade, none; }
  .page-hero .ga-visual p.ga-note { text-align: left; }
  .ga-search { padding: 14px; rotate: -1deg; }
  .page-hero .ga-visual p.ga-title { font-size: 1.05rem; }
  .ga-chip { left: 0; padding: 12px 14px; }
  .svc-numbered li { grid-template-columns: 40px minmax(0, 1fr); }
}