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

.loop-placeholder { position: relative; display: grid; min-height: 20rem; place-items: end start; overflow: hidden; padding: 1.5rem; background: var(--emberway-base-1); isolation: isolate; }
.loop-placeholder::before, .loop-placeholder::after { position: absolute; z-index: -1; content: ""; }
.loop-placeholder::before { top: 22%; left: -10%; width: 120%; height: 24%; border-block: 1px solid rgb(32 35 33 / 16%); transform: rotate(-8deg); }
.loop-placeholder::after { top: 50%; left: 50%; width: 42%; aspect-ratio: 1; border: 1px solid rgb(182 106 60 / 42%); border-radius: 50%; transform: translate(-50%, -50%); }
.loop-placeholder span, .loop-direction__visual span { font-family: "Montserrat", sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.loop-placeholder.has-media { padding: 0; }
.loop-placeholder.has-media::before, .loop-placeholder.has-media::after { display: none; }
.loop-placeholder.has-media img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; }

.loop-hero { padding-block: clamp(4rem, 8vw, 7rem); background: linear-gradient(120deg, var(--emberway-base-2), var(--emberway-base-1)); }
.loop-hero__grid, .loop-sizing__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(24rem, 1.1fr); align-items: center; gap: clamp(3rem, 8vw, 7rem); }
.loop-hero h1 { margin-bottom: 1.5rem; font-size: clamp(2.4rem, 3vw, 2.65rem); letter-spacing: -0.045em; }
.loop-hero h1 span { display: block; }
.loop-hero .loop-lead { margin-bottom: 2rem; }
.loop-placeholder--hero { min-height: 0; aspect-ratio: 1; background: linear-gradient(150deg, var(--emberway-contrast-3), var(--emberway-contrast-1)); color: var(--emberway-base-2); }
.loop-placeholder--hero { --loop-x: 51%; --loop-y: 36%; --loop-scale: 1; }
.loop-placeholder--hero.has-media img { object-fit: cover; object-position: var(--loop-x) var(--loop-y); background: var(--emberway-base-1); transform: scale(var(--loop-scale)); transform-origin: var(--loop-x) var(--loop-y); }
.loop-placeholder--hero::before, .loop-placeholder--hero::after { border-color: rgb(233 228 220 / 22%); }

.loop-availability { padding-block: clamp(2rem, 4vw, 3.5rem); }
.loop-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%); }
.loop-availability__panel .emberway-eyebrow { color: var(--emberway-accent-3); }
.loop-availability__panel p:last-child { max-width: 48rem; margin: 0; color: var(--emberway-base-2); }
.loop-spark { position: relative; display: block; width: 1.75rem; height: 1.75rem; margin-top: 0.2rem; }
.loop-spark::before, .loop-spark::after { position: absolute; top: 50%; left: 50%; width: 100%; height: 0.125rem; background: var(--emberway-accent-3); content: ""; transform: translate(-50%, -50%); }
.loop-spark::after { transform: translate(-50%, -50%) rotate(90deg); }

