/* ==========================================================================
   pds-hero — the solar mosaic

   Editorial copy on the left, an asymmetric bento of proof tiles on the
   right: a film tile (video or poster), a photo tile, an animated yield
   curve and an energielabel ladder. The section runs up behind the
   transparent site header, so its background carries the whole first screen.

   The tiles interlock: outer corners are soft, the corners that face each
   other across a gap are tight, so the mosaic reads as one carved shape
   rather than four loose cards.

   Every ornament is inline SVG drawn for this brand; all motion lives
   behind prefers-reduced-motion.
   ========================================================================== */

.pds-hero {
    /* How much of the first screen the section fills, header included. */
    --pds-hero-screen: 92vh;
    /* The copy and the mosaic get what is left under the header, so the
       section still lands on the same height as before it went full-bleed. */
    --pds-hero-min: calc(var(--pds-hero-screen) - var(--pdsh-header-h, 118px));
    --pds-tile-gap: clamp(.75rem, .9vw, 1.125rem);
    --pds-tile-r: clamp(1.125rem, 1.6vw, 1.75rem);
    --pds-tile-r-tight: 8px;
    position: relative;
    overflow: clip;
    isolation: isolate;
    /* The header rides on top of the hero (see header.css), so the section
       starts at the very top of the page and its background runs behind the
       bar and the top strip. This keeps the copy clear of that overlay; the
       fallback matches the default header. */
    padding-block-start: var(--pdsh-header-h, 118px);
    background:
        radial-gradient(118% 74% at 84% -6%, #FFF4E6 0%, rgba(255, 244, 230, 0) 56%),
        radial-gradient(90% 70% at 4% 96%, #F6EDFA 0%, rgba(246, 237, 250, 0) 58%),
        linear-gradient(178deg, var(--pds-paper) 0%, var(--pds-bone) 100%);
}

/* ==========================================================================
   Shared motion
   ========================================================================== */

@keyframes pds-hero-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Layout — copy column beside the mosaic
   ========================================================================== */

.pds-hero__layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    align-items: center;
    gap: clamp(2.5rem, 5.5vw, 6rem);
    min-block-size: var(--pds-hero-min);
    max-inline-size: calc(var(--pds-max) + (var(--pds-gutter) * 2));
    margin-inline: auto;
    padding-inline: var(--pds-gutter);
    padding-block: clamp(1.25rem, 2.5vw, 2.5rem) clamp(6rem, 9vw, 9rem);
}

/* ==========================================================================
   Copy
   ========================================================================== */

.pds-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.3125rem;
    max-inline-size: 38rem;
}

/* No chip, no border here: the eyebrow sits straight on the background. */
.pds-hero__eyebrow {
    gap: .5rem;
    padding: 0;
    border: 0;
    background: transparent;
}

/* The mark sits straight on the background here; sizing and motion come from the
   shared .pds__eyebrow-mark in pds-core.css. */
.pds-hero__eyebrow-mark {
    inline-size: 1.875rem;
    block-size: 1.875rem;
}

.pds-hero__title {
    /* Wide enough that the marked phrase plus its trailing punctuation still
       fit on one line: .pds__mark is an atomic inline-block, so a tight
       measure drops the full stop onto a line of its own. */
    max-inline-size: 17ch;
}

.pds-hero__lead {
    max-inline-size: 46ch;
}

.pds-hero__actions {
    margin-block-start: .25rem;
}

/* --- USP list ------------------------------------------------------------ */

.pds-hero__usps {
    display: flex;
    flex-direction: column;
    gap: .8125rem;
    margin: .5rem 0 0;
    padding: 0;
    list-style: none;
}

.pds-hero__usps li {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: var(--pds-fs-small);
    line-height: 1.5;
    color: var(--pds-body);
}

.pds-hero__tick {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.125rem;
    block-size: 2.125rem;
    border-radius: 11px;
    background: var(--pds-purple-wash);
    color: var(--pds-purple);
    transition: background-color .3s var(--pds-ease), color .3s var(--pds-ease),
                transform .4s var(--pds-ease-out);
}

.pds-hero__tick svg {
    inline-size: 1.125rem;
    block-size: 1.125rem;
}

