/* Page header */
.hob-page-header {
    padding: clamp(32px, 5vw, 64px) 0;
    background: var(--hob-surface-color);
}

.hob-page-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 5vw, 56px);
}

.hob-page-header__inner:has(.hob-page-header__media) {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
}

.hob-page-header__content {
    display: grid;
    gap: 14px;
}

.hob-page-header__eyebrow,
.hob-section-heading__eyebrow,
.hob-404__eyebrow {
    margin: 0;
    color: var(--hob-accent-color);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hob-page-header__title {
    max-width: 820px;
    margin: 0;
    font-size: clamp(2rem, 4.8vw, 3.9rem);
}

.hob-page-header__text {
    max-width: 680px;
    margin: 0;
    font-size: clamp(1rem, 2vw, 1.18rem);
}

.hob-page-header__media {
    border-radius: var(--hob-radius-card);
    overflow: hidden;
}

.hob-page-header__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Generic page */
.hob-page-content {
    padding: clamp(32px, 5vw, 72px) 0;
}

.hob-page-content__inner {
    max-width: 920px;
}

.hob-page-content__body > *:first-child,
.hob-single__content > *:first-child {
    margin-top: 0;
}

.hob-page-content__body > *:last-child,
.hob-single__content > *:last-child {
    margin-bottom: 0;
}

.hob-section-heading {
    display: grid;
    gap: 10px;
    max-width: 760px;
}

.hob-section-heading__title {
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 3rem);
}

.hob-section-heading__text {
    margin: 0;
}

.hob-reassurance {
    padding: var(--hob-section-padding) 0 0;
    background: #f8f3f0;
}

.hob-reassurance__header {
    margin-bottom: clamp(44px, 5vw, 76px);
    text-align: center;
}

.hob-reassurance__heading {
    margin: 0;
    font-family: var(--hob-heading-font);
    font-size: clamp(1.25rem, 1.8vw, 1.75rem);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hob-reassurance__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 52px 32px;
    max-width: 1480px;
    margin-inline: auto;
}

.hob-reassurance__item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hob-reassurance__icon {
    display: grid;
    width: 120px;
    height: 120px;
    margin-bottom: 24px;
    place-items: center;
    color: var(--hob-primary-color);
}

.hob-reassurance__icon-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hob-reassurance__icon-svg,
.hob-reassurance__icon > svg {
    display: block;
    width: 48px;
    height: 48px;
}

.hob-reassurance__title {
    max-width: 270px;
    margin: 0;
    font-family: var(--hob-heading-font);
    font-size: clamp(1.18rem, 1.4vw, 1.45rem);
    font-weight: 400;
    line-height: 1.2;
}

.hob-reassurance__text {
    max-width: 270px;
    margin: 10px 0 0;
    color: color-mix(in srgb, var(--hob-body-color) 78%, #f8f3f0);
    font-family: var(--hob-body-font);
    font-size: clamp(0.91rem, 1vw, 1rem);
    line-height: 1.6;
}

.hob-contact-page__inner.hob-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.forminator-row.forminator-row-last .forminator-col{
    display: flex;
    justify-content: center;
    align-items: center;
}

.forminator-ui#forminator-module-293.forminator-design--material .forminator-button-submit {
    font-size: 14px;
    font-family: inherit;
    font-weight: 500;
    background: #f8f3f0;
    padding: 12px 48px;
}
.forminator-ui.forminator-custom-form[data-design=material] .forminator-button span:not([aria-hidden]):not([class*=forminator-icon-]) {
    font-family: var(--hob-heading-font);
}

@media (min-width: 641px) {
    .hob-reassurance__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 60px 40px;
    }

    .hob-reassurance__icon {
        width: 130px;
        height: 130px;
    }
}

