/* ==========================================================================
   ENAS — Innenausbau & Facility Service
   Core stylesheet — design tokens, layout, components
   ========================================================================== */

/* -------------------- Design tokens -------------------- */
:root {
  /* Brand colors — sampled directly from the ENAS logo files */
  --color-navy: #172339;
  --color-navy-800: #1f3050;
  --color-navy-700: #2a3d63;
  --color-lightblue: #c9d2e3;
  --color-gold: #c7a76e;
  --color-gold-light: #ddc39a;
  --color-cream: #f4efe6;
  --color-offwhite: #faf8f4;
  --color-white: #ffffff;
  --color-ink: #1b1b1a;
  --color-text-muted: #6a6f7a;
  --color-border: #e4ddd0;
  --color-success: #3b6d11;
  --color-danger: #a32d2d;

  /* Typography */
  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing / layout */
  --max-width: 1240px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --shadow-soft: 0 1px 2px rgba(23, 35, 57, 0.06), 0 8px 24px rgba(23, 35, 57, 0.06);
  --shadow-lift: 0 4px 8px rgba(23, 35, 57, 0.08), 0 16px 40px rgba(23, 35, 57, 0.10);
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Editorial/geometric redesign — spacing scale */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 20px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 72px;
  --space-7: 104px;

  /* Editorial corner treatment — sharp, not pill-shaped */
  --radius-editorial: 2px;

  /* Hairline tokens, derived from existing color vars */
  --hairline: var(--color-border);
  --hairline-on-navy: color-mix(in srgb, var(--color-cream) 20%, transparent);
  --ink-soft: var(--color-text-muted);
}

/* -------------------- Reset -------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-offwhite);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  padding: 10px 14px;
  background: var(--color-navy);
  color: var(--color-white);
  border: 2px solid var(--color-gold);
  transform: translateY(-160%);
  transition: transform var(--transition);
}
.skip-link:focus { transform: translateY(0); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 500; line-height: 1.18; margin: 0 0 0.5em; color: var(--color-navy); letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 96px 0; }
@media (max-width: 768px) { section { padding: 64px 0; } }

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 14px;
}

.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--color-text-muted); font-size: 17px; }

h1 { font-size: clamp(36px, 5vw, 56px); }
h2 { font-size: clamp(28px, 3.4vw, 38px); }
h3 { font-size: 21px; }

/* -------------------- Buttons -------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-primary { background: var(--color-navy); color: var(--color-white); }
.btn-primary:hover { background: var(--color-navy-800); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.btn-gold { background: var(--color-gold); color: var(--color-navy); }
.btn-gold:hover { background: var(--color-gold-light); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--color-navy); border-color: var(--color-navy); }
.btn-outline:hover { background: var(--color-navy); color: var(--color-white); }
.btn-outline-light { background: transparent; color: var(--color-white); border-color: rgba(255,255,255,0.4); }
.btn-outline-light:hover { background: rgba(255,255,255,0.1); border-color: var(--color-white); }
.btn-whatsapp { background: #25D366; color: #06210f; }
.btn-whatsapp:hover { background: #2fe374; }
.btn-block { width: 100%; justify-content: center; }

/* -------------------- Header -------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 244, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}
.site-header .logo img { height: 34px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 40px; }
.main-nav[hidden] { display: none; }
.main-nav ul { display: flex; gap: 32px; }
.main-nav a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-navy);
  padding: 4px 0;
}
.main-nav a.active { color: var(--color-navy); font-weight: 600; }
.main-nav a.active::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 14px; }
.lang-switch { display: flex; align-items: center; font-size: 13px; font-weight: 500; }
.lang-switch a { position: relative; padding: 2px 1px; color: var(--color-text-muted); transition: color var(--transition); }
.lang-switch a:hover { color: var(--color-navy); }
.lang-switch a.active { color: var(--color-navy); }
.lang-switch a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--color-gold);
}
.lang-switch a:not(:first-child) { margin-left: 14px; }
.lang-switch a:not(:first-child)::before {
  content: '·';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-border);
}

.nav-toggle {
  display: none;
  background: none; border: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ''; display: block;
  width: 22px; height: 2px;
  background: var(--color-navy);
  position: relative;
  transition: all var(--transition);
}
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after { position: absolute; top: 7px; }

@media (max-width: 900px) {
  .main-nav { position: fixed; inset: 84px 0 0 0; background: var(--color-offwhite); flex-direction: column; align-items: stretch; padding: 32px 24px; transform: translateX(100%); transition: transform var(--transition); overflow-y: auto; }
  .main-nav.open { transform: translateX(0); }
  .main-nav ul { flex-direction: column; gap: 4px; }
  .main-nav ul a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--color-border); }
  .main-nav .header-actions { margin-top: 24px; flex-direction: column; align-items: stretch; }
  .nav-toggle { display: flex; }
}

/* -------------------- Hero -------------------- */
.hero {
  background: linear-gradient(160deg, var(--color-navy) 0%, #101a2c 100%);
  color: var(--color-white);
  padding: 120px 0 100px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  right: -10%; top: -20%;
  width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(199,167,110,0.14) 0%, transparent 70%);
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.hero h1 { color: var(--color-white); }
.hero p.lead { font-size: 19px; color: rgba(255,255,255,0.78); max-width: 480px; }
.hero-actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 40px; margin-top: 56px; flex-wrap: wrap; }
.hero-stats div strong { display: block; font-family: var(--font-heading); font-size: 30px; color: var(--color-gold); }
.hero-stats div span { font-size: 13px; color: rgba(255,255,255,0.6); }
.hero-visual { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg); padding: 32px; }
.hero-visual img { border-radius: var(--radius-md); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero { padding: 56px 0 64px; }
  .hero-visual { order: -1; }
}

/* Page header (for interior pages) */
.page-hero {
  background: var(--color-navy);
  color: var(--color-white);
  padding: 72px 0 56px;
}
.page-hero .eyebrow { color: var(--color-gold); }
.page-hero h1 { color: var(--color-white); margin-bottom: 12px; }
.page-hero p { color: rgba(255,255,255,0.75); font-size: 17px; max-width: 620px; margin: 0; }
.breadcrumb { font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 18px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0; padding: 0; list-style: none; }
.breadcrumb li + li::before { content: '/'; margin-right: 7px; color: currentColor; }
.breadcrumb a { color: rgba(255,255,255,0.75); }
.breadcrumb a:hover { color: var(--color-gold); }

