/* ==========================================================================
   GigNGo landing page composition.

   The portable brand system lives in brand.css — tokens, corner radii, the
   display face, the wavy-edge treatment, buttons, flow curves. See BRANDING.md.
   THIS file is only the landing page's own arrangement of those parts, mapped
   onto index.html's existing class names.

   Loaded LAST, after brand.css and after index.html's inline <style>.

   Friendly, bold, nothing sharp. The hero is one big soft slab floating on
   paper. Sections don't butt up against each other — they flow into one
   another on a long curve. Corners are generous and never quite identical,
   the palette and the display face are the logo's own, headings are heavy,
   and a few hand-drawn marks show a person was here.
   ========================================================================== */

/* Aliases onto the brand tokens in brand.css, which must be linked first.
   The legacy re-points at the bottom are landing-page only and deliberately
   NOT in brand.css — putting them there would shift the colours of any page
   that merely links it. */
:root {
    --ink: var(--gng-ink);
    --brand: var(--gng-brand);
    --ink-2: var(--gng-ink-2);
    --brand-deep: var(--gng-brand-deep);
    --brand-bright: var(--gng-brand-bright);
    --paper: var(--gng-paper);
    --paper-2: var(--gng-paper-2);
    --brand-wash: var(--gng-wash);

    --r-slab: var(--gng-r-slab);
    --r-card: var(--gng-r-card);
    --r-card-alt: var(--gng-r-card-alt);
    --r-soft: var(--gng-r-soft);
    --r-blob: var(--gng-r-blob);

    --sh: var(--gng-shadow);
    --sh-hover: var(--gng-shadow-hover);

    /* Re-point this page's legacy tokens at the brand palette. */
    --bg-light: #F1F5F0;
    --bg-warm: #FFFFFF;
    --border-light: #E2E8E1;
    --secondary-color: #46963B;
    --secondary-light: #5BA649;
}

body { background: var(--paper); }

/* --- Paper tones ------------------------------------------------------- */

.trust-section,
.trending-section,
.app-section,
.worker-showcase-section { background: var(--paper); }

/* The curves are the only transition — drop the leftover hairlines. */
.worker-showcase-section { border-bottom: none; border-top: none; }

.services-section,
.explore-section,
.wedge-section,
.how-it-works { background: var(--paper-2); }

/* ==========================================================================
   The hero: one big soft slab floating on paper, not a full-bleed band.
   ========================================================================== */

.hero {
    margin: 14px;
    height: calc(100vh - 28px);
    max-height: calc(100vh - 28px);
    min-height: 580px;
    border-radius: var(--r-slab);
    overflow: hidden;
    isolation: isolate;
}

/* Chrome leaves paint artifacts when it scrolls a rounded-clipped container
   full of autoplaying <video>. Rounding the video layer itself and promoting
   it to its own compositing layer stops the smearing. */
.hero-video-background {
    border-radius: inherit;
    overflow: hidden;
    transform: translateZ(0);
}

.hero::after { content: none; }

.hero-content { max-width: 1010px; }

/* --- Type: heavy and friendly ------------------------------------------
   Display face is Rubik, the same family the nav and buttons already use.
   It's the closest of the candidates to the logo — geometric, wide, and with
   the same softly rounded corners rather than sharp ones. Body copy stays
   DM Sans, so the page runs on two families instead of three.
   ------------------------------------------------------------------------ */

.hero-title,
.section-title,
.cta-title,
.app-copy h2,
.trending-column h3,
.trust-title,
.step-title,
.explore-hero-title,
.worker-video-title,
.app-stat-val,
.service-card-title,
.step-number,
.ribbon-band {
    font-family: var(--gng-display);
    letter-spacing: -.022em;
}

/* Rubik carries a true 900, so the weight comes from the cut itself. It also
   sets wider than the old face, hence the slightly smaller size here. */
.hero-title {
    font-size: 5.1rem;
    /* Not tighter than this: the drawn underline hangs below the emphasised
       word, and on a headline that wraps it would cut through the line under
       it. */
    line-height: 1.14;
    font-weight: 900;
    letter-spacing: -.03em;
    margin-bottom: 42px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .26);
}