@media (min-width: 901px) {
    .hob-reassurance__header {
        margin-bottom: clamp(28px, 3vw, 46px);
    }

    .hob-reassurance__inner {
        width: min(100% - (clamp(16px, 1.25vw, 24px) * 2), var(--hob-container-width));
    }

    .hob-reassurance__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0 clamp(40px, 4.5vw, 88px);
        max-width: none;
    }

    .hob-reassurance__icon {
        width: 120px;
        height: 120px;
    }

    .hob-reassurance__title {
        max-width: 170px;
        min-height: 2.4em;
        font-size: clamp(1rem, 1.05vw, 1.18rem);
        text-wrap: balance;
    }
}

/* Front page */
.hob-front-page {
    padding-top: 0;
    padding-bottom: 0;
}

.hob-front-page__content {
    background: var(--hob-background-color);
}

/* Contact page */
.hob-service-page {
    padding: 0;
    overflow: clip;
    background: #ffffff;
}

.hob-service-page__intro {
    padding: clamp(58px, 5vw, 76px) 0 clamp(72px, 7vw, 92px);
    background: #ffffff;
    color: var(--hob-primary-color);
}

.hob-service-page__intro-inner {
    width: min(100% - (var(--hob-container-padding) * 2), 1280px);
    margin-inline: auto;
    text-align: center;
}

.hob-service-page__kicker {
    margin: 0 0 16px;
    color: var(--hob-primary-color);
    font-family: var(--hob-heading-font);
    font-size: clamp(0.7rem, 0.8vw, 0.78rem);
    font-weight: 500;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
}

.hob-service-page__title {
    max-width: 850px;
    margin: 0 auto;
    color: var(--hob-primary-color);
    font-family: "HOB Editorial", serif;
    font-size: clamp(2.625rem, 3.4vw, 3.125rem);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.018em;
    line-height: 1.08;
    text-wrap: balance;
}

.hob-service-page__lead {
    max-width: 720px;
    margin: 24px auto 0;
    color: color-mix(in srgb, var(--hob-body-color) 78%, transparent);
    font-family: var(--hob-body-font);
    font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
    line-height: 1.72;
    text-wrap: pretty;
}

.hob-contact-page {
    padding-bottom: 0;
}

.hob-contact-page__content {
    padding: 0 0 clamp(72px, 8vw, 120px);
}

.hob-contact-page__inner {
    width: min(100% - (var(--hob-container-padding) * 2), 1280px);
}

.hob-contact-form {
    width: min(100%, 980px);
    margin: 0;
}

.hob-contact-form:empty {
    margin-top: 0;
}

.hob-contact-form > :first-child {
    margin-top: 0;
}

.hob-contact-form > :last-child {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .hob-service-page__intro {
        padding: clamp(38px, 10vw, 48px) 0 clamp(58px, 14vw, 72px);
    }

    .hob-service-page__intro-inner,
    .hob-contact-page__inner {
        width: min(100% - 40px, 1280px);
    }

    .hob-service-page__title {
        font-size: clamp(2.125rem, 10vw, 2.5rem);
    }

    .hob-service-page__lead {
        margin-top: 22px;
        font-size: 1.0625rem;
        line-height: 1.68;
    }
}

.hob-about__inner {
    display: grid;
    gap: clamp(28px, 5vw, 56px);
}

.hob-about__header {
    display: grid;
    gap: 12px;
    max-width: 760px;
}

.hob-about__title {
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 3rem);
}

.hob-about__text {
    margin: 0;
}

.hob-about__value {
    padding: 22px;
    border: var(--hob-border-width) solid var(--hob-border-color);
    border-radius: var(--hob-radius-card);
    background: var(--hob-background-color);
}

/* Product FAQ section */
.hob-faq-section {
    padding: var(--hob-section-padding) 0;
}

.hob-faq-section__inner {
    display: grid;
    grid-template-columns: minmax(220px, 0.5fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 64px);
}

.hob-faq-section__header {
    display: grid;
    align-content: start;
    gap: 12px;
}

.hob-faq-section__title {
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 3rem);
}

.hob-faq-section__text {
    margin: 0;
    color: var(--hob-body-color);
}

