/* Website pattern classes, lifted from home-layout.html (wireframe v7 in code). */
/* Header */
.site-header { background: var(--near-black); color: var(--text-on-dark); position: sticky; top: 0; z-index: 10; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-top: 0.75rem; padding-bottom: 0.75rem; }
.site-header img { height: 44px; width: auto; }
.site-nav { display: none; gap: var(--space-3); }
.site-nav a { text-decoration: none; color: var(--text-on-dark); }
.site-nav a:hover { color: var(--gold); }
.site-header .header-cta { display: none; }
@media (min-width: 900px) { .site-nav { display: flex; } .site-header .header-cta { display: inline-block; } }

/* Hero */
.hero { position: relative; color: var(--text-on-dark); background-color: var(--black); background-position: center; background-size: cover; background-repeat: no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(10,10,10,0.62); }
.hero .container { position: relative; padding-top: clamp(4rem, 12vw, 8rem); padding-bottom: clamp(4rem, 12vw, 8rem); }
.hero h1 span { display: block; color: var(--gold); }
.stand-in { position: absolute; top: var(--space-2); left: var(--space-2); background: var(--gold); color: var(--near-black); font-weight: var(--weight-label); font-size: var(--size-small); padding: 0.25rem 0.75rem; border-radius: var(--radius); z-index: 1; }

/* Finance badge */
.finance-badge { width: 9rem; height: 9rem; border-radius: 50%; background: var(--gold); color: var(--near-black); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 4px solid var(--white); }
.finance-badge strong { font-size: 1.25rem; line-height: 1.1; }
.finance-badge small { font-size: 0.75rem; margin-top: 0.25rem; }
.hero .finance-badge { margin-top: var(--space-4); }
@media (min-width: 900px) { .hero .finance-badge { position: absolute; right: var(--space-4); bottom: var(--space-4); margin: 0; } }

/* Numbered points ("What that means in your home") */
.means { list-style: none; padding: 0; margin: 0 0 var(--space-3); counter-reset: means; }
.means li { position: relative; padding-left: 3.25rem; margin-bottom: var(--space-3); counter-increment: means; }
.means li::before { content: counter(means); position: absolute; left: 0; top: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--charcoal); color: var(--gold); display: flex; align-items: center; justify-content: center; font-weight: var(--weight-heading); }
.means h3 { font-size: 1.125rem; margin-bottom: 0.25rem; }
.means p { font-size: var(--size-small); margin: 0; }

/* Project card + strip */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 78%); gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-2); margin-top: var(--space-3); }
@media (min-width: 700px) { .strip { grid-auto-columns: minmax(16rem, 30%); } }
.project { scroll-snap-align: start; text-decoration: none; color: inherit; display: block; }
.project figure { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; }
.project img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.project .badge { position: absolute; top: var(--space-1); left: var(--space-1); background: var(--gold); color: var(--near-black); font-size: var(--size-label); font-weight: var(--weight-label); padding: 0.25rem 0.6rem; border-radius: var(--radius); }
.project h3 { font-size: 1.125rem; margin: var(--space-1) 0 0; }
.project p { font-size: var(--size-small); margin: 0; }

/* Steps ("How it works") */
.steps { display: flex; gap: var(--space-4); overflow-x: auto; padding: var(--space-3) 0; list-style: none; margin: 0; }
.steps button { font: inherit; background: none; border: 0; color: var(--muted-on-light); display: flex; flex-direction: column; align-items: center; gap: var(--space-1); min-width: 7rem; cursor: pointer; }
.steps .dot { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 3px solid var(--grey-4); display: flex; align-items: center; justify-content: center; font-weight: var(--weight-heading); background: var(--white); }
.steps button[aria-selected="true"] { color: var(--text-on-light); font-weight: var(--weight-heading); }
.steps button[aria-selected="true"] .dot, .steps button.done .dot { background: var(--gold); border-color: var(--gold); color: var(--near-black); }
.step-panel { background: var(--grey-1); border-radius: var(--radius); padding: var(--space-3); display: grid; gap: var(--space-3); }
@media (min-width: 900px) { .step-panel { grid-template-columns: 1fr 1.4fr; align-items: center; } }
.step-panel img { border-radius: var(--radius); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* FAQ */
.faq details { border: 1px solid var(--grey-3); border-radius: var(--radius); margin-bottom: var(--space-1); background: var(--white); }
.faq details[open] { background: var(--grey-1); }
.faq summary { cursor: pointer; padding: var(--space-2); font-weight: var(--weight-label); list-style: none; display: flex; justify-content: space-between; gap: var(--space-2); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: var(--weight-heading); }
.faq details[open] summary::after { content: "-"; }
.faq details p { padding: 0 var(--space-2) var(--space-2); margin: 0; }

/* Map placeholder */
.map { border-radius: var(--radius); background: var(--grey-3); min-height: 18rem; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-3); color: var(--muted-on-light); }

/* Call-booking card + time slots */
.chat-card { background: var(--charcoal-raised); border-radius: var(--radius); padding: var(--space-3); color: var(--text-on-dark); }
.slots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); margin: var(--space-2) 0 var(--space-3); }
.slot { font: inherit; font-size: var(--size-small); font-weight: var(--weight-label); padding: 0.6rem; border-radius: var(--radius); border: 2px solid var(--gold); background: transparent; color: var(--text-on-dark); cursor: pointer; }
.slot[aria-pressed="true"] { background: var(--gold); color: var(--near-black); }

/* Footer */
.site-footer { background: var(--black); color: var(--muted-on-dark); font-size: var(--size-small); padding: var(--space-4) 0; }
.site-footer .links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.site-footer a { color: var(--muted-on-dark); }

/* Two-column helpers */
.split { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.split > img { border-radius: var(--radius); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }