/* Section: survey tabs. */

/* Padding sits on the section, not on __content, so the legacy
   template-parts/home/survey.php markup (no __content wrapper) spaces the same. */
.home-survey {
    position: relative;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 10rem 0 8rem;
    isolation: isolate;
}

/* Scroll transition: the .quote-transition cat wipe played as a curtain over
   the section's first viewport, so it lifts straight onto the survey header. */
.home-survey__transition {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 6;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: var(--color-light-purple);
    pointer-events: none;
    will-change: opacity;
}

.home-survey__transition-heading {
    position: relative;
    z-index: 4;
    width: min(100%, 369px);
    margin: 0 0 108px;
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: clamp(3rem, 6.2vw, var(--text-display));
    font-style: italic;
    font-weight: var(--fw-bold);
    line-height: 1.1;
    text-align: center;
    will-change: opacity, transform;
}

.home-survey__pattern {
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 522px;
    height: 522px;
    transform: translate(-50%, -50%);
    opacity: 0.35;
    pointer-events: none;
    object-fit: contain;
}

.home-survey__cat {
    position: absolute;
    left: 50%;
    bottom: -35px;
    z-index: 2;
    width: 469px;
    height: 469px;
    translate: -50% 0;
    transform-origin: 50% 100%;
    background: var(--survey-transition-image) center / 100% 100% no-repeat;
    pointer-events: none;
    will-change: transform;
}

.home-survey__fill {
    position: absolute;
    inset: -2px;
    z-index: 3;
    background: var(--color-primary);
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}

/* Brand-pattern reveal: the same curtain idea as the cat wipe, but the shape
   is the brand pattern and it carries an image instead of a silhouette. It
   grows out of the light backdrop until the photo it carries is the whole
   screen, then lifts straight onto the survey's first screen — which is that
   same photo, at the same crop — so the hand-over has nothing to cross-fade. */
.home-survey__reveal {
    --survey-reveal-size: min(52vmin, 540px);
    /* Opening frame: the shape parks at the top of the screen big enough to
       carry its lead line, dropped clear of the floating header so the ears
       read whole. main.js reads both off the curtain, so the pose the scrub
       starts from and the type sized against it stay in step. */
    --survey-reveal-start-scale: 0.64;
    --survey-reveal-start-inset: 104px;

    position: absolute;
    left: 0;
    top: 0;
    z-index: 6;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    overflow: hidden;
    background: var(--color-light-purple);
    pointer-events: none;
    will-change: opacity;
}

/* Grain sits above the flood so the purple picks it up too. Static
   background-image, so it rasterises once instead of per scroll frame. */
.home-survey__reveal::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 140px 140px;
    opacity: 0.05;
    mix-blend-mode: multiply;
    /* Own layer: the blend sits over a shape that scales every frame, so
       without this it re-rasterises the grain along with it. */
    transform: translateZ(0);
    pointer-events: none;
}

/* Brand grid patch behind the shape — the section's backdrop art, held still
   while the shape falls past it. The flood covers it rather than fading it. */
.home-survey__reveal-grid {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    display: block;
    width: min(46vmin, 420px);
    height: auto;
    translate: -50% -50%;
    pointer-events: none;
}

/* The brand pattern masks the image rather than framing it. The SVG carries
   its own fractal-noise displacement, which the browser bakes in when it
   rasterises the file as a mask — so the edge stays ragged with no live
   filter on the scroll path.

   The shape is a flat brand-purple silhouette underneath — the same colour the
   flood lands on, so the two meet with no seam to cross even on the frames
   where the photo inside has not reached the edges yet. */
.home-survey__reveal-shape {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    /* Uneven top: the ears notch the middle of the shape's top edge, so the
       copy has to start below the V rather than at the box's own centre.
       Calc'd off the shape's own size — percentage padding would resolve
       against the curtain's full width instead and blow the box out. */
    padding:
        calc(var(--survey-reveal-size) * 0.22)
        calc(var(--survey-reveal-size) * 0.16)
        calc(var(--survey-reveal-size) * 0.1);
    width: var(--survey-reveal-size);
    height: var(--survey-reveal-size);
    background: var(--survey-reveal-fill, var(--color-primary));
    -webkit-mask: url("../../images/brand-pattern.svg") center / 100% 100% no-repeat;
    mask: url("../../images/brand-pattern.svg") center / 100% 100% no-repeat;
    transform-origin: 50% 50%;
    will-change: transform;
}

