/* ==========================================================================
   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);
}

/* ---------- 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: 150px 0 70px;
    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
   The chips float over hero photos that run from near-white to near-black, so
   the tint is dark rather than light - the glass is still see-through and still
   blurred, but white labels keep their contrast wherever a chip lands. */
.sv-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(18, 12, 14, .64), rgba(18, 12, 14, .5));
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: solid 1px rgba(255, 255, 255, .34);
    border-radius: 14px;
    padding: 14px 18px;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .38);
    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: linear-gradient(135deg, rgba(18, 12, 14, .74), rgba(18, 12, 14, .6));
    border-color: rgba(255, 255, 255, .56);
}

.sv-chip i {
    font-size: 20px;
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
}

.sv-chip strong {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .1px;
    color: #fff;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .95);
}

.sv-chip span {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    color: rgba(255, 255, 255, .94);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .95);
}

.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: 70px 0 63px;
}

.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: 32px;
}

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

/* 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: 63px 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;
}

/* Logo variant, opted into by the page whose tiles carry real platform marks
   (Instagram, Facebook, LinkedIn...) instead of font icons. The artwork is
   supplied as JPGs on a white square, so `multiply` drops that square out
   against the tile - which is near-white in both the resting and hover state,
   so the mark keeps its own colours. */
.sv-inds-logo .sv-ind img {
    display: block;
    height: 52px;
    width: auto;
    margin: 0 auto 12px;
    mix-blend-mode: multiply;
    animation: svBob 5.5s ease-in-out var(--sv-delay, 0s) infinite;
    transition: scale .35s var(--sv-ease);
}

.sv-inds-logo .sv-ind:hover img {
    scale: 1.12;
}

/* Six across on one row, for a platform strip that reads as a set rather than
   as a grid. Declared before the responsive block, so the narrower column
   counts there still take over. */
.sv-inds-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

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

.sv-why {
    background: #fff;
    padding: 70px 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: 70px 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);
}

/* Four across, for a service set of eight. The five-column default would leave
   a 5 + 3 split; four gives two even rows. Before the responsive block so the
   tablet and phone counts there still win. */
.sv-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Three across, for a set of six - the five-column default strands the sixth
   tile on a row of its own. Same placement reasoning as .sv-grid-4. */
.sv-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Logo variant of the service tile, for the page that has a commissioned icon
   set rather than font icons. Same reasoning as .sv-inds-logo above: the
   source files are JPGs on a white square, and `multiply` removes it against
   the near-white glass. Centred, because a 64px mark reads badly hard against
   the left edge with the number sitting opposite it. */
.sv-grid-logo .sv-svc {
    text-align: center;
}

.sv-grid-logo .sv-svc img {
    display: block;
    height: 64px;
    width: auto;
    margin: 0 auto 16px;
    mix-blend-mode: multiply;
    animation: svBob 5.5s ease-in-out var(--sv-delay, 0s) infinite;
    transition: translate .45s var(--sv-ease), scale .45s var(--sv-ease);
}

.sv-grid-logo .sv-svc:hover img {
    translate: 0 -4px;
    scale: 1.12;
}

/* Photo variant of the service tile, for the two pages whose artwork for this
   block is a square photograph rather than a flat mark on white. `multiply`
   would muddy a photo, so instead of blending it away the tile crops the image
   into a circle and rings it - which is how those photos were already being
   presented on the old page (.circlepic). */
.sv-grid-photo .sv-svc {
    text-align: center;
}

.sv-grid-photo .sv-svc img {
    display: block;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 18px;
    border: solid 3px #fff;
    box-shadow: 0 8px 20px rgba(23, 18, 16, .16);
    animation: svBob 5.5s ease-in-out var(--sv-delay, 0s) infinite;
    transition: translate .45s var(--sv-ease), scale .45s var(--sv-ease),
                box-shadow .45s var(--sv-ease);
}

.sv-grid-photo .sv-svc:hover img {
    translate: 0 -4px;
    scale: 1.06;
    box-shadow: 0 14px 28px rgba(194, 21, 0, .3);
}

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

.sv-process {
    background: #fff;
    padding: 70px 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;
}

/* Six-step variant, opted into by the one page whose process runs to six
   stages. Three columns give two even rows instead of the 4 + 2 split the
   default grid would produce, and the cards stay wide enough for the longer
   step titles. Placed before the responsive block so the tablet/phone column
   counts there still win. */
.sv-steps-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 34px;
}