.hero-title strong { padding-bottom: 9px; background-size: 60px 10px; }

.hero-tagline { font-weight: 600; letter-spacing: 2.4px; font-size: 1.05rem; }

.section-title { font-size: 2.7rem; line-height: 1.08; font-weight: 800; }
.section-subtitle { font-size: 1.1rem; color: var(--ink-2); }
.cta-title { font-size: 3rem; font-weight: 900; }
.app-copy h2 { font-size: 2.4rem; font-weight: 800; }
.trending-column h3 { font-size: 1.6rem; font-weight: 700; }
.trust-title { font-size: 1.2rem !important; font-weight: 700; }
.step-title { font-size: 1.22rem; font-weight: 700; }
.app-stat-val { font-size: 2.5rem; font-weight: 800; }
.worker-video-title, .service-card-title { font-weight: 700; }

/* --- Hand-drawn marks -------------------------------------------------- */

.section-header { position: relative; padding-bottom: 28px; }

.section-header::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 132px;
    height: 14px;
    margin-left: -66px;
    opacity: .45;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='14' viewBox='0 0 132 14'%3E%3Cpath d='M3 10 C 24 3, 40 12, 62 7 S 100 3, 129 8' fill='none' stroke='%2346963B' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
}

/* Highlighted words get a swiped scribble rather than only colour. */
.hero-title strong,
.section-title strong {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12' viewBox='0 0 60 12'%3E%3Cpath d='M0 7 q 7.5 -5 15 0 t 15 0 t 15 0 t 15 0' fill='none' stroke='%2346963B' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 100%;
    background-size: 60px 12px;
    padding-bottom: 12px;
}

.section-title strong { color: var(--brand) !important; }

/* One green mark per heading. Where the title already carries a scribble under
   an emphasised word, the drawn rule below the subtitle is a second wavy green
   line saying the same thing — suppress it. Browsers without :has() simply
   keep both, which is the old behaviour, so this degrades safely. */
.section-header:has(.section-title strong)::after { content: none; }

.hero-title strong {
    color: inherit !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12' viewBox='0 0 60 12'%3E%3Cpath d='M0 7 q 7.5 -5 15 0 t 15 0 t 15 0 t 15 0' fill='none' stroke='%23FFFFFF' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* The three "excitement" strokes that used to sit here were removed: anchored
   to .hero-content they floated in empty space to the left of a centred
   headline, and because each A/B variant is a different length there is no
   offset that keeps them beside the words at every width. The page still
   carries hand-drawn marks that ARE tied to something — the swipe under the
   emphasised word, the drawn section rules, the flow curves. */

/* ==========================================================================
   Sections flow into each other on a long curve instead of butting up.
   The curve is filled with the colour of the section ABOVE it.
   ========================================================================== */

.services-section,
.trust-section,
.wedge-section,
.trending-section,
.how-it-works,
.app-section,
.cta-banner {
    position: relative;
    border-top: none !important;
    border-bottom: none !important;
    padding-top: 132px !important;
}

.services-section::before,
.trust-section::before,
.wedge-section::before,
.trending-section::before,
.how-it-works::before,
.app-section::before,
.cta-banner::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    /* 1px of overlap — at top:0 a subpixel seam of the section underneath
       shows through as a hairline where the tones differ most (the dark
       CTA band). */
    top: -1px;
    height: 93px;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* Coming down out of a paper-coloured section:
   category-nav -> services, trust -> wedge, trending -> how-it-works,
   app -> cta. */
.services-section::before,
.wedge-section::before,
.how-it-works::before,
.cta-banner::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='92' viewBox='0 0 1440 92' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,40 C1210,86 1030,14 790,42 C566,68 356,18 0,58 Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

/* Coming down out of a warmer section:
   services -> trust, explore -> trending, how-it-works -> app. */
.trust-section::before,
.trending-section::before,
.app-section::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='92' viewBox='0 0 1440 92' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,44 C1180,10 1010,80 770,50 C548,22 348,74 0,38 Z' fill='%23F1F5F0'/%3E%3C/svg%3E");
}

