/* ==========================================================================
   WebClixs - service page design v2
   Same branding (red #c21500, Montserrat + Open Sans), new layout.
   Loaded only by the pages that use it. Every class is prefixed .sv- so it
   never collides with css/style.css.

   Contents
     0. tokens + base
     1. header fix (shared header sits on a dark hero here)
     2. shared bits (tags, buttons, ripple, reveal)
     3. water / wave dividers
     4. hero
     5. why webclixs
     6. services
     7. process
     8. benefits
     9. recent work
    10. faq
    11. closing cta
    12. responsive
   ========================================================================== */

/* ---------- 0. tokens + base -------------------------------------------- */

body.svbody {
    --sv-red: #c21500;
    --sv-red-dark: #8f1000;
    --sv-red-light: #ff6a52;
    --sv-red-soft: #fdece9;
    --sv-ink: #171210;
    --sv-head: #1c1613;
    --sv-body: #5d5551;
    --sv-line: #e9e2df;
    --sv-tint: #fbf4f2;
    --sv-radius: 14px;
    --sv-shadow: 0 18px 40px rgba(23, 18, 16, .08);
    --sv-ease: cubic-bezier(.22, .61, .36, 1);
}

.svpage {
    font-family: "Open Sans", sans-serif;
    color: var(--sv-body);
    font-size: 16px;
    line-height: 1.7;
    overflow-x: clip;
}

.svpage * {
    box-sizing: border-box;
}

.sv-wrap {
    max-width: 1240px;
    width: 90%;
    margin: 0 auto;
}

.svpage h2,
.svpage h3,
.svpage h4 {
    font-family: "Montserrat", sans-serif;
    color: var(--sv-head);
    line-height: 1.25;
}

.svpage h2 {
    font-size: clamp(27px, 3.2vw, 40px);
    font-weight: 800;
    letter-spacing: -.5px;
}

.svpage h2 em {
    font-style: normal;
    color: var(--sv-red);
}

.svpage p {
    margin: 0 0 16px;
}

.svpage p:last-child {
    margin-bottom: 0;
}

/* ---------- 1. header fix ----------------------------------------------- */
/* The shared header is built for light pages: dark logo, dark "Let's Estimate"
   text. This page opens on a dark hero, so both disappeared. Frosted bar +
   a glass plate behind the logo keeps the brand colours readable, and every
   rule flips back when .fheader turns the bar white on scroll. */

/* A dark scrim, not backdrop-filter: the hero's animated layers sit outside the
   header's backdrop root, so a blur here samples the white page behind it and
   turns the bar pale - exactly the problem this is meant to solve. */
body.svbody header {
    background: linear-gradient(to bottom, rgba(23, 18, 16, .72) 0%, rgba(23, 18, 16, .34) 65%, rgba(23, 18, 16, 0) 100%);
    transition: background .35s ease, border-color .35s ease;
}

body.svbody .toplogo {
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
    border-radius: 12px;
    padding: 9px 14px;
    width: 214px;
    margin-top: 14px;
    transition: all .35s ease;
}

body.svbody .estimate {
    color: #fff;
}

body.svbody .estimate span {
    color: rgba(255, 255, 255, .85);
}

body.svbody .estimate h3 {
    color: var(--sv-red-light);
    transition: color .3s ease;
}

body.svbody .estimate a:hover h3 {
    color: #fff;
}

/* sticky/scrolled state - shared css turns the bar white again */
body.svbody header.fheader {
    background: rgba(255, 255, 255, .92);
    border-bottom: solid 1px rgba(0, 0, 0, .06);
}

body.svbody header.fheader .toplogo {
    background: none;
    box-shadow: none;
    padding: 0;
    width: 200px;
    margin-top: 20px;
}

body.svbody header.fheader .estimate,
body.svbody header.fheader .estimate span {
    color: #333;
}

body.svbody header.fheader .estimate h3 {
    color: var(--sv-red);
}

/* the logo at the top of the slide-in menu - the shared 75% reads oversized
   against the link list, so it comes down a little on these pages */
body.svbody .navigation .navlogo {
    width: 68%;
    padding-top: 20px;
}

/* Horizontal room inside the 350px panel.
   Two things were eating it. The shared css stacks three levels of side
   padding (outer ul 25px + sub ul 15px + link 10px), so a submenu label began
   ~78px in with a wide empty gutter on both sides. And the links set
   width:100% with padding but no box-sizing, so every one of them overflowed
   its parent - that is what put a horizontal scrollbar under the menu. */
/* The panel itself was wider than anything in it - the longest label ("Website
   Speed Optimization") ends around 241px, so 350px left a dead column down the
   right. Sized to the content instead. Higher specificity than the shared
   .navigation rules, so it holds at both breakpoints. */
body.svbody .navigation {
    width: 280px;
}

body.svbody .navigation ul li a,
body.svbody .navigation ul li span,
body.svbody .navigation ul li div {
    box-sizing: border-box;
}

body.svbody .navigation > ul {
    padding: 5px 12px;
}

body.svbody .navigation ul ul {
    padding: 0 4px 15px;
}

/* ---------- 1b. menu icons (this page only) ----------------------------- */
/* includes/header.php is shared by every page, so nothing is added to the
   markup. The nav already carries a generic <i class="fa fa-angle-right"> on
   each link - here we just swap the glyph per destination with an attribute
   selector, and draw one for the three links that have no <i> at all.
   All of it hangs off body.svbody, so no other page is touched. */

