@charset "utf-8";

/* index2: one section = one screen. main.js snaps section to section (body.page-snap);
   js/snap-fit.js zooms a section's content down only when it still overflows the screen. */

#s-seo .seo-step__desc { margin-top: 12px; font-size: 16px; line-height: 1.6; letter-spacing: -.02em; color: var(--mute); word-break: keep-all; }

@media (min-width: 1101px) {
  .page-snap { --snap-top: calc(var(--header-h) + 2.6svh); --snap-bot: 3.4svh; }

  .page-snap [data-fit] > * { zoom: var(--fit, 1); }

  .page-snap .sec:not(.award),
  .page-snap #main > .faq,
  .page-snap #main > .contact-sec { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100svh; padding: var(--snap-top) 0 var(--snap-bot); }

  /* common heads */
  .page-snap .sec-head { margin-bottom: 4svh; }
  .page-snap .sec-head__label { margin-bottom: 1.8svh; }
  .page-snap .sec-head__title { font-size: clamp(36px, 5.4svh, 60px); }
  .page-snap .sec-head__desc { font-size: clamp(16px, 1.9svh, 19px); }

  /* 01 hero */
  .page-snap .hero { height: 100svh; }
  .page-snap .hero__cover { min-height: 0; flex: 1; padding-bottom: 15svh; }
  .page-snap .hero__title { margin-top: 4svh; }

  /* 02 seo */
  .page-snap #s-seo .sec-head { margin-bottom: 4svh; }
  /* video on the left, steps on the right */
  .page-snap #s-seo .seo-body { display: grid; grid-template-columns: var(--seo-media) minmax(0, 1fr); align-items: stretch; gap: 24px; }
  .page-snap #s-seo .seo-body__media { grid-column: 1; grid-row: 1; }
  .page-snap #s-seo .seo-body__text { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; padding-left: 32px; }
  .page-snap #s-seo .seo-steps { flex: 1; grid-template-columns: max-content minmax(0, 1fr); grid-auto-rows: 1fr; gap: 0 48px; }
  .page-snap #s-seo .seo-body__desc { max-width: 680px; margin-top: 3svh; font-size: clamp(16px, 1.9svh, 19px); font-weight: 400; }
  .page-snap #s-seo .seo-step { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; padding: 1.6svh 0; }
  .page-snap #s-seo .seo-step__desc { margin: 0; font-size: clamp(15px, 1.7svh, 16px); white-space: nowrap; }
  .page-snap #s-seo .seo-step:last-child { border-bottom: 1px solid var(--line); }
  .page-snap #s-seo .seo-step__top { gap: 18px; }
  .page-snap #s-seo .seo-step__top .seo-step__tag { font-size: clamp(24px, 3.2svh, 34px); }
  .page-snap #s-seo .seo-step__top .seo-step__title { font-size: clamp(20px, 2.6svh, 28px); white-space: nowrap; }
  .page-snap #s-seo { --seo-media: min(54vw, calc(38svh * 1072 / 680)); }
  .page-snap #s-seo .seo-body__media { width: var(--seo-media); margin: 0; border-radius: 24px; }
  .page-snap #s-seo .seo-step__img { margin-top: 1.4svh; }
  .page-snap #s-seo .seo-step__img img { width: auto; height: 22svh; max-width: 88%; }
  .page-snap #s-seo .seo-scope { margin-top: 3.6svh; padding: 3svh 44px; gap: 40px; }
  .page-snap .seo-scope__title { font-size: clamp(24px, 3.3svh, 38px); }
  .page-snap .seo-scope__cards li { padding: 2.4svh 26px; }
  .page-snap .seo-scope__lead { margin-top: 1.4svh; font-size: clamp(18px, 2.2svh, 22px); }
  .page-snap .seo-scope__desc { margin-top: 1svh; font-size: 15px; line-height: 1.6; }
  /* scope box on the left, start-here CTA on the right */
  .page-snap #s-seo .seo-foot { display: grid; grid-template-columns: minmax(0, 1fr) var(--seo-media); gap: 24px; margin-top: 3.6svh; }
  .page-snap #s-seo .seo-foot .seo-scope { grid-template-columns: 1fr; gap: 2.4svh; margin-top: 0; }
  .page-snap #s-seo .seo-foot .seo-scope__title { margin-top: 1svh; font-size: clamp(22px, 2.9svh, 32px); }
  .page-snap #s-seo .seo-foot .seo-scope__title br { display: none; }
  .page-snap #s-seo .seo-cta { flex-direction: column; justify-content: center; align-items: stretch; gap: 3svh; margin-top: 0; padding: 3svh 36px; border: 1px solid var(--line); border-radius: 28px; }
  .page-snap #s-seo .seo-cta .seo__sub { font-size: clamp(22px, 2.8svh, 28px); }
  .page-snap #s-seo .seo-cta__btns { flex-direction: column; gap: 10px; }
  .page-snap #s-seo .seo-cta__btns .btn { justify-content: center; width: 100%; }
  .page-snap .seo__sub { font-size: clamp(22px, 3svh, 32px); }
  .page-snap .seo__note { margin-top: 1svh; }

  /* 03 admin: headline on the left, the page builder video on the right, sized by height to fit one screen */
  .page-snap .admin .inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; column-gap: 56px; }
  .page-snap .admin__label { grid-column: 1; align-self: end; margin-bottom: 2.4svh; }
  .page-snap .admin__head { grid-column: 1; grid-template-columns: 1fr; align-self: start; align-content: start; gap: 3svh; }
  .page-snap .admin__title { font-size: clamp(36px, 5.4svh, 60px); font-weight: 700; }
  .page-snap .admin__pill { font-size: 14px; }
  .page-snap .admin__pill--4 { margin-left: 118px; }
  .page-snap .admin__desc { font-size: clamp(16px, 1.9svh, 19px); font-weight: 400; }
  .page-snap .admin__cta { justify-self: start; }
  .page-snap .admin__media { grid-column: 2; grid-row: 1 / 3; grid-template-columns: 1fr; width: min(44vw, calc((100svh - var(--header-h) - 12svh - 4.8svh - 72px) * 1072 / 680)); margin: 0; }
  .page-snap .admin__card { border-radius: 24px; }
  .page-snap .admin__cap { padding: 2.2svh 28px 2.6svh; }
  .page-snap .admin__cap b { font-size: clamp(18px, 2.2svh, 24px); }

  /* 04 why */
  .page-snap .why-col { padding: 6.4svh 40px 7.4svh; }
  .page-snap .why-col__head .why-col__en { font-size: min(64px, 15cqw, 6.4svh); }
  .page-snap .why-col__art { --s: .62; width: 130px; height: min(110px, 11svh); }
  .page-snap .why-col__title { margin-top: 2.4svh; font-size: clamp(20px, 2.5svh, 26px); }
  .page-snap .why-col ul { margin-top: 2.4svh; }
  .page-snap .why-col li { padding: 1.4svh 0 1.4svh 18px; font-size: clamp(15px, 1.75svh, 18px); }
  .page-snap .why-col li::before { top: calc(1.4svh + .62em); }

  /* 06 portfolio: the wheel takes whatever height the head leaves; the more button rides the faded edge */
  .page-snap .work__wheel { --cw: clamp(200px, min(23vw, (100svh - 410px) / 1.42), 420px); }
  .page-snap #s-work .sec-more { position: relative; z-index: 2; margin-top: -60px; }

  /* 07 benefit */
  .page-snap #s-benefit .sec-head { margin-bottom: 3svh; }
  .page-snap .benefit__sum strong { font-size: clamp(64px, 9svh, 120px); }
  .page-snap .benefit__sum strong i { font-size: clamp(22px, 2.6svh, 32px); }
  .page-snap .benefit__sum span { margin-top: 1.2svh; font-size: clamp(16px, 1.9svh, 19px); font-weight: 400; }
  .page-snap .benefit-col h3 { padding-bottom: 1.4svh; font-size: clamp(18px, 2.1svh, 22px); }
  .page-snap .benefit-col li { min-height: 4.6svh; }
  .page-snap .benefit-col li b { font-size: clamp(15px, 1.75svh, 18px); }
  .page-snap .benefit-col li em { font-size: 13px; }
  .page-snap .benefit-cost { gap: 40px; margin-top: 3svh; padding: 2.6svh 44px; }
  .page-snap .benefit-cost__copy { container-type: inline-size; }
  .page-snap .benefit-cost__title { margin-top: 1svh; font-size: clamp(22px, 2.8svh, 34px); }
  .page-snap .benefit-cost__desc { margin-top: 1svh; font-size: 15px; line-height: 1.6; }
  @container (min-width: 720px) {
    .page-snap .benefit-cost__title { font-size: min(34px, 2.8svh, 3.15cqi); white-space: nowrap; }
    .page-snap .benefit-cost__desc { font-size: min(15px, 1.9cqi); letter-spacing: -.03em; white-space: nowrap; }
  }
  .page-snap .benefit-cost .cost__formula { margin-top: 1.8svh; padding: 1.6svh 22px; }
  .page-snap .benefit-cost .cost__formula + .benefit-cost__desc { margin-top: 1.8svh; }
  .page-snap .cost__eq { margin-top: 1svh; font-size: 16px; }
  .page-snap .cost__term { padding: 8px 14px; }
  .page-snap .cost__eq-note { margin-top: .8svh; font-size: 13px; }
  .page-snap .cost__head .cost__eq-note { margin-top: 0; }
  .page-snap .cost-sum { padding: 2.4svh 26px; }
  .page-snap .cost-sum__bars { gap: 1.4svh; margin-top: 1.4svh; }
  .page-snap .cost-sum__save { margin-top: 1.8svh; padding-top: 1.6svh; }
  .page-snap .cost-sum__save b { font-size: clamp(30px, 3.6svh, 42px); }

  /* 08 clients */
  .page-snap .client .sec-head { margin-bottom: 3.2svh; }
  .page-snap .marquee { gap: 10px; }
  .page-snap .marquee li { height: min(96px, 10.5svh); }
  .page-snap .marquee img { width: min(190px, 16vw); }

  /* 09 care: the live board stretches to the left column instead of forcing 480px */
  .page-snap .care__inner { gap: 72px; }
  .page-snap .care__left .sec-head__desc { margin-top: 2svh; }
  .page-snap .care__kpi { margin-top: 3.4svh; }
  .page-snap .care__kpi div { padding: 2.2svh 26px 2.4svh; }
  .page-snap .care__kpi dd { margin-top: .8svh; font-size: clamp(40px, 5.4svh, 56px); }
  .page-snap .care__chart { height: 19svh; margin: 3svh 0 0; padding: 2svh 28px 1.6svh; }
  .page-snap .care__board { padding: 3svh 40px; }
  .page-snap .care__board-head { padding-bottom: 1.6svh; }
  .page-snap .care__viewport { min-height: 0; }
  .page-snap .care__feed li { height: max(52px, 6.4svh); }
  .page-snap .care__foot { margin-top: 1.8svh; }

  /* 10 faq: heading on the left, questions on the right */
  .page-snap #main > .faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 48px; align-content: center; }
  .page-snap .faq__list { gap: 1.1svh; margin: 0; max-width: none; }
  .page-snap .faq-item__q { grid-template-columns: minmax(0, 1fr) min(80px, 7svh); gap: 16px; }
  .page-snap .faq-item__txt { padding: 2svh 28px; font-size: clamp(17px, 2svh, 21px); }
  .page-snap .faq-item__ico { width: min(80px, 7svh); height: min(80px, 7svh); }
  .page-snap .faq-item__a p { width: min(760px, calc(100% - 96px)); padding: 0 28px 2.4svh; font-size: 16px; line-height: 1.65; }

  /* 11 contact */
  .page-snap .contact { margin-top: 0; padding: 5svh 56px; }
  .page-snap .contact__title { margin-top: 1.8svh; font-size: clamp(32px, 4svh, 42px); }
  .page-snap .contact__reach { margin-top: 3.4svh; }
  .page-snap .contact__tel { font-size: clamp(52px, 6.8svh, 72px); }
  .page-snap .contact__links { margin-top: 3svh; }
  .page-snap .contact__visit { margin-top: 3.6svh; padding-top: 2.4svh; }
  .page-snap .quick { padding: 3.6svh 40px; }
  .page-snap .quick__title { margin-bottom: 2.2svh; }
  .page-snap .quick__row { margin-bottom: 1.6svh; }
  .page-snap .quick__row input[type="text"], .page-snap .quick__row input[type="tel"] { height: min(56px, 5.6svh); }
  .page-snap .quick__agree { margin: 2svh 0; }
}

