/* Homepage composition */
.home .hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, var(--color-paper) 0%, var(--color-paper) 39%, rgba(255, 253, 250, .88) 48%, rgba(255, 255, 255, .10) 70%), var(--color-paper);
}

.home .hero::before {
    position: absolute;
    top: 3rem;
    left: max(var(--gutter), calc((100vw - var(--container)) / 2 - 6.5rem));
    content: "A";
    color: rgba(54, 176, 164, .06);
    font-family: var(--font-heading);
    font-size: clamp(14rem, 24vw, 25rem);
    line-height: .7;
    pointer-events: none;
}

.hero__inner {
    min-height: 40.625rem;
    display: grid;
    grid-template-columns: .9fr 1.25fr;
    align-items: center;
    gap: clamp(2.75rem, 6vw, 5.625rem);
    padding-block: 5.75rem 4.875rem;
}

.hero__copy {
    position: relative;
    z-index: 2;
}

.hero h1 {
    margin-bottom: 1.5rem;
    font-size: clamp(4rem, 7.1vw, 7.25rem);
    letter-spacing: -.055em;
}

.hero h1 .sub {
    display: block;
    margin-top: .2rem;
    color: var(--color-brand-strong);
    font-size: .53em;
    line-height: .95;
}

.hero__lead {
    max-width: 31rem;
    margin-bottom: 1.625rem;
    font-size: 1.18rem;
    line-height: 1.45;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 2.75rem;
}

.hero__facts {
    display: grid;
    grid-template-columns: .78fr .86fr 1.36fr;
    column-gap: 1.375rem;
}

.fact {
    color: var(--color-copy-strong);
    font-size: .79rem;
    font-weight: 700;
    line-height: 1.35;
}

.fact strong {
    display: block;
    margin-bottom: .125rem;
    color: var(--color-brand-strong);
    font-family: var(--font-heading);
    font-size: 1.38rem;
    font-weight: 600;
}

.fact--manufacturer strong {
    white-space: nowrap;
}

.hero__visual {
    position: relative;
    z-index: 1;
}

.hero__image {
    position: relative;
    overflow: hidden;
    margin: 0;
    border: .0625rem solid var(--surface-line);
    border-radius: 2.5rem .75rem 2.5rem .75rem;
    background: var(--color-white);
    box-shadow: var(--shadow-medium);
}

.hero__image img {
    width: 100%;
    aspect-ratio: 1.52 / 1;
    object-fit: cover;
}

.hero__image::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    content: "";
    box-shadow: inset 0 0 0 .0625rem rgba(255, 255, 255, .28);
    pointer-events: none;
}

.note {
    position: absolute;
    z-index: 3;
    max-width: 15.3rem;
    padding: 1rem 1.2rem;
    border: .0625rem solid var(--surface-line-strong);
    border-radius: .5rem;
    color: var(--color-note-ink);
    background: var(--color-note);
    box-shadow: var(--shadow-medium);
    font-family: var(--font-hand);
    font-size: 1rem;
    line-height: 1.25;
    transform: rotate(-2.5deg);
}

.note--hero {
    top: -1.75rem;
    right: -.5rem;
}

.hand-heart {
    display: inline-block;
    margin-left: .25rem;
    color: var(--color-brand);
    font-family: var(--font-hand);
    font-size: 1.55em;
    line-height: .8;
    transform: rotate(-7deg);
}

.intro {
    position: relative;
    overflow: hidden;
}

.intro::after {
    position: absolute;
    right: 1.5rem;
    bottom: -1.5rem;
    content: "123";
    color: rgba(54, 176, 164, .045);
    font-family: var(--font-heading);
    font-size: clamp(10rem, 20vw, 19rem);
    line-height: .8;
    pointer-events: none;
}

.intro__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(3rem, 8vw, 7.5rem);
    align-items: start;
}

.intro__text {
    max-width: 42rem;
}