/* Content sits above the curve. */
.container,
.container-wide { position: relative; z-index: 1; }

/* The explore section sits on the same tone as the one above it, so it just
   continues — no curve, no extra top padding. */
.explore-section { padding-top: 40px; }

/* ==========================================================================
   The ribbon: a flowing band of the promises, on a slight lean. Slate band,
   white words, green stars — the logo's own arrangement.
   ========================================================================== */

/* The wrapper is the clipper. Without it the over-wide band below widens
   the whole document and shoves every section sideways on phones.

   The vertical padding is what stops the rotated band's ends being sliced by
   the straight clip rect — see the note on .gng-ribbon-wrap in brand.css. The
   margins absorb it (48 + the 30/16 of intended overlap) so nothing moves.

   z-index must beat the section BELOW it. The band leans, so its lower end
   hangs ~36px into the next section, and .worker-showcase-section is
   position:relative z-index:10 with a white background — at z-index 5 that
   section painted straight over the ribbon's lower end and it read as cut
   off. Anything that this band is meant to overlap has to sit under 20. */
.ribbon-wrap {
    position: relative;
    z-index: 20;
    margin: -78px 0 -64px;
    padding: 48px 0;
    overflow: hidden;
}

/* Wider than the viewport so the lean still covers edge to edge. Do NOT
   scale it — that stretches the letterforms. */
.ribbon-band {
    width: 110%;
    margin-left: -5%;
    padding: 30px 0;
    background: var(--ink);
    color: #fff;
    transform: rotate(-1.2deg);
    overflow: hidden;
    font-weight: 800;
    font-size: 1.3rem;
    line-height: 1.45;
    letter-spacing: -.01em;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
}

/* Seamless loop, the two things that matter:
   1. the track is an even number of IDENTICAL sequences, so translating by
      -50% lands exactly on the start of the second half;
   2. one half must be at least as wide as the band, or the tail of the cycle
      shows empty band. One half was 1404px against a 1901px band, which left
      a 497px hole. Three sequences per half (4212px) covers a band up to
      ~3800px, i.e. past a 3400px viewport.
   Spacing lives on .ribbon-seq (including a trailing gap) so every sequence is
   self-contained and the seam spaces exactly like the rest. */
.ribbon-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: ribbonSlide 100s linear infinite;
}

.ribbon-seq {
    display: flex;
    align-items: center;
    gap: 26px;
    padding-right: 26px;
    flex: 0 0 auto;
}

.ribbon-track span { flex: 0 0 auto; }
.ribbon-star { color: var(--brand); font-size: 1.1rem; }

@keyframes ribbonSlide {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .ribbon-track { animation: none; }
}

/* ==========================================================================
   Round everything. No outlines, no hard shadows — shape does the work.
   ========================================================================== */

.trust-item,
.step-card,
.worker-video-card,
.explore-service-card,
.service-card,
.faq-item,
.app-visual,
.explore-hero-content,
.explore-hero-image,
.wedge-table {
    border-radius: var(--r-card) !important;
    box-shadow: var(--sh) !important;
    border: none !important;
    transition: transform .28s cubic-bezier(.2, .8, .3, 1), box-shadow .28s ease !important;
}

.app-visual,
.explore-hero-content { border-radius: var(--r-slab) !important; }

.explore-hero-image { border-radius: var(--r-card-alt) !important; }

/* --- Every shape its own shape ------------------------------------------
   Same family, but no card is a copy of the one beside it. Cycles of 6 and 4
   are chosen so the repeat never lines up with a 2, 3 or 4 column grid — a
   4-long cycle in a 4-up row would put the identical shape in the same
   column on every row, which is exactly the pattern being avoided.
   ------------------------------------------------------------------------ */
.trust-grid > *:nth-child(6n+1),
.steps-grid > *:nth-child(6n+1),
.worker-videos-grid > *:nth-child(6n+1),
.explore-services-grid > *:nth-child(6n+1),
.service-cards-grid > *:nth-child(6n+1),
.faq-list > *:nth-child(6n+1) { border-radius: var(--gng-r-card-1) !important; }

