/* ARLEA Group — site-wide brand identity lockup */
:root {
  --ar-brand-navy: #192b42;
  --ar-brand-graphite: #293e56;
  --ar-brand-steel: #52677d;
  --ar-brand-light-silver: #e7ebef;
  --ar-brand-silver: #c0c4c8;
  --ar-brand-paper: #f4f5f6;
  --ar-brand-foil: linear-gradient(112deg, #52677d 0%, #c0c4c8 16%, #f4f5f6 31%, #c0c4c8 48%, #e7ebef 64%, #52677d 82%, #c0c4c8 100%);
  --ar-brand-line-dark: rgba(25, 43, 66, .18);
  --ar-brand-line-light: rgba(231, 235, 239, .28);

  /* Map every legacy design token back to the approved identity. */
  --arlea-navy: var(--ar-brand-navy);
  --arlea-navy-2: var(--ar-brand-graphite);
  --arlea-blue: var(--ar-brand-steel);
  --arlea-blue-soft: var(--ar-brand-light-silver);
  --arlea-sky: var(--ar-brand-light-silver);
  --arlea-mist: var(--ar-brand-paper);
  --arlea-silver: var(--ar-brand-silver);
  --arlea-silver-bright: var(--ar-brand-paper);
  --arlea-silver-dark: var(--ar-brand-steel);
  --arlea-ink: var(--ar-brand-navy);
  --arlea-surface: var(--ar-brand-paper);
  --ar-navy: var(--ar-brand-navy);
  --ar-navy-2: var(--ar-brand-graphite);
  --ar-ivory: var(--ar-brand-paper);
  --ar-paper: var(--ar-brand-paper);
  --ar-silver: var(--ar-brand-silver);
  --ar-silver-soft: rgba(192, 196, 200, .55);
  --ar-ink: var(--ar-brand-navy);
  --ar-copy: var(--ar-brand-steel);
  --ar-line: var(--ar-brand-line-dark);
  --ar-light-line: var(--ar-brand-line-light);
  --lm-ink: var(--ar-brand-navy);
  --lm-paper: var(--ar-brand-light-silver);
  --lm-cream: var(--ar-brand-paper);
  --lm-sand: var(--ar-brand-silver);
  --lm-stone: var(--ar-brand-steel);
  --lm-sea: var(--ar-brand-steel);
  --lm-line: var(--ar-brand-line-dark);
  --dark: var(--ar-brand-navy);
  --dark2: var(--ar-brand-graphite);
  --ink: var(--ar-brand-navy);
  --paper: var(--ar-brand-paper);
  --accent: var(--ar-brand-steel);
  --gold: var(--ar-brand-silver);
}

html { background: var(--ar-brand-navy); }

body,
body.lm-inspired,
.industry-detail-page,
.company-profile-page {
  background: var(--ar-brand-paper);
  color: var(--ar-brand-navy);
}

::selection {
  background: var(--ar-brand-steel);
  color: var(--ar-brand-paper);
}

/* Shared typography and understated silver detailing */
.ar-section-label,
.lm-kicker,
.eyebrow,
.ar-footer-grid > * > span,
.projects-page-source,
.project-detail-eyebrow {
  color: var(--ar-brand-steel);
}

.ar-section-label.light,
.eyebrow.light,
.dark-section .ar-section-label,
.projects-atlas .ar-section-label,
.project-detail-gallery .ar-section-label,
.project-detail-location .ar-section-label,
.industry-detail-hero .lm-kicker,
.company-profile-hero .lm-kicker {
  color: var(--ar-brand-silver);
}

.ar-section-label::before,
.lm-kicker::before,
.eyebrow::before {
  background: var(--ar-brand-silver);
}

/* Shared navigation and footer */
.site-header.ar-header {
  border-color: rgba(25, 43, 66, .14);
  background: rgba(244, 245, 246, .96);
}

.ar-nav a,
.ar-header-social a,
.menu-button,
.ar-contact-page .ar-nav a {
  color: var(--ar-brand-navy);
}

.ar-nav a::after,
.ar-contact-page .ar-nav a[aria-current="page"]::after {
  background: var(--ar-brand-steel);
}

.ar-header-social a,
.menu-button {
  border-color: rgba(82, 103, 125, .32);
}

.ar-header-social a:hover,
.ar-header-social a:focus-visible {
  border-color: var(--ar-brand-silver);
  background: var(--ar-brand-light-silver);
}

.ar-mobile-menu,
.mobile-menu {
  background: linear-gradient(145deg, var(--ar-brand-navy), var(--ar-brand-graphite));
  color: var(--ar-brand-paper);
}

.ar-footer,
.footer.ar-footer {
  background: var(--ar-brand-navy);
  color: var(--ar-brand-paper);
}

.ar-footer::before,
.ar-footer-time::before {
  background: var(--ar-brand-silver);
  box-shadow: 0 0 0 4px rgba(192, 196, 200, .12);
}

.ar-footer-grid,
.ar-footer-bottom,
.ar-footer a,
.ar-footer button {
  border-color: rgba(192, 196, 200, .24);
}

/* Homepage and Contact */
.ar-hero-shade,
.career-placeholder .hero-shade {
  background: linear-gradient(180deg, rgba(25, 43, 66, .3), rgba(25, 43, 66, .12) 42%, rgba(25, 43, 66, .78));
}

.ar-hero-grid,
.ar-hero-panel,
.ar-contact-card,
.ar-viewer-shell,
.viewer3d-shell {
  border-color: var(--ar-brand-line-light);
}

.ar-hero-panel::after,
.ar-project-card::after,
.projects-page-card > a::after {
  background: linear-gradient(180deg, rgba(25, 43, 66, .04), rgba(25, 43, 66, .84));
}

.ar-approach,
.ar-capabilities,
.ar-ivory,
.ar-contact-statement,
.ar-contact-dialog,
.soft-section,
.lm-about,
.lm-story,
.lm-brochure,
.lm-unit-types,
.lm-residences,
.lm-inspired .discover,
.group-architecture,
.group-companies-showcase,
.group-proof-strip {
  background: var(--ar-brand-paper);
  color: var(--ar-brand-navy);
}

.ar-projects,
.dark-section,
.ar-contact-system,
.ar-digital-model,
.ar-location-overlay,
.project-gallery-dialog,
.project-location-dialog,
.lm-inspired .collection,
.lm-inspired .three-d-experience,
.lm-inspired .contact,
.group-industries-showcase,
.group-partners {
  background-color: var(--ar-brand-navy);
}

.lm-lifestyle,
.lm-intent-panel,
.lm-unit-grid article,
.group-companies-showcase article {
  background: var(--ar-brand-light-silver);
  color: var(--ar-brand-navy);
}

.ar-contact-overlay {
  background: linear-gradient(90deg, rgba(25, 43, 66, .97), rgba(25, 43, 66, .78) 58%, rgba(41, 62, 86, .58));
}

.ar-contact-system,
.ar-contact-statement {
  --ar-contact-accent: var(--ar-brand-silver);
}

.ar-contact-heading h1 span,
.ar-contact-statement p span,
.ar-contact-icon,
.ar-contact-arrow {
  color: var(--ar-brand-silver);
}

.ar-contact-project-corner {
  border-color: var(--ar-brand-silver);
}

.ar-contact-card:hover,
.ar-contact-card:focus-visible,
.ar-contact-project-card:hover,
.ar-contact-project-card:focus-visible {
  border-color: var(--ar-brand-silver);
  background: rgba(82, 103, 125, .22);
}

.ar-contact-dialog input,
.ar-contact-dialog select,
.ar-contact-dialog textarea,
.pwa-install-card,
.pwa-install-steps {
  border-color: var(--ar-brand-line-dark);
  background: var(--ar-brand-light-silver);
  color: var(--ar-brand-navy);
}

.button-dark,
.pwa-install-primary,
.pwa-smart-action {
  border-color: var(--ar-brand-navy);
  background: var(--ar-brand-navy);
  color: var(--ar-brand-paper);
}

.button-light,
.lm-pill.light,
.pwa-install-secondary {
  border-color: var(--ar-brand-silver);
  background: var(--ar-brand-paper);
  color: var(--ar-brand-navy);
}

.pwa-install-steps {
  border-left-color: var(--ar-brand-steel);
}

.button-dark:hover,
.pwa-install-primary:hover,
.pwa-smart-action:hover,
.project-3d-cta:hover,
.property-3d-btn:hover {
  border-color: var(--ar-brand-silver);
  background: var(--ar-brand-steel);
  color: var(--ar-brand-paper);
}

/* 3D archive — silver and steel replace the former secondary accent. */
.ar-digital-model::before,
.viewer3d-stage::before,
.ar-viewer-shell::before {
  border-color: var(--ar-brand-silver);
}

.ar-digital-model::after,
.viewer3d-stage::after,
.ar-viewer-shell::before {
  background: linear-gradient(90deg, var(--ar-brand-silver) 0 68%, transparent);
  box-shadow: 0 0 25px rgba(192, 196, 200, .26);
}

.ar-digital-model-index,
.ar-viewer-count,
.viewer3d-status-dot,
.ar-viewer-hud i,
.viewer3d-topline > span::before,
.ar-viewer-archive-head i,
.ar-viewer-model-state i {
  color: var(--ar-brand-silver);
  background-color: var(--ar-brand-silver);
  box-shadow: 0 0 0 5px rgba(192, 196, 200, .14);
}

.viewer3d-caption {
  border-left-color: var(--ar-brand-silver);
  background: linear-gradient(90deg, rgba(25, 43, 66, .9), rgba(41, 62, 86, .54));
}

.ar-viewer-sidebar,
.viewer3d-sidebar {
  background: var(--ar-brand-navy);
}

.ar-viewer-archive-controls button:hover,
.viewer3d-picker button.active .viewer3d-picker-action {
  border-color: var(--ar-brand-silver);
  background: var(--ar-brand-steel);
}

.viewer3d-picker {
  scrollbar-color: var(--ar-brand-steel) rgba(192, 196, 200, .12);
}

.viewer3d-picker button.active {
  background-color: var(--ar-brand-graphite);
  border-color: var(--ar-brand-silver);
  box-shadow: 0 18px 40px rgba(25, 43, 66, .34), 0 0 0 1px rgba(192, 196, 200, .36);
}

.geo3d-wrap,
.geo3d-fallback {
  border-color: var(--ar-brand-silver);
  background: var(--ar-brand-light-silver);
  color: var(--ar-brand-navy);
}

.geo3d-badge {
  border-color: var(--ar-brand-silver);
  background: rgba(244, 245, 246, .86);
}

.geo3d-badge b { color: var(--ar-brand-steel); }
.geo3d-compass i { background: var(--ar-brand-steel); }

.viewer3d-picker button.active::after {
  border-left-color: var(--ar-brand-silver);
  background: linear-gradient(180deg, rgba(192, 196, 200, .06), rgba(82, 103, 125, .28));
}

/* Project index and project detail */
.projects-page-header,
.projects-page-hero,
.projects-atlas,
.project-detail-hero,
.project-detail-gallery,
.project-detail-location,
.project-gallery-dialog-shell,
.project-location-dialog-shell {
  background-color: var(--ar-brand-navy);
}

.projects-page-collection,
.project-detail-overview,
.project-detail-highlights,
.project-detail-error {
  background: var(--ar-brand-paper);
  color: var(--ar-brand-navy);
}

.projects-page-header,
.projects-atlas-list,
.projects-page-filters,
.project-gallery-filters,
.project-gallery-navigation,
.project-location-map-controls {
  border-color: var(--ar-brand-line-light);
}

.projects-atlas-filmstrip button.is-active::after,
.project-gallery-dialog-filmstrip button.is-active::after {
  border-color: var(--ar-brand-silver);
}

.projects-atlas-filmstrip > a:hover,
.projects-atlas-filmstrip > a:focus-visible,
.projects-atlas-list button.is-active,
.projects-page-filters button.is-active,
.project-gallery-filters button.is-active {
  background-color: var(--ar-brand-steel);
  color: var(--ar-brand-paper);
}

.projects-atlas-list button::before,
.projects-page-filters button::after,
.project-gallery-filters button::after {
  background: var(--ar-brand-silver);
}

.project-location-ring,
.ar-location-map-ring {
  stroke: var(--ar-brand-silver);
}

.project-location-disc,
.ar-location-map-marker-disc,
.project-location-preview:hover .project-location-disc,
.ar-location-portal:hover .ar-location-map-marker-disc {
  fill: var(--ar-brand-steel);
}

.ar-location-portal:hover .ar-location-portal-arrow {
  border-color: var(--ar-brand-silver);
}

/* Company, industry, careers and brand-reference routes */
.industry-detail-header,
.industry-company-panel {
  background: var(--ar-brand-navy);
}

.industry-detail-hero {
  background: linear-gradient(135deg, rgba(25, 43, 66, .97), rgba(41, 62, 86, .86)), url('/assets/architecture.webp') center/cover;
}

.company-profile-hero {
  background: linear-gradient(120deg, rgba(25, 43, 66, .97), rgba(41, 62, 86, .84)), url('/assets/le-grey-14.webp') center/cover;
}

.industry-detail-content,
.company-profile-page .lm-section,
.company-achievement-guard,
.industry-data-note {
  background: var(--ar-brand-paper);
  color: var(--ar-brand-navy);
}

.company-achievement-guard,
.industry-data-note {
  background: var(--ar-brand-light-silver);
}

.company-project-list,
.company-project-list article,
.industry-company-panel,
.industry-detail-header nav a {
  border-color: var(--ar-brand-line-light);
}

.career-placeholder {
  background: var(--ar-brand-navy);
}

.career-placeholder .hero-media {
  filter: saturate(.72) contrast(1.05);
}

.career-placeholder .career-copy > p:not(.eyebrow) {
  color: var(--ar-brand-light-silver);
}

.social-kit {
  color: var(--ar-brand-navy);
}

.social-preview,
.tokens .swatch.dark {
  background-color: var(--ar-brand-navy);
}

.tokens,
.guidance article {
  background: var(--ar-brand-paper);
}

.silver-rule {
  background: var(--ar-brand-foil);
}

/* Branded WhatsApp access: recognizable icon, ARLEA-controlled surface. */
.ar-floating-whatsapp {
  border: 1px solid var(--ar-brand-silver);
  background: var(--ar-brand-steel);
  color: var(--ar-brand-paper);
  box-shadow: 0 12px 32px rgba(25, 43, 66, .24);
}

.ar-floating-whatsapp:hover,
.ar-floating-whatsapp:focus-visible {
  background: var(--ar-brand-navy);
  border-color: var(--ar-brand-paper);
}

/* Silver foil is reserved for primary display text on dark fields. */
.ar-hero-copy h1,
.ar-projects-head h2,
.ar-digital-model-intro h3,
.ar-contact-heading h1,
.projects-page-hero h1,
.projects-atlas-header h2,
.project-detail-hero h1,
.project-detail-gallery h2,
.project-detail-location h2,
.project-gallery-dialog h2,
.project-location-dialog h2,
.career-copy h1,
.industry-detail-hero h1,
.company-profile-hero h1 {
  color: var(--ar-brand-light-silver);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ar-hero-copy h1,
  .ar-projects-head h2,
  .ar-digital-model-intro h3,
  .ar-contact-heading h1,
  .projects-page-hero h1,
  .projects-atlas-header h2,
  .project-detail-hero h1,
  .project-detail-gallery h2,
  .project-detail-location h2,
  .project-gallery-dialog h2,
  .project-location-dialog h2,
  .career-copy h1,
  .industry-detail-hero h1,
  .company-profile-hero h1 {
    background: var(--ar-brand-foil);
    background-size: 185% 100%;
    background-position: 42% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 1px 0 rgba(244, 245, 246, .04);
  }
}

@media (prefers-contrast: more) {
  .ar-hero-copy h1,
  .ar-projects-head h2,
  .ar-digital-model-intro h3,
  .ar-contact-heading h1,
  .projects-page-hero h1,
  .projects-atlas-header h2,
  .project-detail-hero h1,
  .project-detail-gallery h2,
  .project-detail-location h2,
  .career-copy h1,
  .industry-detail-hero h1,
  .company-profile-hero h1 {
    background: none;
    color: var(--ar-brand-paper);
    -webkit-text-fill-color: currentColor;
  }
}