.hero {
    position: relative;
    overflow: hidden;
    background: #ff4a35;
}

.hero-slides {
    position: relative;
    aspect-ratio: 1920 / 751;
}

/* .hero-slide es un <picture> (contenedor de un <source> mobile opcional mas el
   <img> de desktop, ver home.html) -- object-fit no aplica a <picture>, solo al
   <img> que de verdad se renderiza, por eso vive aparte en la regla de abajo. */
.hero-slide {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 650ms ease;
}

.hero-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-slide.active {
    z-index: 1;
    opacity: 1;
}

.hero-dots {
    position: absolute;
    z-index: 4;
    bottom: clamp(14px, 1.2vw, 19px);
    left: 50%;
    display: flex;
    gap: 10px;
    transform: translateX(-50%);
}

.hero-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    background: #fff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 180ms ease, transform 180ms ease;
}

.hero-dots button.active {
    opacity: 1;
    transform: scale(1.35);
}

.metrics {
    position: relative;
    z-index: 2;
    color: #fff;
    background: #002c78;
}

.metrics::before {
    position: absolute;
    bottom: calc(100% - 1px);
    left: 50%;
    width: clamp(210px, 18vw, 280px);
    aspect-ratio: 280 / 52;
    content: "";
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 64' preserveAspectRatio='none'%3E%3Cpath fill='%23002c78' d='M0 64C42 64 54 59 72 36C88 16 108 5 140 5C172 5 192 16 208 36C226 59 238 64 280 64H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    transform: translateX(-50%);
    pointer-events: none;
}

.metrics::after {
    position: absolute;
    right: 0;
    z-index: 1;
    bottom: -15px;
    left: 0;
    height: 100%;
    content: "";
    background: url("../images/border-blue-brush.png") center / 100% 100% no-repeat;
    pointer-events: none;
}

.metrics-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    width: min(74%, 1400px);
    min-height: 106px;
    margin-inline: auto;
}

.metric {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.2vw, 18px);
    min-width: 0;
    min-height: 48px;
    padding: 0 clamp(14px, 1.8vw, 32px);
    border-right: 1px solid rgb(255 255 255 / 65%);
}

.metric:first-child {
    padding-left: clamp(20px, 2.6vw, 30px);
}

.metric:last-child {
    padding-right: clamp(20px, 2.6vw, 30px);
    border-right: 0;
}

.metric img {
    width: clamp(44px, 3.35vw, 64px);
    height: clamp(44px, 3.35vw, 64px);
    object-fit: contain;
}

.metric div {
    display: flex;
    flex-direction: column;
}

.metric strong {
    /* Antes eran numeros cortos ("450K", "700"), de ahi el tamano grande +
       nowrap. Ahora son frases ("SABOR Y TRADICIÓN", "FLAVOR & TRADITION")
       que no entran en una sola linea en el ancho angosto de cada columna --
       tamano reducido y wrap habilitado para que quepan bien en vez de
       desbordar o quedar ilegiblemente chicas. */
    font-size: clamp(14px, 1.15vw, 20px);
    font-weight: 700;
    line-height: 1.15;
}

.metric > div > span {
    /* Mismo motivo que .metric strong arriba -- estos subtitulos tambien
       pasaron de frases cortas a mas largas ("Presente en la mesa
       puertorriqueña"), asi que tambien necesitan poder envolver en vez de
       desbordar la columna. */
    margin-top: 5px;
    font-size: clamp(9px, 0.65vw, 12px);
    font-weight: 400;
    line-height: 1.3;
}

.product-story {
    position: relative;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: start;
    min-height: 0;
    padding-block: clamp(58px, 4.95vw, 95px) clamp(38px, 3.4vw, 65px);
}

.product-story::before {
    position: absolute;
    top: 65px;
    left: calc(var(--page-gutter) * -1.5);
    width: 130px;
    height: 130px;
    content: "";
    background: url("../images/tomato.png") center / contain no-repeat;
}