/* -------------------- Trust bar -------------------- */
.trust-bar { background: var(--color-cream); padding: 28px 0; border-bottom: 1px solid var(--color-border); }
.trust-bar .container { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: center; }
.trust-item { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--color-navy); }
.trust-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-gold); flex-shrink: 0; }

/* -------------------- Cards / grids -------------------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.related-services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.related-service-card { display: flex; min-width: 0; flex-direction: column; }
.related-service-card p { flex: 1; }
.related-service-card .btn-arrow { align-self: flex-start; }
@media (max-width: 900px) { .related-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .related-services-grid { grid-template-columns: minmax(0, 1fr); } }

/* -------------------- Service FAQs -------------------- */
.service-faq {
  background: var(--color-offwhite);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.faq-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.55fr);
  gap: clamp(40px, 7vw, 96px);
  align-items: start;
}
.faq-heading .eyebrow { margin-bottom: 14px; }
.faq-heading h2 { margin: 0; max-width: 430px; }
.faq-list {
  border-top: 1px solid var(--color-navy);
  min-width: 0;
}
.faq-item {
  border-bottom: 1px solid var(--color-border);
  scroll-margin-top: 108px;
}
.faq-item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 24px;
  align-items: center;
  min-height: 76px;
  padding: 20px 4px;
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--color-gold);
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item summary:hover { color: var(--color-navy-700); }
.faq-item summary:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 4px;
}
.faq-answer {
  max-width: 720px;
  padding: 0 56px 24px 4px;
}
.faq-answer p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.75;
}
@media (max-width: 768px) {
  .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .faq-heading h2 { max-width: 620px; }
  .faq-item summary { min-height: 68px; padding: 18px 2px; font-size: 18px; }
  .faq-answer { padding: 0 42px 22px 2px; }
}
@media (max-width: 420px) {
  .faq-item summary { gap: 14px; }
  .faq-answer { padding-right: 2px; }
}

.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.card .icon-badge { margin-bottom: 20px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--color-text-muted); font-size: 15px; margin-bottom: 0; }
.card ul { margin-top: 16px; }
.card ul li { font-size: 14.5px; color: var(--color-text-muted); padding: 6px 0 6px 22px; position: relative; border-top: 1px solid var(--color-border); }
.card ul li:first-child { border-top: none; }
.card ul li::before { content: ''; position: absolute; left: 0; top: 14px; width: 8px; height: 8px; border: 1.5px solid var(--color-gold); transform: rotate(45deg); }

.icon-badge {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-cream);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-navy);
}
.icon-badge svg { width: 24px; height: 24px; stroke: var(--color-navy); }

/* Service split (used on service pages) */
.service-block { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.service-block.reverse .service-media { order: 2; }
.service-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
.service-context-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 48px);
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-gold);
  border-radius: var(--radius-editorial);
}
.bg-cream .service-context-card { background: var(--color-offwhite); }
.service-context-card h3 { font-size: clamp(22px, 2.4vw, 30px); }
.service-context-card p { color: var(--color-text-muted); margin: 0; }
@media (max-width: 900px) {
  .service-block, .service-block.reverse { grid-template-columns: 1fr; }
  .service-block.reverse .service-media { order: -1; }
}
.check-list li { display: flex; gap: 12px; padding: 9px 0; font-size: 15.5px; color: var(--color-ink); }
.check-list li svg { flex-shrink: 0; width: 20px; height: 20px; stroke: var(--color-gold); margin-top: 2px; }
.check-list li a { color: inherit; }
.check-list li a:hover { color: var(--color-gold); text-decoration: underline; }

/* -------------------- Process steps -------------------- */
.steps {
  display: flex;
  gap: 28px;
  counter-reset: step;
}
.step { position: relative; flex: 1 1 0; padding-top: 8px; }
.step::before {
  content: '';
  position: absolute;
  top: 29px;
  left: 49px;
  z-index: 1;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
}
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 32px;
  left: 26px;
  z-index: 0;
  width: calc(100% + 28px);
  height: 1px;
  background: var(--color-gold);
}
.step .num {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 52px;
  height: 48px;
  margin-bottom: 14px;
  padding: 0 6px;
  border-radius: 28px;
  background: var(--color-offwhite);
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 1;
  color: var(--color-gold);
}
.bg-cream .step .num { background: var(--color-cream); }
.step h3 { font-size: 17px; margin-bottom: 8px; }
.step p { font-size: 14.5px; color: var(--color-text-muted); margin: 0; }
@media (max-width: 900px) {
  .steps { flex-direction: column; }
  .step { min-height: 64px; padding: 0 0 0 72px; }
  .step .num { position: absolute; top: 0; left: 0; margin: 0; }
  .step::before { top: 49px; left: 23px; }
  .step:not(:last-child)::after {
    top: 26px;
    left: 26px;
    width: 1px;
    height: calc(100% + 28px);
  }
}

