/* ==========================================================================
   WebClixs - Varanasi landing page, version 2
   Page-scoped stylesheet. Loaded only by varanasi2.php, after css/style.css,
   which the page needs for the site-wide header and footer. Every class here
   is prefixed .v2-, and the element-level rules are scoped to .v2-main - the
   wrapper around this page's own sections - so the shared chrome above and
   below it keeps the styling it has everywhere else. The older Varanasi page
   uses .vr-, and the two prefixes must never collide.

   The look is editorial rather than corporate:

     - a high-contrast serif (Playfair Display) does the talking, Inter does
       the reading. Nothing else gets a display size.
     - a brush script (Kaushan) and Devanagari (Tiro) sit over the photography
       as hand-written margin notes. They are decoration, always aria-hidden,
       and they are the first thing dropped on a narrow screen.
     - red is an accent that appears in small quantities - the eyebrow rule,
       the underline stroke, one button, the icon discs. The ground stays
       paper white and warm cream so it never reads as a red theme.

   Contents
     0.  tokens, reset, base
     1.  shared bits (buttons, eyebrow, links, discs, reveal)
     2.  scroll progress
     3.  hero + consultation form
     4.  stats strip
     5.  services
     6.  why Varanasi trusts us
     7.  our work (logo marquee + sketch)
     8.  in media (filterable mosaic)
     9.  faq
     10. closing cta
     11. mobile action bar
     12. lightbox
     13. responsive
     14. reduced motion
   ========================================================================== */


/* ---------- 0. tokens, reset, base --------------------------------------- */

.v2page {
    --v2-red: #e01b24;
    --v2-red-deep: #b3121a;
    --v2-blush: #fdecec;
    --v2-blush-2: #fbdfe0;

    --v2-ink: #16181c;
    --v2-slate: #5f6672;
    --v2-mute: #8d94a0;
    --v2-line: #ece7e1;
    --v2-paper: #fff;
    --v2-cream: #fdf9f5;
    --v2-serif: "Montserrat", sans-serif;
    --v2-sans: "Open Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
    --v2-script: "Kaushan Script", "Segoe Script", cursive;

    --v2-r: 14px;
    --v2-r-lg: 20px;
    --v2-shadow: 0 16px 40px rgba(22, 24, 28, .07);
    --v2-shadow-lift: 0 26px 60px rgba(22, 24, 28, .14);
    --v2-ring: 0 0 0 4px rgba(224, 27, 36, .13);
    --v2-ease: cubic-bezier(.22, .61, .36, 1);

    margin: 0;
    /* css/style.css pins body to height:100%, which would cap the masthead's
       sticky travel to one viewport - it would unstick a screen down. */
    height: auto;
    min-height: 100%;
    font-family: var(--v2-sans);
    font-size: 16px;
    line-height: 1.7;
    color: var(--v2-slate);
    background: var(--v2-paper);
    -webkit-font-smoothing: antialiased;
}

/* The element-level rules below are hung on .v2-main, not on .v2page, and
   that distinction matters: the page also carries the site-wide header and
   footer, and a bare `.v2page h2` would outrank every plain `footer h2` in
   css/style.css and repaint the shared chrome. .v2-main wraps this page's own
   sections only. The mobile bar and the lightbox sit outside it, so they are
   named alongside wherever they need the same base. */
.v2-main *,
.v2-bar *,
.v2-lightbox * {
    box-sizing: border-box;
}

/* The hand-written script notes sit outside the columns on purpose and would
   otherwise widen the page. Clipping them here rather than on the body is
   what lets the masthead above be position: sticky - an overflow value on an
   ancestor takes the scrollport away from a sticky child. */
.v2-main {
    overflow-x: clip;
}

/* Author rules win over the UA sheet, so anything given a `display` below -
   the lightbox, images - would stay on screen with the hidden attribute set.
   Without this the closed lightbox covers the page and swallows every click. */
.v2page [hidden] {
    display: none !important;
}

.v2-main h1,
.v2-main h2,
.v2-main h3 {
    font-family: var(--v2-serif);
    color: var(--v2-ink);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.01em;
    margin: 0 0 14px;
}

.v2-main h1 { font-size: clamp(46px, 5.4vw, 74px); }
.v2-main h2 { font-size: clamp(30px, 3.2vw, 42px); }

.v2-main h3 {
    font-family: var(--v2-sans);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.005em;
}

.v2-main p { margin: 0 0 16px; }

.v2-main img,
.v2-lightbox img { max-width: 100%; height: auto; display: block; }

.v2-main a,
.v2-bar a {
    color: var(--v2-red);
    text-decoration: none;
}

.v2-main em {
    font-style: normal;
    color: var(--v2-red);
    position: relative;
}

.v2-main :focus-visible,
.v2-bar :focus-visible,
.v2-lightbox :focus-visible {
    outline: 3px solid var(--v2-red);
    outline-offset: 3px;
    border-radius: 6px;
}


/* ---------- 0.5 shared chrome -------------------------------------------
   Two collisions between css/style.css and this page, and only two.

   The site sheet styles its masthead as a bare `header` - fixed height, an
   absolute box, a z-index above everything - and this page's hero is also a
   <header>. Hand the hero back its own geometry.

   The masthead itself is taken out of that absolute layer here: on this page
   it is a white band standing on its own above the hero rather than floating
   over the photograph, so the two never fight for the same strip of screen.
   Its right-hand block is white type elsewhere - correct over the dark banners
   the rest of the site opens with, invisible on white - so it is set in ink. */

.v2page header.v2-hero {
    position: relative;
    height: auto;
    top: auto;
    z-index: auto;
}

/* Sticky rather than the site's absolute-then-fixed pair: in flow it stands
   above the hero instead of floating over it, and it needs no scroll handler
   to swap states halfway down - which is why varanasi2.php does not add the
   .fheader class this page's sheet would have to fight anyway. */
.v2page header#navigation {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #fff;
    border-bottom: 1px solid var(--v2-line);
    box-shadow: 0 1px 14px rgba(22, 24, 28, .06);
}

.v2page header#navigation .faq,
.v2page header#navigation .faq a,
.v2page header#navigation .faq h3,
.v2page header#navigation .talk,
.v2page header#navigation .talk h3 {
    color: var(--v2-ink);
}

.v2page header#navigation .faq h3 i,
.v2page header#navigation .talk h3 i {
    color: var(--v2-red);
}

/* css/style.css is written against `body { line-height: 1 }` and sets its own
   leading per element. This page's body is 1.7 for reading, and that leaks
   into the chrome - it was giving the 33px hamburger glyph a 56px line box
   inside a 50px button, so the icon sat low and clipped. Hand the chrome the
   leading the rest of the site gives it. */
.v2page header#navigation,
.v2page .navigation,
.v2page #navoverlay,
.v2page #media,
.v2page footer,
.v2page .last {
    line-height: 1;
}

.v2page .menubar {
    display: grid;
    place-items: center;
    padding: 0;
    line-height: 1;
    transition: background-color .25s var(--v2-ease), transform .25s var(--v2-ease),
                box-shadow .25s var(--v2-ease);
}

.v2page .menubar:hover {
    background-color: var(--v2-red-deep);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(224, 27, 36, .38);
}

.v2page .menubar i { font-size: 26px; line-height: 1; }

/* The masthead's three quick links get the same lift as the page's own
   buttons, so the chrome does not read as the one dead strip on the page. */
.v2page header#navigation .estimate,
.v2page header#navigation .faq,
.v2page header#navigation .talk {
    transition: transform .25s var(--v2-ease);
}

.v2page header#navigation .estimate:hover,
.v2page header#navigation .faq:hover {
    transform: translateY(-2px);
}

