/* ============================================================
   YDWP HOMEPAGE REDESIGN - scoped styles
   Loaded ONLY on the front page. Every content rule is scoped
   under main.ydh-main or body.ydh-page so service pages, city
   pages, /about/, /contact/ and blog posts are not restyled.
   Header/footer/button chrome styles live in custom.css (shared).
   Palette per redesign spec v1: ink/orange/charcoal, no teal.
   Measured contrast (contrast_plan.py): all pairs >= 4.5 body,
   >= 3.0 large. Buttons use ink text on orange (4.83).
   ============================================================ */

/* ---------- Page background ---------- */
body.ydh-page {
    background: radial-gradient(1200px 800px at 85% -10%, #FDF1E7 0%, rgba(255, 255, 255, 0) 60%) #FFFFFF !important;
    background-repeat: no-repeat !important;
}

/* ---------- Layout shells ---------- */
main.ydh-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

main.ydh-main .ydh-hero-inner,
main.ydh-main .ydh-section-inner,
main.ydh-main .ydh-faq-inner,
main.ydh-main .ydh-final-inner {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1.25rem, 4vw, 2.5rem);
    padding-right: clamp(1.25rem, 4vw, 2.5rem);
}

main.ydh-main .ydh-statbar { margin-top: 0; }

/* Full-bleed sections must not be inset by root padding */
main.ydh-main > .wp-block-group.alignfull,
main.ydh-main .entry-content > .wp-block-group.alignfull {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw !important;
}

/* Neutralize sub-page-oriented rules that would leak in */
main.ydh-main .wp-block-group { padding-top: 0; padding-bottom: 0; }
/* The post-content wrapper is a layout-flow group carrying WP's default
   26.8px block-gap margin between children. Every homepage section already
   owns its vertical rhythm in this file (section paddings above), so remove
   the extra inter-section gap instead of letting it show as white slivers
   between full-bleed bands. */
main.ydh-main .wp-block-post-content > * { margin-top: 0; }
main.ydh-main h3.wp-block-heading { border-left: none; padding-left: 0; margin-top: 0; }
main.ydh-main .wp-block-separator { display: none; }

/* ---------- Type helpers ---------- */
body.ydh-page main {
    color: #3A3631;
    line-height: 1.65;
}

main.ydh-main h1,
main.ydh-main h2,
main.ydh-main h3,
main.ydh-main .ydh-card-t,
main.ydh-main .ydh-step-t,
main.ydh-main .ydh-pest-name,
main.ydh-main .ydh-faq-item summary {
    color: #14120F;
}

main.ydh-main a:not(.wp-block-button__link):not(.wp-element-button) {
    color: #A94A10 !important;
    font-weight: 500;
}

main.ydh-main a:not(.wp-block-button__link):not(.wp-element-button):hover {
    color: #A94A10 !important;   /* D3 fix: was #D2601A (3.87:1 on white); now 5.72:1 */
}

