/* METALLIC ATLAS — satin silver, steel framing and a restrained blue accent.
   It is a fifth visual direction; light/dark remains an independent choice. */
html:root[data-design="metallic"] {
  --accent: #176297;
  --accent-hover: #104d79;
  --on-accent: #fff;
  --ink: #1c3042;
  --muted: #526677;
  --line: #cbd4dc;
  --paper: #edf1f4;
  --surface: #fff;
  --surface-soft: #e4eaf0;
  --hero: #e0e7ed;
  --hero-ink: #172e43;
  --hero-muted: #455e73;
  --hero-em: #176297;
  --highlight: #d7e6f2;
  --warm: #42718e;
  --component-radius: 6px;
  --button-radius: 4px;
  --heading-font: Manrope, 'Segoe UI', Arial, sans-serif;
  --card-shadow: 0 4px 12px #1d35440a;
  --steel-top: #fbfdfe;
  --steel-bottom: #dce3e9;
  --steel-edge: #b8c6d0;
  --steel-bar: #263e51;
  --steel-bar-end: #36536a;
  --steel-bar-ink: #f7fbff;
  --steel-grain: #4e688003;
  --steel-sheen: #ffffffd9;
  color-scheme: light;
}
html:root[data-design="metallic"][data-theme="dark"] {
  --accent: #8dc5ed;
  --accent-hover: #b3dcf8;
  --on-accent: #132e43;
  --ink: #e9f0f7;
  --muted: #b4c2cf;
  --line: #3c4c5a;
  --paper: #171f28;
  --surface: #222d38;
  --surface-soft: #2b3845;
  --hero: #253441;
  --hero-ink: #edf5fc;
  --hero-muted: #c1d0dd;
  --hero-em: #9dd4fa;
  --highlight: #334f65;
  --warm: #94bbd5;
  --card-shadow: 0 4px 14px #00000024;
  --steel-top: #33414e;
  --steel-bottom: #26323d;
  --steel-edge: #526474;
  --steel-bar: #314a5e;
  --steel-bar-end: #273d50;
  --steel-bar-ink: #f3f8ff;
  --steel-grain: #c1d7ee03;
  --steel-sheen: #f0f7ff0a;
  color-scheme: dark;
}

