/* KnurlPearls page */
.emberway-knurlpearls { overflow: hidden; background: var(--emberway-base-2); }
.emberway-knurlpearls h1, .emberway-knurlpearls h2 { margin-top: 0; }
.emberway-knurlpearls h2 { font-size: clamp(2rem, 4vw, 3.6rem); }
.knurl-section { padding-block: var(--emberway-section-spacing); }
.knurl-copy-block, .knurl-section__intro { max-width: 48rem; }
.knurl-section__intro { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.knurl-lead { margin-bottom: 0; color: var(--emberway-contrast-3); font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.75; }

.knurl-placeholder { position: relative; display: grid; min-height: 20rem; place-items: end start; overflow: hidden; padding: 1.5rem; background: var(--emberway-base-1); isolation: isolate; }
.knurl-placeholder::before, .knurl-placeholder::after { position: absolute; z-index: -1; content: ""; }
.knurl-placeholder::before { inset: 0; background: repeating-linear-gradient(45deg, transparent 0 0.55rem, rgb(32 35 33 / 10%) 0.55rem 0.65rem); }
.knurl-placeholder::after { top: 50%; left: 14%; width: 2.15rem; aspect-ratio: 1; border: 1px solid rgb(182 106 60 / 60%); border-radius: 50%; box-shadow: 2.8rem 0 0 -1px var(--emberway-base-1), 2.8rem 0 0 0 rgb(182 106 60 / 48%), 5.6rem 0 0 -1px var(--emberway-base-1), 5.6rem 0 0 0 rgb(182 106 60 / 38%); }
.knurl-placeholder span { font-family: "Montserrat", sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.knurl-placeholder.has-media { padding: 0; }
.knurl-placeholder.has-media::before, .knurl-placeholder.has-media::after { display: none; }
.knurl-placeholder.has-media img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; }

.knurl-hero { padding-block: clamp(4rem, 8vw, 7rem); background: linear-gradient(125deg, var(--emberway-base-2), var(--emberway-base-1)); }
.knurl-hero__grid, .knurl-split, .knurl-origin__grid, .knurl-personalisation__grid, .knurl-broader-use__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(24rem, 1.1fr); align-items: center; gap: clamp(3rem, 8vw, 7rem); }
.knurl-hero h1 { max-width: 10ch; margin-bottom: 1rem; font-size: clamp(3rem, 6.5vw, 6rem); letter-spacing: -0.05em; }
.knurl-hero h1 span, .knurl-hero__subhead span { display: block; }
.knurl-hero__subhead { margin: 0 0 0.75rem; color: var(--emberway-contrast-1); font-family: "Montserrat", sans-serif; font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 700; }
.knurl-hero__subhead span:last-child { width: max-content; max-width: 100%; text-wrap: balance; }
.knurl-hero .knurl-lead { margin-bottom: 2rem; }
.knurl-placeholder--hero { min-height: clamp(28rem, 52vw, 42rem); background: linear-gradient(150deg, var(--emberway-contrast-3), var(--emberway-contrast-1)); color: var(--emberway-base-2); }
.knurl-placeholder--hero.has-media img { object-position: center 52%; }
.knurl-placeholder--hero::before { background: repeating-linear-gradient(45deg, transparent 0 0.65rem, rgb(247 243 236 / 9%) 0.65rem 0.78rem); }
.knurl-placeholder--hero::after { border-color: rgb(214 161 92 / 72%); box-shadow: 2.8rem 0 0 -1px var(--emberway-contrast-2), 2.8rem 0 0 0 rgb(214 161 92 / 58%), 5.6rem 0 0 -1px var(--emberway-contrast-2), 5.6rem 0 0 0 rgb(214 161 92 / 44%); }

