/* 77 Media · SERVICE PAGE STANDARD (8 Sep 2026)
   ------------------------------------------------------------------
   One structure for every service page: hero · why us · process ·
   plans and pricing · price comparison · happy clients · FAQ · book the call.

   Everything here is scoped under `.svcstd` so it cannot reach the homepage,
   the FAQ page or the portfolio pages, all of which also load theme.css.
   A page joins the standard by adding `svcstd` to its <section class="section svcpage">
   and linking this sheet after theme.css.

   Ported, not reinvented: the testimonial block is the homepage's `.tst`
   component (site.css), the contact block is the homepage's `.cta` + `.form`
   (index.html inline). The FAQ accordion needs no CSS here: `.faq__*` already
   lives in theme.css, which every page loads.
   ================================================================== */

/* ---------- sticky needs an unclipped ancestor ----------
   `.skyzone` carried `overflow:hidden`, which silently disabled EVERY
   `position:sticky` inside it: the testimonial cards never stacked and the
   process panel never held. `.sky` does its own clipping of the clouds, so the
   wrapper does not need to. Found 8 Sep 2026 by walking the ancestors of a
   `.tst__card` and reading their computed overflow. This sheet is loaded only
   by service pages, so the rule reaches nothing else. */
.skyzone{overflow:visible}

/* ---------- anchors clear the sticky nav (theme.css covers the older ids) ---------- */
.svcstd #whyus,.svcstd #upkeep,.svcstd #costs,.svcstd #testimonials,.svcstd #faq{scroll-margin-top:100px}

/* ---------- hero headline, sized up 8 Sep 2026 on Nitin's word ----------
   Scoped at .svcstd so it beats both the page's own `.svcp__h1--big` and
   theme.css's `.svcp__h1`, whichever of the two would otherwise win. */
.svcstd .svcp__h1--big{font-size:clamp(38px,6.4vw,74px);line-height:.98;letter-spacing:-.045em}
@media (max-width:760px){
  .svcstd .svcp__h1--big{font-size:clamp(34px,8.6vw,50px)}
}

/* ---------- shared: centred section head ---------- */
/* ---------- section heads sit just under the hero H1 (theme.css sets 56px, the H1 renders 54) ---------- */
.svcstd .svcp__h2{font-size:clamp(26px,3.6vw,42px);margin-top:clamp(56px,7vw,92px)}
.svcstd h3.svcp__h2{font-size:clamp(21px,2.6vw,30px);margin-top:clamp(34px,4vw,52px)}
.svcstd .svcp__h2--mid{text-align:center}
.svcstd .svcp__lede--mid{text-align:center;max-width:62ch;margin-left:auto;margin-right:auto}

/* ==================================================================
   1 · WHY US. The homepage why-card, with a two line heading and the
   points as a short list instead of a paragraph.
   ================================================================== */
.svcstd .why-grid--3{grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){
  .svcstd .why-grid--3{grid-template-columns:repeat(3,1fr)}
}
.svcstd .why-grid--3 .why-card:nth-child(5){background:linear-gradient(160deg,var(--tl1),var(--tl2))}
.svcstd .why-grid--3 .why-card:nth-child(6){background:linear-gradient(160deg,var(--ts1),var(--ts2))}
.svcstd .why-card__t{min-height:2.4em}
.svcstd .why-card__pts{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.svcstd .why-card__pts li{position:relative;padding-left:22px;font-size:14px;line-height:1.6;color:#3B3B45}
.svcstd .why-card__pts li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--purple);opacity:.85}
/* On a phone the six cards stack the way the happy-clients cards do: each one
   sticks 12px lower than the last, so they pile up as you scroll instead of
   scrolling past one at a time. Nitin, 8 Sep 2026. The pile only reads if the
   cards are opaque and lifted, hence the shadow. */
