.breadcrumb { display: flex; min-height: 62px; align-items: center; gap: 10px; color: var(--color-muted); font-size: .84rem; }
.breadcrumb a { color: var(--color-primary-dark); font-weight: 700; }

.collection-hero { position: relative; isolation: isolate; display: grid; min-height: min(720px, calc(100vh - 88px)); align-items: center; overflow: hidden; padding: 82px 0 90px; color: #fff; background: #201c1b; }
.collection-hero__backdrop { position: absolute; z-index: -2; inset: 0; background: url('../../../images/home/caratvella-assets/hero-engagement.jpg') center / cover no-repeat; }
.collection-hero::after { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(90deg, rgba(23, 20, 19, .88) 0%, rgba(23, 20, 19, .68) 47%, rgba(23, 20, 19, .2) 100%); }
.collection-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.collection-hero__copy { max-width: 690px; }
.collection-hero h1 { margin-bottom: 20px; text-wrap: balance; }
.collection-hero__copy > p:not(.eyebrow) { max-width: 660px; margin-bottom: 14px; color: #f6f0e7; font-size: clamp(1rem, 1.6vw, 1.12rem); }
.collection-hero__actions { margin-top: 32px; }
.collection-hero__form { display: none; }

.overview-section { padding: 104px 0; }
.overview-heading { display: flex; align-items: end; justify-content: space-between; gap: 42px; margin-bottom: 42px; }
.overview-heading > div { max-width: 710px; }
.overview-heading h2 { margin-bottom: 0; }
.overview-heading > p { max-width: 475px; margin: 0; color: var(--color-muted); }

.category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.category-card { display: grid; min-height: 470px; overflow: hidden; grid-template-rows: auto 1fr; border: 1px solid rgba(155, 133, 62, .16); border-radius: 18px; color: var(--color-text); background: #fff; box-shadow: 0 9px 25px rgba(44, 35, 17, .07); transition: transform .28s ease, box-shadow .28s ease; }
.category-card:focus-visible, .pathway-card:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; }
.category-card > img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .65s cubic-bezier(.2, .72, .22, 1); }
.category-card > div { display: flex; min-width: 0; flex-direction: column; padding: 22px; }
.category-card span, .pathway-card span, .detail-card span, .wear-card span, .process-card span { color: var(--color-primary-dark); font-family: Arial, sans-serif; font-size: .72rem; font-weight: 800; letter-spacing: .11em; }
.category-card h3 { margin: 10px 0 9px; font-size: 1.3rem; }
.category-card p { margin: 0; color: var(--color-muted); font-size: .92rem; line-height: 1.55; }
.category-card b, .pathway-card b { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px; color: var(--color-primary-dark); font-size: .82rem; }
.category-card i, .pathway-card i { font-style: normal; transition: transform .2s ease; }

.process-section { background: linear-gradient(180deg, #faf8f3 0%, #fff 100%); }
.image-heading { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; margin-bottom: 40px; }
.image-heading > img { width: 100%; min-height: 285px; max-height: 360px; border-radius: 20px; object-fit: cover; box-shadow: var(--shadow); }
.image-heading h2 { margin-bottom: 16px; }
.image-heading > div > p:not(.eyebrow) { max-width: 620px; margin-bottom: 0; color: var(--color-muted); }
.process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.process-card { min-width: 0; min-height: 220px; padding: 24px 21px; border-top: 3px solid var(--color-primary); background: #fff; box-shadow: 0 9px 23px rgba(44, 35, 17, .07); transition: transform .25s ease, box-shadow .25s ease; }
.process-card span { display: block; margin-bottom: 28px; }
.process-card h3 { margin-bottom: 9px; font-size: 1.1rem; }
.process-card p { margin: 0; color: var(--color-muted); font-size: .88rem; line-height: 1.55; }

.pathways-section { background: #fff; }
.pathway-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pathway-card { display: grid; min-height: 520px; overflow: hidden; grid-template-rows: auto 1fr; border-radius: 18px; color: var(--color-text); background: #f8f5ed; box-shadow: 0 9px 25px rgba(44, 35, 17, .08); transition: transform .28s ease, box-shadow .28s ease; }
.pathway-card > img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s ease; }
.pathway-card > div { display: flex; min-width: 0; flex-direction: column; padding: 24px; }
.pathway-card h3 { margin: 10px 0; font-size: 1.3rem; }
.pathway-card p { margin: 0; color: var(--color-muted); font-size: .92rem; line-height: 1.55; }

.details-section { background: #f7f5ef; }
.details-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.detail-card { min-width: 0; overflow: hidden; border: 1px solid rgba(155, 133, 62, .14); border-radius: 16px; background: #fff; box-shadow: 0 8px 22px rgba(44, 35, 17, .06); transition: transform .28s ease, box-shadow .28s ease; }
.detail-card > img { width: 100%; height: 180px; object-fit: cover; transition: transform .55s ease; }
.detail-card > div { padding: 22px; }
.detail-card h3 { margin: 9px 0; font-size: 1.17rem; }
.detail-card p { margin: 0; color: var(--color-muted); font-size: .9rem; line-height: 1.55; }

.wear-section { color: #fff; background: #292422; }
.overview-heading--light .eyebrow { color: #ead684; }
.overview-heading--light > p { color: #eee5d7; }
.wear-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.wear-card { position: relative; isolation: isolate; display: grid; min-height: 430px; overflow: hidden; align-items: end; border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; background: #332d29; transition: transform .28s ease, box-shadow .28s ease; }
.wear-card::after { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(180deg, rgba(17, 14, 13, .03) 18%, rgba(17, 14, 13, .9) 92%); }
.wear-card > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.wear-card > div { padding: 25px 23px; }
.wear-card span { color: #ead684; }
.wear-card h3 { margin: 9px 0; color: #fff; font-size: 1.2rem; }
.wear-card p { margin: 0; color: #f2eadf; font-size: .9rem; line-height: 1.55; }

.split-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1fr); gap: clamp(38px, 7vw, 104px); align-items: center; }
.split-layout--reverse { grid-template-columns: minmax(360px, 1fr) minmax(0, .9fr); }
.split-layout--reverse > img { order: 2; }
.section-image { width: 100%; min-height: 440px; max-height: 620px; border-radius: 20px; object-fit: cover; box-shadow: var(--shadow); }
.split-layout__content > p:not(.eyebrow) { max-width: 660px; color: var(--color-muted); }
.guide-section { background: #fbfaf6; }
.step-list { display: grid; gap: 13px; margin: 27px 0 0; padding: 0; list-style: none; counter-reset: overview-step; }
.step-list li { display: grid; min-width: 0; grid-template-columns: 34px 1fr; column-gap: 14px; align-items: baseline; }
.step-list li::before { grid-row: span 2; counter-increment: overview-step; content: "0" counter(overview-step); color: var(--color-primary-dark); font-family: Arial, sans-serif; font-size: .77rem; font-weight: 800; letter-spacing: .05em; }
.step-list b { font-size: .96rem; }
.step-list span { grid-column: 2; color: var(--color-muted); font-size: .9rem; line-height: 1.5; }

.business-section { color: #fff; background: linear-gradient(124deg, #302923, #1f1b19); }
.business-section .section-image { box-shadow: 0 18px 45px rgba(0, 0, 0, .24); }
.business-section .eyebrow { color: #f1d980; }
.business-section .split-layout__content > p:not(.eyebrow) { margin-bottom: 12px; color: #eee4d7; }
.business-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 25px; }
.business-card { min-width: 0; padding: 17px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 14px; background: rgba(255, 255, 255, .08); transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.business-card h3 { margin: 0 0 7px; color: #fff; font-size: 1rem; }
.business-card p { margin: 0; color: #eee4d7; font-size: .84rem; line-height: 1.5; }

.faq-section { background: #f7f5ef; }
.faq-layout { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1fr); gap: clamp(36px, 7vw, 96px); align-items: start; }
.faq-layout__image { position: sticky; top: 24px; width: 100%; min-height: 590px; max-height: 720px; border-radius: 20px; object-fit: cover; box-shadow: var(--shadow); }
.faq-intro { margin-bottom: 25px; color: var(--color-muted); }
.faq-list { display: grid; gap: 10px; }
.faq-list article { overflow: hidden; border: 1px solid var(--color-line); border-radius: 13px; background: #fff; }
.faq-list button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 21px; border: 0; color: var(--color-text); background: transparent; text-align: left; }
.faq-list h3 { margin: 0; font-size: 1.03rem; letter-spacing: -.02em; }
.faq-list button > span { flex: 0 0 auto; color: var(--color-primary-dark); font-family: Arial, sans-serif; font-size: 1.5rem; font-weight: 400; transition: transform .25s ease; }
.faq-list article > div { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.faq-list article > div > p { overflow: hidden; margin: 0 21px; color: var(--color-muted); font-size: .92rem; }
.faq-list article.is-open > div { grid-template-rows: 1fr; }
.faq-list article.is-open > div > p { padding-bottom: 19px; }
.faq-list article.is-open button > span { transform: rotate(45deg); }

.final-inquiry { padding: 100px 0; color: #fffaf0; background: linear-gradient(180deg, #7b7268 0%, #5c554e 100%); }
.final-inquiry__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(350px, .76fr); gap: clamp(42px, 8vw, 116px); align-items: center; }
.final-inquiry__copy > img { width: 100%; height: 270px; margin-bottom: 28px; border-radius: 18px; object-fit: cover; box-shadow: 0 16px 38px rgba(30, 24, 18, .23); }
.final-inquiry .eyebrow { color: #f2d98d; }
.final-inquiry h2 { color: #fffaf0; }
.final-inquiry__copy > p { max-width: 560px; color: #f2eee6; }
.final-inquiry__form, .collection-hero__form { gap: 15px; padding: 30px; border-radius: 18px; color: var(--color-text); background: #fff; box-shadow: 0 18px 45px rgba(25, 20, 15, .2); }
.final-inquiry__form { display: grid; }
.final-inquiry__form label, .collection-hero__form label { display: grid; gap: 6px; font-size: .82rem; font-weight: 800; }
.final-inquiry__form input, .final-inquiry__form textarea, .collection-hero__form input, .collection-hero__form textarea { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--color-line); border-radius: 10px; color: var(--color-text); background: #fff; resize: vertical; }
.final-inquiry__form input:focus-visible, .final-inquiry__form textarea:focus-visible, .collection-hero__form input:focus-visible, .collection-hero__form textarea:focus-visible { border-color: var(--color-primary); outline: 3px solid rgba(216, 192, 120, .28); }
.final-inquiry__form .button, .collection-hero__form .button { width: 100%; }

@media (min-width: 1021px) {
    .collection-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(350px, .65fr); gap: 72px; }
    .collection-hero__form { display: grid; }
    .collection-hero__form-label { margin: 0; color: var(--color-primary); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
    .collection-hero__form h2 { margin: -4px 0 7px; font-size: 2rem; }
}

@media (hover: hover) and (pointer: fine) {
    .category-card:hover, .pathway-card:hover, .detail-card:hover, .wear-card:hover, .process-card:hover { box-shadow: var(--shadow); transform: translateY(-5px); }
    .category-card:hover > img, .pathway-card:hover > img, .detail-card:hover > img, .wear-card:hover > img { transform: scale(1.045); }
    .category-card:hover i, .pathway-card:hover i { transform: translateX(4px); }
    .business-card:hover { border-color: rgba(216, 192, 120, .75); background: rgba(255, 255, 255, .13); transform: translateY(-5px); }
}

@media (max-width: 980px) {
    .category-grid, .details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .process-grid, .wear-grid, .business-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pathway-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pathway-card:last-child { grid-column: 1 / -1; }
    .split-layout, .split-layout--reverse, .faq-layout, .final-inquiry__grid { grid-template-columns: 1fr; }
    .split-layout--reverse > img { order: initial; }
    .section-image { min-height: 360px; max-height: 560px; }
    .faq-layout__image { position: static; min-height: 360px; max-height: 520px; }
}

@media (max-width: 760px) {
    .collection-hero { min-height: 590px; padding: 72px 0; }
    .collection-hero::after { background: linear-gradient(90deg, rgba(23, 20, 19, .87), rgba(23, 20, 19, .5)); }
    .overview-section { padding: 76px 0; }
    .overview-heading { display: grid; gap: 16px; margin-bottom: 30px; }
    .image-heading { grid-template-columns: 1fr; gap: 24px; margin-bottom: 29px; }
    .image-heading > img { min-height: 250px; max-height: 340px; }
    .final-inquiry { padding: 76px 0; }
}

@media (max-width: 540px) {
    .category-grid, .pathway-grid, .details-grid, .process-grid, .wear-grid, .business-grid { grid-template-columns: 1fr; }
    .pathway-card:last-child { grid-column: auto; }
    .category-card, .pathway-card { min-height: auto; }
    .detail-card > img { height: auto; aspect-ratio: 16 / 10; }
    .wear-card { min-height: 360px; }
    .section-image { min-height: 280px; }
    .final-inquiry__copy > img { height: 220px; }
    .final-inquiry__form { padding: 23px; }
}

@media (prefers-reduced-motion: reduce) {
    .category-card, .pathway-card, .detail-card, .wear-card, .process-card, .business-card,
    .category-card img, .pathway-card img, .detail-card img, .wear-card img { transition: none; }
}