.v2page header#navigation .estimate a,
.v2page header#navigation .faq a {
    transition: color .25s var(--v2-ease);
}

.v2page header#navigation .estimate:hover h3,
.v2page header#navigation .faq:hover h3 {
    color: var(--v2-red);
}

.v2-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Visible only to screen readers, and to keyboard users when focused. */
.v2-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.v2-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 60;
    background: var(--v2-red);
    color: #fff;
    padding: 12px 18px;
    border-radius: 0 0 10px 0;
    font-weight: 600;
}

.v2-skip:focus {
    left: 0;
}

/* The honeypot. Off-screen rather than display:none, because some bots skip
   hidden fields but happily fill a field they can reach. */
.v2-hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
}


/* ---------- 1. shared bits ------------------------------------------------ */

.v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 26px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: 600 15px/1 var(--v2-sans);
    cursor: pointer;
    transition: transform .25s var(--v2-ease), box-shadow .25s var(--v2-ease),
                background-color .25s var(--v2-ease), color .25s var(--v2-ease);
}

/* Scoped with .v2page so these win over the page-wide `.v2page a` colour -
   without it a link styled as a solid button gets red text on red. */
.v2page .v2-solid {
    background: var(--v2-red);
    color: #fff;
    box-shadow: 0 10px 24px rgba(224, 27, 36, .26);
}

.v2page .v2-solid:hover {
    background: var(--v2-red-deep);
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(224, 27, 36, .32);
}

.v2page .v2-ghost {
    background: #fff;
    color: var(--v2-ink);
    border-color: var(--v2-line);
    box-shadow: var(--v2-shadow);
}

.v2page .v2-ghost:hover {
    border-color: var(--v2-red);
    color: var(--v2-red);
    transform: translateY(-2px);
}

.v2-ghost .fa-whatsapp { color: #25d366; font-size: 18px; }

.v2-btn-full { width: 100%; }

/* The red rule + small caps label that opens every section. */
.v2-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    font: 600 12px/1 var(--v2-sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--v2-ink);
}

.v2-eyebrow i {
    flex: none;
    width: 28px;
    height: 2px;
    background: var(--v2-red);
}

.v2-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-weight: 600;
    font-size: 14px;
    color: var(--v2-red);
}

.v2-link {
    transition: color .25s var(--v2-ease);
}

.v2-link i { transition: transform .25s var(--v2-ease); }
.v2-link:hover { color: var(--v2-red-deep); }
.v2-link:hover i { transform: translateX(5px); }

/* The eyebrow rule draws itself in when the section arrives. */
.v2-eyebrow i { transition: width .6s var(--v2-ease) .15s; }
.v2-js .v2-reveal:not(.v2-in) .v2-eyebrow i,
.v2-js .v2-stagger > :not(.v2-in) .v2-eyebrow i { width: 0; }

/* Soft red disc behind every icon. One shape, used by stats, services and
   the trust checks, which is what keeps the page feeling like one system. */
.v2-disc {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--v2-blush);
    color: var(--v2-red);
    font-size: 18px;
    transition: background-color .3s var(--v2-ease), transform .3s var(--v2-ease);
}

/* Hand-written notes over the photography. Purely decorative. */
.v2-script {
    font-family: var(--v2-script);
    font-weight: 400;
    line-height: 1.45;
    color: #2b1a14;
    margin: 0;
    transition: color .9s var(--v2-ease), text-shadow .9s var(--v2-ease);
}

/* Brown ink reads on the sunrise frames and disappears on the night aarti
   one, so the hero flips the two notes to lamplight while that slide is up.
   js/varanasi2.js sets the class from the slide's own data-dark. */
.v2-hero-dark .v2-script-roots,
.v2-hero-dark .v2-script-inspires {
    color: #ffe9c9;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .65);
}

/* Scroll reveal. Gated on .v2-js so nothing is left invisible if the script
   never runs. */
.v2-js .v2-reveal,
.v2-js .v2-stagger > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--v2-ease), transform .7s var(--v2-ease);
}

.v2-js .v2-reveal.v2-in,
.v2-js .v2-stagger > .v2-in {
    opacity: 1;
    transform: none;
}

/* Hero copy rises on load rather than on scroll - it is already in view. */
.v2-js .v2-rise {
    opacity: 0;
    transform: translateY(18px);
    animation: v2rise .8s var(--v2-ease) forwards;
}

.v2-js .v2-r1 { animation-delay: .05s; }
.v2-js .v2-r2 { animation-delay: .15s; }
.v2-js .v2-r3 { animation-delay: .25s; }
.v2-js .v2-r4 { animation-delay: .35s; }
.v2-js .v2-r5 { animation-delay: .45s; }

@keyframes v2rise {
    to { opacity: 1; transform: none; }
}


/* ---------- 2. scroll progress ------------------------------------------- */

.v2-progress {
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 50;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, #f2892b, var(--v2-red));
}


/* ---------- 3. hero ------------------------------------------------------- */

.v2-hero {
    position: relative;
    overflow: hidden;
    background: var(--v2-paper);
}

/* The photograph is a layer behind the content, feathered on the left and
   bottom so it dissolves into the paper instead of ending on a hard edge. */
/* No overlay of any kind on the photograph - the sunrise carries its own
   light, and a white wash on top only bleached it out. The left edge is a
   long mask feather instead, which fades the photo into the paper without
   tinting it, and keeps the headline off a busy ground. */
.v2-hero-art {
    position: absolute;
    /* The 32% keeps the photo off the copy; the bottom inset is only as deep
       as the fade needs - any more and it opens a band of dead paper between
       the hero and the section under it. */
    inset: 0 0 18px 32%;
    z-index: 0;
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0, #000 20%),
        linear-gradient(0deg, transparent 0, #000 16%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(90deg, transparent 0, #000 20%),
        linear-gradient(0deg, transparent 0, #000 16%);
    mask-composite: intersect;
}

/* The slides are stacked in one box and cross-faded by opacity, so there is
   no reflow between them and the mask above still feathers all three. */
.v2-hero-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Typed as img: the base `.v2-main img { height: auto }` rule would otherwise
   outrank a bare class here and leave every slide at its intrinsic height. */
img.v2-hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 52%;
    opacity: 0;
    transition: opacity 1.2s var(--v2-ease);
}

img.v2-hero-slide.v2-on { opacity: 1; }

/* The masthead is its own white band above the hero now, so the hero starts
   at its own top edge and only needs its own breathing room. */
.v2-hero-inner {
    position: relative;
    z-index: 2;
    padding-top: 54px;
}

.v2-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    padding-bottom: 56px;
}

.v2-hero-copy { max-width: 440px; }

/* The brief's headline runs to three lines, so it is set a size down from
   the page's h1 scale - at the full display size it would push the form card
   and the address off the first screen. */
.v2page .v2-hero-copy h1 {
    margin-bottom: 18px;
    font-size: clamp(38px, 4.1vw, 56px);
    letter-spacing: -.022em;
}

/* The hand-drawn stroke under "Varanasi". Sized off the word, so it stays
   put when the headline reflows. */
.v2-ul {
    position: absolute;
    left: 0;
    right: -2%;
    bottom: -.16em;
    width: 104%;
    height: .22em;
    color: var(--v2-red);
    overflow: visible;
}

.v2-lede {
    margin-bottom: 26px;
    max-width: 430px;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--v2-slate);
}

.v2-hero-sub {
    margin-bottom: 26px;
    font-size: 15.5px;
    max-width: 380px;
}

.v2-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 26px;
}

