/* Visual direction derived from the profile logo already saved in assets.
   The Instagram live feed was unavailable; these are site font choices. */
:root {
  color-scheme: light;
  --bg-body: #f6e9ed;
  --bg-surface: #fff5f7;
  --bg-surface-elevated: #f0e0e7;
  --bg-section: #eedde4;
  --bg-section-soft: #f3e2e8;
  --bg-surface-hover: #fceef2;
  --bg-card: var(--bg-surface);
  --bg-glass: rgba(255, 245, 247, .96);
  --bg-glass-card: var(--bg-surface-elevated);
  --text-main: #29252c;
  --text-muted: #64525e;
  --text-dim: #735e6b;
  --text-inverse: #ffffff;
  --primary: #77546f;
  --primary-hover: #5d3e57;
  --primary-glow: rgba(119, 84, 111, .13);
  --secondary: #5d3e57;
  --brand-tint: #ecd7e1;
  --brand-border: #d3b4c5;
  --border-subtle: #e4cad5;
  --border-light: #d8becb;
  --border-focus: #99728e;
  --accent-emerald: #28714f;
  --accent-gold: #96743e;
  --font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --shadow-sm: 0 2px 8px #33232e08;
  --shadow-md: 0 8px 24px #33232e0a;
  --shadow-lg: 0 20px 50px #33232e10;
  --shadow-glow: 0 0 24px var(--primary-glow);
  --glass-glow: 0 8px 32px #33232e08;
}