.intro__text .large {
    margin-bottom: 1.5rem;
    font-family: var(--font-heading);
    font-size: clamp(1.28rem, 2.2vw, 1.65rem);
    line-height: 1.45;
}

.intro__aside--soft {
    padding: 1.875rem 2rem;
    border: .0625rem solid var(--surface-line);
    border-radius: var(--radius-card);
    background: linear-gradient(180deg, var(--color-surface-soft-top) 0%, var(--color-surface-soft-bottom) 100%);
    box-shadow: var(--shadow-soft);
}

.intro__aside strong {
    display: block;
    margin-bottom: .75rem;
    color: var(--color-brand-strong);
    font-family: var(--font-heading);
    font-size: 1.55rem;
    font-weight: 600;
}

.anniversary {
    display: inline-flex;
    margin-top: .75rem;
    padding: .625rem .875rem;
    border-radius: var(--radius-pill);
    color: var(--color-brand-strong);
    background: var(--color-brand-soft);
    font-size: .88rem;
    line-height: 1.3;
}

.audiences {
    background: var(--color-brand-pale);
}

.audience-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.125rem;
}

.audience,
.benefit,
.route {
    border: .0625rem solid var(--surface-line);
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--shadow-soft);
}

.audience {
    min-height: 17.8rem;
    padding: 2.125rem 1.75rem 2rem;
}

.audience__icon {
    width: 2.8rem;
    height: 2.8rem;
    margin-bottom: 1.875rem;
    color: var(--color-brand-strong);
}

.audience__icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
}

.audience h3 {
    margin-bottom: .6rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.28;
}

.audience p {
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: .9rem;
    line-height: 1.55;
}

.benefits {
    background: var(--color-white);
}

.benefit-intro {
    max-width: 56rem;
    margin-bottom: 3.25rem;
    color: var(--color-muted);
    font-size: 1.04rem;
}

.benefit-intro p:last-child {
    margin-bottom: 0;
}

.benefit-grid--reasons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.benefit-grid--reasons .benefit {
    min-height: 15.625rem;
    padding: 1.75rem 1.625rem 1.625rem;
}

.benefit__mark {
    min-height: 2.125rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1.25rem;
}

.benefit__symbol {
    color: var(--color-brand-strong);
    font-size: 1.5rem;
}

.benefit__symbol--svg {
    display: inline-flex;
    width: 2.125rem;
    height: 2.125rem;
    align-items: center;
    justify-content: center;
}

.benefit__symbol--svg svg {
    width: 1.94rem;
    height: 1.94rem;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.benefit h3 {
    margin-bottom: .6rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.42;
}

.benefit p {
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: .9rem;
    line-height: 1.5;
}

.story {
    color: var(--color-white);
    background: var(--color-brand-strong);
}

.story__grid {
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    align-items: start;
    gap: clamp(3rem, 7vw, 7rem);
}

.story .eyebrow,
.story h2 {
    color: var(--color-white);
}

.story__copy {
    padding-top: .5rem;
}

.story__copy p {
    color: var(--color-story-copy);
}

.story__copy .button {
    margin-top: 1.25rem;
    border-color: rgba(255, 255, 255, .75);
    color: var(--color-white);
}

.story__side {
    display: grid;
    gap: 2.125rem;
    align-self: stretch;
}

.story__visual {
    position: relative;
    padding: 0 1.75rem 1.125rem;
}

.story__visual img {
    width: 100%;
    max-height: 24rem;
    object-fit: contain;
    border-radius: 2rem .625rem 2rem .625rem;
    background: var(--color-white);
    box-shadow: var(--shadow-strong);
}

.story__quote {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 15rem;
    padding: .9rem 1.1rem;
    border: .0625rem solid var(--surface-line-strong);
    border-radius: .45rem;
    color: var(--color-note-ink);
    background: var(--color-note);
    box-shadow: var(--shadow-medium);
    font-family: var(--font-hand);
    line-height: 1.25;
    transform: rotate(2.2deg);
}

.story__advisory {
    margin: 0 1.75rem;
    padding: 1.5rem 1.625rem;
    border: .0625rem solid rgba(255, 255, 255, .18);
    border-radius: 1.5rem .5rem 1.5rem .5rem;
    background: rgba(255, 255, 255, .075);
}

.story__advisory strong {
    display: block;
    margin-bottom: .5rem;
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 600;
}

.story__advisory p {
    margin-bottom: .75rem;
    color: var(--color-story-muted);
}

.story__advisory a {
    color: var(--color-white);
    font-weight: 800;
    text-underline-offset: .3rem;
}

.routes {
    background: var(--color-white);
}

.route-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .875rem;
    align-items: stretch;
}