.v2-hero-addr {
    display: flex;
    gap: 12px;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.v2-addr-line {
    display: block;
    white-space: normal;
}

.v2-hero-addr i {
    flex: none;
    margin-top: 3px;
    color: var(--v2-red);
    font-size: 18px;
}

.v2-hero-addr b { color: var(--v2-ink); }

/* --- the consultation card --- */

.v2-form-card {
    justify-self: end;
    width: 100%;
    max-width: 348px;
    padding: 22px 20px;
    border-radius: var(--v2-r-lg);
    background: #fff;
    box-shadow: 0 30px 70px rgba(22, 24, 28, .16);
}

.v2page .v2-form-card h2 {
    margin-bottom: 3px;
    font-size: 21px;
}

.v2-form-note {
    margin-bottom: 15px;
    font-size: 12.5px;
    line-height: 1.5;
}

.v2-alert {
    display: flex;
    gap: 9px;
    margin-bottom: 13px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--v2-blush);
    color: var(--v2-red-deep);
    font-size: 13.5px;
    line-height: 1.5;
}

.v2-field {
    position: relative;
    margin-bottom: 9px;
}

.v2-field > i {
    position: absolute;
    left: 13px;
    top: 12px;
    z-index: 2;
    color: var(--v2-mute);
    font-size: 13px;
    pointer-events: none;
}

.v2-field-area > i { top: 11px; }

.v2-field input,
.v2-field select,
.v2-field textarea {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid var(--v2-line);
    border-radius: 9px;
    background: #fdfcfb;
    font: 400 13px/1.5 var(--v2-sans);
    color: var(--v2-ink);
    transition: border-color .2s var(--v2-ease), box-shadow .2s var(--v2-ease), background-color .2s var(--v2-ease);
}

.v2-field textarea { resize: vertical; min-height: 62px; }

.v2-field select {
    appearance: none;
    -webkit-appearance: none;
    color: var(--v2-slate);
    cursor: pointer;
}

.v2-caret {
    position: absolute;
    right: 15px;
    top: 17px;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--v2-mute);
    border-bottom: 2px solid var(--v2-mute);
    transform: rotate(45deg);
    pointer-events: none;
}

.v2-field input::placeholder,
.v2-field textarea::placeholder { color: var(--v2-mute); }

.v2-field input:focus,
.v2-field select:focus,
.v2-field textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--v2-red);
    box-shadow: var(--v2-ring);
}

.v2-field-bad input,
.v2-field-bad textarea { border-color: var(--v2-red); background: #fff7f7; }

.v2-err {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    color: var(--v2-red-deep);
}

/* The card is compact, so its button is too - the hero's own buttons keep
   the full size. */
.v2page .v2-form-card button {
    margin-top: 5px;
    padding: 12px 20px;
    font-size: 14px;
}

.v2-form-safe {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 11px 0 0;
    font-size: 11px;
    color: var(--v2-mute);
}

/* --- the hand-written margin notes --- */

.v2-script-roots {
    position: absolute;
    z-index: 3;
    left: 40%;
    top: 78px;
    font-size: 27px;
    transform: rotate(-7deg);
    pointer-events: none;
}

.v2-script-inspires {
    position: absolute;
    z-index: 3;
    right: 3%;
    bottom: 74px;
    font-size: 22px;
    text-align: right;
    transform: rotate(-5deg);
    pointer-events: none;
}

.v2-script-inspires::after {
    content: "";
    display: block;
    height: 3px;
    margin: 6px 0 0 auto;
    width: 62%;
    border-radius: 3px;
    background: var(--v2-red);
}


/* ---------- 4. stats band -------------------------------------------------
   Centred heading over five cards. Each card stands on a solid blush shelf -
   an offset shadow with no blur, which is what gives the row its stacked,
   printed look - and wears its icon on the top edge. A hairline threads
   behind them so the five read as one run rather than five boxes.

   Set in Inter throughout: the figures are numbers to read, not a headline. */

.v2-stats {
    position: relative;
    z-index: 4;
    padding: 34px 0 96px;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% 0%, #fff 0%, var(--v2-cream) 100%);
}

/* --- the two decorations --- */

/* A pale ring bleeding off the top-left corner, the only thing holding that
   side of the band. */
.v2-stats-arc {
    position: absolute;
    left: -230px;
    top: -180px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    border: 60px solid var(--v2-blush);
    opacity: .5;
    pointer-events: none;
}

.v2-stats-art {
    position: absolute;
    right: -40px;
    bottom: 0;
    z-index: 0;
    width: min(430px, 30%);
    pointer-events: none;
}

.v2page .v2-stats-art img {
    width: 100%;
    height: auto;
    opacity: .7;
}

/* Feathered on its left so the ghats run out into the paper rather than
   stopping on a straight edge. Painted as an overlay rather than a CSS mask,
   which some engines refuse to composite and drop the layer instead. */
.v2-stats-art::after {
    content: "";
    position: absolute;
    inset: 0 54% 0 0;
    background: linear-gradient(270deg, rgba(253, 249, 245, 0) 0%, var(--v2-cream) 88%);
}

.v2-script-proud {
    position: absolute;
    right: 40px;
    top: 62px;
    z-index: 1;
    width: 230px;
    font-size: 22px;
    line-height: 1.4;
    text-align: right;
    color: #e79a9a;
    pointer-events: none;
    /* Rotation swings the right end outward, so it pivots about that end and
       the band's overflow:hidden never catches it. */
    transform: rotate(-10deg);
    transform-origin: 100% 50%;
}

/* --- the heading --- */

.v2-stats-head {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto 74px;
    text-align: center;
}

.v2-stats-head .v2-eyebrow { justify-content: center; }

.v2-main .v2-stats-head h2 {
    margin-bottom: 14px;
    font-size: clamp(30px, 3.4vw, 46px);
}

.v2-stats-head p {
    margin: 0 auto;
    max-width: 620px;
    font-size: 15.5px;
}

/* --- the row --- */

.v2-stats-rail {
    position: relative;
    z-index: 1;
}

.v2-stats-thread {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 76px;
    width: 88%;
    height: 44px;
    color: var(--v2-blush-2);
    pointer-events: none;
}

.v2-stats-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.v2-stat {
    position: relative;
    padding: 46px 14px 26px;
    border-radius: 18px;
    background: var(--v2-paper);
    text-align: center;
    font-family: var(--v2-sans);
    /* The blush shelf, then a soft lift above it. */
    box-shadow: 0 12px 0 -4px var(--v2-blush-2),
                0 22px 38px rgba(224, 27, 36, .07);
    transition: transform .3s var(--v2-ease), box-shadow .3s var(--v2-ease);
}

.v2-stat:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 0 -4px var(--v2-blush-2),
                0 30px 50px rgba(224, 27, 36, .13);
}

/* Sitting on the card's top edge, half on and half off. */
.v2-stat-ico {
    position: absolute;
    left: 50%;
    top: -31px;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-left: -31px;
    border-radius: 50%;
    background: var(--v2-blush);
    color: var(--v2-red);
    font-size: 23px;
    transition: background-color .3s var(--v2-ease), color .3s var(--v2-ease);
}

.v2-stat:hover .v2-stat-ico {
    background: var(--v2-red);
    color: #fff;
}

.v2-stat strong {
    display: block;
    margin-bottom: 8px;
    font: 600 clamp(32px, 3vw, 44px)/1 var(--v2-sans);
    letter-spacing: -.03em;
    color: var(--v2-ink);
}

.v2-stat-lab {
    display: block;
    margin-bottom: 5px;
    font-family: var(--v2-sans);
    font-weight: 400;
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--v2-slate);
}