.brand-theme { background: var(--bg-body); }
.brand-theme ::selection { background: #e4cddd; color: #35212f; }
.brand-theme :is(button, input, select, textarea) { font-family: var(--font-body); }
.brand-theme :is(h1, h2, h3, h4, h5, h6) { color: var(--text-main); }
.brand-theme :is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.brand-theme .bg-ambient-light { display: none; }
.brand-theme .brand-section-soft { background: var(--bg-section); }
.brand-theme #galeri { background: var(--bg-section-soft); }

/* Brand and navigation */
.brand-theme .site-header { background: #faf8f7ed; border-bottom-color: var(--border-subtle); }
.brand-theme .site-header.scrolled { background: #fffdfcf5; border-color: var(--border-subtle); box-shadow: 0 4px 20px #33232e06; }
.brand-theme .logo-badge { width: 48px; height: 48px; flex-shrink: 0; padding: 0; border: 1px solid var(--border-subtle); background: #f7f5f4; border-radius: 10px; overflow: hidden; }
.brand-theme .logo-badge img { width: 100%; height: 100%; object-fit: contain; }
.brand-theme .logo-text { flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.1; }
.brand-theme .logo-name { font: 400 1.55rem 'Courgette', cursive; color: #242026; letter-spacing: -.6px; }
.brand-theme .logo-sub { font: 600 .62rem var(--font-body); color: var(--primary); text-transform: uppercase; letter-spacing: 1.8px; }
.brand-theme :is(.nav-link, .nav-phone-link) { color: var(--text-muted); }
.brand-theme .nav-link:hover { color: var(--primary-hover); background: var(--brand-tint); }
.brand-theme :is(.nav-link-highlight, .nav-phone-link svg) { color: var(--primary); }
.brand-theme .nav-cta-btn { background: var(--primary); color: #fff; border-color: var(--primary); }
.brand-theme .nav-cta-btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); box-shadow: var(--shadow-sm); }
.brand-theme .mobile-toggle { color: var(--text-main); }
.brand-theme .nav-links.mobile-active { background: #fffcfafc; border-color: var(--border-subtle); box-shadow: var(--shadow-md); }

/* A light, quiet canvas lets the project photographs stand out. */
.brand-theme .hero-section { background: linear-gradient(120deg, #faf8f7 45%, #f0e6ee); }
.brand-theme .hero-badge { background: var(--brand-tint); color: var(--primary); border-color: var(--brand-border); font-size: .76rem; }
.brand-theme .hero-badge svg { color: var(--primary); }
.brand-theme .hero-title { font-size: clamp(2.35rem, 4.2vw, 3.65rem); line-height: 1.2; font-weight: 800; letter-spacing: -1.8px; }
.brand-theme .hero-title .highlight { background: none; -webkit-text-fill-color: currentColor; color: var(--primary); }
.brand-theme .hero-description { font-size: 1.02rem; line-height: 1.85; }
.brand-theme .hero-image-wrapper { border: 5px solid #fff; border-radius: 22px; box-shadow: var(--shadow-lg); }
.brand-theme .hero-float-card { background: var(--bg-glass); border-color: var(--border-subtle); box-shadow: var(--shadow-md); animation: none; }
.brand-theme :is(.trust-number, .float-content h4) { color: var(--text-main); }
.brand-theme .float-icon { background: var(--brand-tint); color: var(--primary); flex-shrink: 0; }
.brand-theme .btn-primary { background: var(--primary); border-color: var(--primary); box-shadow: none; font-weight: 700; }
.brand-theme .btn-primary:hover { background: var(--primary-hover); filter: none; box-shadow: 0 6px 18px var(--primary-glow); }
.brand-theme .btn-phone { background: var(--bg-surface); border-color: var(--border-light); color: var(--text-main); }
.brand-theme .btn-phone:hover { background: var(--brand-tint); }
.brand-theme .btn-emerald { background: #28714f; border-color: #28714f; }
.brand-theme .btn-emerald:hover { background: #205e41; }
.brand-theme .section-title { font-weight: 800; letter-spacing: -1.1px; }
.brand-theme .section-tag { color: var(--primary); font-size: 0.75rem; letter-spacing: 1.8px; }

/* Systems, project gallery and information cards. */
.brand-theme :is(.system-card, .feature-box, .review-card, .faq-item) { background: var(--bg-surface); border-color: var(--border-subtle); box-shadow: 0 4px 18px #33232e03; }
.brand-theme :is(.system-card:hover, .feature-box:hover) { background: var(--bg-surface); border-color: var(--brand-border); box-shadow: var(--shadow-md); }
.brand-theme .card-badge { background: var(--bg-glass); color: var(--primary); border-color: var(--border-subtle); }
.brand-theme :is(.spec-item, .price-hint strong, .review-text, .faq-question) { color: var(--text-main); }
.brand-theme .feature-icon-wrapper { background: var(--brand-tint); border-color: var(--border-subtle); color: var(--primary); }
.brand-theme .filter-btn { background: var(--bg-surface); color: var(--text-muted); }
.brand-theme :is(.filter-btn.active, .filter-btn:hover) { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: none; }
.brand-theme .gallery-overlay { background: linear-gradient(180deg, #29202b00 30%, #29202bf2 100%); }
.brand-theme .gallery-overlay h4 { color: #fff; }
.brand-theme .gallery-overlay p { color: #e5dce4; }
.brand-theme .gallery-tag { color: #ead0e2; }
.brand-theme .author-avatar { background: var(--primary); color: #fff; }
.brand-theme .faq-icon { background: var(--brand-tint); }
.brand-theme .faq-item.active { border-color: var(--brand-border); }
.brand-theme .faq-item.active .faq-icon { background: var(--primary); color: #fff; }
.brand-theme .cta-banner { background: #302731; border-color: #463a46; box-shadow: none; }
.brand-theme .cta-banner::after { background: radial-gradient(circle, #bc8fb22e, transparent 70%); }
.brand-theme .cta-content h2 { color: #fff; }
.brand-theme .cta-content p { color: #e3d6df; }
.brand-theme .cta-content .btn-primary:not(.btn-emerald) { background: #e9d8e5; border-color: #e9d8e5; color: #392835; }
.brand-theme .site-footer { background: #f0ebee; border-color: var(--border-light); }
.brand-theme .footer-title { color: var(--text-main); }
.brand-theme .footer-bottom { border-color: var(--border-light); }
.brand-theme .floating-calc { background: var(--primary); box-shadow: var(--shadow-md); }
.brand-theme .floating-whatsapp { background: #28714f; box-shadow: var(--shadow-md); }
.brand-theme .floating-instagram { background: var(--primary); box-shadow: var(--shadow-md); }
.brand-theme .floating-tooltip { background: #302731; color: #fff; }
.brand-theme .floating-btn:focus-visible .floating-tooltip { opacity: 1; transform: translateX(-4px); }

/* Quote forms use the same colors as the page. */
.brand-theme .modal-backdrop { background: #241c29a6; }
.brand-theme .modal-dialog { background: var(--bg-surface); box-shadow: 0 24px 80px #241c292e; max-height: 90dvh; overflow-y: auto; }
.brand-theme .modal-close:hover { color: var(--primary); }
.brand-theme .form-input { background: var(--bg-body); color: var(--text-main); border-color: var(--border-light); }
.brand-theme .form-input:focus { background: var(--bg-surface); }
.brand-theme .admin-card { background: var(--bg-surface-elevated); }
.brand-theme .admin-field-row label { color: var(--text-muted); }
.brand-theme .admin-card-title { color: var(--primary); }

/* The existing three-step flow shares the page's brand tokens. */
.brand-theme .drawing-studio-section { background: var(--bg-section); border-color: var(--border-subtle); }
.brand-theme .pricing-flow .ds-card { background: var(--bg-surface); box-shadow: var(--shadow-lg); }
.brand-theme .pricing-flow .ds-card::before { background: var(--primary); }
.brand-theme .pricing-flow .ds-btn-kesif { background: var(--bg-surface); border-color: var(--border-light); color: var(--text-main); }
.brand-theme .pricing-flow .ds-btn-kesif:hover { background: var(--brand-tint); border-color: var(--brand-border); }
.brand-theme .pricing-flow .ds-link-btn strong { color: var(--primary); }
.brand-theme .pricing-flow .ds-canvas-area { background: #231d2a; border-color: #4a3c50; }
.brand-theme .ds-live-estimate { background: var(--brand-tint); }
.brand-theme .pricing-flow .ds-btn-add-segment { background: var(--brand-tint); color: var(--primary); border-color: var(--brand-border); }
.brand-theme .pricing-flow .ds-angle-btn { background: var(--bg-surface); color: var(--text-muted); border-color: var(--border-light); }
.brand-theme .pricing-flow .ds-angle-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.brand-theme .pricing-flow .range-slider { background: var(--border-light); }
.brand-theme .pricing-flow .ds-dot { box-shadow: 0 0 0 1px #29252c33; }
.brand-theme .pricing-flow .ds-addon-chip:has(input:checked) { background: var(--brand-tint); border-color: var(--primary); color: var(--primary-hover); }
.brand-theme .pricing-flow .ds-btn-wa { background: #28714f; color: #fff; }
.brand-theme .pricing-flow .ds-btn-wa:hover { background: #205e41; }
.brand-theme .pricing-flow .ds-system-card:has(input:checked)::after { background: var(--bg-surface); border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.brand-theme .pricing-flow :is(.ds-system-card strong, .ds-metric-val, .ds-addon-chip, .ds-sum-val) { color: var(--text-main); }
.brand-theme .pricing-flow .ds-metric-val.highlight { color: var(--primary); }
.brand-theme .pricing-flow .ds-sys-badge { background: var(--bg-surface); color: var(--primary); }
.brand-theme .pricing-flow .ds-color-chip:has(input:checked) { color: var(--primary-hover); border-color: var(--primary); background: var(--brand-tint); }
.brand-theme .pricing-flow .ds-color-chip:hover { color: var(--primary-hover); border-color: var(--brand-border); background: var(--brand-tint); }
.brand-theme .pricing-flow .ds-btn-step:hover { color: var(--primary-hover); background: var(--brand-tint); }
.brand-theme .ds-panel-heading h3:focus { outline: none; }

@media (max-width: 900px) {
  .brand-theme .logo-name { font-size: 1.4rem; }
  .brand-theme .logo-sub { font-size: .57rem; letter-spacing: 1.15px; }
  .brand-theme .logo-badge { width: 40px; height: 40px; }
  .brand-theme .hero-title { font-size: clamp(2rem, 7.5vw, 3rem); letter-spacing: -1.1px; }
  .brand-theme .hero-badge { align-items: flex-start; line-height: 1.6; padding: 8px 12px; }
  .brand-theme .hero-badge svg { flex-shrink: 0; margin-top: 2px; }
  .brand-theme .hero-trust-bar { gap: 18px; }
  .brand-theme .trust-number { font-size: 1.2rem; }
  .brand-theme .trust-label { font-size: 0.75rem; }
  .brand-theme .hero-cta-group > .btn-primary { width: 100%; padding-inline: 14px !important; font-size: .9rem !important; }
  .brand-theme .hero-cta-group > .btn-phone { display: inline-flex; justify-content: center; width: 100%; padding-inline: 14px !important; font-size: .9rem !important; }
  .brand-theme .pricing-flow .ds-mobile-sticky-bar.is-visible { background: var(--bg-glass); border-top-color: var(--border-light); box-shadow: 0 -4px 24px #33232e0c; }
  .brand-theme .card-footer { flex-wrap: wrap; gap: 16px; }
}

@media (max-width: 380px) {
  .brand-theme .logo-badge { width: 32px; height: 36px; }
  .brand-theme .logo-name { font-size: 1.2rem; }
  .brand-theme .logo-sub { font-size: .5rem; letter-spacing: .6px; }
}