body.svbody .navigation ul li a i,
body.svbody .navigation ul li div i {
    width: 20px;
    text-align: center;
    margin-right: 6px;
    color: var(--sv-red);
    font-size: 14px;
    transition: transform .3s var(--sv-ease), color .3s ease;
}

body.svbody .navigation ul li a:hover i {
    transform: scale(1.2);
}

/* section headings */
body.svbody .navigation > ul > li > div i {
    color: #b9aeaa;
    font-size: 13px;
}

body.svbody .navigation > ul > li:nth-child(1) > div i:before { content: "\f2c1"; } /* who we are  - id badge */
body.svbody .navigation > ul > li:nth-child(3) > div i:before { content: "\f121"; } /* web development - code */
body.svbody .navigation > ul > li:nth-child(5) > div i:before { content: "\f0a1"; } /* promotion - bullhorn */
body.svbody .navigation > ul > li:nth-child(7) > div i:before { content: "\f1cd"; } /* web support - life ring */

/* who we are */
body.svbody .navigation a[href*="company-profile"] i:before { content: "\f0f7"; } /* building */
body.svbody .navigation a[href*="our-team"] i:before        { content: "\f0c0"; } /* users */
body.svbody .navigation a[href*="our-clients"] i:before     { content: "\f2b5"; } /* handshake */
body.svbody .navigation a[href*="media-coverage"] i:before  { content: "\f1ea"; } /* newspaper */

/* web development */
body.svbody .navigation a[href*="ecommerce-website"] i:before { content: "\f07a"; } /* cart */
body.svbody .navigation a[href*="corporate-website"] i:before { content: "\f0b1"; } /* briefcase */
body.svbody .navigation a[href*="static-website"] i:before    { content: "\f1c9"; } /* file code */
body.svbody .navigation a[href*="wordpress-website"] i:before { content: "\f19a"; } /* wordpress */
body.svbody .navigation a[href*="shopify-website"] i:before   { content: "\f290"; } /* shopping bag */
body.svbody .navigation a[href*="laravel-website"] i:before   { content: "\f233"; } /* server */
body.svbody .navigation a[href*="react-website"] i:before     { content: "\f1b2"; } /* cube */

/* promotion */
body.svbody .navigation a[href*="digital-marketing"] i:before    { content: "\f201"; } /* line chart */
body.svbody .navigation a[href*="social-media"] i:before         { content: "\f1e0"; } /* share */
body.svbody .navigation a[href*="pr-media-management"] i:before  { content: "\f130"; } /* microphone */

/* web support */
body.svbody .navigation a[href*="website-maintenance"] i:before        { content: "\f0ad"; } /* wrench */
body.svbody .navigation a[href*="website-migration"] i:before          { content: "\f0ec"; } /* exchange */
body.svbody .navigation a[href*="website-speed-optimization"] i:before { content: "\f0e4"; } /* tachometer */
body.svbody .navigation a[href*="virus-removal"] i:before              { content: "\f132"; } /* shield */

/* top level links - these have no <i> in the shared markup */
body.svbody .navigation > ul > li > a:before {
    font-family: FontAwesome;
    display: inline-block;
    width: 20px;
    margin-right: 6px;
    text-align: center;
    color: var(--sv-red);
    font-size: 14px;
    font-weight: 400;
    transition: transform .3s var(--sv-ease);
}

body.svbody .navigation > ul > li > a[href*="portfolio"]:before { content: "\f00a"; } /* grid */
body.svbody .navigation > ul > li > a[href*="blog"]:before      { content: "\f09e"; } /* rss */
body.svbody .navigation > ul > li > a[href*="contact"]:before   { content: "\f0e0"; } /* envelope */

/* icon pulled out of the text flow so a wrapping label stays aligned
   instead of tucking its second line under the icon */
/* The shared css leaves these links on line-height 14px - the same as the font
   size - so a label that wraps ("Website Speed Optimization") gets two lines
   stuck together with no gap. 1.5 gives them room; the hanging indent below
   keeps the second line aligned under the first instead of under the icon. */
body.svbody .navigation ul ul li a {
    position: relative;
    padding-left: 34px;
    line-height: 1.5;
    transition: color .3s ease, padding-left .3s var(--sv-ease);
}

body.svbody .navigation ul ul li a i {
    position: absolute;
    left: 8px;
    top: 11px;
    margin: 0;
}

body.svbody .navigation ul ul li a:hover {
    padding-left: 40px;
}

body.svbody .navigation ul ul li a:hover i {
    left: 14px;
}

/* ---------- 2. shared bits ---------------------------------------------- */

.sv-tag {
    display: inline-block;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--sv-red);
    background: var(--sv-red-soft);
    border-radius: 40px;
    padding: 8px 18px;
    margin-bottom: 22px;
}

.sv-tag i {
    margin-right: 7px;
}

.sv-sub {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(16px, 1.6vw, 19px);
    font-weight: 600;
    color: var(--sv-body);
    margin: 14px 0 0;
}

.sv-center {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 55px;
}

.sv-center .sv-sub {
    margin-top: 12px;
}

/* the section eyebrow drifts too - the reveal on its parent uses a
   transition, so nothing fights over the transform */
.sv-center .sv-tag,
.sv-work .sv-tag,
.sv-benefits .sv-tag,
.sv-split-head .sv-tag {
    animation: svBob 6.5s ease-in-out infinite;
}

/* buttons - lift, glow and a light sweep on hover */
.sv-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 16px 30px;
    border-radius: 8px;
    border: solid 2px transparent;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: all .35s var(--sv-ease);
}

.sv-btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-20deg);
    transition: left .65s var(--sv-ease);
}

.sv-btn:hover:before {
    left: 130%;
}

.sv-btn i {
    transition: transform .35s var(--sv-ease);
}

.sv-btn:hover i {
    transform: translateX(3px) scale(1.08);
}

.sv-btn-primary {
    background: var(--sv-red);
    color: #fff;
    box-shadow: 0 10px 24px rgba(194, 21, 0, .3);
}

.sv-btn-primary:hover {
    background: var(--sv-red-dark);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(194, 21, 0, .42);
}

.sv-btn-ghost {
    border-color: rgba(255, 255, 255, .38);
    color: #fff;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.sv-btn-ghost:hover {
    background: rgba(255, 255, 255, .96);
    border-color: #fff;
    color: var(--sv-red);
    transform: translateY(-3px);
}

.sv-btn-line {
    border-color: var(--sv-red);
    color: var(--sv-red);
}

.sv-btn-line:hover {
    background: var(--sv-red);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(194, 21, 0, .28);
}

.sv-btn-light {
    background: #fff;
    color: var(--sv-red);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}

.sv-btn-light:hover {
    background: var(--sv-ink);
    color: #fff;
    transform: translateY(-3px);
}

.sv-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

/* water ripple on click (injected by the page script) */
.sv-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255, 255, 255, .55);
    pointer-events: none;
    animation: svRipple .7s var(--sv-ease) forwards;
}

.sv-btn-light .sv-ripple,
.sv-btn-line .sv-ripple {
    background: rgba(194, 21, 0, .28);
}

@keyframes svRipple {
    to {
        transform: scale(2.6);
        opacity: 0;
    }
}

/* Scroll reveal. Gated on .sv-js (set by a one-line script in the head) so a
   blocked or failed script can never leave the page invisible. No will-change
   here on purpose - it would promote ~40 elements to their own layers for the
   whole session to save one transition. */
.sv-js .sv-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s var(--sv-ease), transform .8s var(--sv-ease);
}

.sv-js .sv-reveal.sv-in {
    opacity: 1;
    transform: none;
}

/* Sections park their infinite animations while off screen (class toggled by
   js/service-v2.js). Purely a cost saving - nothing visible is ever paused. */
.sv-idle,
.sv-idle *,
.sv-idle *:before,
.sv-idle *:after {
    animation-play-state: paused !important;
}

.sv-stagger > *:nth-child(2) { transition-delay: .08s; --sv-delay: .45s; }
.sv-stagger > *:nth-child(3) { transition-delay: .16s; --sv-delay: .9s; }
.sv-stagger > *:nth-child(4) { transition-delay: .24s; --sv-delay: 1.35s; }
.sv-stagger > *:nth-child(5) { transition-delay: .32s; --sv-delay: 1.8s; }
.sv-stagger > *:nth-child(6) { transition-delay: .40s; --sv-delay: 2.25s; }
.sv-stagger > *:nth-child(7) { transition-delay: .48s; --sv-delay: .6s; }
.sv-stagger > *:nth-child(8) { transition-delay: .56s; --sv-delay: 1.05s; }
.sv-stagger > *:nth-child(9) { transition-delay: .64s; --sv-delay: 1.5s; }
.sv-stagger > *:nth-child(10) { transition-delay: .72s; --sv-delay: 1.95s; }

/* hero entrance */
@keyframes svRise {
    from {
        opacity: 0;
        transform: translateY(34px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes svFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes svFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

@keyframes svBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.sv-rise {
    animation: svRise .9s var(--sv-ease) both;
}

.sv-r1 { animation-delay: .05s; }
.sv-r2 { animation-delay: .15s; }
.sv-r3 { animation-delay: .25s; }
.sv-r4 { animation-delay: .35s; }
.sv-r5 { animation-delay: .45s; }
.sv-r6 { animation-delay: .55s; }

/* ---------- 3. floating (water) motion ---------------------------------- */
/* Icons, images and pills drift up and down like they are resting on water.
   Anything that also moves on hover drops the animation there, otherwise the
   running animation would keep overriding the hover transform. */

/* small things - icons, pills, numbers */
.sv-float {
    animation: svBob 5.5s ease-in-out infinite;
}

/* big things - screenshots, section images */
.sv-float-slow {
    animation: svFloat 8s ease-in-out infinite;
}

/* Floating elements read their offset from --sv-delay, which the stagger
   containers set per child (see the reveal delays below), so a row never bobs
   in lockstep. The delay sits inside each shorthand on purpose - a separate
   animation-delay rule would be wiped by any later animation shorthand. */
.sv-float {
    animation-delay: var(--sv-delay, 0s);
}

.sv-float-slow {
    animation-delay: var(--sv-delay, 0s);
}

/* the benefit list ticks are deliberately excluded - see .sv-blist li i */

/* ---------- 4. hero ----------------------------------------------------- */

.sv-hero {
    position: relative;
    background-color: var(--sv-ink);
    background-position: center;
    background-size: cover;
    padding: 175px 0 100px;
    overflow: hidden;
}

.sv-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(23, 18, 16, .96) 0%, rgba(23, 18, 16, .88) 45%, rgba(143, 16, 0, .62) 100%);
}

.sv-hero:after {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    right: -180px;
    top: -220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(194, 21, 0, .55) 0%, rgba(194, 21, 0, 0) 68%);
    animation: svGlow 9s ease-in-out infinite;
}