@media (max-width:640px){
  .svcstd .why-grid--3{display:flex;flex-direction:column;gap:14px}
  .svcstd .why-card__t{min-height:0}
  .svcstd .why-grid--3 .why-card{position:sticky;top:calc(86px + var(--i,0) * 12px);box-shadow:0 14px 34px rgba(10,1,28,.10)}
  .svcstd .why-grid--3 .why-card:nth-child(1){--i:0}
  .svcstd .why-grid--3 .why-card:nth-child(2){--i:1}
  .svcstd .why-grid--3 .why-card:nth-child(3){--i:2}
  .svcstd .why-grid--3 .why-card:nth-child(4){--i:3}
  .svcstd .why-grid--3 .why-card:nth-child(5){--i:4}
  .svcstd .why-grid--3 .why-card:nth-child(6){--i:5}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){
  .svcstd .why-grid--3 .why-card{position:static}
}

/* ==================================================================
   2 · PROCESS. After 21st.dev Serenity UI "feature-section" (@ayushmxxn),
   read from its bundled preview. Steps down the left, dimmed except the live
   one; a panel on the right that swaps per step.

   Pass 2 (8 Sep 2026, Nitin): a numbered rail with an arrow between the steps,
   "Step 1 · Day 0" labels, and the panels' own contents animated in rather
   than the panel simply appearing. Cadence cut from 3.8s to 2.6s.
   ================================================================== */
.svcstd .flow{margin-top:26px;display:grid;gap:28px;grid-template-columns:1fr}
@media (min-width:900px){
  .svcstd .flow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,56px);align-items:start}
}
.svcstd .flow__steps{order:2;margin:0;padding:0;list-style:none}
.svcstd .flow__li{list-style:none}
.svcstd .flow__stage{order:1;position:relative;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(165deg,var(--tl1),var(--tl2));border:1px solid var(--border);min-height:230px}
@media (min-width:900px){
  .svcstd .flow__steps{order:1}
  .svcstd .flow__stage{order:2;min-height:400px;position:sticky;top:118px}
}
.svcstd .flow__step{display:flex;align-items:flex-start;gap:16px;width:100%;padding:0 6px 22px;font:inherit;background:transparent;border:0;text-align:left;cursor:pointer;opacity:.34;transition:opacity .35s var(--ease-out)}
.svcstd .flow__li--last .flow__step{padding-bottom:0}
.svcstd .flow__step.is-live{opacity:1}