/* The photo the shape opens onto. Sized to the screen and centred on the
   shape's own centre, so once main.js has cancelled the shape's drop and growth
   out of it, it lands exactly where a full-bleed background would — the mask
   travels over a still photo instead of carrying a shrunken copy of one. */
.home-survey__reveal-photo {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    height: 100lvh;
    margin: 0;
    background: var(--survey-reveal-image, none) center / cover no-repeat;
    transform-origin: 50% 50%;
    translate: -50% -50%;
    pointer-events: none;
    will-change: transform;
}

/* Sized off the shape's own layout box, so it holds its proportion inside the
   pattern at every breakpoint — the start scale then renders both together. */
.home-survey__reveal-heading {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: calc(var(--survey-reveal-size) * 0.15);
    font-style: italic;
    font-weight: var(--fw-bold);
    line-height: 1.06;
    text-align: center;
}

/* No scroll scrub to hide behind, so the curtain never paints. */
@media (prefers-reduced-motion: reduce) {
    .home-survey__reveal {
        display: none;
    }
}

/* ── Content: three full screens, one per finding ──────────────
   The panels are read on the survey's own photography: screen 1 is the
   headline finding, screen 2 is what pet parents asked for, screen 3 is the
   quote the whole thing came back to. Every measurement
   below is read off the 1512x982 design frame and expressed against the
   viewport it lands on — horizontal distances against the 1352 container the
   rest of the theme uses, vertical ones against vh, so a shorter laptop screen
   loses height proportionally instead of clipping the cards off the bottom.

   Everything is scoped to .section-survey-tabs: home.css carries the previous
   design's .home-survey rules for the legacy front page, and both stylesheets
   load together here. */

.home-survey.section-survey-tabs {
    padding: 0;
}

/* Type steps, height-aware. The presets in global.css scale on vw alone, so a
   wide-but-short screen keeps the design frame's type over two thirds of its
   height — which is what pushed the screens past the fold. Below they are the
   plain presets; on the track (see the min-width: 1025px block) each one is
   capped at its share of the 982 design height, so it is exact at 982 and gives
   height up in proportion on anything shorter. */
.section-survey-tabs {
    --survey-h2: var(--text-h2);
    --survey-title3: var(--text-title3);
    --survey-title5: var(--text-title5);
    --survey-copy: var(--text-copy);
    --survey-lead: clamp(1.125rem, 0.72rem + 1.72vw, 2rem);
    --survey-quote-mark: clamp(3rem, 7.94vw, 7.5rem);
    --survey-figure: 245px;
    --survey-icon: 56px;
    --survey-gap: 1.5rem;

    /* The two fixed things a screen's content has to clear: the floating header
       over the top of it, and the legend hung off the bottom — offset plus its
       own 88px. Neither scales with the viewport, so on a short screen they are
       the floors the vertical reserves stop shrinking at. */
    --survey-header-clear: 6.5rem;
    --survey-legend-reserve: calc(clamp(1.5rem, 4.3vh, 2.625rem) + 5.5rem);
}

.section-survey-tabs .home-survey__content {
    position: relative;
    z-index: 1;
}

.section-survey-tabs .home-survey__screen {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    isolation: isolate;
}

/* ── One screen at a time ──────────────────────────────────────
   One viewport-wide track instead of a stack. Where the scrub runs, main.js
   walks the row sideways off the section's pin, one screen per beat — see
   .is-scrubbed below. Where it does not, this stays a plain horizontal
   scroller: snapped, so a screen always lands flush, and gestured, since
   screen-scroll.js and Lenis both leave sideways input to whatever is under
   the pointer.

   Desktop only: the stacked fallback under 1024 lets each screen size to its
   own content, and content taller than the viewport has no business on a
   track that shows one screen at a time. */