@keyframes svGlow {
    0%, 100% { transform: scale(1); opacity: .9; }
    50% { transform: scale(1.14); opacity: 1; }
}

.sv-hero-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 60px;
    align-items: center;
}

.sv-hero .sv-tag {
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: solid 1px rgba(255, 255, 255, .18);
    color: #ffb3a6;
}

.sv-hero h1 {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(30px, 4vw, 52px);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -1px;
    color: #fff;
}

.sv-hero h1 em {
    font-style: normal;
    color: var(--sv-red-light);
}

.sv-hero-sub {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(17px, 1.8vw, 21px);
    font-weight: 600;
    color: #ffd7cf;
    margin: 20px 0 16px;
    line-height: 1.45;
}

.sv-hero-lead {
    color: rgba(255, 255, 255, .82);
    max-width: 620px;
}

.sv-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 22px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.sv-checks li {
    position: relative;
    padding-left: 32px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: "Montserrat", sans-serif;
    transition: transform .3s var(--sv-ease);
}

.sv-checks li:hover {
    transform: translateX(5px);
}

.sv-checks li i {
    position: absolute;
    left: 0;
    top: 2px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--sv-red);
    color: #fff;
    font-size: 11px;
    line-height: 21px;
    text-align: center;
    transition: all .3s var(--sv-ease);
}

.sv-checks li:hover i {
    background: #fff;
    color: var(--sv-red);
    transform: scale(1.15);
}

.sv-trust {
    margin-top: 30px;
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
    letter-spacing: .4px;
}

.sv-stars {
    color: #ffb400;
    letter-spacing: 3px;
    margin-right: 8px;
}

/* hero visual */
.sv-hero-visual {
    position: relative;
}

.sv-shot {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: solid 8px rgba(255, 255, 255, .07);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
    transition: translate .6s var(--sv-ease), box-shadow .6s var(--sv-ease);
}

/* the entrance runs first, then it settles into the float */
.sv-shot.sv-rise {
    animation: svRise .9s var(--sv-ease) both, svFloat 8s ease-in-out infinite;
    animation-delay: .25s, 1.2s;
}

/* Hover lifts with `translate`, not `transform`, because `transform` is what
   the float animation drives. The two compose, so the lift can be applied
   without cancelling the animation - cancelling it used to restart the
   entrance on mouse-out, which blanked the image for a moment. */
.sv-shot:hover {
    translate: 0 -8px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, .55);
}

.sv-shot img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .8s var(--sv-ease);
}

.sv-shot:hover img {
    transform: scale(1.05);
}

/* light sweeping across the screen, like a reflection on water */
.sv-shot:after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: skewX(-18deg);
    animation: svSweep 6s ease-in-out infinite;
}

@keyframes svSweep {
    0%, 65% { left: -60%; }
    100% { left: 130%; }
}

/* glass info chips */
.sv-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, .13);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: solid 1px rgba(255, 255, 255, .26);
    border-radius: 14px;
    padding: 14px 18px;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .3);
    max-width: 258px;
    animation: svFade .9s var(--sv-ease) both, svFloat 6s ease-in-out infinite;
    transition: background .35s ease, border-color .35s ease;
}

.sv-chip:hover {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .5);
}

.sv-chip i {
    font-size: 20px;
    color: #ff8a73;
}

.sv-chip strong {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

.sv-chip span {
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .78);
}

.sv-chip-a {
    left: -34px;
    top: 34px;
    animation-delay: .5s, 0s;
}

/* kept off the bottom-right corner so it never sits under the live-chat bubble */
.sv-chip-b {
    left: 10%;
    bottom: 8px;
    animation-delay: .7s, 1.6s;
}

/* ---------- 4b. stats band ---------------------------------------------- */

.sv-stats {
    background: #fff;
    padding: 0;
}

.sv-stats .sv-wrap {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: -46px;
    position: relative;
    z-index: 6;
    background: #fff;
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow);
    overflow: hidden;
}

.sv-stat {
    text-align: center;
    padding: 32px 20px;
    border-right: solid 1px var(--sv-line);
    transition: background .35s ease;
}

.sv-stat:last-child {
    border-right: 0;
}

.sv-stat:hover {
    background: var(--sv-tint);
}

.sv-stat strong {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 800;
    color: var(--sv-red);
    line-height: 1.1;
}

.sv-stat span {
    display: block;
    margin-top: 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--sv-body);
}

/* Five-item variant. Only the pages that put five tiles in the band add
   .sv-stats-5, so the four-column default is untouched everywhere else. */