/* -------------------- CTA band -------------------- */
.cta-band {
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.cta-band::after {
  content: '';
  position: absolute; right: -60px; bottom: -80px;
  width: 260px; height: 260px;
  border: 1px solid rgba(199,167,110,0.25);
  border-radius: 50%;
}
.cta-band h2 { color: var(--color-white); margin-bottom: 8px; }
.cta-band p { color: rgba(255,255,255,0.7); margin: 0; }
.cta-band .actions { display: flex; gap: 14px; flex-wrap: wrap; position: relative; z-index: 1; }

/* -------------------- Forms -------------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--color-navy); }
.field .req { color: var(--color-gold); }
.field input, .field select, .field textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-ink);
  transition: border-color var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(199,167,110,0.18);
}
.field textarea { resize: vertical; min-height: 120px; }
.field-note { font-size: 12.5px; color: var(--color-text-muted); }
.form-status { margin-top: 14px; font-size: 14.5px; display: none; padding: 12px 14px; border-radius: var(--radius-sm); }
.form-status.pending { display: block; background: var(--color-cream); color: var(--color-navy); }
.form-status.success { display: block; background: #eaf3de; color: var(--color-success); }
.form-status.error { display: block; background: #fcebeb; color: var(--color-danger); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; color: var(--color-text-muted); }
.consent input { margin-top: 3px; }
.consent input:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; }

.contact-panel {
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 40px;
}
.contact-panel h3 { color: var(--color-white); }
.contact-row { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.12); }
.contact-row:first-of-type { border-top: none; }
.contact-row svg { width: 20px; height: 20px; stroke: var(--color-gold); flex-shrink: 0; margin-top: 2px; }
.contact-row a, .contact-row span { color: rgba(255,255,255,0.85); font-size: 14.5px; }
.contact-row a:hover { color: var(--color-gold); }
.map-embed { border-radius: var(--radius-md); overflow: hidden; margin-top: 24px; border: 1px solid rgba(255,255,255,0.12); }
.map-embed iframe { width: 100%; height: 220px; border: 0; display: block; filter: grayscale(0.3) contrast(1.05); }
.map-placeholder { padding: 24px; background: rgba(255,255,255,0.05); }
.map-placeholder p { margin: 0 0 14px; color: rgba(255,255,255,0.82); font-size: 14px; line-height: 1.65; }
.map-placeholder .map-privacy-note { color: rgba(255,255,255,0.62); font-size: 13px; }
.map-placeholder .map-link { width: 100%; border-color: rgba(255,255,255,0.35); color: var(--color-white); text-align: center; }
.map-placeholder .map-link:hover { border-color: var(--color-gold); color: var(--color-gold-light); }
.map-placeholder .map-link:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 3px; }
@media (max-width: 600px) { .map-placeholder { padding: 20px; } }
.contact-service-links { font-size: 14px !important; margin-top: 14px !important; }
.contact-service-links a { color: var(--color-navy); text-decoration: underline; text-underline-offset: 3px; }
/* -------------------- Footer -------------------- */
.site-footer { background: #0f1826; color: rgba(255,255,255,0.7); padding: 72px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.1); }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid .logo img { height: 30px; margin-bottom: 16px; }
.footer-grid p { font-size: 14px; color: rgba(255,255,255,0.55); max-width: 280px; }
.footer-col h4 { color: var(--color-white); font-family: var(--font-body); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 18px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col a { font-size: 14.5px; color: rgba(255,255,255,0.65); }
.footer-col a:hover { color: var(--color-gold); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; flex-wrap: wrap; gap: 12px; font-size: 13px; color: rgba(255,255,255,0.45); }
.footer-bottom a { color: rgba(255,255,255,0.45); }
.footer-bottom a:hover { color: var(--color-gold); }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }

/* -------------------- Simple page (Impressum/Datenschutz) -------------------- */
.legal-content { max-width: 760px; }
.legal-content h2 { margin-top: 2em; font-size: 22px; }
.legal-content p, .legal-content li { color: var(--color-text-muted); font-size: 15px; }
.legal-content a { color: var(--color-navy); text-decoration: underline; }

/* -------------------- Utility -------------------- */
.mt-0 { margin-top: 0; }
.bg-cream { background: var(--color-cream); }
.bg-navy { background: var(--color-navy); color: var(--color-white); }
.bg-navy h2, .bg-navy h3 { color: var(--color-white); }
.company-summary .section-head { margin-bottom: 0; }

/* ==========================================================================
   Editorial/geometric redesign — approved patterns, applied 2026-08-12.
   Marketing pages only (DE first: index, innenausbau, facility-service,
   ueber-uns, kontakt). Legal pages (impressum/datenschutz) and /en/ keep
   the pre-redesign rules above until their own migration pass.
   ========================================================================== */

/* 1. Buttons — .btn-primary/.btn-gold class names kept, rules replaced */
.btn { border-radius: 10px; letter-spacing: 0.03em; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.btn-primary { background: var(--color-navy); border: 1px solid transparent; color: var(--color-cream); }
.btn-primary:hover { background: var(--color-navy-800); color: var(--color-cream); transform: none; box-shadow: none; }
.main-nav a.btn-primary,
.main-nav a.btn-primary:hover { color: var(--color-cream); }
.btn-gold { background: transparent; border: 1px solid var(--color-navy); color: var(--color-navy); }
.btn-gold:hover { background: var(--color-navy); color: var(--color-offwhite); transform: none; box-shadow: none; }
.btn-solid { background: var(--color-navy); border: 1px solid var(--color-navy); color: var(--color-offwhite); }
.btn-solid:hover { background: var(--color-navy-800); }
.btn-outline-light, .btn-gold.on-navy { border-color: var(--color-gold-light); color: var(--color-offwhite); background: transparent; }
.btn-outline-light:hover { background: var(--hairline-on-navy); border-color: var(--color-gold); }
.btn-arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--color-navy); border: none; border-bottom: 1px solid var(--hairline); padding: 0 0 2px; background: none; }
.btn-arrow .arrow { transition: transform var(--transition); }
.btn-arrow:hover .arrow { transform: translateX(4px); }
.btn-arrow.on-navy { color: var(--color-offwhite); border-color: var(--hairline-on-navy); }

/* 2. Section headers — new left-aligned variant alongside .center */
.section-head.left { text-align: left; margin-left: 0; max-width: 560px; }

/* 3. Hero — cream ground, asymmetric split, numbered index replaces stat row */
.hero { background: var(--color-offwhite); color: var(--color-ink); padding: var(--space-7) 0 var(--space-6); position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; right: -18%; top: -22%; width: 720px; height: 720px; background: var(--color-navy); opacity: 0.04; clip-path: polygon(0 100%, 100% 0, 100% 100%); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: 0.62fr 1.38fr; gap: var(--space-5); align-items: end; position: relative; z-index: 1; }
.hero h1 { color: var(--color-navy); }
.hero p.lead { color: var(--ink-soft); }
.hero-actions { display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-4); flex-wrap: wrap; }
@media (max-width: 480px) {
  /* Stack primary/secondary actions on narrow screens. */
  .hero-actions { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}
.hero-index { display: flex; flex-direction: column; }
.hero-index .eyebrow { margin-bottom: var(--space-3); }
.hero-index ol { list-style: none; margin: 0; padding: 0; }
.hero-index li { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--hairline); }
.hero-index li:last-child { border-bottom: 1px solid var(--hairline); }
.hero-index .n { font-family: var(--font-heading); font-size: 15px; color: var(--color-gold); }
.hero-index .t { font-size: 13.5px; color: var(--color-ink); }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero { padding: var(--space-5) 0 var(--space-5); }
}