@media (min-width: 1025px) {
    /* One screen shows at a time, so a screen is exactly one viewport: min-height
       let the tallest of the three set the track's height and the rest of the
       inner ran under the fold. Everything inside is capped against the same 982
       frame, so it gives height up rather than being cut off. */
    .section-survey-tabs {
        --survey-h2: min(var(--text-h2), 5.7vh);
        --survey-title3: min(var(--text-title3), 4.07vh);
        --survey-title5: min(var(--text-title5), 2.44vh);
        --survey-copy: min(var(--text-copy), 1.83vh);
        --survey-lead: min(clamp(1.125rem, 0.72rem + 1.72vw, 2rem), 3.26vh);
        --survey-quote-mark: min(clamp(3rem, 7.94vw, 7.5rem), 12.2vh);
        --survey-figure: min(245px, 24.9vh);
        --survey-icon: min(56px, 5.7vh);
        --survey-gap: min(1.5rem, 2.44vh);
    }

    .section-survey-tabs .home-survey__screen {
        height: 100vh;
        height: 100svh;
        min-height: 0;
        max-height: 100svh;
    }

    .section-survey-tabs .home-survey__content {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .section-survey-tabs .home-survey__content::-webkit-scrollbar {
        display: none;
    }

    /* Picking a category hands the reader back to screen 1. On this track that
       is a jump in scrollLeft, which reads as a lurch sideways past screen 2 —
       so main.js makes the jump while the track is faded out, the same
       fade-out/fade-in the scrubbed track gets instead of travelling back. */
    .section-survey-tabs .home-survey__content {
        transition: opacity 0.32s ease;
    }

    .section-survey-tabs .home-survey__content.is-swapping {
        opacity: 0;
        transition-duration: 0.28s;
    }

    .section-survey-tabs .home-survey__screen {
        flex: 0 0 100%;
        width: 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    /* Claimed by the scrub: the page scroll walks the row sideways, so the row
       stays exactly as it is laid out above and the port stops scrolling
       itself — a scroll position of its own would only fight the travel driven
       from outside. Where the row is standing is a transform on the screens,
       written by main.js, and the port clips whichever ones are off it. */
    .section-survey-tabs .home-survey__content.is-scrubbed {
        overflow: hidden;
        scroll-snap-type: none;
    }

    .section-survey-tabs .home-survey__content.is-scrubbed .home-survey__screen {
        scroll-snap-align: none;
        will-change: transform;
    }
}

.section-survey-tabs .home-survey__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Screens 1 and 2 carry one photo layer per category, stacked behind the panels
   rather than inside them, so they cross-fade on the same beat as the copy. */
.section-survey-tabs .home-survey__photo[data-panel] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.section-survey-tabs .home-survey__photo[data-panel].is-active {
    opacity: 1;
}

/* The wash the photographs are read through. */
.section-survey-tabs .home-survey__screen--intro::after,
.section-survey-tabs .home-survey__screen--quote::after,
.section-survey-tabs .home-survey__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(17, 17, 25, 0.2);
    pointer-events: none;
}

/* Bounded by the screen rather than sizing it: max-height resolves against the
   screen's own height, which is the viewport on the track and auto in the
   stacked fallback below 1025 — where the page scrolls and there is nothing to
   fit inside. min-height: 0 is what lets the flex chain under it give way. */
.section-survey-tabs .home-survey__inner {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
}

/* ── Shared type ──────────────────────────────────────────────── */

.section-survey-tabs .home-survey__title {
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: var(--survey-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-h2);
    letter-spacing: 0;
    text-align: left;
}

.section-survey-tabs .home-survey__title em {
    font-style: italic;
}

/* 32/44 SemiBold sits between --text-title2 and --text-title3, so it is the one
   step in the design with no preset behind it. */
.section-survey-tabs .home-survey__lead,
.section-survey-tabs .home-survey__needs-lead {
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--survey-lead);
    font-weight: var(--fw-semibold);
    line-height: 1.375;
    letter-spacing: -0.5px;
}

/* ── Panels ───────────────────────────────────────────────────── */

.section-survey-tabs .home-survey__panels {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.section-survey-tabs .home-survey__panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* inherit rather than visible: a `visible` here opts the panel straight back
   out of any visibility its screen is hidden with, and the picked panel of a
   screen nobody is looking at then goes on taking the pointer. Inheriting keeps
   the panel showing while its own screen is up and hidden with it when it is
   not; where nothing above it is hidden it resolves to visible exactly as
   before. */
.section-survey-tabs .home-survey__panel.is-active {
    position: relative;
    height: 100%;
    min-height: 0;
    opacity: 1;
    visibility: inherit;
}

/* The previous design's tilted paper shadow, which home.css still carries. */
.section-survey-tabs .home-survey__panel.is-active::before {
    content: none;
}

/* ── Legend: "you're viewing survey's result for" ─────────────── */

/* Drawn as a caption, wired as the switcher: the two categories are the tabs
   that swap both screens' panels. */
.section-survey-tabs .home-survey__legend {
    position: absolute;
    z-index: 3;
    right: max(var(--container-pad), calc((100% - var(--container-max)) / 2));
    bottom: clamp(1.5rem, 4.3vh, 2.625rem);
    display: flex;
    flex-direction: column;
    gap: 0.6875rem;
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--lh-body);
}

.section-survey-tabs .home-survey__legend--light {
    color: var(--color-white);
}

.section-survey-tabs .home-survey__legend--dark {
    color: var(--color-dark-purple);
}