.ydh-eyebrow {
    color: #A94A10 !important;
    font-family: var(--ydh-font-body, 'Inter', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.4rem !important;
}

/* ---------- Hero (dark) ---------- */
main.ydh-main .ydh-hero {
    background:
        radial-gradient(900px 480px at 78% -12%, rgba(210, 96, 26, 0.22) 0%, rgba(210, 96, 26, 0) 60%),
        radial-gradient(700px 420px at 8% 105%, rgba(210, 96, 26, 0.10) 0%, rgba(210, 96, 26, 0) 55%),
        #16130F;
    color: #F7F5F2;
    padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}

main.ydh-main .ydh-hero .ydh-eyebrow {
    color: #F0A868 !important;
    position: relative;
    display: inline-block;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* v1 typography rule guard: v1 sets all h1..h6 to --pc-heading with
   !important. Dark homepage sections must re-win with importance. */
main.ydh-main .ydh-hero h1,
main.ydh-main .ydh-final-cta h2 {
    color: #F7F5F2 !important;
}

main.ydh-main .ydh-hero h1 {
    color: #F7F5F2;
    font-family: var(--ydh-font-display, 'Outfit', sans-serif);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: clamp(2.05rem, 4.6vw, 3.9rem);
    line-height: 1.12;
    max-width: 21ch;
    margin-left: auto;
    margin-right: auto;
}

main.ydh-main .ydh-hero .ydh-lede {
    color: #C9C2B8;
    max-width: 60ch;
    margin: 1.1rem auto 0;
    font-size: clamp(1rem, 1.4vw, 1.14rem);
}

main.ydh-main .ydh-hero-ctas { margin-top: 1.6rem; gap: 0.8rem; }
main.ydh-main .ydh-hero-ctas .wp-block-button { margin: 0; }

main.ydh-main .ydh-chips {
    margin-top: 1.4rem;
    gap: 0.55rem;
}

main.ydh-main .ydh-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid #2A231C;
    background: #221D18;
    color: #E8E3DC;
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

main.ydh-main .ydh-hero-media {
    margin-top: clamp(2rem, 4vw, 3.2rem);
    position: relative;
}

main.ydh-main .ydh-hero-card {
    max-width: 880px;
    margin: 0 auto;
    border-radius: 18px;
    overflow: hidden;
    transform: rotate(-1.4deg);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
    border: 1px solid #2A231C;
    background: #16130F;
}

main.ydh-main .ydh-hero-card .wp-block-image {
    margin: 0;
}

main.ydh-main .ydh-hero-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

main.ydh-main .ydh-hero-badge {
    position: absolute;
    right: clamp(0.75rem, 6vw, 5rem);
    top: -34px;
    transform: rotate(3deg);
    background: #FFFFFF;
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

main.ydh-main .ydh-hero-badge .wp-block-image { margin: 0; }
main.ydh-main .ydh-hero-badge img {
    display: block;
    width: 118px;
    height: auto;
}

/* ---------- Stat bar ---------- */
main.ydh-main .ydh-statbar {
    background: #F7F5F2;
    border-bottom: 1px solid #E8E3DC;
    padding: clamp(1.4rem, 3vw, 2.1rem) 0;
}

main.ydh-main .ydh-stats {
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: stretch;
}

main.ydh-main .ydh-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    text-align: center;
}

/* B2 (owner feedback): the figure (number + suffix) stays one line at every
   width. D1 (owner round 2): the whole figure renders at ONE size: the old
   suffix clamp made the "-" tail of the 24-48 range smaller than its number.
   The figure carries the size; number and suffix inherit it. The count-up JS
   only rewrites .ydh-stat-num's text, so it is unaffected. */
main.ydh-main .ydh-stat-fig {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.06em;
    white-space: nowrap;
    max-width: 100%;
    font-size: clamp(1.7rem, 2.6vw, 2.4rem);
}

/* Equal heights across the four items: the label hangs below a shared baseline
   because every item keeps the same two-row skeleton (figure row + label). */
main.ydh-main .ydh-stats {
    align-items: stretch;
}

main.ydh-main .ydh-stat {
    justify-content: flex-start;
}

/* Mobile stat rows (owner round 4): below 783px the four items wrap into two
   rows. Flex stretch equalises items within a row only, so an item whose
   figure is one short text line (30px, no suffix) rendered 34px shorter than
   an item whose figure row is 45px. Mechanism fix, not a hand-padded match:
   every item's figure box gets the same minimum height and centres its own
   figure inside it, so the two-row layout converges on one item height while
   desktop (every figure already 62px, all items 103px) is untouched. */
@media (max-width: 782px) {
    main.ydh-main .ydh-stat .ydh-stat-fig {
        min-height: 3.1em;
        align-items: center;
    }
}

main.ydh-main .ydh-stat-num {
    color: #A94A10;
    font-family: var(--ydh-font-display, 'Outfit', sans-serif);
    font-weight: 700;
    font-size: 1em;      /* D1: inherit the figure size, one size for the figure */
    letter-spacing: -0.02em;
    line-height: 1.1;
}

main.ydh-main .ydh-stat-suffix {
    color: #A94A10;
    font-family: var(--ydh-font-display, 'Outfit', sans-serif);
    font-weight: 700;
    font-size: 1em;      /* D1: inherit the figure size, one size for the figure */
}

main.ydh-main .ydh-stat-label {
    color: #6E6760;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
    max-width: 16ch;
    /* Stat rows (owner round 4): "hour response on most jobs" wraps to two
       lines at every width, so its item is the tallest in its flex row and
       align-stretch equalises within rows only, leaving the suffix-less
       second row 19px shorter on mobile. Every label box gets the same
       two-line floor, so one-line labels add the same box height and every
       item's content height is the identical figure + gap + label formula.
       Desktop height is unchanged (its row height already came from this
       label's two-line box). */
    min-height: 2.8em;
}

/* ---------- Section scaffolding ---------- */
main.ydh-main .ydh-why,
main.ydh-main .ydh-pests,
main.ydh-main .ydh-how {
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}

main.ydh-main .ydh-services {
    padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem);
}

main.ydh-main .ydh-section-inner > .ydh-eyebrow,
main.ydh-main .ydh-faq-inner > .ydh-eyebrow {
    text-align: center;
}

main.ydh-main .ydh-faq-inner .ydh-faq-list {
    margin-top: 1.2rem;
}

main.ydh-main .ydh-section-inner h2,
main.ydh-main .ydh-faq-inner h2 {
    font-family: var(--ydh-font-display, 'Outfit', sans-serif);
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    line-height: 1.18;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 30ch;
}

main.ydh-main .ydh-services-lede,
main.ydh-main .ydh-area-lede {
    text-align: center;
    color: #6E6760;
    max-width: 55ch;
    margin: 0.7rem auto 0;
}

/* ---------- Why us ---------- */
main.ydh-main .ydh-why-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

main.ydh-main .ydh-why-copy h2 {
    text-align: left !important;
    max-width: 26ch;
    margin-left: 0 !important;
}

main.ydh-main .ydh-why-copy > .ydh-eyebrow { text-align: left; }

main.ydh-main .ydh-why-copy p {
    color: #3A3631;
    margin-top: 1rem;
    max-width: 55ch;
}

main.ydh-main .ydh-checks {
    list-style: none;
    padding: 0;
    margin: 1.3rem 0 0;
    display: grid;
    gap: 0.75rem;
}

main.ydh-main .ydh-checks li {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    color: #3A3631;
    font-weight: 500;
}

main.ydh-main .ydh-check-dot {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #FDF1E7;
    color: #A94A10;
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 0.1rem;
}

main.ydh-main .ydh-why-ctas { margin-top: 1.6rem; }

main.ydh-main .ydh-why-img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(20, 18, 15, 0.14);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

main.ydh-main .ydh-why-img { margin: 0; }

/* ---------- Services ---------- */
main.ydh-main .ydh-cards {
    margin-top: clamp(1.8rem, 3.5vw, 2.8rem);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.6rem);
}