/* About page */
.hob-about {
    padding: clamp(32px, 5vw, 72px) 0;
}

.hob-about__intro {
    max-width: 820px;
    font-size: clamp(1.08rem, 2vw, 1.3rem);
}

.hob-about__intro p {
    margin: 0;
}

.hob-about__media-text {
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1fr);
    gap: clamp(24px, 5vw, 56px);
    align-items: start;
}

.hob-about__media {
    border-radius: var(--hob-radius-card);
    overflow: hidden;
}

.hob-about__media img {
    width: 100%;
    height: auto;
}

.hob-about__content {
    min-width: 0;
}

.hob-about__values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.hob-about__value h3 {
    margin: 0 0 8px;
}

.hob-about__value p {
    margin: 0;
}

/* Single post */
.hob-single__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 5vw, 56px);
}

.hob-single__header:has(.hob-single__media) {
    grid-template-columns: minmax(0, 0.75fr) minmax(320px, 1fr);
    align-items: center;
}

.hob-single__meta,
.hob-archive-card__meta {
    margin: 0 0 10px;
    color: var(--hob-accent-color);
    font-size: 0.9rem;
    font-weight: 700;
}

.hob-single__title {
    margin: 0;
    font-size: clamp(2rem, 4.8vw, 3.9rem);
}

.hob-single__media {
    border-radius: var(--hob-radius-card);
    overflow: hidden;
}

.hob-single__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.hob-single__content {
    max-width: 860px;
    padding-top: var(--hob-section-padding);
}

.hob-single__pagination {
    margin-top: 28px;
}

/* Archive */
.hob-archive__header {
    display: grid;
    gap: 14px;
    margin-bottom: clamp(28px, 5vw, 56px);
}

.hob-archive__title {
    margin: 0;
    font-size: clamp(2rem, 4.8vw, 3.7rem);
}

.hob-archive__description {
    max-width: 760px;
}

.hob-archive__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.hob-archive-card {
    display: grid;
    border: var(--hob-border-width) solid var(--hob-border-color);
    border-radius: var(--hob-radius-card);
    background: var(--hob-background-color);
    overflow: hidden;
}

.hob-archive-card__media {
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--hob-surface-color);
}

.hob-archive-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hob-archive-card__content {
    padding: 18px;
}

.hob-archive-card__title {
    margin: 0 0 10px;
    font-size: 1.2rem;
}

.hob-archive-card__title a {
    text-decoration: none;
}

.hob-archive-card__excerpt > *:last-child {
    margin-bottom: 0;
}

.hob-pagination {
    margin-top: 36px;
}

.hob-empty {
    margin: 0;
}

/* 404 */
.hob-404__inner {
    min-height: 52vh;
    display: grid;
    place-items: center;
}

.hob-404__content {
    display: grid;
    gap: 16px;
    max-width: 640px;
    text-align: center;
}

.hob-404__title {
    margin: 0;
    font-size: clamp(2.1rem, 5.2vw, 3.8rem);
}

.hob-404__text {
    margin: 0;
}

.hob-404__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}

.hob-404__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    border: var(--hob-border-width) solid var(--hob-primary-color);
    border-radius: var(--hob-radius-button);
    text-decoration: none;
    line-height: 1;
    text-align: center;
}

.hob-404__button--primary {
    background: var(--hob-primary-color);
    color: var(--hob-background-color);
}

.hob-404__button--secondary {
    background: transparent;
    color: var(--hob-primary-color);
}




@media (max-width: 900px) {
    .hob-page-header__inner:has(.hob-page-header__media),
    .hob-faq-section__inner,
    .hob-about__media-text,
    .hob-single__header:has(.hob-single__media) {
        grid-template-columns: 1fr;
    }

    .hob-page-header__media {
        order: -1;
    }

    .hob-archive__grid,
    .hob-about__values {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .hob-404__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hob-archive__grid,
    .hob-about__values {
        grid-template-columns: 1fr;
    }
}