/* Page header (interior pages) — navy-to-cream shift */
.page-hero { background: var(--color-cream); color: var(--color-ink); padding: var(--space-5) 0 var(--space-4); border-bottom: 1px solid var(--hairline); }
.page-hero .eyebrow { color: var(--color-gold); }
.page-hero h1 { color: var(--color-navy); }
.page-hero p { color: var(--ink-soft); }
.breadcrumb { color: var(--ink-soft); }
.breadcrumb a { color: var(--color-navy); }
.breadcrumb a:hover { color: var(--color-gold); }

/* 4. Feature list — replaces .card + .icon-badge inside .grid-2 */
.feature-list { border-top: 1px solid var(--hairline); }
.feature-row { display: grid; grid-template-columns: 0.62fr 1.38fr; gap: var(--space-5); padding: var(--space-6) 0; border-bottom: 1px solid var(--hairline); }
.feature-row .n { font-family: var(--font-heading); font-size: 64px; color: var(--color-gold); line-height: 1; }
.feature-row h3 { font-size: 28px; margin-bottom: var(--space-2); }
.feature-row p { color: var(--ink-soft); max-width: 520px; margin-bottom: var(--space-3); }
.feature-row ul { display: flex; flex-wrap: wrap; gap: 0; }
.feature-row ul li { font-size: 12.5px; padding: 7px 0; margin-right: var(--space-3); color: var(--color-ink); border-top: 1px solid var(--hairline); list-style: none; }
@media (max-width: 900px) { .feature-row { grid-template-columns: 1fr; } }

/* 5. Mirrored split — "Warum ENAS", replaces centered eyebrow + grid-3 icon cards */
.split { display: grid; grid-template-columns: 1fr 1fr; }
.split.seam { position: relative; }
.split.seam::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--color-gold); z-index: 2; }
.pane { padding: var(--space-7) var(--space-5); position: relative; }
.pane.dark { background: var(--color-navy); color: var(--color-offwhite); }
.pane.light { background: var(--color-cream); }
.value-list { list-style: none; margin: 0; padding: 0; }
.value-list li { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--hairline-on-navy); }
.value-list li:last-child { border-bottom: 1px solid var(--hairline-on-navy); }
.value-list .notch { flex: none; width: 28px; height: 28px; }
.value-list .notch path { fill: none; stroke: var(--color-gold); stroke-width: 1.4; }
.value-list h3, .value-list h4 { font-family: var(--font-heading); font-weight: 600; font-size: 19px; margin: 0 0 6px; color: var(--color-offwhite); }
.value-list p { margin: 0; color: var(--color-lightblue); font-size: 13.5px; }
.pane.light blockquote { font-family: var(--font-heading); font-size: 27px; line-height: 1.32; color: var(--color-navy); margin: 0; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split.seam::before { display: none; }
  .pane { padding: var(--space-5) var(--space-3); }
}

/* 7. CTA — replaces .cta-band */
.cta-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 320px; position: relative; }
.cta-split .pane { display: flex; flex-direction: column; justify-content: center; padding: var(--space-5); }
.cta-split .pane.dark h2 { color: var(--color-offwhite); font-size: clamp(28px, 3vw, 40px); }
.cta-split .pane.light p { color: var(--ink-soft); max-width: 380px; margin: 0 0 var(--space-4); }
.cta-split-light { grid-template-columns: 1fr 1fr; }
.cta-split-light .pane { padding: calc(var(--space-5) + var(--space-1)); }
.cta-split-light .pane.light { border-right: 1px solid var(--color-gold); }
.cta-split-light .pane.light h2 { color: var(--color-navy); font-size: clamp(28px, 3vw, 40px); }
.cta-split-light .pane.dark { align-items: flex-start; }
.cta-split-light .pane.dark .hero-actions { margin-top: 0; }
.cta-split-light .btn-solid { background: var(--color-cream); border-color: var(--color-cream); color: var(--color-navy); }
.cta-split-light .btn-solid:hover { background: var(--color-gold-light); border-color: var(--color-gold-light); }
.cta-split-light .btn-arrow { color: var(--color-offwhite); border-color: var(--hairline-on-navy); }
.cta-split-light .cta-hatch { display: none; }
.cta-hatch { position: absolute; left: 50%; bottom: 0; width: 56px; height: 56px; transform: translateX(-50%); z-index: 2; }
.cta-hatch line { stroke: var(--color-gold); stroke-width: 1; }
@media (max-width: 900px) {
  .cta-split:not(.cta-split-light) { grid-template-columns: 1fr; }
  .cta-hatch { display: none; }
}
@media (max-width: 768px) {
  .cta-split-light { grid-template-columns: 1fr; }
  .cta-split-light .pane { padding: var(--space-5) var(--space-3); }
  .cta-split-light .pane.light { border-right: 0; border-bottom: 1px solid var(--color-gold); }
}

/* 8. Cards — kept for any non-migrated usage, redefined to flat/bordered language */
.card { background: var(--color-offwhite); border: 1px solid var(--hairline); border-radius: var(--radius-editorial); box-shadow: none; }
.card:hover { transform: none; box-shadow: none; border-color: var(--color-gold); }

/* 9. Header — solid background + hairline border, blur removed. Logo slot itself unchanged. */
.site-header { background: var(--color-offwhite); backdrop-filter: none; border-bottom: 1px solid var(--hairline); }

/* 10. Motion — hero H1 starts hidden only when JS confirmed running (see inline
   head script); prevents flash of unsplit text before word-split animation.
   No-JS visitors never get the .js class, so the H1 renders normally. */
.js .hero h1 { opacity: 0; }

/* 11. Homepage hero — two-column split, copy left / Lottie animation right.
   Scoped to the / and /en/ homepages only via .hero-split; .hero itself
   is not used by any other page. Solid cream background, no photo, no
   scrim — header uses its normal site-wide styling on the homepage too. */

.hero.hero-split {
  min-height: 100vh;
  padding: 0;
  display: flex;
  align-items: flex-start;
  background: var(--color-offwhite);
}
.hero-split-grid {
  display: grid;
  width: 100%;
  grid-template-columns: 58% 42%;
  gap: var(--space-5);
  align-items: center;
}
.hero-lottie { align-self: start; }