.pds-hero__usps li:hover .pds-hero__tick {
    background: var(--pds-purple);
    color: #fff;
    transform: translateY(-2px) rotate(-5deg);
}

/* --- Rating -------------------------------------------------------------- */

.pds-hero__rating {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--pds-line);
    inline-size: 100%;
    max-inline-size: 26rem;
}

.pds-hero__stars {
    display: inline-flex;
    gap: .1875rem;
    color: var(--pds-orange);
}

.pds-hero__stars svg {
    inline-size: 1rem;
    block-size: 1rem;
}

.pds-hero__rating p {
    font-size: var(--pds-fs-small);
    color: var(--pds-muted);
}

.pds-hero__rating strong {
    color: var(--pds-title);
    font-weight: 600;
}

/* ==========================================================================
   Animated glyphs shared by the chips
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

    /* Sun rays turn slowly, forever */
    .pds-hero__ray-group {
        transform-origin: 12px 12px;
        animation: pds-hero-spin 24s linear infinite;
    }

    /* Panel cells light up one after another */
    .pds-hero__cell {
        animation: pds-hero-glow 3.2s var(--pds-ease) infinite;
    }

    .pds-hero__cell:nth-child(2) { animation-delay: .25s; }
    .pds-hero__cell:nth-child(3) { animation-delay: .5s; }
    .pds-hero__cell:nth-child(4) { animation-delay: .75s; }

    .pds-hero__bolt {
        animation: pds-hero-flicker 2.6s var(--pds-ease) infinite;
    }
}

@keyframes pds-hero-glow {
    0%, 100% { opacity: .45; }
    35%      { opacity: 1; }
}

@keyframes pds-hero-flicker {
    0%, 100% { opacity: 1; }
    45%      { opacity: .35; }
    55%      { opacity: 1; }
}

/* ==========================================================================
   Mosaic — a 6×6 bento the tiles slot into
   ========================================================================== */

.pds-hero__mosaic {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: var(--pds-tile-gap);
    min-block-size: clamp(30rem, 64vh, 44rem);
    /* The wire hangs outside the grid on purpose. */
    overflow: visible;
}

.pds-hero__tile {
    position: relative;
    z-index: 1;
    margin: 0;
    overflow: hidden;
    border-radius: var(--pds-tile-r);
    background: var(--pds-paper);
    border: 1px solid var(--pds-line);
    box-shadow: var(--pds-shadow-sm);
}

/* Film tile — the tall anchor on the left */
.pds-hero__tile--film {
    grid-area: 1 / 1 / 5 / 5;
    border: 0;
    border-end-start-radius: var(--pds-tile-r-tight);
    box-shadow: var(--pds-shadow-lg);
    background: var(--pds-bone-deep);
}

/* Photo tile — top right */
.pds-hero__tile--photo {
    grid-area: 1 / 5 / 3 / 7;
    border: 0;
    border-start-end-radius: var(--pds-r-xl);
    box-shadow: var(--pds-shadow);
    background: var(--pds-bone-deep);
}

/* Yield tile — the data card under the photo */
.pds-hero__tile--yield {
    grid-area: 3 / 5 / 7 / 7;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: clamp(.9375rem, 1.3vw, 1.375rem);
    border-end-end-radius: var(--pds-r-xl);
    background: rgba(255, 255, 255, .84);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Energielabel tile — the dark anchor along the bottom */
.pds-hero__tile--label {
    grid-area: 5 / 1 / 7 / 5;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.75rem);
    padding: clamp(1rem, 1.6vw, 1.5rem) clamp(1.125rem, 2vw, 1.75rem);
    border: 0;
    border-start-start-radius: var(--pds-tile-r-tight);
    background: var(--pds-ink);
    box-shadow: var(--pds-shadow);
}

.pds-hero__tile-title {
    margin: 0;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pds-muted);
}

/* --- Film tile ------------------------------------------------------------ */

.pds-hero__tile--film img,
.pds-hero__video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

.pds-hero__tile--film::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(196deg, rgba(23, 9, 42, 0) 38%, rgba(23, 9, 42, .52));
    pointer-events: none;
    transition: opacity .4s var(--pds-ease);
}

.pds-hero__tile--film iframe {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    z-index: 4;
}