.loop-idea { background: var(--emberway-base-3); }
.loop-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.loop-comparison .loop-placeholder { min-height: clamp(24rem, 42vw, 36rem); }
.loop-placeholder--day { background: linear-gradient(145deg, #d8d2c7, var(--emberway-base-3)); color: var(--emberway-contrast-2); }
.loop-placeholder--light { background: radial-gradient(circle at 52% 43%, rgb(214 161 92 / 55%), transparent 18%), linear-gradient(145deg, var(--emberway-contrast-3), var(--emberway-contrast-1)); color: var(--emberway-base-2); }
.loop-placeholder--light::before { border-color: rgb(247 243 236 / 20%); }
.loop-comparison__label { position: absolute; bottom: 1rem; left: 1rem; z-index: 2; padding: 0.5rem 0.7rem; background: rgb(32 35 33 / 78%); color: var(--emberway-base-2); line-height: 1; }

.loop-colours { background: var(--emberway-contrast-1); }
.loop-colours h2 { color: var(--emberway-base-2); }
.loop-colours .emberway-eyebrow { color: var(--emberway-accent-3); }
.loop-colours .loop-section__intro { max-width: 70rem; }
.loop-colours h2 { text-wrap: balance; }
.loop-directions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.loop-direction { display: flex; min-width: 0; flex-direction: column; background: var(--emberway-base-3); color: var(--emberway-contrast-1); text-decoration: none; touch-action: manipulation; transition: transform 160ms ease, box-shadow 160ms ease; }
.loop-direction:visited { color: var(--emberway-contrast-1); }
.loop-direction:focus-visible { outline: 3px solid var(--emberway-accent-3); outline-offset: 4px; box-shadow: 0 0 0 2px var(--emberway-contrast-1); }
.loop-direction__visual { display: grid; min-height: 0; aspect-ratio: 1; place-items: end start; padding: 1.25rem; color: var(--emberway-base-3); }
.loop-direction__visual.has-media { padding: 0; overflow: hidden; }
.loop-direction__visual.has-media img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; object-position: var(--loop-x) var(--loop-y); transform: scale(var(--loop-scale)); transform-origin: var(--loop-x) var(--loop-y); }
.loop-direction--forest { --loop-x: 51%; --loop-y: 36%; --loop-scale: 1; }
.loop-direction--ocean { --loop-x: 50%; --loop-y: 48%; --loop-scale: 1.05; }
.loop-direction--sunset { --loop-x: 51%; --loop-y: 42%; --loop-scale: 1.01; }
.loop-direction--midnight { --loop-x: 50%; --loop-y: 48%; --loop-scale: 1.04; }
.loop-direction__content { padding: 1.25rem; }
.loop-direction h3 { margin: 0 0 0.25rem; font-size: 1rem; letter-spacing: 0.08em; }
.loop-direction__colour { margin: 0 0 1.25rem; color: var(--emberway-contrast-3); }
.loop-direction__buckle, .loop-direction__slider { margin: 0; color: var(--emberway-contrast-2); font-size: 0.8rem; }
.loop-direction__slider { margin-top: 0.85rem; }
.loop-direction__buckle strong, .loop-direction__slider strong { display: block; margin-bottom: 0.25rem; color: var(--emberway-accent-2); font-size: 0.68rem; letter-spacing: 0.1em; }
.loop-direction--midnight .loop-direction__visual { background: linear-gradient(160deg, var(--emberway-contrast-4), var(--emberway-contrast-1)); }
.loop-direction--ocean .loop-direction__visual { background: linear-gradient(160deg, #5b9a9c, #255568); }
.loop-direction--sunset .loop-direction__visual { background: linear-gradient(160deg, var(--emberway-accent-2), var(--emberway-contrast-1)); }
.loop-direction--forest .loop-direction__visual { background: linear-gradient(160deg, var(--emberway-base-3), #cbc9bd); color: var(--emberway-contrast-1); }

@media (hover: hover) and (pointer: fine) {
	.loop-direction:hover { color: var(--emberway-contrast-1); transform: translateY(-0.2rem); box-shadow: 0 1rem 2rem rgb(20 22 21 / 28%); }
}

.loop-sizing { background: var(--emberway-base-3); }
.loop-sizing__grid { grid-template-columns: minmax(0, 1.15fr) minmax(24rem, 0.85fr); }
.loop-placeholder--measure { display: grid; min-height: 0; aspect-ratio: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); background: linear-gradient(145deg, var(--emberway-base-1), #d6d0c4); }
.loop-placeholder--measure::after { width: 55%; }
.loop-measure-step { position: relative; min-width: 0; aspect-ratio: 1; overflow: hidden; }
.loop-placeholder--measure.has-media .loop-measure-step img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--emberway-base-1); }
.loop-measure-step:nth-child(1) img, .loop-measure-step:nth-child(2) img { object-position: center 9%; }
.loop-measure-step:nth-child(3) img { object-position: center 5%; }
.loop-measure-step:nth-child(4) img { object-position: center 11%; }
.loop-measure-step__number { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; display: grid; width: 2rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: var(--emberway-accent-1); color: var(--emberway-base-2); font-size: 0.8rem !important; font-weight: 700; line-height: 1; }
.loop-sizing__instruction { max-width: 42rem; 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; text-wrap: balance; }

.loop-details { background: var(--emberway-base-2); }
.loop-details__heading h2 span, .loop-details__heading .loop-lead span { display: block; }
.loop-details__heading .loop-lead span + span { margin-top: 0.35rem; }
.loop-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.loop-placeholder--macro { min-height: 0; aspect-ratio: 1; background: linear-gradient(150deg, #bbb5a9, var(--emberway-contrast-3)); color: var(--emberway-base-3); }
.loop-placeholder--macro::before, .loop-placeholder--macro::after { border-color: rgb(247 243 236 / 22%); }
.loop-placeholder--buckle { background: linear-gradient(150deg, var(--emberway-contrast-3), var(--emberway-contrast-1)); }
.loop-placeholder--buckle.has-media img { object-fit: cover; object-position: 54% center; background: var(--emberway-contrast-1); }
.loop-placeholder--slider { background: radial-gradient(circle at center, rgb(214 161 92 / 35%), transparent 25%), var(--emberway-contrast-2); }

.loop-firefly-link { background: var(--emberway-base-3); }
.loop-link-row { display: flex; align-items: end; justify-content: space-between; gap: 3rem; }
.loop-link-row > div { max-width: 52rem; flex: 1 1 auto; }
.loop-placeholder--cross-sell { width: 14rem; min-height: 0; aspect-ratio: 1; max-width: 14rem !important; flex: 0 0 14rem !important; }
.loop-placeholder--cross-sell.has-media img { object-position: center 42%; }
.loop-firefly-link h2 { max-width: 24ch; text-wrap: balance; }
.loop-firefly-link .loop-lead span { display: block; }
.loop-firefly-link .loop-lead span + span { margin-top: 0.35rem; }

.loop-made-small { padding-block: clamp(3rem, 5vw, 4.5rem); background: var(--emberway-contrast-2); }
.loop-made-small h2, .loop-made-small .loop-lead { color: var(--emberway-base-2); }
.loop-made-small .emberway-eyebrow { color: var(--emberway-accent-3); }
.loop-made-small .loop-copy-block { max-width: 64rem; }
.loop-made-small__note { width: fit-content; max-width: 100%; margin: 1.5rem 0 0; color: var(--emberway-accent-3); font-family: "Montserrat", sans-serif; font-weight: 700; text-wrap: balance; }

.loop-closing { padding-block: clamp(4rem, 8vw, 7rem); background: var(--emberway-accent-2); color: var(--emberway-base-3); text-align: center; }
.loop-closing__inner { max-width: 50rem; }
.loop-closing h2 { margin-bottom: 0; color: var(--emberway-base-3); font-size: clamp(2rem, 4vw, 3.5rem); }
.loop-closing h2 span { display: block; }
.loop-closing .emberway-eyebrow { color: var(--emberway-base-1); }
.loop-closing__choices { color: var(--emberway-base-3); font-family: "Montserrat", sans-serif; font-weight: 700; }
.loop-closing__inner > p:not(.loop-closing__choices) { max-width: 52rem; margin-inline: auto; }
.loop-closing .emberway-button-outline { margin-top: 1.5rem; border-color: var(--emberway-base-3); color: var(--emberway-base-3); }

/* Keep the complete design section visually before sizing. */
.emberway-loop { display: flex; flex-direction: column; }
.loop-hero { order: 1; }
.loop-availability { order: 2; }
.loop-idea { order: 3; }
.loop-colours { order: 4; }
.loop-details { order: 5; }
.loop-sizing { order: 6; }
.loop-firefly-link { order: 7; }
.loop-closing { order: 8; }

@media (max-width: 1024px) {
	.loop-hero__grid, .loop-sizing__grid { gap: 3rem; }
	.loop-directions, .loop-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

@media (min-width: 1200px) {
	.loop-hero h1 span { white-space: nowrap; }
}

@media (max-width: 767px) {
	.loop-hero { padding-block: 3.5rem; }
	.loop-hero__grid, .loop-sizing__grid, .loop-comparison, .loop-detail-grid { grid-template-columns: 1fr; }
	.loop-placeholder--hero { min-height: 22rem; }
	.loop-comparison .loop-placeholder { min-height: 18rem; }
	.loop-availability__panel { grid-template-columns: 1fr; }
	.loop-spark { width: 1.4rem; height: 1.4rem; }
	.loop-link-row { align-items: stretch; flex-direction: column; }
}

@media (max-width: 480px) {
	.loop-directions { grid-template-columns: 1fr; }
	.loop-direction__visual { min-height: 0; }
}