/* An almost imperceptible horizontal grain gives the silver its material. */
html:root[data-design="metallic"] body {
  background-color: var(--paper);
  background-image: repeating-linear-gradient(0deg, transparent 0, transparent 3px, var(--steel-grain) 3px, var(--steel-grain) 4px);
}
html:root[data-design="metallic"] .topbar {
  background: var(--steel-bar);
  color: var(--steel-bar-ink);
  border-bottom: 1px solid #ffffff12;
}
html:root[data-design="metallic"] .topbar-divider { background: #ffffff38; }
html:root[data-design="metallic"] .site-header {
  background: linear-gradient(180deg, var(--steel-top), var(--steel-bottom));
  border-bottom: 1px solid var(--steel-edge);
  box-shadow: inset 0 1px var(--steel-sheen), 0 3px 10px #172c3d08;
}
html:root[data-design="metallic"] .brand { color: var(--ink); letter-spacing: -1.3px; }
html:root[data-design="metallic"] .brand-symbol { color: var(--accent); transform: none; }
html:root[data-design="metallic"] .brand-dot { color: var(--accent); }
html:root[data-design="metallic"] .main-nav > a { font-size: 14px; font-weight: 800; }
html:root[data-design="metallic"] .main-nav > a.active { background: transparent; }
html:root[data-design="metallic"] :is(.appearance-toggle,.theme-toggle,.mobile-menu-button,.panel-menu-toggle) {
  border: 1px solid var(--steel-edge);
  border-radius: 4px;
  background: var(--surface);
  box-shadow: inset 0 1px var(--steel-sheen);
  color: var(--ink);
}
html:root[data-design="metallic"] .button-primary {
  border-color: var(--accent);
  box-shadow: inset 0 1px #ffffff18;
}
html:root[data-design="metallic"] .button-primary:hover { box-shadow: 0 3px 8px #173e5819; }

/* The image sits in a steel frame, keeping the search and text on a clear face. */
html:root[data-design="metallic"] .hero-panel {
  min-height: 535px;
  padding: 39px 40px 29px;
  background: linear-gradient(115deg, var(--steel-top), var(--hero) 68%);
  border: 1px solid var(--steel-edge);
  border-top: 3px solid var(--accent);
  border-radius: 6px;
  box-shadow: inset 0 1px var(--steel-sheen), 0 5px 20px #203e5010;
}
html:root[data-design="metallic"] .hero-copy { width: 58%; }
html:root[data-design="metallic"] .hero-eyebrow { color: var(--accent); font-size: 11px; font-weight: 850; letter-spacing: 1.7px; }
html:root[data-design="metallic"] .hero-copy h1 {
  max-width: 620px;
  margin-top: 22px;
  font-size: clamp(40px, 4.2vw, 56px);
  line-height: 1.15;
  letter-spacing: -2.4px;
  font-weight: 850;
}
html:root[data-design="metallic"] .hero-copy h1 em { font-family: var(--heading-font); font-style: normal; font-weight: 850; }
html:root[data-design="metallic"] .hero-copy > p { max-width: 490px; font-size: 16px; line-height: 1.9; font-weight: 600; }
html:root[data-design="metallic"] .hero-art {
  inset: 25px 25px 144px 64%;
  overflow: hidden;
  border: 1px solid var(--steel-edge);
  border-radius: 3px;
}
html:root[data-design="metallic"] .hero-art > img { filter: saturate(.7) brightness(.94); object-position: 52% 50%; }
html:root[data-design="metallic"] .hero-art-shade { background: linear-gradient(0deg, #15364b38, transparent 60%); }
html:root[data-design="metallic"] :is(.hero-asterisk,.hero-floating-card) { display: none; }
html:root[data-design="metallic"] .hero-image-caption { top: auto; right: 13px; bottom: 13px; border-radius: 3px; background: #193146bb; }
html:root[data-design="metallic"] .hero-search-wrap { margin-top: 29px; }
html:root[data-design="metallic"] .hero-search-wrap .search-form { border: 1px solid var(--steel-edge); box-shadow: 0 6px 16px #263e5010; border-radius: 4px; }
html:root[data-design="metallic"] .hero-bottom { padding-inline: 3px; }
html:root[data-design="metallic"] .hero-bottom strong { font-size: 16px; }
html:root[data-design="metallic"] .eyebrow { font-size: 11px; font-weight: 850; letter-spacing: 1.7px; }
html:root[data-design="metallic"] .section-heading h2 { font-size: clamp(27px, 2.65vw, 35px); letter-spacing: -1.25px; font-weight: 800; }

/* Square steel details give listings and content a consistent visual rhythm. */
html:root[data-design="metallic"] .category-grid { gap: 13px; }
html:root[data-design="metallic"] .category-card {
  border-color: var(--steel-edge);
  background: linear-gradient(180deg, var(--surface), var(--surface-soft));
  border-radius: 4px;
  padding: 20px 16px 18px;
  box-shadow: inset 0 1px var(--steel-sheen);
}
html:root[data-design="metallic"] .category-icon {
  border: 1px solid var(--steel-edge);
  border-radius: 4px;
  background: var(--surface-soft);
  color: var(--accent);
}
html:root[data-design="metallic"] .category-card h3 { font-weight: 800; font-size: 14px; }
html:root[data-design="metallic"] :is(.company-card,.catalog-card,.local-guide-card,.content-card,.commerce-job-card,.commerce-package-card,.filter-disclosure,.pricing-card) {
  border-color: var(--line);
  border-radius: 5px;
  box-shadow: var(--card-shadow);
}
html:root[data-design="metallic"] .company-card h3 { font-family: var(--heading-font); font-size: 18px; line-height: 1.45; font-weight: 800; }
html:root[data-design="metallic"] .company-card-bottom { border-top-style: solid; }
html:root[data-design="metallic"] .company-card-bottom > a { border: 1px solid var(--line); border-radius: 4px; }
html:root[data-design="metallic"] .featured-badge { border-radius: 3px; font-weight: 850; }
html:root[data-design="metallic"] .page-heading {
  background: linear-gradient(105deg, var(--steel-top), var(--surface-soft));
  border-bottom: 1px solid var(--steel-edge);
}
html:root[data-design="metallic"] .page-heading h1 { font-weight: 800; }
html:root[data-design="metallic"] .company-logo { border: 1px solid var(--steel-edge); border-radius: 6px; box-shadow: inset 0 1px var(--steel-sheen); }
html:root[data-design="metallic"] .tab-bar > button { font-weight: 800; }
html:root[data-design="metallic"] .profile-sidebar .contact-card { border-top: 3px solid var(--accent); }
html:root[data-design="metallic"] .city-card,
html:root[data-design="metallic"] .article-image { border-radius: 5px; }
html:root[data-design="metallic"] .city-guide-carousel { border-color: var(--steel-edge); }
html:root[data-design="metallic"] .city-guide-image-link { border-radius: 4px; }
html:root[data-design="metallic"] .city-guide-sources { border-color: var(--steel-edge); background: var(--surface-soft); border-radius: 4px; }
html:root[data-design="metallic"] .company-source,
html:root[data-design="metallic"] .company-provenance { border-left: 3px solid var(--accent); border-radius: 3px; }
html:root[data-design="metallic"] .company-tags a {
  background: var(--surface-soft);
  color: var(--accent);
  border: 1px solid var(--steel-edge);
  border-radius: 3px;
  font-weight: 750;
}
html:root[data-design="metallic"] .company-tags a:hover { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
html:root[data-design="metallic"] .company-seo-context {
  border-color: var(--steel-edge);
  border-top: 3px solid var(--accent);
  border-radius: 4px;
  background: var(--surface);
}
html:root[data-design="metallic"] .company-profile-facts { border-color: var(--line); }
html:root[data-design="metallic"] .company-profile-facts dt { color: var(--muted); }
html:root[data-design="metallic"] .company-profile-facts dd { color: var(--ink); }
html:root[data-design="metallic"] .site-footer { border-top: 1px solid var(--steel-edge); background: var(--surface-soft); }

/* The two-column updates area follows the requested steel news-board style. */
html:root[data-design="metallic"] .home-updates .updates-panel {
  border-color: var(--steel-edge);
  border-radius: 3px;
  background: var(--surface);
  box-shadow: 0 5px 16px #203c4e0a;
}
html:root[data-design="metallic"] .home-updates .updates-panel-header {
  background: linear-gradient(105deg, var(--steel-bar), var(--steel-bar-end));
  border-bottom: 1px solid var(--steel-edge);
  color: var(--steel-bar-ink);
  box-shadow: inset 0 1px #ffffff16;
}
html:root[data-design="metallic"] .home-updates .updates-panel-header h2 { color: var(--steel-bar-ink); }
html:root[data-design="metallic"] .home-updates .updates-panel-header > a {
  background: #edf5fc;
  color: #214b68;
  border-color: #b8ccda;
  border-radius: 2px;
}
html:root[data-design="metallic"] .home-updates .updates-company-thumb { border-color: var(--line); border-radius: 3px; }
html:root[data-design="metallic"] .home-updates .updates-company-copy strong { color: var(--ink); }
html:root[data-design="metallic"] .home-updates .updates-company-copy > span { color: var(--muted); }
html:root[data-design="metallic"] .home-updates .updates-company-copy > .updates-company-category { color: var(--accent); }
html:root[data-design="metallic"] .home-updates .updates-news-list a {
  background: var(--surface-soft);
  color: var(--ink);
  border-radius: 2px;
}
html:root[data-design="metallic"] .home-updates .updates-news-arrow { background: var(--steel-bar); color: var(--steel-bar-ink); }

/* Advertising uses the same quiet silver face and a crisp inventory strip. */
html:root[data-design="metallic"] .placement-slot { border-color: var(--steel-edge); border-radius: 4px; box-shadow: inset 0 1px var(--steel-sheen); }
html:root[data-design="metallic"] .placement-slot-meta { background: var(--steel-bar); color: var(--steel-bar-ink); border-color: var(--steel-edge); }
html:root[data-design="metallic"] .placement-slot-placeholder { background: linear-gradient(135deg, var(--steel-top), var(--surface-soft)); }
html:root[data-design="metallic"] .placement-placeholder-symbol { border-color: var(--steel-edge); border-radius: 4px; }
html:root[data-design="metallic"] .placement-slot-placeholder:after { opacity: .32; }
html:root[data-design="metallic"] .placement-placeholder-copy > strong { font-family: var(--heading-font); font-weight: 800; }
html:root[data-design="metallic"] :is(.panel-card,.panel-metric,.panel-company-card,.panel-welcome-card,.ad-admin-summary,.ad-admin-position,.ad-admin-help) { border-radius: 5px; }
html:root[data-design="metallic"] .panel-sidebar { border-color: var(--steel-edge); }
html:root[data-design="metallic"] .panel-card-heading { background: var(--surface-soft); border-bottom-color: var(--steel-edge); }

/* The design selector shows all five choices without leaving an orphan card. */
.appearance-design[data-design-option="metallic"] { grid-column: 1 / -1; }
.appearance-design[data-design-option="metallic"] .appearance-preview { height: 98px; }
.appearance-preview-metallic {
  --preview-paper: #e7edf2;
  --preview-ink: #2a4358;
  --preview-accent: #6b9cbd;
  --preview-card: #fff;
  border-color: #bdcbd6;
  border-radius: 3px;
  background: repeating-linear-gradient(0deg, #e7edf2, #e7edf2 3px, #e4eaf0 3px, #e4eaf0 4px);
}
.appearance-preview-metallic .appearance-preview-top { background: linear-gradient(#fcfdff, #d6dfe7); border-bottom-color: #bdcbd6; }
.appearance-preview-metallic .appearance-preview-hero { border: 1px solid #becbd6; border-top: 2px solid #176297; border-radius: 2px; background: linear-gradient(110deg,#fff,#d9e3eb); margin-top: 7px; }
.appearance-preview-metallic .appearance-preview-hero > span { background: #243d53; }
.appearance-preview-metallic .appearance-preview-hero > b { width: 32%; height: 27px; border-radius: 1px; background: #6e8ea5; border: 2px solid #bac9d5; }
.appearance-preview-metallic .appearance-preview-cards i { border-color: #becbd6; border-radius: 1px; background: linear-gradient(180deg,#345269 32%,#fff 32%); }
html:root[data-design="metallic"] :is(.appearance-panel,.appearance-design,.appearance-current,.appearance-mode-switch,.appearance-mode-switch > button) { border-radius: 5px; }

@media (max-width: 1200px) and (min-width: 761px) {
  html:root[data-design="metallic"] .hero-panel { min-height: 520px; padding: 34px 30px 26px; }
  html:root[data-design="metallic"] .hero-copy { width: 61%; }
  html:root[data-design="metallic"] .hero-copy h1 { font-size: 45px; letter-spacing: -1.8px; }
  html:root[data-design="metallic"] .hero-art { left: 67%; right: 22px; top: 23px; bottom: 152px; }
  html:root[data-design="metallic"] .hero-image-caption { display: none; }
}
@media (max-width: 760px) {
  html:root[data-design="metallic"] .hero-panel { min-height: 0; padding: 28px 23px 23px; border-radius: 5px; }
  html:root[data-design="metallic"] .hero-copy { width: 100%; }
  html:root[data-design="metallic"] .hero-copy h1 { font-size: clamp(35px, 8.5vw, 45px); line-height: 1.15; letter-spacing: -1.7px; margin-top: 19px; }
  html:root[data-design="metallic"] .hero-copy > p { font-size: 15px; line-height: 1.8; }
  html:root[data-design="metallic"] .hero-art { display: none; }
  html:root[data-design="metallic"] .hero-search-wrap { margin-top: 23px; }
  html:root[data-design="metallic"] .hero-search-wrap .search-form { box-shadow: none; }
  html:root[data-design="metallic"] .hero-proof { margin-top: 18px; }
  html:root[data-design="metallic"] .section-heading h2 { font-size: 28px; letter-spacing: -1px; }
  html:root[data-design="metallic"] .category-card { padding: 17px 14px; }
  html:root[data-design="metallic"] .company-card h3 { font-size: 19px; }
  html:root[data-design="metallic"] .page-heading h1 { font-size: 32px; }
  html:root[data-design="metallic"] .main-nav > a.active { background: var(--surface-soft); }
}
@media (max-width: 359px) {
  html:root[data-design="metallic"] .hero-panel { padding: 25px 17px 20px; }
  html:root[data-design="metallic"] .hero-copy h1 { font-size: 34px; letter-spacing: -1.7px; }
  html:root[data-design="metallic"] .hero-eyebrow { letter-spacing: 1px; font-size: 10px; }
  html:root[data-design="metallic"] .hero-copy > p { font-size: 14px; }
  html:root[data-design="metallic"] .hero-proof { gap: 9px; }
  html:root[data-design="metallic"] .section-heading h2 { font-size: 26px; }
}