/* Looks. A brand picks one theme (data-theme) and one hero layout (data-layout) in its brand file.
 * The brand file sets --brand, --accent and fonts on top; every other token lives here.
 * Themes: modern (clean, light, round), builder (warm, square, slab headings), premium (dark, serif, gold lines).
 * Layouts: split (copy beside the drawing) and banner (drawing in a full-width band above the copy). */

:root,
[data-theme="modern"] {
  --brand: #1f6f5c; --accent: #f2a93b; --brand-ink: #fff; --accent-ink: #1a1a1a;
  --brand-dark: color-mix(in srgb, var(--brand) 70%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 35%, transparent);
  --font-display: system-ui, sans-serif; --font-body: system-ui, sans-serif;
  --bg: #ffffff; --surface: #ffffff; --ink: #16201d; --muted: #4f5b57; --line: #e3e8e6; --line-strong: #c9d2cf;
  --link: var(--brand-dark); --input-bg: #fff;
  --radius: 16px; --btn-radius: 12px; --shadow: 0 6px 24px rgba(16, 32, 28, .07); --btn-shadow: 0 6px 16px rgba(0, 0, 0, .12);
  --btn-case: none; --btn-track: 0; --heading-weight: 800; --heading-track: -.02em;
  --ribbon-bg: #16201d; --ribbon-ink: #fff;
  --header-bg: #fff; --header-ink: #16201d; --footer-bg: #16201d; --footer-ink: #e9efed;
  --band-alt: color-mix(in srgb, var(--brand) 6%, #fff); --eyebrow: var(--brand-dark);
  --hero-bg: linear-gradient(180deg, color-mix(in srgb, var(--brand) 10%, #fff), #fff); --hero-ink: #16201d; --hero-muted: #4f5b57;
  --hero-link: var(--brand-dark); --hero-line: #dfe6e3;
  --star: #e8a317; --verify-bg: #fff1c2; --verify-ink: #5c4300;
  --slot-a: #f3f6f5; --slot-b: #ebf0ee; --ok: #1e7f4f; --warn: #b3261e; --price: var(--brand-dark); --bubble: #eef3f1;
  --ground: color-mix(in srgb, var(--brand) 18%, #fff); --wall: #f4efe8; --window: #cfe3ef;
}

[data-theme="builder"] {
  --brand-dark: color-mix(in srgb, var(--brand) 72%, #000);
  --bg: #f7f2ea; --surface: #fffdf9; --ink: #221c16; --muted: #5a5047; --line: #e4d9cb; --line-strong: #c7b8a5;
  --link: var(--brand-dark); --input-bg: #fff;
  --radius: 4px; --btn-radius: 3px; --shadow: 0 2px 0 rgba(34, 28, 22, .12); --btn-shadow: 0 3px 0 rgba(0, 0, 0, .25);
  --btn-case: uppercase; --btn-track: .04em; --heading-weight: 700; --heading-track: 0;
  --ribbon-bg: #f2c230; --ribbon-ink: #221c16;
  --header-bg: #221c16; --header-ink: #fffdf9; --footer-bg: #221c16; --footer-ink: #efe6da;
  --band-alt: #efe6da; --eyebrow: var(--brand-dark);
  --hero-bg: #f7f2ea; --hero-ink: #221c16; --hero-muted: #5a5047; --hero-link: var(--brand-dark); --hero-line: #d9ccbb;
  --star: #d98b00; --verify-bg: #fde6b0; --verify-ink: #4d3500;
  --slot-a: #efe6da; --slot-b: #e7dccd; --ok: #2f7a3d; --warn: #a52a1a; --price: var(--brand-dark); --bubble: #efe6da;
  --ground: #a8b07e; --wall: #e9dcc7; --window: #bcd4df;
}
[data-theme="builder"] .header { border-bottom: 4px solid var(--brand); }
[data-theme="builder"] .card, [data-theme="builder"] .option { border-width: 2px; }

[data-theme="premium"] {
  --brand-dark: color-mix(in srgb, var(--brand) 65%, #000);
  --bg: #0f1215; --surface: #171b20; --ink: #f2eee6; --muted: #bcb5a8; --line: rgba(255, 255, 255, .1); --line-strong: rgba(255, 255, 255, .24);
  --link: var(--accent); --input-bg: #0f1215;
  --radius: 10px; --btn-radius: 999px; --shadow: none; --btn-shadow: none;
  --btn-case: none; --btn-track: .02em; --heading-weight: 700; --heading-track: 0;
  --ribbon-bg: var(--accent); --ribbon-ink: var(--accent-ink);
  --header-bg: #0f1215; --header-ink: #f2eee6; --footer-bg: #0a0c0e; --footer-ink: #cfc8bb;
  --band-alt: #14181c; --eyebrow: var(--accent);
  --hero-bg: radial-gradient(1200px 500px at 80% 0%, color-mix(in srgb, var(--brand) 45%, #0f1215), #0f1215); --hero-ink: #f2eee6;
  --hero-muted: #c9c2b5; --hero-link: var(--accent); --hero-line: rgba(255, 255, 255, .14);
  --star: var(--accent); --verify-bg: #3a2f12; --verify-ink: #f5d98a;
  --slot-a: #171b20; --slot-b: #1c2127; --ok: #5fbf8a; --warn: #ff8a7a; --price: var(--accent); --bubble: #1f252c;
  --ground: color-mix(in srgb, var(--brand) 60%, #0f1215); --wall: #2a2f36; --window: #3c4a57;
}
[data-theme="premium"] h1, [data-theme="premium"] h2 { font-weight: 600; }
[data-theme="premium"] .band--cta { background: var(--surface); color: var(--ink); border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); }
[data-theme="premium"] .btn--call { background: transparent; color: var(--accent); border-color: var(--accent); }
[data-theme="premium"] .confirm__tick { color: #0f1215; }

/* Layout: split. Copy left, drawing right on wide screens; drawing under the copy on phones. */
@media (min-width: 860px) {
  [data-layout="split"] .hero { padding: 64px 0 36px; }
  [data-layout="split"] .hero__in { grid-template-columns: 1.15fr .85fr; gap: 48px; }
}
[data-layout="split"] .hero__art { max-width: 460px; justify-self: center; }

/* Layout: banner. Drawing in a full-width band tinted with the brand colour, copy centred below. */
[data-layout="banner"] .hero { padding-top: 0; }
[data-layout="banner"] .hero__in { text-align: center; justify-items: center; }
[data-layout="banner"] .hero__art {
  order: -1; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  background: color-mix(in srgb, var(--brand) 22%, var(--bg)); display: flex; justify-content: center; padding: 28px 16px 0;
}
[data-layout="banner"] .house-art { max-width: 460px; max-height: 260px; }
[data-layout="banner"] .hero__copy { max-width: 760px; }
[data-layout="banner"] .hero__actions { align-items: center; }
[data-layout="banner"] .trust { justify-content: center; }

/* Hero photo (brand.heroPhoto): the firm's own photo in place of the drawing. */
.hero__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
[data-layout="banner"] .hero__art.has-photo { padding: 0; background: none; }
[data-layout="banner"] .hero__photo { aspect-ratio: auto; height: clamp(220px, 40vw, 440px); border-radius: 0; }
.photo-slot--art { display: flex; align-items: flex-end; justify-content: center; background: color-mix(in srgb, var(--brand) 14%, var(--bg)); padding: 16px 16px 0; }