.hero-headline { background-color: #EEF4EE; text-align: center; padding: 48px 0 16px; }
.hero-headline h1 { box-sizing: border-box; display: inline-block; color: #2D3A2E; font-family: "Helvetica Neue", system-ui, sans-serif; font-size: 28px; font-weight: 300; letter-spacing: -0.02em; line-height: 32px; margin: 0 auto; }

.bento-section { background-color: #EEF4EE; padding: 12px 0 8px; font-size: 12px; line-height: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; }
.bento-row { margin-bottom: 10px; }
.bento-row:last-child { margin-bottom: 0; }
.bento-col { margin-bottom: 12px; padding-right: 5px; padding-left: 5px; }
.bento-row .bento-col:last-child { margin-bottom: 0; }
.bento-link { display: block; color: inherit !important; text-decoration: none !important; }
.bento-tile { border-radius: 16px; overflow: hidden; background-size: cover; background-position: center; position: relative; display: flex; box-shadow: 0 0 0 rgba(0,0,0,0); transform: translateY(0); transition: transform .28s ease, box-shadow .28s ease, filter .28s ease; }
.bento-tile:before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.22) 48%, rgba(255,255,255,0) 78%); opacity: 0; transform: translateX(-38%); transition: transform .45s ease, opacity .45s ease; pointer-events: none; z-index: 1; }

.bento-link:focus-visible {
    outline: 2px solid #2D3A2E;
    outline-offset: 3px;
    transform: translateY(-2px);
}

.bento-tile-right::after,
.bento-tile-companion::after,
.bento-tile-bottomlabel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.00) 35%, rgba(0,0,0,0.35) 100%);
    pointer-events: none;
    z-index: 1;
}

.overlay-dental,
.overlay-label,
.overlay-subtitle,
.overlay-detail,
.overlay-small,
.bento-tile-text-main,
.bento-tile-text-note,
.bento-tile-text-pink { position: relative; z-index: 2; transition: transform .24s ease, opacity .24s ease; }

@media (hover: hover) and (pointer: fine) {
    .bento-link:hover,
    .bento-link:focus,
    .bento-link:focus-visible {
        transform: translateY(-4px);
        box-shadow: 0 18px 32px rgba(28, 41, 34, 0.14);
        filter: saturate(1.03);
    }

    .bento-link:hover:before,
    .bento-link:focus:before,
    .bento-link:focus-visible:before {
        opacity: 1;
        transform: translateX(38%);
    }

    .bento-link:hover .overlay-dental,
    .bento-link:hover .overlay-label,
    .bento-link:hover .overlay-subtitle,
    .bento-link:hover .overlay-detail,
    .bento-link:hover .overlay-small,
    .bento-link:hover .bento-tile-text-main,
    .bento-link:hover .bento-tile-text-note,
    .bento-link:hover .bento-tile-text-pink,
    .bento-link:focus .overlay-dental,
    .bento-link:focus .overlay-label,
    .bento-link:focus .overlay-subtitle,
    .bento-link:focus .overlay-detail,
    .bento-link:focus .overlay-small,
    .bento-link:focus .bento-tile-text-main,
    .bento-link:focus .bento-tile-text-note,
    .bento-link:focus .bento-tile-text-pink,
    .bento-link:focus-visible .overlay-dental,
    .bento-link:focus-visible .overlay-label,
    .bento-link:focus-visible .overlay-subtitle,
    .bento-link:focus-visible .overlay-detail,
    .bento-link:focus-visible .overlay-small,
    .bento-link:focus-visible .bento-tile-text-main,
    .bento-link:focus-visible .bento-tile-text-note,
    .bento-link:focus-visible .bento-tile-text-pink {
        transform: translateY(-2px);
    }
}

.bento-link:active {
    transform: translateY(-1px) scale(.99);
}

.bento-row1 .bento-tile { padding: 16px; }
.bento-row1 .bento-tile-left { min-height: 176px; align-items: flex-start; justify-content: flex-start; }
.bento-row1 .bento-tile-right { min-height: 176px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 6px; padding: 18px; }

.bento-row2 .bento-tile-img,
.bento-row3 .bento-tile-img { min-height: 185px; align-items: flex-end; justify-content: center; padding: 0 10px 10px; }
.bento-row2 .bento-tile-wide,
.bento-row3 .bento-tile-wide { min-height: 148px; }