.hero-copy { max-width: 560px; }
.hero-copy h1 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 76px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--color-navy);
  text-align: left;
}
.hero-copy .lead {
  color: var(--color-ink);
  font-size: 19px;
  font-weight: 500;
  opacity: 1;
  max-width: 480px;
  margin-top: 20px;
  text-align: left;
}
.hero-copy .hero-actions { margin-top: 32px; justify-content: flex-start; }

@media (max-width: 900px) {
  .hero-split-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .hero-copy { max-width: none; text-align: left; }
}

.hero-index { background: var(--color-cream); }
.hero-panel-top {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: end;
}
.hero-panel-top h2 { font-size: 30px; margin: 0; }
.hero-panel-text {
  font-family: var(--font-body);
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: 320px;
  margin: 0;
}
.hero-panel-divider { border: none; border-top: 1px solid var(--color-border); margin: 36px 0 0; }
.hero-panel-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 1px;
  background: var(--color-border);
}
.hero-panel-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: color-mix(in srgb, var(--color-border) 45%, var(--color-cream));
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-navy);
  transition: background 200ms;
}
.hero-panel-link:hover { background: color-mix(in srgb, var(--color-border) 80%, var(--color-cream)); }
.hero-panel-num { color: rgba(23,35,57,0.4); font-weight: 500; }
.hero-panel-sep { color: rgba(23,35,57,0.25); margin: 0 2px; }
.hero-panel-link .arrow { transition: transform var(--transition); }
.hero-panel-link:hover .arrow { transform: translateX(3px); }

@media (max-width: 768px) {
  .hero-panel-top { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .hero-panel-text { max-width: none; }
}
@media (max-width: 640px) {
  .hero-panel-links { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .hero-copy .lead { margin-top: 14px; }
  .hero-copy .hero-actions { margin-top: 20px; }
  .hero-panel-divider { margin-top: 24px; }
  .hero-panel-link { padding: 13px 18px; }
}

/* 12. Homepage hero — Lottie animation container (/ and /en/ only) */
.hero-lottie {
  height: calc(100vh - 84px - 48px);
  max-height: 720px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.hero-lottie svg {
  display: block;
  width: auto;
  height: 100%;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .hero-lottie {
    height: 380px;
    max-height: 380px;
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 640px) {
  .hero-lottie {
    height: 280px;
    max-height: 280px;
  }
}

/* 13. Service marquee — vertical scrolling list of service links */
.service-marquee { background: var(--color-cream); }
.service-marquee-grid {
  display: grid;
  grid-template-columns: 58% 42%;
  gap: var(--space-5);
  align-items: center;
}
.service-marquee-copy { max-width: 480px; }
.service-marquee-copy .eyebrow { margin-bottom: var(--space-3); }
.service-marquee-copy p { color: var(--color-text-muted); font-size: 17px; margin-top: var(--space-3); }

.service-marquee-window {
  position: relative;
  height: 380px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}
.service-marquee-track {
  animation: service-marquee-scroll 40s linear infinite;
  will-change: transform;
}
.service-marquee-window:hover .service-marquee-track { animation-play-state: paused; }
.service-marquee-track ul { list-style: none; margin: 0; padding: 0; }
.service-marquee-track li { padding: 10px 0; }
.service-marquee-track li a {
  display: inline-block;
  position: relative;
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-navy);
  padding: 4px 0;
}
.service-marquee-track li a::before {
  content: '\00B7';
  display: inline-block;
  width: 16px;
  color: var(--color-gold);
}
.service-marquee-track li a::after {
  content: '';
  position: absolute;
  left: 16px; right: 0; bottom: 2px;
  height: 1px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.service-marquee-track li a:hover { color: var(--color-gold); }
.service-marquee-track li a:hover::after { transform: scaleX(1); }

@keyframes service-marquee-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .service-marquee-window { overflow-y: auto; -webkit-mask-image: none; mask-image: none; }
  .service-marquee-track { animation: none; }
  .service-marquee-track ul[aria-hidden="true"] { display: none; }
}

@media (max-width: 900px) {
  .service-marquee-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .service-marquee-copy { max-width: none; }
  .service-marquee-window { height: 260px; }
}
@media (max-width: 640px) {
  .service-marquee-track li a { font-size: 20px; }
}

/* 15. Underline-draw hover — nav, lang-switch, footer nav, breadcrumb parent links */
.link-underline-draw { position: relative; }
.link-underline-draw::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(0.65, 0, 0.35, 1);
}
.link-underline-draw:hover::after,
.link-underline-draw:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .link-underline-draw::after { transition: none; }
}
/* Defensive scope: components with their own hover treatment (dock, mobile
   grid) must never pick up the underline-draw pseudo-element, even if the
   class is applied to them by mistake in the future. */
.service-dock a.link-underline-draw::after,
.service-grid a.link-underline-draw::after {
  content: none;
}

/* 16. Service dock — icon dock (desktop) / icon grid (mobile) on hub pages */
.service-dock {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  padding: 16px 22px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  backdrop-filter: blur(10px);
  max-width: fit-content;
  margin: 48px auto 0;
  box-shadow: 0 6px 24px rgba(23, 35, 57, 0.07);
}
.service-dock a {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ede4d0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
  transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.service-dock a svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.6;
  transition: color 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.service-dock a:hover {
  transform: scale(1.65) translateY(-10px);
  background: var(--color-navy);
  box-shadow: 0 12px 24px rgba(23, 35, 57, 0.18);
}
.service-dock a:hover svg { color: var(--color-gold); }
.service-dock a::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  background: var(--color-navy);
  color: var(--color-cream);
  padding: 6px 14px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms, transform 300ms;
}
.service-dock a:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.service-grid {
  display: none;
}

@media (max-width: 640px) {
  .service-dock { display: none; }
  .service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 380px;
    margin: 32px auto 0;
  }
  .service-grid a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 8px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    color: var(--color-navy);
    transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .service-grid .icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ede4d0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .service-grid .icon-circle svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.6;
    transition: color 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .service-grid .name {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
  }
  .service-grid a:active {
    background: var(--color-navy);
  }
  .service-grid a:active .icon-circle { background: var(--color-navy); }
  .service-grid a:active .icon-circle svg { color: var(--color-gold); }
}