.v2-stat-tag {
    display: block;
    font: 700 12px/1.3 var(--v2-sans);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--v2-red);
}


/* ---------- 5. services ---------------------------------------------------
   Copy on the left standing on the ghats drawing, cards on the right in a
   six-column grid: three at two columns each, then two at three, so the row
   of five never ends ragged. */

.v2-services {
    position: relative;
    padding: 76px 0 84px;
    overflow: hidden;
}

.v2-split {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}

.v2-main .v2-split-copy h2 {
    margin-bottom: 18px;
    font-size: clamp(34px, 3.4vw, 46px);
    line-height: 1.08;
}

.v2-split-copy p { font-size: 15px; max-width: 380px; }
.v2-split-copy .v2-btn { margin-top: 4px; }

/* --- the drawing under the copy --- */

/* Lifted out of the flow and pinned to the section's bottom-left corner: the
   cards make the right column much the taller of the two, and the drawing is
   what fills the well that leaves under the copy. Bled off both edges so it
   reads as a watermark on the page rather than a picture in a box. */
.v2-svc-art {
    position: absolute;
    left: -46px;
    bottom: -26px;
    z-index: 0;
    width: min(560px, 41%);
    pointer-events: none;
}

/* Same feather as the stats band, over the page's paper ground. */
.v2-svc-art::after {
    content: "";
    position: absolute;
    inset: 0 0 0 52%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--v2-paper) 88%);
    pointer-events: none;
}

.v2page .v2-svc-art img {
    width: 100%;
    height: auto;
    opacity: .92;
}

.v2-script-grow {
    position: absolute;
    left: 78px;
    top: 8px;
    z-index: 1;
    font-size: 27px;
    line-height: 1.35;
    color: #e79a9a;
    transform: rotate(-8deg);
}

/* The copy column has to stand clear of the drawing, or the button lands on
   the temples. This is the only thing holding the left column open. */
.v2-split-copy { position: relative; z-index: 1; padding-bottom: 210px; }
.v2-svc-col { position: relative; z-index: 1; }

/* --- the cards --- */

.v2-svc-col { min-width: 0; }

.v2-svc-cards {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.v2-svc-cards > .v2-svc:nth-child(-n+3) { grid-column: span 2; }
.v2-svc-cards > .v2-svc:nth-child(n+4)  { grid-column: span 3; }

.v2-svc {
    position: relative;
    overflow: hidden;
    padding: 24px 22px 22px;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    background: var(--v2-paper);
    text-align: left;
    transition: transform .3s var(--v2-ease), box-shadow .3s var(--v2-ease), border-color .3s var(--v2-ease);
}

/* The first card is the one the eye should land on, so it gets the blush
   ground the others only take on hover. */
.v2-svc:first-child {
    border-color: transparent;
    background: linear-gradient(160deg, var(--v2-blush) 0%, #fff7f7 62%, var(--v2-paper) 100%);
}

.v2-svc-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

/* Icon over title in the narrow cards, beside it in the wide pair. */
.v2-svc-cards > .v2-svc:nth-child(-n+3) .v2-svc-head {
    display: block;
}

.v2-svc-cards > .v2-svc:nth-child(-n+3) .v2-disc { margin-bottom: 18px; }

.v2-svc .v2-disc { width: 54px; height: 54px; font-size: 21px; }

.v2-main .v2-svc h3 {
    margin: 0;
    font-family: var(--v2-serif);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.01em;
}

/* The running number, set quietly in the top corner. */
.v2-svc-no {
    position: absolute;
    right: 18px;
    top: 16px;
    font: 500 13px/1 var(--v2-sans);
    color: var(--v2-mute);
}

.v2-svc-rule {
    display: block;
    width: 34px;
    height: 3px;
    margin-bottom: 15px;
    border-radius: 3px;
    background: var(--v2-red);
}

.v2-svc p {
    position: relative;
    z-index: 1;
    margin: 0 0 16px;
    max-width: 25em;
    font-size: 13.5px;
    line-height: 1.62;
}

.v2-svc .v2-link { position: relative; z-index: 1; }

/* The oversized glyph in the bottom corner - a hint at what the card is
   about, sitting under the text rather than competing with it. */
.v2-svc-mark {
    position: absolute;
    right: 14px;
    bottom: 10px;
    z-index: 0;
    font-size: 64px;
    line-height: 1;
    color: var(--v2-red);
    opacity: .11;
    transition: opacity .3s var(--v2-ease), transform .3s var(--v2-ease);
}

.v2-svc:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--v2-shadow-lift);
}

.v2-svc:hover .v2-disc {
    background: var(--v2-red);
    color: #fff;
    transform: scale(1.06);
}

.v2-svc:hover .v2-svc-mark { opacity: .17; transform: scale(1.06); }

/* ---------- 6. why Varanasi trusts us ------------------------------------ */

.v2-trust {
    padding: 74px 0 80px;
    background: var(--v2-cream);
}

/* Two columns now, not three: the copy on the left and the seminar film on
   the right, which is the one piece of proof worth giving half the band. */
.v2-trust-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 46px;
    align-items: center;
}

.v2-checks {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.v2-checks li {
    display: flex;
    gap: 11px;
    margin-bottom: 13px;
    font-size: 14.5px;
    line-height: 1.5;
    transition: transform .25s var(--v2-ease), color .25s var(--v2-ease);
}

.v2-checks li:hover {
    transform: translateX(5px);
    color: var(--v2-ink);
}

.v2-checks i {
    flex: none;
    margin-top: 3px;
    color: var(--v2-red);
    font-size: 16px;
    transition: transform .25s var(--v2-ease);
}

.v2-checks li:hover i { transform: scale(1.18); }

.v2-quote {
    position: relative;
    margin: 0;
    padding: 22px 22px 20px 46px;
    border-radius: var(--v2-r);
    background: var(--v2-blush);
    transition: background-color .3s var(--v2-ease), transform .3s var(--v2-ease);
}

.v2-quote:hover {
    background: var(--v2-blush-2);
    transform: translateY(-3px);
}

.v2-quote .fa-quote-left {
    position: absolute;
    left: 20px;
    top: 22px;
    color: var(--v2-red);
    font-size: 17px;
}

.v2-quote p {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--v2-ink);
}

.v2-quote cite {
    font-style: normal;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--v2-ink);
}

/* --- the seminar video ---
   A poster, a play button and a caption. js/varanasi2.js swaps the whole
   figure for the YouTube iframe on the first press, so nothing is requested
   from youtube.com until a visitor asks for the film. */

.v2-trust-video {
    position: relative;
    margin: 0;
    /* Held at the shape the player will take, so pressing play swaps the
       poster for the film without the column jumping. The source frame is a
       tall portrait, hence the crop below - the banner and the speaker sit
       just under its middle. */
    aspect-ratio: 16 / 10;
    border-radius: var(--v2-r);
    overflow: hidden;
    cursor: pointer;
    background: #1a0d0d;
    box-shadow: var(--v2-shadow);
}

.v2-trust-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 46%;
    transition: transform .6s var(--v2-ease), opacity .3s var(--v2-ease);
}

.v2-trust-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(12, 5, 5, .82) 0%, rgba(12, 5, 5, .05) 55%);
}

.v2-trust-video:hover img { transform: scale(1.05); }

.v2-vplay {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    margin: -37px 0 0 -37px;
    padding-left: 5px;
    border: 0;
    border-radius: 50%;
    background: var(--v2-red);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 12px 34px rgba(224, 27, 36, .45);
    transition: transform .3s var(--v2-ease), background-color .3s var(--v2-ease);
}