main.ydh-main .ydh-card {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #E8E3DC;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 320ms ease, border-color 320ms ease;
}

main.ydh-main .ydh-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(20, 18, 15, 0.12);
    border-color: #E0CBAF;
}

main.ydh-main .ydh-card-media {
    display: block;
    overflow: hidden;
}

main.ydh-main .ydh-card-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 450ms ease;
}

main.ydh-main .ydh-card:hover .ydh-card-media img {
    transform: scale(1.03);
}

main.ydh-main .ydh-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.15rem 1.25rem 1.25rem;
}

main.ydh-main .ydh-card-t {
    font-family: var(--ydh-font-display, 'Outfit', sans-serif);
    font-weight: 600;
    font-size: 1.12rem;
    color: #14120F;
}

main.ydh-main .ydh-card-d {
    color: #6E6760;
    font-size: 0.92rem;
    line-height: 1.6;
}

main.ydh-main .ydh-card-more {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #A94A10;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 0.35rem;
    transition: gap 320ms ease;
}

main.ydh-main .ydh-card:hover .ydh-card-more {
    gap: 0.55rem;
}

/* ---------- Pests grid ---------- */
main.ydh-main .ydh-pest-grid {
    margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.8rem, 1.6vw, 1.2rem);
}

/* Pest tiles and city pills fill their grid track: as constrained-group
   children they hugged their label's content instead (pest tiles 87px and
   Bed bugs 90px inside 265px tracks, city pills 58 to 130px inside 187px
   tracks), so widths were unequal inside each grid. Owner directive: equal
   height per row AND equal width within the grid. */
main.ydh-main .ydh-pest,
main.ydh-main .ydh-city {
    width: 100%;
    justify-self: stretch;
}

main.ydh-main .ydh-pest {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    background: #FFFFFF;
    border: 1px solid #E8E3DC;
    border-radius: 14px;
    padding: 1.2rem 0.6rem 1rem;
    text-decoration: none;
    transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 320ms ease, border-color 320ms ease;
}

main.ydh-main .ydh-pest:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(20, 18, 15, 0.10);
    border-color: #E0CBAF;
}

main.ydh-main .ydh-pest-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: #F7F5F2;
    border: 1px solid #E8E3DC;
}

main.ydh-main .ydh-pest-ico img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    transition: transform 320ms ease;
}