@media (prefers-reduced-motion: reduce) {
  .service-dock a,
  .service-dock a svg,
  .service-dock a::after,
  .service-grid a,
  .service-grid .icon-circle,
  .service-grid .icon-circle svg {
    transition: all 200ms ease !important;
  }
  .service-dock a:hover {
    transform: none;
    box-shadow: 0 6px 24px rgba(23, 35, 57, 0.07);
  }
}

/* 12. About-page: two frames become one right-facing portal */
.architectural-illustration.architectural-illustration--about-portal {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
}
.about-portal {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  shape-rendering: geometricPrecision;
}
.about-portal__frame {
  transform-box: view-box;
  transform-origin: center;
  animation: about-portal-frame-left 7.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.about-portal__frame--right { animation-name: about-portal-frame-right; }
.about-portal__frame-fill { opacity: 0.5; }
.about-portal__draw,
.about-portal__merged-draw,
.about-portal__construction path,
.about-portal__accent-line {
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.about-portal__draw { animation: about-portal-draw-left 7.6s ease infinite; }
.about-portal__frame--right .about-portal__draw { animation-name: about-portal-draw-right; }
.about-portal__draw--primary { stroke-width: 2.3; }
.about-portal__draw--secondary { stroke-width: 1.7; stroke-opacity: 0.76; }
.about-portal__draw--inner { stroke-width: 1.45; stroke-opacity: 0.82; }
.about-portal__construction {
  opacity: 0;
  animation: about-portal-construction 7.6s ease infinite;
}
.about-portal__construction path { animation: about-portal-guide-draw 7.6s ease infinite; }
.about-portal__merged {
  opacity: 0;
  animation: about-portal-merged 7.6s ease infinite;
}
.about-portal__surface { opacity: 0.25; }
.about-portal__surface--inner { opacity: 0.13; }
.about-portal__merged-draw { animation: about-portal-merge-draw 7.6s ease infinite; }
.about-portal__merged-draw--outer { stroke-width: 1.8; }
.about-portal__merged-draw--inner { stroke-width: 1.25; stroke-opacity: 0.68; }
.about-portal__merged-draw--base { stroke-width: 1.4; stroke-opacity: 0.74; }
.about-portal__accents {
  opacity: 0;
  animation: about-portal-accents 7.6s ease infinite;
}
.about-portal__accent-line {
  stroke-width: 1;
  animation: about-portal-accent-draw 7.6s ease infinite;
}

@keyframes about-portal-frame-left {
  0%, 5% { opacity: 0; transform: translateX(-64px); }
  13%, 27% { opacity: 1; transform: translateX(-64px); }
  43%, 84% { opacity: 1; transform: translateX(0); }
  94%, 100% { opacity: 0; transform: translateX(-64px); }
}
@keyframes about-portal-frame-right {
  0%, 9% { opacity: 0; transform: translateX(64px); }
  18%, 27% { opacity: 1; transform: translateX(64px); }
  43%, 84% { opacity: 1; transform: translateX(0); }
  94%, 100% { opacity: 0; transform: translateX(64px); }
}
@keyframes about-portal-draw-left {
  0%, 5% { stroke-dashoffset: 1; }
  17%, 100% { stroke-dashoffset: 0; }
}
@keyframes about-portal-draw-right {
  0%, 10% { stroke-dashoffset: 1; }
  22%, 100% { stroke-dashoffset: 0; }
}
@keyframes about-portal-construction {
  0%, 10% { opacity: 0; }
  18%, 40% { opacity: 0.48; }
  56%, 84% { opacity: 0.24; }
  94%, 100% { opacity: 0; }
}
@keyframes about-portal-guide-draw {
  0%, 10% { stroke-dashoffset: 1; }
  25%, 100% { stroke-dashoffset: 0; }
}
@keyframes about-portal-merged {
  0%, 42% { opacity: 0; }
  52%, 84% { opacity: 1; }
  94%, 100% { opacity: 0; }
}
@keyframes about-portal-merge-draw {
  0%, 42% { stroke-dashoffset: 1; }
  57%, 100% { stroke-dashoffset: 0; }
}
@keyframes about-portal-accents {
  0%, 19% { opacity: 0; }
  27%, 40% { opacity: 0.62; }
  48%, 84% { opacity: 0.78; }
  94%, 100% { opacity: 0; }
}
@keyframes about-portal-accent-draw {
  0%, 19% { stroke-dashoffset: 1; }
  32%, 100% { stroke-dashoffset: 0; }
}

@media (max-width: 640px) {
  .architectural-illustration.architectural-illustration--about-portal { max-width: 480px; }
  .about-portal__construction--minor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .about-portal__frame,
  .about-portal__construction,
  .about-portal__merged,
  .about-portal__accents,
  .about-portal__draw,
  .about-portal__merged-draw,
  .about-portal__construction path,
  .about-portal__accent-line {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  .about-portal__construction { opacity: 0.24 !important; }
  .about-portal__accents { opacity: 0.78 !important; }
}

/* 13. Reusable architectural SVG illustrations */
.page-hero--illustrated { padding: var(--space-4) 0; }
.page-hero--illustrated .page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.1fr);
  align-items: center;
  gap: var(--space-5);
  min-height: 430px;
}
.page-hero--illustrated .page-hero__copy { min-width: 0; }

.architectural-illustration {
  width: 100%;
  max-width: 660px;
  margin-left: auto;
}
.architectural-illustration svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  shape-rendering: geometricPrecision;
}

.architectural-illustration__stroke {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  vector-effect: non-scaling-stroke;
  animation-duration: 4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-iteration-count: infinite;
}
.architectural-illustration__stroke--floor { animation-name: architectural-draw-floor; }
.architectural-illustration__stroke--wall-left { animation-name: architectural-draw-wall-left; }
.architectural-illustration__stroke--wall-right { animation-name: architectural-draw-wall-right; }
.architectural-illustration__stroke--door { animation-name: architectural-draw-door; }
.architectural-illustration__stroke--window { animation-name: architectural-draw-window; }
.architectural-illustration__stroke--grid { animation-name: architectural-draw-grid; }
.architectural-illustration__stroke--detail { animation-name: architectural-draw-detail; }