.product-story::after {
    position: absolute;
    right: calc(var(--page-gutter) * -1.8);
    bottom: 18px;
    width: 130px;
    height: 170px;
    content: "";
    background: url("../images/chard.png") center / contain no-repeat;
}

.product-visual {
    position: relative;
    z-index: 1;
    padding: 24px;
}

.product-visual::before {
    position: absolute;
    z-index: -1;
    inset: 8% 5%;
    content: "";
    background: radial-gradient(circle, rgb(10 61 125 / 18%), transparent 68%);
}

.product-visual img {
    width: 100%;
    margin-inline: auto;
}

.product-copy {
    max-width: 590px;
    padding: 40px 0 0 50px;
}

.product-copy .eyebrow {
    margin: 0;
    color: var(--blue);
    font-size: clamp(20px, 1.55vw, 29px);
    font-weight: 600;
    line-height: 1.15;
}

.product-copy h1 {
    margin: 10px 0 30px;
    color: var(--orange);
    font-size: clamp(22px, 1.7vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.product-copy > p:last-of-type {
    margin: 0 0 30px;
    color: #555;
    font-size: var(--type-body);
    line-height: 1.85;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 10px 22px;
    border-radius: 24px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    color: #fff;
    background: var(--orange);
}

.button-primary:hover {
    background: var(--orange-dark);
}

.product-more-button {
    min-height: 34px;
    gap: 6px;
    padding: 7px 15px;
    font-size: 9px;
}

.product-more-button img {
    width: 13px;
    height: 13px;
    object-fit: contain;
}

.button-outline {
    color: var(--orange);
    background: #fff;
    border: 2px solid var(--orange);
}

.button-outline:hover {
    color: #fff;
    background: var(--orange);
}

.recipes {
    padding-block: 5px 100px;
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 32px;
}

.section-heading h2 {
    margin: 0;
    color: var(--blue);
    font-size: var(--type-section-title);
    line-height: 1.2;
}

.section-heading p {
    margin: 6px 0 0;
    color: #9a9a9a;
    font-size: var(--type-body);
}

.carousel-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #777;
    font-size: 13px;
}

.carousel-controls span {
    margin-right: 8px;
}

.carousel-controls button {
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    color: var(--orange);
    background: #fff;
    border: 2px solid var(--orange);
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.carousel-controls button.filled,
.carousel-controls button:active {
    color: #fff;
    background: var(--orange);
}

.card-track,
.follower-track {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    padding: 5px 4px 22px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.card-track::-webkit-scrollbar,
.follower-track::-webkit-scrollbar {
    display: none;
}

.recipe-card {
    flex: 0 0 calc((100% - 90px) / 4);
    min-width: 210px;
    overflow: hidden;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: 0 6px 13px rgb(0 0 0 / 13%);
    scroll-snap-align: start;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.recipe-card:hover,
.recipe-card:focus-within {
    border-color: var(--orange);
    box-shadow: 0 14px 26px rgb(0 0 0 / 17%);
}

.recipe-image {
    position: relative;
    aspect-ratio: 1.12;
    margin: 10px 10px 0;
    overflow: hidden;
    border-radius: 7px;
}

.recipe-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rating,
.steps {
    position: absolute;
    top: 9px;
    padding: 3px 6px;
    background: rgb(255 255 255 / 94%);
    border-radius: 12px;
    font-size: 7px;
}

.rating {
    left: 9px;
    color: var(--orange);
}

.steps {
    right: 9px;
    color: var(--orange);
}

.recipe-body {
    padding: 8px 12px 12px;
}

.recipe-body h3 {
    margin: 0;
    color: var(--blue);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
}

.recipe-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    margin: 8px 0 10px;
    padding: 0 0 10px;
    color: #777;
    border-bottom: 1px solid #e5e5e5;
    list-style: none;
    font-size: 8px;
}

.recipe-meta li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
    white-space: nowrap;
}

.recipe-meta img {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    display: block;
    object-fit: contain;
}

.recipe-meta svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    display: block;
    fill: none;
    stroke: var(--orange);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
}

.recipe-meta span {
    display: block;
    line-height: 1;
}

.recipe-body p {
    min-height: 38px;
    margin: 0 0 11px;
    color: #858585;
    font-size: 8px;
    line-height: 1.45;
    text-align: center;
}

.recipe-body .button {
    display: flex;
    width: max-content;
    min-height: 38px;
    margin-inline: auto;
    padding: 8px 16px;
    font-size: 9px;
}

.recipe-button-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.recipe-button-icon-hover {
    display: none;
}

.recipe-card:hover .recipe-button,
.recipe-card:focus-within .recipe-button,
.follower-card:hover .recipe-button,
.follower-card:focus-within .recipe-button {
    color: #fff;
    background: var(--orange);
}

.recipe-card:hover .recipe-button-icon-default,
.recipe-card:focus-within .recipe-button-icon-default,
.follower-card:hover .recipe-button-icon-default,
.follower-card:focus-within .recipe-button-icon-default {
    display: none;
}

.recipe-card:hover .recipe-button-icon-hover,
.recipe-card:focus-within .recipe-button-icon-hover,
.follower-card:hover .recipe-button-icon-hover,
.follower-card:focus-within .recipe-button-icon-hover {
    display: block;
}

.chef-cta {
    position: relative;
    overflow: visible;
    color: #fff;
    background: #002c78 url("../images/pattern.png") center / 480px auto repeat;
}

.chef-cta::before {
    position: absolute;
    inset: 0;
    content: "";
    background: rgb(0 47 108 / 72%);
}

.chef-inner {
    position: relative;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
    height: clamp(270px, 25vw, 460px);
    min-height: 0;
}

.chef-copy {
    position: relative;
    z-index: 2;
    padding: 0 0 0 70px;
}

.chef-copy h2 {
    max-width: 360px;
    margin: 0 0 14px;
    font-size: var(--type-subtitle);
    font-weight: 400;
    line-height: 1.35;
}

.chef-copy h2 span {
    color: var(--orange);
}

.chef-copy p {
    max-width: 410px;
    margin: 0 0 24px;
    font-size: var(--type-body);
    line-height: 1.55;
}

.chef-copy .button {
    min-height: 42px;
    gap: 9px;
    padding: 9px 21px;
    font-size: 10.5px;
}

.chef-copy .button img {
    width: 17px;
    height: 17px;
    object-fit: contain;
}

.chef-image {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    height: clamp(310px, 28.7vw, 520px);
    max-height: none;
    margin: 0;
    object-fit: contain;
    object-position: bottom;
}

.followers {
    position: relative;
    width: 86.7%;
    margin-right: 0;
    margin-left: 13.3%;
    padding-block: 52px 30px;
}

.followers::before {
    display: none;
}

.followers .section-heading {
    width: 86%;
    margin-bottom: 28px;
}

.followers .section-heading h2 {
    font-size: var(--type-section-title);
}

.followers .section-heading p {
    margin-top: 5px;
    font-size: var(--type-body);
}

.followers .carousel-controls {
    gap: 7px;
}

.followers .carousel-controls button {
    width: 24px;
    height: 24px;
    border-width: 1px;
    font-size: 16px;
}

.follower-track {
    gap: clamp(24px, 2.8vw, 42px);
}

.follower-card {
    flex: 0 0 clamp(180px, 17vw, 300px);
    min-width: 180px;
    overflow: hidden;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 3px 8px rgb(0 0 0 / 14%);
    scroll-snap-align: start;
    transition: transform 180ms ease;
}

.follower-card:hover {
    transform: translateY(-5px) rotate(-0.5deg);
}

/* Hijo directo (no ".follower-card img") a proposito -- un selector
   descendiente tambien atrapaba los iconos pequenos del boton "Ver
   detalles" (nietos, no hijos directos), pisandoles su tamano de 14px
   (.recipe-button-icon) con width:100% y estirandolos. */
.follower-card > img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0;
}

