:root {
    --colour-cream: #f3efea;
    --colour-warm-white: #FFFFFF;
    --colour-text: #666666;
    --colour-text-light: #888888;
    --colour-border: #E5E0DA;
    --colour-accent: #c0b6a8;
    --colour-accent-dark: #a09688;
    --colour-button: #c0b6a8;
    --colour-button-hover: #a09688;
    --font-serif: 'Georgia', 'Times New Roman', serif;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--colour-cream);
    color: var(--colour-text);
    line-height: 1.6;
    min-height: 100vh;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

header {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--colour-border);
}

.header-logo {
    max-width: 200px;
    height: auto;
    margin-bottom: 1.5rem;
}

header h1 {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    color: var(--colour-text);
}

.header-full {
    display: block;
}

.header-sticky {
    display: none;
    position: sticky;
    top: 0;
    background: var(--colour-warm-white);
    padding: 1rem 0;
    text-align: center;
    border-bottom: 1px solid var(--colour-border);
    margin-bottom: 1.5rem;
    z-index: 100;
}

.header-sticky .sticky-brand {
    font-family: var(--font-serif);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--colour-text);
}

.header-sticky .sticky-divider {
    margin: 0 0.75rem;
    color: var(--colour-border);
}

.header-sticky .sticky-programme {
    font-family: var(--font-serif);
    font-size: 0.875rem;
    font-style: italic;
    color: var(--colour-text-light);
}

/* Header visibility states */
.container.step-beyond-first .header-full,
.container.step-beyond-first .welcome-intro {
    display: none;
}

.container.step-beyond-first .header-sticky {
    display: block;
}

.header-tagline {
    font-family: var(--font-serif);
    font-size: 0.9375rem;
    font-style: italic;
    color: var(--colour-text-light);
    margin: 0;
}

.welcome-intro {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 2rem;
    padding: 0 1rem;
}

.welcome-intro .welcome-title {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--colour-text);
    margin-bottom: 0.75rem;
}

.welcome-intro .welcome-body {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--colour-text);
    margin: 0;
}

.subtitle {
    font-family: var(--font-serif);
    font-size: 0.875rem;
    font-style: italic;
    color: var(--colour-text-light);
}

.form-section {
    background: var(--colour-warm-white);
    padding: 1.5rem;
    margin-bottom: 2.5rem;
    border: 1px solid var(--colour-border);
}

.welcome-back-notice {
    background: rgba(192, 182, 168, 0.15);
    border: 1px solid var(--colour-border);
    padding: 0.875rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
}

.welcome-back-notice p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--colour-text);
}

.reset-link {
    color: var(--colour-accent-dark);
    text-decoration: underline;
    font-size: 0.875rem;
    margin-left: 0.25rem;
}

.reset-link:hover {
    color: var(--colour-text);
}

.form-section.internal-section {
    background: #F5F3F0;
    border: 1px dashed var(--colour-accent);
    display: none;
}

.form-section.internal-section h2 {
    color: #6B5A45;
}

.mode-toggle-container {
    display: none;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #2C2C2C;
    border-radius: 4px;
}

.mode-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mode-label {
    color: #FFFFFF;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mode-btn {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    background: transparent;
    color: #AAAAAA;
    border: 1px solid #555555;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mode-btn:hover {
    border-color: #888888;
    color: #FFFFFF;
}

.mode-btn.active {
    background: var(--colour-accent);
    color: #FFFFFF;
    border-color: var(--colour-accent);
}

.mode-badge {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: #2C2C2C;
    color: #FFFFFF;
    margin-bottom: 0.75rem;
}

.internal-mode header {
    border-bottom-color: #2C2C2C;
}

.client-summary-section,
.client-answers-section,
.weighted-outcomes-section,
.commercial-prompts-section,
.handover-section,
.internal-notes-section {
    background: #F8F6F3;
    border-color: #D4C9B5;
}

.client-info-grid,
.answers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.info-item,
.answer-item {
    padding: 0.75rem;
    background: var(--colour-warm-white);
    border: 1px solid var(--colour-border);
}

.info-item strong,
.answer-item strong {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--colour-text-light);
    margin-bottom: 0.25rem;
}

.info-item p,
.answer-item p {
    font-size: 0.9375rem;
    color: var(--colour-text);
}

.sensitivities-note {
    margin-top: 1rem;
    padding: 1rem;
    background: #FFF8E7;
    border: 1px solid #E5D4A8;
}

.sensitivities-note strong {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8B7355;
    margin-bottom: 0.25rem;
}

.outcome-primary {
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--colour-warm-white);
    border-left: 3px solid var(--colour-accent);
}

.outcome-primary h4 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--colour-text-light);
    margin-bottom: 0.5rem;
}

.outcome-primary .style-name {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--colour-text);
}

.outcome-primary .secondary-note {
    font-size: 0.875rem;
    color: var(--colour-text-light);
    font-style: italic;
    margin-top: 0.25rem;
}

.commercial-list {
    list-style: none;
    padding: 0;
}

.commercial-list li {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: #FFFDF8;
    border: 1px solid #E8E4DC;
    font-size: 0.875rem;
}

.handover-note {
    margin-top: 1rem;
    padding: 0.75rem;
    background: #E8F5E9;
    border: 1px solid #A5D6A7;
    font-size: 0.875rem;
    color: #2E7D32;
}

.staff-portal {
    max-width: 600px;
}

.portal-intro {
    text-align: center;
    margin-bottom: 2rem;
}

.portal-intro p {
    margin-bottom: 0.5rem;
    color: var(--colour-text-light);
}

.mode-selection {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.mode-card {
    display: block;
    width: 100%;
    padding: 1.5rem;
    text-align: left;
    background: var(--colour-warm-white);
    border: 2px solid var(--colour-border);
    cursor: pointer;
    transition: all 0.2s ease;
}

.mode-card:hover {
    border-color: var(--colour-accent);
}

.mode-card h2 {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
    color: var(--colour-text);
}

.mode-card p {
    font-size: 0.875rem;
    color: var(--colour-text-light);
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.mode-tag {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--colour-accent);
    background: #F5F0E8;
    padding: 0.25rem 0.5rem;
}

.mode-card-secondary {
    background: #FAFAFA;
}

.portal-note {
    text-align: center;
    padding: 1rem;
    background: #F5F5F5;
    border: 1px dashed var(--colour-border);
    font-size: 0.8125rem;
    color: var(--colour-text-light);
}

.internal-form header {
    border-bottom-color: #2C2C2C;
}

.internal-form .internal-section {
    display: block;
    background: #2C2C2C;
    border: none;
}

.internal-form .internal-section h2 {
    color: #FFFFFF;
}

.internal-form .internal-section label {
    color: #CCCCCC;
}

.internal-form .internal-section input,
.internal-form .internal-section textarea {
    background: #3C3C3C;
    border-color: #555555;
    color: #FFFFFF;
}

.internal-form .internal-section input::placeholder,
.internal-form .internal-section textarea::placeholder {
    color: #888888;
}

.internal-form .internal-section .helper-text {
    color: #999999;
}

.form-group-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 600px) {
    .form-group-row {
        grid-template-columns: 1fr;
    }
}

.form-section h2 {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    color: var(--colour-accent);
}

.form-group {
    margin-bottom: 1rem;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.375rem;
    color: var(--colour-text);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.9375rem;
    font-family: var(--font-sans);
    border: 1px solid var(--colour-border);
    border-radius: 0;
    background: var(--colour-warm-white);
    color: var(--colour-text);
}

.form-group select {
    appearance: none;
    cursor: pointer;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group input[type="date"]:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--colour-accent);
}

.form-group input[type="date"] {
    cursor: pointer;
}

.form-group input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0.6;
}

.form-group input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.helper-text {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--colour-text-light);
    font-style: italic;
}

.readonly-field {
    background-color: var(--colour-cream) !important;
    color: var(--colour-text-light);
    cursor: not-allowed;
    border-color: var(--colour-border);
}

.phone-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.country-code-wrapper {
    position: relative;
    flex: 0 0 auto;
    min-width: 80px;
    max-width: 180px;
}

.country-code-select {
    width: 100% !important;
    padding-right: 1.5rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
}

/* Before selection: show full country name + code */
.country-code-select:not([data-selected="true"]) {
    min-width: 180px;
}

/* After selection: collapse to code only using overlay */
.country-code-select[data-selected="true"] {
    min-width: 80px;
    color: transparent;
}

.country-code-display {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 0.9375rem;
    color: var(--colour-text);
    font-weight: 500;
}

.country-code-select:not([data-selected="true"]) + .country-code-display {
    display: none;
}

.phone-input-row input[type="tel"] {
    flex: 1;
    min-width: 0;
}

.other-country-input {
    margin-top: 0.5rem;
}

.other-country-input input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--colour-border);
    font-size: 0.9375rem;
}

/* Mobile: ensure selector never exceeds phone field width */
@media (max-width: 480px) {
    .phone-input-row {
        flex-wrap: nowrap;
    }
    
    .country-code-wrapper {
        flex: 0 0 auto;
        max-width: 45%;
    }
    
    .country-code-select:not([data-selected="true"]) {
        min-width: 100px;
        font-size: 0.8125rem;
    }
    
    .country-code-select[data-selected="true"] {
        min-width: 70px;
    }
    
    .country-code-display {
        font-size: 0.875rem;
    }
    
    .phone-input-row input[type="tel"] {
        flex: 1 1 55%;
    }
}