.section-survey-tabs .home-survey__legend-intro {
    margin: 0;
    font-weight: var(--fw-regular);
}

.section-survey-tabs .home-survey__legend-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* One 54px rail with a 26px marker riding it: top half for the first category,
   bottom half for the second. */
.section-survey-tabs .home-survey__legend-bar {
    position: relative;
    flex: 0 0 5px;
    width: 5px;
    height: 54px;
    border-radius: 1px;
    background: var(--color-light-purple);
}

.section-survey-tabs .home-survey__legend-bar::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 26px;
    border-radius: 1px;
    background: var(--color-accent-01);
    transition: top 0.25s ease;
}

.section-survey-tabs .home-survey__legend-bar.is-secondary::after {
    top: 28px;
}

.section-survey-tabs .home-survey__legend-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    /* The longer label measures within a pixel or two of the 203px box it is
       drawn in, so it is sized to its content rather than left to wrap. */
    width: max-content;
    max-width: 100%;
}

.section-survey-tabs .home-survey__legend-item {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-body);
    text-align: left;
    text-transform: uppercase;
    transition: color 0.25s ease;
}

/* Over a photograph the unpicked category greys back rather than reading as a
   second live option. */
.section-survey-tabs .home-survey__legend--dark .home-survey__legend-item {
    color: var(--color-gray);
}

.section-survey-tabs .home-survey__legend-item.is-active {
    color: var(--color-accent-01);
}

.section-survey-tabs .home-survey__legend-item:focus-visible {
    outline: 2px solid var(--color-accent-01);
    outline-offset: 4px;
}

/* ── Screen 1: the headline finding ───────────────────────────── */

.section-survey-tabs .home-survey__inner--intro {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 5.1vh, 3.125rem);
    /* 115px above and 170px below on the design frame — the lower figure is the
       gap plus the legend plus its own margin, reserved so the cards never run
       under it. Both shrink with the viewport, but not past what they are
       clearing: the floating header above and the legend below are fixed
       heights, so on a short screen the max() floors hold them off and the
       cards give up the height instead. */
    padding-block:
        max(var(--survey-header-clear), min(7.1875rem, 11.7vh))
        max(calc(var(--survey-legend-reserve) + 1rem), min(10.625rem, 17.3vh));
    color: var(--color-white);
}

.section-survey-tabs .home-survey__header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    text-align: left;
}

/* The cards ride up into the row on the section's own scrub rather than playing
   an entrance of their own: main.js parks each one below the bottom edge of the
   screen — off it entirely, clipped by the screen's overflow — and the scroll
   walks it up, lagging the card to its left, which is what draws the staircase
   mid-travel. It writes transforms only, so where the scrub never runs (no JS,
   no GSAP, motion turned down) the row stands exactly as it is drawn here. */
.section-survey-tabs .home-survey__cards {
    display: flex;
    gap: clamp(1rem, 2.6vw, 2.5rem);
    align-items: stretch;
    height: 100%;
    min-height: 0;
    max-height: min(531px, 54.1vh);
}

/* Outlined rather than filled: it is the one card that reads off the photo. */
.section-survey-tabs .home-survey__note {
    display: flex;
    flex: 0 1 517px;
    flex-direction: column;
    gap: clamp(1rem, 2.9vh, 1.75rem);
    justify-content: center;
    min-width: 0;
    min-height: 0;
    padding: clamp(1.5rem, 4vh, 2.5rem) clamp(1.5rem, 3.7vw, 3.5rem);
    border: 1px solid var(--color-secondary);
    border-radius: var(--radius);
}

.section-survey-tabs .home-survey__note-title {
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: var(--survey-title3);
    font-weight: var(--fw-bold);
    line-height: var(--lh-title3);
    letter-spacing: -0.5px;
}

.section-survey-tabs .home-survey__note-copy {
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--survey-title5);
    font-weight: var(--fw-regular);
    line-height: var(--lh-title5);
    letter-spacing: -0.75px;
}

.section-survey-tabs .home-survey__note-copy strong {
    font-weight: var(--fw-bold);
}

.section-survey-tabs .home-survey__stat {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: clamp(1rem, 3.3vh, 2rem);
    align-items: center;
    min-width: 0;
    min-height: 0;
    padding: clamp(1.5rem, 4vh, 2.5rem) clamp(1rem, 2.1vw, 2rem);
    border-radius: var(--radius);
    background: var(--color-white);
    color: var(--color-dark-purple);
    text-align: center;
}