/* A ring that breathes, so the button reads as playable rather than as a
   decorative badge. Dropped under reduced motion at the foot of the sheet. */
.v2-vplay::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .55);
    animation: v2-pulse 2.4s var(--v2-ease) infinite;
}

@keyframes v2-pulse {
    0%   { transform: scale(.9); opacity: .8; }
    70%  { transform: scale(1.22); opacity: 0; }
    100% { transform: scale(1.22); opacity: 0; }
}

.v2-trust-video:hover .v2-vplay {
    background: var(--v2-red-deep);
    transform: scale(1.08);
}

.v2-trust-video figcaption {
    position: absolute;
    z-index: 2;
    left: 20px;
    right: 20px;
    bottom: 18px;
    color: #fff;
}

.v2-vtag {
    display: inline-block;
    margin-bottom: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--v2-red);
    font: 700 10.5px/1 var(--v2-sans);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.v2-trust-video figcaption b {
    display: block;
    font: 700 19px/1.3 var(--v2-serif);
}

/* Once the player is in, the poster furniture goes and the frame fills the
   card at 16:9. */
.v2-trust-video.v2-playing { cursor: default; }
.v2-trust-video.v2-playing::after,
.v2-trust-video.v2-playing img,
.v2-trust-video.v2-playing .v2-vplay,
.v2-trust-video.v2-playing figcaption { display: none; }

.v2-trust-video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}


/* ---------- 7. businesses we have worked with ---------------------------- */

.v2-clients {
    position: relative;
    isolation: isolate;
    padding: 86px 0 92px;
    overflow: hidden;
    background: #0a060d;
    color: #cfc7d0;
}

.v2-clients-art {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.v2-clients-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Framed on the ghats and the aarti rather than the water below them. */
    object-position: 50% 42%;
}

/* Heaviest on the left, where the white copy sits over the lit ghats, and
   fading out well before the aarti so the photograph keeps its subject. */
.v2-clients-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 5, 11, .86) 0%, rgba(8, 5, 11, .64) 14%, rgba(8, 5, 11, .26) 26%, rgba(8, 5, 11, .12) 44%, rgba(8, 5, 11, .46) 100%),
        linear-gradient(0deg, rgba(8, 5, 11, .42), rgba(8, 5, 11, .1));
}

.v2-clients-grid {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 112px);
    gap: 22px;
    align-items: center;
}

/* Two lines at every desktop width - a third line breaks the band's rhythm. */
.v2page .v2-clients h2 {
    margin-bottom: 9px;
    font-size: clamp(23px, 1.95vw, 28px);
    color: #fff;
}

.v2-clients .v2-eyebrow { color: #fff; }

.v2-clients-copy p {
    margin: 0;
    max-width: 290px;
    font-size: 13.5px;
    color: #d7cfd6;
}

.v2-marquee-mask {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.v2-marquee {
    display: flex;
    gap: 12px;
    width: max-content;
    animation: v2slide 55s linear infinite;
}

.v2-marquee-mask:hover .v2-marquee { animation-play-state: paused; }

@keyframes v2slide {
    to { transform: translateX(-50%); }
}

/* White cards on the night band, logos in their own colours - the point of
   the row is that these are real, recognisable local businesses. Sized so
   that six sit in the track at once: 6 x 108 + 5 x 12 = 708 of the 728 the
   middle column gets at the 1240px wrap. */
.v2-logo {
    display: grid;
    place-items: center;
    flex: none;
    width: 108px;
    height: 132px;
    padding: 14px 12px;
    border-radius: var(--v2-r);
    background: #fff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
    transition: transform .3s var(--v2-ease);
}

.v2-logo img {
    max-height: 100%;
    width: auto;
}

.v2-logo:hover { transform: translateY(-4px); }

.v2-script-together {
    font-size: 21px;
    line-height: 1.35;
    color: #fff;
    transform: rotate(-6deg);
}

.v2-script-together::after {
    content: "";
    display: block;
    width: 70%;
    height: 3px;
    margin-top: 7px;
    border-radius: 3px;
    background: var(--v2-red);
}


/* ---------- 8. in media ---------------------------------------------------
   A light band, not the dark one this section used to be: the newspaper
   clippings are cream paper and they only read as clippings on a pale ground.

   The mosaic is a fixed two-row grid - one tall tile, one wide one, two small
   - and js/varanasi2.js fills it four items at a time. Panels sit side by side
   in a snapping track, so the arrows page through them and the filters simply
   change which items get dealt out. */

.v2-media {
    padding: 74px 0 80px;
    background: var(--v2-paper);
}

.v2-media-grid {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 54px;
    align-items: start;
}

.v2-media-copy h2 { margin-bottom: 18px; }
.v2-media-copy p { font-size: 15px; max-width: 400px; }

/* --- the three figures under the copy --- */

.v2-media-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 30px 0 28px;
}

.v2-media-stats > div {
    position: relative;
    padding-right: 14px;
}

.v2-media-stats .v2-sq {
    transition: background-color .3s var(--v2-ease), color .3s var(--v2-ease),
                transform .3s var(--v2-ease);
}

.v2-media-stats > div:hover .v2-sq {
    background: var(--v2-red);
    color: #fff;
    transform: translateY(-3px);
}

.v2-media-stats > div + div {
    padding-left: 22px;
}

.v2-media-stats > div + div::before {
    content: "";
    position: absolute;
    left: 0;
    top: 42%;
    bottom: 2px;
    width: 1px;
    background: var(--v2-line);
}

.v2-media-stats strong {
    display: block;
    margin: 14px 0 4px;
    font: 400 clamp(24px, 2.2vw, 30px)/1 var(--v2-sans);
    letter-spacing: -.02em;
    color: var(--v2-ink);
}

/* The blush square is the page's one repeated icon shape outside the round
   discs - it is what makes this band read as part of the same system. */
.v2-sq {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--v2-blush);
    color: var(--v2-red);
    font-size: 19px;
    flex: none;
}

/* --- filters and paging --- */

.v2-media-main { min-width: 0; }

.v2-mbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.v2-mfilters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 5px;
    border-radius: 999px;
    background: var(--v2-cream);
    border: 1px solid var(--v2-line);
}

.v2-mfilter {
    padding: 9px 18px;
    border: 0;
    border-radius: 999px;
    background: none;
    font: 600 13.5px/1 var(--v2-sans);
    color: var(--v2-slate);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .25s var(--v2-ease), color .25s var(--v2-ease);
}

.v2-mfilter:hover { color: var(--v2-ink); }

.v2-mfilter.v2-on {
    background: var(--v2-red);
    color: #fff;
    box-shadow: 0 6px 16px rgba(224, 27, 36, .28);
}

.v2-mnav { display: flex; gap: 8px; flex: none; }

.v2-rail-nav {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--v2-line);
    border-radius: 50%;
    background: var(--v2-cream);
    color: var(--v2-ink);
    font-size: 18px;
    cursor: pointer;
    transition: background-color .25s var(--v2-ease), color .25s var(--v2-ease),
                border-color .25s var(--v2-ease), opacity .25s var(--v2-ease);
}

.v2-rail-nav:hover {
    background: var(--v2-red);
    border-color: var(--v2-red);
    color: #fff;
}