.form-group select[multiple] {
    height: auto;
    min-height: 5rem;
}

.room-size-guidance {
    margin-top: 0.75rem;
    padding: 1rem;
    background: var(--colour-cream);
    border: 1px solid var(--colour-border);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.room-size-guidance .size-option {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--colour-border);
    color: var(--colour-text-light);
}

.room-size-guidance .size-option:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.room-size-guidance .size-option strong {
    color: var(--colour-text);
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.9375rem;
}

.checkbox-label input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--colour-accent);
    cursor: pointer;
}

.form-actions {
    text-align: center;
    margin-top: 2rem;
}

.btn-primary {
    display: inline-block;
    padding: 1rem 2.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--colour-button);
    color: var(--colour-warm-white);
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-primary:hover {
    background: var(--colour-button-hover);
}

.btn-secondary {
    display: inline-block;
    padding: 0.875rem 2rem;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--colour-cream);
    color: #4A4A4A;
    border: 1px solid #C8C2B8;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background: #EDE9E3;
    border-color: var(--colour-accent);
    color: #3A3A3A;
}

footer {
    text-align: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--colour-border);
    font-size: 0.8125rem;
    color: var(--colour-text-light);
}

.result-page .recommendation {
    margin-top: 1rem;
}

.rec-section {
    background: var(--colour-warm-white);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--colour-border);
}

.rec-section h3 {
    font-family: var(--font-serif);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    color: var(--colour-accent);
}

.style-moodboard {
    margin: 1.5rem 0;
    text-align: center;
}

.style-moodboard img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--colour-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.internal-moodboard {
    margin-top: 1rem;
}

.internal-moodboard img {
    max-width: 600px;
}

.style-header {
    text-align: center;
    padding: 2rem;
}

.style-header .primary-style {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.style-header .secondary-style {
    font-size: 0.9375rem;
    color: var(--colour-text-light);
    font-style: italic;
}

.summary-text {
    font-size: 1rem;
    line-height: 1.7;
}

.palette {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.colour-chip {
    padding: 0.5rem 1rem;
    background: var(--colour-cream);
    border: 1px solid var(--colour-border);
    font-size: 0.8125rem;
}

.materials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.material-item strong {
    display: block;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    color: var(--colour-text-light);
}

.material-item p {
    font-size: 0.9375rem;
}

.furniture-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.furniture-item {
    padding: 1rem;
    background: var(--colour-cream);
    border: 1px solid var(--colour-border);
}

.furniture-item h4 {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.furniture-item p {
    font-size: 0.875rem;
    color: var(--colour-text-light);
}

.wallpaper-info p {
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
}

.wallpaper-info .guidance {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--colour-border);
    font-style: italic;
}

.lighting-hardware p {
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
}

.do-not-do {
    background: #FDF8F6;
}

.do-not-do h3 {
    color: #8B5A5A;
}

.do-not-do ul {
    list-style: none;
    padding: 0;
}

.do-not-do li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
}

.do-not-do li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 6px;
    height: 6px;
    background: #8B5A5A;
    border-radius: 50%;
}

.do-not-do li:last-child {
    margin-bottom: 0;
}

.essential-additions {
    background: #F8F6F0;
    border-color: #D4C9B5;
}

.essential-additions h3 {
    color: #6B5A45;
}

.furniture-item.essential {
    background: #FFFDF8;
    border-color: #D4C9B5;
}

.furniture-item.anchor-cot {
    border-left: 3px solid #8B7355;
    background: #FDFCFA;
}

.anchor-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8B7355;
    background: #F5F0E8;
    padding: 2px 8px;
    border-radius: 3px;
    margin-left: 8px;
    vertical-align: middle;
}

.coordinating ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.coordinating li {
    padding: 0.75rem 0;
    border-bottom: 1px solid #E8E4DC;
    color: #4A4A4A;
}

.coordinating li:last-child {
    border-bottom: none;
}

.personalisation {
    background: #F8F5F0;
    border-color: #C9B9A5;
}

.personalisation h3 {
    color: #6B5A45;
}

.coordination {
    background: #F5F8F5;
    border-color: #B5C9B5;
}

.coordination h3 {
    color: #5A6B5A;
}

.next-step {
    background: #F6F8F6;
    border-color: #C5D4C5;
}

.next-step h3 {
    color: #5A6B5A;
}

.next-step-text {
    font-size: 1rem;
    font-weight: 500;
}

.actions {
    text-align: center;
    margin-top: 2rem;
}

.intro-section {
    text-align: center;
    padding: 2.5rem 2rem;
    background: var(--colour-warm-white);
}

.intro-section .section-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--colour-accent);
    margin-bottom: 1.5rem;
}

.intro-text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--colour-text);
    margin-bottom: 0.75rem;
}

.style-qualities,
.wall-options,
.colour-qualities {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.style-qualities li,
.wall-options li,
.colour-qualities li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--colour-text);
    line-height: 1.6;
}

.style-qualities li:before,
.wall-options li:before,
.colour-qualities li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.9rem;
    width: 6px;
    height: 1px;
    background: var(--colour-accent);
}

.furniture-direction p {
    margin-bottom: 1rem;
    line-height: 1.7;
}

.personal-note {
    background: #F8F5F0;
    border-color: #D4C9B5;
}

.personal-note p {
    font-style: italic;
    line-height: 1.8;
}

.next-step-section {
    text-align: center;
    padding: 2rem;
    background: #F6F8F6;
    border-color: #C5D4C5;
}

.next-step-section p {
    margin-bottom: 1rem;
    line-height: 1.7;
}

.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    margin-top: 1.5rem;
}

.cta-buttons .btn-primary {
    text-decoration: none;
}

.btn-tertiary {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: transparent;
    color: var(--colour-text-light);
    border: 1px solid var(--colour-border);
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-tertiary:hover {
    border-color: var(--colour-accent);
    color: var(--colour-accent);
}

.footer-reassurance {
    margin-bottom: 1.5rem;
}

.footer-reassurance p {
    margin-bottom: 0.25rem;
    font-style: italic;
    color: var(--colour-text-light);
}

.footer-brand {
    color: var(--colour-text-light);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.process-section {
    background: #FAFAF8;
}

.process-step {
    display: flex;
    gap: 1.25rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--colour-border);
}

.process-step:last-of-type {
    border-bottom: none;
}

.process-step.completed {
    background: linear-gradient(135deg, rgba(139, 115, 85, 0.04) 0%, rgba(139, 115, 85, 0.02) 100%);
    margin: 0 -1.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: 0.5rem;
    border-bottom: none;
}

.step-number {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--colour-accent);
    color: var(--colour-warm-white);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 50%;
}

.process-step.completed .step-number {
    background: #5a7a5a;
    position: relative;
}

.process-step.completed .step-number::after {
    content: '';
    display: block;
    width: 0.5rem;
    height: 0.75rem;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}

.process-step.completed .step-number span {
    display: none;
}

.step-content h4 {
    font-family: var(--font-serif);
    font-size: 0.9375rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
    color: var(--colour-text);
}

.process-step.completed .step-content h4 {
    color: #5a7a5a;
}

.step-content p {
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--colour-text-light);
}

.process-ongoing {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: #F5F3F0;
    border: 1px dashed var(--colour-border);
}

.process-ongoing h4 {
    font-family: var(--font-serif);
    font-size: 0.875rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
    color: var(--colour-accent);
}

.process-ongoing p {
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--colour-text-light);
}

@media (max-width: 600px) {
    .container {
        padding: 1.5rem 1.25rem;
    }

    header h1 {
        font-size: 1.5rem;
    }

    .form-section,
    .rec-section {
        padding: 1.25rem;
    }

    .materials-grid {
        grid-template-columns: 1fr;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
    }

    .intro-section {
        padding: 1.5rem 1.25rem;
    }

    .intro-section .section-title {
        font-size: 1.25rem;
        line-height: 1.4;
    }

    .style-qualities li,
    .wall-options li,
    .colour-qualities li {
        padding-left: 1.25rem;
    }

    .process-step {
        gap: 1rem;
    }

    .step-number {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.8125rem;
    }

    .step-content h4 {
        font-size: 0.875rem;
    }

    .step-content p {
        font-size: 0.8125rem;
    }

    .cta-buttons {
        gap: 0.75rem;
    }

    .next-step-section {
        padding: 1.5rem 1.25rem;
    }

    .footer-reassurance p {
        font-size: 0.8125rem;
    }
}

.progress-container {
    margin-bottom: 2rem;
}