/* The dashed connector is one line drawn across the top of a single row, so
   on two rows it would cut straight through the second row's cards. The
   numbered circles carry the sequence on their own here. */
.sv-steps-6:before {
    display: none;
}

/* Steps 5 and 6 would otherwise pulse in sync with step 1. Interleaved with
   the .8s offsets above rather than re-spacing all six, which would mean
   touching the shared rules the other pages use. */
.sv-steps-6 .sv-step:nth-child(5) .sv-step-n:after { animation-delay: .4s; }
.sv-steps-6 .sv-step:nth-child(6) .sv-step-n:after { animation-delay: 1.2s; }

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

.sv-benefits {
    background: #fff;
    padding: 70px 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);
}

/* The glow used to be 0 12px 26px, which reached 38px below the row while the
   grid only leaves a 16px gap - the hovered row's tint ran straight into the
   one under it and the two read as a single block. Kept under the gap so a
   hovered row stays visibly its own row. */
.sv-blist li:hover {
    background: var(--sv-red-soft);
    border-color: rgba(194, 21, 0, .25);
    transform: translateX(4px);
    box-shadow: 0 4px 10px rgba(194, 21, 0, .10);
}

.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: 63px 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: 70px 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: 56px 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. client logo wall + tabs (portfolio) ---------------------- */

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

.sv-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}

.sv-tab {
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 13px 30px;
    border-radius: 999px;
    border: solid 1px var(--sv-line);
    background: #fff;
    color: var(--sv-head);
    cursor: pointer;
    transition: all .35s var(--sv-ease);
}

.sv-tab i {
    margin-right: 8px;
    color: var(--sv-red);
    transition: color .35s var(--sv-ease);
}

.sv-tab:hover {
    border-color: var(--sv-red);
    color: var(--sv-red);
    transform: translateY(-2px);
}

.sv-tab.sv-tab-on {
    background: var(--sv-red);
    border-color: var(--sv-red);
    color: #fff;
    box-shadow: 0 12px 26px rgba(194, 21, 0, .28);
}

.sv-tab.sv-tab-on i {
    color: #fff;
}

.sv-tab-count {
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    opacity: .65;
}

/* Only the selected panel is in the layout. The images inside a hidden panel
   are lazy, so the tab the visitor never opens costs no downloads at all. */
.sv-panel {
    display: none;
}

.sv-panel.sv-panel-on {
    display: block;
}

/* Deliberately not a .sv-stagger container: there are ~70 marks in here, and
   giving each one its own reveal observer and infinite bob animation was the
   whole cost of the section. The panel reveals as a single block instead. */
.sv-logos {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sv-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    padding: 14px 12px;
    background: #fff;
    border: solid 1px var(--sv-line);
    border-radius: 12px;
    transition: transform .35s var(--sv-ease), box-shadow .35s var(--sv-ease),
                border-color .35s ease;
}

/* Same reasoning as .sv-grid-logo: the marks are JPGs on a white square, so
   multiply drops the square out against the white tile. */
.sv-logo img {
    display: block;
    max-width: 100%;
    height: auto;
    mix-blend-mode: multiply;
    transition: scale .35s var(--sv-ease);
}

.sv-logo:hover {
    border-color: var(--sv-red);
    transform: translateY(-5px);
    box-shadow: var(--sv-shadow);
}

.sv-logo:hover img {
    scale: 1.06;
}

/* ---------- 13. contact ------------------------------------------------- */

.sv-contact {
    background: #fff;
    padding: 70px 0;
}

.sv-csplit {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 55px;
    align-items: start;
}

.sv-form {
    background: var(--sv-tint);
    border: solid 1px var(--sv-line);
    border-radius: var(--sv-radius);
    padding: 34px;
}

.sv-form h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
}

.sv-form-note {
    font-size: 14px;
    margin-bottom: 24px;
}

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

.sv-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.sv-field-full {
    grid-column: 1 / -1;
}

.sv-field label {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--sv-head);
}

.sv-field input,
.sv-field select,
.sv-field textarea {
    width: 100%;
    padding: 13px 15px;
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    color: var(--sv-head);
    background: #fff;
    border: solid 1px var(--sv-line);
    border-radius: 10px;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.sv-field textarea {
    resize: vertical;
    min-height: 120px;
}

.sv-field input:focus,
.sv-field select:focus,
.sv-field textarea:focus {
    outline: none;
    border-color: var(--sv-red);
    box-shadow: 0 0 0 3px var(--sv-red-soft);
}

.sv-field-bad input,
.sv-field-bad select,
.sv-field-bad textarea {
    border-color: var(--sv-red);
}

.sv-err {
    font-size: 13px;
    color: var(--sv-red);
}

/* Sits above the form when the handler bounces a submission back. */
.sv-alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 15px 18px;
    margin-bottom: 22px;
    border-radius: 10px;
    background: var(--sv-red-soft);
    border: solid 1px rgba(194, 21, 0, .25);
    color: var(--sv-red-dark);
    font-size: 14px;
}