/* B3 (owner feedback): uniform cards across the three grids.
   ROOT CAUSE of "first card taller than the rest": WordPress core's layout
   styles give every child AFTER the first of a layout-constrained group
   margin-top: var(--wp--style--block-gap) (26.8px here). The grids
   (.ydh-cards, .ydh-pest-grid, .ydh-city-grid) are such groups and their grid
   children carry that margin INSIDE their row track, so children 2..n gained
   26.8px of extra height where child 1 had none, and the margin inside the
   pest tiles also shifted the icon wrap enough to disturb track sizing
   (87px vs 90px widths). One mechanism, one fix: zero the inter-child margin
   on the grid children so the grid's own gap is the only spacing, and stretch
   children to their track so every card in a row is the same height. Width
   comes from the minmax(0, 1fr) columns, already equal. */
main.ydh-main .ydh-cards > *,
main.ydh-main .ydh-pest-grid > *,
main.ydh-main .ydh-city-grid > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

main.ydh-main .ydh-card,
main.ydh-main .ydh-pest,
main.ydh-main .ydh-city {
    height: 100%;
    box-sizing: border-box;
}

/* City pills: equal width inside the grid. The constrained layout centers
   children with auto margins, so each pill hugged its label (58 to 130px wide
   in the same grid). Fill the track instead, like the other two grids. */
main.ydh-main .ydh-city {
    width: 100%;
    justify-self: stretch;
}

/* Icons sit on white (#FFFFFF) tiles inside tiles whose section background
   differs: object-fit keeps the 160px square artwork whole, never cropped or
   squashed, when tile heights equalise. */
main.ydh-main .ydh-pest-ico img { object-fit: contain; }

main.ydh-main .ydh-pest:hover .ydh-pest-ico img {
    transform: scale(1.08);
}

main.ydh-main .ydh-pest-name {
    color: #14120F;
    font-weight: 600;
    font-size: 0.95rem;
}

main.ydh-main .ydh-pests-cta {
    margin-top: 1.6rem;
    color: #6E6760;
}

/* ---------- How it works ---------- */
main.ydh-main .ydh-how {
    background: #F7F5F2;
    border-top: 1px solid #E8E3DC;
    border-bottom: 1px solid #E8E3DC;
}

main.ydh-main .ydh-steps {
    margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

main.ydh-main .ydh-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    background: #FFFFFF;
    border: 1px solid #E8E3DC;
    border-radius: 14px;
    padding: 1.3rem 1.2rem 1.25rem;
}

main.ydh-main .ydh-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #D2601A;
    color: var(--ydh-ink, #14120F);   /* D1 fix: ink on #D2601A = 4.83:1 (was white, 3.87:1) */
    font-family: var(--ydh-font-display, 'Outfit', sans-serif);
    font-weight: 700;
    font-size: 0.95rem;
}

main.ydh-main .ydh-step-t {
    color: #14120F;
    font-family: var(--ydh-font-display, 'Outfit', sans-serif);
    font-weight: 600;
    font-size: 1.05rem;
}