.progress-bar {
    height: 4px;
    background: var(--colour-border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.progress-fill {
    height: 100%;
    background: var(--colour-accent);
    transition: width 0.3s ease;
    width: 0%;
}

.progress-steps {
    display: flex;
    justify-content: space-between;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.progress-step.active,
.progress-step.completed {
    opacity: 1;
}

.progress-step .step-number {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--colour-border);
    color: var(--colour-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

.progress-step.active .step-number {
    background: var(--colour-accent);
    color: var(--colour-warm-white);
}

.progress-step.completed .step-number {
    background: var(--colour-accent-dark);
    color: var(--colour-warm-white);
}

.progress-step .step-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--colour-text-light);
    text-align: center;
}

.progress-step.active .step-label {
    color: var(--colour-text);
    font-weight: 500;
}

.wizard-step {
    display: none;
}

.wizard-step.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-intro {
    font-size: 0.9375rem;
    color: var(--colour-text-light);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.wizard-navigation {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.wizard-navigation .btn-secondary {
    flex: 0 0 auto;
}

.wizard-navigation .btn-primary {
    flex: 0 0 auto;
    margin-left: auto;
}

.form-group.valid input,
.form-group.valid select,
.form-group.valid textarea {
    border-color: #A5D6A7;
}

.form-group.invalid input,
.form-group.invalid select,
.form-group.invalid textarea {
    border-color: #E57373;
}

.validation-message {
    display: block;
    font-size: 0.75rem;
    color: #D32F2F;
    margin-top: 0.375rem;
    min-height: 1rem;
}

.form-group.valid .validation-message {
    color: #388E3C;
}

.review-section {
    background: var(--colour-cream);
}

.review-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.review-group {
    background: var(--colour-warm-white);
    padding: 1.25rem;
    border: 1px solid var(--colour-border);
}

.review-group h3 {
    font-family: var(--font-serif);
    font-size: 0.8125rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--colour-accent);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--colour-border);
}

.review-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.review-item {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}

.review-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--colour-text-light);
    margin-bottom: 0.25rem;
}

.review-value {
    font-size: 0.9375rem;
    color: var(--colour-text);
}

.review-note {
    margin-top: 1.5rem;
    font-size: 0.8125rem;
    color: var(--colour-text-light);
    font-style: italic;
    text-align: center;
}

@media (max-width: 600px) {
    .progress-steps {
        gap: 0.25rem;
    }

    .progress-step .step-label {
        font-size: 0.5625rem;
    }

    .progress-step .step-number {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.6875rem;
    }

    .wizard-navigation {
        flex-direction: column;
    }

    .wizard-navigation .btn-primary {
        margin-left: 0;
        order: -1;
    }

    .review-items {
        grid-template-columns: 1fr;
    }
}

.secondary-style-note {
    font-size: 1rem;
    font-style: italic;
    color: var(--colour-text-light);
    margin-top: -0.5rem;
    margin-bottom: 1.5rem;
}

.style-aesthetic {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--colour-text);
}

.client-furniture .furniture-item {
    background: var(--colour-warm-white);
    border: 1px solid var(--colour-border);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.client-furniture .furniture-item:last-child {
    margin-bottom: 0;
}

.client-furniture .furniture-item h4 {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--colour-text);
    margin-bottom: 0.5rem;
}

.client-furniture .anchor-cot {
    border-left: 3px solid var(--colour-accent);
    background: #FDFCFA;
}

.client-furniture .anchor-badge {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--colour-warm-white);
    background: var(--colour-accent);
    padding: 0.25rem 0.5rem;
    border-radius: 2px;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.client-furniture .furniture-item p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--colour-text-light);
}

.client-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.client-palette .colour-chip {
    padding: 0.625rem 1rem;
    background: var(--colour-cream);
    border: 1px solid var(--colour-border);
    font-size: 0.875rem;
    text-transform: capitalize;
}

.materials-info p {
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.materials-info p:last-child {
    margin-bottom: 0;
}

.materials-info strong {
    color: var(--colour-text);
    text-transform: capitalize;
}

/* ---- STYLE HERO SECTION ---- */

.style-hero-section {
    text-align: center;
    padding: 3rem 2rem;
    background: linear-gradient(to bottom, var(--colour-cream) 0%, var(--colour-warm-white) 100%);
    border: 1px solid var(--colour-border);
    margin-bottom: 2rem;
}

.style-hero {
    margin-bottom: 2rem;
}

.style-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--colour-accent);
    margin-bottom: 0.75rem;
}

.style-name-hero {
    font-family: var(--font-serif);
    font-size: 2.75rem;
    font-weight: 400;
    color: var(--colour-text);
    margin: 0 0 0.75rem 0;
    letter-spacing: -0.01em;
}

.style-name-standalone {
    text-align: center;
    margin: 1.5rem 0 1rem 0;
    font-size: 2.25rem;
}

.style-tone {
    font-size: 1rem;
    font-style: italic;
    color: var(--colour-text-light);
    margin: 0;
}

.style-description {
    max-width: 720px;
    margin: 0 auto 2rem auto;
}

.style-aesthetic-text {
    font-size: 1.125rem;
    line-height: 1.9;
    color: var(--colour-text);
}

/* Secondary Style Block */

.secondary-style-block {
    background: var(--colour-warm-white);
    border: 1px solid var(--colour-border);
    border-left: 3px solid var(--colour-accent);
    padding: 1.5rem 2rem;
    margin: 2rem auto;
    max-width: 640px;
    text-align: left;
}

.secondary-style-block h4 {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--colour-text);
    margin: 0 0 0.75rem 0;
}

.secondary-aesthetic {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--colour-text);
    margin-bottom: 0.75rem;
}

.secondary-integration {
    font-size: 0.875rem;
    font-style: italic;
    color: var(--colour-text-light);
    margin: 0;
}

/* ---- PALETTE VISUAL ---- */

.palette-visual {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.colour-swatch {
    aspect-ratio: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0.75rem;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: relative;
    min-height: 100px;
}

.swatch-name {
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.4rem;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 2px;
    color: var(--colour-text);
    text-align: center;
    white-space: nowrap;
}

.palette-intro {
    font-size: 1rem;
    color: var(--colour-text);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.palette-note {
    font-size: 0.9375rem;
    font-style: italic;
    color: var(--colour-text-light);
    margin-top: 1.25rem;
    line-height: 1.6;
}

.palette-footer {
    font-size: 0.875rem;
    color: var(--colour-text-light);
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--colour-border);
}

.watercolour-strip-container {
    margin: 2rem 0 1.5rem;
}

.watercolour-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--colour-text-light);
    margin-bottom: 0.75rem;
}

.watercolour-strip {
    height: 24px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.watercolour-caption {
    font-size: 0.875rem;
    font-style: italic;
    color: var(--colour-text-light);
    margin-top: 0.75rem;
    line-height: 1.6;
}

.design-closing {
    text-align: center;
    padding: 2.5rem 1.5rem;
    margin-top: 2rem;
    background: var(--colour-warm-white);
    border: 1px solid var(--colour-border);
}

.design-closing p {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-style: italic;
    color: var(--colour-text);
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto;
}

/* ---- MATERIALS GRID ---- */

.materials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.material-card {
    background: var(--colour-warm-white);
    border: 1px solid var(--colour-border);
    padding: 1.5rem;
    text-align: center;
}

.material-icon {
    color: var(--colour-accent);
    margin-bottom: 1rem;
}

.material-icon svg {
    width: 32px;
    height: 32px;
}

.material-card h4 {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--colour-text-light);
    margin: 0 0 0.5rem 0;
}

.material-card p {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--colour-text);
    margin: 0;
    line-height: 1.5;
}

/* ---- RESPONSIVE ADJUSTMENTS ---- */

@media (max-width: 768px) {
    .style-name-hero {
        font-size: 2rem;
    }
    
    .mood-board-fallback .style-name-hero {
        font-size: 2rem;
    }
    
    .mood-board-fallback {
        padding: 2rem 1.5rem;
    }
    
    .style-hero-section {
        padding: 2rem 1.5rem;
    }
    
    .palette-visual {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .colour-swatch {
        min-height: 80px;
    }
    
    .materials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .style-name-hero {
        font-size: 1.75rem;
    }
    
    .mood-board-fallback .style-name-hero {
        font-size: 1.75rem;
    }
    
    .mood-board-fallback {
        padding: 1.5rem 1rem;
    }
    
    .palette-visual {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .materials-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- COLOUR CHECKBOX OPTIONS ---- */

.checkbox-group.colour-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.checkbox-group-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.5rem;
}

.checkbox-group-compact label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--colour-text);
    cursor: pointer;
}

.checkbox-group-compact input[type="checkbox"] {
    margin: 0;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    background: var(--colour-warm-white);
    border: 1px solid var(--colour-border);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.checkbox-label:hover {
    border-color: var(--colour-accent);
}

.checkbox-label input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--colour-accent);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-text {
    color: var(--colour-text);
    font-weight: 500;
}

.checkbox-text {
    font-size: 0.9375rem;
    color: var(--colour-text-light);
}

.colour-conditional {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--colour-border);
}

@media (max-width: 480px) {
    .checkbox-group.colour-options {
        grid-template-columns: 1fr;
    }
}

/* ---- COLOUR TONE CARDS ---- */

.checkbox-group.colour-tone-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 0.75rem;
}

.colour-tone-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem;
    border-radius: 8px;
    background: white;
    border: 2px solid var(--colour-border);
}

.colour-tone-card:hover {
    border-color: var(--colour-accent);
}

.colour-tone-card input[type="checkbox"] {
    margin-bottom: 0.5rem;
}

.colour-tone-card input[type="checkbox"]:checked ~ .checkbox-text {
    color: var(--colour-text);
    font-weight: 500;
}

.colour-tone-card .checkbox-text {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--colour-text);
    display: block;
    margin-bottom: 0.5rem;
}

.colour-tone-examples {
    font-size: 0.8125rem;
    color: var(--colour-text-light);
    line-height: 1.4;
    display: block;
}