.v2-rail-nav[disabled] {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

/* --- the mosaic --- */

.v2-mtrack {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.v2-mtrack::-webkit-scrollbar { display: none; }

.v2-mpanel {
    flex: none;
    width: 100%;
    display: grid;
    grid-template-columns: 1.32fr 1fr 1fr;
    grid-template-rows: 1.34fr 1fr;
    gap: 14px;
    height: 500px;
    scroll-snap-align: start;
}

/* Until the script has dealt the items out, the track is a plain flat row -
   the section still reads with JavaScript off. */
.v2-mtrack > .v2-mi { flex: none; width: 260px; height: 240px; }

.v2-m-lg    { grid-area: 1 / 1 / 3 / 2; }
.v2-m-wide  { grid-area: 1 / 2 / 2 / 4; }
.v2-m-sm    { grid-row: 2; }
.v2-m-wide2 { grid-area: 2 / 2 / 3 / 4; }
.v2-m-tall  { grid-area: 1 / 2 / 3 / 4; }
.v2-m-solo  { grid-area: 1 / 1 / 3 / 4; }

.v2-mi {
    position: relative;
    margin: 0;
    min-width: 0;
    border-radius: var(--v2-r);
    overflow: hidden;
    cursor: pointer;
    background: #24100f;
}

.v2-mi img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
    transition: transform .55s var(--v2-ease);
}

.v2-mi:hover img { transform: scale(1.06); }

/* A newspaper page is text: crop it and the headline is gone, so clippings
   are fitted whole onto their own paper ground instead. */
.v2-mi-paper { background: #f6f1ea; }

/* Cropped from the top, not fitted whole. Most of these are screenshots of
   full articles - shown entire they shrink to an unreadable grey rectangle,
   whereas the top of the page is the masthead and the headline, which is the
   part that says what the coverage is. */
.v2-mi-paper img {
    object-fit: cover;
    object-position: 50% 0;
}

.v2-mi-paper:hover img { transform: scale(1.03); }

.v2-mi::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(14, 6, 6, .88) 0%, rgba(14, 6, 6, .12) 46%, rgba(14, 6, 6, 0) 70%);
}

/* A clipping is already ink on cream. Washing it in the dark scrim only
   makes the headline harder to read, so paper tiles get a short white fade
   at the foot instead, and a light chip to sit on it. */
.v2-mi-paper::after {
    background: linear-gradient(0deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .82) 42%, rgba(255, 255, 255, 0) 100%);
    top: auto;
    height: 66px;
}

/* When a clipping is the panel's anchor it carries a title too, so the fade
   under it has to be deep enough to hold one. */
.v2-mi-paper.v2-m-lg::after,
.v2-mi-paper.v2-m-tall::after,
.v2-mi-paper.v2-m-solo::after { height: 150px; }

/* The extra class is there to outrank .v2-mi figcaption, which is written
   further down the sheet at the same specificity. */
.v2-mi.v2-mi-paper figcaption { color: var(--v2-ink); }

.v2-mi-paper .v2-mtag {
    margin-bottom: 0;
    background: rgba(22, 24, 28, .07);
    color: var(--v2-ink);
}

.v2-mi figcaption {
    position: absolute;
    z-index: 2;
    left: 14px;
    right: 52px;
    bottom: 13px;
    color: #fff;
}

.v2-mtag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    padding: 5px 11px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font: 700 10px/1 var(--v2-sans);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.v2-mi figcaption b {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font: 700 16px/1.32 var(--v2-serif);
}

.v2-mi figcaption .v2-mmeta {
    display: block;
    margin-top: 4px;
    font: 400 11.5px/1.4 var(--v2-sans);
    font-style: normal;
    color: rgba(255, 255, 255, .72);
}

/* The tall tile is the panel's anchor, so it is the one that carries a
   title; on the smaller tiles the chip alone says what the picture is, and
   a headline there would only fight the picture. The title stays in the
   markup either way - the viewer reads its caption from it. */
.v2-mi figcaption b { display: none; }
.v2-mi figcaption .v2-mmeta { display: none; }

.v2-m-lg figcaption,
.v2-m-tall figcaption,
.v2-m-solo figcaption { left: 20px; right: 20px; bottom: 18px; }

.v2-m-lg figcaption b,
.v2-m-tall figcaption b,
.v2-m-solo figcaption b {
    display: -webkit-box;
    font-size: 22px;
    -webkit-line-clamp: 3;
}

.v2-m-lg figcaption .v2-mmeta,
.v2-m-tall figcaption .v2-mmeta,
.v2-m-solo figcaption .v2-mmeta { display: block; }

.v2-m-lg .v2-mtag,
.v2-m-tall .v2-mtag,
.v2-m-solo .v2-mtag { background: var(--v2-red); }

/* A solo paper tile is a full-width clipping, so it keeps the light chip. */
.v2-mi-paper.v2-m-lg .v2-mtag,
.v2-mi-paper.v2-m-tall .v2-mtag,
.v2-mi-paper.v2-m-solo .v2-mtag {
    background: var(--v2-red);
    color: #fff;
}

.v2-mplay {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    margin: -33px 0 0 -33px;
    padding-left: 4px;
    border-radius: 50%;
    background: #fff;
    color: var(--v2-red);
    font-size: 21px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    transition: transform .3s var(--v2-ease), background-color .3s var(--v2-ease);
}

.v2-mi:hover .v2-mplay {
    background: var(--v2-red);
    color: #fff;
    transform: scale(1.1);
}

/* The corner arrow, which is what tells a still tile it can be opened. */
.v2-mgo {
    position: absolute;
    z-index: 2;
    right: 14px;
    bottom: 14px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--v2-red);
    color: #fff;
    font-size: 12px;
    transition: transform .3s var(--v2-ease);
}

.v2-mi:hover .v2-mgo { transform: translateX(3px); }

.v2-mtag { transition: background-color .3s var(--v2-ease), color .3s var(--v2-ease); }
.v2-mi:hover .v2-mtag { background: var(--v2-red); color: #fff; }

/* The anchor shapes carry a title that runs the full width of the tile, and
   a play badge already stands in for the arrow on a video. */
.v2-m-lg .v2-mgo,
.v2-m-tall .v2-mgo,
.v2-m-solo .v2-mgo,
.v2-mi[data-video] .v2-mgo { display: none; }

.v2-mempty {
    margin: 0;
    padding: 60px 0;
    text-align: center;
    color: var(--v2-mute);
}

/* --- the footer bar --- */

.v2-mfoot {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 20px;
    padding: 18px 20px;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    background: var(--v2-cream);
}

.v2-mfoot > div { flex: 1 1 auto; min-width: 0; }

.v2-mfoot b {
    display: block;
    margin-bottom: 3px;
    font: 700 16px/1.3 var(--v2-serif);
    color: var(--v2-ink);
}

.v2-mfoot > div span {
    display: block;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--v2-mute);
}

.v2-mfoot .v2-btn { flex: none; padding: 13px 22px; }

.v2-mfoot {
    transition: border-color .3s var(--v2-ease), box-shadow .3s var(--v2-ease),
                transform .3s var(--v2-ease);
}

.v2-mfoot:hover {
    transform: translateY(-3px);
    border-color: var(--v2-blush-2);
    box-shadow: var(--v2-shadow);
}

.v2-mfoot .v2-sq {
    transition: background-color .3s var(--v2-ease), color .3s var(--v2-ease);
}

.v2-mfoot:hover .v2-sq { background: var(--v2-red); color: #fff; }


/* ---------- 9. faq -------------------------------------------------------- */

.v2-faq {
    position: relative;
    padding: 76px 0 84px;
    overflow: hidden;
    background: var(--v2-cream);
}

.v2-faq-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr) minmax(0, 210px);
    gap: 34px;
    align-items: start;
}

.v2-faq-copy h2 { color: var(--v2-ink) !important; }
.v2-faq-copy .v2-eyebrow { color: var(--v2-ink) !important; }
.v2-faq-copy p { font-size: 14.5px; color: var(--v2-slate) !important; }