.trust-grid > *:nth-child(6n+2),
.steps-grid > *:nth-child(6n+2),
.worker-videos-grid > *:nth-child(6n+2),
.explore-services-grid > *:nth-child(6n+2),
.service-cards-grid > *:nth-child(6n+2),
.faq-list > *:nth-child(6n+2) { border-radius: var(--gng-r-card-2) !important; }

.trust-grid > *:nth-child(6n+3),
.steps-grid > *:nth-child(6n+3),
.worker-videos-grid > *:nth-child(6n+3),
.explore-services-grid > *:nth-child(6n+3),
.service-cards-grid > *:nth-child(6n+3),
.faq-list > *:nth-child(6n+3) { border-radius: var(--gng-r-card-3) !important; }

.trust-grid > *:nth-child(6n+4),
.steps-grid > *:nth-child(6n+4),
.worker-videos-grid > *:nth-child(6n+4),
.explore-services-grid > *:nth-child(6n+4),
.service-cards-grid > *:nth-child(6n+4),
.faq-list > *:nth-child(6n+4) { border-radius: var(--gng-r-card-4) !important; }

.trust-grid > *:nth-child(6n+5),
.steps-grid > *:nth-child(6n+5),
.worker-videos-grid > *:nth-child(6n+5),
.explore-services-grid > *:nth-child(6n+5),
.service-cards-grid > *:nth-child(6n+5),
.faq-list > *:nth-child(6n+5) { border-radius: var(--gng-r-card-5) !important; }

.trust-grid > *:nth-child(6n),
.steps-grid > *:nth-child(6n),
.worker-videos-grid > *:nth-child(6n),
.explore-services-grid > *:nth-child(6n),
.service-cards-grid > *:nth-child(6n),
.faq-list > *:nth-child(6n) { border-radius: var(--gng-r-card-6) !important; }

.trending-list > *:nth-child(4n+1),
.category-tabs > *:nth-child(4n+1) { border-radius: var(--gng-r-soft-1) !important; }

.trending-list > *:nth-child(4n+2),
.category-tabs > *:nth-child(4n+2) { border-radius: var(--gng-r-soft-2) !important; }

.trending-list > *:nth-child(4n+3),
.category-tabs > *:nth-child(4n+3) { border-radius: var(--gng-r-soft-3) !important; }

.trending-list > *:nth-child(4n),
.category-tabs > *:nth-child(4n) { border-radius: var(--gng-r-soft-4) !important; }

.trust-grid > *:nth-child(4n+1) .trust-icon,
.steps-grid > *:nth-child(4n+1) .step-number { border-radius: var(--gng-r-blob-1) !important; }

.trust-grid > *:nth-child(4n+2) .trust-icon,
.steps-grid > *:nth-child(4n+2) .step-number { border-radius: var(--gng-r-blob-2) !important; }

.trust-grid > *:nth-child(4n+3) .trust-icon,
.steps-grid > *:nth-child(4n+3) .step-number { border-radius: var(--gng-r-blob-3) !important; }

.trust-grid > *:nth-child(4n) .trust-icon,
.steps-grid > *:nth-child(4n) .step-number { border-radius: var(--gng-r-blob-4) !important; }


/* --- Pills are pills, but not machined ----------------------------------
   Same idea as the cards: nothing on the page is a perfect, repeated shape.
   These read as pills at a glance; the ends just aren't quite matched.
   ------------------------------------------------------------------------ */
.btn-primary,
.demand-proof,

.search-btn,
.worker-cta-primary,
.service-indicator,

.cta-button,
.worker-cta-secondary,
.trending-count { border-radius: var(--gng-r-pill-3) !important; }

.cta-button-alt,
.hiw-more a,
.video-category-badge,