.architectural-illustration__fill {
  opacity: 0;
  animation: architectural-fill 4s ease infinite;
}
.architectural-illustration__node {
  opacity: 0;
  transform: scale(0.72);
  transform-box: fill-box;
  transform-origin: center;
  animation: architectural-node 4s ease infinite;
}

@keyframes architectural-draw-floor {
  0% { stroke-dashoffset: 1; opacity: 0; }
  1% { opacity: 1; }
  12%, 85% { stroke-dashoffset: 0; opacity: 1; }
  95% { stroke-dashoffset: 0; opacity: 0; }
  95.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes architectural-draw-wall-left {
  0%, 7% { stroke-dashoffset: 1; opacity: 0; }
  8% { opacity: 1; }
  25%, 85% { stroke-dashoffset: 0; opacity: 1; }
  95% { stroke-dashoffset: 0; opacity: 0; }
  95.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes architectural-draw-wall-right {
  0%, 12% { stroke-dashoffset: 1; opacity: 0; }
  13% { opacity: 1; }
  30%, 85% { stroke-dashoffset: 0; opacity: 1; }
  95% { stroke-dashoffset: 0; opacity: 0; }
  95.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes architectural-draw-door {
  0%, 21% { stroke-dashoffset: 1; opacity: 0; }
  22% { opacity: 1; }
  37%, 85% { stroke-dashoffset: 0; opacity: 1; }
  95% { stroke-dashoffset: 0; opacity: 0; }
  95.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes architectural-draw-window {
  0%, 27% { stroke-dashoffset: 1; opacity: 0; }
  28% { opacity: 1; }
  43%, 85% { stroke-dashoffset: 0; opacity: 1; }
  95% { stroke-dashoffset: 0; opacity: 0; }
  95.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes architectural-draw-grid {
  0%, 35% { stroke-dashoffset: 1; opacity: 0; }
  36% { opacity: 1; }
  50%, 85% { stroke-dashoffset: 0; opacity: 1; }
  95% { stroke-dashoffset: 0; opacity: 0; }
  95.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes architectural-draw-detail {
  0%, 42% { stroke-dashoffset: 1; opacity: 0; }
  43% { opacity: 1; }
  55%, 85% { stroke-dashoffset: 0; opacity: 1; }
  95% { stroke-dashoffset: 0; opacity: 0; }
  95.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes architectural-fill {
  0%, 42% { opacity: 0; }
  56%, 85% { opacity: 1; }
  95%, 100% { opacity: 0; }
}
@keyframes architectural-node {
  0%, 47% { opacity: 0; transform: scale(0.72); }
  56%, 85% { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(0.86); }
}

@media (max-width: 900px) {
  .page-hero--illustrated .page-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    min-height: 0;
  }
  .architectural-illustration {
    max-width: 560px;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .page-hero--illustrated { padding: var(--space-4) 0 var(--space-3); }
  .architectural-illustration { max-width: 440px; }
}

@media (prefers-reduced-motion: reduce) {
  .architectural-illustration__fill,
  .architectural-illustration__stroke,
  .architectural-illustration__node {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* 14. Facility service architectural network illustration */
.facility-illustration {
  width: 100%;
  max-width: 720px;
  margin-left: auto;
}
.facility-illustration svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  shape-rendering: geometricPrecision;
}
.facility-illustration__draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  vector-effect: non-scaling-stroke;
  animation-duration: 7s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-iteration-count: infinite;
}
.facility-illustration__draw--base { animation-name: facility-draw-base; }
.facility-illustration__draw--structure { animation-name: facility-draw-structure; }
.facility-illustration__draw--roof { animation-name: facility-draw-roof; }
.facility-illustration__draw--facade { animation-name: facility-draw-facade; }
.facility-illustration__draw--connector { animation-name: facility-draw-connector; }
.facility-illustration__draw--service { animation-name: facility-draw-service; }
.facility-illustration__draw--icon { animation-name: facility-draw-icon; }
.facility-illustration__draw--guide { animation-name: facility-draw-guide; }

.facility-illustration__fill {
  opacity: 0;
  animation: facility-fill 7s ease infinite;
}
.facility-illustration__service {
  opacity: 0;
  transform: scale(0.94);
  transform-box: fill-box;
  transform-origin: center;
  animation: facility-service-1 7s ease infinite;
}
.facility-service--maintenance { animation-name: facility-service-2; }
.facility-service--caretaker { animation-name: facility-service-3; }
.facility-service--technical { animation-name: facility-service-4; }
.facility-service--waste { animation-name: facility-service-5; }
.facility-service--security { animation-name: facility-service-6; }
.facility-illustration__label {
  fill: var(--color-navy);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-anchor: middle;
  opacity: 0;
  animation: facility-label-appear 7s ease infinite;
}
.facility-illustration__node {
  opacity: 0;
  transform: scale(0.75);
  transform-box: fill-box;
  transform-origin: center;
  animation: facility-node-appear 7s ease infinite;
}

@keyframes facility-draw-base {
  0% { stroke-dashoffset: 1; opacity: 0; }
  1% { opacity: 1; }
  15%, 82% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 0; }
  92.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes facility-draw-structure {
  0%, 5% { stroke-dashoffset: 1; opacity: 0; }
  6% { opacity: 1; }
  20%, 82% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 0; }
  92.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes facility-draw-roof {
  0%, 11% { stroke-dashoffset: 1; opacity: 0; }
  12% { opacity: 1; }
  27%, 82% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 0; }
  92.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes facility-draw-facade {
  0%, 20% { stroke-dashoffset: 1; opacity: 0; }
  21% { opacity: 1; }
  34%, 82% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 0; }
  92.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes facility-fill {
  0%, 20% { opacity: 0; }
  34%, 82% { opacity: 1; }
  92%, 100% { opacity: 0; }
}
@keyframes facility-draw-connector {
  0%, 29% { stroke-dashoffset: 1; opacity: 0; }
  30% { opacity: 1; }
  44%, 82% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 0; }
  92.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes facility-service-1 {
  0%, 39% { opacity: 0; transform: scale(0.94); }
  50%, 82% { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(0.97); }
}
@keyframes facility-service-2 {
  0%, 41% { opacity: 0; transform: scale(0.94); }
  52%, 82% { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(0.97); }
}
@keyframes facility-service-3 {
  0%, 43% { opacity: 0; transform: scale(0.94); }
  54%, 82% { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(0.97); }
}
@keyframes facility-service-4 {
  0%, 45% { opacity: 0; transform: scale(0.94); }
  56%, 82% { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(0.97); }
}
@keyframes facility-service-5 {
  0%, 47% { opacity: 0; transform: scale(0.94); }
  58%, 82% { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(0.97); }
}
@keyframes facility-service-6 {
  0%, 49% { opacity: 0; transform: scale(0.94); }
  60%, 82% { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(0.97); }
}
@keyframes facility-draw-service {
  0%, 39% { stroke-dashoffset: 1; opacity: 0; }
  40% { opacity: 1; }
  52%, 82% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 0; }
  92.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes facility-draw-icon {
  0%, 45% { stroke-dashoffset: 1; opacity: 0; }
  46% { opacity: 1; }
  60%, 82% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 0; }
  92.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes facility-label-appear {
  0%, 50% { opacity: 0; }
  62%, 82% { opacity: 0.78; }
  92%, 100% { opacity: 0; }
}
@keyframes facility-draw-guide {
  0%, 51% { stroke-dashoffset: 1; opacity: 0; }
  52% { opacity: 1; }
  63%, 82% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 0; }
  92.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes facility-node-appear {
  0%, 54% { opacity: 0; transform: scale(0.75); }
  63%, 82% { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(0.86); }
}

@media (max-width: 900px) {
  .facility-illustration {
    max-width: 640px;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .facility-illustration { max-width: 520px; }
  .facility-illustration__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .facility-illustration__draw,
  .facility-illustration__fill,
  .facility-illustration__service,
  .facility-illustration__label,
  .facility-illustration__node {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  .facility-illustration__label { display: block !important; }
}

/* 15. Homepage façade fragment */
.services-showcase__intro {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr);
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-5);
}
.services-showcase__intro .section-head { margin-bottom: 0; }

.architectural-illustration--facade {
  width: 100%;
  max-width: 620px;
  margin-left: auto;
}
.facade-fragment {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  shape-rendering: geometricPrecision;
}
.facade-fragment__draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  vector-effect: non-scaling-stroke;
  animation-duration: 7s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-iteration-count: infinite;
}
.facade-fragment__draw--corner { animation-name: facade-draw-corner; }
.facade-fragment__draw--roof { animation-name: facade-draw-roof; }
.facade-fragment__draw--slab { animation-name: facade-draw-slab; }
.facade-fragment__draw--outer { animation-name: facade-draw-outer; }
.facade-fragment__draw--mullion-1 { animation-name: facade-draw-mullion-1; }
.facade-fragment__draw--mullion-2 { animation-name: facade-draw-mullion-2; }
.facade-fragment__draw--mullion-3 { animation-name: facade-draw-mullion-3; }
.facade-fragment__draw--mullion-4 { animation-name: facade-draw-mullion-4; }
.facade-fragment__draw--mullion-5 { animation-name: facade-draw-mullion-5; }
.facade-fragment__draw--detail { animation-name: facade-draw-detail; }
.facade-fragment__draw--construction { animation-name: facade-draw-construction; }
.facade-fragment__draw--dashed {
  stroke-dasharray: 0.06 0.04;
  stroke-dashoffset: 0;
  animation-name: facade-fade-construction;
}

.facade-fragment__fill {
  opacity: 0;
  animation: facade-fill 7s ease infinite;
}
.facade-fragment__node {
  opacity: 0;
  transform: scale(0.85);
  transform-box: fill-box;
  transform-origin: center;
  animation: facade-node 7s ease infinite;
}

@keyframes facade-draw-corner {
  0% { stroke-dashoffset: 1; opacity: 0; }
  1% { opacity: 1; }
  10%, 82% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 0; }
  92.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes facade-draw-roof {
  0%, 5% { stroke-dashoffset: 1; opacity: 0; }
  6% { opacity: 1; }
  18%, 82% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 0; }
  92.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes facade-draw-slab {
  0%, 9% { stroke-dashoffset: 1; opacity: 0; }
  10% { opacity: 1; }
  23%, 82% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 0; }
  92.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes facade-draw-outer {
  0%, 16% { stroke-dashoffset: 1; opacity: 0; }
  17% { opacity: 1; }
  29%, 82% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 0; }
  92.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes facade-draw-mullion-1 {
  0%, 23% { stroke-dashoffset: 1; opacity: 0; }
  24% { opacity: 1; }
  36%, 82% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 0; }
  92.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes facade-draw-mullion-2 {
  0%, 25% { stroke-dashoffset: 1; opacity: 0; }
  26% { opacity: 1; }
  38%, 82% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 0; }
  92.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes facade-draw-mullion-3 {
  0%, 27% { stroke-dashoffset: 1; opacity: 0; }
  28% { opacity: 1; }
  40%, 82% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 0; }
  92.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes facade-draw-mullion-4 {
  0%, 29% { stroke-dashoffset: 1; opacity: 0; }
  30% { opacity: 1; }
  42%, 82% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 0; }
  92.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes facade-draw-mullion-5 {
  0%, 31% { stroke-dashoffset: 1; opacity: 0; }
  32% { opacity: 1; }
  44%, 82% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 0; }
  92.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes facade-draw-detail {
  0%, 36% { stroke-dashoffset: 1; opacity: 0; }
  37% { opacity: 1; }
  48%, 82% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 0; }
  92.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes facade-fill {
  0%, 37% { opacity: 0; }
  48%, 82% { opacity: 1; }
  92%, 100% { opacity: 0; }
}
@keyframes facade-draw-construction {
  0%, 43% { stroke-dashoffset: 1; opacity: 0; }
  44% { opacity: 1; }
  57%, 82% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 0; }
  92.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes facade-fade-construction {
  0%, 43% { opacity: 0; }
  57%, 82% { opacity: 1; }
  92%, 100% { opacity: 0; }
}
@keyframes facade-node {
  0%, 51% { opacity: 0; transform: scale(0.85); }
  61%, 82% { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(0.9); }
}

@media (max-width: 900px) {
  .services-showcase__intro {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .architectural-illustration--facade {
    max-width: 560px;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .architectural-illustration--facade { max-width: 450px; }
  .facade-fragment__construction--minor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .facade-fragment__draw,
  .facade-fragment__fill,
  .facade-fragment__node {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  .facade-fragment__construction--minor { display: inline !important; }
}