.follower-card .recipe-button {
    display: flex;
    width: max-content;
    min-height: 38px;
    margin: 6px auto 14px;
    padding: 8px 16px;
    font-size: 9px;
    border: 2px solid var(--orange);
    cursor: pointer;
}

.follower-profile {
    /* height fija (etiqueta de 1 linea + nombre de hasta 2 lineas) en vez de
       min-height -- reserva siempre el mismo espacio para que todas las
       tarjetas de la fila queden alineadas, sin importar si el nombre del
       creador es corto o largo. El nombre NO se trunca a una sola linea (a
       diferencia de un intento anterior) -- se ve completo salvo en el caso
       extremo de mas de 2 lineas, donde .follower-profile-name lo recorta. */
    display: block;
    height: 56px;
    padding: 8px 12px 0;
    overflow: hidden;
    color: #888;
    font-size: 11px;
    line-height: 1.3;
}

.follower-profile-label {
    display: block;
}

.follower-profile-name {
    display: -webkit-box;
    overflow: hidden;
    color: #555;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.follower-caption {
    /* Mismo tratamiento tipografico Y el mismo recorte a 2 lineas que usa
       .recipe-catalog-card .recipe-body h3 (recipes.css) -- sin esto, un nombre
       de receta largo crece a 3+ lineas y desalinea la fila igual que el
       problema de .follower-profile de arriba. */
    display: -webkit-box;
    /* height fija (no min-height) reservando siempre el alto de 2 lineas -- con
       min-height, una receta de titulo corto (1 linea) quedaba mas baja que una
       de titulo largo (2 lineas, recortado por -webkit-line-clamp), desalineando
       el borde inferior de las tarjetas en la misma fila. */
    height: 51px;
    padding: 4px 12px 14px;
    overflow: hidden;
    color: var(--blue);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.why-coloso {
    position: relative;
    margin-bottom: clamp(36px, 3.85vw, 74px);
    color: var(--blue);
    /* `background-size: 100% auto` (not the old 100% 100%) keeps the artwork at its
       native aspect ratio no matter how tall real copy makes this section -- with a
       fixed ratio, longer benefit descriptions than the original placeholder text
       would stretch/distort the pattern. The solid #ffa127 fallback (sampled from the
       image's own base color) fills any extra height below the artwork seamlessly. */
    background: #ffa127 url("../images/backorange1.png") top center / 100% auto no-repeat;
}

.why-coloso::before {
    position: absolute;
    top: -22px;
    right: 0;
    left: 0;
    height: 38px;
    content: "";
    background: url("../images/border-orange.png") center top / 100% 100% no-repeat;
    display: none;
}

.why-inner {
    position: relative;
    height: 100%;
    min-height: 0;
    /* Bottom padding reserves room for .why-products (the bottle cluster), which is
       position:absolute and so doesn't push this container's height on its own --
       without this, its fixed bottom-anchor would ride up over the last benefit row
       once its description needs more than a couple of short lines. Sized to roughly
       match how tall that image renders at width: min(19vw, 365px) with its own
       aspect ratio, same idea as the reserved 330px on the mobile version below. */
    padding: clamp(52px, 4.8vw, 92px) 0 clamp(170px, 15vw, 290px);
}

.why-heading {
    position: relative;
    top: -10px;
    margin-bottom: clamp(26px, 2.2vw, 42px);
    text-align: center;
}

.why-heading h2 {
    margin: 0;
    font-size: var(--type-section-title);
}

.why-heading p {
    margin: 5px 0 0;
    color: #fff;
    font-size: var(--type-note);
}

.benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 62%;
    max-width: 1180px;
    margin-inline: auto;
}