/* Selection states: Three subtle cues */
.colour-tone-card.selected {
    border-color: #9A8B7A;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.colour-tone-card.selected .checkbox-text {
    color: var(--colour-text);
}

.colour-tone-card input[type="checkbox"]:checked {
    accent-color: #9A8B7A;
}

/* Unselected cards recede when sibling is selected */
.colour-tone-options:has(.selected) .colour-tone-card:not(.selected) {
    opacity: 0.7;
    background: #FCFBF9;
}

/* Safari iOS 16 fallback (no :has() support) */
.colour-tone-options.has-selection .colour-tone-card:not(.selected) {
    opacity: 0.7;
    background: #FCFBF9;
}

@media (max-width: 480px) {
    .checkbox-group.colour-tone-options {
        grid-template-columns: 1fr;
    }
}

/* ---- COLOUR EXCLUSIONS (Secondary Constraint) ---- */

.colour-exclusions-group {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--colour-border);
}

.secondary-label {
    font-size: 0.9375rem;
    color: var(--colour-text-light);
    font-weight: 400;
}

.optional-tag {
    font-size: 0.75rem;
    color: var(--colour-text-light);
    font-weight: 400;
    opacity: 0.7;
    margin-left: 0.25rem;
}

.checkbox-group.colour-exclusions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.colour-exclusions .checkbox-label {
    font-size: 0.875rem;
}

/* ---- DAYBED RECOMMENDATION ---- */

.daybed-recommendation {
    background: var(--colour-warm-white);
    padding: 1.5rem;
    border-left: 3px solid var(--colour-accent);
}

.daybed-recommendation h4 {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    color: var(--colour-text);
    margin-bottom: 0.5rem;
}

.daybed-recommendation .short-desc {
    font-size: 0.875rem;
    color: var(--colour-accent);
    font-style: italic;
    margin-bottom: 0.75rem;
}

/* ---- SECTION WITH WATERCOLOUR SKETCH ---- */

.section-with-sketch {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.section-sketch {
    width: 140px;
    height: auto;
    flex-shrink: 0;
    opacity: 0.9;
}

.section-content {
    flex: 1;
}

.section-content h3 {
    margin-top: 0;
}

@media (max-width: 640px) {
    .section-with-sketch {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .section-sketch {
        width: 120px;
    }
}

/* ---- WELCOME PAGE ---- */

.welcome-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.welcome-header {
    text-align: center;
    padding: 2rem 1.5rem;
    border-bottom: 1px solid var(--colour-border);
}

.welcome-content {
    flex: 1;
    max-width: 680px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.welcome-intro {
    text-align: center;
    margin-bottom: 2.5rem;
}

.welcome-intro h2 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--colour-text);
    margin-bottom: 1rem;
}

.welcome-intro p {
    color: var(--colour-text-light);
    line-height: 1.7;
}

.welcome-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.detail-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--colour-warm-white);
    border: 1px solid var(--colour-border);
    border-radius: 4px;
}

.detail-icon {
    flex-shrink: 0;
    color: var(--colour-accent);
}

.detail-text h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--colour-text);
    margin-bottom: 0.25rem;
}

.detail-text p {
    font-size: 0.875rem;
    color: var(--colour-text-light);
    margin: 0;
}

.welcome-sections {
    margin-bottom: 2.5rem;
}

.welcome-sections h3 {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--colour-text);
    margin-bottom: 1rem;
    text-align: center;
}

.section-preview {
    list-style: none;
    padding: 0;
    margin: 0;
}

.section-preview li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--colour-border);
    font-size: 0.9375rem;
    color: var(--colour-text);
}

.section-preview li:last-child {
    border-bottom: none;
}

.section-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--colour-accent);
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.welcome-form {
    background: var(--colour-warm-white);
    padding: 1.5rem;
    border: 1px solid var(--colour-border);
    border-radius: 4px;
    text-align: center;
}

.welcome-form h3 {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--colour-text);
    margin-bottom: 0.5rem;
}

.welcome-form > p {
    color: var(--colour-text-light);
    font-size: 0.9375rem;
    margin-bottom: 1.5rem;
}

.welcome-form .form-group {
    margin-bottom: 1rem;
    text-align: left;
}

.welcome-form input[type="email"] {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--colour-border);
    border-radius: 4px;
}

.welcome-form .btn {
    width: 100%;
    margin-top: 0.5rem;
}

.welcome-footer {
    text-align: center;
    padding: 1.5rem;
    border-top: 1px solid var(--colour-border);
    color: var(--colour-text-light);
    font-size: 0.8125rem;
}

/* ---- RESUME PAGE ---- */

.resume-card {
    background: var(--colour-warm-white);
    padding: 2rem;
    border: 1px solid var(--colour-border);
    border-radius: 4px;
    text-align: center;
    max-width: 480px;
    margin: 2rem auto;
}

.resume-icon {
    color: var(--colour-accent);
    margin-bottom: 1.5rem;
}

.resume-card h2 {
    font-family: var(--font-serif);
    font-size: 1.375rem;
    font-weight: 400;
    color: var(--colour-text);
    margin-bottom: 0.75rem;
}

.resume-card > p {
    color: var(--colour-text-light);
    margin-bottom: 1.5rem;
}

.resume-progress {
    margin-bottom: 1.5rem;
}

.progress-bar {
    height: 8px;
    background: var(--colour-border);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: var(--colour-accent);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 0.8125rem;
    color: var(--colour-text-light);
}

.resume-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.resume-actions .btn {
    width: 100%;
}

.start-fresh-form {
    margin: 0;
}

.resume-note {
    font-size: 0.8125rem;
    color: var(--colour-text-light);
    font-style: italic;
    margin: 0;
}

.btn-secondary {
    background: var(--colour-cream);
    color: var(--colour-text);
    border: 1px solid #C8C2B8;
}

.btn-secondary:hover {
    background: #EDE9E3;
    border-color: var(--colour-accent);
}

/* Visual-First Results Page */
.result-header-minimal {
    padding: 1.5rem 0;
    text-align: center;
    border-bottom: 1px solid var(--colour-border);
    margin-bottom: 2rem;
}

.result-header-minimal .header-logo {
    max-width: 200px;
    height: auto;
    margin-bottom: 1rem;
}

.result-header-minimal h1 {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--colour-text);
    margin: 0 0 0.5rem 0;
}

.result-header-minimal .header-tagline {
    font-size: 0.875rem;
    color: var(--colour-text-light);
    margin: 0;
}

.email-confirmation {
    background: #F0F5EE;
    border: 1px solid #C5D4BE;
    border-radius: 4px;
    padding: 1rem 1.5rem;
    text-align: center;
    margin-bottom: 2.5rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.email-confirmation .email-icon {
    color: #7A9A6D;
    flex-shrink: 0;
}

.email-confirmation p {
    font-size: 0.9375rem;
    color: var(--colour-text);
    margin: 0;
    line-height: 1.5;
}

.email-confirmation p strong {
    font-weight: 500;
}

/* Mood Board Hero Section */
.mood-board-hero {
    text-align: center;
    margin-bottom: 3rem;
}

.mood-board-intro {
    max-width: 700px;
    margin: 0 auto 2rem auto;
    text-align: center;
}

.mood-board-intro h2 {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 400;
    color: var(--colour-text-light);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 0.5rem 0;
}

.design-family-name {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 400;
    color: var(--colour-text);
    margin: 0 0 1rem 0;
}

.design-reference-line {
    font-size: 1rem;
    color: var(--colour-text-light);
    line-height: 1.6;
    margin: 0;
    font-style: italic;
}

.anchor-introduction {
    max-width: 600px;
    margin: 2rem auto 0 auto;
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--colour-border);
}

.anchor-introduction p {
    font-size: 1rem;
    color: var(--colour-text);
    line-height: 1.6;
    margin: 0;
}

.anchor-introduction p:first-child {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
}

.mood-board-container {
    margin-bottom: 1.5rem;
}

.mood-board-description {
    font-size: 1.125rem;
    color: var(--colour-text);
    max-width: 700px;
    margin: 1.5rem auto;
    line-height: 1.7;
    text-align: center;
}

.mood-board-transition {
    font-size: 1rem;
    color: var(--colour-text-light);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    font-style: italic;
}

.mood-board-image {
    width: 100%;
    max-width: 900px;
    height: auto;
    display: block;
    margin: 0 auto;
    border: 1px solid var(--colour-border);
}

.mood-board-fallback {
    background: var(--colour-warm-white);
    padding: 3rem 2rem;
    border: 1px solid var(--colour-border);
    max-width: 900px;
    margin: 0 auto 1.5rem auto;
    text-align: center;
}

.mood-board-fallback .style-label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--colour-text-light);
    margin-bottom: 0.5rem;
}

.mood-board-fallback .style-name-hero {
    font-family: var(--font-serif);
    font-size: 2.75rem;
    font-weight: 400;
    color: var(--colour-text);
    margin: 0;
}

.mood-board-hero .style-one-liner {
    font-size: 1.0625rem;
    color: var(--colour-text-light);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.hero-visual-first {
    text-align: center;
    margin-bottom: 3rem;
}

.style-outcome {
    margin-bottom: 2rem;
}

.style-outcome .style-label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--colour-text-light);
    margin-bottom: 0.5rem;
}