.knurl-availability { padding-block: clamp(2rem, 4vw, 3.5rem); }
.knurl-availability__panel { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: clamp(1.25rem, 3vw, 2rem); padding: clamp(1.75rem, 4vw, 3rem); border-radius: var(--emberway-radius); background: var(--emberway-accent-2); color: var(--emberway-base-3); box-shadow: 0 1rem 2.5rem rgb(32 35 33 / 12%); }
.knurl-availability__panel .emberway-eyebrow { color: var(--emberway-accent-3); }
.knurl-availability__panel p:last-child { max-width: 48rem; margin: 0; color: var(--emberway-base-2); }
.knurl-spark { position: relative; display: block; width: 1.75rem; height: 1.75rem; margin-top: 0.2rem; }
.knurl-spark::before, .knurl-spark::after { position: absolute; top: 50%; left: 50%; width: 100%; height: 0.125rem; background: var(--emberway-accent-3); content: ""; transform: translate(-50%, -50%); }
.knurl-spark::after { transform: translate(-50%, -50%) rotate(90deg); }

.knurl-origin { background: var(--emberway-base-3); }
.knurl-origin__grid { grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.95fr); }
.knurl-origin__content { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
.knurl-origin h2 { max-width: 18ch; text-wrap: balance; }
.knurl-origin__copy p:first-child { margin-top: 0; }
.knurl-placeholder--bead-detail { min-height: 0; aspect-ratio: 4 / 5; }
.knurl-placeholder--bead-detail.has-media img { object-position: 58% 48%; }
.knurl-punchline { max-width: 38rem; margin: 2rem 0 0; padding: 1.25rem 1.5rem; border-left: 0.25rem solid var(--emberway-accent-1); background: var(--emberway-base-2); color: var(--emberway-contrast-1); font-family: "Montserrat", sans-serif; font-weight: 700; }
.knurl-punchline span { display: block; }
.knurl-punchline span + span { margin-top: 0.25rem; text-wrap: balance; }

.knurl-box-cta { padding-block: clamp(1.5rem, 3vw, 2.25rem); background: var(--emberway-base-2); }
.knurl-box-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(1.25rem, 2.5vw, 1.75rem); border: 1px solid var(--emberway-base-1); border-radius: var(--emberway-radius); background: var(--emberway-base-3); }
.knurl-box-cta__inner .emberway-eyebrow { margin-bottom: 0.3rem; }
.knurl-box-cta__inner p:last-child { margin: 0; color: var(--emberway-contrast-3); }
.knurl-box-cta__inner .emberway-button-outline { flex: 0 0 auto; }

.knurl-demonstration { background: var(--emberway-contrast-1); }
.knurl-demonstration h2, .knurl-demonstration .knurl-lead { color: var(--emberway-base-2); }
.knurl-demonstration .emberway-eyebrow { color: var(--emberway-accent-3); }
.knurl-media-placeholder { position: relative; display: flex; min-height: 28rem; aspect-ratio: 16 / 8; align-items: flex-end; justify-content: space-between; overflow: hidden; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid rgb(247 243 236 / 16%); background: repeating-linear-gradient(45deg, transparent 0 0.7rem, rgb(247 243 236 / 5%) 0.7rem 0.82rem), var(--emberway-contrast-2); color: var(--emberway-base-2); }
.knurl-media-placeholder::before { position: absolute; top: 50%; left: 50%; width: clamp(4rem, 8vw, 6rem); aspect-ratio: 1; border: 1px solid var(--emberway-accent-3); border-radius: 50%; content: ""; transform: translate(-50%, -50%); }
.knurl-media-placeholder__label, .knurl-media-placeholder__sequence { font-family: "Montserrat", sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; }
.knurl-demonstration__video { display: block; width: 100%; height: auto; padding: 0; object-fit: cover; }
.knurl-demonstration__video::before { display: none; }