.sv-stats-5 .sv-wrap {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.sv-stats-5 .sv-stat {
    padding-left: 12px;
    padding-right: 12px;
}

/* A "solo" tile is a single phrase with no label under it. Centre it against
   the two-line tiles beside it, and drop the type down a step so a longer
   phrase still fits the narrower column. */
.sv-stat-solo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sv-stat-solo strong {
    font-size: clamp(15px, 1.35vw, 20px);
    line-height: 1.3;
}

/* ---------- 4c. the problem we solve ------------------------------------ */

.sv-problem {
    background: #fff;
    padding: 100px 0 90px;
}

.sv-probs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.sv-prob {
    position: relative;
    padding: 20px 20px 20px 58px;
    background: var(--sv-tint);
    border: solid 1px var(--sv-line);
    border-radius: 10px;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--sv-head);
    line-height: 1.4;
    transition: all .35s var(--sv-ease);
}

.sv-prob:hover {
    border-color: rgba(194, 21, 0, .3);
    box-shadow: 0 14px 28px rgba(23, 18, 16, .08);
    transform: translateY(-4px);
}

.sv-prob i {
    position: absolute;
    left: 20px;
    top: 19px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--sv-red-soft);
    color: var(--sv-red);
    font-size: 11px;
    line-height: 24px;
    text-align: center;
    transition: all .35s var(--sv-ease);
}

.sv-prob:hover i {
    background: var(--sv-red);
    color: #fff;
}

.sv-solve {
    margin-top: 34px;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(16px, 1.6vw, 18px);
    font-weight: 600;
    color: var(--sv-head);
}

/* Opt-in modifier, used by one page. Everything below hangs off it, so a
   .sv-problem section without the class is completely unaffected. */

/* The shared heading line-height is 1.25. On a heading this size that wraps to
   two lines, the descenders of the first line very nearly touch the caps of
   the second - so this block gets a looser one. */
.sv-problem-tight h2 {
    line-height: 1.4;
}

/* 90px of padding here plus 100px on the section below left 190px of white
   under the closing line. Pulled in from both sides. The sibling selector
   means only the section that actually follows this block moves. */
.sv-problem-tight {
    padding-bottom: 45px;
}

.sv-problem-tight + .sv-why {
    padding-top: 60px;
}

/* The margin-top on .sv-solve above never took effect: ".svpage p" is a class
   plus an element, so it outranks the single class no matter which comes
   first, and its margin shorthand resets the top to 0 - which is why the
   closing line sits flush against the cards. Two classes here outrank it. */
.sv-problem-tight .sv-solve {
    margin-top: 36px;
}

/* ---------- 4d. industries ---------------------------------------------- */

.sv-industries {
    background: #fff;
    padding: 90px 0;
    position: relative;
    overflow: hidden;
    border-top: solid 1px var(--sv-line);
    border-bottom: solid 1px var(--sv-line);
}

.sv-industries:before {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    right: -220px;
    top: -220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(194, 21, 0, .07) 0%, rgba(194, 21, 0, 0) 70%);
    animation: svGlow 10s ease-in-out infinite;
}

.sv-industries .sv-wrap {
    position: relative;
    z-index: 2;
}

.sv-industries h2 {
    color: var(--sv-head);
}

.sv-industries h2 em {
    color: var(--sv-red);
}

.sv-industries .sv-sub {
    color: var(--sv-body);
}

.sv-inds {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.sv-ind {
    text-align: center;
    padding: 26px 14px;
    background: var(--sv-tint);
    border: solid 1px var(--sv-line);
    border-radius: 12px;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--sv-head);
    transition: all .35s var(--sv-ease);
}

.sv-ind:hover {
    background: #fff;
    border-color: var(--sv-red);
    transform: translateY(-6px);
    box-shadow: var(--sv-shadow);
}

.sv-ind i {
    display: block;
    font-size: 22px;
    color: var(--sv-red);
    margin-bottom: 12px;
    animation: svBob 5.5s ease-in-out var(--sv-delay, 0s) infinite;
    transition: scale .35s var(--sv-ease);
}

.sv-ind:hover i {
    scale: 1.18;
}

/* ---------- 5. why webclixs -------------------------------------------- */

.sv-why {
    background: #fff;
    padding: 100px 0;
}

.sv-split {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 70px;
    align-items: start;
}

.sv-split-head {
    position: sticky;
    top: 120px;
}

.sv-split-head p {
    margin-top: 20px;
}

.sv-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.sv-card {
    position: relative;
    background: #fff;
    border: solid 1px var(--sv-line);
    border-radius: var(--sv-radius);
    padding: 34px 30px;
    overflow: hidden;
    transition: transform .4s var(--sv-ease), box-shadow .4s var(--sv-ease), border-color .4s ease;
}

/* soft red wash rises from the bottom on hover */
.sv-card:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    background: linear-gradient(to top, rgba(194, 21, 0, .07), transparent);
    transition: height .45s var(--sv-ease);
}

.sv-card:hover {
    border-color: rgba(194, 21, 0, .35);
    box-shadow: 0 24px 48px rgba(23, 18, 16, .12);
    transform: translateY(-8px);
}

.sv-card:hover:before {
    height: 100%;
}

.sv-card > * {
    position: relative;
}