/* every section below the hero shares one on-screen width; --side keeps it clear of the
   fixed demo buttons (left, 171px) and the chatbot with its Hi! bubble (right, ~130px).
   boxes inside [data-fit] are zoomed by snap-fit, so their width is divided by --fit */
@media (min-width: 1241px) {
  .page-snap { --side: 200px; --wide: min(1760px, 100vw - var(--side) * 2); }
  .page-snap #s-seo .inner,
  .page-snap #s-admin .inner,
  .page-snap #s-why .inner,
  .page-snap #s-benefit .inner,
  .page-snap #s-client .inner,
  .page-snap #s-care .inner,
  .page-snap #main > .contact-sec .inner { width: calc(var(--wide) / var(--fit, 1)); }
  .page-snap #s-why .why__cols { margin-inline: 0; }
  .page-snap #s-work .inner,
  .page-snap #main > .faq { width: var(--wide); }
  .page-snap .award-h { --edge: calc((100% - var(--wide)) / 2); }
}

.page-snap .award-h { cursor: grab; touch-action: pan-y; }
.page-snap .award-h.is-drag { cursor: grabbing; user-select: none; }

/* 1101–1360px: the contact box stacks, so keep the map row short */
@media (min-width: 1101px) and (max-width: 1360px) {
  .page-snap .contact { gap: 3svh; }
  .page-snap .contact__map { min-height: 220px; }
}