.sv-form button {
    margin-top: 22px;
    width: 100%;
    justify-content: center;
}

/* ---------- 13b. quote form -------------------------------------------- */

/* Only the quote form has a <select>, sub-headed field groups and a required
   marker, so these hang off their own classes instead of widening the shared
   contact-form rules above. The native select arrow is replaced with an inline
   chevron so the control matches the text inputs on every browser. */
.sv-field select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23c21500' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
}

/* Group divider inside the form - "Personal Details", "Project Details". */
.sv-form-sec {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sv-head);
}

.sv-form-sec:before {
    content: "";
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: var(--sv-red);
    flex: none;
}

.sv-form-sec:after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--sv-line);
}

/* second and later groups need air above them */
.sv-form-grid + .sv-form-sec {
    margin-top: 28px;
}

.sv-req {
    color: var(--sv-red);
}

/* Native constraint-validation styling, scoped to the quote form - it is the
   only form here that uses required attributes. :user-invalid only turns red
   once the visitor has actually touched the field, so an untouched empty form
   is not painted red on load the way :invalid would do. */
#quoteform .sv-field input:user-invalid,
#quoteform .sv-field select:user-invalid,
#quoteform .sv-field textarea:user-invalid {
    border-color: var(--sv-red);
    box-shadow: 0 0 0 3px var(--sv-red-soft);
}

/* the small print under the submit button */
.sv-form-foot {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--sv-body);
    text-align: center;
}

.sv-form-foot i {
    color: var(--sv-red);
    margin-right: 5px;
}

/* numbered "what happens next" list in the right-hand column */
.sv-next {
    display: grid;
    gap: 14px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: svnext;
}

.sv-next li {
    position: relative;
    padding: 16px 18px 16px 58px;
    background: #fff;
    border: solid 1px var(--sv-line);
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.55;
    transition: border-color .3s ease, box-shadow .3s var(--sv-ease);
}

.sv-next li:hover {
    border-color: rgba(194, 21, 0, .3);
    box-shadow: 0 4px 10px rgba(23, 18, 16, .06);
}

.sv-next li:before {
    counter-increment: svnext;
    content: counter(svnext);
    position: absolute;
    left: 18px;
    top: 15px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--sv-red);
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 26px;
    text-align: center;
}

.sv-next li strong {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    color: var(--sv-head);
    margin-bottom: 2px;
}

/* the "rather talk first" card that follows the numbered list */
.sv-quote-reach {
    margin-top: 26px;
}

/* office / channel cards down the right-hand column */
.sv-offices {
    display: grid;
    gap: 16px;
}

.sv-office {
    position: relative;
    background: #fff;
    border: solid 1px var(--sv-line);
    border-left: solid 3px var(--sv-red);
    border-radius: 12px;
    padding: 22px 24px;
    transition: transform .35s var(--sv-ease), box-shadow .35s var(--sv-ease);
}

.sv-office:hover {
    transform: translateX(4px);
    box-shadow: var(--sv-shadow);
}

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

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

.sv-office p {
    font-size: 15px;
    margin: 0 0 6px;
}

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

.sv-office i {
    width: 20px;
    color: var(--sv-red);
}

.sv-office a {
    color: var(--sv-body);
    transition: color .3s ease;
}

.sv-office a:hover {
    color: var(--sv-red);
}

/* three "how to reach us" tiles under the split */
.sv-reach {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 60px;
}

.sv-reach-card {
    text-align: center;
    background: var(--sv-tint);
    border: solid 1px var(--sv-line);
    border-radius: var(--sv-radius);
    padding: 32px 24px;
    transition: transform .4s var(--sv-ease), box-shadow .4s var(--sv-ease),
                border-color .4s ease;
}

.sv-reach-card:hover {
    background: #fff;
    border-color: rgba(194, 21, 0, .35);
    transform: translateY(-7px);
    box-shadow: var(--sv-shadow);
}

.sv-reach-card i {
    display: block;
    font-size: 26px;
    color: var(--sv-red);
    margin-bottom: 14px;
    animation: svBob 5.5s ease-in-out var(--sv-delay, 0s) infinite;
}