/* Sunlight raking across the glass */
.pds-hero__glare {
    position: absolute;
    inset: -45%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        104deg,
        transparent 40%,
        rgba(255, 255, 255, .38) 48%,
        rgba(255, 236, 209, .22) 52%,
        transparent 60%
    );
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {

    .pds-hero--animated .pds-hero__glare {
        animation: pds-hero-glare 8s var(--pds-ease) infinite;
    }

    .pds-hero__tile--film img {
        transform: scale(1.07);
        transition: transform 1.9s var(--pds-ease-out);
    }

    .pds-hero__tile--film.is-revealed img {
        transform: scale(1);
    }
}

@keyframes pds-hero-glare {
    0%       { transform: translate3d(-58%, 0, 0); opacity: 0; }
    22%      { opacity: 1; }
    58%      { opacity: 0; }
    100%     { transform: translate3d(58%, 0, 0); opacity: 0; }
}

/* Once playing, the scrim and the button get out of the way */
.pds-hero__tile--film.is-playing::after,
.pds-hero__tile--film.is-playing .pds-hero__glare {
    opacity: 0;
}

.pds-hero__tile--film.is-playing .pds-hero__play {
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
}

/* --- Play button — an overlay bar, not a centred disc -------------------- */

.pds-hero__play {
    position: absolute;
    z-index: 3;
    inset-inline-end: clamp(.75rem, 1.2vw, 1.125rem);
    inset-block-end: clamp(.75rem, 1.2vw, 1.125rem);
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .4375rem 1.25rem .4375rem .4375rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(23, 9, 42, .3);
    cursor: pointer;
    font-family: var(--pds-text);
    transition: opacity .35s var(--pds-ease), visibility .35s,
                transform .35s var(--pds-ease-out), background-color .3s var(--pds-ease);
}

.pds-hero__play:hover {
    background: #fff;
    transform: translateY(-2px);
}

.pds-hero__play-icon {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: 50%;
    background: var(--pds-purple);
    color: #fff;
}

.pds-hero__play-icon svg {
    position: relative;
    z-index: 1;
    inline-size: 1.0625rem;
    block-size: 1.0625rem;
    margin-inline-start: .125rem;
}

/* Expanding ring — a quiet "this is live" pulse */
.pds-hero__play-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--pds-purple);
    opacity: .35;
    pointer-events: none;
}

.pds-hero__play-label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--pds-title);
    white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {

    .pds-hero__play-ring {
        animation: pds-hero-pulse 2.6s var(--pds-ease-out) infinite;
    }

    /* The clip wipe from pds-core applies to every direct child. The play
       button is chrome, not picture, so it fades up after the picture has
       finished uncovering instead of being wiped with it. */
    .pds-js .pds .pds-hero__tile[data-pds-reveal="clip"] > .pds-hero__play {
        clip-path: none;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity .5s var(--pds-ease-out) .55s,
                    transform .5s var(--pds-ease-out) .55s;
    }

    .pds-js .pds .pds-hero__tile[data-pds-reveal="clip"].is-revealed > .pds-hero__play {
        opacity: 1;
        transform: none;
    }

    /* Matches the specificity above so playback still hides the chrome. */
    .pds-js .pds .pds-hero__tile[data-pds-reveal="clip"].is-playing > .pds-hero__play {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes pds-hero-pulse {
    0%   { transform: scale(1); opacity: .35; }
    70%  { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(1.7); opacity: 0; }
}

/* --- Photo tile ---------------------------------------------------------- */

.pds-hero__tile--photo img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    transition: transform .9s var(--pds-ease-out);
}

.pds-hero__tile--photo:hover img {
    transform: scale(1.05);
}

.pds-hero__photo-cap {
    position: absolute;
    inset-block-end: .75rem;
    inset-inline-start: .75rem;
    /* Not pinned on the far edge: an absolutely positioned box with both
       inline insets set stretches to the full width and stops reading as a
       pill. */
    inset-inline-end: auto;
    max-inline-size: calc(100% - 1.5rem);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .75rem;
    border-radius: 999px;
    background: rgba(23, 9, 42, .68);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
}

/* Recording dot */
.pds-hero__live {
    position: relative;
    flex: none;
    inline-size: .5rem;
    block-size: .5rem;
    border-radius: 50%;
    background: var(--pds-orange);
}

.pds-hero__live::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--pds-orange);
}