.v2-faq-list { display: grid; gap: 10px; }

.v2-qa {
    border: 1px solid var(--v2-line);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    transition: box-shadow .3s var(--v2-ease), border-color .3s var(--v2-ease);
}

.v2-qa.v2-open { box-shadow: var(--v2-shadow); border-color: var(--v2-blush-2); }

.v2-qa:hover { border-color: var(--v2-blush-2); box-shadow: var(--v2-shadow); }

.v2-q { transition: color .25s var(--v2-ease); }
.v2-qa:hover .v2-q { color: var(--v2-red); }
.v2-qa:hover .v2-q > i { color: var(--v2-red); }

.v2-q {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 15px 18px;
    border: 0;
    background: none;
    text-align: left;
    font: 600 14.5px/1.45 var(--v2-sans);
    color: var(--v2-ink);
    cursor: pointer;
}

.v2-q > i {
    flex: none;
    color: var(--v2-mute);
    font-size: 16px;
    transition: transform .3s var(--v2-ease), color .3s var(--v2-ease);
}

.v2-q > span { flex: 1; }

/* The plus turns into a minus: the upright bar collapses, the flat one stays. */
.v2-q > b {
    position: relative;
    flex: none;
    width: 14px;
    height: 14px;
}

.v2-q > b::before,
.v2-q > b::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    background: var(--v2-ink);
    transition: transform .3s var(--v2-ease), background-color .3s var(--v2-ease);
}

.v2-q > b::after { transform: rotate(90deg); }

.v2-qa.v2-open .v2-q > i { color: var(--v2-red); transform: rotate(90deg); }
.v2-qa.v2-open .v2-q > b::before,
.v2-qa.v2-open .v2-q > b::after { background: var(--v2-red); }
.v2-qa.v2-open .v2-q > b::after { transform: rotate(0deg); }

/* Height is animated from the script, which measures the panel. */
.v2-a {
    height: 0;
    overflow: hidden;
    transition: height .35s var(--v2-ease);
}

.v2-a p {
    margin: 0;
    padding: 0 18px 17px 42px;
    font-size: 14px;
    line-height: 1.66;
}

.v2-script-bright {
    position: relative;
    font-size: 23px;
    line-height: 1.4;
    transform: rotate(-4deg);
}

.v2-script-bright .fa-quote-left {
    display: block;
    margin-bottom: 6px;
    color: var(--v2-red);
    font-size: 22px;
}

.v2-script-bright::after {
    content: "";
    display: block;
    width: 58%;
    height: 3px;
    margin-top: 8px;
    border-radius: 3px;
    background: var(--v2-red);
}


/* ---------- 10. closing cta ---------------------------------------------- */

.v2-close { padding: 70px 0 40px; }

.v2-close-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    padding: 38px 40px;
    border-radius: var(--v2-r-lg);
    background:
        radial-gradient(110% 130% at 100% 0%, #3a1113 0%, transparent 60%),
        var(--v2-night);
    color: #cfc7c4;
}

.v2page .v2-close-band h2 { color: #fff; font-size: clamp(26px, 2.6vw, 34px); }

.v2-close-band p { margin: 0; max-width: 520px; font-size: 14.5px; }

.v2-close-btns { display: flex; flex-wrap: wrap; gap: 12px; }

.v2page .v2-close-btns .v2-ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .28);
    box-shadow: none;
}

.v2page .v2-close-btns .v2-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: #fff; }

/* ---------- 11. mobile action bar ---------------------------------------- */

.v2-bar {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 45;
    gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--v2-line);
}

.v2-bar .v2-btn { flex: 1; padding: 13px 12px; font-size: 14px; }


/* ---------- 12. lightbox -------------------------------------------------- */

.v2-lightbox {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 40px 60px;
    background: rgba(12, 6, 6, .93);
    opacity: 0;
    transition: opacity .3s var(--v2-ease);
}

.v2-lightbox.v2-lb-on { opacity: 1; }

.v2-lb-stage {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    text-align: center;
}

.v2-lb-img {
    max-width: 100%;
    max-height: 78vh;
    margin: 0 auto;
    border-radius: 10px;
}

.v2-lb-video {
    position: relative;
    width: min(960px, 88vw);
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}

.v2-lb-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.v2-lb-cap {
    margin-top: 14px;
    font-size: 14px;
    color: #ddd5d2;
}

.v2-lb-close,
.v2-lb-nav {
    position: absolute;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    transition: background-color .25s var(--v2-ease);
}

.v2-lb-close:hover,
.v2-lb-nav:hover { background: var(--v2-red); border-color: var(--v2-red); }

.v2-lb-close { top: 22px; right: 22px; }
.v2-lb-prev { left: 18px; top: 50%; margin-top: -22px; }
.v2-lb-next { right: 18px; top: 50%; margin-top: -22px; }


/* ---------- 13. responsive ------------------------------------------------
   Four steps down from the desktop layout:

     1180  laptops - the decorative script notes go first, then the columns
           tighten. Nothing changes shape yet.
     1000  tablets - every two-column band stacks and the hero photograph
           stops being a side layer and becomes a banner behind the copy.
      720  phones - the card grids collapse, the mosaic becomes one stack,
           and the fixed call/WhatsApp bar appears.
      460  small phones - single column everywhere, and type steps down one
           more notch.

   Anything with a fixed pixel width above is re-stated here rather than left
   to overflow: on a phone the page must never scroll sideways. */

@media (max-width: 1180px) {
    .v2-hero-art { inset: 0 0 18px 38%; }
    .v2-script-roots { display: none; }
    .v2-faq-grid { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
    .v2-script-bright { display: none; }
    .v2-clients-grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
    .v2-script-together { display: none; }

    .v2-stats-row { gap: 16px; }
    .v2-stat { padding: 42px 10px 22px; }
    .v2-stat-ico { width: 56px; height: 56px; margin-left: -28px; top: -28px; font-size: 21px; }
    .v2-stats-art { width: min(360px, 28%); }
    .v2-script-proud { right: 26px; top: 50px; font-size: 19px; width: 200px; }

    .v2-split { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px; }
    .v2-svc { padding: 20px 18px; }
    .v2-svc .v2-disc { width: 48px; height: 48px; font-size: 19px; }
    .v2-main .v2-svc h3 { font-size: 18px; }

    .v2-media-grid { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 34px; }
    .v2-mpanel { height: 430px; }
}

@media (max-width: 1000px) {
    .v2-main h1 { font-size: clamp(40px, 6.4vw, 56px); }
    .v2page .v2-hero-copy h1 { font-size: clamp(36px, 5.6vw, 48px); }
    .v2-lede { max-width: 560px; }

    /* The photograph stops being a background layer and becomes a banner
       behind the copy, so the text keeps a readable ground. */
    .v2-hero-art {
        inset: 0;
        opacity: .45;
        -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 22%);
        mask-image: linear-gradient(0deg, transparent 0, #000 22%);
    }

    /* The address is the palest line in the hero and it sits on the banner
       here, so it is set in black rather than the page's grey. No wash over
       the photograph - the picture stays as it is. */
    .v2-hero-addr,
    .v2-hero-addr span,
    .v2-hero-addr b {
        color: #000;
    }
    img.v2-hero-slide { object-position: 62% 45%; }
    .v2-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .v2-hero-copy { max-width: none; }
    .v2-hero-sub { max-width: 520px; }
    .v2-form-card { justify-self: start; max-width: 460px; }

    .v2-script-inspires { display: none; }

    .v2-stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 52px; }
    .v2-stats-thread { display: none; }
    .v2-stats-head { margin-bottom: 62px; }
    .v2-script-proud { display: none; }

    .v2-split, .v2-media-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .v2-split-copy p { max-width: 620px; }

    /* Stacked, the drawing would sit between the copy and the cards with a
       column of white either side of it - it only works bled off an edge. */
    .v2-svc-art { display: none; }
    .v2-split-copy { padding-bottom: 0; }

    .v2-media-copy p { max-width: none; }
    .v2-clients-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .v2-clients-copy p { max-width: none; }
    .v2-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .v2-trust-grid { gap: 32px; }
}