/* the rail: circle, then a line down to the next circle with an arrow head */
.svcstd .flow__rail{flex:none;display:flex;flex-direction:column;align-items:center;align-self:stretch}
.svcstd .flow__num{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--border-strong);background:var(--grey);color:var(--ink);font-size:15px;font-weight:800;transition:transform .35s var(--ease-out),background-color .35s var(--ease-out),border-color .35s var(--ease-out),color .35s var(--ease-out)}
.svcstd .flow__step.is-live .flow__num{background:var(--purple);border-color:var(--purple);color:#fff;transform:scale(1.1)}
.svcstd .flow__num i{font-style:normal}
.svcstd .flow__step.is-live .flow__num i{font-size:0}
.svcstd .flow__step.is-live .flow__num i::before{content:"\2713";font-size:18px}
.svcstd .flow__line{flex:1;width:2px;min-height:26px;margin:8px 0 0;position:relative;background:linear-gradient(180deg,var(--border-strong),var(--border-strong));border-radius:2px}
.svcstd .flow__line::after{content:"";position:absolute;left:50%;bottom:0;width:9px;height:9px;transform:translate(-50%,2px) rotate(45deg);border-right:2px solid var(--border-strong);border-bottom:2px solid var(--border-strong)}
.svcstd .flow__step.is-live .flow__line,.svcstd .flow__step.is-live .flow__line::after{background:var(--purple);border-color:var(--purple)}
.svcstd .flow__step.is-live .flow__line::after{background:transparent}
.svcstd .flow__li--last .flow__line{display:none}

.svcstd .flow__body{display:block;padding-bottom:2px}
.svcstd .flow__meta{display:block;font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--purple-deep)}
.svcstd .flow__meta i{font-style:normal;opacity:.45;margin:0 2px}
.svcstd .flow__t{display:block;margin:4px 0 0;font-size:clamp(17px,2vw,20px);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.svcstd .flow__d{display:block;margin:5px 0 0;font-size:15px;line-height:1.62;color:var(--text-muted)}

.svcstd .flow__panel{position:absolute;inset:0;display:grid;place-items:center;padding:20px;opacity:0;transform:translateY(46px) rotateX(-12deg);transform-origin:50% 100%;transition:opacity .38s var(--ease-out),transform .38s var(--ease-out);pointer-events:none}
.svcstd .flow__panel.is-live{opacity:1;transform:none}
.svcstd .flow__panel svg{width:100%;height:auto;max-width:450px;filter:drop-shadow(0 18px 34px rgba(10,1,28,.12))}

/* the parts inside a panel animate in, so the step is shown happening */
.svcstd .flow__panel .fx{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.svcstd .flow__panel.is-live .fx{animation:svcRise .42s var(--ease-out) both;animation-delay:var(--d,0s)}
.svcstd .flow__panel.is-live .fx--pop{animation-name:svcPop;animation-duration:.46s}
.svcstd .flow__panel .fx--grow{transform-origin:0% 50%}
.svcstd .flow__panel.is-live .fx--grow{animation-name:svcGrow;animation-duration:.5s}
.svcstd .flow__panel .fx--draw{stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400)}
.svcstd .flow__panel.is-live .fx--draw{animation:svcDraw .8s var(--ease-out) both;animation-delay:var(--d,0s)}
.svcstd .flow__panel.is-live .svcblink{animation:svcPop .46s var(--ease-out) both,svcBlink 1.6s ease-in-out .6s infinite}
@keyframes svcRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes svcPop{0%{opacity:0;transform:scale(.55)}60%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
@keyframes svcGrow{from{opacity:1;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes svcDraw{to{stroke-dashoffset:0}}
@keyframes svcBlink{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){
  .svcstd .flow__step,.svcstd .flow__panel{transition:none}
  .svcstd .flow__step{opacity:1}
  .svcstd .flow__panel .fx,.svcstd .flow__panel .fx--draw{opacity:1;animation:none;stroke-dashoffset:0;transform:none}
}

/* ==================================================================
   3 · UPKEEP. Three highlighted care plans under the build packages,
   in place of the seven row comparison table that used to sit here.
   ================================================================== */
.svcstd .upk{margin-top:20px;display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:760px){
  .svcstd .upk{grid-template-columns:repeat(3,1fr)}
}
.svcstd .upk__c{position:relative;padding:24px 22px;border-radius:var(--r-card);background:linear-gradient(165deg,var(--tl1),var(--tl2));border:1px solid var(--border)}
.svcstd .upk__c:nth-child(2){background:linear-gradient(165deg,var(--ts1),var(--ts2))}
.svcstd .upk__c:nth-child(3){background:linear-gradient(165deg,var(--tm1),var(--tm2))}
.svcstd .upk__amt{display:flex;align-items:baseline;gap:6px;font-size:32px;font-weight:800;letter-spacing:-.04em;color:var(--ink)}
.svcstd .upk__amt span{font-size:14px;font-weight:700;letter-spacing:0;color:var(--text-subtle)}
.svcstd .upk__for{margin:4px 0 0;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--purple-deep)}
.svcstd .upk__hero{margin:14px 0 0;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.82);font-size:16px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.svcstd .upk__l{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.svcstd .upk__l li{position:relative;padding-left:20px;font-size:14px;line-height:1.55;color:#3B3B45}
.svcstd .upk__l li::before{content:"\2713";position:absolute;left:0;top:0;font-size:12px;font-weight:800;color:var(--purple-deep)}

/* ==================================================================
   4 · PRICE COMPARISON. Only providers that publish a price, every
   heading and every cell centred.
   ================================================================== */
.svcstd .cmp--mkt th,.svcstd .cmp--mkt td{text-align:center;vertical-align:middle}
.svcstd .cmp--mkt thead th{font-size:13.5px;letter-spacing:.02em}
.svcstd .cmp--mkt tbody th span{display:block;margin-top:3px;font-size:12.5px;font-weight:600;color:var(--text-subtle)}
.svcstd .cmp--mkt .mkt__us th,.svcstd .cmp--mkt .mkt__us td{background:var(--lavender-tint);border-top:2px solid var(--purple)}
.svcstd .cmp--mkt thead th{background:var(--grey);color:var(--text-subtle)}
/* the notes under a centred section sit under the middle of it, not off to the left */
.svcstd .plan-note{margin-left:auto;margin-right:auto}

/* ==================================================================
   5 · HAPPY CLIENTS. site.css `.tst`, verbatim, scoped.
   ================================================================== */
.svcstd .tst{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start;margin-top:26px}
.svcstd .tst__left{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.svcstd .tst__badge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;border:0;background:var(--grey);padding:5px 12px;font-size:14px;color:var(--text-subtle)}
.svcstd .tst__badge i{width:8px;height:8px;border-radius:50%;background:#22C4A0}
.svcstd .tst__left .h2{margin:0}
.svcstd .tst__sub{margin:0;font-size:18px;line-height:1.55;color:var(--text-subtle);max-width:44ch}
.svcstd .tst__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%;margin-top:6px}
.svcstd .tst__stat{border:0;border-radius:14px;padding:18px 14px;text-align:center;background:linear-gradient(160deg,var(--tl1),var(--tl2))}
.svcstd .tst__stats .tst__stat:nth-child(2){background:linear-gradient(160deg,var(--ts1),var(--ts2))}
.svcstd .tst__stats .tst__stat:nth-child(3){background:linear-gradient(160deg,var(--tm1),var(--tm2))}
.svcstd .tst__stats .tst__stat:nth-child(4){background:linear-gradient(160deg,var(--tp1),var(--tp2))}
.svcstd .tst__n{margin:0;font-size:clamp(26px,2.4vw,32px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.svcstd .tst__l{margin:6px 0 0;font-size:14px;color:var(--text-subtle)}
.svcstd .tst__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.svcstd .tst__cards{display:flex;flex-direction:column;gap:18px}
.svcstd .tst__card{background:#fff;border:0;border-radius:18px;padding:24px;box-shadow:0 20px 50px rgba(10,1,28,.08)}
.svcstd .tst__head{display:flex;align-items:center;gap:16px}
.svcstd .tst__av{width:56px;height:56px;flex:none;border-radius:14px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px;letter-spacing:-.02em}
.svcstd .tst__name{margin:0;font-size:18px;font-weight:600;color:var(--ink)}
.svcstd .tst__role{margin:2px 0 0;font-size:14px;color:var(--text-subtle)}
.svcstd .tst__rating{display:flex;align-items:center;gap:8px;margin:16px 0}
.svcstd .tst__rating b{font-size:16px;color:var(--ink)}
.svcstd .tst__stars{display:flex;gap:2px;color:#F5B301}
.svcstd .tst__quote{margin:0;font-size:16.5px;line-height:1.6;color:var(--text-subtle)}
@media (min-width:1024px){
  .svcstd .tst{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  /* room after the last card lands, so the stack is legible rather than a flash */
  .svcstd .tst__cards{min-height:calc(100vh + 460px)}
  .svcstd .tst__card{position:sticky;top:calc(104px + var(--i,0) * 24px)}
  .svcstd .tst__left{position:sticky;top:104px}
}
@media (max-width:520px){
  .svcstd .tst__stats{gap:10px}
  .svcstd .tst__stat{padding:14px 10px}
  .svcstd .tst__card{padding:20px}
}

/* ==================================================================
   6 · BOOK THE CALL. The homepage `.cta` block and `.form`, scoped.
   ================================================================== */
.svcstd .cta__wrap{display:grid;gap:clamp(36px,5vw,64px);grid-template-columns:minmax(0,1fr);align-items:start;margin-top:26px}
.svcstd .cta__wrap>*{min-width:0}
@media (min-width:1000px){
  .svcstd .cta__wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(48px,6vw,88px)}
}
.svcstd .cta__left{display:flex;flex-direction:column;gap:clamp(28px,3.5vw,44px)}
.svcstd .cta__live{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--text-muted)}
.svcstd .cta__live i{width:9px;height:9px;border-radius:50%;background:#2DD4BF;box-shadow:0 0 0 0 rgba(45,212,191,.55);animation:svcPulse 2.2s ease-out infinite}
.svcstd .cta__details{display:grid;grid-template-columns:1fr;gap:20px 32px}
@media (min-width:560px){
  .svcstd .cta__details{grid-template-columns:auto auto auto;justify-content:space-between}
}
.svcstd .cta__detail{display:flex;flex-direction:column;gap:5px;min-width:0}
.svcstd .cta__dk{font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--text-subtle)}
.svcstd .cta__dv{font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.svcstd a.cta__dv:hover{color:var(--purple-deep);text-decoration:underline;text-underline-offset:3px}
.svcstd .cta__sep{border:0;height:1px;background:var(--border);margin:0}
.svcstd .cta__trust{display:flex;flex-direction:column;gap:18px}
.svcstd .cta__marq{overflow:hidden;min-width:0;max-width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.svcstd .cta__marq-row{display:flex;width:max-content;animation:svcMarquee 28s linear infinite}
.svcstd .cta__marq-set{display:flex;align-items:center;gap:clamp(34px,4vw,56px);padding-right:clamp(34px,4vw,56px)}
.svcstd .cta__marq-set img{height:28px;width:auto;filter:grayscale(1);opacity:.72}
@media (hover:hover){
  .svcstd .cta__marq:hover .cta__marq-row{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .svcstd .cta__live i{animation:none}
  .svcstd .cta__marq-row{animation:none;flex-wrap:wrap;width:auto}
  .svcstd .cta__marq{-webkit-mask-image:none;mask-image:none}
  .svcstd .cta__marq-set[aria-hidden]{display:none}
}
.svcstd .form{padding:32px 28px;background:var(--white);border:0;border-radius:var(--r-card);box-shadow:0 30px 70px rgba(10,1,28,.10)}
.svcstd .form__title{font-size:clamp(22px,2.4vw,26px);font-weight:800;letter-spacing:-.025em;color:var(--ink);margin:0 0 22px}
.svcstd .form__lbl{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.svcstd .form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.svcstd .form__check{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.5;color:var(--ink-soft);cursor:pointer;position:relative}
.svcstd .form__check input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.svcstd .form__box{flex:none;width:20px;height:20px;margin-top:1px;border-radius:6px;border:1.5px solid var(--border-strong);background:var(--surface);display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:background-color var(--t-mid) var(--ease-out),border-color var(--t-mid) var(--ease-out)}
.svcstd .form__check input:checked+.form__box{background:var(--purple-deep);border-color:var(--purple-deep)}
.svcstd .form__check input:focus-visible+.form__box{outline:3px solid var(--purple);outline-offset:2px}
.svcstd .form__check a{color:var(--purple-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.svcstd .field.has-error .form__box{border-color:#C93A3A}
.svcstd .form__bad{font-size:13.5px;font-weight:600;line-height:1.5;color:#C93A3A;margin:0}
.svcstd .form__bad a{color:inherit}
.svcstd .form__grid{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:560px){
  .svcstd .form__grid{grid-template-columns:1fr 1fr}
}
.svcstd .field{display:flex;flex-direction:column;gap:8px}
.svcstd .field--full{grid-column:1/-1}
.svcstd .field label{font-size:13px;font-weight:700;letter-spacing:-.005em;color:var(--ink-soft)}
.svcstd .field label .req{color:var(--purple-deep);margin-left:2px}
.svcstd .field input,.svcstd .field select,.svcstd .field textarea{width:100%;min-height:52px;padding:14px 16px;background:var(--surface);color:var(--ink);border:1.5px solid var(--border-strong);border-radius:var(--r-md);font-size:16px;transition:border-color var(--t-mid) var(--ease-out),background-color var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out);appearance:none;-webkit-appearance:none}
.svcstd .field textarea{min-height:118px;resize:vertical;line-height:1.6}
.svcstd .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B36D4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px;cursor:pointer}
.svcstd .field select option{background:#fff;color:var(--ink)}
.svcstd .field input::placeholder,.svcstd .field textarea::placeholder{color:var(--text-subtle)}
@media (hover:hover) and (pointer:fine){
  .svcstd .field input:hover,.svcstd .field select:hover,.svcstd .field textarea:hover{border-color:var(--purple)}
}
.svcstd .field input:focus,.svcstd .field select:focus,.svcstd .field textarea:focus{outline:none;border-color:var(--purple);background:#fff;box-shadow:0 0 0 4px rgba(130,78,235,.14)}
.svcstd .field__err{font-size:12.5px;font-weight:600;color:#C93A3A;display:none;align-items:center;gap:6px}
.svcstd .field.has-error .field__err{display:flex}
.svcstd .field.has-error input,.svcstd .field.has-error select,.svcstd .field.has-error textarea{border-color:#E05252;background:rgba(224,82,82,.06)}
.svcstd .form__foot{margin-top:24px;display:flex;flex-direction:column;gap:14px}
.svcstd .form__legal{font-size:12.5px;line-height:1.6;color:var(--text-subtle)}
.svcstd .form__ok{display:none;align-items:flex-start;gap:12px;padding:16px 18px;border-radius:var(--r-md);background:var(--lavender-tint);border:0;font-size:14.5px;line-height:1.6;color:var(--ink)}
.svcstd .form__ok.is-shown{display:flex}
.svcstd .form__ok svg{flex:none;margin-top:2px;color:var(--purple-deep)}
.svcstd .spinner{width:17px;height:17px;border-radius:50%;border:2px solid rgba(255,255,255,.32);border-top-color:#fff;animation:svcSpin .7s linear infinite;display:none}
.svcstd .btn.is-busy .spinner{display:block}

@keyframes svcPulse{0%{box-shadow:0 0 0 0 rgba(45,212,191,.55)}70%{box-shadow:0 0 0 9px rgba(45,212,191,0)}100%{box-shadow:0 0 0 0 rgba(45,212,191,0)}}
@keyframes svcSpin{to{transform:rotate(360deg)}}
@keyframes svcMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==================================================================
   7 · FAQ, iMessage style. After 21st.dev `@ruixen.ui/scroll-faqaccordion`,
   read from its bundle 8 Sep 2026: the question is a grey bubble on the left
   with a plus beside it, and the answer arrives as a coloured bubble on the
   right, the way a reply lands in a chat. Nitin set this as the FAQ standard
   for every service page.
   ================================================================== */
.svcstd .qa{margin-top:30px;max-width:820px;margin-left:auto;margin-right:auto}
.svcstd .qa__i{margin-bottom:20px}
.svcstd .qa__q{display:flex;align-items:center;gap:14px;width:100%;padding:0;background:transparent;border:0;cursor:pointer;text-align:left;font:inherit}
.svcstd .qa__bub{position:relative;max-width:min(100%,620px);padding:13px 20px;border-radius:20px 20px 20px 6px;background:var(--grey);color:var(--ink);font-size:16.5px;font-weight:600;line-height:1.45;letter-spacing:-.01em;transition:background-color var(--t-mid) var(--ease-out),transform var(--t-mid) var(--ease-out)}
.svcstd .qa__q[aria-expanded="true"] .qa__bub{background:var(--lavender-tint)}
@media (hover:hover) and (pointer:fine){
  .svcstd .qa__q:hover .qa__bub{background:var(--lavender-tint);transform:translateY(-1px)}
}
.svcstd .qa__ico{flex:none;position:relative;width:24px;height:24px;color:var(--text-subtle);transition:transform var(--t-mid) var(--ease-out),color var(--t-mid) var(--ease-out)}
.svcstd .qa__ico::before,.svcstd .qa__ico::after{content:"";position:absolute;top:50%;left:50%;background:currentColor;border-radius:2px;transform:translate(-50%,-50%)}
.svcstd .qa__ico::before{width:14px;height:2px}
.svcstd .qa__ico::after{width:2px;height:14px}
.svcstd .qa__q[aria-expanded="true"] .qa__ico{transform:rotate(135deg);color:var(--purple-deep)}
.svcstd .qa__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows 360ms var(--ease-out)}
.svcstd .qa__q[aria-expanded="true"] + .qa__a{grid-template-rows:1fr}
.svcstd .qa__a > div{overflow:hidden;display:flex;justify-content:flex-end;padding-left:clamp(30px,7vw,72px)}
.svcstd .qa__ans{margin:12px 0 0;max-width:min(100%,560px);padding:14px 20px;border-radius:20px 20px 6px 20px;background:linear-gradient(150deg,var(--purple),var(--purple-deep));color:#fff;font-size:15.5px;line-height:1.68;opacity:0;transform:translateY(8px);transition:opacity var(--t-mid) var(--ease-out),transform var(--t-mid) var(--ease-out)}
.svcstd .qa__q[aria-expanded="true"] + .qa__a .qa__ans{opacity:1;transform:none;transition-delay:110ms}
@media (max-width:640px){
  .svcstd .qa__bub{font-size:15.5px;padding:12px 16px}
  .svcstd .qa__ans{font-size:15px;padding:13px 17px}
}
@media (prefers-reduced-motion:reduce){
  .svcstd .qa__a{transition:none}
  .svcstd .qa__ans{transition:none}
}

/* ==================================================================
   8 · The feature-heavy pass (8 Sep 2026, after daydreamsites.com/services).
   Package cards now group their inclusions under small headings, and the
   contract promises moved out of the six cards into one quiet strip so the
   cards can be about what we actually do.
   ================================================================== */
.svcstd .pcard__grp{list-style:none;display:block;margin:16px 0 2px;padding:0;font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--purple-deep)}
.svcstd .pcard__grp[data-first]{margin-top:2px}
.svcstd .pcard__feats{gap:9px}
.svcstd .pcard__feat{font-size:13.5px;line-height:1.42}
.svcstd .pcard__feat .chk{width:19px;height:19px}
.svcstd .pcard__feat .chk svg{width:11px;height:11px}

.svcstd .trustrow{margin-top:22px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.svcstd .trustpill{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:var(--grey);font-size:13.5px;font-weight:700;color:var(--ink-soft)}
.svcstd .trustpill::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#22C4A0}

/* three bullets a card now, so the headings need less forced height */
.svcstd .why-card__t{min-height:2.4em}
.svcstd .why-card__pts li{font-size:13.5px;line-height:1.55}
@media (max-width:640px){
  .svcstd .trustpill{font-size:12.5px;padding:8px 13px}
}

/* The ladder, borrowed from the homepage plan cards: each tier says what it
   does NOT include and which tier buys it, so moving up has a named price.
   Nitin, 8 Sep 2026. */
.svcstd .pcard__ntitle{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--text-subtle)}
.svcstd .pcard__nots{margin-top:9px;gap:7px}
.svcstd .pcard__not{font-size:13px;line-height:1.45}
.svcstd .pcard--popular .pcard__ntitle{border-top-color:var(--border-strong)}