.style-outcome .style-name-hero {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--colour-text);
    margin: 0 0 1rem 0;
}

.style-outcome .style-one-liner {
    font-size: 1.0625rem;
    color: var(--colour-text-light);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.hero-visual-block {
    background: var(--colour-warm-white);
    padding: 2rem;
    border: 1px solid var(--colour-border);
}

.hero-moodboard {
    margin-bottom: 1.5rem;
}

.hero-moodboard img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--colour-border);
}

.hero-palette {
    text-align: center;
}

.palette-swatches-hero {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.swatch-hero {
    width: 48px;
    height: 48px;
    border: 1px solid var(--colour-border);
}

.palette-caption {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--colour-text-light);
    margin: 0;
}

.what-this-means {
    background: var(--colour-warm-white);
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--colour-border);
    text-align: center;
}

.what-this-means h2 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 1rem;
    color: var(--colour-text);
}

.what-this-means p {
    max-width: 600px;
    margin: 0 auto 1rem auto;
    line-height: 1.7;
}

.what-this-means p:last-child {
    margin-bottom: 0;
}

.furniture-hero {
    background: var(--colour-warm-white);
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--colour-border);
}

.furniture-hero h2 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 0.75rem;
}

.section-intro-text {
    text-align: center;
    color: var(--colour-text-light);
    margin-bottom: 1.5rem;
}

.recommendations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.recommendation-card {
    background: var(--colour-cream);
    padding: 1.5rem;
    border: 1px solid var(--colour-border);
    position: relative;
}

.recommendation-card.anchor-piece {
    border-color: var(--colour-accent);
}

.recommendation-card .card-badge {
    position: absolute;
    top: -0.5rem;
    left: 1rem;
    background: var(--colour-accent);
    color: var(--colour-warm-white);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.25rem 0.75rem;
}

.recommendation-card h3 {
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.recommendation-card p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--colour-text-light);
    margin: 0;
}

.design-considerations {
    background: var(--colour-warm-white);
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--colour-border);
}

.design-considerations h2 {
    font-family: var(--font-serif);
    font-size: 1.375rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--colour-text);
}

.considerations-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.palette-detail {
    background: var(--colour-warm-white);
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--colour-border);
    text-align: center;
}

.palette-detail h2 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.palette-visual-detail {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.colour-swatch-detail {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 0.5rem;
    border: 1px solid var(--colour-border);
}

.colour-swatch-detail .swatch-name {
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--colour-text);
    text-shadow: 0 0 4px rgba(255,255,255,0.8);
}

.palette-detail .palette-note {
    font-size: 0.9375rem;
    color: var(--colour-text-light);
    max-width: 600px;
    margin: 0 auto;
}

.additional-recommendation {
    background: var(--colour-warm-white);
    padding: 1.5rem 2rem;
    margin-bottom: 1rem;
    border: 1px solid var(--colour-border);
}

.additional-recommendation h3 {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.additional-recommendation .short-desc {
    font-style: italic;
    color: var(--colour-text-light);
    margin-bottom: 0.5rem;
}

.case-goods-brief p {
    margin-bottom: 0.5rem;
}

.case-goods-brief p:last-child {
    margin-bottom: 0;
}

/* Commercial Bridge Section */
.next-steps-commercial {
    margin-top: 3rem;
    margin-bottom: 2rem;
}

.next-steps-intro {
    text-align: center;
    margin-bottom: 2rem;
}

.next-steps-intro h2 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 0.75rem;
}

.next-steps-intro p {
    color: var(--colour-text-light);
    max-width: 500px;
    margin: 0 auto;
}

.commercial-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .commercial-options {
        grid-template-columns: 1.2fr 1fr;
    }
}

.option-primary {
    background: var(--colour-warm-white);
    padding: 2rem;
    border: 2px solid var(--colour-accent);
}

.option-secondary {
    background: var(--colour-cream);
    padding: 2rem;
    border: 1px solid var(--colour-border);
}

.option-primary h3,
.option-secondary h3 {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 400;
    margin-bottom: 0.25rem;
}

.price-indicator {
    font-size: 0.875rem;
    color: var(--colour-accent);
    font-weight: 500;
    margin-bottom: 1rem;
}

.option-primary > p,
.option-secondary > p {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.option-includes {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.option-includes li {
    font-size: 0.875rem;
    padding: 0.375rem 0;
    padding-left: 1.25rem;
    position: relative;
    color: var(--colour-text-light);
}

.option-includes li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.75rem;
    width: 6px;
    height: 6px;
    background: var(--colour-accent);
    border-radius: 50%;
}

.option-primary .btn-primary {
    width: 100%;
    text-align: center;
}

.shopping-list-form {
    margin-top: 1rem;
}

.form-row-inline {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 480px) {
    .form-row-inline {
        flex-direction: row;
    }
    
    .form-row-inline input[type="email"] {
        flex: 1;
    }
}

.form-row-inline input[type="email"] {
    padding: 0.75rem;
    border: 1px solid var(--colour-border);
    font-size: 0.9375rem;
    font-family: var(--font-sans);
}

.form-row-inline .btn-secondary {
    white-space: nowrap;
}

.visit-option {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9375rem;
}

.visit-option a {
    color: var(--colour-accent);
}

/* Psychological Conclusion */
.page-conclusion {
    text-align: center;
    padding: 3rem 2rem;
    margin-top: 2rem;
    border-top: 1px solid var(--colour-border);
}

.conclusion-content p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--colour-text-light);
    max-width: 500px;
    margin: 0 auto;
}

.conclusion-content .brand-sign-off {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    color: var(--colour-text);
    margin-top: 1.5rem;
}

.result-footer {
    text-align: center;
    padding: 1.5rem 0;
    font-size: 0.8125rem;
    color: var(--colour-text-light);
    border-top: none;
}

/* Confirmation Page */
.confirmation-page {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem 0;
}

.confirmation-card {
    background: var(--colour-warm-white);
    padding: 3rem 2rem;
    border: 1px solid var(--colour-border);
    text-align: center;
}

.confirmation-icon {
    color: var(--colour-accent);
    margin-bottom: 1.5rem;
}

.confirmation-card h1 {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 400;
    margin-bottom: 0.75rem;
}

.confirmation-message {
    font-size: 1.0625rem;
    color: var(--colour-text-light);
    margin-bottom: 2rem;
}

.confirmation-details {
    background: var(--colour-cream);
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    text-align: left;
}

.confirmation-details p {
    margin: 0.5rem 0;
    font-size: 0.9375rem;
}

.confirmation-details p:first-child {
    margin-top: 0;
}

.confirmation-details p:last-child {
    margin-bottom: 0;
}

.next-steps-confirmation {
    text-align: left;
    margin-bottom: 2rem;
}

.next-steps-confirmation h3 {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 0.75rem;
    color: var(--colour-accent);
}

.next-steps-confirmation p {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.service-fee-section {
    text-align: left;
    padding-top: 1.5rem;
    margin-bottom: 1.5rem;
    border-top: 1px solid var(--colour-border);
}

.service-fee-section p {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.confirmation-contact {
    font-size: 0.9375rem;
    color: var(--colour-text);
    margin-bottom: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--colour-border);
}

.confirmation-contact a {
    color: var(--colour-text);
    font-weight: 600;
}

.confirmation-actions {
    margin-top: 1.5rem;
}

/* Product Cards and Results Page */
.key-recommendations,
.supporting-pieces {
    margin-bottom: 3rem;
}

.key-recommendations h2,
.supporting-pieces h2 {
    font-family: var(--font-serif);
    font-size: 1.375rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    text-align: center;
}

.recommendation-block {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--colour-border);
}

.recommendation-block:last-child {
    border-bottom: none;
}

.recommendation-label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--colour-accent);
    margin-bottom: 1rem;
}

.product-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

.product-image {
    width: 100%;
    aspect-ratio: 1;
    background: var(--colour-cream);
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-image.small {
    width: 120px;
    aspect-ratio: 1;
}

.image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--colour-cream) 0%, var(--colour-border) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-placeholder::after {
    content: '';
    width: 40%;
    height: 40%;
    border: 2px solid rgba(0,0,0,0.1);
    border-radius: 4px;
}

.product-details h3 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 0.75rem;
}

.product-details h4 {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.product-details p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--colour-text-light);
}

/* Shop Links */
.view-piece-link {
    display: inline-block;
    padding: 0.5rem 0;
    color: var(--colour-text-light);
    font-size: 0.8125rem;
    font-family: var(--font-sans);
    text-decoration: none;
    border-bottom: 1px solid var(--colour-border);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.view-piece-link:hover {
    color: var(--colour-text);
    border-color: var(--colour-text);
}

.view-piece-link.small {
    font-size: 0.75rem;
    margin-top: 0.5rem;
}

.shop-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: transparent;
    border: 1px solid var(--colour-border);
    color: var(--colour-text-light);
    font-size: 0.8125rem;
    font-family: var(--font-sans);
    text-decoration: none;
    transition: all 0.2s ease;
    margin-top: 0.75rem;
}

.shop-link:hover {
    background: var(--colour-duck-egg);
    border-color: var(--colour-duck-egg);
    color: var(--colour-text);
}

.shop-link svg {
    flex-shrink: 0;
}

.shop-link.small {
    padding: 0.375rem 0.5rem;
    margin-top: 0.5rem;
}