/* Repeated pills cycle so neighbours never match. */
.wedge-links > *:nth-child(4n+1),
.app-badges > *:nth-child(4n+1),
.explore-tabs > *:nth-child(4n+1) { border-radius: var(--gng-r-pill-1) !important; }
.wedge-links > *:nth-child(4n+2),
.app-badges > *:nth-child(4n+2),
.explore-tabs > *:nth-child(4n+2) { border-radius: var(--gng-r-pill-2) !important; }
.wedge-links > *:nth-child(4n+3),
.app-badges > *:nth-child(4n+3),
.explore-tabs > *:nth-child(4n+3) { border-radius: var(--gng-r-pill-3) !important; }
.wedge-links > *:nth-child(4n),
.app-badges > *:nth-child(4n),
.explore-tabs > *:nth-child(4n) { border-radius: var(--gng-r-pill-4) !important; }

.search-box { border-radius: var(--gng-r-pill-1); }


/* The trending rows have no .trending-item-content wrapper, so the inline
   space-between was flinging the label to the far right. */
.trending-item { justify-content: flex-start; gap: 12px; }

/* --- The half-degree of human error ------------------------------------ */

.trust-item:nth-child(3n+1),
.step-card:nth-child(3n+1),
.worker-video-card:nth-child(3n+1),
.explore-service-card:nth-child(3n+1) { transform: rotate(-.5deg); }

.trust-item:nth-child(3n+2),
.step-card:nth-child(3n+2),
.worker-video-card:nth-child(3n+2),
.explore-service-card:nth-child(3n+2) { transform: rotate(.38deg); }

.trust-item:nth-child(3n),
.step-card:nth-child(3n),
.worker-video-card:nth-child(3n),
.explore-service-card:nth-child(3n) { transform: rotate(-.24deg); }

.trust-item:hover,
.step-card:hover,
.worker-video-card:hover,
.explore-service-card:hover,
.service-card:hover {
    transform: rotate(0deg) translateY(-6px) !important;
    box-shadow: var(--sh-hover) !important;
}

/* --- Cards ------------------------------------------------------------- */

.trust-item { padding: 34px 30px !important; }
.step-card { padding: 36px 28px !important; }


/* ==========================================================================
   Slightly wavy edges.

   The card's fill is moved onto a ::before layer and that layer alone gets
   the displacement filter, so the silhouette drifts a couple of pixels off
   true while every word on top stays pin sharp. The shadow rides inside the
   filter chain as a drop-shadow so it follows the wavy shape rather than
   sitting under a rectangle.

   These cards all carry a tilt, which makes them a stacking context, so the
   z-index:-1 layer lands behind the text and in front of the section.
   ========================================================================== */

.trust-item,
.step-card,
.faq-item,
.app-visual,
.explore-hero-content,
.trending-item {
    background: transparent !important;
    box-shadow: none !important;
    position: relative;
    isolation: isolate;
}

.trust-item::before,
.step-card::before,
.faq-item::before,
.app-visual::before,
.explore-hero-content::before,
.trending-item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Cards on a WHITE section take the tinted tone so they read as objects
       rather than dissolving into the page; cards on a tinted section stay
       white (see .step-card / .explore-service-card below). */
    background: var(--gng-surface-on-paper);
    border-radius: inherit;
    filter: url(#edgeWobble) drop-shadow(0 8px 16px rgba(46, 58, 65, .10));
}

.trending-item::before { filter: url(#edgeWobbleSoft) drop-shadow(0 6px 12px rgba(46, 58, 65, .09)); }

.app-visual::before,
.explore-hero-content::before {
    background: linear-gradient(135deg, var(--brand-bright), var(--brand));
}

/* Hover lifts the shadow, not the card's crispness. */
.trust-item:hover::before,
.step-card:hover::before {
    filter: url(#edgeWobble) drop-shadow(0 16px 26px rgba(46, 58, 65, .16));
}

/* how-it-works and explore are tinted sections, so their cards stay white. */
.step-card::before { background: var(--gng-paper); }
.worker-video-card,
.explore-service-card { background: var(--gng-paper); }

.trending-item:hover::before { background: var(--brand); }
.faq-question:hover { background: transparent; }
.faq-item:hover::before { background: #E3EDE0; }

/* ==========================================================================
   Keep the photo's corners round while hovering.

   The play button carried `backdrop-filter: blur(4px)`, and an element with a
   backdrop-filter escapes its ancestor's rounded clip in Chrome — so the
   card's overflow+radius stopped rounding the photo and the top corners went
   square for as long as the card was hovered. Verified in an isolated repro
   that `will-change` does NOT fix it, and nor does swapping the elliptical
   radius for circular corners.

   Dropping the blur is the fix that keeps the card's own radius doing the
   clipping — which in turn lets every card carry a DIFFERENT radius (see the
   shape cycle below). Restating the radius on the thumbnail also worked, but
   it welds the thumbnail to one fixed corner set.
   ========================================================================== */

.video-play-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Photo cards keep a clean edge — displacing a photo's own frame reads as a
   printing fault rather than a drawn line. They get the rounder corners only. */
.faq-question { background: transparent; font-weight: 600; padding: 22px 26px; }
.faq-question:hover { background: var(--brand-wash); }
.faq-icon { font-weight: 700; color: var(--brand); font-size: 1.4rem; }

/* Icon chips: green blobs with the icon knocked out in white, the way the
   logo knocks its check out of the green. */
.trust-item .trust-icon,
.explore-hero-icon,
.step-number {
    background: var(--brand) !important;
    color: #fff !important;
    border-radius: var(--r-blob) !important;
    box-shadow: none !important;
}

.trust-item .trust-icon {
    width: 58px !important;
    height: 58px !important;
    font-size: 1.4rem !important;
}

.step-number { width: 58px; height: 58px; font-size: 1.45rem; font-weight: 800; }
.step-icon { color: var(--brand); }

/* --- Buttons ----------------------------------------------------------- */

.search-btn,
.cta-button,
.worker-cta-primary,
.btn-primary,
body .site-hdr-post { font-weight: 700; }

.search-btn { padding: 17px 34px; font-size: 1.05rem; }
.cta-button { padding: 19px 44px; font-size: 1.15rem; }

.hiw-more a,
.wedge-link { background: #fff; font-weight: 600; border: none !important; box-shadow: var(--sh); }
.hiw-more a { padding: 16px 32px; font-size: 1.05rem; }
.hiw-more a:hover,
.wedge-link:hover { background: var(--brand-wash); color: var(--brand-deep); }

/* --- Tabs -------------------------------------------------------------- */

/* The strip now sits inside .services-section, between that section's heading
   and the grid it filters — so it reads as the control for those cards rather
   than as leftover navigation from the section above. On a tinted section the
   tabs stay white, per the surface-contrast rule. */
.category-tabs { margin-bottom: 34px; }

.category-tab { background: var(--paper); transition: background .2s ease, transform .2s ease; position: relative; overflow: hidden; }
.category-tab:hover { background: var(--brand-wash); }
.category-tab.active { background: var(--brand); border-bottom: none; }
.category-tab.active .category-tab-label,
.category-tab.active .category-tab-icon { color: #fff; }
.category-tab-icon { background: transparent !important; border-radius: var(--r-blob); }
.category-tab-label { font-weight: 600; }

.explore-tab { background: transparent; font-weight: 600; position: relative; overflow: hidden; }
.explore-tab:hover { background: var(--brand-wash); }
.explore-tab.active { background: var(--brand); color: #fff; box-shadow: none; }

/* --- Explore panel transition -------------------------------------------
   A full off-page / on-page slide: the old panel leaves, the new one arrives
   from the opposite edge. Slow enough to read as movement rather than a
   flicker — out accelerates away (ease-in), in decelerates into place, which
   is what makes it feel eased rather than mechanical.

   The viewport is what it slides out of. The padding/negative-margin pair
   widens the clip box without moving the layout, so the cards' soft shadows
   aren't sliced off at the edges.
   ------------------------------------------------------------------------ */

/* Generous vertical padding so the cards' soft shadows aren't sliced, but only
   a little horizontally — the horizontal clip is the point, and a wide inset
   would push the page past the viewport on narrow screens. */
.panel-viewport {
    overflow: hidden;
    padding: 34px 14px;
    margin: -34px -14px;
}

.panel-swap { animation: none; }

.panel-swap.slide-out-left  { animation: exploreOutLeft  .46s cubic-bezier(.55, 0, .85, .35) both; }
.panel-swap.slide-out-right { animation: exploreOutRight .46s cubic-bezier(.55, 0, .85, .35) both; }
.panel-swap.slide-in-right  { animation: exploreInRight  .68s cubic-bezier(.16, .84, .32, 1) both; }
.panel-swap.slide-in-left   { animation: exploreInLeft   .68s cubic-bezier(.16, .84, .32, 1) both; }

@keyframes exploreOutLeft {
    from { transform: none;                opacity: 1; }
    to   { transform: translateX(-105%);   opacity: 0; }
}

@keyframes exploreOutRight {
    from { transform: none;                opacity: 1; }
    to   { transform: translateX(105%);    opacity: 0; }
}

@keyframes exploreInRight {
    from { transform: translateX(105%);    opacity: 0; }
    to   { transform: none;                opacity: 1; }
}

@keyframes exploreInLeft {
    from { transform: translateX(-105%);   opacity: 0; }
    to   { transform: none;                opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .panel-swap.slide-out-left,
    .panel-swap.slide-out-right,
    .panel-swap.slide-in-left,
    .panel-swap.slide-in-right { animation: none; }
}

/* Countdown to the next tab: the active pill fills left-to-right as the timer
   runs, so the rotation is announced instead of just happening.

   A 3px bar along the bottom was the obvious version and it doesn't work here
   — the pill's radius curves the bottom edge away, so the bar is clipped to a
   sliver for most of its travel. Filling the whole pill suits the shape and
   stays legible: white at 18% over the green only lightens it. */
.explore-tab.is-counting::after,
.category-tab.is-counting::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .18);
    transform-origin: left center;
    animation: exploreCountdown 7s linear forwards;
    pointer-events: none;
}

@keyframes exploreCountdown {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Once the visitor picks a tab the rotation is off for good — make sure no
   stale bar is left behind. */
.explore-tabs.rotation-off .explore-tab::after,
.category-tabs.rotation-off .category-tab::after { content: none; }

@media (prefers-reduced-motion: reduce) {
    .explore-tab.is-counting::after,
.category-tab.is-counting::after { animation: none; content: none; }
}

/* --- Badges and chips -------------------------------------------------- */

.video-category-badge { background: var(--brand-wash); color: var(--brand-deep); font-weight: 700; }
.trending-count { background: var(--brand-wash); color: var(--brand-deep); }
.trending-item { box-shadow: var(--sh); font-weight: 600; }
.trending-item:hover { background: var(--brand); color: #fff; transform: translateX(5px); }
.trending-item:hover .trending-icon { color: var(--ink); }

/* --- Comparison table -------------------------------------------------- */

.wedge-table { overflow: hidden; background: #fff; }

.wedge-table th,
.wedge-table td {
    border-bottom: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='8' viewBox='0 0 240 8'%3E%3Cpath d='M0 4 C 30 1, 50 7, 80 4 S 130 1, 160 4 S 210 7, 240 4' fill='none' stroke='%2322302E' stroke-width='1.8' stroke-linecap='round' opacity='.2'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: 240px 8px;
    padding: 20px 22px;
}

.wedge-table tbody tr:last-child th,
.wedge-table tbody tr:last-child td { background-image: none; }

.wedge-table thead th {
    font-family: var(--gng-display);
    font-weight: 700;
    font-size: .9rem;
    color: var(--ink);
    background-color: var(--paper-2);
}

.wedge-col-us { background-color: var(--brand-wash); }
.wedge-table thead .wedge-col-us { background-color: var(--brand); color: #fff; }
.wedge-yes { color: var(--brand); font-weight: 800; }

/* --- Hero furniture ---------------------------------------------------- */

.search-box {
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .24);
    padding: 8px;
    transform: rotate(-.4deg);
    transition: transform .28s ease, background .28s ease;
}

.search-box:focus-within { transform: rotate(0deg); background: #fff; }
/* The ribbon leans up to the right, so it reaches highest into the hero at
   the right end — which is exactly where this pill used to sit, and the band
   covered its lower half. The left end is the low end of the lean, so the
   pill clears it there. */
.service-indicator {
    right: auto;
    left: 30px;
    bottom: 38px;
}

.hero-note { font-weight: 600; }
.demand-proof { font-weight: 600; }

/* --- Header ------------------------------------------------------------ */

/* The outer bar is transparent and pointer-events:none, but its blur was
   smearing the paper margin down over the top of the hero slab. The frosted
   look lives on the pill (.site-hdr-inner), which keeps its own blur. */
body .site-hdr { backdrop-filter: none; -webkit-backdrop-filter: none; }

body .site-hdr-inner { background: rgba(255, 255, 255, .95); }
body .site-hdr.site-scrolled .site-hdr-inner { background: rgba(255, 255, 255, .98); }
body .site-hdr-menu,
body .site-hdr-dropdown { background: var(--paper); }
body .site-hdr-post { font-weight: 700; }

/* --- App band ---------------------------------------------------------- */

.app-visual { background: linear-gradient(135deg, var(--brand-bright), var(--brand)); padding: 48px 40px; }
.app-points li::before { color: var(--brand); }

/* --- Reduced motion ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .trust-item, .step-card, .worker-video-card, .explore-service-card,
    .service-card, .category-tab, .search-box, .trending-item { transition: none !important; }
}

/* --- Small screens ----------------------------------------------------- */

/* Step the headline down before it can crowd the slab edges. */
@media (max-width: 1180px) {
    .hero-title { font-size: 4.3rem; }
}

@media (max-width: 900px) {
    .hero-title { font-size: 3.6rem; }
}

@media (max-width: 768px) {
    .hero {
        margin: 8px;
        height: calc(100vh - 96px);
        max-height: calc(100vh - 96px);
        min-height: 520px;
        border-radius: 34px;
    }

    .hero-title { font-size: 3rem; margin-bottom: 28px; letter-spacing: -.028em; }
    .section-title { font-size: 2rem; }
    .cta-title { font-size: 2.1rem; }
    .app-copy h2 { font-size: 1.85rem; }

    .ribbon-wrap { margin: -46px 0 -36px; padding: 24px 0; }
    .ribbon-band { font-size: 1.02rem; padding: 15px 0; }

    .services-section, .trust-section, .wedge-section, .trending-section,
    .how-it-works, .app-section, .cta-banner { padding-top: 96px !important; }

    .services-section::before, .trust-section::before, .wedge-section::before,
    .trending-section::before, .how-it-works::before, .app-section::before,
    .cta-banner::before { height: 56px; }

    .trust-item, .step-card, .worker-video-card, .explore-service-card,
    .faq-item, .service-card { transform: none !important; }

    .search-box { transform: none; }
}

/* ==========================================================================
   The last straight edges.

   An audit of every rounded element on the page turned up five that had been
   missed and were still perfectly uniform: the nav links and dropdown
   buttons, the two mobile-menu CTAs, and the video duration chips. The header
   styles are injected by JS after this file, so these need `body` in front to
   out-specify them rather than !important.
   ========================================================================== */



.worker-videos-grid > *:nth-child(4n+1) .video-duration-badge { border-radius: var(--gng-r-chip-1); }
.worker-videos-grid > *:nth-child(4n+2) .video-duration-badge { border-radius: var(--gng-r-chip-2); }
.worker-videos-grid > *:nth-child(4n+3) .video-duration-badge { border-radius: var(--gng-r-chip-3); }
.worker-videos-grid > *:nth-child(4n)   .video-duration-badge { border-radius: var(--gng-r-chip-4); }

/* ==========================================================================
   The ribbon's own edges.

   The band's top and bottom were the last dead-straight lines on the page.
   Same treatment as the cards: the fill moves to a ::before and only that
   layer is displaced, so the words stay pin sharp while the band's edges
   drift a couple of pixels off true.

   The band can drop its overflow:hidden because the WRAP already clips
   horizontally, and the band is 110% of the wrap — so within the visible area
   the fill is always wider than the track running over it.
   ========================================================================== */

.ribbon-band {
    background: transparent;
    overflow: visible;
}

.ribbon-band::before {
    content: '';
    position: absolute;
    inset: -5px 0;
    z-index: -1;
    background: var(--ink);
    filter: url(#edgeWobble);
}