.sv-reach-card h3 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
}

.sv-reach-card a {
    color: var(--sv-red);
    font-weight: 600;
    word-break: break-word;
}

/* ---------- 14. responsive ---------------------------------------------- */

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

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

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

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

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

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

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

    .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,
    .sv-clients,
    .sv-contact {
        padding: 53px 0;
    }

    .sv-problem {
        padding: 53px 0 46px;
    }

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

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

    .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: 115px 0 49px;
    }

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

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

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

    .sv-form-grid,
    .sv-reach {
        grid-template-columns: 1fr;
    }

    .sv-form {
        padding: 24px 20px;
    }

    /* 16px, not the 15px used on desktop: iOS Safari zooms the whole page in
       when you focus a field whose type is smaller than that. */
    .sv-field input,
    .sv-field textarea {
        font-size: 16px;
    }

    /* 13px keeps the pill at a 44px tap target once the type drops to 13px */
    .sv-tab {
        padding: 13px 20px;
        font-size: 13px;
    }

    /* Both of these hold two or three short words per tile. One column gave
       every one of them a full-width row and stretched the two blocks by
       roughly 600px on a phone, so they stay at two - same call as the
       short-label grids in the 480px block below. The padding and icons
       shrink with them: the desktop 58px/52px text indent left barely 70px
       of line for the label in a half-width tile. */
    .sv-probs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .sv-prob {
        padding: 14px 12px 14px 38px;
        font-size: 13px;
    }

    .sv-prob i {
        left: 11px;
        top: 13px;
        width: 20px;
        height: 20px;
        font-size: 10px;
        line-height: 20px;
    }

    .sv-blist {
        gap: 10px;
        margin-top: 24px;
    }

    .sv-blist li {
        padding: 14px 12px 14px 34px;
        font-size: 13px;
    }

    .sv-blist li i {
        left: 13px;
        top: 15px;
        font-size: 13px;
    }

    .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: 49px 0;
    }
}

@media only screen and (max-width: 480px) {
    /* The short-label grids deliberately stay at two columns here. One column
       gave every one-word tile ("Healthcare", "Blog Integration") a full-width
       row, which added roughly 1300px of height to the services and industries
       blocks on a phone for no extra information. */
    .sv-svc {
        padding: 22px 14px 20px;
    }

    .sv-svc h3 {
        font-size: 14px;
    }

    .sv-num {
        right: 12px;
        top: 12px;
        font-size: 11px;
    }

    /* Two-column tiles are only ~150px wide on a phone, so the 104px circle
       above leaves almost no room around it. */
    .sv-grid-photo .sv-svc img {
        width: 78px;
        height: 78px;
        margin-bottom: 14px;
    }

    .sv-ind {
        padding: 20px 8px;
        font-size: 13px;
    }

    .sv-ind i {
        font-size: 19px;
        margin-bottom: 9px;
    }

    /* The stats band keeps the two-column layout from the 1024 block as well -
       borders and the five-item variant included - so nothing about it is
       redeclared here on purpose. */

    /* Two-column stat tiles are only ~172px wide here, so the default
       padding and type size left labels like "Laravel Developers"
       overflowing. :not() leaves the solo tiles on their own size. */
    .sv-stat {
        padding: 26px 10px;
    }

    .sv-stat:not(.sv-stat-solo) strong {
        font-size: 21px;
    }

    .sv-stat span {
        font-size: 13px;
    }

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

    /* Phone section rhythm. 75px of padding top and bottom on every block added
       up to more than a screen of empty space on its own. */
    .sv-hero {
        padding: 105px 0 42px;
    }

    .sv-why,
    .sv-services,
    .sv-process,
    .sv-benefits,
    .sv-faq,
    .sv-industries,
    .sv-work,
    .sv-final,
    .sv-clients,
    .sv-contact {
        padding: 39px 0;
    }

    /* Two columns of marks, same reasoning as the note at the top of this
       block - one logo per row would make the wall roughly 70 screens long. */
    .sv-logos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .sv-logo {
        min-height: 74px;
        padding: 10px;
    }

    .sv-reach {
        margin-top: 40px;
    }

    .sv-problem {
        padding: 39px 0 28px;
    }

    /* Same shorthand trap as in the 1024 block: .sv-problem above resets the
       bottom padding, so the modifier has to be restated after it. */
    .sv-problem-tight {
        padding-bottom: 24px;
    }

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

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

/* ---------- 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;
    }
}