.shop-link.small span {
    display: none;
}

@media (min-width: 600px) {
    .product-card {
        grid-template-columns: 280px 1fr auto;
    }
    
    .shop-link {
        align-self: start;
        margin-top: 0;
    }
}

/* Alternatives Toggle and Panel */
.alternatives-toggle {
    margin-top: 1rem;
}

.toggle-alternatives {
    background: none;
    border: none;
    color: var(--colour-accent);
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    font-family: var(--font-sans);
}

.toggle-alternatives:hover {
    color: var(--colour-text);
}

.alternatives-panel {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px dashed var(--colour-border);
}

.alternative-card {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--colour-border);
    align-items: start;
}

.alternative-card:last-child {
    border-bottom: none;
}

.alternative-card .shop-link.small {
    margin-top: 0;
    align-self: center;
}

/* Finishing Touches */
.finishing-touches {
    background: var(--colour-cream);
    padding: 2rem;
    margin-bottom: 2rem;
}

.finishing-touches h2 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 1rem;
}

.touches-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.touches-list li {
    font-size: 0.9375rem;
    padding-left: 1.25rem;
    position: relative;
    color: var(--colour-text);
}

.touches-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 6px;
    height: 6px;
    background: var(--colour-accent);
    border-radius: 50%;
}

.touches-note {
    font-size: 0.875rem;
    font-style: italic;
    color: var(--colour-text-light);
    margin-top: 1rem;
}

/* Design Considerations Grid */
.considerations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.consideration-item {
    text-align: center;
}

.consideration-item h4 {
    font-family: var(--font-serif);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    color: var(--colour-text);
}

.consideration-item p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--colour-text);
    margin: 0;
}

/* ============================================
   3-LEVEL RECOMMENDATION HIERARCHY SYSTEM
   ============================================ */

/* Level 1: Section Anchor - Largest, serif, calm, confident */
.section-anchor {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--colour-text);
    text-align: center;
    margin: 0 0 0.75rem;
    letter-spacing: 0.01em;
}

/* Level 2: Context Line - Smaller, one sentence, neutral */
.context-line {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--colour-text-light);
    text-align: center;
    max-width: 600px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}

/* Visual elements (chips, swatches) sit between L2 and L3 */
.visual-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 1.5rem 0 2rem;
}

.visual-chip {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: var(--colour-cream);
    border: 1px solid var(--colour-border);
    border-radius: 20px;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--colour-text);
}

/* Soft divider before Level 3 */
.application-divider {
    width: 60px;
    height: 1px;
    background: var(--colour-border);
    margin: 2rem auto;
}

/* Level 3: Application Guidance - Equal weight items */
.application-guidance {
    max-width: 800px;
    margin: 0 auto;
}

.application-guidance-header {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--colour-text-light);
    text-align: center;
    margin-bottom: 1.5rem;
}

.application-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.application-item {
    text-align: center;
    padding: 1rem 0.5rem;
}

.application-item-heading {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--colour-text);
    margin-bottom: 0.5rem;
}

.application-item-text {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--colour-text-light);
    line-height: 1.5;
    margin: 0;
}

/* Recommendation section wrapper */
.recommendation-block {
    padding: 2.5rem 2rem;
    background: white;
    border-top: 1px solid var(--colour-border);
}

/* ============================================
   END HIERARCHY SYSTEM
   ============================================ */

/* Palette Section with Ombre Strip */
.palette-section {
    margin: 2rem 0;
    text-align: center;
}

.palette-section h2 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.palette-swatches {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.colour-swatch {
    width: 100px;
    height: 120px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 0.75rem;
    border: 1px solid rgba(0,0,0,0.08);
}

.swatch-name {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(0,0,0,0.7);
    background: rgba(255,255,255,0.85);
    padding: 0.25rem 0.5rem;
    text-align: center;
}

.watercolour-strip-container {
    max-width: 500px;
    margin: 0 auto 1.5rem;
}

.watercolour-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--colour-text-light);
    margin-bottom: 0.5rem;
}

.watercolour-strip {
    height: 24px;
    border-radius: 12px;
    opacity: 0.85;
}

.palette-note {
    font-size: 0.9375rem;
    font-style: italic;
    color: var(--colour-text-light);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Pattern Preferences Section */
.pattern-preferences-section {
    padding: 2.5rem 2rem;
    background: white;
    border-top: 1px solid var(--colour-border);
}

.pattern-preferences-section h2 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 1rem;
    color: var(--colour-text);
}

.pattern-types-display {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 1.5rem 0;
}

.pattern-type-tag {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--colour-cream);
    border: 1px solid var(--colour-border);
    border-radius: 20px;
    font-size: 0.875rem;
    color: var(--colour-text);
}

.pattern-application-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    max-width: 800px;
    margin: 2rem auto 0;
}

.pattern-application-item {
    text-align: center;
    padding: 1rem;
}

.pattern-application-item h4 {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--colour-text);
}

.pattern-application-item p {
    font-size: 0.875rem;
    color: var(--colour-text-light);
    line-height: 1.5;
}

/* Primary Service Card */
.primary-service-card {
    background: white;
    border: 2px solid var(--colour-accent);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.primary-service-card h4 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--colour-text);
}

.service-price {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--colour-accent-dark);
    margin-bottom: 1rem;
}

.service-description {
    font-size: 0.9375rem;
    color: var(--colour-text-light);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Secondary CTA block update */
.cta-secondary-block {
    text-align: center;
    margin-top: 2rem;
}

.cta-secondary-link {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    color: var(--colour-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--colour-border);
}

.cta-secondary-link:hover {
    color: var(--colour-accent-dark);
    text-decoration-color: var(--colour-accent-dark);
}

.cta-tertiary-block {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--colour-border);
}

.cta-tertiary-link {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--colour-text-light);
    text-decoration: none;
}

.cta-tertiary-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tertiary-separator {
    font-size: 0.8125rem;
    color: var(--colour-text-light);
    margin: 0 0.5rem;
}

.btn-text-link-subtle {
    font-size: 0.875rem;
    color: var(--colour-accent-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.btn-text-link-subtle:hover {
    color: var(--colour-text);
}

/* Support block with WhatsApp */
.cta-support-block {
    text-align: center;
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--colour-cream);
    border-radius: 8px;
}

.support-text {
    font-size: 0.875rem;
    color: var(--colour-text-light);
    margin-bottom: 0.5rem;
}

.whatsapp-link {
    font-size: 0.875rem;
    color: #25D366;
    text-decoration: none;
    font-weight: 500;
}

.whatsapp-link:hover {
    text-decoration: underline;
}

/* CTA Note */
.cta-note {
    font-size: 0.8125rem;
    color: var(--colour-text-light);
    margin-top: 0.75rem;
    font-style: italic;
}

.includes-label {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--colour-text);
}

/* Design Journey Section */
.design-journey {
    background: var(--colour-cream);
    padding: 3rem 0;
    margin-top: 3rem;
    border-top: 1px solid var(--colour-border);
}

.design-journey > h2,
.design-journey > .journey-steps,
.design-journey > .next-step-section {
    padding-left: 2rem;
    padding-right: 2rem;
}

.design-journey h2 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 2.5rem;
    color: var(--colour-text);
}

.journey-steps {
    max-width: 600px;
    margin: 0 auto 3rem;
    position: relative;
}

.journey-step {
    display: flex;
    gap: 1.25rem;
    padding: 1rem 0;
    position: relative;
}

.journey-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 18px;
    top: 48px;
    bottom: 0;
    width: 2px;
    background: var(--colour-border);
}

.journey-step.completed:not(:last-child)::after {
    background: #8B7355;
}

.step-marker {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 500;
    z-index: 1;
}

.journey-step.completed .step-marker {
    background: #8B7355;
    color: white;
}

.journey-step.active .step-marker {
    background: var(--colour-brand-accent);
    color: white;
    box-shadow: 0 0 0 4px rgba(172, 150, 124, 0.2);
}

.journey-step.upcoming .step-marker {
    background: var(--colour-background);
    color: var(--colour-text-light);
    border: 2px solid var(--colour-border);
}

.step-check {
    font-size: 1rem;
    font-weight: 600;
}

.step-number {
    font-family: var(--font-serif);
}

.step-content h4 {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 0.25rem;
    color: var(--colour-text);
}

.journey-step.upcoming .step-content h4 {
    color: var(--colour-text-light);
}

.step-content p {
    font-size: 0.875rem;
    color: var(--colour-text-light);
    line-height: 1.5;
    margin: 0;
}

.journey-step.upcoming .step-content p {
    color: #A0A0A0;
}

/* Journey CTA Section (Legacy) */
.journey-cta-section {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

/* Next Step Cards Section */
.next-step-section {
    margin-top: 3rem;
    text-align: center;
}

.next-step-heading {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--colour-text);
    margin-bottom: 0.75rem;
}

