/*
  AER Group — shared brand layer.
  Reuse on sister sites (a-fermeture.aer-grp.be, aenterprise.aer-grp.be, ...):
  override the --brand-* variables and swap the logo, keep everything else.
*/

/* Self-hosted (SIL OFL, licences next to the files) so no visitor IP is sent to Google.
   Weight ranges match what the Google Fonts request used to serve. */
@font-face{
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Outfit";
  src: url("/assets/fonts/outfit-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

:root{
  /* Palette (A-DOOR default) */
  --brand-navy: #274595;
  --brand-navy-dark: #16265a;
  --brand-navy-deep: #0d1834;
  --brand-orange: #f3641f;
  --brand-orange-soft: #ff8a4c;
  --brand-white: #ffffff;
  --brand-ink: #131a2a;
  --brand-body: #5b6478;
  --brand-muted: #8892a6;
  --brand-bg: #f5f7fb;
  --brand-bg-alt: #eef1f8;
  --brand-border: #e4e8f2;

  /* Type */
  --brand-font: "Inter", "Segoe UI", system-ui, sans-serif;
  --brand-font-display: "Outfit", "Inter", "Segoe UI", system-ui, sans-serif;

  /* Shape & depth */
  --brand-radius: 18px;
  --brand-radius-sm: 10px;
  --brand-radius-lg: 26px;
  --brand-max-width: 1200px;
  --brand-shadow-sm: 0 2px 10px rgba(19, 26, 42, .06);
  --brand-shadow: 0 14px 40px rgba(19, 26, 42, .09);
  --brand-shadow-lg: 0 30px 70px rgba(19, 26, 42, .16);
  --brand-ease: cubic-bezier(.22, .8, .3, 1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--brand-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--brand-body);
  background: var(--brand-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
figure{ margin: 0; }
h1, h2, h3, h4{
  font-family: var(--brand-font-display);
  color: var(--brand-ink);
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0;
}

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

/* ---------- Buttons ---------- */
.brand-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 28px;
  border-radius: 999px;
  font-family: var(--brand-font);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .25s var(--brand-ease), box-shadow .25s var(--brand-ease),
              background .25s var(--brand-ease), color .25s var(--brand-ease),
              border-color .25s var(--brand-ease);
}
.brand-btn:hover{ transform: translateY(-2px); }

.brand-btn--primary{
  background: var(--brand-orange);
  color: var(--brand-white);
  box-shadow: 0 10px 24px rgba(243, 100, 31, .28);
}
.brand-btn--primary:hover{ box-shadow: 0 16px 34px rgba(243, 100, 31, .38); }

.brand-btn--ghost{
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .42);
  color: var(--brand-white);
  backdrop-filter: blur(6px);
}
.brand-btn--ghost:hover{ background: rgba(255, 255, 255, .18); border-color: rgba(255,255,255,.7); }

.brand-btn--outline{
  background: transparent;
  border-color: var(--brand-border);
  color: var(--brand-navy);
}
.brand-btn--outline:hover{ border-color: var(--brand-navy); background: var(--brand-bg); }

/* ---------- Section headings ---------- */
.brand-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-orange);
  margin-bottom: 16px;
}
.brand-eyebrow::before{
  content: "";
  width: 26px;
  height: 2px;
  background: var(--brand-orange);
  border-radius: 2px;
}

.brand-section-title{
  font-size: clamp(29px, 4vw, 44px);
  font-weight: 700;
  color: var(--brand-ink);
  margin: 0 0 16px;
}
.brand-section-lead{
  font-size: 17px;
  line-height: 1.7;
  color: var(--brand-body);
  margin: 0;
}

/* ---------- Language switch ---------- */
.brand-lang-switch{
  display: flex;
  gap: 2px;
  background: var(--brand-bg);
  border-radius: 999px;
  padding: 4px;
}
.brand-lang-switch a{
  display: inline-block;
  border: none;
  background: transparent;
  font-family: var(--brand-font);
  color: var(--brand-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 7px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s var(--brand-ease), color .2s var(--brand-ease);
}
.brand-lang-switch a:hover{ color: var(--brand-navy); }
.brand-lang-switch a.is-active{
  background: var(--brand-navy);
  color: var(--brand-white);
}

/* ---------- Header shell ---------- */
.brand-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--brand-white);
  transition: box-shadow .3s var(--brand-ease), padding .3s var(--brand-ease);
}
.brand-header.is-stuck{ box-shadow: 0 6px 28px rgba(19, 26, 42, .09); }
.brand-header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 24px;
  transition: padding .3s var(--brand-ease);
}
.brand-header.is-stuck .brand-header-inner{ padding-top: 9px; padding-bottom: 9px; }
.brand-logo{ height: 70px; width: auto; transition: height .3s var(--brand-ease); }
.brand-header.is-stuck .brand-logo{ height: 38px; }
/* On phones the full-size logo pushes the menu button off-screen, so cap its height there */
@media (max-width: 640px){
  .brand-logo{ height: 42px; }
}

/* Color logo rendered solid white, for dark backgrounds */
.brand-logo--mono{ filter: brightness(0) invert(1); }

.brand-footer{
  background: var(--brand-navy-deep);
  color: rgba(255, 255, 255, .72);
}

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--brand-ease), transform .7s var(--brand-ease);
}
.reveal.is-visible{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal{ opacity: 1; transform: none; transition: none; }
}