/* Four independent visual directions. Day/night is a separate preference.
   html:root preserves the element weight and adds a specificity level over legacy dark-mode groups. */
html:root[data-design="turquoise"] {
  --accent: #087e88; --accent-hover: #066771; --on-accent: #fff;
  --ink: #16353d; --muted: #526b73; --line: #d7e7e8;
  --paper: #f4fafb; --surface: #fff; --surface-soft: #e9f5f5;
  --hero: #e0f4f2; --hero-ink: #103f47; --hero-muted: #416c74;
  --hero-em: #087e88; --highlight: #d0eeee; --warm: #c9884c;
  --component-radius: 20px; --button-radius: 12px;
  --heading-font: Manrope, 'Segoe UI', Arial, sans-serif;
  --card-shadow: 0 12px 35px #184b5010;
}
html:root[data-design="turquoise"][data-theme="dark"] {
  --accent: #67d7d6; --accent-hover: #91e9e5; --on-accent: #083436;
  --ink: #e5f4f5; --muted: #abc6cc; --line: #294a50;
  --paper: #0c1f25; --surface: #132d34; --surface-soft: #1b3940;
  --hero: #123a42; --hero-ink: #e9fafa; --hero-muted: #b5d9dd;
  --hero-em: #70e0d8; --highlight: #21494f; --warm: #ebbb83;
  --card-shadow: 0 12px 35px #00000020;
}
html:root[data-design="prestige"] {
  --accent: #795c25; --accent-hover: #60471b; --on-accent: #fff;
  --ink: #302c26; --muted: #71695c; --line: #e0d9cb;
  --paper: #f6f3ec; --surface: #fffdf8; --surface-soft: #ece6d9;
  --hero: #272b29; --hero-ink: #fffaf0; --hero-muted: #d3cdbd;
  --hero-em: #dfc38f; --highlight: #e9dec8; --warm: #a87a34;
  --component-radius: 4px; --button-radius: 3px;
  --heading-font: Georgia, 'Times New Roman', serif;
  --card-shadow: 0 8px 24px #493c2510;
}
html:root[data-design="prestige"][data-theme="dark"] {
  --accent: #e1c58d; --accent-hover: #f3dba8; --on-accent: #332712;
  --ink: #f1e9dc; --muted: #c7bdab; --line: #4b463d;
  --paper: #1a1c1b; --surface: #252825; --surface-soft: #30332e;
  --hero: #252d2a; --hero-ink: #fffaf0; --hero-muted: #d4cbb7;
  --hero-em: #e1c58d; --highlight: #443e2d; --warm: #e1c58d;
  --card-shadow: 0 8px 24px #00000020;
}
html:root[data-design="metro"] {
  --accent: #2859d6; --accent-hover: #1a46b5; --on-accent: #fff;
  --ink: #1c2d50; --muted: #566982; --line: #dce4f0;
  --paper: #f4f7fc; --surface: #fff; --surface-soft: #eaf0fc;
  --hero: #eaf0ff; --hero-ink: #182f64; --hero-muted: #4b628b;
  --hero-em: #2859d6; --highlight: #dce7ff; --warm: #a9722a;
  --component-radius: 12px; --button-radius: 9px;
  --heading-font: Manrope, 'Segoe UI', Arial, sans-serif;
  --card-shadow: 0 10px 25px #1d3f8510;
}
html:root[data-design="metro"][data-theme="dark"] {
  --accent: #a1bfff; --accent-hover: #c1d4ff; --on-accent: #182e60;
  --ink: #e8efff; --muted: #afc0dc; --line: #334765;
  --paper: #101b2d; --surface: #1a2a42; --surface-soft: #223550;
  --hero: #182e55; --hero-ink: #edf3ff; --hero-muted: #bdd0f2;
  --hero-em: #a1c2ff; --highlight: #2b446b; --warm: #ebc381;
  --card-shadow: 0 10px 25px #00000020;
}
html:root[data-design="studio"] {
  --accent: #884363; --accent-hover: #70344f; --on-accent: #fff;
  --ink: #392b3b; --muted: #776376; --line: #eadbe5;
  --paper: #fbf7fa; --surface: #fff; --surface-soft: #f3e8ef;
  --hero: #eee0ec; --hero-ink: #472845; --hero-muted: #765671;
  --hero-em: #a14b72; --highlight: #eed7e4; --warm: #b5763e;
  --component-radius: 22px; --button-radius: 20px;
  --heading-font: Georgia, 'Times New Roman', serif;
  --card-shadow: 0 12px 32px #60354e10;
}
html:root[data-design="studio"][data-theme="dark"] {
  --accent: #efb2cf; --accent-hover: #f7d0e3; --on-accent: #46213a;
  --ink: #f7e9f3; --muted: #cdb3c9; --line: #54394f;
  --paper: #211724; --surface: #302133; --surface-soft: #3c2a3e;
  --hero: #41283f; --hero-ink: #fff0f8; --hero-muted: #e4bfd6;
  --hero-em: #ffb4d1; --highlight: #533249; --warm: #edc48f;
  --card-shadow: 0 12px 32px #00000020;
}