.sv-ico {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: var(--sv-red-soft);
    color: var(--sv-red);
    font-size: 22px;
    line-height: 54px;
    text-align: center;
    margin-bottom: 22px;
    animation: svBob 5.5s ease-in-out var(--sv-delay, 0s) infinite;
    transition: background .45s var(--sv-ease), color .45s var(--sv-ease),
                box-shadow .45s var(--sv-ease), rotate .45s var(--sv-ease),
                scale .45s var(--sv-ease);
}

.sv-card:hover .sv-ico {
    background: var(--sv-red);
    color: #fff;
    rotate: -8deg;
    scale: 1.08;
    box-shadow: 0 12px 24px rgba(194, 21, 0, .32);
}

.sv-card h3 {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 10px;
    transition: color .3s ease;
}

.sv-card:hover h3 {
    color: var(--sv-red);
}

.sv-card p {
    font-size: 15px;
}

/* ---------- 6. services ------------------------------------------------- */

.sv-services {
    position: relative;
    background: var(--sv-tint);
    padding: 100px 0;
    border-top: solid 1px var(--sv-line);
    border-bottom: solid 1px var(--sv-line);
    overflow: hidden;
}

/* colour behind the glass, otherwise the blur has nothing to work with */
.sv-services:before,
.sv-services:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.sv-services:before {
    width: 520px;
    height: 520px;
    left: -160px;
    top: -140px;
    background: radial-gradient(circle, rgba(194, 21, 0, .16) 0%, rgba(194, 21, 0, 0) 70%);
}

.sv-services:after {
    width: 620px;
    height: 620px;
    right: -200px;
    bottom: -240px;
    background: radial-gradient(circle, rgba(255, 106, 82, .18) 0%, rgba(255, 106, 82, 0) 70%);
}

.sv-services .sv-wrap {
    position: relative;
    z-index: 2;
}

.sv-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

.sv-svc {
    position: relative;
    background: rgba(255, 255, 255, .68);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: solid 1px rgba(255, 255, 255, .8);
    border-radius: var(--sv-radius);
    padding: 30px 22px 26px;
    overflow: hidden;
    transition: transform .4s var(--sv-ease), box-shadow .4s var(--sv-ease), background .4s ease;
}

.sv-svc:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, var(--sv-red), var(--sv-red-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--sv-ease);
}

.sv-svc:hover {
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 22px 44px rgba(23, 18, 16, .12);
    transform: translateY(-7px);
}

.sv-svc:hover:before {
    transform: scaleX(1);
}

.sv-svc i {
    display: block;
    font-size: 26px;
    color: var(--sv-red);
    margin-bottom: 16px;
    animation: svBob 5.5s ease-in-out var(--sv-delay, 0s) infinite;
    transition: translate .45s var(--sv-ease), scale .45s var(--sv-ease);
}

.sv-svc:hover i {
    translate: 0 -4px;
    scale: 1.18;
}

.sv-svc h3 {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    transition: color .3s ease;
}

.sv-svc:hover h3 {
    color: var(--sv-red);
}

.sv-num {
    position: absolute;
    right: 20px;
    top: 20px;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: #e2d9d5;
    letter-spacing: .5px;
    transition: all .35s ease;
}

.sv-svc:hover .sv-num {
    color: var(--sv-red);
    transform: scale(1.15);
}

/* ---------- 7. process -------------------------------------------------- */

.sv-process {
    background: #fff;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    border-top: solid 1px var(--sv-line);
    border-bottom: solid 1px var(--sv-line);
}

/* the brand glow stays, just dialled right down so it reads as a warm tint
   on white instead of the coloured wash it was on the dark background */
.sv-process:before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    left: -200px;
    bottom: -260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(194, 21, 0, .07) 0%, rgba(194, 21, 0, 0) 70%);
    animation: svGlow 11s ease-in-out infinite;
}

.sv-process .sv-wrap {
    position: relative;
    z-index: 2;
}

.sv-process h2,
.sv-process h3 {
    color: var(--sv-head);
}

.sv-process h2 em {
    color: var(--sv-red);
}

.sv-process .sv-sub {
    color: var(--sv-body);
}

.sv-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
    position: relative;
}

.sv-steps:before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 60px;
    height: 2px;
    background: repeating-linear-gradient(to right, rgba(194, 21, 0, .3) 0 8px, transparent 8px 16px);
}

/* step card */
.sv-step {
    position: relative;
    text-align: center;
    padding: 32px 20px 30px;
    background: var(--sv-tint);
    border: solid 1px var(--sv-line);
    border-radius: 16px;
    transition: transform .4s var(--sv-ease), background .4s ease, border-color .4s ease, box-shadow .4s ease;
}

.sv-step:hover {
    background: #fff;
    border-color: var(--sv-red);
    transform: translateY(-8px);
    box-shadow: var(--sv-shadow);
}

.sv-step-n {
    position: relative;
    z-index: 2;
    width: 58px;
    height: 58px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: var(--sv-red);
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 58px;
    box-shadow: 0 0 0 8px rgba(194, 21, 0, .16);
    transition: scale .4s var(--sv-ease);
}

/* water-drop ring that keeps spreading out of the number */
.sv-step-n {
    animation: svBob 5.5s ease-in-out var(--sv-delay, 0s) infinite;
}

.sv-step-n:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: solid 2px rgba(255, 106, 82, .6);
    animation: svRing 3.2s ease-out infinite;
}