@media (prefers-reduced-motion: no-preference) {

    .pds-hero__live::after {
        animation: pds-hero-pulse 2.2s var(--pds-ease-out) infinite;
    }
}

/* --- Yield tile — the animated production curve -------------------------- */

.pds-hero__tile--yield {
    justify-content: space-between;
}

.pds-hero__yield-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
}

/* The label routinely runs to two lines in this narrow tile, so it drops a
   step in size rather than eating the chart's height. */
.pds-hero__tile--yield .pds-hero__tile-title {
    font-size: .6875rem;
    line-height: 1.35;
}

.pds-hero__yield-value {
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: .1875rem;
    font-family: var(--pds-display);
    color: var(--pds-title);
    font-variant-numeric: tabular-nums;
}

.pds-hero__yield-value strong {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
}

.pds-hero__yield-value span {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--pds-orange-ink);
}

.pds-hero__yield-plot {
    position: relative;
    inline-size: 100%;
    aspect-ratio: 320 / 168;
    /* Keeps the travelling sun inside the card at every tile size. */
    overflow: hidden;
    color: var(--pds-title);
}

.pds-hero__yield-art {
    inline-size: 100%;
    block-size: 100%;
    display: block;
}

.pds-hero__yield-foot {
    display: flex;
    justify-content: space-between;
    font-size: .625rem;
    letter-spacing: .06em;
    color: var(--pds-muted);
    font-variant-numeric: tabular-nums;
}

.pds-hero__yield-note {
    margin: 0;
    font-size: .75rem;
    line-height: 1.4;
    color: var(--pds-muted);
}

/* The curve draws itself, the area grows under it, and the sun crosses.
   All three are gated on .pds-js so the chart is complete without JS. */
@media (prefers-reduced-motion: no-preference) {

    .pds-js .pds .pds-hero__yield-line {
        /* Comfortably longer than the path, so the line starts fully hidden. */
        stroke-dasharray: 680;
        stroke-dashoffset: 680;
        transition: stroke-dashoffset 1.9s var(--pds-ease-out) .25s;
    }

    .pds-js .pds .pds-hero__tile--yield.is-revealed .pds-hero__yield-line {
        stroke-dashoffset: 0;
    }

    .pds-js .pds .pds-hero__yield-area {
        transform-box: view-box;
        transform-origin: 160px 148px;
        transform: scaleY(0);
        transition: transform 1.2s var(--pds-ease-out) .5s;
    }

    .pds-js .pds .pds-hero__tile--yield.is-revealed .pds-hero__yield-area {
        transform: none;
    }

    /* Sampled at the midpoint and endpoint of each bezier segment, so the
       sun tracks the drawn curve rather than a straight line across it. */
    .pds-hero--animated .pds-hero__yield-sun {
        animation: pds-hero-yield-travel 9s linear infinite;
    }
}

@keyframes pds-hero-yield-travel {
    0%     { transform: translate(10px, 138px); opacity: 0; }
    6%     { opacity: 1; }
    12.5%  { transform: translate(53.25px, 117.25px); }
    25%    { transform: translate(92px, 74px); }
    37.5%  { transform: translate(128.25px, 43.5px); }
    50%    { transform: translate(160px, 34px); }
    62.5%  { transform: translate(191.75px, 43.5px); }
    75%    { transform: translate(228px, 74px); }
    87.5%  { transform: translate(266.75px, 117.25px); }
    94%    { opacity: 1; }
    100%   { transform: translate(310px, 138px); opacity: 0; }
}

/* --- Energielabel tile --------------------------------------------------- */

.pds-hero__label-art {
    flex: none;
    inline-size: clamp(6rem, 9vw, 8.5rem);
}

.pds-hero__ladder {
    inline-size: 100%;
    block-size: auto;
    display: block;
}

.pds-hero__rung-chip {
    fill: rgba(255, 255, 255, .14);
}

.pds-hero__rung-letter {
    font-family: var(--pds-display);
    font-size: 11px;
    font-weight: 700;
    fill: rgba(255, 255, 255, .55);
}