.next-step-intro {
    font-size: 1rem;
    color: var(--colour-text-light);
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

.next-step-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.next-step-card {
    background: white;
    border-radius: 8px;
    padding: 1.75rem 1.25rem 1.5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    text-align: center;
    min-height: auto;
    border: 1px solid transparent;
}

.next-step-card.next-step-primary {
    background: #FDFCFA;
    border-color: #C9C0B5;
    padding: 2rem 1.5rem 1.75rem;
}

.next-step-card.next-step-tertiary {
    background: #FAFAFA;
}

.next-step-card h4 {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 400;
    color: var(--colour-text);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.next-step-primary .card-supporting {
    font-size: 0.9rem;
    color: var(--colour-text-light);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.next-step-primary .card-price {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--colour-text);
    margin-bottom: 0.75rem;
}

.next-step-card .card-description {
    font-size: 0.85rem;
    color: var(--colour-text-light);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.next-step-card .card-description.delivery-note {
    font-style: italic;
    margin-bottom: 1.25rem;
}

.btn-curated-list {
    display: inline-block;
    background: #A8B5A0;
    color: white;
    padding: 0.875rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s ease;
    margin-top: auto;
}

.btn-curated-list:hover {
    background: #97A68F;
}

.social-proof {
    font-size: 0.75rem;
    color: var(--colour-text-light);
    margin-top: 1rem;
    letter-spacing: 0.02em;
    font-style: italic;
}

.card-text-link {
    font-size: 0.9rem;
    color: var(--colour-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
    margin-top: auto;
}

.card-text-link:hover {
    color: var(--colour-brand-accent);
}

.tertiary-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: auto;
}

.btn-outlined {
    display: inline-block;
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    color: var(--colour-text);
    border: 1px solid var(--colour-border);
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
    background: transparent;
}

.btn-outlined:hover {
    border-color: var(--colour-text);
    background: rgba(0,0,0,0.02);
}

@media (max-width: 900px) {
    .next-step-cards {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .tertiary-buttons {
        flex-direction: column;
    }
}

.cta-intro {
    margin-bottom: 2rem;
}

.cta-intro h3 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 0.75rem;
    color: var(--colour-text);
}

.cta-intro p {
    font-size: 1rem;
    color: var(--colour-text-light);
    line-height: 1.6;
}

.cta-primary-block {
    margin-bottom: 2.5rem;
}

.btn-primary-large {
    display: inline-block;
    background: #C0CDC3;
    color: white;
    padding: 1.125rem 2.5rem;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: background 0.2s ease;
}

.btn-primary-large:hover {
    background: #C0B6A8;
}

.cta-supporting {
    font-size: 0.875rem;
    color: var(--colour-text-light);
    margin-top: 1rem;
    line-height: 1.5;
}

.cta-secondary-block {
    padding-top: 2rem;
    border-top: 1px solid var(--colour-border);
}

.cta-secondary-block h4 {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
    color: var(--colour-text-light);
}

.cta-secondary-block > p {
    font-size: 0.875rem;
    color: var(--colour-text-light);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.cta-secondary-block .specification-detail {
    font-size: 0.875rem;
    color: var(--colour-text);
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

.furniture-foundation-form {
    margin-bottom: 0.75rem;
}

.furniture-foundation-form .form-row-inline {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.furniture-foundation-form input[type="email"] {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    border: 1px solid var(--colour-border);
    background: white;
    min-width: 220px;
}

.btn-secondary-small {
    padding: 0.625rem 1.25rem;
    font-size: 0.8125rem;
    background: transparent;
    color: var(--colour-text-light);
    border: 1px solid var(--colour-border);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-secondary-small:hover {
    border-color: var(--colour-brand-accent);
    color: var(--colour-brand-accent);
}

.secondary-note {
    font-size: 0.8125rem;
    color: #A0A0A0;
    font-style: italic;
    line-height: 1.5;
}

.visit-option {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--colour-border);
}

.visit-option p {
    font-size: 0.875rem;
    color: var(--colour-text-light);
}

.visit-option a {
    color: var(--colour-brand-accent);
    text-decoration: none;
}

.visit-option a:hover {
    text-decoration: underline;
}

/* Wall Treatment Visual Cards */
.wall-treatment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 0.75rem;
}

@media (max-width: 600px) {
    .wall-treatment-grid {
        grid-template-columns: 1fr;
    }
}

.wall-treatment-card {
    border: 2px solid var(--colour-border);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}

.wall-treatment-card:hover {
    border-color: var(--colour-accent);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.wall-treatment-card.selected {
    border-color: var(--colour-accent-dark);
    box-shadow: 0 0 0 2px var(--colour-accent);
}

.wall-treatment-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--colour-cream);
}

.wall-treatment-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.wall-treatment-card:hover .wall-treatment-image img {
    transform: scale(1.02);
}

.wall-treatment-content {
    padding: 0.875rem 1rem;
    text-align: center;
}

.wall-treatment-label {
    display: block;
    font-family: var(--font-serif);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--colour-text);
    margin-bottom: 0.25rem;
}

.wall-treatment-desc {
    display: block;
    font-size: 0.8125rem;
    color: var(--colour-text-light);
    line-height: 1.4;
}

.wallpaper-conditional {
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.wallpaper-conditional.hidden {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Wallpaper Imagery Visual Cards */
.wallpaper-imagery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 0.75rem;
}

@media (max-width: 600px) {
    .wallpaper-imagery-grid {
        grid-template-columns: 1fr;
    }
}

.wallpaper-imagery-card {
    border: 2px solid var(--colour-border);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}

.wallpaper-imagery-card:hover {
    border-color: var(--colour-accent);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.wallpaper-imagery-card.selected {
    border-color: var(--colour-accent-dark);
    box-shadow: 0 0 0 2px var(--colour-accent);
}

.wallpaper-imagery-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--colour-cream);
}

.wallpaper-imagery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.wallpaper-imagery-card:hover .wallpaper-imagery-image img {
    transform: scale(1.02);
}

.wallpaper-imagery-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f0e6 0%, #e8e3da 50%, #f5f0e6 100%);
}

.wallpaper-imagery-placeholder .placeholder-text {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--colour-text-light);
    font-style: italic;
}

.wallpaper-imagery-content {
    padding: 0.875rem 1rem;
    text-align: center;
}

.wallpaper-imagery-label {
    display: block;
    font-family: var(--font-serif);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--colour-text);
    margin-bottom: 0.25rem;
}

.wallpaper-imagery-desc {
    display: block;
    font-size: 0.8125rem;
    color: var(--colour-text-light);
    line-height: 1.4;
}

/* Your Wallpaper Section */
.wallpaper-direction {
    background: var(--colour-warm-white);
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--colour-border);
    text-align: center;
}

.wallpaper-direction h2 {
    font-family: var(--font-serif);
    font-size: 1.375rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    color: var(--colour-text);
}

.wallpaper-direction .section-intro-text {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--colour-text);
}

/* Window Treatments Section */
.window-treatments-block .window-treatments-hero {
    max-width: 500px;
    margin: 1.5rem auto 0;
}

.window-treatments-block .window-treatments-hero img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.window-treatments-section {
    background: var(--colour-warm-white);
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--colour-border);
}

.window-treatments-section h2 {
    font-family: var(--font-serif);
    font-size: 1.375rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    color: var(--colour-text);
    text-align: center;
}

.window-treatments-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2rem;
    align-items: start;
}

.window-treatments-image img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--colour-border);
}

.window-treatments-content .section-intro-text {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--colour-text);
    margin-bottom: 1.5rem;
}

.treatment-recommendation {
    background: var(--colour-background);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-left: 3px solid var(--colour-duck-egg);
}

.treatment-recommendation h4 {
    font-family: var(--font-serif);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--colour-text);
    margin-bottom: 0.5rem;
}

.treatment-recommendation p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--colour-text);
    margin: 0;
}

.treatment-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.treatment-detail {
    padding: 0.75rem 0;
}

.treatment-detail h5 {
    font-family: var(--font-serif);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--colour-taupe);
    margin-bottom: 0.375rem;
}

.treatment-detail p {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--colour-text);
    margin: 0;
}

.treatment-safety-note {
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--colour-text-light);
    padding-top: 1rem;
    border-top: 1px solid var(--colour-border);
    margin: 0;
}

@media (max-width: 768px) {
    .window-treatments-layout {
        grid-template-columns: 1fr;
    }
    
    .window-treatments-image {
        max-width: 400px;
        margin: 0 auto;
    }
    
    .treatment-details {
        grid-template-columns: 1fr;
    }
}

/* Review Section */
.review-section {
    text-align: center;
    padding: 2rem 0;
    margin-top: 1rem;
    border-top: 1px solid var(--colour-border);
}

.review-options p {
    font-size: 0.9375rem;
    color: var(--colour-text-light);
    margin-bottom: 0.75rem;
}

.review-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.btn-text-link {
    background: none;
    border: none;
    font-family: var(--font-serif);
    font-size: 0.9375rem;
    color: var(--colour-text);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease;
}

.btn-text-link:hover {
    color: var(--colour-taupe);
}

.review-buttons .separator {
    font-size: 0.875rem;
    color: var(--colour-text-light);
}

/* Pattern Preference Visual Grid (Multi-select) */
.pattern-preference-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 0.75rem;
}

@media (max-width: 900px) {
    .pattern-preference-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .pattern-preference-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.pattern-preference-card {
    display: block;
    border: 2px solid var(--colour-border);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    text-align: center;
}

.pattern-preference-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pattern-preference-card:hover {
    border-color: #C4B8A8;
}

/* Selection states: Three subtle cues */
.pattern-preference-card:has(input:checked) {
    border-color: #9A8B7A;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Unselected cards recede when sibling is selected */
.pattern-preference-grid:has(input:checked) .pattern-preference-card:not(:has(input:checked)) {
    opacity: 0.7;
    background: #FCFBF9;
}

/* Safari iOS 16 fallback (no :has() support) */
.pattern-preference-grid.has-selection .pattern-preference-card:not(:has(input:checked)) {
    opacity: 0.7;
    background: #FCFBF9;
}

.pattern-preference-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--colour-cream);
}