.benefits article {
    position: relative;
    display: flex;
    min-height: clamp(95px, 9vw, 173px);
    padding: clamp(18px, 1.7vw, 32px) clamp(12px, 2vw, 38px);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}

.benefits article:nth-child(odd) {
    border-right: 1px dashed rgb(255 255 255 / 80%);
}

.benefits article:nth-child(-n + 2) {
    border-bottom: 1px dashed rgb(255 255 255 / 80%);
}

.benefit-icon {
    display: none;
}

.benefits h3 {
    margin: 0 0 clamp(8px, 0.8vw, 15px);
    font-size: var(--type-subtitle);
}

.benefits p {
    margin: 0;
    color: #fff;
    font-size: var(--type-note);
    line-height: 1.55;
}

.why-products {
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: min(19vw, 365px);
    transform: translateX(-50%);
}

.chef-fab {
    position: fixed;
    z-index: 30;
    right: 24px;
    bottom: 24px;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    filter: drop-shadow(0 7px 9px rgb(0 0 0 / 25%));
    transition: transform 180ms ease;
}

/* Sin esto, el <img> se queda en su tamano intrinseco (fijo) dentro del
   <a> mas ancho -- como el boton esta anclado por su borde derecho
   (right: 24px), la imagen (alineada a la izquierda por defecto dentro de
   un <a> inline) se corre hacia la izquierda a medida que crece el ancho
   del boton, dejando un hueco creciente entre el icono y el borde real de
   la pantalla. */
.chef-fab img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.chef-fab:hover {
    transform: scale(1.07) rotate(2deg);
}

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 500ms ease, transform 500ms ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1100px) {
    .metric {
        padding-inline: 18px;
    }

    .metric img {
        width: 52px;
        height: 52px;
    }

    .recipe-card {
        flex-basis: calc((100% - 60px) / 3);
    }

    .follower-card {
        flex-basis: clamp(180px, 17vw, 300px);
    }
}

@media (max-width: 900px) {
    .hero {
        height: min(166vw, 650px);
    }

    .hero-slides {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
    }

    /* Recorte de emergencia para slides SIN imagen mobile (siguen mostrando la de
       desktop aqui abajo) -- uno con imagen mobile ya viene recortado desde origen,
       asi que este object-position extra no le hace daño (mismo cover). */
    .hero-slide img {
        object-fit: cover;
        object-position: 18% center;
    }

    .hero-dots {
        bottom: 14px;
        display: flex;
        gap: 8px;
    }

    .hero-dots button {
        width: 7px;
        height: 7px;
        opacity: 1;
    }

    .metrics::after {
        bottom: -20px;
        height: clamp(70px, 23vw, 92px);
        background-position: center bottom;
        background-size: 100% 100%;
    }

    .metrics-inner {
        display: block;
        width: min(100% - 40px, 340px);
        padding-block: 0 10px;
    }

    .metric,
    .metric:first-child,
    .metric:last-child {
        position: relative;
        width: min(100%, 300px);
        min-height: 148px;
        margin-inline: auto;
        padding: 24px 0;
        border-right: 0;
    }

    .metric::after {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 68px;
        height: 2px;
        content: "";
        background: #fff;
        transform: translateX(-50%);
    }

    .metric:last-child::after {
        display: none;
    }

    .metric img {
        width: 70px;
        height: 70px;
    }

    .metric strong {
        font-size: 20px;
        font-weight: 700;
    }

    .metric > div > span {
        margin-top: 4px;
        font-size: 14px;
    }

    .product-story {
        display: flex;
        align-items: center;
        min-height: 0;
        padding-block: 80px 78px;
        flex-direction: column;
    }

    .product-story::before,
    .product-story::after {
        display: none;
    }

    .product-visual {
        width: calc(100% + 60px);
        padding: 0;
    }

    .product-visual img {
        width: 100%;
        max-width: 520px;
    }

    .product-copy {
        width: 100%;
        max-width: 320px;
        padding: 48px 0 0;
        text-align: center;
    }

    .product-copy .eyebrow {
        font-size: 26px;
    }

    .product-copy h1 {
        margin: 3px 0 34px;
        font-size: 22px;
    }

    .product-copy > p:last-of-type {
        max-width: 280px;
        margin: 0 auto 68px;
        font-size: var(--type-body);
        line-height: 1.65;
    }

    .product-more-button {
        margin-inline: auto;
    }

    .recipes {
        width: 100%;
        padding: 28px 0 74px var(--page-gutter);
    }

    .recipes .section-heading {
        padding-right: var(--page-gutter);
    }

    .recipes .carousel-controls {
        flex-direction: column;
        gap: 6px;
    }

    .section-heading {
        align-items: flex-start;
    }

    .section-heading h2 {
        max-width: 230px;
        font-size: var(--type-section-title);
    }

    .carousel-controls span {
        display: none;
    }

    .carousel-controls button {
        width: 32px;
        height: 32px;
        font-size: 23px;
    }

    .card-track {
        gap: 18px;
        padding-right: var(--page-gutter);
    }

    .recipe-card {
        flex-basis: min(82vw, 330px);
    }

    .chef-inner {
        display: block;
        height: auto;
        min-height: 500px;
    }

    .chef-copy {
        max-width: 560px;
        padding: 76px 0;
    }

    .chef-copy h2 {
        margin-bottom: 58px;
        font-size: var(--type-section-title);
    }

    .chef-copy p {
        margin-bottom: 62px;
        font-size: var(--type-body);
    }

    .chef-copy .button {
        min-height: 60px;
        padding: 15px 27px;
        font-size: 15px;
    }

    .chef-copy .button img {
        width: 21px;
        height: 21px;
    }

    .chef-image {
        display: none;
    }

    .followers {
        width: 100%;
        margin: 0;
        padding: 70px 0 90px var(--page-gutter);
    }

    .followers::before {
        display: none;
    }

    .followers .section-heading {
        width: auto;
        padding-right: var(--page-gutter);
    }

    .followers .section-heading h2 {
        max-width: 250px;
        font-size: var(--type-section-title);
    }

    .followers .section-heading p {
        max-width: 260px;
        font-size: var(--type-body);
    }

    .followers .carousel-controls {
        flex-direction: column;
        gap: 6px;
    }

    .follower-track {
        gap: 18px;
        padding-right: var(--page-gutter);
    }

    .follower-card {
        flex-basis: min(78vw, 300px);
    }

    .follower-profile {
        font-size: 12px;
    }

    .follower-caption {
        font-size: 15px;
    }

    .why-coloso {
        aspect-ratio: auto;
        background: #ffa126;
    }

    .why-coloso::before {
        display: block;
    }

    .why-inner {
        width: 100%;
        height: auto;
        min-height: 1280px;
        padding: 90px 36px 330px;
    }

    .why-inner::before {
        position: absolute;
        z-index: 0;
        inset: 0;
        content: "";
        background: url("../images/pattern.png") center top / 700px auto repeat;
        opacity: 0.16;
        pointer-events: none;
    }

    .why-heading,
    .benefits,
    .why-products {
        z-index: 1;
    }

    .why-heading,
    .benefits {
        position: relative;
    }

    .why-heading {
        margin-bottom: 55px;
        text-align: center;
    }

    .why-heading h2 {
        font-size: var(--type-section-title);
    }

    .why-heading p {
        max-width: 300px;
        margin-inline: auto;
        font-size: var(--type-note);
        line-height: 1.5;
    }

    .benefits {
        display: flex;
        width: 100%;
        flex-direction: column;
    }

    .benefits article:nth-child(1) { order: 1; }
    .benefits article:nth-child(2) { order: 3; }
    .benefits article:nth-child(3) { order: 2; }
    .benefits article:nth-child(4) { order: 4; }

    .benefits article {
        min-height: 0;
        padding: 28px 0 30px;
        align-items: center;
        border: 0 !important;
        text-align: center;
    }

    .benefit-icon {
        display: none;
    }

    .benefits h3 {
        margin-bottom: 14px;
        font-size: var(--type-subtitle);
    }

    .benefits p {
        max-width: 300px;
        font-size: var(--type-note);
        line-height: 1.5;
    }

    .why-products {
        bottom: -22px;
        width: min(520px, 92vw);
        max-width: none;
    }

    .chef-fab {
        display: none;
    }
}

@media (max-width: 420px) {
    .hero {
        height: 640px;
    }

    .product-story {
        padding-top: 64px;
    }

    .recipes {
        padding-bottom: 66px;
    }

    .followers {
        padding-block: 60px 78px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
    }
}