.knurl-benefits { position: relative; isolation: isolate; }
.knurl-benefits::before { position: absolute; top: 0; right: 0; z-index: -1; width: min(34rem, 42vw); height: 100%; background: repeating-linear-gradient(45deg, transparent 0 0.6rem, rgb(182 106 60 / 6%) 0.6rem 0.7rem); content: ""; }
.knurl-benefits h2 span { display: block; }
.knurl-benefits__top { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(24rem, 1.25fr); align-items: center; gap: clamp(2rem, 6vw, 5rem); margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.knurl-benefits__top .knurl-section__intro { margin-bottom: 0; }
.knurl-placeholder--knurled-detail { min-height: 0; aspect-ratio: 16 / 9; }
.knurl-placeholder--knurled-detail.has-media img { object-position: 60% 47%; }
.knurl-benefit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.knurl-benefit { padding: clamp(1.25rem, 2.5vw, 2rem); border-top: 0.2rem solid var(--emberway-accent-1); background: var(--emberway-base-3); box-shadow: 0 0.75rem 2rem rgb(32 35 33 / 7%); }
.knurl-benefit h3 { margin: 0 0 1rem; font-size: 1rem; letter-spacing: 0.06em; }
.knurl-benefit p { margin: 0; color: var(--emberway-contrast-3); }
.knurl-benefit__icon { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; margin-bottom: 1rem; color: var(--emberway-accent-1); }
.knurl-benefit__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.knurl-originals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.knurl-original { color: var(--emberway-contrast-1); text-decoration: none; touch-action: manipulation; transition: transform 160ms ease, box-shadow 160ms ease; }
.knurl-original:visited { color: var(--emberway-contrast-1); }
.knurl-original:focus-visible { outline: 3px solid var(--emberway-accent-2); outline-offset: 4px; box-shadow: 0 0 0 2px var(--emberway-base-3); }
.knurl-original .knurl-placeholder { min-height: 0; aspect-ratio: 3 / 4; }
.knurl-original .knurl-placeholder.has-media img { object-position: center 46%; }
.knurl-original:nth-child(1) .knurl-placeholder.has-media img { object-position: 50% 45%; }
.knurl-original:nth-child(2) .knurl-placeholder.has-media img { object-position: 50% 47%; }
.knurl-original:nth-child(3) .knurl-placeholder.has-media img { object-position: 50% 46%; }
.knurl-original:nth-child(4) .knurl-placeholder.has-media img { object-position: 50% 46%; }
.knurl-original h3 { margin: 0.8rem 0 0.2rem; }
.knurl-original p { margin: 0; color: var(--emberway-contrast-3); font-size: 0.9rem; }

@media (hover: hover) and (pointer: fine) {
	.knurl-original:hover { color: var(--emberway-contrast-1); transform: translateY(-0.2rem); box-shadow: 0 1rem 2rem rgb(32 35 33 / 16%); }
}
.knurl-limited { display: grid; grid-template-columns: minmax(14rem, .72fr) minmax(0, 1.28fr); align-items: stretch; gap: 0; max-width: 58rem; margin-top: clamp(2rem, 5vw, 4rem); border: 1px solid rgb(32 35 33 / 15%); background: var(--emberway-base-3); }
.knurl-limited__image { width: 100%; min-width: 0; min-height: 0; aspect-ratio: auto; }
.knurl-limited__image.has-media img { object-position: center; }
.knurl-limited__content { align-self: center; padding: clamp(1.25rem, 3vw, 2.25rem); }
.knurl-limited__content .emberway-eyebrow { color: var(--emberway-accent-2); }
.knurl-limited__content h3 { margin: 0 0 .15rem; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.knurl-limited__content p { margin: .55rem 0; color: var(--emberway-contrast-3); }
.knurl-limited__content .knurl-limited__subheading { margin-top: 0; color: var(--emberway-contrast-1); font-family: "Montserrat", sans-serif; font-weight: 700; }
.knurl-limited__content .knurl-limited__note { font-size: .875rem; font-style: italic; }
.knurl-limited__content a { display: inline-flex; min-height: 44px; align-items: center; margin-top: .5rem; font-weight: 700; }
.knurl-closing .emberway-button-outline { display: flex; width: fit-content; margin: 1.5rem auto 0; border-color: var(--emberway-base-3); color: var(--emberway-base-3); }

.knurl-material { background: var(--emberway-base-3); }
.knurl-material h2 { max-width: 23ch; text-wrap: balance; }
.knurl-placeholder--material { min-height: clamp(24rem, 44vw, 36rem); background: linear-gradient(150deg, #a6a99f, var(--emberway-contrast-3)); color: var(--emberway-base-3); }
.knurl-material__note, .knurl-personalisation__note { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--emberway-base-1); color: var(--emberway-contrast-3); font-size: 0.9rem; }

.knurl-personalisation { background: var(--emberway-base-1); }
.knurl-personalisation h2 span { display: block; }
.knurl-options-placeholder { display: grid; gap: 2rem; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid rgb(32 35 33 / 15%); background: var(--emberway-base-2); }
.knurl-option-group > p { margin: 0 0 1rem; font-family: "Montserrat", sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; }
.knurl-swatches, .knurl-cord-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.knurl-swatches span { aspect-ratio: 1; border: 1px dashed var(--emberway-contrast-4); border-radius: 50%; background: var(--emberway-base-3); }
.knurl-cord-options span { height: 1.25rem; border: 1px dashed var(--emberway-contrast-4); background: repeating-linear-gradient(45deg, transparent 0 0.35rem, rgb(32 35 33 / 8%) 0.35rem 0.45rem), var(--emberway-base-3); }

.knurl-broader-use { background: var(--emberway-base-2); }
.knurl-broader-use__grid { grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr); }
.knurl-use-list { margin: 0; padding: 0; border-top: 1px solid var(--emberway-base-1); list-style: none; }
.knurl-use-list li { padding-block: 0.8rem; border-bottom: 1px solid var(--emberway-base-1); color: var(--emberway-contrast-2); font-family: "Montserrat", sans-serif; font-weight: 700; letter-spacing: 0.08em; }

.knurl-made-small { padding-block: clamp(3rem, 5vw, 4.5rem); background: var(--emberway-contrast-2); }
.knurl-made-small h2, .knurl-made-small .knurl-lead { color: var(--emberway-base-2); }
.knurl-made-small .emberway-eyebrow { color: var(--emberway-accent-3); }
.knurl-made-small .knurl-copy-block { max-width: 64rem; }
.knurl-made-small h2 { max-width: 24ch; text-wrap: balance; }

.knurl-closing { padding-block: clamp(4rem, 8vw, 7rem); background: var(--emberway-accent-2); color: var(--emberway-base-3); text-align: center; }
.knurl-closing__inner { max-width: 70rem; }
.knurl-closing h2 { margin-bottom: 1rem; color: var(--emberway-base-3); font-size: clamp(2rem, 4vw, 3.5rem); text-wrap: balance; }
.knurl-closing .emberway-eyebrow { color: var(--emberway-base-1); }
.knurl-closing__tagline { margin: 1rem 0 0.25rem; color: var(--emberway-accent-3); font-family: "Montserrat", sans-serif; font-size: 1.15rem; font-weight: 700; }
.knurl-closing__status { display: inline-flex; margin-top: 1.5rem; padding: 0.6rem 1rem; border: 1px solid rgb(255 255 255 / 55%); border-radius: var(--emberway-radius); color: var(--emberway-base-3); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

@media (max-width: 1024px) {
	.knurl-hero__grid, .knurl-split, .knurl-origin__grid, .knurl-personalisation__grid, .knurl-broader-use__grid { gap: 3rem; }
	.knurl-benefits__top { grid-template-columns: minmax(0, 0.8fr) minmax(20rem, 1.2fr); gap: 3rem; }
	.knurl-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.knurl-originals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.knurl-original { transition: none; }
	.knurl-original:hover { transform: none; }
}

@media (max-width: 767px) {
	.knurl-hero { padding-block: 3.5rem; }
	.knurl-hero__grid, .knurl-split, .knurl-origin__grid, .knurl-personalisation__grid, .knurl-broader-use__grid, .knurl-benefits__top, .knurl-benefit-grid { grid-template-columns: 1fr; }
	.knurl-placeholder--bead-detail { aspect-ratio: 4 / 5; }
	.knurl-placeholder--knurled-detail { aspect-ratio: 4 / 3; }
	.knurl-placeholder--hero, .knurl-placeholder--material { min-height: 22rem; }
	.knurl-availability__panel { grid-template-columns: 1fr; }
	.knurl-spark { width: 1.4rem; height: 1.4rem; }
	.knurl-media-placeholder { min-height: 20rem; aspect-ratio: 4 / 5; align-items: flex-start; flex-direction: column; }
	.knurl-originals { grid-template-columns: 1fr; }
	.knurl-limited { grid-template-columns: 1fr; }
	.knurl-limited__image { aspect-ratio: 4 / 3; }
	.knurl-box-cta__inner { align-items: stretch; flex-direction: column; gap: 1rem; }
	.knurl-box-cta__inner .emberway-button-outline { width: 100%; }
}