/* Once the copy has stacked above them the cards get the full width, and
   three across is still too narrow for a display serif over two lines. Two
   per row from here, with the odd one out taking the whole row. */
@media (max-width: 900px) {
    .v2-svc-cards > .v2-svc:nth-child(-n+3),
    .v2-svc-cards > .v2-svc:nth-child(n+4) { grid-column: span 3; }
    .v2-svc-cards > .v2-svc:last-child { grid-column: span 6; }
    .v2-svc-cards > .v2-svc:nth-child(-n+3) .v2-svc-head { display: flex; }
    .v2-svc-cards > .v2-svc:nth-child(-n+3) .v2-disc { margin-bottom: 0; }
}

@media (max-width: 720px) {
    .v2page { font-size: 15.5px; }

    .v2-main h1 em,
    .v2-main h2 em {
        display: block;
    }

    .v2-js .v2-reveal,
    .v2-js .v2-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .v2-wrap { padding: 0 18px; }
    .v2-hero-inner { padding-top: 34px; }
    .v2-hero { padding-bottom: 16px; }
    .v2-form-card { padding: 20px 16px; max-width: none; }
    .v2-cta-row { gap: 10px; }

    .v2-stats { padding: 54px 0 64px; }
    .v2-stats-head { margin-bottom: 54px; }
    .v2-stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; row-gap: 46px; }
    .v2-stat { padding: 38px 8px 20px; }
    .v2-stat-ico { width: 52px; height: 52px; margin-left: -26px; top: -26px; font-size: 19px; }
    .v2-stat strong { font-size: 32px; }
    .v2-stat-lab { font-size: 13.5px; }
    .v2-stat-tag { font-size: 11px; }
    .v2-stats-art { width: 300px; right: -70px; opacity: .5; }
    .v2-stats-arc { width: 340px; height: 340px; border-width: 44px; left: -170px; top: -130px; }

    .v2-services, .v2-trust, .v2-faq { padding: 54px 0 58px; }
    .v2-clients { padding: 52px 0 56px; }
    .v2-media { padding: 48px 0 54px; }

    .v2-svc-cards { gap: 12px; }
    .v2-svc-head { gap: 12px; margin-bottom: 12px; }
    .v2-svc-mark { font-size: 48px; }
    .v2-svc-no { right: 14px; top: 13px; font-size: 12px; }

    .v2-trust-grid { grid-template-columns: minmax(0, 1fr); }
    .v2-trust-video { aspect-ratio: 16 / 9; }
    .v2-vplay { width: 60px; height: 60px; margin: -30px 0 0 -30px; font-size: 20px; }

    .v2-logo { width: 96px; height: 118px; padding: 12px 10px; }

    /* The mosaic gives up its grid and becomes one swipeable row: three
       columns at this width leaves every caption unreadable, and stacking
       seventeen tiles vertically would bury the rest of the page. The panels
       stop meaning anything here - they just flow into the row - so the
       arrows go and the thumb does the paging. */
    .v2-mbar { flex-direction: column; align-items: stretch; }

    /* The pill container's own rounded edge clips the first and last chip
       once the row has to scroll, so on phones the chips stand on their own
       and the strip behind them goes. */
    .v2-mfilters {
        gap: 8px;
        padding: 0 0 2px;
        border: 0;
        border-radius: 0;
        background: none;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .v2-mfilters::-webkit-scrollbar { display: none; }
    .v2-mfilter { border: 1px solid var(--v2-line); background: var(--v2-cream); }
    .v2-mfilter.v2-on { border-color: var(--v2-red); }

    /* Both strips run to the screen edge rather than stopping inside the
       wrap - a chip half-eaten by the container edge reads as broken, the
       same chip running off the screen reads as "scroll me". */
    .v2-mfilters,
    .v2-mtrack {
        margin-left: -18px;
        margin-right: -18px;
        padding-left: 18px;
        padding-right: 18px;
        scroll-padding-left: 18px;
    }
    .v2-mnav { display: none; }
    .v2-mtrack { gap: 12px; }
    .v2-mpanel { display: flex; gap: 12px; width: auto; height: auto; }
    .v2-mpanel > .v2-mi {
        flex: none;
        width: min(76vw, 330px);
        height: 240px;
        scroll-snap-align: start;
    }
    .v2-m-lg figcaption b { font-size: 19px; }
    .v2-mfoot { flex-wrap: wrap; }
    .v2-mfoot .v2-btn { width: 100%; }
    .v2-media-stats { margin: 24px 0 22px; }

    /* The deep foot here used to be the only thing keeping the fixed call
       bar off the content. The footer sits below now, so the clearance moves
       down there and this closes up. */
    .v2-close { padding: 50px 0 38px; }
    .v2-close-band { padding: 28px 22px; }
    .v2page .last { padding-bottom: 78px; }
    .v2-close-btns .v2-btn { flex: 1; }

    .v2-bar { display: flex; }

    .v2-lightbox { padding: 60px 14px; }
    .v2-lb-prev { left: 8px; }
    .v2-lb-next { right: 8px; }
}

@media (max-width: 460px) {
    .v2-main h1 { font-size: clamp(34px, 9.6vw, 44px); }
    .v2-main h2 { font-size: clamp(25px, 7.4vw, 32px); }
    .v2-main .v2-split-copy h2 { font-size: clamp(27px, 8vw, 34px); }
    .v2page .v2-hero-copy h1 { font-size: clamp(31px, 8.6vw, 40px); }

    .v2-cta-row { display: grid; grid-template-columns: minmax(0, 1fr); }
    .v2-cta-row .v2-btn { width: 100%; }

    /* Two across still fits the figure and a two-line label at 320px, and it
       keeps the band from turning into a column of five screens. */
    .v2-stat { padding: 34px 6px 18px; }
    .v2-stat strong { font-size: 28px; }
    .v2-stat-lab { font-size: 12.5px; }
    .v2-stat-tag { font-size: 10.5px; letter-spacing: .05em; }
    .v2-stat-ico { width: 46px; height: 46px; margin-left: -23px; top: -23px; font-size: 17px; }

    .v2-svc-cards > .v2-svc { grid-column: span 6 !important; }

    /* Three figures across a 360px screen leaves four characters a line. */
    .v2-media-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
    .v2-media-stats > div,
    .v2-media-stats > div + div { padding: 0 4px; }
    .v2-media-stats > div + div::before { display: none; }
    .v2-media-stats .v2-sq { width: 38px; height: 38px; font-size: 16px; }
    .v2-media-stats strong { font-size: 22px; margin: 10px 0 2px; }
    .v2-media-stats .v2-stat-lab { font-size: 11px; }

    .v2-mfilter { padding: 8px 13px; font-size: 12.5px; }
    .v2-mpanel > .v2-mi { width: min(82vw, 320px); height: 215px; }

    .v2-close-btns { display: grid; grid-template-columns: minmax(0, 1fr); }
}


/* ---------- 14. reduced motion -------------------------------------------- */

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

    .v2-js .v2-reveal,
    .v2-js .v2-stagger > *,
    .v2-js .v2-rise {
        opacity: 1;
        transform: none;
    }
}