.section-survey-tabs .home-survey__stat-label {
    margin: 0;
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--survey-title5);
    font-weight: var(--fw-bold);
    line-height: var(--lh-title5);
    letter-spacing: -0.75px;
    text-transform: uppercase;
}

/* The source art carries its own margin and the design crops in on it, so the
   figure is the frame and the image is oversized inside it. */
.section-survey-tabs .home-survey__stat-figure {
    display: block;
    flex: 1 1 auto;
    overflow: hidden;
    aspect-ratio: 1;
    min-height: 0;
    max-width: 100%;
    max-height: var(--survey-figure);
}

.section-survey-tabs .home-survey__stat-figure img {
    display: block;
    width: 117.65%;
    height: 119.05%;
    margin: -8.33% 0 0 -8.82%;
    max-width: none;
    object-fit: contain;
}

/* The card's 32px gap separates the illustration from the readout; inside the
   readout the number sits 4px off its caption. */
.section-survey-tabs .home-survey__stat-readout {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Counts up from 0 when its panel is shown — see initSurveySection. */
.section-survey-tabs .home-survey__stat-value {
    margin: 0;
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--survey-title3);
    font-weight: var(--fw-bold);
    line-height: var(--lh-title3);
    letter-spacing: -1.25px;
}

.section-survey-tabs .home-survey__stat-text {
    max-width: none;
    margin: 0;
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--survey-copy);
    font-weight: var(--fw-regular);
    line-height: var(--lh-copy);
}

/* meowgical_survey_emphasis() marks the phrase with <em><strong>; here the
   design asks for weight alone. */
.section-survey-tabs .home-survey__stat-text em {
    font-style: normal;
}

.section-survey-tabs .home-survey__stat-text strong {
    font-weight: var(--fw-bold);
    letter-spacing: -0.25px;
}

/* ── Screen 2: what pet parents asked for ─────────────────────── */

.section-survey-tabs .home-survey__screen--needs {
    background: var(--color-white);
    color: var(--color-dark-purple);
}

/* 653 of the 1512 frame, held as a share so the copy over it keeps the same
   margin at every width. */
.section-survey-tabs .home-survey__media {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 0;
    width: 43.19%;
    overflow: hidden;
}

/* The brand line drawing, masked to fade out at its own edges. Hung mostly
   below the bottom edge, exactly as it is drawn. */
.section-survey-tabs .home-survey__lines {
    position: absolute;
    left: 73.28%;
    top: 94.8%;
    z-index: 1;
    width: 522px;
    height: 522px;
    background: var(--survey-lines) center / cover no-repeat;
    -webkit-mask: var(--survey-lines-mask) center / contain no-repeat;
            mask: var(--survey-lines-mask) center / contain no-repeat;
    rotate: 180deg;
    translate: -50% -50%;
    pointer-events: none;
}

/* Straddles the seam between photo and white, so it is placed against the
   screen rather than against either column. */
.section-survey-tabs .home-survey__badge {
    position: absolute;
    left: 35.65%;
    top: 6.21%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 10rem;
    aspect-ratio: 1;
    background: var(--survey-badge) center / contain no-repeat;
    rotate: -15deg;
}

.section-survey-tabs .home-survey__badge-label {
    grid-area: 1 / 1;
    translate: 0% 35%;
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-title5);
    font-weight: var(--fw-bold);
    line-height: var(--lh-title5);
    letter-spacing: -0.75px;
    text-align: center;
    text-transform: uppercase;
}

.section-survey-tabs .home-survey__inner--needs {
    display: flex;
    align-items: center;
}

/* Centred in the screen rather than padded off it, so the design frame keeps its
   own balance — the cap is symmetric for that reason: it holds the grid out of
   the floating header and the legend on a short screen without shifting where a
   tall one draws it. */
.section-survey-tabs .home-survey__panels--needs {
    width: 100%;
    max-height: calc(100% - 2 * max(var(--survey-legend-reserve), min(10.625rem, 17.3vh)));
}

/* 409 / 943 of the container, which puts the card block's left edge on the
   frame's midline and its right edge on the container's. */
.section-survey-tabs .home-survey__panels--needs .home-survey__panel {
    display: grid;
    grid-template-columns: minmax(0, 409fr) minmax(0, 943fr);
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.section-survey-tabs .home-survey__needs-copy {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3.3vh, 2rem);
    color: var(--color-white);
}

.section-survey-tabs .home-survey__needs-title {
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: var(--survey-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-h2);
    letter-spacing: 0;
}

