.visual-column--single {
    grid-template-rows: minmax(0, 1fr);
}

.home-story-body {
    --brand-deep: #6b1429;
    --brand-dark: #3b1520;
    --brand-soft: #fff1e9;
    --brand-panel: #f3e7de;
    overflow-x: hidden;
}

@media (min-width: 981px) {
    .home-story-body,
    .home-story-body html {
        height: auto;
        overflow-y: auto;
    }
}

.home-story-body .page-shell {
    height: auto;
    min-height: 100svh;
}

.home-story-body .section-stage {
    display: grid;
    gap: 0;
    background:
        linear-gradient(90deg, rgba(107, 20, 41, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, #fffaf3 0%, #f8efe6 46%, #fffaf3 100%);
    background-size: calc((100vw - 96px) / 6) 100%, auto;
}

.home-story-body .screen-section.is-visible {
    min-height: calc(100svh - 112px);
    padding-top: 18px;
}

.home-story-body .home-hero-banner.is-visible {
    position: relative;
    width: min(100%, 1600px);
    min-height: clamp(540px, calc(100svh - 112px), 680px);
    grid-template-columns: minmax(320px, 0.46fr) minmax(0, 0.54fr);
    align-items: stretch;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(36px, 5vw, 74px);
    background:
        linear-gradient(90deg, rgba(255, 247, 236, 0.99) 0%, rgba(255, 244, 231, 0.92) 29%, rgba(255, 244, 231, 0.34) 52%, rgba(255, 244, 231, 0.02) 74%),
        linear-gradient(180deg, rgba(69, 18, 28, 0.05), rgba(69, 18, 28, 0.12)),
        url("../img/Main%20hero%20image.png");
    background-position: center, center, right center;
    background-size: cover, cover, contain;
    background-repeat: no-repeat;
    box-shadow: 0 34px 100px rgba(33, 22, 21, 0.12);
}

.home-hero-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(255, 253, 248, 0.3), transparent 28%),
        radial-gradient(circle at 24% 36%, rgba(255, 253, 248, 0.72), transparent 30%);
    pointer-events: none;
}

.visual-column--single .product-visual-panel,
.content-column {
    transform: none;
}

.home-story-body .content-column {
    background:
        radial-gradient(circle at 92% 8%, rgba(107, 20, 41, 0.12), transparent 36%),
        linear-gradient(145deg, rgba(255, 253, 248, 0.98), rgba(255, 241, 233, 0.82));
}