.pattern-preference-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.pattern-preference-card:hover .pattern-preference-image img {
    transform: scale(1.02);
}

.pattern-preference-label {
    display: block;
    padding: 0.75rem 0.5rem;
    font-family: var(--font-serif);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--colour-text);
}

/* Surface Preference (Plain vs Patterned) */
.surface-preference-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 0.75rem;
}

.surface-preference-card {
    border: 2px solid var(--colour-border);
    border-radius: 4px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    text-align: center;
}

.surface-preference-card:hover {
    border-color: #C4B8A8;
}

.surface-preference-card.selected {
    border-color: #9A8B7A;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Unselected cards recede when sibling is selected */
.surface-preference-grid:has(.selected) .surface-preference-card:not(.selected) {
    opacity: 0.7;
    background: #FCFBF9;
}

.surface-preference-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.surface-preference-label {
    display: block;
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 500;
    color: var(--colour-text);
}

.surface-preference-desc {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--colour-text-light);
    line-height: 1.5;
}

@media (max-width: 480px) {
    .surface-preference-grid {
        grid-template-columns: 1fr;
    }
}

/* Pattern Type Grid (9 categories) */
.pattern-supporting-text {
    display: block;
    font-size: 0.875rem;
    color: var(--colour-text-light);
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.pattern-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px 18px;
    margin-top: 0;
}

@media (max-width: 600px) {
    .pattern-type-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Swatch Cards - Unified styling for patterns, textures, metals */
.pattern-type-card {
    display: block;
    border: none;
    border-radius: 0;
    overflow: visible;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
    text-align: center;
}

.pattern-type-card input[type="checkbox"],
.pattern-type-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pattern-type-card:hover .pattern-type-image {
    border-color: #C4B8A8;
}

/* Selection states: Three subtle cues */
.pattern-type-card:has(input:checked) .pattern-type-image {
    border-color: #9A8B7A;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Unselected cards recede when sibling is selected */
.pattern-types-grid:has(input:checked) .pattern-type-card:not(:has(input:checked)) {
    opacity: 0.7;
}

.pattern-types-grid:has(input:checked) .pattern-type-card:not(:has(input:checked)) .pattern-type-image {
    background: #FCFBF9;
}

/* Safari iOS 16 fallback (no :has() support) */
.pattern-types-grid.has-selection .pattern-type-card:not(:has(input:checked)) {
    opacity: 0.7;
}

.pattern-types-grid.has-selection .pattern-type-card:not(:has(input:checked)) .pattern-type-image {
    background: #FCFBF9;
}

.pattern-type-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--colour-cream);
    border-radius: 14px;
    border: 1px solid var(--colour-border);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pattern-type-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
}

.pattern-type-card:hover .pattern-type-image img {
    /* No transform on hover - calm UI */
}

.pattern-type-label {
    display: block;
    padding-top: 10px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--colour-text);
    text-transform: none;
}

/* Swatch Grids - Unified spacing */
.pattern-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px 18px; /* vertical horizontal */
    margin-top: 0.5rem;
}

@media (max-width: 600px) {
    .pattern-types-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 12px;
    }
}

/* Texture grid - 5 items on desktop, 3 on tablet */
.texture-grid {
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 900px) {
    .texture-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .texture-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Metal tone grid - 4 columns with descriptions */
.metal-tone-grid {
    grid-template-columns: repeat(4, 1fr);
}

.metal-tone-grid .pattern-type-card {
    text-align: left;
}

.metal-tone-description {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--colour-text-light);
    line-height: 1.4;
    padding: 0 0.25rem 0.5rem;
}

/* Metal finish images with brand background */
.metal-image {
    background-color: #F8F6F3;
}

.metal-image img {
    object-fit: contain;
    background-color: #F8F6F3;
}

/* Designer's Choice text-based card */
.designers-choice-card {
    display: flex;
    flex-direction: column;
}

.designers-choice-card .designers-choice-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem 1rem;
    background: #F8F6F3;
    border: 1px solid #E8E4DE;
    border-radius: 14px;
    min-height: 180px;
    flex: 1;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.designers-choice-card:hover .designers-choice-content {
    border-color: #C4B8A8;
}

/* Selection states: Three subtle cues */
.designers-choice-card input:checked ~ .designers-choice-content {
    border-color: #9A8B7A;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.designers-choice-icon {
    color: #9A8B7A;
    margin-bottom: 1rem;
}

.designers-choice-heading {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--colour-text);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.designers-choice-text {
    font-size: 0.8125rem;
    color: var(--colour-text-light);
    line-height: 1.5;
}

.designers-choice-card .pattern-type-label,
.designers-choice-card .metal-tone-description {
    display: none;
}

@media (max-width: 900px) {
    .metal-tone-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .metal-tone-grid {
        grid-template-columns: 1fr;
    }
}

/* Consent Section */
.consent-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--colour-border);
}

.consent-checkbox {
    margin-bottom: 1rem;
}

.consent-checkbox:last-child {
    margin-bottom: 0;
}

.consent-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}

.consent-label input[type="checkbox"] {
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.consent-label .checkbox-text {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--colour-text);
}

.consent-label .checkbox-text a {
    color: var(--colour-accent-dark);
    text-decoration: underline;
}

.consent-label .checkbox-text a:hover {
    color: var(--colour-taupe);
}

.consent-checkbox.invalid .checkbox-text {
    color: #c53030;
}

.consent-checkbox.invalid input[type="checkbox"] {
    outline: 2px solid #c53030;
    outline-offset: 2px;
}

/* Site Footer */
.site-footer {
    text-align: center;
    padding: 2rem 1rem;
    margin-top: 3rem;
    border-top: 1px solid var(--colour-border);
}

.site-footer .footer-copyright {
    font-size: 0.8125rem;
    color: var(--colour-text-light);
    margin-bottom: 0.5rem;
}

.site-footer .footer-links {
    font-size: 0.8125rem;
    color: var(--colour-text-light);
    margin: 0;
}

.site-footer .footer-links a {
    color: var(--colour-text-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer .footer-links a:hover {
    color: var(--colour-text);
    text-decoration: underline;
}

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content {
    background: var(--colour-warm-white);
    max-width: 500px;
    width: 100%;
    padding: 2rem;
    position: relative;
    border: 1px solid var(--colour-border);
}

.modal-content h3 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    color: var(--colour-text);
}

.modal-content p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--colour-text);
    margin-bottom: 1rem;
}

.modal-content p:last-of-type {
    margin-bottom: 0;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--colour-text-light);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease;
}

.modal-close:hover {
    color: var(--colour-text);
}

/* ============================================
   ENHANCED MOBILE OPTIMISATION
   ============================================ */

@media (max-width: 600px) {
    /* Increase touch targets */
    .checkbox-label,
    .colour-tone-card {
        min-height: 48px;
        padding: 1rem;
    }
    
    /* Tighter form spacing */
    .form-group {
        margin-bottom: 1rem;
    }
    
    .form-section {
        padding: 1.25rem 1.25rem;
    }
    
    /* Visual card improvements */
    .wall-treatment-card,
    .pattern-type-card,
    .swatch-card {
        min-height: 44px;
    }
    
    /* Improve select dropdowns on mobile */
    .form-group select {
        padding: 0.875rem;
        font-size: 16px; /* Prevents iOS zoom */
    }
    
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"] {
        font-size: 16px; /* Prevents iOS zoom */
        padding: 0.875rem;
    }
    
    /* Better navigation buttons */
    .wizard-navigation {
        flex-direction: column-reverse;
        gap: 0.75rem;
    }
    
    .wizard-navigation .btn-secondary,
    .wizard-navigation .btn-primary {
        width: 100%;
        text-align: center;
        padding: 1rem;
    }
    
    /* Results page mobile improvements */
    .recommendation-block {
        padding: 1.5rem 1rem;
    }
    
    .section-anchor {
        font-size: 1.25rem;
    }
    
    .application-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .next-step-cards {
        gap: 1rem;
    }
    
    .next-step-card {
        padding: 1.25rem 1rem;
    }
    
    .tertiary-buttons {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .btn-outlined {
        width: 100%;
        text-align: center;
        padding: 0.75rem;
    }
    
    /* Journey steps mobile */
    .journey-step {
        padding: 0.75rem 0;
    }
    
    .step-content h4 {
        font-size: 0.9375rem;
    }
    
    /* Colour palette mobile */
    .palette-swatches {
        gap: 0.75rem;
    }
    
    .colour-swatch {
        width: 80px;
        height: 100px;
    }
}

@media (max-width: 400px) {
    /* Very small screens */
    .container {
        padding: 1rem 0.75rem;
    }
    
    .next-step-heading {
        font-size: 1.25rem;
    }
    
    .next-step-intro {
        font-size: 0.9rem;
    }
    
    .colour-swatch {
        width: 70px;
        height: 90px;
    }
    
    .swatch-name {
        font-size: 0.625rem;
    }
}