.section-survey-tabs .home-survey__needs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--survey-gap);
    justify-self: end;
    width: min(663px, 100%);
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-survey-tabs .home-survey__need,
.section-survey-tabs .home-survey__need + .home-survey__need {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3.3vh, 2rem);
    align-items: flex-start;
    min-height: 0;
    padding: var(--survey-gap);
    border: 0;
    border-radius: var(--radius);
    background: var(--color-white);
}

.section-survey-tabs .home-survey__need-icon {
    display: block;
    width: var(--survey-icon);
    height: var(--survey-icon);
}

/* As on the stat cards, the wide gap belongs between the icon and the text —
   not between the title and the line under it. */
.section-survey-tabs .home-survey__need-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.section-survey-tabs .home-survey__need-title {
    margin: 0;
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--survey-title5);
    font-weight: var(--fw-bold);
    line-height: var(--lh-title5);
    letter-spacing: -0.75px;
    text-transform: uppercase;
}

.section-survey-tabs .home-survey__need-copy {
    margin: 0;
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--survey-copy);
    font-weight: var(--fw-regular);
    line-height: var(--lh-copy);
}

/* ── Screen 3: the quote it came back to ──────────────────────── */

/* Photograph and quote both switch with the category, so here the panels are
   the screen rather than a block inside it: each one carries its own full-bleed
   photo and the copy read off it, and the cross-fade swaps the pair together. */
.section-survey-tabs .home-survey__panels--quote {
    display: flex;
    flex: 1 1 auto;
}

.section-survey-tabs .home-survey__panels--quote .home-survey__panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.section-survey-tabs .home-survey__panels--quote .home-survey__panel.is-active {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
}

/* Hung mostly off the left edge, opposite the needs screen's copy — the same
   line drawing, read against the other corner. */
.section-survey-tabs .home-survey__lines--quote {
    left: 3.77%;
    top: 85.3%;
}

.section-survey-tabs .home-survey__inner--quote {
    display: flex;
    flex-direction: column;
    /* Anchored from the bottom rather than centred: the design hangs the quote
       low on the frame, 200px clear of the edge and just above the legend —
       which is the floor the reserve stops shrinking at. */
    justify-content: flex-end;
    padding-block:
        max(var(--survey-header-clear), min(7.1875rem, 11.7vh))
        max(calc(var(--survey-legend-reserve) + 4rem), min(12.5rem, 20.4vh));
}

/* Held off the right gutter by roughly the width of the hung closing mark, so
   that mark — not the text — is what lines up with the container edge. */
.section-survey-tabs .home-survey__quote {
    position: relative;
    /* 1004 of the 1352 container at the design width; below that it gives up
       room rather than pushing the hung closing mark into the clipped edge. */
    width: min(1004px, 100% - 5rem);
    margin: 0 min(4.75rem, 5vw) 0 auto;
    color: var(--color-white);
    /* home.css sets the legacy design's blockquote italic under the same class
       name, and both stylesheets load here — only the closing phrase leans. */
    font-style: normal;
    text-align: right;
}

.section-survey-tabs .home-survey__quote-text {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--survey-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-h2);
}

.section-survey-tabs .home-survey__quote-text em {
    color: var(--color-accent-02);
    font-style: italic;
}

/* Hung outside the text block on both corners, as drawn — sized off the same
   em so they keep their distance as the quote resizes. */
.section-survey-tabs .home-survey__quote-mark {
    position: absolute;
    color: var(--color-accent-02);
    font-family: var(--font-display);
    font-size: var(--survey-quote-mark);
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: -1.5px;
    pointer-events: none;
}

/* Offsets are a share of the glyph's own box, so both marks keep their distance
   from the corner as the clamp resizes them. */
.section-survey-tabs .home-survey__quote-mark--open {
    left: 0;
    top: 0;
    translate: -125% -10%;
}

.section-survey-tabs .home-survey__quote-mark--close {
    right: 0;
    bottom: 0;
    translate: 126% 50%;
}

/* ── Stacked fallback ─────────────────────────────────────────── */

/* A 1512-wide frame has nowhere useful to go at this width, so each screen
   sizes to its own content and the three are read straight down the page.
   Nothing here is scrubbed: the curtain and the sideways track are both off
   below 1025 (see initSurveyBrandReveal), so the section costs the scroll it
   is worth rather than pinning the page while a stack taller than the viewport
   plays out under it.
   The middle screen goes back to white with its photograph bounded into a band
   — full-bleed on all three read as one long photo with three sets of copy
   laid over it, and the white screen is what the two either side are meant to
   be read against. */