.overlay-dental { box-sizing: border-box; color: #3B3B67; display: inline-block; font-family: "Helvetica Neue", system-ui, sans-serif; font-size: 12px; font-weight: 500; line-height: 15px; max-width: 185px; }
.overlay-label { box-sizing: border-box; color: #FFFFFF; display: inline-block; font-family: "Helvetica Neue", system-ui, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; line-height: 14px; text-transform: uppercase; }
.overlay-subtitle { box-sizing: border-box; color: #FFFFFF; display: inline-block; font-family: "Helvetica Neue", system-ui, sans-serif; font-size: 16px; font-weight: 500; line-height: 18px; max-width: 180px; }
.overlay-detail { box-sizing: border-box; color: #FFFFFF; display: inline-block; font-family: "Helvetica Neue", system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: 16px; max-width: 180px; }

.bento-tile-companion .overlay-small,
.bento-tile-bottomlabel .overlay-small { position: relative; z-index: 2; box-sizing: border-box; color: #FFFFFF; font-family: "Helvetica Neue", system-ui, sans-serif; font-size: 16px; font-weight: 400; line-height: 20px; text-align: center; margin-bottom: 0px; }

.bento-tile-text { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px 18px; gap: 8px; text-align: center; }
.bento-tile-text-main { box-sizing: border-box; color: #3F7238; font-family: "Helvetica Neue", system-ui, sans-serif; font-size: 20px; font-weight: 300; line-height: 1.2; text-align: center; margin: 0; max-width: 270px; }
.bento-tile-text-note { box-sizing: border-box; color: #3F7238; font-family: "Helvetica Neue", system-ui, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.3; text-align: center; margin: 0; max-width: 240px; }
.bento-tile-text-pink { box-sizing: border-box; color: #B24360; font-family: "Helvetica Neue", system-ui, sans-serif; font-size: 20px; font-weight: 300; line-height: 1.2; text-align: center; margin: 0; max-width: 270px; }

.brand-statement { background-color: #EEF4EE; text-align: center; padding: 16px 15px 24px; }
.brand-statement p { align-content: center; box-sizing: border-box; color: #4A5548; display: inline-block; font-family: "Helvetica Neue", system-ui, sans-serif; font-size: 18px; font-weight: 300; line-height: 22px; max-width: 320px; margin: 0 auto 16px; text-align: center; white-space: normal; }
.brand-statement .tagline { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-style: italic; font-size: 24px; line-height: 30px; color: #2D3A2E; }

.trustpilot-wrapper { margin-bottom: 32px; }

@media (min-width: 768px) {
    .hero-headline { padding: clamp(48px, 10vh, 120px) 0 16px; }
    .hero-headline h1 { font-size: 48px; line-height: 58px; }

    .bento-section { padding: 32px 0 16px; }
    .bento-row { margin-bottom: 10px; }
    .bento-col { margin-bottom: 0; }

    .bento-row1 .bento-tile { padding: 24px; }
    .bento-row1 .bento-tile-left { min-height: 300px; }
    .bento-row1 .bento-tile-right { min-height: 300px; gap: 8px; padding-right: 48px; justify-content: center; }

    .bento-row2 .bento-tile-img,
    .bento-row3 .bento-tile-img { min-height: 270px; padding: 0; }
    .bento-row2 .bento-tile-wide,
    .bento-row3 .bento-tile-wide { min-height: 270px; }

    .overlay-dental { font-size: 25px; line-height: 28px; max-width: 360px; }
    .overlay-label { font-size: 25px; line-height: 30px; }
    .overlay-subtitle { font-size: 22px; line-height: 22px; max-width: 296px; }
    .overlay-detail { font-size: 20px; line-height: 20px; max-width: 296px; }

    .bento-tile-companion .overlay-small,
    .bento-tile-bottomlabel .overlay-small {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 18px;
        min-height: 49px;
        font-size: 25px;
        line-height: 29px;
        margin-bottom: 0;
    }

    .bento-tile-text { padding: 32px 40px; gap: 12px; }
    .bento-tile-text-main { font-size: 40px; line-height: 1.3; max-width: none; }
    .bento-tile-text-note { font-size: 24px; line-height: 1.3; max-width: none; }
    .bento-tile-text-pink { font-size: 40px; line-height: 1.3; max-width: none; }

    .brand-statement { padding: 8px 15px 24px; }
    .brand-statement p { font-size: 25px; line-height: 28px; max-width: 640px; white-space: pre; }
    .brand-statement .tagline { font-size: 36px; line-height: 44px; }
}

@media (max-width: 767px) {
    .bento-col-exclusive { display: none; }
}

@media (max-width: 480px) {
    .hero-headline { padding: 32px 0 12px; }
    .bento-section { padding: 10px 0 6px; }
    .bento-row { margin-bottom: 10px; }
    .bento-row1 .bento-tile { padding: 8px; }
    .bento-row1 .bento-tile-left { min-height: 160px; }
    .bento-row1 .bento-tile-right { min-height: 160px; padding: 16px; }
    .bento-row2 .bento-tile-img,
    .bento-row3 .bento-tile-img { min-height: 185px; padding: 0 8px 8px; }
    .bento-row2 .bento-tile-wide,
    .bento-row3 .bento-tile-wide { min-height: 136px; }
    .overlay-dental { font-size: 11px; line-height: 14px; max-width: 160px; }
    .overlay-label { font-size: 11px; line-height: 13px; }
    .overlay-subtitle { font-size: 15px; line-height: 17px; max-width: 160px; }
    .overlay-detail { font-size: 13px; line-height: 15px; max-width: 160px; }
    .bento-tile-companion .overlay-small,
    .bento-tile-bottomlabel .overlay-small { font-size: 14px; line-height: 18px; margin-bottom: 2px; }
    .bento-tile-text { padding: 18px 16px; gap: 6px; }
    .bento-tile-text-main { font-size: 18px; }
    .bento-tile-text-note { font-size: 12px; }
    .bento-tile-text-pink { font-size: 18px; }
    .brand-statement { padding: 14px 12px 20px; }
    .brand-statement p { font-size: 16px; line-height: 20px; max-width: 280px; }
    .brand-statement .tagline { font-size: 22px; line-height: 28px; }
}