/* Landing: the framed-print mockups, the grid and cards, the home hero, trust and FAQ. */

/* --- Landing: mockups, grid, cards, trust, FAQ ---------------------------- */
.contour-lede { font-size: 1.125rem; line-height: 1.6; max-width: 34em; }
.has-text-align-center.contour-lede { margin-left: auto; margin-right: auto; }
.contour-hero-title { max-width: 11em; }
.contour-hero-note { margin-top: var(--wp--preset--spacing--20); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.08em; text-transform: uppercase; }

/* A framed print: mat, moulding, shadow. The image is the master, so the
   frame colour is the only thing that changes. */
.contour-mockup { margin: 0; text-align: center; }
.contour-mockup figcaption { margin-top: var(--wp--preset--spacing--20); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.contour-frame { display: inline-block; padding: 4.5%; background: #fff; border: 12px solid #1a1814; box-shadow: 0 24px 48px -20px rgba(23,21,15,.35), 0 8px 18px -10px rgba(23,21,15,.25), inset 0 0 0 1px rgba(0,0,0,.06); max-width: 100%; }
/* The border and the 4.5% mat sit outside the width, so a frame asked to fill its column overflowed it on a phone (39px on the home spotlight, 3px on every race, city and style hero). Its width may take what is left: 91% of the column, less two 12px mouldings. */
.contour-frame { max-width: calc(91% - 24px); }
.contour-frame img { display: block; width: 100%; height: auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.contour-frame--black { border-color: #1a1814; }
.contour-frame--white { border-color: #f3f1ec; }
.contour-frame--oak { border-color: #b8916a; background: #fff; }
.contour-frame--thin { border-width: 7px; padding: 5%; }
.contour-mockup--hero .contour-frame { width: min(100%, 420px); }
/* The home hero (patterns/hero.php): the room full bleed, fading into the paper on the left where the shelves are, and the words laid over that side, clear of the print. Below 1000px the room sits above the words instead. */
.contour-hero--room { --gutter: clamp(20px, 4vw, 64px); position: relative; display: flex; align-items: center; min-height: clamp(560px, 78vh, 860px); padding: 0 !important; overflow: hidden; }
.contour-hero--room > * { margin: 0; }
/* The room meets the header: no block gap above the page it opens. */
.contour-landing:has(> .contour-hero--room:first-child) { margin-block-start: 0; }
.contour-hero-room { position: absolute; inset: 0 0 0 10%; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.2) 16%, #000 32%); mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.2) 16%, #000 32%); }
.contour-hero-room img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0% 40%; }
/* The print's left edge is 35% into the photograph, which starts at 10% and is at least 90vw wide: so never left of 41.5vw. The words stop 48px short of it. */
.contour-hero-copy { position: relative; width: min(31rem, calc(41.5vw - 48px - var(--gutter))); margin-left: var(--gutter) !important; padding: var(--wp--preset--spacing--60) 0; }
.contour-hero-copy .contour-hero-title { font-size: clamp(2.4rem, 3.7vw, 3.6rem); }
.contour-hero-copy .contour-lede { font-size: 1.0625rem; }
@media (max-width: 999px) {
	.contour-hero--room { display: block; min-height: 0; }
	.contour-hero-room { position: relative; inset: auto; display: block; -webkit-mask-image: none; mask-image: none; }
	.contour-hero-room img { height: auto; aspect-ratio: 16 / 9; object-position: 45% 40%; }
	.contour-hero-copy { width: auto; max-width: 36rem; margin: 0 var(--gutter) !important; padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--60); }
}
@media (max-width: 699px) {
	/* The tall crop: the print and the sofa. */
	.contour-hero-room img { aspect-ratio: 720 / 1066; max-height: 62vh; object-position: 50% 30%; }
}
.contour-mockup--small .contour-frame { width: min(100%, 260px); border-width: 8px; }
.contour-mockup--spot .contour-frame { width: min(100%, 400px); }
.contour-hero-columns { gap: var(--wp--preset--spacing--50); }

.contour-steps .contour-step { text-align: left; }
.contour-steps .contour-mockup { margin-bottom: var(--wp--preset--spacing--30); text-align: left; }
.contour-steps h3 { margin-top: 0.25rem; margin-bottom: 0.5rem; }

.contour-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30); }
.contour-card { display: block; text-decoration: none; color: var(--wp--preset--color--ink); }
.contour-card .contour-mockup { transition: transform .25s ease; }
.contour-card:hover .contour-mockup { transform: translateY(-4px); }
.contour-card:hover { color: var(--wp--preset--color--ink); }
.contour-card-name { display: block; margin-top: var(--wp--preset--spacing--20); font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.contour-card-desc { display: block; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.contour-card:hover .contour-card-name { color: var(--wp--preset--color--accent); }

.contour-list { padding-left: 1.1em; color: var(--wp--preset--color--ink-soft); }
.contour-list li { margin-bottom: 0.5rem; }
.contour-price { font-size: 1.125rem; }

.contour-trust-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); }
.contour-trust-list li { display: flex; flex-direction: column; gap: 4px; }
.contour-trust-list strong { font-family: var(--wp--preset--font-family--display); font-weight: 600; letter-spacing: -0.01em; }
.contour-trust-list span { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }

.contour-faq-item { border-top: 1px solid var(--wp--preset--color--line); padding: 0.9rem 0; }
.contour-faq-item:last-child { border-bottom: 1px solid var(--wp--preset--color--line); }
.contour-faq-item summary { cursor: pointer; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.contour-faq-item summary::-webkit-details-marker { display: none; }
.contour-faq-item summary::after { content: "+"; color: var(--wp--preset--color--muted); font-weight: 400; margin-left: 1rem; }
.contour-faq-item[open] summary::after { content: "–"; }
.contour-faq-item p { margin: 0.6rem 0 0; }