/* Bridge the original public, account and commerce components to the palette. */
html:root[data-design] {
  --green: var(--accent); --green-dark: var(--accent-hover);
  --green-light: var(--surface-soft); --white: var(--surface);
  --orange: var(--warm); --radius: var(--component-radius);
  --status-success: #315f40; --status-success-bg: #edf6ed;
  --status-pending: #75551e; --status-pending-bg: #fff3d8;
  --status-danger: #8e403c; --status-danger-bg: #fcecea;
  accent-color: var(--accent);
}
html:root[data-design][data-theme="dark"] {
  --status-success: #b9dfbd; --status-success-bg: #243d31;
  --status-pending: #f3d49c; --status-pending-bg: #46391f;
  --status-danger: #f1b4b3; --status-danger-bg: #482b30;
}
html:root[data-design] body { background: var(--paper); color: var(--ink); }
html:root[data-design] :is(h1,h2,h3,h4) { font-family: var(--heading-font); color: var(--ink); }
html:root[data-design] :is(.brand,.text-link,.inline-link,.results-toolbar strong,.plan-price,.catalog-bottom strong) { color: var(--accent); }
html:root[data-design] :is(p,.muted,.breadcrumb,.article-meta,.address-line,.contact-line,.editorial-byline,.local-prose) { color: var(--muted); }
html:root[data-design] :is(.topbar,.page-heading,.how-section,.local-discovery,.local-quick-card,.auth-story,.contact-illustration,.sidebar-promo,.empty-state) { background: var(--surface-soft); border-color: var(--line); color: var(--ink); }
html:root[data-design] :is(.filter-sidebar,.filter-form) { background: transparent; }
html:root[data-design] .site-header { background: var(--paper); border-color: var(--line); }
html:root[data-design] .topbar { color: var(--muted); }
html:root[data-design] .topbar-divider { background: var(--line); }
html:root[data-design] :is(.company-card,.category-card,.content-card,.catalog-card,.contact-card,.pricing-card,.city-directory>a,.local-guide-card,.local-guide-filter,.local-editorial,.commerce-job-card,.commerce-package-card,.commerce-job-search,.filter-disclosure,.search-form,.instant-results) { background: var(--surface); color: var(--ink); border-color: var(--line); border-radius: var(--component-radius); }
html:root[data-design] :is(.company-card,.category-card,.commerce-job-card,.commerce-package-card) { box-shadow: var(--card-shadow); }
html:root[data-design] :is(.company-card:hover,.category-card:hover,.commerce-job-card:hover) { border-color: var(--accent); box-shadow: var(--card-shadow); }
html:root[data-design] :is(.button,.panel-button) { border-radius: var(--button-radius); }
html:root[data-design] :is(.button-primary,.button-primary:hover,.recommended-badge,.pagination>a.active) { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
html:root[data-design] .button-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
html:root[data-design] .button-outline { border-color: var(--line); color: var(--accent); background: var(--surface); }
html:root[data-design] .button-outline:hover { border-color: var(--accent); background: var(--surface-soft); }
html:root[data-design] .button-cream { background: var(--surface); color: var(--accent); }
html:root[data-design] :is(.theme-toggle,.design-picker-toggle,.mobile-menu-close,.panel-menu-toggle,.panel-menu-close) { background: var(--surface); border-color: var(--line); color: var(--accent); }
html:root[data-design] :is(input,select,textarea) { color: var(--ink); }
html:root[data-design] :is(input,textarea)::placeholder { color: var(--muted); opacity: .9; }
html:root[data-design] :is(.form-stack input,.form-stack textarea,.form-stack select,.filter-form select,.local-guide-filter select,.commerce-job-search select,.commerce-job-search label>div,.commerce-package-form select,.commerce-approval-form input,.commerce-sponsor-form input,.commerce-sponsor-form select,.commerce-catalog-filter select,.simple-search,.results-toolbar select) { border-color: var(--line); background: var(--surface); color: var(--ink); border-radius: var(--button-radius); }
html:root[data-design] :is(.filter-title,.filter-form label,.results-toolbar,.category-card>span:last-child,.card-category,.rating,.rating small,.company-card-bottom,.company-card-distance,.local-guide-location,.local-guide-filter>label,.local-search-tip strong,.local-search-tip p,.pricing-card li,.pricing-note,.form-stack label,.form-note,.auth-story-note small,.how-intro h2>span,.how-step small,.city-directory>a>div>span,.city-directory small) { color: var(--muted); }
html:root[data-design] :is(.eyebrow,.local-guide-location,.company-card-distance,.profile-name .card-category,.filter-mobile-summary) { color: var(--accent); }
html:root[data-design] :is(.category-icon,.city-directory-icon,.local-guide-icon,.local-sector-links a,.local-hero-label,.plan-icon,.mini-brand,.review-avatar,.search-understanding-icon,.company-card-bottom>a,.tab-bar small,.commerce-package-symbol,.commerce-job-top>span,.commerce-job-card footer a,.commerce-quota-icon,.instant-result-icon,.how-step>div>span) { background: var(--surface-soft); color: var(--accent); border-color: var(--line); }
html:root[data-design] :is(.category-color-1 .category-icon,.category-color-2 .category-icon,.category-color-3 .category-icon) { background: var(--highlight); color: var(--accent); }
html:root[data-design] :is(.featured-badge,.sponsor-badge) { background: var(--accent); color: var(--on-accent); border-radius: var(--button-radius); }
html:root[data-design] .favorite-button { color: var(--accent); background: var(--surface); width: 34px; height: 34px; }
html:root[data-design] .favorite-button .icon { width: 17px; height: 17px; }
html:root[data-design] .company-image { background: var(--surface-soft); }
html:root[data-design] .company-card { display: flex; flex-direction: column; }
html:root[data-design] .company-card-body { display: flex; flex-direction: column; flex: 1; padding: 19px 19px 0; min-width: 0; }
html:root[data-design] .company-card h3 { margin-top: 11px; font-family: var(--font); font-size: 17px; line-height: 1.5; letter-spacing: -.4px; align-items: flex-start; }
html:root[data-design] .company-card h3>a { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html:root[data-design] .company-card h3 .verified { display: inline-flex; margin-top: 5px; }
html:root[data-design] .company-card-body>p { margin: 7px 0 17px; white-space: normal; font-size: 13px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html:root[data-design] .company-card-bottom { margin-top: auto; border-color: var(--line); min-height: 49px; font-size: 12px; }
html:root[data-design] .company-card-distance { margin: 0 0 14px; }
html:root[data-design] .card-category { font-size: 12px; line-height: 1.5; }
html:root[data-design] .rating { font-size: 13px; }
html:root[data-design] .verified .icon { color: var(--accent); fill: var(--surface-soft); }
html:root[data-design] :is(.company-card-bottom,.tab-bar,.footer-bottom,.filter-title,.filter-form,.content-card hr,.how-step>div,.catalog-bottom,.commerce-job-card footer,.local-quick-card .contact-line,.local-hero-facts) { border-color: var(--line); }
html:root[data-design] .search-understanding { background: var(--surface-soft); border-color: var(--line); }
html:root[data-design] .search-understanding strong { color: var(--ink); }
html:root[data-design] .search-understanding p { color: var(--muted); }
html:root[data-design] .search-intent-chips>span { color: var(--accent); border-color: var(--line); background: var(--surface); }
html:root[data-design] :is(.local-demo-note,.local-scope-note,.local-tip,.company-service-tags>span,.service-chips>span,.company-provenance,.company-source,.commerce-payment-note,.commerce-quota,.commerce-payment-guidance) { color: var(--muted); background: var(--surface-soft); border-color: var(--line); }
html:root[data-design] :is(.sponsored-results,.commerce-package-card.sponsor-package) { background: var(--surface-soft); border-color: var(--line); }
html:root[data-design] :is(.search-section-title strong,.instant-heading strong,.commerce-section-heading h2) { color: var(--ink); }
html:root[data-design] :is(.instant-heading,.instant-group-heading,.instant-result,.instant-all) { border-color: var(--line); }
html:root[data-design] :is(.instant-result:hover,.instant-all:hover,.instant-group-heading) { background: var(--surface-soft); }
html:root[data-design] .instant-results { --green: var(--accent); --green-light: var(--surface-soft); box-shadow: 0 20px 60px #08192330; }
html:root[data-design] .instant-result strong { color: var(--ink); }
html:root[data-design] .instant-result small { color: var(--muted); }
html:root[data-design] .instant-result .instant-sponsor-label { background: var(--highlight); color: var(--accent); }
html:root[data-design] .instant-all { color: var(--accent); background: var(--surface); }
html:root[data-design] .site-footer { background: var(--surface-soft); color: var(--ink); border-color: var(--line); }
html:root[data-design] .cta-section { background: transparent; }
html:root[data-design] :is(.join-section,.discovery-banner) { background: var(--surface-soft); color: var(--ink); }
html:root[data-design] :is(.sidebar-promo p,.join-section p,.discovery-banner p) { color: var(--muted); }
html:root[data-design] .flash { background: var(--surface-soft); color: var(--ink); border-color: var(--line); }
html:root[data-design] :is(.footer-main p,.footer-main>div:not(:first-child)>a,.footer-bottom,.footer-social>a,.footer-social>span) { color: var(--muted); }
html:root[data-design] .footer-newsletter form { border-color: var(--line); background: transparent; }
html:root[data-design] .footer-newsletter button { color: var(--accent); }
html:root[data-design] .nav-dropdown>div { background: var(--surface); border-color: var(--line); }
html:root[data-design] :is(.nav-dropdown>div>a:hover,.main-nav>a.active) { color: var(--accent); background: var(--surface-soft); }
html:root[data-design] :is(.nav-logout,.header-logout button) { color: var(--muted); }
html:root[data-design] :is(.main-nav.open,.mobile-business-actions) { background: var(--surface); border-color: var(--line); }
html:root[data-design] .tab-bar { background: transparent; }
html:root[data-design] .tab-bar>button { color: var(--muted); }
html:root[data-design] .tab-bar>button.active { color: var(--accent); border-color: var(--accent); }
html:root[data-design] .pricing-card.recommended { background: var(--surface-soft); border-color: var(--accent); }
html:root[data-design] :is(.auth-story h1 em,.plan-icon,.auth-story-note>.icon) { color: var(--accent); }
html:root[data-design] .auth-story-note { color: var(--ink); background: var(--surface); border: 1px solid var(--line); }
html:root[data-design] .company-logo { background: var(--surface); border-color: var(--surface); color: var(--accent); }
html:root[data-design] :is(.cta-panel,.local-hero) { background: var(--hero); color: var(--hero-ink); }
html:root[data-design] :is(.cta-panel h2,.local-hero h1) { color: var(--hero-ink); }
html:root[data-design] :is(.cta-panel p,.cta-panel .eyebrow,.local-hero p,.local-hero .breadcrumb,.local-hero-facts) { color: var(--hero-muted); }
html:root[data-design] .local-hero-label { background: var(--surface); }
html:root[data-design] .hero-panel { --green: var(--accent); background: var(--hero); border: 1px solid var(--line); color: var(--hero-ink); border-radius: var(--component-radius); }
html:root[data-design] .hero-copy h1 { color: var(--hero-ink); font-family: var(--heading-font); font-weight: 800; }
html:root[data-design] .hero-copy h1 em { color: var(--hero-em); }
html:root[data-design] :is(.hero-copy>p,.hero-eyebrow,.hero-proof,.hero-proof strong,.popular-searches,.popular-searches>a) { color: var(--hero-muted); }
html:root[data-design] .hero-eyebrow>span { background: var(--accent); }
html:root[data-design] .hero-asterisk { color: var(--hero-em); }
html:root[data-design] .hero-art-shade { --green: var(--accent); background: linear-gradient(90deg,var(--hero),transparent 35%),linear-gradient(0deg,var(--hero),transparent 40%); }
html:root[data-design] .hero-floating-card { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--card-shadow); }
html:root[data-design] .hero-floating-card small { color: var(--muted); }
html:root[data-design] .floating-icon { color: var(--accent); background: var(--surface-soft); }
html:root[data-design] .floating-check { background: var(--accent); color: var(--on-accent); }
html:root[data-design] .avatar-stack img { border-color: var(--hero); }
html:root[data-design] .avatar-stack>span { background: var(--surface); color: var(--accent); border-color: var(--hero); }
html:root[data-design] .hero-search-wrap .search-form { box-shadow: 0 10px 35px #102e3710; }
html:root[data-design] .search-form :is(input,select) { background: transparent; color: var(--ink); }
html:root[data-design] .search-form .search-city { border-color: var(--line); }
html:root[data-design] .search-form :is(.search-keyword>.icon,.search-city>.icon) { color: var(--accent); }
html:root[data-design] .hero-bottom { border-color: var(--line); color: var(--muted); }
html:root[data-design] .hero-bottom :is(strong,a) { color: var(--accent); }

/* Accounts and administration use the selected visual direction too. */
html:root[data-design] .management-shell { --panel-green: var(--accent); --panel-orange: var(--warm); --panel-border: var(--line); background: var(--paper); color: var(--ink); }
html:root[data-design] :is(.panel-sidebar,.panel-card,.panel-metric,.panel-mobile-toolbar,.panel-drawer-header,.panel-company-card,.panel-form-footer,.panel-icon-button,.panel-status-form select,.panel-filter select,.panel-search) { background: var(--surface); color: var(--ink); border-color: var(--line); }
html:root[data-design] :is(.panel-card,.panel-company-card,.panel-metric,.panel-welcome-card,.panel-info-banner,.panel-content-note,.panel-member-tip,.commerce-quota,.commerce-package-card,.commerce-job-card) { border-radius: var(--component-radius); }
html:root[data-design] .management-shell :is(h1,h2,h3,h4,strong,.panel-field>span,.panel-sidebar-title,.panel-table td strong,.panel-company-body h2) { color: var(--ink); }
html:root[data-design] .management-shell :is(p,small,label,.panel-table td,.panel-table th,.panel-entity small,.panel-content-note p,.panel-cell-note,.panel-footnote,.panel-sidebar nav>a,.panel-eyebrow,.panel-current-image,.panel-pagination,.panel-checks,.panel-topline,.panel-topline>a,.panel-metric>div,.panel-category-bars>div>span) { color: var(--muted) !important; }
html:root[data-design] .management-shell :is(input,select,textarea) { background: var(--surface); color: var(--ink); border-color: var(--line); }
html:root[data-design] .panel-field input:focus,html:root[data-design] .panel-field textarea:focus,html:root[data-design] .panel-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--surface-soft); }
html:root[data-design] :is(.panel-sidebar-symbol,.panel-entity-icon,.panel-list-count b,.panel-info-banner,.panel-member-tip,.panel-content-note,.panel-moderation-note,.panel-message-detail p,.panel-company-placeholder,.panel-table th,.panel-table tbody tr:hover,.panel-sidebar nav>a:hover) { background: var(--surface-soft); color: var(--accent); border-color: var(--line); }
html:root[data-design] :is(.panel-mobile-toolbar>span,.panel-sidebar-bottom>a,.panel-sidebar-bottom button,.panel-topline>span>span,.panel-step-label,.panel-empty) { color: var(--muted); }
html:root[data-design] :is(.panel-card-heading>a,.panel-card-heading>svg,.panel-quick>a,.panel-quick>a svg,.panel-info-banner>a,.panel-info-banner>svg,.panel-moderation-note svg,.panel-member-tip>span,.panel-member-tip a,.panel-icon-button,.panel-verified) { color: var(--accent); }
html:root[data-design] .panel-icon-button:hover { color: var(--accent); border-color: var(--accent); background: var(--surface-soft); }
html:root[data-design] .panel-field input[readonly] { background: var(--surface-soft); color: var(--muted); }
html:root[data-design] .panel-plan-label { background: var(--surface-soft); color: var(--accent); }
html:root[data-design] .management-shell :is(td,th,hr,.panel-card-heading,.panel-form-footer,.panel-quick>a,.panel-form-section,.panel-pagination,.panel-company-actions,.panel-sidebar-title,.panel-sidebar-bottom) { border-color: var(--line); }
html:root[data-design] .panel-button:not(.secondary):not(.danger) { background: var(--accent); border-color: var(--accent); color: var(--on-accent) !important; }
html:root[data-design] .panel-button:not(.secondary):not(.danger):hover { background: var(--accent-hover); }
html:root[data-design] .panel-button.secondary { background: var(--surface); border-color: var(--line); color: var(--accent) !important; }
html:root[data-design] .panel-sidebar nav>a.active { color: var(--on-accent) !important; background: var(--accent); }
html:root[data-design] .panel-sidebar nav>a.active b { color: var(--on-accent); background: #ffffff25; }
html:root[data-design] :is(.panel-form-section,.panel-badge) { background: var(--surface-soft); color: var(--accent); border-color: var(--line); }
html:root[data-design] :is(.badge-published,.badge-active,.commerce-status-paid,.commerce-status-active) { background: var(--status-success-bg); color: var(--status-success); }
html:root[data-design] :is(.badge-pending,.badge-new,.commerce-status-pending) { background: var(--status-pending-bg); color: var(--status-pending); }
html:root[data-design] :is(.badge-rejected,.badge-blocked,.commerce-status-rejected,.commerce-status-paused) { background: var(--status-danger-bg); color: var(--status-danger); }
html:root[data-design] :is(.badge-draft,.badge-read,.badge-member) { background: var(--surface-soft); color: var(--muted); }
html:root[data-design] .badge-admin { background: var(--highlight); color: var(--accent); }
html:root[data-design] .panel-welcome-card { background: var(--hero); border: 1px solid var(--line); }
html:root[data-design] .panel-welcome-card :is(h2,strong) { color: var(--hero-ink); }
html:root[data-design] .panel-welcome-card p { color: var(--hero-muted) !important; }
html:root[data-design] .panel-welcome-card a { color: var(--hero-em); }
html:root[data-design] .commerce-quota>.panel-button.secondary { color: var(--accent) !important; }
html:root[data-design] .commerce-package-card.sponsor-package { background: linear-gradient(145deg,var(--surface),var(--surface-soft)); }

/* TURQUOISE — spacious, bright and contemporary. */
html:root[data-design="turquoise"] .hero-panel { min-height: 570px; padding: 52px; border-radius: 28px; }
html:root[data-design="turquoise"] .hero-copy { width: 57%; }
html:root[data-design="turquoise"] .hero-copy h1 { font-size: clamp(40px,4.1vw,59px); line-height: 1.12; letter-spacing: -2.8px; }
html:root[data-design="turquoise"] .hero-copy h1 em { font-family: var(--font); font-style: normal; font-weight: 800; }
html:root[data-design="turquoise"] .hero-art { inset: 26px 26px 120px 59%; border-radius: 100px 20px 100px 20px; }
html:root[data-design="turquoise"] .hero-art>img { filter: brightness(.96); }
html:root[data-design="turquoise"] .hero-art-shade { background: linear-gradient(0deg,#063e3b45,transparent 65%); }
html:root[data-design="turquoise"] .hero-image-caption { top: 23px; right: 23px; }
html:root[data-design="turquoise"] .hero-floating-card { right: 38px; bottom: 137px; transform: rotate(-2deg); border-radius: 16px; }
html:root[data-design="turquoise"] .hero-search-wrap { margin-top: 35px; }
html:root[data-design="turquoise"] .hero-search-wrap .search-form { border-radius: 16px; padding: 9px; }
html:root[data-design="turquoise"] .hero-asterisk { left: 265px; font-size: 60px; bottom: 1px; opacity: .5; }
html:root[data-design="turquoise"] .category-card { border-radius: 18px; }
html:root[data-design="turquoise"] .category-icon { border-radius: 50%; }
html:root[data-design="turquoise"] .page-heading { background: linear-gradient(120deg,var(--surface-soft),var(--paper)); }

/* PRESTIGE — editorial type, ivory paper and restrained gold. */
html:root[data-design="prestige"] :is(h1,h2) { font-weight: 500; letter-spacing: -.04em; }
html:root[data-design="prestige"] .brand { color: var(--ink); }
html:root[data-design="prestige"] .brand-dot { color: var(--accent); }
html:root[data-design="prestige"] .hero-panel { min-height: 575px; padding: 50px; border-color: var(--hero); border-radius: 4px; }
html:root[data-design="prestige"] .hero-copy { width: 56%; }
html:root[data-design="prestige"] .hero-copy h1 { font-size: clamp(42px,4.5vw,65px); font-weight: 500; letter-spacing: -2.6px; line-height: 1.07; }
html:root[data-design="prestige"] .hero-copy h1 em { font-family: Georgia,serif; font-style: italic; font-weight: 400; }
html:root[data-design="prestige"] .hero-copy>p { max-width: 420px; }
html:root[data-design="prestige"] .hero-eyebrow { text-transform: uppercase; letter-spacing: 2.5px; }
html:root[data-design="prestige"] .hero-art { inset: 0 0 0 55%; border-radius: 0; }
html:root[data-design="prestige"] .hero-art>img { filter: saturate(.65) brightness(.7); }
html:root[data-design="prestige"] .hero-art-shade { background: linear-gradient(90deg,var(--hero),transparent 70%),linear-gradient(0deg,var(--hero),transparent 65%); }
html:root[data-design="prestige"] .hero-floating-card { transform: none; right: 30px; bottom: 190px; border-radius: 2px; }
html:root[data-design="prestige"] .hero-asterisk { display: none; }
html:root[data-design="prestige"] .hero-search-wrap .search-form { border-radius: 3px; }
html:root[data-design="prestige"] .section-heading { border-top: 1px solid var(--line); padding-top: 25px; }
html:root[data-design="prestige"] .section-heading h2 { font-size: 37px; }
html:root[data-design="prestige"] .category-card { box-shadow: none; border-radius: 3px; }
html:root[data-design="prestige"] .category-icon { border-radius: 0; background: transparent; border-bottom: 1px solid var(--accent); }
html:root[data-design="prestige"] .company-card { box-shadow: none; border-radius: 3px; }
html:root[data-design="prestige"] .company-image { height: 205px; }
html:root[data-design="prestige"] .company-card h3 { font-family: Georgia,serif; font-size: 20px; font-weight: 500; letter-spacing: -.4px; }
html:root[data-design="prestige"] .listing-grid .company-image { height: 185px; }
html:root[data-design="prestige"] :is(.city-card,.article-image,.local-guide-card,.content-card,.panel-card,.panel-metric,.catalog-card,.commerce-package-card,.commerce-job-card) { border-radius: 3px; }
html:root[data-design="prestige"] .eyebrow { letter-spacing: 2px; font-size: 11px; }
html:root[data-design="prestige"] .page-heading { border-top: 3px solid var(--accent); }

/* METRO — an information platform with a central search and toolbar filters. */
html:root[data-design="metro"] .hero-panel { min-height: 510px; padding: 48px 55px 32px; text-align: center; background: radial-gradient(ellipse at 50% 10%,var(--surface) 0%,var(--hero) 72%); }
html:root[data-design="metro"] .hero-copy { width: 100%; max-width: 810px; margin-inline: auto; }
html:root[data-design="metro"] .hero-eyebrow { justify-content: center; }
html:root[data-design="metro"] .hero-copy h1 { max-width: 790px; margin-inline: auto; font-size: clamp(40px,4.7vw,64px); line-height: 1.1; font-weight: 800; letter-spacing: -2.8px; }
html:root[data-design="metro"] .hero-copy h1 em { font-family: var(--font); font-style: normal; font-weight: 800; }
html:root[data-design="metro"] .hero-copy>p { margin-inline: auto; font-size: 16px; max-width: 560px; }
html:root[data-design="metro"] .hero-proof { justify-content: center; margin-top: 18px; }
html:root[data-design="metro"] :is(.hero-art,.hero-asterisk,.hero-floating-card) { display: none; }
html:root[data-design="metro"] .hero-search-wrap { max-width: 1010px; margin: 28px auto 0; }
html:root[data-design="metro"] .hero-search-wrap .search-form { padding: 10px; box-shadow: 0 15px 40px #2859d614; }
html:root[data-design="metro"] .popular-searches { justify-content: center; }
html:root[data-design="metro"] .hero-bottom { padding-inline: 15px; }
html:root[data-design="metro"] .category-grid { gap: 12px; }
html:root[data-design="metro"] .category-card { padding: 19px 15px; text-align: center; }
html:root[data-design="metro"] .category-icon { margin-inline: auto; border-radius: 12px; }
html:root[data-design="metro"] .company-card h3 { font-size: 17px; }
html:root[data-design="metro"] .company-image { height: 180px; }
html:root[data-design="metro"] .page-heading .eyebrow { color: var(--accent); }
html:root[data-design="metro"] .page-heading { border-bottom: 1px solid var(--line); }
html:root[data-design="metro"] .page-heading h1 { font-weight: 800; }
@media(min-width:761px) {
  html:root[data-design="metro"] .directory-layout { grid-template-columns: minmax(0,1fr); gap: 27px; }
  html:root[data-design="metro"] .filter-sidebar { margin: 0; }
  html:root[data-design="metro"] .filter-disclosure { padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
  html:root[data-design="metro"] .filter-title { border: 0; padding: 0; font-size: 14px; }
  html:root[data-design="metro"] .filter-form { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) auto; gap: 16px; align-items: end; margin-top: 16px; }
  html:root[data-design="metro"] .filter-form>label { gap: 7px; font-size: 13px; }
  html:root[data-design="metro"] .filter-form>.checkbox-label { grid-row: 2; align-self: center; padding: 0; font-size: 12px; }
  html:root[data-design="metro"] .filter-form>.button { grid-column: 4; grid-row: 1; min-width: 170px; min-height: 47px; }
  html:root[data-design="metro"] .filter-form select { min-height: 47px; }
  html:root[data-design="metro"] .sidebar-promo { display: none; }
  html:root[data-design="metro"] .listing-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
  html:root[data-design="metro"] .listing-grid .company-image { height: 175px; }
}

/* STUDIO — expressive plum and rose with an editorial list of businesses. */
html:root[data-design="studio"] h1,html:root[data-design="studio"] h2 { font-weight: 500; }
html:root[data-design="studio"] .brand { color: var(--ink); }
html:root[data-design="studio"] .brand-dot { color: var(--accent); }
html:root[data-design="studio"] .hero-panel { min-height: 590px; padding: 47px 49px 33px; border-radius: 28px 28px 70px 28px; }
html:root[data-design="studio"] .hero-copy { width: 58%; }
html:root[data-design="studio"] .hero-copy h1 { font-size: clamp(44px,4.7vw,67px); font-weight: 500; line-height: 1.08; letter-spacing: -2.4px; }
html:root[data-design="studio"] .hero-copy h1 em { font-style: italic; font-weight: 500; }
html:root[data-design="studio"] .hero-art { inset: 29px 29px 150px 61%; border-radius: 160px 160px 18px 18px; }
html:root[data-design="studio"] .hero-art>img { filter: saturate(.8) brightness(.94); }
html:root[data-design="studio"] .hero-art-shade { background: linear-gradient(0deg,#3a21323d,transparent 75%); }
html:root[data-design="studio"] .hero-image-caption { top: auto; bottom: 21px; left: 22px; right: auto; font-size: 10px; }
html:root[data-design="studio"] .hero-floating-card { right: 40px; bottom: 163px; transform: rotate(3deg); border-radius: 14px; }
html:root[data-design="studio"] .hero-asterisk { left: 260px; bottom: -6px; font-size: 66px; opacity: .5; }
html:root[data-design="studio"] .hero-search-wrap { margin-top: 34px; }
html:root[data-design="studio"] .hero-search-wrap .search-form { border-radius: 19px; }
html:root[data-design="studio"] .section-heading h2 { font-size: 39px; }
html:root[data-design="studio"] .category-icon { border-radius: 50%; }
html:root[data-design="studio"] .category-card { border-radius: 22px 22px 8px 8px; }
html:root[data-design="studio"] .company-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 23px; }
html:root[data-design="studio"] .company-card { display: grid; grid-template-columns: minmax(140px,37%) minmax(0,1fr); border-radius: 20px; }
html:root[data-design="studio"] .company-image,html:root[data-design="studio"] .listing-grid .company-image { width: 100%; min-width: 0; height: auto; min-height: 230px; aspect-ratio: auto; align-self: stretch; overflow: hidden; }
html:root[data-design="studio"] .company-image>a { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
html:root[data-design="studio"] .company-image img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; }
html:root[data-design="studio"] .company-card-body,html:root[data-design="studio"] .listing-grid .company-card-body { padding: 21px 20px 0; }
html:root[data-design="studio"] .company-card h3,html:root[data-design="studio"] .listing-grid .company-card h3 { font-family: Georgia,serif; font-size: 23px; line-height: 1.25; font-weight: 500; letter-spacing: -.6px; margin-top: 13px; }
html:root[data-design="studio"] .company-card h3>a { -webkit-line-clamp: 3; }
html:root[data-design="studio"] .company-card-body>p { font-size: 13px; margin-bottom: 18px; }
html:root[data-design="studio"] .company-card .card-category { align-items: flex-start; }
html:root[data-design="studio"] .company-card .rating { margin-left: 0; }
html:root[data-design="studio"] .company-card-bottom { margin-top: auto; padding-block: 13px; }
html:root[data-design="studio"] .company-card-bottom>span { white-space: normal; line-height: 1.5; }
html:root[data-design="studio"] .company-image .featured-badge { left: 10px; right: 10px; top: auto; bottom: 13px; font-size: 10px; letter-spacing: .3px; justify-content: center; }
html:root[data-design="studio"] .company-image .favorite-form { right: 10px; top: 10px; }
html:root[data-design="studio"] .article-card h3 { font-size: 27px; font-weight: 500; line-height: 1.3; }
html:root[data-design="studio"] .page-heading h1 { font-size: 46px; }
html:root[data-design="studio"] .filter-disclosure { border-radius: 20px; }
html:root[data-design="studio"] .city-card { border-radius: 80px 80px 18px 18px; }

/* Width changes alter composition without compromising the mobile drawers. */
@media(max-width:1200px) and (min-width:761px) {
  html:root[data-design="turquoise"] .hero-panel,html:root[data-design="prestige"] .hero-panel,html:root[data-design="studio"] .hero-panel { padding: 40px 35px 30px; }
  html:root[data-design="turquoise"] .hero-copy,html:root[data-design="prestige"] .hero-copy,html:root[data-design="studio"] .hero-copy { width: 60%; }
  html:root[data-design="turquoise"] .hero-art,html:root[data-design="studio"] .hero-art { left: 65%; }
  html:root[data-design="turquoise"] .hero-copy h1,html:root[data-design="prestige"] .hero-copy h1,html:root[data-design="studio"] .hero-copy h1 { font-size: 48px; }
  html:root[data-design="turquoise"] .hero-asterisk,html:root[data-design="studio"] .hero-asterisk { display: none; }
  html:root[data-design="studio"] .listing-grid { grid-template-columns: minmax(0,1fr); }
  html:root[data-design="studio"] .listing-grid .company-card { grid-template-columns: 220px minmax(0,1fr); }
  html:root[data-design="studio"] .listing-grid .company-image { min-height: 220px; }
  html:root[data-design="metro"] .listing-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media(max-width:1000px) and (min-width:761px) {
  html:root[data-design="studio"] .company-card { grid-template-columns: minmax(115px,34%) minmax(0,1fr); }
  html:root[data-design="studio"] .company-card-body { padding: 17px 15px 0; }
  html:root[data-design="studio"] .company-card h3 { font-size: 21px; }
  html:root[data-design="studio"] .company-image { min-height: 260px; }
  html:root[data-design="turquoise"] .hero-floating-card,html:root[data-design="studio"] .hero-floating-card { max-width: 260px; right: 20px; }
  html:root[data-design="prestige"] .hero-floating-card { display: none; }
  html:root[data-design="metro"] .filter-form { grid-template-columns: repeat(3,minmax(0,1fr)); }
  html:root[data-design="metro"] .filter-form>.button { grid-row: 2; grid-column: 3; min-width: 0; }
}
@media(max-width:760px) {
  html:root[data-design] :is(.main-nav,.main-nav.open,.panel-sidebar) { background: var(--surface); color: var(--ink); }
  html:root[data-design] .hero-panel { min-height: 0; padding: 30px 24px 24px; }
  html:root[data-design] .hero-copy { width: 100%; }
  html:root[data-design] .hero-copy h1 { font-size: clamp(35px,8.8vw,49px); letter-spacing: -1.8px; line-height: 1.13; }
  html:root[data-design] .hero-copy>p { font-size: 14px; line-height: 1.8; }
  html:root[data-design] .hero-art { inset: 0; opacity: .13; border-radius: 0; }
  html:root[data-design] .hero-art-shade { background: linear-gradient(90deg,var(--hero),transparent 180%); }
  html:root[data-design] :is(.hero-floating-card,.hero-asterisk) { display: none; }
  html:root[data-design] .hero-search-wrap { margin-top: 25px; }
  html:root[data-design] .hero-search-wrap .search-form { border-radius: 13px; }
  html:root[data-design] .company-grid { gap: 16px; }
  html:root[data-design] .company-card-body { padding: 17px 16px 0; }
  html:root[data-design] .company-card h3 { font-size: 17px; }
  html:root[data-design] .company-card-body>p { font-size: 13px; }
  html:root[data-design] .company-card-bottom { font-size: 12px; }
  html:root[data-design] .card-category { font-size: 12px; }
  html:root[data-design] .company-card .rating { font-size: 13px; }
  html:root[data-design] .company-card .rating small { font-size: 11px; }
  html:root[data-design] .company-card .rating .icon { width: 11px; height: 11px; }
  html:root[data-design] .company-card h3 .verified { margin-top: 5px; }
  html:root[data-design] .company-card .verified .icon { width: 14px; height: 14px; }
  html:root[data-design] .category-card { border-radius: var(--button-radius); }
  html:root[data-design] .filter-disclosure { border-radius: var(--button-radius); }
  html:root[data-design="turquoise"] .hero-panel { border-radius: 22px; }
  html:root[data-design="turquoise"] .hero-art { display: none; }
  html:root[data-design="prestige"] .hero-panel { border-radius: 3px; }
  html:root[data-design="prestige"] .hero-copy h1 { font-size: clamp(39px,10vw,54px); }
  html:root[data-design="prestige"] .company-card h3 { font-family: Georgia,serif; font-size: 22px; }
  html:root[data-design="prestige"] .section-heading h2 { font-size: 29px; }
  html:root[data-design="metro"] .hero-panel { padding: 30px 21px 22px; }
  html:root[data-design="metro"] .hero-copy h1 { font-size: 37px; letter-spacing: -1.7px; }
  html:root[data-design="metro"] .hero-copy>p { font-size: 14px; }
  html:root[data-design="metro"] .hero-proof { display: none; }
  html:root[data-design="metro"] .popular-searches { justify-content: flex-start; }
  html:root[data-design="metro"] .category-card { text-align: left; padding: 15px; }
  html:root[data-design="metro"] .category-icon { margin: 0; }
  html:root[data-design="metro"] .listing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html:root[data-design="studio"] .hero-panel { border-radius: 22px 22px 45px 22px; }
  html:root[data-design="studio"] .hero-art { display: none; }
  html:root[data-design="studio"] .hero-copy h1 { font-size: 44px; }
  html:root[data-design="studio"] .section-heading h2 { font-size: 30px; }
  html:root[data-design="studio"] .company-grid { grid-template-columns: 1fr; }
  html:root[data-design="studio"] .company-card { grid-template-columns: 35% minmax(0,1fr); }
  html:root[data-design="studio"] .company-image,html:root[data-design="studio"] .listing-grid .company-image { min-height: 228px; }
  html:root[data-design="studio"] .company-card-body,html:root[data-design="studio"] .listing-grid .company-card-body { padding: 17px 15px 0; }
  html:root[data-design="studio"] .company-card h3,html:root[data-design="studio"] .listing-grid .company-card h3 { font-size: 22px; }
  html:root[data-design="studio"] .page-heading h1 { font-size: 35px; }
  html:root[data-design="studio"] .city-card { border-radius: 50px 50px 13px 13px; }
}
@media(max-width:560px) {
  html:root[data-design] .company-grid,html:root[data-design="metro"] .listing-grid { grid-template-columns: minmax(0,1fr); }
  html:root[data-design] .company-image,html:root[data-design] .listing-grid .company-image { height: 205px; }
  html:root[data-design] .company-card-body { padding: 19px 19px 0; }
  html:root[data-design] .company-card h3 { font-size: 19px; }
  html:root[data-design="prestige"] .company-card h3 { font-size: 24px; }
  html:root[data-design="studio"] .company-card { grid-template-columns: minmax(0,1fr); }
  html:root[data-design="studio"] .company-image,html:root[data-design="studio"] .listing-grid .company-image { height: 205px; min-height: 0; }
  html:root[data-design="studio"] .company-card-body,html:root[data-design="studio"] .listing-grid .company-card-body { padding: 21px 21px 0; }
  html:root[data-design="studio"] .company-card h3,html:root[data-design="studio"] .listing-grid .company-card h3 { font-size: 27px; }
  html:root[data-design="studio"] .company-image .featured-badge { right: auto; top: 13px; bottom: auto; }
}

/* Native option popups need their own palette; a transparent select face
   otherwise lets light text appear on a white system popup on Windows. */
html:root[data-design]:not([data-theme="dark"]) select { color-scheme: light; }
html:root[data-design][data-theme="dark"] select { color-scheme: dark; }
html:root[data-design] select :is(option,optgroup) {
  background-color: var(--surface);
  color: var(--ink);
}
html:root[data-design] select option:disabled { color: var(--muted); }