@media (max-width: 1024px) {
    /* Both curtains are a one-screen-at-a-time read with nothing to hand over
       to down here, and the JS never runs them — so neither ever paints. */
    .section-survey-tabs .home-survey__reveal,
    .section-survey-tabs .home-survey__transition {
        display: none;
    }

    .section-survey-tabs .home-survey__screen {
        min-height: 0;
        padding-block: var(--section-pad);
    }

    /* The photographs carry white type at phone sizes with no room to move it
       off the busy part of the frame, so the wash they are read through is
       worth more than the 20% the wide layout needs. */
    .section-survey-tabs .home-survey__screen--intro::after,
    .section-survey-tabs .home-survey__screen--quote::after {
        background: rgba(17, 17, 25, 0.45);
    }

    /* ── Switcher: leads each screen rather than trailing it ──────
       Stacked, a panel is most of a phone screen tall, so a switcher offered
       at the bottom is one found after the reading is already done. */
    .section-survey-tabs .home-survey__legend {
        position: static;
        order: -1;
        width: min(var(--container-max), 100% - 2 * var(--container-pad));
        margin: 0 auto clamp(1.5rem, 5vw, 2rem);
        gap: 0.5rem;
    }

    /* Segmented rather than railed: the 54px rail reads as a caption ornament,
       and at this width the two categories have to look like the buttons they
       are. */
    .section-survey-tabs .home-survey__legend-bar {
        display: none;
    }

    .section-survey-tabs .home-survey__legend-list {
        flex-direction: row;
        gap: 0.5rem;
        width: 100%;
        max-width: none;
    }

    .section-survey-tabs .home-survey__legend-item {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.625rem 0.5rem;
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 999px;
        text-align: center;
        transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
    }

    .section-survey-tabs .home-survey__legend--dark .home-survey__legend-item {
        border-color: var(--color-secondary);
        color: var(--color-soft-purple);
    }

    .section-survey-tabs .home-survey__legend-item.is-active,
    .section-survey-tabs .home-survey__legend--dark .home-survey__legend-item.is-active {
        border-color: var(--color-accent-01);
        background: var(--color-accent-01);
        color: var(--color-dark-purple);
    }

    /* ── Screen 1 ────────────────────────────────────────────────── */

    .section-survey-tabs .home-survey__inner--intro {
        padding-block: 0;
        gap: clamp(1.25rem, 5vw, 2rem);
    }

    .section-survey-tabs .home-survey__cards {
        flex-direction: column;
        gap: clamp(0.875rem, 3.5vw, 1.25rem);
        height: auto;
        max-height: none;
    }

    .section-survey-tabs .home-survey__note,
    .section-survey-tabs .home-survey__stat {
        flex: 0 0 auto;
    }

    /* The outline alone held up beside a photo column; against a photograph
       that is now the whole screen behind it, the card carries its own scrim. */
    .section-survey-tabs .home-survey__note {
        gap: 0.75rem;
        padding: clamp(1.25rem, 5vw, 1.75rem);
        background: rgba(45, 44, 108, 0.5);
    }

    /* Label across the top, illustration and readout side by side under it: as
       a stacked column the card ran most of a phone screen on the strength of
       a 245px circle. */
    .section-survey-tabs .home-survey__stat {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.75rem clamp(0.875rem, 4vw, 1.25rem);
        align-items: center;
        padding: clamp(1.25rem, 5vw, 1.75rem);
        text-align: left;
    }

    .section-survey-tabs .home-survey__stat-label {
        grid-column: 1 / -1;
    }

    .section-survey-tabs .home-survey__stat-figure {
        flex: 0 0 auto;
        width: clamp(88px, 26vw, 128px);
        max-height: none;
    }

    /* ── Screen 2 ────────────────────────────────────────────────── */

    /* In flow as a band rather than inset behind the copy: the screen goes back
       to being white, which is the break between screens 1 and 3. */
    .section-survey-tabs .home-survey__media {
        position: relative;
        inset: auto;
        width: min(var(--container-max), 100% - 2 * var(--container-pad));
        height: clamp(11rem, 44vw, 16rem);
        margin-inline: auto;
        border-radius: var(--radius-lg);
    }

    .section-survey-tabs .home-survey__media::after {
        border-radius: inherit;
    }

    /* Hung off the band's own bottom-right corner instead of the screen's, so
       it keeps reaching past an edge the way it is drawn to. */
    .section-survey-tabs .home-survey__media .home-survey__lines {
        left: 84%;
        top: 84%;
        width: min(240px, 62vw);
        height: min(240px, 62vw);
    }

    /* Back in flow too — it follows the band in the markup, so a pull upward is
       all it takes to straddle the seam the wide layout hands it. */
    .section-survey-tabs .home-survey__badge {
        position: relative;
        left: auto;
        top: auto;
        align-self: flex-end;
        width: clamp(5.5rem, 22vw, 7.5rem);
        margin: -2.5rem var(--container-pad) 0 0;
    }

    .section-survey-tabs .home-survey__badge-label {
        font-size: var(--text-title6);
    }

    .section-survey-tabs .home-survey__inner--needs {
        padding-block: clamp(1.5rem, 5vw, 2rem) 0;
    }

    .section-survey-tabs .home-survey__panels--needs {
        max-height: none;
    }

    .section-survey-tabs .home-survey__panels--needs .home-survey__panel {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: clamp(1.5rem, 5vw, 2rem);
    }

    /* White screen again, so the copy that was reading off the photograph goes
       back to the ink it uses on the wide layout. */
    .section-survey-tabs .home-survey__needs-copy,
    .section-survey-tabs .home-survey__needs-title,
    .section-survey-tabs .home-survey__needs-lead {
        color: var(--color-dark-purple);
    }

    .section-survey-tabs .home-survey__needs-grid {
        justify-self: stretch;
        gap: clamp(0.75rem, 3vw, 1rem);
        width: 100%;
    }

    /* On the wide layout these sit white on white beside the photo column and
       the column is what separates them; with nothing beside them they need an
       edge of their own. */
    .section-survey-tabs .home-survey__need,
    .section-survey-tabs .home-survey__need + .home-survey__need {
        gap: 0.75rem;
        padding: clamp(1rem, 4vw, 1.25rem);
        background: var(--color-light-purple);
    }

    /* ── Screen 3 ────────────────────────────────────────────────── */

    /* The photograph belongs to the panel here rather than to the screen, so
       padding the screen would band it in purple: the quote screen keeps its
       full bleed and the switcher stays laid over it.
       Screen 3 has one paragraph on it, so unlike the other two it would
       collapse to a band of photo barely taller than its own quote. */
    .section-survey-tabs .home-survey__screen--quote {
        min-height: min(100vh, 40rem);
        padding-block: 0;
    }

    /* The switcher leads screens 1 and 2 because a reader is a panel deep in
       them before it would otherwise turn up. Here the quote is hung low on a
       single screen, so the reader arrives at the copy and the switcher
       together either way — and the design's own placement is the one that
       leaves the photograph whole. */
    .section-survey-tabs .home-survey__screen--quote .home-survey__legend {
        position: absolute;
        left: 50%;
        right: auto;
        bottom: clamp(1.75rem, 6vw, 2.75rem);
        z-index: 3;
        margin: 0;
        translate: -50% 0;
    }

    /* The closing mark hangs below the text here, and the panel clips at the
       photo's edge — so the padding under it is the mark's room and the
       stacked switcher's, not spacing. */
    .section-survey-tabs .home-survey__inner--quote {
        padding-block:
            var(--survey-header-clear)
            calc(clamp(1.75rem, 6vw, 2.75rem) + 11rem);
    }

    /* Nothing left to hang the quote off its own gutter for, so it reads from
       the container edge and the marks move to above and below it. */
    .section-survey-tabs .home-survey__quote {
        width: 100%;
        margin-inline: 0;
        text-align: left;
    }

    .section-survey-tabs .home-survey__quote-mark--open {
        translate: -10% -85%;
    }

    .section-survey-tabs .home-survey__quote-mark--close {
        right: auto;
        left: 0;
        bottom: 0;
        translate: 0 85%;
    }
}

@media (max-width: 768px) {
    .section-survey-tabs .home-survey__needs-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* A category label is one unbroken token — "VETERINARY/WELLNESS" has no
       space in it to wrap at — and half a phone's width is narrower than it
       sets. So the pills take a row each rather than clipping their labels. */
    .section-survey-tabs .home-survey__legend-list {
        flex-direction: column;
    }

    .section-survey-tabs .home-survey__legend-item {
        flex: 0 0 auto;
    }
}

/* Panels are swapped by a click, not by scrolling into view, so the cross-fade
   is the only motion they carry. */
@media (prefers-reduced-motion: reduce) {
    .section-survey-tabs .home-survey__panel,
    .section-survey-tabs .home-survey__photo[data-panel],
    .section-survey-tabs .home-survey__content,
    .section-survey-tabs .home-survey__legend-bar::after,
    .section-survey-tabs .home-survey__legend-item {
        transition: none;
    }
}

.section-survey-tabs {
    overflow: hidden;
}