.route {
    padding: 2rem 1.8rem;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.route--brand {
    background: var(--color-brand-soft);
}

.route:hover {
    transform: translateY(-.1875rem);
    box-shadow: var(--shadow-medium);
}

.route h3 {
    margin-bottom: .75rem;
}

.route p {
    color: var(--color-muted);
}

.route a {
    color: var(--color-brand-strong);
    font-weight: 800;
}

.family {
    padding-block: 4rem 4.375rem;
    background: var(--color-family-bg);
}

.family__head {
    margin-bottom: 2.125rem;
}

.family__title {
    margin: 0;
    font-size: clamp(1.9rem, 3vw, 2.65rem);
}

.family-projects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.family-project {
    position: relative;
    display: flex;
    min-height: 9.375rem;
    align-items: center;
    gap: 1.5rem;
    padding: 1.375rem 1.5625rem;
    overflow: hidden;
    border: .0625rem solid var(--surface-line);
    border-radius: var(--radius-card-small);
    background: var(--color-white);
    box-shadow: 0 .5rem 1.375rem rgba(31, 86, 79, .045);
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.family-project::after {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: .25rem;
    content: "";
    background: var(--color-brand);
}

.family-project--bee::after {
    background: var(--color-family-bee);
}

.family-project--centre::after {
    background: var(--color-family-centre);
}

.family-project:hover {
    transform: translateY(-.1875rem);
    box-shadow: var(--shadow-medium);
}

.family-project__logo {
    flex: 0 0 5.625rem;
    width: 5.625rem;
    height: 5.625rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: 0 .375rem 1rem rgba(31, 86, 79, .05);
}

.family-project__logo img {
    width: 5.5rem;
    height: 5.5rem;
    object-fit: contain;
}

.family-project__name {
    font-family: var(--font-heading);
    font-size: 1.16rem;
    font-weight: 600;
    line-height: 1.28;
}

@media (max-width: 70rem) {
    .audience-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .benefit-grid--reasons {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 57.5rem) {
    .hero__inner,
    .intro__grid,
    .story__grid {
        grid-template-columns: 1fr;
    }

    .hero__inner {
        min-height: 0;
        padding-top: 6rem;
    }

    .hero__visual {
        max-width: 44rem;
    }

    .story__visual,
    .story__advisory {
        margin-inline: 0;
    }

    .story__visual {
        padding-inline: 0;
    }

    .route-grid {
        grid-template-columns: 1fr;
    }

    .family-projects {
        grid-template-columns: 1fr;
    }

    .family-project {
        min-height: 7.875rem;
    }
}

@media (max-width: 41.25rem) {
    .home .hero::before {
        left: -.5rem;
    }

    .hero h1 {
        font-size: clamp(3.7rem, 18vw, 5.4rem);
    }

    .hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hero__facts,
    .audience-grid,
    .benefit-grid--reasons {
        grid-template-columns: 1fr;
    }

    .fact--manufacturer strong {
        white-space: normal;
    }

    .note--hero {
        right: .25rem;
    }

    .anniversary {
        display: inline-block;
        border-radius: 1.125rem .375rem 1.125rem .375rem;
    }

    .story__quote {
        position: relative;
        right: auto;
        bottom: auto;
        margin: -.5rem .625rem 0 auto;
    }

    .family-project {
        gap: 1.125rem;
        padding: 1.125rem 1.25rem;
    }

    .family-project__logo {
        flex-basis: 4.75rem;
        width: 4.75rem;
        height: 4.75rem;
    }

    .family-project__logo img {
        width: 4.625rem;
        height: 4.625rem;
    }
}

/* V29: mobile content density
   Desktop keeps the approved card system. On small screens the same
   information switches to compact horizontal/list-like cards so scanning
   does not turn into excessive vertical scrolling. */
@media (max-width: 41.25rem) {
    .home .section {
        padding-block: 3.75rem;
    }

    .home .section-head {
        margin-bottom: 2rem;
    }

    /* The detailed audience cards already contain the same audience groups,
       so the long summary sentence is redundant on a narrow screen. */
    .audiences .section-head > p {
        display: none;
    }

    .audience-grid {
        gap: .75rem;
    }

    .audience {
        min-height: 0;
        display: grid;
        grid-template-columns: 2.5rem minmax(0, 1fr);
        column-gap: .875rem;
        row-gap: .25rem;
        align-items: start;
        padding: 1rem 1.125rem;
        border-radius: var(--radius-card-small);
        box-shadow: 0 .375rem 1rem rgba(31, 86, 79, .045);
    }

    .audience__icon {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 2.25rem;
        height: 2.25rem;
        margin: .05rem 0 0;
    }

    .audience h3 {
        grid-column: 2;
        margin: 0;
        font-size: .94rem;
        line-height: 1.3;
    }

    .audience p {
        grid-column: 2;
        margin: 0;
        font-size: .84rem;
        line-height: 1.45;
    }

    .benefit-intro {
        margin-bottom: 2rem;
    }

    .benefit-grid--reasons {
        gap: .6875rem;
    }

    .benefit-grid--reasons .benefit {
        min-height: 0;
        display: grid;
        grid-template-columns: 2rem minmax(0, 1fr);
        column-gap: .75rem;
        row-gap: .2rem;
        align-items: start;
        padding: .9375rem 1rem;
        border-radius: var(--radius-card-small);
        box-shadow: 0 .375rem 1rem rgba(31, 86, 79, .04);
    }

    .benefit__mark {
        grid-column: 1;
        grid-row: 1 / span 2;
        min-height: 0;
        margin: .05rem 0 0;
    }

    .benefit__symbol {
        font-size: 1.18rem;
        line-height: 1;
    }

    .benefit__symbol--svg {
        width: 1.55rem;
        height: 1.55rem;
    }

    .benefit__symbol--svg svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .benefit h3 {
        grid-column: 2;
        margin: 0;
        font-size: .94rem;
        line-height: 1.34;
    }

    .benefit p {
        grid-column: 2;
        margin: 0;
        font-size: .82rem;
        line-height: 1.43;
    }
}

/* RWS integration: editor-managed homepage text keeps the approved composition. */
.home-editor-content > :first-child {
    margin-top: 0;
}

.home-editor-content > :last-child {
    margin-bottom: 0;
}

.intro__text .home-editor-content h2 {
    margin-bottom: 1.375rem;
}

.intro__text .home-editor-content h2 + p {
    margin-bottom: 1.5rem;
    font-family: var(--font-heading);
    font-size: clamp(1.28rem, 2.2vw, 1.65rem);
    line-height: 1.45;
}

.intro__aside .home-editor-content,
.story__advisory .home-editor-content {
    margin-bottom: .875rem;
}

.benefit-intro .home-editor-content p {
    margin-bottom: 0;
}

.story__copy .home-editor-content h2 {
    margin-bottom: 1.5rem;
}

.story__copy .home-editor-content p:last-child {
    margin-bottom: 0;
}