.home-story-body .home-hero-copy {
    max-width: 680px;
    padding: clamp(18px, 2.4vw, 32px) 0 clamp(18px, 2.4vw, 32px) clamp(6px, 1.4vw, 18px);
    justify-content: center;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.home-story-body .home-hero-copy:hover {
    border-color: transparent;
    box-shadow: none;
}

.home-story-body .content-column::before {
    background: var(--brand-deep);
}

.home-story-body .product-visual-panel {
    background: #eadbd1;
    box-shadow: 0 28px 90px rgba(107, 20, 41, 0.14);
}

.home-hero-product-image {
    object-position: 50% 52%;
}

.home-hero-banner .visual-column {
    min-height: 100%;
}

.home-hero-banner .product-visual-panel {
    opacity: 0;
    pointer-events: none;
}

.home-hero-title {
    max-width: 32ch;
    min-height: auto;
    color: #4b1220;
    font-size: clamp(38px, 3.5vw, 58px);
    line-height: 1.14;
}

.home-hero-copy .subtitle {
    max-width: 44ch;
    min-height: auto;
    margin-top: 18px;
}

.home-hero-copy .ritual-signals {
    margin-top: 30px;
}

.ritual-signals--premium {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0;
}

.ritual-signal {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 22px;
    margin-right: 22px;
    border-right: 1px solid rgba(107, 20, 41, 0.14);
}

.ritual-signal:last-child {
    border-right: 0;
    margin-right: 0;
    padding-right: 0;
}

/* Specificity note: home2.css's generic ".ritual-signals span" rule (pill-badge styling for
   the old plain-text highlights) has higher specificity than a single class would, and both
   the icon badge and the label below are <span> elements inside .ritual-signals - so these are
   written as two-class selectors to reliably win the cascade instead of fighting it per-property. */
.ritual-signals--premium .ritual-signal-icon {
    display: grid;
    place-items: center;
    min-height: 38px;
    width: 38px;
    height: 38px;
    padding: 0;
    flex-shrink: 0;
    border-radius: 999px;
    background: linear-gradient(150deg, rgba(107, 20, 41, 0.1), rgba(107, 20, 41, 0.02));
    border: 1px solid rgba(107, 20, 41, 0.18);
    color: var(--wine);
}

.ritual-signal-icon svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.ritual-signals--premium .ritual-signal-label {
    max-width: 11ch;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    display: block;
    color: rgba(33, 22, 21, 0.76);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.01em;
    line-height: 1.24;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
}

.home-hero-copy .hero-actions {
    margin-top: 34px;
}

.hero-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.home-hero-copy .hero-actions .primary-action,
.home-hero-copy .hero-actions .secondary-action {
    min-width: 154px;
    background: rgba(255, 253, 248, 0.92);
}

.home-hero-copy .hero-actions .primary-action {
    background: var(--brand-deep);
    color: var(--white);
}

.home-hero-copy .hero-actions .secondary-action {
    color: var(--brand-deep);
    border-color: rgba(107, 20, 41, 0.32);
}

.home-anchor-note {
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid var(--soft-line);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.home-anchor-note article {
    min-height: 84px;
    padding: 16px;
    border: 1px solid rgba(107, 20, 41, 0.16);
    background: rgba(255, 241, 233, 0.72);
}

.home-anchor-note strong {
    display: block;
    color: var(--brand-dark);
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.home-anchor-note span {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

.two-minute-ritual {
    width: min(100%, 1308px);
    margin: 0 auto;
    padding: clamp(54px, 7vw, 92px) clamp(24px, 3.6vw, 48px);
    display: grid;
    grid-template-columns: minmax(280px, 0.38fr) minmax(0, 0.62fr);
    gap: clamp(24px, 4vw, 52px);
    align-items: center;
}

.two-minute-copy {
    max-width: 440px;
}

.two-minute-copy h2 {
    margin: 0;
    color: var(--wine);
    font-family: var(--font-display);
    font-size: clamp(38px, 4vw, 62px);
    font-weight: 600;
    line-height: 0.98;
}

.two-minute-copy p:not(.detail-kicker) {
    margin: 18px 0 0;
    color: #5b4740;
    font-size: 15px;
    line-height: 1.76;
}

.two-minute-copy .secondary-action {
    margin-top: 24px;
}

.two-minute-media {
    min-height: 430px;
    overflow: hidden;
    background: #efe3d8;
    box-shadow: 0 32px 90px rgba(33, 22, 21, 0.12);
}

.two-minute-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 50% 50%;
}

.home-trust-strip {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 18px max(24px, calc((100vw - 1308px) / 2 + 48px));
    background: var(--brand-deep);
    color: #fffdf8;
}

.home-trust-strip article {
    min-height: 86px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
    column-gap: 16px;
    padding: 0 24px;
    border-right: 1px solid rgba(255, 253, 248, 0.24);
}

.home-trust-strip article:last-child {
    border-right: 0;
}

.home-trust-strip span {
    grid-row: 1 / 3;
    color: rgba(255, 253, 248, 0.58);
    font-family: var(--font-display);
    font-size: 34px;
    line-height: 1;
}

.home-trust-strip strong {
    font-family: var(--font-display);
    font-size: clamp(23px, 2vw, 31px);
    font-weight: 700;
    line-height: 1;
}

.home-trust-strip p {
    margin: 6px 0 0;
    color: rgba(255, 253, 248, 0.72);
    font-size: 12px;
    line-height: 1.45;
}

.home-philosophy,
.ritual-cycle,
.product-proof,
.site-footer {
    width: min(100%, 1308px);
    margin: 0 auto;
    padding: clamp(54px, 7vw, 92px) clamp(24px, 3.6vw, 48px);
}

.home-philosophy {
    scroll-margin-top: 18px;
    display: grid;
    grid-template-columns: minmax(420px, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(30px, 5vw, 68px);
    align-items: center;
}

.home-philosophy-copy {
    max-width: 600px;
}

.home-philosophy h2,
.cycle-heading h2,
.proof-heading h2 {
    margin: 0;
    color: var(--wine);
    font-family: var(--font-display);
    font-size: clamp(38px, 4vw, 62px);
    font-weight: 600;
    line-height: 0.98;
}

.home-philosophy-copy p:not(.detail-kicker),
.cycle-heading p:not(.detail-kicker) {
    margin: 18px 0 0;
    max-width: 58ch;
    color: #5b4740;
    font-size: 15px;
    line-height: 1.76;
}

.cycle-lead {
    display: block;
    color: rgba(107, 20, 41, 0.55);
    font-style: italic;
    font-weight: 500;
}

.cycle-anchor {
    display: block;
    color: var(--wine);
    font-weight: 700;
}

.philosophy-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 26px;
}

.philosophy-points span {
    min-height: 70px;
    display: grid;
    place-items: center;
    padding: 12px;
    border: 1px solid rgba(107, 20, 41, 0.16);
    background: rgba(255, 253, 248, 0.74);
    color: var(--brand-dark);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.35;
    text-align: center;
    text-transform: uppercase;
}

/* Two-class selectors so these reliably outrank ".philosophy-points span" above (same
   specificity trap as the hero feature row - see ritual-signal-icon/label in this file). */
.philosophy-points--premium {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.philosophy-point {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.philosophy-points--premium .philosophy-point-icon {
    display: grid;
    place-items: center;
    min-height: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 999px;
    background: linear-gradient(150deg, rgba(107, 20, 41, 0.1), rgba(107, 20, 41, 0.02));
    border: 1px solid rgba(107, 20, 41, 0.18);
    color: var(--wine);
}

.philosophy-point-icon svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.philosophy-points--premium .philosophy-point-label {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    display: block;
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.4;
    text-align: left;
    text-transform: none;
}

.home-philosophy-media {
    order: -1;
    height: min(560px, 65svh);
    min-height: 430px;
    overflow: hidden;
    background: var(--brand-panel);
    box-shadow: 0 32px 90px rgba(33, 22, 21, 0.12);
}

.home-philosophy-media img,
.proof-cards img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.home-philosophy-media img {
    object-position: 64% 50%;
}

.proof-cards article:nth-child(1) img {
    object-position: 50% 52%;
}

.proof-cards article:nth-child(2) img {
    object-position: 50% 55%;
}

.proof-cards article:nth-child(3) img {
    object-position: 50% 42%;
}

.ritual-cycle {
    max-width: none;
    width: 100%;
    padding-left: max(24px, calc((100vw - 1308px) / 2 + 48px));
    padding-right: max(24px, calc((100vw - 1308px) / 2 + 48px));
    background: var(--brand-panel);
}

.cycle-heading {
    max-width: 760px;
    margin-bottom: 34px;
}

.cycle-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid rgba(107, 20, 41, 0.14);
    background: #fffdf8;
    box-shadow: 0 28px 80px rgba(107, 20, 41, 0.08);
}

.cycle-grid article {
    min-height: 246px;
    display: grid;
    align-content: start;
    justify-items: center;
    padding: 30px 22px;
    border-right: 1px solid rgba(107, 20, 41, 0.12);
    text-align: center;
}

.cycle-grid article:last-child {
    border-right: 0;
}

.cycle-number {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border: 1px solid rgba(107, 20, 41, 0.18);
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-deep);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.cycle-grid strong,
.proof-cards strong {
    color: var(--brand-dark);
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}

.cycle-grid p,
.proof-cards p,
.site-footer p {
    margin: 12px 0 0;
    color: #625149;
    font-size: 13px;
    line-height: 1.62;
}

/* Proof-card headlines are now full sentences, not 1-2 word titles - shrink and loosen the
   line-height from the shared 30px/1 above so wrapped text stays readable. */
.proof-cards strong {
    display: block;
    margin-top: 6px;
    font-size: 21px;
    line-height: 1.22;
}

.proof-eyebrow {
    display: block;
    color: var(--wine);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.proof-closing {
    margin: 30px 0 0;
    color: rgba(107, 20, 41, 0.62);
    font-family: var(--font-display);
    font-size: 19px;
    font-style: italic;
    text-align: center;
}

.product-proof {
    display: grid;
    gap: 28px;
}

.proof-heading {
    max-width: 720px;
}

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

.proof-cards article {
    min-height: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    background: #fffaf4;
    box-shadow: 0 24px 70px rgba(33, 22, 21, 0.1);
}

.proof-cards img {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    filter: contrast(1.04) saturate(1.02);
}

.proof-cards div {
    padding: 22px;
}

.site-footer {
    display: grid;
    grid-template-columns: minmax(220px, 1.1fr) auto minmax(200px, 0.9fr) minmax(220px, 0.9fr);
    gap: 28px;
    align-items: end;
    border-top: 1px solid rgba(107, 20, 41, 0.16);
    background: rgba(255, 253, 248, 0.68);
}

.footer-logo {
    width: 142px;
    height: auto;
    object-fit: contain;
}

.site-footer nav,
.footer-trust,
.footer-support {
    display: grid;
    gap: 10px;
}

.site-footer a,
.footer-trust span {
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
}

.footer-trust span {
    color: #625149;
    font-weight: 700;
    text-transform: none;
}

.footer-support-title {
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 2px;
}

.footer-support p {
    margin: 0;
    color: #625149;
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 980px) {
    .home-trust-strip,
    .home-philosophy,
    .two-minute-ritual,
    .cycle-grid,
    .site-footer {
        grid-template-columns: 1fr;
    }

    /* 64% was tuned for the desktop's wide, short crop - stacked to full width on mobile, that
       same horizontal shift crops the text baked into the left side of this photo. Shift the
       crop window back toward center so the text stays in frame. */
    .home-philosophy-media img {
        object-position: 42% 50%;
    }

    /* Below this width the text no longer fits legibly over the desktop's background-image
       treatment (the fade gradient's fixed percentages stop covering the image once the text
       column - which grows with content - runs past where the fade was tuned for, and the
       photo shows through behind the text). Standard stacked mobile layout instead: text first,
       then a real hero image block below it - image and text never share the same pixels, so
       nothing to fade or tune per content length. */
    .home-story-body .home-hero-banner.is-visible {
        grid-template-columns: 1fr;
        min-height: 0;
        background: linear-gradient(165deg, #fff7ec 0%, #fdf1ef 100%);
    }

    .home-story-body .home-hero-copy {
        max-width: 100%;
        justify-self: stretch;
        order: 1;
    }

    .home-hero-banner .visual-column {
        display: block;
        order: 2;
        height: auto;
        min-height: 0;
        margin-top: 24px;
    }

    .home-hero-banner .product-visual-panel {
        position: relative;
        height: auto;
        max-height: none;
        aspect-ratio: 4 / 3;
        border-radius: 20px;
        overflow: hidden;
        opacity: 1;
        pointer-events: auto;
        box-shadow: 0 20px 50px rgba(33, 22, 21, 0.12);
    }

    .home-trust-strip article {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 253, 248, 0.24);
    }

    .home-trust-strip article:last-child {
        border-bottom: 0;
    }

    .cycle-grid article {
        border-right: 0;
        border-bottom: 1px solid rgba(107, 20, 41, 0.12);
    }

    .cycle-grid article:last-child {
        border-bottom: 0;
    }

    .proof-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .hero-actions,
    .home-anchor-note,
    .philosophy-points {
        grid-template-columns: 1fr;
    }

    .hero-actions {
        display: grid;
    }

    .home-hero-title {
        max-width: 18ch;
        font-size: clamp(32px, 9vw, 46px);
        line-height: 1.16;
    }

    .ritual-signals--premium {
        gap: 16px 22px;
    }

    .ritual-signal {
        padding-right: 0;
        margin-right: 0;
        border-right: 0;
        flex: 1 1 auto;
        min-width: 128px;
    }

    .home-story-body .screen-section.is-visible {
        min-height: calc(100svh - 94px);
    }

    .home-philosophy,
    .two-minute-ritual,
    .ritual-cycle,
    .product-proof,
    .site-footer {
        padding: 46px 18px;
    }

    .home-story-body .home-hero-banner.is-visible {
        min-height: 0;
        padding: 22px 18px 28px;
    }

    .home-trust-strip {
        padding: 0 18px;
    }

    .home-trust-strip article {
        min-height: 78px;
        padding: 16px 0;
    }

    .home-philosophy h2,
    .two-minute-copy h2,
    .cycle-heading h2,
    .proof-heading h2 {
        font-size: clamp(34px, 11vw, 48px);
    }

    .home-philosophy-media {
        height: 360px;
        min-height: 360px;
    }

    .two-minute-media {
        min-height: 420px;
    }

    .two-minute-media img {
        object-position: 51% 50%;
    }

    .cycle-grid article,
    .proof-cards article {
        min-height: 0;
    }

    .proof-cards img {
        min-height: 0;
    }
}