.sv-step:nth-child(2) .sv-step-n:after { animation-delay: .8s; }
.sv-step:nth-child(3) .sv-step-n:after { animation-delay: 1.6s; }
.sv-step:nth-child(4) .sv-step-n:after { animation-delay: 2.4s; }

@keyframes svRing {
    0% { transform: scale(1); opacity: .85; }
    70% { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(1.7); opacity: 0; }
}

.sv-step:hover .sv-step-n {
    scale: 1.1;
}

.sv-step h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.sv-step p {
    color: var(--sv-body);
    font-size: 15px;
}

/* ---------- 8. benefits ------------------------------------------------- */

.sv-benefits {
    background: #fff;
    padding: 100px 0;
}

.sv-bsplit {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
    align-items: center;
}

.sv-frame {
    position: relative;
    padding: 0 0 22px 22px;
}

.sv-frame:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 62%;
    height: 72%;
    border: solid 3px var(--sv-red);
    border-radius: var(--sv-radius);
    transition: all .5s var(--sv-ease);
}

.sv-frame:hover:before {
    left: 8px;
    bottom: 8px;
}

.sv-frame img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow);
    animation: svFloat 8s ease-in-out infinite;
    transition: translate .6s var(--sv-ease), box-shadow .6s var(--sv-ease);
}

.sv-frame:hover img {
    translate: 0 -8px;
    box-shadow: 0 28px 56px rgba(23, 18, 16, .16);
}

.sv-blist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.sv-blist li {
    position: relative;
    padding: 18px 18px 18px 52px;
    background: var(--sv-tint);
    border: solid 1px transparent;
    border-radius: 10px;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--sv-head);
    line-height: 1.4;
    transition: all .35s var(--sv-ease);
}

.sv-blist li:hover {
    background: var(--sv-red-soft);
    border-color: rgba(194, 21, 0, .25);
    transform: translateX(6px);
    box-shadow: 0 12px 26px rgba(194, 21, 0, .12);
}

.sv-blist li i {
    position: absolute;
    left: 20px;
    top: 20px;
    color: var(--sv-red);
    font-size: 15px;
    transition: transform .35s var(--sv-ease);
}

/* no float here on purpose - these ticks stay put */
.sv-blist li:hover i {
    transform: scale(1.3);
}

/* ---------- 9. recent work ---------------------------------------------- */

.sv-work {
    background: var(--sv-tint);
    padding: 90px 0;
    border-top: solid 1px var(--sv-line);
}

.sv-work-box {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 55px;
    align-items: center;
}

.sv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.sv-chips span {
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: solid 1px var(--sv-line);
    border-radius: 40px;
    padding: 9px 20px;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--sv-head);
    cursor: default;
    transition: all .35s var(--sv-ease);
}

.sv-chips span:hover {
    background: var(--sv-red);
    border-color: var(--sv-red);
    color: #fff;
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(194, 21, 0, .28);
}

.sv-work-cta {
    text-align: right;
}

/* ---------- 10. faq ----------------------------------------------------- */

.sv-faq {
    background: #fff;
    padding: 100px 0;
}

.sv-acc {
    max-width: 950px;
    margin: 0 auto;
}

.sv-q {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: solid 1px var(--sv-line);
    border-radius: 10px;
    margin-bottom: 14px;
    padding: 22px 62px 22px 26px;
    position: relative;
    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--sv-head);
    line-height: 1.45;
    cursor: pointer;
    transition: all .3s var(--sv-ease);
}

.sv-q:hover {
    border-color: var(--sv-red);
    background: var(--sv-tint);
    padding-left: 32px;
    box-shadow: 0 12px 26px rgba(23, 18, 16, .07);
}

.sv-q:after {
    content: "\f067";
    font-family: FontAwesome;
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--sv-red-soft);
    color: var(--sv-red);
    font-size: 12px;
    font-weight: 400;
    line-height: 30px;
    text-align: center;
    transition: all .3s var(--sv-ease);
}

.sv-q:hover:after {
    transform: translateY(-50%) rotate(90deg);
}

.sv-q.sv-open {
    border-color: var(--sv-red);
    background: var(--sv-tint);
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.sv-q.sv-open:after {
    content: "\f068";
    background: var(--sv-red);
    color: #fff;
    transform: translateY(-50%) rotate(180deg);
}

.sv-a {
    max-height: 0;
    overflow: hidden;
    border-left: solid 1px var(--sv-red);
    border-right: solid 1px var(--sv-red);
    border-bottom: solid 1px var(--sv-red);
    border-radius: 0 0 10px 10px;
    margin-bottom: 14px;
    background: var(--sv-tint);
    transition: max-height .4s var(--sv-ease);
}

.sv-a-in {
    padding: 4px 26px 24px;
    font-size: 15px;
}

/* ---------- 11. closing cta --------------------------------------------- */

/* Light closing CTA. The footer underneath is plain white, so this keeps a
   soft tint at the top and fades into white - the seam stays readable without
   a coloured slab. */
.sv-final {
    background: linear-gradient(180deg, var(--sv-tint) 0%, #fff 100%);
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-top: solid 1px var(--sv-line);
}

.sv-final:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 15%, rgba(194, 21, 0, .06) 0%, rgba(194, 21, 0, 0) 55%);
}