main.ydh-main .ydh-step-d {
    color: #6E6760;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ---------- Reviews ---------- */
main.ydh-main .ydh-reviews {
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}

main.ydh-main .ydh-reviews-trust {
    color: #6E6760;
    margin-top: 0.7rem;
}

/* ---------- Service area ---------- */
main.ydh-main .ydh-area {
    padding: clamp(3rem, 6vw, 4.5rem) 0;
    background: #FDF1E7;
    border-top: 1px solid #E8E3DC;
}

main.ydh-main .ydh-city-grid {
    margin-top: clamp(1.6rem, 3vw, 2.2rem);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.7rem;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

main.ydh-main .ydh-city {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid #E8E3DC;
    border-radius: 999px;
    padding: 0.55rem 0.8rem;
    color: #A94A10 !important;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: transform 320ms ease, box-shadow 320ms ease, border-color 320ms ease;
}

main.ydh-main .ydh-city:hover {
    transform: translateY(-2px);
    border-color: #E0CBAF;
    box-shadow: 0 8px 20px rgba(20, 18, 15, 0.08);
}

main.ydh-main .ydh-area-ctas { margin-top: 1.6rem; }

/* ---------- FAQ ---------- */
main.ydh-main .ydh-faq {
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}

main.ydh-main .ydh-faq-inner { max-width: 840px; }

main.ydh-main .ydh-faq-list {
    margin-top: clamp(1.6rem, 3vw, 2.2rem);
    display: grid;
    gap: 0.7rem;
}

main.ydh-main .ydh-faq-item {
    background: #FFFFFF;
    border: 1px solid #E8E3DC;
    border-radius: 14px;
    margin: 0;
}

main.ydh-main .ydh-faq-item[open] {
    border-color: #E0CBAF;
}

main.ydh-main .ydh-faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.25rem;
    font-family: var(--ydh-font-body, 'Inter', sans-serif);
    font-weight: 600;
    font-size: 1rem;
    color: #14120F;
    border-radius: 14px;
}

main.ydh-main .ydh-faq-item summary::-webkit-details-marker { display: none; }

main.ydh-main .ydh-faq-item summary::after {
    content: '+';
    flex: 0 0 auto;
    color: #A94A10;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1;
    transition: transform 320ms ease;
}

main.ydh-main .ydh-faq-item[open] summary::after {
    transform: rotate(45deg);
}

main.ydh-main .ydh-faq-item summary:hover { color: #A94A10; }

main.ydh-main .ydh-faq-item p {
    color: #3A3631;
    padding: 0 1.25rem 1.15rem;
    margin: 0;
}

/* ---------- Final CTA (dark) ---------- */
main.ydh-main .ydh-final-cta {
    background:
        radial-gradient(800px 400px at 20% 0%, rgba(210, 96, 26, 0.18) 0%, rgba(210, 96, 26, 0) 55%),
        #16130F;
    color: #F7F5F2;
    /* Symmetric vertical padding: with the heading gone the band must read as
       a deliberate closing band, not a strip with buttons crammed in. */
    padding: clamp(3.2rem, 6vw, 4.8rem) 0;
}

main.ydh-main .ydh-final-cta h2 {
    color: #F7F5F2;
    font-family: var(--ydh-font-display, 'Outfit', sans-serif);
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    max-width: 28ch;
    margin-left: auto;
    margin-right: auto;
}

main.ydh-main .ydh-final-lede {
    color: #C9C2B8;
    max-width: 55ch;
    margin: 0.8rem auto 0;
}

main.ydh-main .ydh-final-ctas { margin-top: 1.5rem; }

/* ---------- Scroll reveal + motion ---------- */
/* Hidden states only apply when JS is live (html.ydh-js, set by
   home-front.js). If JS never loads, nothing is ever hidden. */
html.ydh-js .ydh-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
}

html.ydh-js .ydh-reveal.ydh-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered grids: children rise one by one (60ms delays set as
   --ydh-d per child by home-front.js) */
html.ydh-js .ydh-stagger > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
    transition-delay: var(--ydh-d, 0ms);
}

html.ydh-js .ydh-stagger.ydh-in-view > * {
    opacity: 1;
    transform: translateY(0);
}

.ydh-float {
    animation: ydhFloat 7s ease-in-out infinite alternate;
}

@keyframes ydhFloat {
    from { transform: rotate(3deg) translateY(0); }
    to   { transform: rotate(3.8deg) translateY(-7px); }
}

.ydh-glow {
    animation: ydhGlow 12s ease-in-out infinite alternate;
}

@keyframes ydhGlow {
    from { transform: translateX(0) scale(1); }
    to   { transform: translateX(-4%) scale(1.06); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    main.ydh-main .ydh-why-grid { grid-template-columns: 1fr; }
    main.ydh-main .ydh-why-media { order: -1; }
    main.ydh-main .ydh-why-media img { aspect-ratio: 16 / 10; }
    main.ydh-main .ydh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    main.ydh-main .ydh-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    main.ydh-main .ydh-cards { grid-template-columns: 1fr; }
    main.ydh-main .ydh-pest-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
    main.ydh-main .ydh-pest { padding: 0.85rem 0.25rem 0.7rem; border-radius: 12px; }
    main.ydh-main .ydh-pest-ico { width: 46px; height: 46px; }
    main.ydh-main .ydh-pest-ico img { width: 28px; height: 28px; }
    main.ydh-main .ydh-pest-name { font-size: 0.76rem; white-space: nowrap; }
    main.ydh-main .ydh-steps { grid-template-columns: 1fr; }
    main.ydh-main .ydh-hero-card { transform: none; }
    main.ydh-main .ydh-hero-badge {
        position: static;
        transform: rotate(3deg);
        margin: 0.9rem auto 0;
        display: table;
    }
    main.ydh-main .ydh-stats { gap: 1.2rem; }
    main.ydh-main .ydh-stat { text-align: center; }
}

/* Reduced motion: reveal never hides, stagger never hides, every
   animation/transition killed, everything visible */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
    html.ydh-js .ydh-reveal,
    html.ydh-js .ydh-stagger > * {
        opacity: 1 !important;
        transform: none !important;
    }
    .ydh-float, .ydh-glow { animation: none !important; }
}