.pds-hero__rung--from .pds-hero__rung-chip {
    fill: rgba(255, 127, 13, .58);
}

.pds-hero__rung--from .pds-hero__rung-letter {
    fill: #fff;
}

.pds-hero__rung--target .pds-hero__rung-chip {
    fill: var(--pds-sage);
}

.pds-hero__rung--target .pds-hero__rung-letter {
    fill: #fff;
}

/* The staircase builds from worst to best once the tile arrives. */
@media (prefers-reduced-motion: no-preference) {

    .pds-js .pds .pds-hero__rung {
        transform-box: fill-box;
        transform-origin: 0 50%;
        transform: scaleX(0);
        opacity: 0;
        transition: transform .55s var(--pds-ease-out), opacity .35s var(--pds-ease);
        /* Index 6 is label G, so the build runs bottom-up. */
        transition-delay: calc((6 - var(--pds-rung, 0)) * 70ms);
    }

    .pds-js .pds .pds-hero__tile--label.is-revealed .pds-hero__rung {
        transform: none;
        opacity: 1;
    }

    .pds-hero--animated .pds-hero__rung--target .pds-hero__rung-chip {
        animation: pds-hero-rung-pulse 2.8s var(--pds-ease) infinite;
    }
}

@keyframes pds-hero-rung-pulse {
    0%, 100% { fill-opacity: 1; }
    50%      { fill-opacity: .68; }
}

.pds-hero__label-copy {
    min-inline-size: 0;
}

.pds-hero__label-copy .pds-hero__tile-title {
    color: var(--pds-on-ink-faint);
}

.pds-hero__label-letter {
    margin: .1875rem 0 .25rem;
    font-family: var(--pds-display);
    font-size: clamp(2.25rem, 3.4vw, 3.25rem);
    font-weight: 700;
    line-height: .92;
    letter-spacing: -.03em;
    color: #fff;
}

.pds-hero__label-text {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--pds-on-ink-soft);
}

/* --- Wire — the circuit running down the gutter into the mosaic ---------- */

.pds-hero__wire {
    position: absolute;
    z-index: 0;
    inset-block: 6%;
    inset-inline-start: clamp(-5.5rem, -4vw, -2.5rem);
    inline-size: 4.5rem;
    color: var(--pds-purple-light);
    opacity: .34;
    pointer-events: none;
}

.pds-hero__wire-art {
    inline-size: 100%;
    block-size: 100%;
    display: block;
}

@media (prefers-reduced-motion: no-preference) {

    .pds-hero--animated .pds-hero__wire-line {
        animation: pds-hero-wire-march 1.9s linear infinite;
    }

    .pds-hero--animated .pds-hero__wire-node {
        animation: pds-hero-node 2.6s var(--pds-ease) infinite;
    }

    .pds-hero--animated .pds-hero__wire-node--b {
        animation-delay: -1.3s;
    }
}

/* 6 + 10 = one dash cycle. */
@keyframes pds-hero-wire-march {
    to { stroke-dashoffset: -16; }
}

@keyframes pds-hero-node {
    0%, 100% { opacity: .4; }
    50%      { opacity: 1; }
}

/* ==========================================================================
   Scroll cue — sun over a solar panel, arrow travelling down
   ========================================================================== */

.pds-hero__cue {
    position: absolute;
    /* Pinned to the foot of the first screen, not to the foot of the section:
       the copy column routinely makes the hero taller than the viewport, and a
       section-anchored cue then sits below the fold — the scroll handler hides
       it before anyone has seen it. The hero now starts at the very top of the
       page, so an offset from its own top edge is an offset from the top of
       the viewport. Centred, because at this height both columns are full. */
    inset-block-start: calc(100svh - 5.25rem);
    inset-block-end: auto;
    inset-inline: 0;
    margin-inline: auto;
    inline-size: fit-content;
    /* Above the tiles it floats over. */
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 1rem .5rem .5rem;
    border: 1px solid var(--pds-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--pds-shadow-sm);
    text-decoration: none;
    color: var(--pds-muted);
    transition: color .3s var(--pds-ease), background-color .3s var(--pds-ease),
                opacity .4s var(--pds-ease), transform .4s var(--pds-ease);
}

