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

.custom-hero { position: relative; isolation: isolate; overflow: hidden; padding: 104px 0 116px; color: #fff; background: #302923; }
.custom-hero__backdrop { position: absolute; z-index: -2; inset: 0; background: url('../../../images/home/caratvella-assets/hero-design-consultation.png') center / cover no-repeat; }
.custom-hero::after { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(90deg, rgba(39, 33, 29, .88), rgba(39, 33, 29, .62) 56%, rgba(39, 33, 29, .26)); }
.custom-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(42px, 8vw, 110px); align-items: center; }
.custom-hero__content { max-width: 720px; }
.custom-hero h1 { max-width: 760px; margin-bottom: 22px; }
.custom-hero__content > p:not(.eyebrow) { max-width: 705px; margin-bottom: 15px; color: #f7f2e7; font-size: 1.08rem; }
.custom-hero__content > p:not(.eyebrow):last-of-type { margin-bottom: 0; }
.custom-hero__actions { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; margin-top: 34px; }
.hero-inquiry, .custom-inquiry form { display: grid; gap: 15px; padding: 30px; border-radius: var(--radius-large); color: var(--color-text); background: #fff; box-shadow: 0 20px 45px rgba(21, 17, 13, .2); }
.hero-inquiry { display: none; gap: 13px; padding: 28px; }
.hero-inquiry .eyebrow { margin-bottom: -6px; color: var(--color-primary-dark); }
.hero-inquiry h2 { margin: -4px 0 7px; font-size: 2rem; }
.hero-inquiry label, .custom-inquiry label { display: grid; gap: 6px; color: var(--color-text); font-size: .82rem; font-weight: 800; }
.hero-inquiry label { font-size: .78rem; }
.hero-inquiry input, .hero-inquiry textarea, .custom-inquiry input, .custom-inquiry textarea { width: 100%; padding: 12px; border: 1px solid var(--color-line); border-radius: 10px; color: var(--color-text); background: #fff; resize: vertical; }
.hero-inquiry input, .hero-inquiry textarea { padding: 11px 12px; }
.hero-inquiry input:focus-visible, .hero-inquiry textarea:focus-visible, .custom-inquiry input:focus-visible, .custom-inquiry textarea:focus-visible { border-color: var(--color-primary); outline: 3px solid rgba(216, 192, 120, .25); }
.hero-inquiry .button, .custom-inquiry .button { width: 100%; }

@media (min-width: 1021px) {
    .custom-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(350px, .65fr); gap: 72px; }
    .hero-inquiry { display: grid; }
}

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

.selected-styles { padding-top: 78px; background: linear-gradient(180deg, #fff 0%, #faf8f2 100%); }
.style-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 15px; }
.style-card, .type-card, .process-card { overflow: hidden; border: 1px solid rgba(155, 133, 62, .16); border-radius: var(--radius-medium); background: #fff; box-shadow: 0 8px 24px rgba(76, 64, 34, .07); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.style-card:focus-visible, .type-card:focus-visible { outline: 3px solid rgba(216, 192, 120, .78); outline-offset: 4px; }
.style-card > img { height: auto; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .45s ease; }
.style-card > div { display: grid; align-content: start; min-height: 184px; padding: 18px; }
.style-card h3, .type-card h3, .process-card h3 { margin-bottom: 9px; font-size: 1.13rem; }
.style-card p, .type-card p, .process-card p { margin-bottom: 0; color: var(--color-muted); font-size: .9rem; line-height: 1.55; }
.style-card b, .type-card b { display: inline-flex; align-items: center; gap: 7px; margin-top: 13px; color: var(--color-primary-dark); font-size: .8rem; }
.style-card i, .type-card i { font-family: Arial, sans-serif; font-size: 1rem; font-style: normal; transition: transform .25s ease; }

.custom-process { background: #fff; }
.process-heading { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; margin-bottom: 40px; }
.process-heading > img { width: 100%; min-height: 285px; max-height: 360px; border-radius: var(--radius-large); object-fit: cover; box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease; }
.process-heading h2 { margin-bottom: 16px; }
.process-heading > div > p:not(.eyebrow) { max-width: 610px; margin-bottom: 11px; color: var(--color-muted); }
.process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.process-card { display: grid; min-height: 208px; align-content: start; padding: 23px 20px; border: 0; border-top: 3px solid var(--color-primary); border-radius: 0; color: var(--color-text); background: #fff; box-shadow: 0 9px 23px rgba(44, 35, 17, .07); }
.process-card span { display: block; margin-bottom: 26px; color: var(--color-primary-dark); font-family: Arial, sans-serif; font-size: .75rem; font-weight: 800; letter-spacing: .12em; }
.process-card h3 { margin-bottom: 9px; font-size: 1.08rem; }
.process-card p { margin: 0; color: var(--color-muted); font-size: .87rem; line-height: 1.5; }

.custom-types { background: #f7f5f0; }
.type-grid { display: grid; gap: 16px; }
.type-grid--seven { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.type-grid--seven > .type-card { grid-column: span 3; }
.type-grid--seven > .type-card:nth-child(5) { grid-column: 2 / span 3; }
.type-grid--seven > .type-card:nth-child(6) { grid-column: 5 / span 3; }
.type-grid--seven > .type-card:nth-child(7) { grid-column: 8 / span 3; }
.type-card { display: grid; min-height: 100%; grid-template-rows: auto 1fr; }
.type-card > img { height: auto; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .45s ease; }
.type-card > div { display: flex; flex-direction: column; padding: 18px; }
.type-card b { margin-top: auto; padding-top: 14px; }

.custom-split__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(34px, 7vw, 104px); align-items: center; }
.custom-split__grid > img { width: 100%; height: 480px; border-radius: var(--radius-large); object-fit: cover; box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease; }
.custom-split__grid h2 { margin-bottom: 18px; }
.custom-split__grid > div > p:not(.eyebrow) { color: var(--color-muted); }
.custom-split__grid--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); }
.custom-split__grid--reverse > img { order: 2; }
.detail-list { display: grid; gap: 8px; margin: 25px 0 0; }
.detail-list div { display: grid; grid-template-columns: minmax(150px, .62fr) minmax(0, 1fr); gap: 20px; padding: 14px 16px; border: 1px solid var(--color-line); border-radius: 11px; background: #fff; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.detail-list dt { color: var(--color-primary-dark); font-size: .86rem; font-weight: 800; }
.detail-list dd { margin: 0; color: var(--color-muted); font-size: .9rem; }

.custom-personalization { background: #fff; }
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.info-grid article { padding: 18px; border: 1px solid var(--color-line); border-radius: 12px; background: var(--color-soft); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.info-grid h3, .business-grid h3 { margin-bottom: 8px; font-size: 1.03rem; }
.info-grid p, .business-grid p { margin: 0; color: var(--color-muted); font-size: .89rem; line-height: 1.55; }

.custom-guide { background: #faf9f6; }
.guide-list { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; counter-reset: guide; }
.guide-list li { position: relative; display: grid; gap: 4px; min-height: 52px; padding: 9px 0 7px 53px; border-bottom: 1px solid var(--color-line); color: var(--color-muted); }
.guide-list li::before { position: absolute; left: 0; top: 4px; display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #fff; background: var(--color-primary); content: counter(guide, decimal-leading-zero); counter-increment: guide; font-family: Arial, sans-serif; font-size: .7rem; font-weight: 700; }
.guide-list strong { color: var(--color-text); font-size: .94rem; }
.guide-list span { font-size: .9rem; line-height: 1.5; }

.custom-brands { color: #fff; background: #39332e; }
.custom-brands .custom-split__grid > img { filter: saturate(.8) brightness(.85); }
.custom-brands .eyebrow { color: #f0d98f; }
.custom-brands .custom-split__grid > div > p:not(.eyebrow) { color: #f2eee6; }
.supporting-text { margin-top: 18px; font-weight: 700; }
.business-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.business-grid article { padding: 18px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; background: rgba(255, 255, 255, .06); transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.business-grid h3 { color: #fff; }
.business-grid p { color: #f2eee6; }

.custom-faq { background: #fff; }
.custom-faq__layout { display: grid; grid-template-columns: minmax(280px, .74fr) minmax(0, 1.1fr); gap: clamp(35px, 7vw, 95px); align-items: start; }
.custom-faq__layout > img { position: sticky; top: 24px; height: 660px; border-radius: var(--radius-large); object-fit: cover; box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease; }
.custom-faq h2 { margin-bottom: 16px; }
.faq-intro { max-width: 580px; margin-bottom: 28px; color: var(--color-muted); }
.faq-list { display: grid; gap: 10px; }
.faq-list article { overflow: hidden; border: 1px solid var(--color-line); border-radius: 12px; background: var(--color-soft); }
.faq-list button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 20px; border: 0; color: var(--color-text); background: transparent; text-align: left; }
.faq-list h3 { margin: 0; font-size: 1.03rem; }
.faq-list button > span { flex: 0 0 auto; color: var(--color-primary-dark); font-family: Arial, sans-serif; font-size: 1.55rem; font-weight: 400; transition: transform .25s ease; }
.faq-list article > div { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.faq-list article > div > p { overflow: hidden; margin: 0 20px; 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: 20px; }
.faq-list article.is-open button > span { transform: rotate(45deg); }

.custom-inquiry { padding: 100px 0; color: #fff; background: #625b53; }
.custom-inquiry__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(340px, .74fr); gap: clamp(42px, 8vw, 114px); align-items: center; }
.custom-inquiry__grid > div > img { width: min(100%, 390px); height: 220px; margin-bottom: 28px; border-radius: var(--radius-medium); object-fit: cover; box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease; }
.custom-inquiry h2 { margin-bottom: 17px; }
.custom-inquiry__grid > div > p:not(.eyebrow) { max-width: 560px; color: #f2eee7; }

@media (hover: hover) and (pointer: fine) {
    .style-card:hover, .type-card:hover, .process-card:hover { border-color: rgba(216, 192, 120, .75); box-shadow: var(--shadow); transform: translateY(-5px); }
    .style-card:hover > img, .type-card:hover > img { transform: scale(1.04); }
    .style-card:hover i, .type-card:hover i { transform: translateX(4px); }
    .process-heading > img:hover, .custom-split__grid > img:hover, .custom-faq__layout > img:hover, .custom-inquiry__grid > div > img:hover { box-shadow: 0 20px 42px rgba(76, 64, 34, .2); transform: translateY(-5px); }
    .detail-list div:hover { border-color: rgba(216, 192, 120, .75); box-shadow: 0 9px 23px rgba(44, 35, 17, .07); transform: translateX(4px); }
    .info-grid article:hover { border-color: rgba(216, 192, 120, .75); background: #fff; box-shadow: 0 9px 23px rgba(44, 35, 17, .07); transform: translateY(-5px); }
    .business-grid article:hover { border-color: rgba(216, 192, 120, .75); background: rgba(255, 255, 255, .13); transform: translateY(-5px); }
}

@media (max-width: 1120px) {
    .style-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .type-grid--seven { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .type-grid--seven > .type-card, .type-grid--seven > .type-card:nth-child(5), .type-grid--seven > .type-card:nth-child(6), .type-grid--seven > .type-card:nth-child(7) { grid-column: auto; }
    .type-grid--seven > .type-card:nth-child(7) { grid-column: 2; }
}
@media (max-width: 980px) {
    .custom-split__grid, .custom-split__grid--reverse, .custom-faq__layout, .custom-inquiry__grid, .process-heading { grid-template-columns: 1fr; }
    .custom-split__grid > img, .custom-split__grid--reverse > img { order: -1; min-height: 360px; height: auto; max-height: 560px; }
    .process-heading { gap: 24px; margin-bottom: 29px; }
    .process-heading > img { min-height: 250px; max-height: 340px; }
    .custom-faq__layout > img { position: static; min-height: 360px; height: auto; max-height: 520px; }
    .business-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .custom-hero__grid, .custom-heading { grid-template-columns: 1fr; }
    .custom-heading { gap: 18px; }
    .custom-hero__content { max-width: 760px; }
    .hero-inquiry { max-width: 640px; }
    .type-grid--seven { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .type-grid--seven > .type-card:nth-child(7) { grid-column: 1 / -1; width: calc(50% - 8px); justify-self: center; }
    .business-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .custom-section { padding: 76px 0; }
    .custom-heading { margin-bottom: 30px; }
    .custom-inquiry { padding: 76px 0; }
}
@media (max-width: 600px) {
    .breadcrumb { min-height: 58px; }
    .custom-hero { padding: 76px 0 82px; }
    .custom-hero__actions { flex-direction: column; align-items: flex-start; }
    .hero-inquiry, .custom-inquiry form { padding: 23px; }
    .style-grid, .process-grid, .type-grid--seven, .info-grid { grid-template-columns: 1fr; }
    .style-card > div { min-height: 0; }
    .type-grid--seven > .type-card:nth-child(7) { grid-column: auto; width: auto; justify-self: stretch; }
    .detail-list div { grid-template-columns: 1fr; gap: 4px; }
    .custom-split__grid > img, .custom-split__grid--reverse > img { height: 315px; }
    .custom-inquiry { padding: 74px 0; }
}