.sv-final .sv-wrap {
    position: relative;
    z-index: 5;
}

.sv-final h2 {
    color: var(--sv-head);
    max-width: 900px;
    margin: 0 auto;
}

.sv-final p {
    color: var(--sv-body);
    max-width: 760px;
    margin: 20px auto 0;
}

.sv-final .sv-sub {
    color: var(--sv-head);
    margin-top: 18px;
}

.sv-final .sv-cta-row {
    justify-content: center;
}

/* The two buttons in this block were styled for a red background. On the light
   one they would vanish, so they take the solid / outlined pair instead - the
   markup on the pages stays untouched. */
.sv-final .sv-btn-light {
    background: var(--sv-red);
    color: #fff;
    box-shadow: 0 10px 24px rgba(194, 21, 0, .3);
}

.sv-final .sv-btn-light:hover {
    background: var(--sv-red-dark);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(194, 21, 0, .42);
}

.sv-final .sv-btn-light .sv-ripple {
    background: rgba(255, 255, 255, .55);
}

.sv-final .sv-btn-ghost {
    background: #fff;
    border-color: var(--sv-red);
    color: var(--sv-red);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.sv-final .sv-btn-ghost:hover {
    background: var(--sv-red);
    border-color: var(--sv-red);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(194, 21, 0, .28);
}

.sv-final .sv-btn-ghost .sv-ripple {
    background: rgba(194, 21, 0, .28);
}

/* ---------- 12. responsive ---------------------------------------------- */

@media only screen and (max-width: 1200px) {
    .sv-grid,
    .sv-inds {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sv-chip-a {
        left: -12px;
    }

    .sv-chip-b {
        left: 4%;
    }
}

@media only screen and (max-width: 1024px) {
    .sv-hero {
        padding: 150px 0 80px;
    }

    .sv-hero-grid,
    .sv-split,
    .sv-bsplit,
    .sv-work-box {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .sv-split-head {
        position: static;
    }

    .sv-hero-visual {
        max-width: 560px;
    }

    .sv-frame {
        max-width: 560px;
    }

    .sv-work-cta {
        text-align: left;
    }

    .sv-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px;
    }

    .sv-steps:before {
        display: none;
    }

    .sv-why,
    .sv-services,
    .sv-process,
    .sv-benefits,
    .sv-faq,
    .sv-industries {
        padding: 75px 0;
    }

    .sv-problem {
        padding: 75px 0 65px;
    }

    /* re-applied after the shared shorthand above, which would otherwise reset
       the padding-bottom set on .sv-problem-tight */
    .sv-problem-tight {
        padding-bottom: 40px;
    }

    .sv-problem-tight + .sv-why {
        padding-top: 50px;
    }

    .sv-probs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sv-stats .sv-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: -36px;
    }

    .sv-stat:nth-child(2) {
        border-right: 0;
    }

    .sv-stat:nth-child(1),
    .sv-stat:nth-child(2) {
        border-bottom: solid 1px var(--sv-line);
    }

    /* Five tiles in a two-column grid leaves the fifth alone on the last row,
       so let it span the full width. Dividers follow the new row pairs. */
    .sv-stats-5 .sv-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sv-stats-5 .sv-stat:last-child {
        grid-column: 1 / -1;
    }

    .sv-stats-5 .sv-stat:nth-child(4) {
        border-right: 0;
    }

    .sv-stats-5 .sv-stat:nth-child(3),
    .sv-stats-5 .sv-stat:nth-child(4) {
        border-bottom: solid 1px var(--sv-line);
    }

}

@media only screen and (max-width: 780px) {
    body.svbody .toplogo {
        width: 190px;
        padding: 7px 11px;
        margin-top: 16px;
    }
}

@media only screen and (max-width: 760px) {
    .svpage {
        font-size: 15px;
    }

    .sv-wrap {
        width: 92%;
    }

    .sv-hero {
        padding: 130px 0 70px;
    }

    .sv-checks,
    .sv-cards,
    .sv-blist {
        grid-template-columns: 1fr;
    }

    .sv-grid,
    .sv-inds {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sv-probs {
        grid-template-columns: 1fr;
    }

    .sv-chip {
        position: static;
        max-width: none;
        margin-top: 14px;
        animation: svFade .9s var(--sv-ease) both, svBob 5.5s ease-in-out 1s infinite;
    }

    .sv-cta-row .sv-btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .sv-center {
        margin-bottom: 40px;
    }

    .sv-q {
        font-size: 16px;
        padding: 18px 56px 18px 20px;
    }

    .sv-q:hover {
        padding-left: 20px;
    }

    .sv-a-in {
        padding: 4px 20px 20px;
    }

    .sv-final {
        padding: 70px 0;
    }
}

@media only screen and (max-width: 480px) {
    .sv-grid,
    .sv-inds {
        grid-template-columns: 1fr;
    }

    .sv-stats .sv-wrap {
        grid-template-columns: 1fr;
    }

    .sv-stat {
        border-right: 0;
        border-bottom: solid 1px var(--sv-line);
    }

    .sv-steps {
        grid-template-columns: 1fr;
    }
}

/* ---------- motion preferences ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .svpage *,
    .svpage *:before,
    .svpage *:after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .sv-js .sv-reveal {
        opacity: 1;
        transform: none;
    }
}