.pds-hero__cue:hover {
    color: var(--pds-title);
    background: #fff;
}

/* Hidden once the visitor has taken the hint */
.pds-hero__cue.is-gone {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.pds-hero__cue-art {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.25rem;
    block-size: 2.75rem;
    color: var(--pds-orange);
}

.pds-hero__cue-glyph {
    inline-size: 100%;
    block-size: 100%;
}

.pds-hero__cue-text {
    font-family: var(--pds-text);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .01em;
}

@media (prefers-reduced-motion: no-preference) {

    .pds-hero__cue-rays {
        transform-origin: 22px 10px;
        animation: pds-hero-spin 20s linear infinite;
    }

    .pds-hero__cue-sun {
        transform-origin: 22px 10px;
        animation: pds-hero-sun-breathe 3.4s var(--pds-ease) infinite;
    }

    .pds-hero__cue-cell {
        animation: pds-hero-glow 2.8s var(--pds-ease) infinite;
    }

    .pds-hero__cue-cell:nth-child(2) { animation-delay: .3s; }
    .pds-hero__cue-cell:nth-child(3) { animation-delay: .6s; }

    .pds-hero__cue-arrow {
        animation: pds-hero-cue-travel 2.2s var(--pds-ease) infinite;
    }
}

@keyframes pds-hero-sun-breathe {
    0%, 100% { transform: scale(1); opacity: .9; }
    50%      { transform: scale(1.12); opacity: 1; }
}

@keyframes pds-hero-cue-travel {
    0%   { transform: translateY(-4px); opacity: 0; }
    30%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translateY(7px); opacity: 0; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1280px) {

    .pds-hero__layout {
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
        gap: clamp(2rem, 4vw, 3.5rem);
    }

    .pds-hero__wire {
        display: none;
    }
}

@media (max-width: 1024px) {

    .pds-hero {
        --pds-hero-min: auto;
    }

    .pds-hero__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(2.5rem, 6vw, 3.5rem);
        padding-block: clamp(1.25rem, 4vw, 2.25rem) clamp(5rem, 9vw, 6rem);
    }

    .pds-hero__copy {
        max-inline-size: 36rem;
    }

    .pds-hero__title {
        max-inline-size: 20ch;
    }

    .pds-hero__mosaic {
        min-block-size: clamp(26rem, 58vw, 36rem);
    }

    /* The cue belongs to a tall hero; on stacked layouts it just adds noise. */
    .pds-hero__cue {
        display: none;
    }
}

/* Below this the 6×6 bento gets too cramped: the tiles reflow into a pair of
   columns and take their height from their own content. */
@media (max-width: 880px) {

    .pds-hero__mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        min-block-size: 0;
    }

    .pds-hero__tile--film {
        grid-area: auto / span 2;
        aspect-ratio: 16 / 10;
        border-end-start-radius: var(--pds-tile-r);
    }

    .pds-hero__tile--photo {
        grid-area: auto / span 2;
        aspect-ratio: 16 / 9;
    }

    .pds-hero__tile--yield {
        grid-area: auto;
    }

    .pds-hero__tile--label {
        grid-area: auto;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: .75rem;
        border-start-start-radius: var(--pds-tile-r);
    }

    .pds-hero__label-art {
        inline-size: 6.5rem;
    }
}

@media (max-width: 600px) {

    .pds-hero__actions {
        inline-size: 100%;
    }

    .pds-hero__actions .pds__btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .pds-hero__mosaic {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Every span must be reset here: a "span 2" left over from the two-column
       breakpoint would force an implicit second column into this grid. */
    .pds-hero__tile--film,
    .pds-hero__tile--yield,
    .pds-hero__tile--photo {
        grid-area: auto;
    }

    .pds-hero__tile--photo {
        aspect-ratio: 16 / 10;
    }

    .pds-hero__play {
        padding: .375rem 1rem .375rem .375rem;
        gap: .625rem;
    }

    .pds-hero__play-icon {
        inline-size: 2.25rem;
        block-size: 2.25rem;
    }

    .pds-hero__play-label {
        font-size: .8125rem;
    }
}