.svc-page{ margin:0; background:#f3f7fb; color:#0b1f3f;
font-family:"Be Vietnam Pro","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
font-size:clamp(16px,1.05vw,17.5px); line-height:1.65; -webkit-font-smoothing:antialiased }
.svc-page *,.svc-page *::before,.svc-page *::after{ box-sizing:border-box }
.svc-in{ max-width:1180px; margin:0 auto; padding:0 clamp(20px,5vw,48px) }
.svc-narrow{ max-width:880px }
.svc-eyebrow{ margin:0 0 .7em; font-size:.8rem; font-weight:800; letter-spacing:.18em;
text-transform:uppercase; color:var(--lane) }
.svc-page h2{ margin:0 0 1em; font-size:clamp(1.6rem,3vw,2.4rem); font-weight:800;
line-height:1.12; letter-spacing:-.01em; color:#0b1f3f }
.svc-hero{ position:relative; color:#fff; overflow:hidden;
background:radial-gradient(120% 90% at 80% 0%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%),
linear-gradient(160deg,#0459bd 0%,#00287d 100%);
padding:clamp(48px,7vw,110px) 0 clamp(56px,8vw,120px) }
.svc-hero::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:clamp(8px,1vw,14px);
background:var(--lane) }
.svc-hero-in{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(24px,5vw,72px);
align-items:center }
.svc-hero .svc-eyebrow{ color:#ffc72c }
.svc-hero h1{ margin:0; font-size:clamp(2.1rem,5vw,4rem); font-weight:900; line-height:1.02;
letter-spacing:-.02em; text-wrap:balance }
.svc-tag{ margin:.45em 0 0; font-size:clamp(1.25rem,2.2vw,1.75rem); font-weight:600; line-height:1.25;
color:#ffc72c }
.svc-lead p{ margin:0 0 .8em }
.svc-lead p:last-child{ margin-bottom:0 }
.svc-lead{ margin:1.1em 0 0; max-width:40em; font-size:clamp(1.05rem,1.45vw,1.25rem); font-weight:500;
line-height:1.6; color:rgba(255,255,255,.94) }
.svc-acts{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2em }
.svc-hero-sign{ justify-self:center; display:grid; place-items:center;
width:min(100%,300px); aspect-ratio:1; border-radius:28px; background:var(--lane);
border:3px solid #fff; box-shadow:0 26px 60px rgba(0,10,45,.45), 0 6px 16px rgba(0,10,45,.28);
transform:rotate(-3deg) }
.svc-hero-sign img{ width:62%; height:auto; display:block; filter:drop-shadow(0 6px 10px rgba(0,0,0,.25)) }
.svc-btn{ display:inline-grid; place-items:center; min-height:3.3em; padding:0 1.8em;
border-radius:.55em; background:#ffc72c; color:#0b2247; font-weight:800; letter-spacing:.02em;
text-decoration:none; text-transform:uppercase; font-size:.95rem;
box-shadow:0 4px 14px rgba(0,0,0,.18); transition:transform .18s ease, box-shadow .18s ease, background .18s ease }
.svc-btn:hover{ background:#ffd45a; transform:translateY(-1px); box-shadow:0 7px 22px rgba(0,0,0,.24) }
.svc-btn--ghost{ background:transparent; color:#fff; box-shadow:none; border:2px solid rgba(255,255,255,.6) }
.svc-btn--ghost:hover{ background:rgba(255,255,255,.1); border-color:#fff }
.svc-btn:focus-visible{ outline:3px solid #fff; outline-offset:3px }
.svc-block{ padding:clamp(56px,8vw,110px) 0 }
.svc-grid{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(16px,2vw,24px);
grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.svc-grid li{ background:#fff; border-radius:14px; padding:1.5em 1.5em 1.6em;
border-top:5px solid var(--lane); box-shadow:0 10px 30px rgba(11,31,63,.08) }
.svc-grid h3{ margin:0 0 .45em; font-size:1.12rem; font-weight:800; line-height:1.3 }
.svc-grid p{ margin:0 0 .7em; color:#33445e; font-weight:400 }
.svc-grid p:last-child{ margin-bottom:0 }
.svc-grid p:first-of-type:not(:only-of-type){ color:#0b1f3f; font-weight:600 }
.svc-band{ background:#fff; border-top:1px solid rgba(11,31,63,.08); padding:clamp(52px,7vw,96px) 0 }
.svc-band .svc-in{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(20px,4vw,56px); align-items:center }
.svc-band-n{ font-size:clamp(4rem,10vw,8.5rem); font-weight:900; line-height:.85; letter-spacing:-.04em; color:var(--lane) }
.svc-band h2{ margin:0 0 .35em }
.svc-band p{ margin:0; max-width:34em; font-size:clamp(1.08rem,1.5vw,1.3rem); line-height:1.55; color:#27384f }
@media (max-width:640px){ .svc-band .svc-in{ grid-template-columns:1fr } }
.svc-facts{ background:#0b1f3f; color:#fff; padding:clamp(40px,5vw,64px) 0 }
.svc-fact-row{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(20px,3vw,40px);
grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
.svc-fact-row li{ border-left:4px solid #ffc72c; padding-left:1em }
.svc-facts h2{ color:#fff; margin-bottom:1.2em }
.svc-fact-row b{ display:block; text-transform:uppercase; letter-spacing:.01em; font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:900; line-height:1.1;
color:#fff }
.svc-fact-row span{ display:block; margin-top:.35em; color:rgba(255,255,255,.82); font-size:.98rem }
.svc-steps{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(16px,2vw,24px);
grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); counter-reset:step }
.svc-steps li{ counter-increment:step; position:relative; background:#fff; border-radius:14px;
padding:3.6em 1.4em 1.5em; box-shadow:0 10px 30px rgba(11,31,63,.08) }
.svc-steps li::before{ content:counter(step, decimal-leading-zero); position:absolute; left:1.4em; top:1.1em;
width:2.1em; height:2.1em; border-radius:6px; display:grid; place-items:center;
background:#009245; color:#fff; font-weight:900; border:2px solid #fff;
box-shadow:0 0 0 2px #009245 }
.svc-steps h3{ margin:0 0 .4em; font-size:1.08rem; font-weight:800 }
.svc-steps p{ margin:0 0 .7em; color:#33445e }
.svc-steps p:last-child{ margin-bottom:0 }
.svc-area{ background:#e6eef8; padding:clamp(44px,6vw,80px) 0 }
.svc-area h2{ margin-bottom:.5em }
.svc-area p{ margin:0 0 .8em; max-width:60em; font-size:1.05rem; color:#27384f }
.svc-area p:last-child{ margin-bottom:0 }
.svc-area .svc-towns{ font-weight:700; color:#0b1f3f }
.svc-faq .qa-item{ border-top:1px solid rgba(11,31,63,.16) }
.svc-faq .qa-item:last-of-type{ border-bottom:1px solid rgba(11,31,63,.16) }
.svc-faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px; padding:1.15em 0 }
.svc-faq summary::-webkit-details-marker{ display:none }
.svc-faq summary::after{ content:"+"; margin-left:auto; flex:0 0 auto; font-size:1.5rem; font-weight:300;
line-height:1; color:var(--lane); transition:transform .2s ease }
.svc-faq details[open] summary::after{ transform:rotate(45deg) }
.svc-faq summary h3{ margin:0; font-size:clamp(1.02rem,1.6vw,1.18rem); font-weight:700; line-height:1.35 }
.svc-faq details p{ margin:0 0 .8em; }
.svc-faq details p:last-child{ margin-bottom:1.4em }
.svc-faq details p{ max-width:62ch; color:#27384f; font-weight:400 }
.svc-faq summary:focus-visible{ outline:3px solid var(--lane); outline-offset:4px }
.svc-more{ margin:1.6em 0 0 }
.svc-more a,.svc-area a{ color:#045e96; font-weight:700 }
.svc-cta{ background:linear-gradient(160deg,#0459bd 0%,#00287d 100%); color:#fff; text-align:center;
padding:clamp(56px,8vw,100px) 0 }
.svc-cta h2{ color:#fff; margin-bottom:.4em }
.svc-cta p{ margin:0 auto .8em; max-width:36em; color:rgba(255,255,255,.9) }
.svc-cta-say{ margin-bottom:1.8em }
.svc-cta-say p:last-child{ margin-bottom:0 }
.svc-next .svc-eyebrow{ color:#33445e }   
.svc-next{ background:#f3f7fb; padding:clamp(36px,5vw,56px) 0 clamp(48px,6vw,72px) }
.svc-next ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px }
.svc-next a{ display:inline-block; padding:.75em 1.3em; border-radius:999px; background:#fff;
color:#0b1f3f; font-weight:700; text-decoration:none; border:2px solid var(--c,#0b1f3f);
transition:background .18s ease, color .18s ease }
.svc-next a:hover{ background:var(--c,#0b1f3f); color:#fff }
@media (max-width:800px){
.svc-hero-in{ grid-template-columns:1fr }
.svc-hero-sign{ width:150px; justify-self:start; order:-1; border-radius:20px }
}
@media (prefers-reduced-motion:reduce){
.svc-btn,.svc-faq summary::after,.svc-next a{ transition:none }
}
.svc-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.svc-prose{ padding:clamp(56px,8vw,110px) 0 }
.svc-prose--white{ background:#fff }
.svc-prose--tint{ background:#e6eef8 }
.svc-prose--dark{ background:#0b1f3f; color:#fff }
.svc-prose--dark h2,.svc-prose--dark h3{ color:#fff }
.svc-prose-say{ max-width:40em }
.svc-prose-say p{ margin:0 0 .9em; font-size:clamp(1.05rem,1.4vw,1.18rem); line-height:1.6; color:#27384f }
.svc-prose--dark .svc-prose-say p{ color:rgba(255,255,255,.88) }
.svc-prose-say h3{ margin:1.8em 0 .5em; font-size:clamp(1.15rem,1.8vw,1.4rem); font-weight:800; color:#0b1f3f }
.svc-prose-say .svc-big{ margin-top:1.3em; font-size:clamp(1.2rem,2vw,1.5rem); font-weight:800; line-height:1.3;
color:#0b1f3f }
.svc-prose--dark .svc-prose-say .svc-big{ color:#ffc72c }
.svc-lines{ list-style:none; margin:.2em 0 1.2em; padding:0 }
.svc-lines li{ position:relative; padding:.45em 0 .45em 1.6em; font-size:clamp(1.08rem,1.5vw,1.25rem);
font-weight:700; color:#0b1f3f; border-bottom:1px solid rgba(11,31,63,.1) }
.svc-lines li:last-child{ border-bottom:0 }
.svc-lines li::before{ content:""; position:absolute; left:0; top:50%; width:.75em; height:3px;
background:var(--lane); translate:0 -50% }
.svc-prose--dark .svc-lines li{ color:#fff; border-color:rgba(255,255,255,.14) }
.svc-page--hero-icons .svc-hero{ background:linear-gradient(146deg,#00287d 0%,#0459bd 100%);
padding:clamp(56px,9.1vw,175px) 0 clamp(96px,15.6vw,300px) }
.svc-page--hero-icons .svc-hero::before{ display:none }
.svc-page--hero-icons .svc-hero-in{ display:block; max-width:1314px }
.svc-page--hero-icons .svc-hero-say{ position:relative; z-index:1; max-width:760px }
.svc-page--hero-icons .svc-hero .svc-eyebrow{ font-size:.72rem; letter-spacing:.12em; margin-bottom:.9em }
.svc-page--hero-icons .svc-hero h1{ font-size:clamp(2.1rem,3.6vw,3.52rem); line-height:1.21; letter-spacing:-.005em;
max-width:13.6em; text-wrap:initial }
.svc-h1-at,.svc-page--hero-icons .svc-hero .svc-eyebrow{ color:#a4d4ff }
.svc-page--hero-icons .svc-tag{ margin-top:.95em; font-size:clamp(1.2rem,1.6vw,1.54rem) }
.svc-page--hero-icons .svc-lead{ margin-top:.55em; max-width:40em; font-size:clamp(1rem,1.1vw,1.1rem);
line-height:1.2; color:#fff }
.svc-page--hero-icons .svc-lead p{ margin:0 0 1.2em }
.svc-page--hero-icons .svc-lead p:first-child{ margin:0 }
.svc-page--hero-icons .svc-acts{ margin-top:2.1em; gap:14px }
.svc-page--hero-icons .svc-hero .svc-btn{ min-height:44px; padding:0 24px; border-radius:8px; font-size:.75rem;
letter-spacing:.03em }
.svc-page--hero-icons .svc-hero .svc-btn--ghost{ border-color:#fff }
.svc-hero-icons{ position:absolute; right:.6%; top:16px; width:min(454px,24vw); aspect-ratio:454/757;
container-type:inline-size; filter:drop-shadow(0 8px 9px rgba(0,14,60,.38)) }
.hi-i{ position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--h); display:block;
transition:transform 1.3s cubic-bezier(.45,0,.25,1) }
.hi-s{ display:block; width:100%; height:100%;
background:url("../../assets/v2/social/hero-sprite-v1.webp") var(--bp) / var(--bs) no-repeat;
animation:hiA 7s ease-in-out infinite }
.hi1 > .hi-s{ animation-name:hiB; animation-duration:9s; animation-delay:-3s }
.hi2 > .hi-s{ animation-name:hiC; animation-duration:8s; animation-delay:-5s }
img.hi-s{ background:none }
.svc-hero-icons.is-pushed .hi-i{ transition:transform .4s cubic-bezier(.2,.8,.2,1) }
@keyframes hiA{ 50%{ translate:0 -12px } }
@keyframes hiB{ 50%{ translate:6px -16px } }
@keyframes hiC{ 50%{ translate:-5px -10px } }
.wwd{ --u:min(1px, calc(100vh / 900), calc((100vw - 40px) / 1110)); position:relative }
@media (min-width:1921px){ .wwd{ --u:min(calc(100vw / 1920), calc(100vh / 900)) } }
.wwd-p{ position:sticky; top:0; height:100vh; min-height:calc(819 * var(--u)); overflow:clip;
display:grid; place-items:center }
.wwd-p{ background:var(--bg) }
.wwd-bg{ display:none }
.wwd--smm{ --bg:linear-gradient(214deg,#0459bd 0%,#00287d 100%) }
.wwd--video{ --bg:linear-gradient(214deg,#00b2d4 0%,#00287d 100%) }
.wwd--meta{ --bg:linear-gradient(214deg,#e26bc1 0%,#2e43ff 100%) }
.wwd--google{ --bg:linear-gradient(214deg,#fff 0%,#dbdbdb 100%); --cx:330 }
.wwd--ai{ --bg:linear-gradient(214deg,#4a4d55 0%,#1d1f24 55%,#0b0c0e 100%); --cx:-95 }
.wwd-in{ position:relative; width:calc(1027 * var(--u)); height:calc(819 * var(--u)) }
.wwd-in > *{ position:absolute }
.svc-page .wwd-h{ left:calc((var(--cx, 0) + 7) * var(--u)); top:calc(112 * var(--u)); z-index:2; margin:0;
font-size:max(24px, calc(36 * var(--u))); font-weight:800; line-height:1.25; letter-spacing:0; color:#fff }
.wwd-card{ left:calc(var(--cx, 0) * var(--u)); top:calc(222 * var(--u)); z-index:2; width:calc(447 * var(--u)); min-height:calc(347 * var(--u));
padding:calc(46 * var(--u)) calc(46 * var(--u)) calc(40 * var(--u)) calc(52 * var(--u));
background:#fff; border:3px solid #a4d4ff; border-radius:calc(29 * var(--u));
box-shadow:8px 12px 26px rgba(0,12,45,.34) }
.wwd-card h3{ margin:0; font-size:max(21px, calc(34 * var(--u))); font-weight:800; line-height:1.18; color:#0b1f3f }
.wwd-card h3::after{ content:""; display:block; width:calc(140 * var(--u)); height:2px; background:currentColor;
margin:calc(18 * var(--u)) 0 calc(16 * var(--u)) }
.wwd-card p{ margin:0 0 .3em; font-size:max(13px, calc(15 * var(--u))); font-weight:500; line-height:1.58; color:#33445e }
.wwd-card p:last-child{ margin-bottom:0 }
.wwd--smm .wwd-card h3,.wwd--smm .wwd-card p{ color:#00287d }
.wwd-fb{ color:#005be0 }
.wwd-ig{ color:#d80058 }
.wwd--meta .wwd-card h3::after{ background:#0b1f3f }
.svc-page .wwd--google .wwd-h{ color:#0b1f3f }
.wwd--google .wwd-card,.wwd--ai .wwd-card{ border-color:#999 }
.wwd--ai .wwd-card h3,.wwd--ai .wwd-card p{ color:#000 }
.wwd--ai .wwd-card h3::after{ background:#000 }
.wwd--ai .wwd-glyph{ animation:wwdTurn 80s linear infinite }
@media (hover:hover) and (pointer:fine){
.is-live .wwd-phone{ pointer-events:auto; cursor:pointer;
transition:scale .5s cubic-bezier(.2,.8,.2,1), rotate .5s cubic-bezier(.2,.8,.2,1) }
.is-live:not(.is-moving) .wwd-phone:hover{ scale:1.2; rotate:calc(var(--rot, 0) * -1deg) }
.is-live .wwd-shadow{ transition:scale .5s cubic-bezier(.2,.8,.2,1) }
.is-live:not(.is-moving) .wwd-art:has(.wwd-phone:hover) .wwd-shadow{ animation:none; scale:1.25 1.1 }
}
@keyframes wwdTurn{ to{ rotate:360deg } }
.wwd--google .wwd-card h3::after{ background:#000 }
.wwd-art{ inset:0; pointer-events:none }
.wwd-art > *{ position:absolute; left:calc(var(--l) * var(--u)); top:calc(var(--t) * var(--u));
width:calc(var(--w) * var(--u)); height:auto }
.wwd-shadow{ height:calc(30 * var(--u)); border-radius:50%;
background:radial-gradient(closest-side, rgba(0,0,0,.62), rgba(0,0,0,.28) 55%, rgba(0,0,0,0)) }
.wwd-phone{ animation:wwdFloat 6s ease-in-out infinite }
.wwd-shadow{ animation:wwdShade 6s ease-in-out infinite }
@keyframes wwdFloat{ 50%{ translate:0 calc(-12 * var(--u)) } }
@keyframes wwdShade{ 50%{ scale:.9; opacity:.75 } }
@supports (animation-timeline: view()){
.wwd-card{ animation:wwdRise linear both; animation-timeline:view(); animation-range:entry 0% entry 85% }
.wwd-h{ animation:wwdRise linear both; animation-timeline:view(); animation-range:entry 0% entry 75% }
.wwd-art{ animation:wwdRiseArt linear both; animation-timeline:view(); animation-range:entry 0% cover 45% }
}
@keyframes wwdRise{ from{ transform:translateY(calc(90 * var(--u))) } }
@keyframes wwdRiseArt{ from{ transform:translateY(calc(220 * var(--u))) } }
.wwd.is-live{ height:400vh }
.is-live .wwd-stage{ position:sticky; top:0; height:100vh; overflow:clip }
.is-live .wwd-p{ position:absolute; inset:0; height:auto; min-height:0; background:none }
.is-live .wwd-bg{ display:block; position:absolute; inset:0; z-index:0; background:var(--bg) }
.is-live .wwd-art{ z-index:1 }
.is-live .wwd-h,.is-live .wwd-card{ z-index:3 }
.is-live .wwd-card,.is-live .wwd-h,.is-live .wwd-art{ animation:none }
.wwd-phone{ transform-origin:calc(var(--px, 0) * var(--u)) calc(var(--py, 0) * var(--u)) }
.wwd-glyph{ animation:wwdDrift 9s ease-in-out infinite }
.wwd-glyph + .wwd-glyph{ animation-duration:11s; animation-delay:-4s }
.wwd-bgart{ animation:wwdDrift 10s ease-in-out infinite }
.wwd--video .wwd-bgart{ animation-duration:12s; animation-delay:-5s }
.is-live .wwd--smm .wwd-bgart{ transition:opacity 1.1s ease }
.wwd-logo{ animation:wwdZeroG 9s ease-in-out infinite }
.wwd-gphone{ animation:wwdBob 5.5s ease-in-out infinite }
.wwd-chart{ animation:wwdBob 5s ease-in-out infinite }
.wwd-gear{ animation:wwdSpin 9s linear infinite, wwdBob 5s ease-in-out infinite }
.wwd-gear2{ animation-duration:8s, 5s }
.wwd-gear3,.wwd-gear4{ animation-name:wwdSpinBack, wwdBob; animation-duration:6s, 5s }
.wwd-glass{ transform-origin:12% 92%; animation:wwdPeer 6.5s ease-in-out infinite }
@keyframes wwdSpin{ to{ rotate:360deg } }
@keyframes wwdSpinBack{ to{ rotate:-360deg } }
@keyframes wwdPeer{
0%,100%{ translate:0 0; rotate:0deg }
25%{ translate:calc(22 * var(--u)) calc(-26 * var(--u)); rotate:5deg }
50%{ translate:calc(48 * var(--u)) calc(-6 * var(--u)); rotate:-2deg }
75%{ translate:calc(20 * var(--u)) calc(12 * var(--u)); rotate:-5deg } }
@keyframes wwdZeroG{ 0%,100%{ translate:0 0; rotate:0deg } 35%{ translate:calc(6 * var(--u)) calc(-22 * var(--u)); rotate:1.2deg }
70%{ translate:calc(-4 * var(--u)) calc(-10 * var(--u)); rotate:-.8deg } }
@keyframes wwdBob{ 50%{ translate:0 calc(-10 * var(--u)) } }
@keyframes wwdDrift{ 50%{ translate:calc(10 * var(--u)) calc(-18 * var(--u)); rotate:-3deg } }
@media (max-width:820px), (max-height:560px){
.svc-page--hero-icons .svc-hero-say{ max-width:none }
.svc-page--hero-icons .svc-hero{ padding-bottom:28px }
.svc-page--hero-icons .svc-hero-say{ text-align:center }
.svc-page--hero-icons .svc-hero h1,.svc-page--hero-icons .svc-lead{ margin-left:auto; margin-right:auto }
.svc-page--hero-icons .svc-hero h1{ font-size:calc((100vw - 40px) * .075); max-width:none }
.svc-page--hero-icons .svc-acts{ justify-content:center }
.svc-page--hero-icons .svc-hero .svc-eyebrow{ font-size:min(.72rem, 2.3vw); letter-spacing:.05em; white-space:nowrap }
.svc-hero-icons{ position:relative; right:auto; top:auto; width:100vw; margin:28px 0 0 calc(50% - 50vw);
aspect-ratio:auto; height:min(84vw,520px); --k:calc(min(58vw,300px) / 454); view-timeline-name:--hic }
.hi-i{ width:calc(var(--pw) * var(--k)); height:calc(var(--ph) * var(--k)) }
.hi0 > .hi-s{ --lk:0 } .hi1 > .hi-s{ --lk:1 } .hi2 > .hi-s{ --lk:2 }
@supports (view-timeline-name: --hic){
.hi-s,.hi1 > .hi-s,.hi2 > .hi-s{ animation-name:hiA, hiLife; animation-duration:7s, auto;
animation-timing-function:ease-in-out, linear; animation-iteration-count:infinite, 1;
animation-fill-mode:none, both; animation-timeline:auto, --hic; animation-range:normal, cover 0% cover 100% }
.hi1 > .hi-s{ animation-name:hiB, hiLife; animation-duration:9s, auto }
.hi2 > .hi-s{ animation-name:hiC, hiLife; animation-duration:8s, auto }
}
.wwd-phone{ transform-origin:calc(var(--px, 0) * var(--m)) calc(var(--py, 0) * var(--m)); rotate:calc(var(--rot, 0) * -0.7deg) }
.svc-page--hero-icons .svc-hero .svc-btn{ min-height:52px; font-size:.82rem }
.wwd-p{ position:relative; height:auto; min-height:0; display:block; padding:56px 20px 64px }
.wwd-in{ --m:min(1px, calc((100vw - 40px) / var(--span))); width:auto; height:auto; max-width:560px; margin:0 auto }
.wwd-in > *{ position:relative; left:auto; top:auto }
.svc-page .wwd-h,.svc-page .wwd--google .wwd-h{ left:auto; top:auto; margin:0 0 20px; font-size:28px }
.wwd-card,.wwd--google .wwd-card{ left:auto; top:auto; width:auto; min-height:0; padding:28px 24px 26px; border-radius:22px }
.wwd-card h3{ font-size:26px }
.wwd-card h3::after{ width:110px; margin:14px 0 14px }
.wwd-card p{ font-size:15.5px }
.wwd-art{ display:block; margin:24px auto 0; width:calc(var(--span) * var(--m)); height:calc(var(--ah) * var(--m)) }
.wwd-art > *{ left:calc((var(--l) - var(--ox)) * var(--m)); top:calc((var(--t) - var(--oy, 0)) * var(--m));
width:calc(var(--w) * var(--m)) }
.wwd-shadow{ height:calc(30 * var(--m)) }
.wwd--smm .wwd-in{ --span:338; --ox:645; --ah:715 }
.wwd--video .wwd-in{ --span:406; --ox:505; --oy:20; --ah:695 }
.wwd--meta .wwd-in{ --span:338; --ox:646; --ah:714 }
.wwd--google .wwd-in{ --span:300; --ox:-70; --oy:112; --ah:600 }
.wwd-bgart{ display:none }
.wwd--ai .wwd-in{ --span:300; --ox:556; --oy:104; --ah:640 }
.wwd--google img.wwd-logo{ display:none }
p.wwd-h{ display:none }
.wwd-card,.wwd-h,.wwd-art{ animation:none }
}
@keyframes hiLife{
0%{ transform:translateY(calc(130px + var(--lk, 0) * 50px)) scale(.5); opacity:0 }
30%,50%{ transform:none; opacity:1 }
75%,100%{ transform:translateY(calc(-110px - var(--lk, 0) * 50px)) scale(.7); opacity:0 } }
@media (prefers-reduced-motion:reduce){
.hi-s,.hi1 > .hi-s,.hi2 > .hi-s,.wwd-phone,.wwd-shadow,.wwd-card,.wwd-h,.wwd-art,.wwd-glyph,.wwd-bgart,.wwd-logo,.wwd-chart{ animation:none }
}
.svc-feature{ background:#fff; padding:clamp(56px,7vw,104px) 0 }
.svc-feature .svc-in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(28px,5vw,72px);
align-items:center }
.svc-feature h2{ margin-bottom:.55em }
.svc-feature-say p{ margin:0; max-width:32em; font-size:clamp(1.05rem,1.35vw,1.2rem); line-height:1.65; color:#27384f }
.svc-feature-img{ width:100%; height:auto; border-radius:18px;
box-shadow:0 18px 44px rgba(11,31,63,.16) }
@media (max-width:820px){
.svc-feature .svc-in{ grid-template-columns:1fr }
}
.svc-block--steps{ padding:clamp(52px,6.5vw,96px) 0 }
.svc-steps--compact{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,44px) }
.svc-steps--compact li{ background:none; box-shadow:none; border-radius:0; padding:0 0 0 0;
border-top:3px solid var(--lane) }
.svc-steps--compact li::before{ position:static; display:block; width:auto; height:auto; margin:.7em 0 .35em;
background:none; border:0; box-shadow:none; border-radius:0; place-items:initial;
color:var(--lane); font-size:clamp(1.8rem,2.6vw,2.4rem); line-height:1; letter-spacing:-.02em }
.svc-steps--compact h3{ font-size:clamp(1.12rem,1.4vw,1.28rem) }
.svc-steps--compact p{ margin:0 }
@media (max-width:820px){ .svc-steps--compact{ grid-template-columns:1fr } }
.svc-btn--big{ min-height:3.9em; padding:0 2.6em; font-size:clamp(1rem,1.2vw,1.12rem); letter-spacing:.04em;
box-shadow:0 10px 30px rgba(0,0,0,.28), 0 0 0 6px rgba(255,199,44,.18) }
.svc-btn--big:hover{ box-shadow:0 14px 36px rgba(0,0,0,.32), 0 0 0 8px rgba(255,199,44,.24) }
.svc-cta-local{ margin:1.6em auto 0 !important; font-size:.92rem; color:rgba(255,255,255,.72) !important }
.wwd-gphone{ container-type:inline-size }
.gp{ --T:15s; width:100%; aspect-ratio:280/575; padding:3.2cqw; border-radius:15cqw; background:#121417;
rotate:-5deg; box-shadow:0 3cqw 8cqw rgba(11,31,63,.35), inset 0 0 0 .8cqw #2a2e35;
transition:rotate .5s cubic-bezier(.2,.8,.2,1) }
.gp-screen{ position:relative; height:100%; overflow:hidden; border-radius:12cqw; background:#fff;
color:#202124; font-family:inherit; line-height:1.3; animation:gpScreen var(--T) linear infinite }
.gp p{ margin:0 }
.gp-bar{ display:flex; justify-content:space-between; align-items:center; height:9cqw; padding:0 7cqw;
font-size:3.4cqw }
.gp-bar i{ position:absolute; left:50%; top:2.2cqw; width:28cqw; height:7cqw; margin-left:-14cqw;
border-radius:4cqw; background:#121417 }
.gp-page{ padding:3cqw 5cqw }
.gp-search{ display:flex; align-items:center; gap:2.4cqw; height:12cqw; padding:0 4cqw; border-radius:6cqw;
box-shadow:0 .8cqw 3cqw rgba(32,33,36,.2); font-size:4.3cqw; white-space:nowrap }
.gp-search svg{ flex:none; width:5cqw; height:5cqw; fill:none; stroke:#5f6368; stroke-width:2.4 }
.gp-q{ clip-path:inset(0 100% 0 0); animation:gpType var(--T) steps(21) infinite }
.gp-caret{ width:.5cqw; height:5cqw; background:#1a73e8; animation:gpBlink .9s steps(2) infinite }
.gp-tabs{ display:flex; gap:4.5cqw; margin:3.5cqw 1cqw 0; font-size:3.4cqw; color:#5f6368 }
.gp-tabs b{ color:#1a73e8; font-weight:600; box-shadow:0 .8cqw 0 #1a73e8 }
.gp-ad{ margin-top:4cqw; padding:3.5cqw; border-radius:4cqw; opacity:0;
animation:gpIn var(--T) ease-out infinite, gpGlow var(--T) ease-in-out infinite }
.gp-sp{ font-size:3.3cqw; font-weight:700 }
.gp-site{ display:flex; align-items:center; gap:2.4cqw; margin:2cqw 0 1.6cqw; font-size:3.6cqw }
.gp-site small{ display:block; font-size:3.1cqw; color:#4d5156 }
.gp-fav{ display:grid; place-items:center; width:7.5cqw; height:7.5cqw; border-radius:50%;
background:#2b3a9e; color:#fff; font-size:2.9cqw; font-weight:900 }
.gp-h{ position:relative; font-size:5.5cqw; font-weight:600; line-height:1.25; color:#1a0dab }
.gp-d{ margin-top:1.4cqw; font-size:3.6cqw; line-height:1.45; color:#4d5156 }
.gp-links{ display:flex; flex-wrap:wrap; gap:1.8cqw; margin-top:3cqw }
.gp-links span{ padding:1.4cqw 3cqw; border:.3cqw solid #dadce0; border-radius:5cqw; font-size:3.2cqw; color:#1a0dab }
.gp-links .gp-go{ background:#e8f0fe; border-color:#c6dafc }
.gp-org{ margin:4.2cqw 3.5cqw 0; opacity:0; animation:gpIn var(--T) ease-out infinite }
.gp-org .gp-site{ margin:0 0 1.2cqw; font-size:3.3cqw }
.gp-org .gp-fav{ width:6.4cqw; height:6.4cqw; font-size:3cqw; background:#9aa4b2 }
.gp-fav--b{ background:#b49a7a !important } .gp-fav--c{ background:#7f9c8a !important } .gp-fav--d{ background:#a08bb0 !important }
.gp-rh{ font-size:4.5cqw; line-height:1.25; color:#1a0dab }
.gp-rd{ margin-top:.8cqw; font-size:3.2cqw; line-height:1.4; color:#4d5156 }
.gp-land{ position:absolute; inset:9cqw 0 0; padding:0 6cqw; background:#fff; translate:100% 0;
animation:gpLand var(--T) cubic-bezier(.2,.8,.2,1) infinite }
.gp-land-top{ margin:0 -6cqw 5cqw; padding:4cqw 6cqw; background:linear-gradient(160deg,#0459bd,#00287d);
color:#fff; font-size:4.2cqw; font-weight:900; letter-spacing:.02em }
.gp-land-top em{ font-style:normal; color:#6cd9ff }
.gp-land-h{ font-size:6.2cqw; font-weight:800; line-height:1.15; color:#0b1f3f }
.gp-land-p{ margin-top:2cqw; font-size:3.6cqw; color:#33445e }
.gp-field{ display:flex; align-items:center; height:10cqw; margin-top:3cqw; padding:0 3cqw;
border:.3cqw solid #cfd6e0; border-radius:2.5cqw; font-size:3.5cqw; color:#0b1f3f; white-space:nowrap }
.gp-type{ clip-path:inset(0 100% 0 0) }
.gp-t1{ animation:gpT1 var(--T) steps(18) infinite }
.gp-t2{ animation:gpT2 var(--T) steps(27) infinite }
.gp-send{ display:grid; place-items:center; height:11cqw; margin-top:4cqw; border-radius:2.5cqw;
background:#ffc72c; color:#0b2247; font-size:4cqw; font-weight:800; animation:gpPress var(--T) ease infinite }
.gp-done{ display:flex; align-items:center; gap:2cqw; margin-top:4cqw; font-size:3.6cqw; color:#138a3d;
font-weight:600; opacity:0; animation:gpDone var(--T) ease-out infinite }
.gp-land-foot{ position:absolute; left:6cqw; right:6cqw; bottom:7cqw; padding-top:3cqw; border-top:.3cqw solid #e3e8ef;
font-size:3.2cqw; line-height:1.4; color:#5b6b82; text-align:center }
.gp-done b{ display:grid; place-items:center; flex:none; width:6cqw; height:6cqw; border-radius:50%;
background:#138a3d; color:#fff; font-size:3.4cqw }
.gp-tap{ position:absolute; left:0; top:0; width:12cqw; height:12cqw; margin:-6cqw 0 0 -6cqw; border-radius:50%;
background:rgba(32,33,36,.18); box-shadow:0 0 0 .6cqw rgba(32,33,36,.28); opacity:0;
animation:gpTap var(--T) ease-out infinite }
@keyframes gpScreen{ 0%,95%{ opacity:1 } 97.5%{ opacity:0 } 100%{ opacity:1 } }
@keyframes gpType{ 0%,2%{ clip-path:inset(0 100% 0 0) } 14%,100%{ clip-path:inset(0 0 0 0) } }
@keyframes gpBlink{ 50%{ opacity:0 } }
@keyframes gpIn{ 0%,15%{ opacity:0; translate:0 4cqw } 20%,100%{ opacity:1; translate:0 0 } }
@keyframes gpGlow{ 0%,38%{ box-shadow:0 0 0 0 rgba(26,115,232,0) } 41%,45%{ box-shadow:0 0 0 .8cqw rgba(26,115,232,.35) }
49%,100%{ box-shadow:0 0 0 0 rgba(26,115,232,0) } }
@keyframes gpLand{ 0%,49%{ translate:100% 0 } 53%,96%{ translate:0 0 } 98%,100%{ translate:100% 0 } }
@keyframes gpT1{ 0%,57%{ clip-path:inset(0 100% 0 0) } 64%,100%{ clip-path:inset(0 0 0 0) } }
@keyframes gpT2{ 0%,66%{ clip-path:inset(0 100% 0 0) } 75%,100%{ clip-path:inset(0 0 0 0) } }
@keyframes gpPress{ 0%,79%{ scale:1; filter:none } 80.5%{ scale:.95; filter:brightness(.92) } 82%,100%{ scale:1; filter:none } }
@keyframes gpDone{ 0%,82%{ opacity:0; translate:0 2cqw } 85%,96%{ opacity:1; translate:0 0 } 98%,100%{ opacity:0 } }
@keyframes gpTap{
0%,44%{ opacity:0; left:19cqw; top:var(--tap1, 86.5cqw); scale:1.6 }
46%{ opacity:1; left:19cqw; top:var(--tap1, 86.5cqw); scale:1 }
48.5%{ opacity:0; left:19cqw; top:var(--tap1, 86.5cqw); scale:1.3 }
77%{ opacity:0; left:50cqw; top:var(--tap2, 85.5cqw); scale:1.6 }
79.5%{ opacity:1; left:50cqw; top:var(--tap2, 85.5cqw); scale:1 }
82%,100%{ opacity:0; left:50cqw; top:var(--tap2, 85.5cqw); scale:1.3 } }
@media (hover:hover) and (pointer:fine){
.is-live .wwd-gphone{ pointer-events:auto; cursor:pointer; transition:scale .5s cubic-bezier(.2,.8,.2,1) }
.is-live:not(.is-moving) .wwd-gphone:hover{ scale:1.15 }
.is-live:not(.is-moving) .wwd-gphone:hover .gp{ rotate:0deg }
}
@media (prefers-reduced-motion:reduce){
.gp *, .gp-screen{ animation:none !important }
.gp-q,.gp-type{ clip-path:none } .gp-ad,.gp-org{ opacity:1 }
}
.wwd-aiphone{ container-type:inline-size }
.gp--ai{ rotate:-8deg; --tap1:89cqw; --tap2:85.5cqw }
.ap-head{ display:flex; justify-content:space-between; align-items:center; height:10cqw; padding:0 5cqw;
font-size:4.2cqw; border-bottom:.3cqw solid #ececec }
.ap-head b{ font-weight:600 }
.ap-menu,.ap-new{ width:5cqw; height:3.4cqw; border-top:.6cqw solid #555; border-bottom:.6cqw solid #555 }
.ap-new{ width:4.4cqw; height:4.4cqw; border:.6cqw solid #555; border-radius:1.2cqw }
.ap-chat{ padding:4cqw 5cqw 0 }
.ap-chat p{ margin:0 }
.ap-bubble{ margin-left:auto !important; max-width:72%; padding:2.6cqw 3.6cqw; border-radius:5cqw;
background:#f1f1f1; font-size:3.6cqw; line-height:1.35; opacity:0; animation:apBubble var(--T) ease-out infinite }
.ap-ans{ margin-top:4cqw !important; font-size:3.6cqw; line-height:1.45; color:#202124 }
.ap-a1{ opacity:0; animation:apA1 var(--T) ease-out infinite }
.ap-card{ margin-top:3cqw; padding:3.2cqw 3.6cqw; border:.35cqw solid #d9dde3; border-radius:4cqw; opacity:0;
animation:apCard var(--T) ease-out infinite, gpGlow var(--T) ease-in-out infinite }
.ap-card .gp-site{ margin:1.6cqw 0 1.2cqw }
.ap-card-d{ font-size:3.4cqw; line-height:1.4; color:#4d5156 }
.ap-go{ display:block; margin-top:2.6cqw; padding:2.2cqw 0; border-radius:2.5cqw; background:#ffc72c;
color:#0b2247; font-size:3.5cqw; font-weight:800; text-align:center }
.ap-more{ opacity:0; animation:apMore var(--T) ease-out infinite }
.ap-more p + p{ margin-top:1.2cqw !important; font-size:3.3cqw; color:#4d5156 }
.ap-more b{ color:#202124; font-weight:600 }
.ap-ask{ position:absolute; left:4cqw; right:4cqw; bottom:5cqw; display:flex; align-items:center; gap:2cqw;
height:11cqw; padding:0 2.6cqw 0 4cqw; border-radius:6cqw; background:#f4f4f4; font-size:3.5cqw; white-space:nowrap }
.ap-q{ flex:1; overflow:hidden; clip-path:inset(0 100% 0 0); animation:apQ var(--T) steps(40) infinite }
.ap-send{ flex:none; width:7cqw; height:7cqw; border-radius:50%; background:#000;
animation:apSendBtn var(--T) ease infinite }
@keyframes apQ{ 0%,2%{ clip-path:inset(0 100% 0 0); opacity:1 } 12%{ clip-path:inset(0 0 0 0); opacity:1 }
13.5%,100%{ clip-path:inset(0 0 0 0); opacity:0 } }
@keyframes apSendBtn{ 0%,12%{ scale:1 } 13%{ scale:.8 } 14%,100%{ scale:1 } }
@keyframes apBubble{ 0%,13%{ opacity:0; translate:0 3cqw } 16%,100%{ opacity:1; translate:0 0 } }
@keyframes apA1{ 0%,18%{ opacity:0 } 22%,100%{ opacity:1 } }
@keyframes apCard{ 0%,24%{ opacity:0; translate:0 3cqw } 29%,100%{ opacity:1; translate:0 0 } }
@keyframes apMore{ 0%,31%{ opacity:0; translate:0 3cqw } 36%,100%{ opacity:1; translate:0 0 } }
@media (hover:hover) and (pointer:fine){
.is-live .wwd-aiphone{ pointer-events:auto; cursor:pointer; transition:scale .5s cubic-bezier(.2,.8,.2,1) }
.is-live:not(.is-moving) .wwd-aiphone:hover{ scale:1.15 }
.is-live:not(.is-moving) .wwd-aiphone:hover .gp{ rotate:0deg }
}
@media (prefers-reduced-motion:reduce){
.ap-bubble,.ap-a1,.ap-card,.ap-more{ opacity:1 } .ap-q{ clip-path:none; opacity:0 }
}
.svc-intro .svc-page--hero-icons .svc-hero .svc-eyebrow{ animation:hiEyebrow 1s cubic-bezier(.2,.8,.2,1) .1s both }
.svc-intro .svc-page--hero-icons .svc-hero h1{ animation:hiShow .6s ease 1.4s both }
.svc-intro .svc-page--hero-icons .svc-hero h1.is-split{ animation:none }
.hw{ display:inline-block }
.svc-intro .hw{ animation:hiWord .85s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(.3s + var(--i) * .075s) }
.svc-intro .svc-h1-at .hw{ background:linear-gradient(100deg,#a4d4ff 38%,#fff 50%,#a4d4ff 62%) 100% 0 / 260% 100% no-repeat;
-webkit-background-clip:text; background-clip:text; color:transparent;
animation:hiWord .85s cubic-bezier(.2,.8,.2,1) both, hiShine 1.3s ease-in-out 1.35s both;
animation-delay:calc(.3s + var(--i) * .075s), 1.35s }
.svc-intro .svc-page--hero-icons .svc-tag{ animation:hiTag .8s cubic-bezier(.2,.8,.2,1) 1.05s both }
.svc-intro .svc-page--hero-icons .svc-lead p{ animation:hiUp .8s cubic-bezier(.2,.8,.2,1) 1.25s both }
.svc-intro .svc-page--hero-icons .svc-lead p + p{ animation-delay:1.38s }
.svc-intro .svc-page--hero-icons .svc-lead p + p + p{ animation-delay:1.5s }
.svc-intro .svc-page--hero-icons .svc-acts .svc-btn{ animation:hiPop .9s linear 2.4s both }
.svc-intro .svc-page--hero-icons .svc-acts .svc-btn + .svc-btn{ animation-delay:2.55s }
@keyframes hiEyebrow{ from{ opacity:0; letter-spacing:.6em; filter:blur(6px) } }
@keyframes hiShow{ from{ opacity:0 } }
@keyframes hiWord{ from{ opacity:0; transform:translateY(.6em) rotate(4deg); filter:blur(10px) } }
@keyframes hiShine{ from{ background-position:100% 0 } to{ background-position:0% 0 } }
@keyframes hiTag{ from{ opacity:0; transform:translateX(-40px) } }
@keyframes hiUp{ from{ opacity:0; transform:translateY(18px) } }
@keyframes hiPop{
0%{ opacity:0; transform:translateY(70px) scale(.7); animation-timing-function:cubic-bezier(.2,.7,.3,1) }
45%{ opacity:1; transform:translateY(-12px) scale(1.07); animation-timing-function:cubic-bezier(.4,0,.4,1) }
70%{ transform:translateY(4px) scale(.98) }
85%{ transform:translateY(-2px) scale(1.01) }
100%{ opacity:1; transform:none } }
@media (min-width:1921px){
:root:has(.svc-page){ font-size:.8333vw }
.svc-in{ max-width:61.46vw; padding:0 2.5vw }
.svc-narrow{ max-width:45.83vw }
.svc-page--hero-icons .svc-hero{ padding:9.1vw 0 15.6vw }
.svc-page--hero-icons .svc-hero-in{ max-width:68.44vw }
.svc-page--hero-icons .svc-hero-say{ max-width:39.58vw }
.svc-page--hero-icons .svc-hero h1{ font-size:2.933vw }
.svc-page--hero-icons .svc-tag{ font-size:1.283vw }
.svc-page--hero-icons .svc-lead{ font-size:.917vw }
.svc-page--hero-icons .svc-acts{ gap:.73vw }
.svc-page--hero-icons .svc-hero .svc-btn{ min-height:2.29vw; padding:0 1.25vw; border-radius:.42vw }
.svc-hero-icons{ width:23.65vw; top:.83vw }
}