/* ==========================================================================
   CHROME — header, menu-overlay, footer
   ========================================================================== */

.at-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.at-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding-block: clamp(.9rem, 2vw, 1.4rem);
  transition: transform .5s var(--at-ease), background-color .4s linear;
}

/* Wegschuiven bij naar beneden scrollen, terug bij omhoog. */
.at-header.is-hidden { transform: translateY(-110%); }
.at-header.is-stuck {
  background: color-mix(in srgb, var(--at-bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
}

.at-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--at-max);
  margin-inline: auto;
  padding-inline: var(--at-pad);
}

.at-header__logo {
  width: auto;
  height: clamp(38px, 5vw, 54px);
}

/* --------------------------------------------------------------------------
   DE TWEE INGANGEN — Info en Menu, op elk scherm naast elkaar
   -------------------------------------------------------------------------- */
.at-header__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.at-social-icon { width: 19px; height: 19px; }

/* De speld, de envelop, de pont en de auto lopen mee met de tekst. Rood is
   hier de reactie op hover, niet de ruststand. */
.at-pin,
.at-ico {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--at-text);
}
/* Binnen een knop lopen ze mee met de tekst — daar zorgt de veeg al voor
   het rood. */
.at-btn .at-pin,
.at-btn .at-ico { color: currentColor; }

/* --------------------------------------------------------------------------
   BURGER
   -------------------------------------------------------------------------- */
.at-burger {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .95rem;
  border-radius: var(--at-r-sm);
  box-shadow: inset 0 0 0 1px var(--at-border);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: box-shadow .35s var(--at-ease-out), background-color .35s var(--at-ease-out);
}
.at-burger:hover { box-shadow: inset 0 0 0 1px var(--at-border-2); }

.at-burger__lines {
  position: relative;
  display: block;
  width: 18px;
  height: 10px;
}
.at-burger__lines i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform .42s var(--at-ease), width .42s var(--at-ease);
}
.at-burger__lines i:nth-child(1) { top: 0; }
.at-burger__lines i:nth-child(2) { bottom: 0; width: 70%; }
.at-burger:hover .at-burger__lines i:nth-child(2) { width: 100%; }

.at-burger[aria-expanded='true'] .at-burger__lines i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.at-burger[aria-expanded='true'] .at-burger__lines i:nth-child(2) { width: 100%; transform: translateY(-4px) rotate(-45deg); }

/* De Contact-knop is dezelfde knop met een speld ervoor. Iets steviger dan de
   menuknop: hier zit het adres, de pont, de garage en de assistent achter, en
   dat is waar de meeste bezoekers voor komen. */
.at-burger--info {
  background: var(--at-surface);
  box-shadow: inset 0 0 0 1px var(--at-border-2);
}
.at-burger--info .at-pin {
  width: 15px;
  height: 15px;
  transition: transform .35s var(--at-ease-out);
}
.at-burger--info:hover { background: var(--at-surface-2); }
.at-burger--info:hover .at-pin { transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   MENU-OVERLAY — de toren als lijst
   -------------------------------------------------------------------------- */
.at-menu {
  position: fixed;
  inset: 0;
  z-index: 45;
}
.at-menu[hidden] { display: none; }

.at-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  opacity: 0;
  transition: opacity .5s var(--at-ease);
}
.at-menu.is-open .at-menu__backdrop { opacity: 1; }

.at-menu__panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--at-bg);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .72s var(--at-ease);
}
.at-menu.is-open .at-menu__panel { clip-path: inset(0 0 0 0); }

/* De balk is normaal doorzichtig; met een paneel open zou de inhoud
   er doorheen schemeren. */
body.at-panel-open .at-header { background: var(--at-bg); }

.at-menu__inner {
  max-width: var(--at-max);
  margin-inline: auto;
  padding: var(--at-header-h) var(--at-pad) 3rem;
}

/* Filters */
.at-menu__filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.at-chip {
  /* Komen bij het openen als eerste binnen, van links naar rechts. */
  opacity: 0;
  transform: translateY(8px);
  padding: .45rem .85rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--at-border);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--at-text-2);
  transition:
    opacity .18s linear,
    transform .18s var(--at-ease-out),
    color .3s var(--at-ease-out),
    background-color .3s var(--at-ease-out),
    box-shadow .3s var(--at-ease-out);
}
.at-menu.is-open .at-chip {
  opacity: 1;
  transform: none;
  transition:
    opacity .4s linear calc(var(--i) * 45ms + 90ms),
    transform .4s var(--at-ease-out) calc(var(--i) * 45ms + 90ms),
    color .3s var(--at-ease-out),
    background-color .3s var(--at-ease-out),
    box-shadow .3s var(--at-ease-out);
}
.at-chip:hover { color: var(--at-text); box-shadow: inset 0 0 0 1px var(--at-border-2); }
.at-chip.is-on {
  color: #000;
  background: var(--at-text);
  box-shadow: inset 0 0 0 1px var(--at-text);
}

/* --- De afdaling ---------------------------------------------------------
   Scrollen door het menu is afdalen door de toren: links een doorsnede op
   ware indeling die meevult, rechts de etages die je passeert. */
.at-menu__descent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  /* Ruim genoeg dat de bolletjes niet tegen de doorsnede aan plakken; de rij
     zelf houdt daarnaast nog een eigen inspringing (zie .at-menu__link). */
  gap: clamp(1rem, 2.2vw, 2rem);
}

/* Loopt van de eerste tot de laatste rij mee — geen sticky, want de
   doorsnede is de hele toren, niet een stukje ervan. */
.at-menu__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: .2rem;
}

.at-menu__mast   { width: 2px;  height: 12px; background: var(--at-text-3); }
.at-menu__roof   { width: 22px; height: 4px;  background: var(--at-text-2); }
.at-menu__plinth { width: 22px; height: 4px;  background: var(--at-text-2); }

/* Dak en voet komen na de doorsnede op hun plek. */
.at-menu__mast,
.at-menu__roof,
.at-menu__plinth {
  opacity: 0;
  transition: opacity .4s linear;
}
.at-menu.is-open .at-menu__mast,
.at-menu.is-open .at-menu__roof { opacity: 1; transition-delay: .2s; }
.at-menu.is-open .at-menu__plinth { opacity: 1; transition-delay: .85s; }

.at-menu__segments {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 12px;
  margin-block: 3px;
  /* Bij het openen tekent de doorsnede zichzelf van boven naar beneden. */
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .85s var(--at-ease);
}
.at-menu.is-open .at-menu__segments { transform: scaleY(1); }

.at-menu__segments i {
  flex: 1;
  background: rgba(255, 255, 255, .14);
  transition:
    background-color .3s linear,
    opacity .45s var(--at-ease-out);
}
/* Gepasseerde verdiepingen kleuren in de huiskleur van hun afdeling. */
.at-menu__segments i.is-passed { background: var(--c); }
/* De doorsnede filtert mee: verdiepingen buiten de selectie zakken weg,
   zodat je ziet wáár in de toren het zit. */
.at-menu__segments i.is-dimmed { opacity: .18; }

@media (max-width: 640px) {
  .at-menu__segments { width: 8px; }
  .at-menu__roof, .at-menu__plinth { width: 16px; }
}

/* De lijst */
.at-menu__list { border-top: 1px solid var(--at-border); }

/* Gepasseerd: een blijvende, zachte kleurzweem plus het etagenummer in
   de huiskleur. Hover blijft daar bovenop werken. */
.at-menu__item.is-passed .at-menu__link::before { width: 100%; opacity: .09; }

.at-menu__item {
  border-bottom: 1px solid var(--at-border);
  opacity: 0;
  transform: translateY(14px);
  /* Dichtdoen gaat zónder trap: het paneel veegt in .72s dicht, dus de rijen
     moeten in één keer mee. Een trap eruit duurt langer dan de veeg en dan
     zie je rijen in het niets hangen. */
  transition:
    opacity .2s var(--at-ease-out),
    transform .2s var(--at-ease-out);
}
.at-menu.is-open .at-menu__item {
  opacity: 1;
  transform: none;
  /* Erin wél met een trap, van boven naar beneden — je daalt af. */
  transition:
    opacity .5s var(--at-ease-out) calc(var(--i) * 28ms + 180ms),
    transform .5s var(--at-ease-out) calc(var(--i) * 28ms + 180ms);
}
.at-menu__item.is-filtered { display: none; }

/* Filteren deelt opnieuw uit: wat overblijft komt van onderaf terug, in de
   volgorde waarin het nu staat. Een animatie in plaats van een overgang,
   want de rijen springen van plek en er valt dus niets te interpoleren. */
@keyframes at-menu-deal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.at-menu__item.is-dealt {
  /* `backwards` en niet `both`: na afloop valt de rij terug op zijn gewone
     stand. Met een blijvende vulstand zou de animatie het dichtdoen van het
     menu blokkeren. */
  animation: at-menu-deal .38s var(--at-ease-out) backwards;
  animation-delay: calc(var(--n, 0) * 24ms);
}

.at-menu__link {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  /* Ook in rust springt de rij in: het bolletje plakte anders tegen de rand
     van het kleurvlak dat bij hover van links inschuift. */
  padding: clamp(.7rem, 1.6vw, 1.05rem) 0 clamp(.7rem, 1.6vw, 1.05rem) clamp(.7rem, 1.8vw, 1rem);
  transition: padding-left .45s var(--at-ease), color .35s var(--at-ease-out);
}

/* Kleurvlak dat vanaf links inschuift. */
.at-menu__link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--c);
  opacity: .16;
  transition: width .5s var(--at-ease);
}
.at-menu__link:hover::before,
.at-menu__link:focus-visible::before { width: 100%; }
.at-menu__link:hover,
.at-menu__link:focus-visible { padding-left: clamp(1.7rem, 3.4vw, 2.1rem); }

/* Het etagenummer als klein bolletje: scheelt ruimte en houdt de rij rustig. */
.at-menu__floor {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 1.9rem;
  height: 1.9rem;
  padding-inline: .35rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--at-border-2);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--at-text-3);
  white-space: nowrap;
  transition:
    color .35s var(--at-ease-out),
    background-color .35s var(--at-ease-out),
    box-shadow .35s var(--at-ease-out);
}
.at-menu__link:hover .at-menu__floor,
.at-menu__item.is-passed .at-menu__floor {
  color: var(--at-accent-ink);
  background: var(--c);
  box-shadow: inset 0 0 0 1px var(--c);
}

.at-menu__text {
  position: relative;
  min-width: 0;
}

.at-menu__name {
  display: block;
  font-family: var(--at-font-display);
  font-size: clamp(1.5rem, 4.4vw, 2.9rem);
  line-height: .98;
  letter-spacing: -.035em;
}

/* Ondertitel onder de naam, wit en halfvet — niet weggestopt rechts achter
   het logo. */
.at-menu__sub {
  display: block;
  margin-top: .3rem;
  font-size: clamp(.72rem, 1vw, .82rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--at-text);
}

.at-menu__ext {
  font-size: .5em;
  vertical-align: .35em;
  color: var(--at-text-3);
}

.at-menu__logo {
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: clamp(90px, 12vw, 150px);
  opacity: 0;
  transform: translateX(12px);
  transition: opacity .4s var(--at-ease-out), transform .4s var(--at-ease-out);
  pointer-events: none;
}
.at-menu__link:hover .at-menu__logo,
.at-menu__link:focus-visible .at-menu__logo { opacity: 1; transform: none; }
.at-menu__logo img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}
@media (max-width: 900px) {
  .at-menu__logo { display: none; }
}
/* Ruimte vrijhouden voor het logo, zodat een lange ondertitel er nooit
   onderdoor loopt. */
@media (min-width: 901px) {
  .at-menu__link { padding-right: clamp(7rem, 13vw, 11rem); }
}

/* --- De twee uitwegen ----------------------------------------------------
   Sluiten de lijst af: wie hier is aanbeland heeft alle etages gezien en zit
   waarschijnlijk nog met een vraag. Over de volle breedte, want dit moet je
   niet hoeven zoeken. */
.at-menu__asks {
  display: grid;
  gap: .75rem;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}
@media (min-width: 700px) {
  .at-menu__asks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- De assistent boven de footer ----------------------------------------
   Alleen op mobiel. Op desktop staat de knop de hele tijd in de kop, en dan
   is dit dubbelop. */
.at-askbar { display: none; }

@media (max-width: 900px) {
  .at-askbar {
    display: block;
    margin-top: clamp(3rem, 10vw, 5rem);
    /* De footer begint met een gearceerde baan die vanaf zijn bovenrand
       uitdooft. Zonder deze ruimte staat de knop er met zijn onderkant
       bovenop. */
    margin-bottom: clamp(2rem, 7vw, 3rem);
  }
}

/* Op desktop staat hij in de footer zelf, op de regel van het logo: rechts,
   boven de kolommen Foundation en Follow. Daar is ruimte die verder toch
   leegstond, en hij komt in beeld op het moment dat je uitgelezen bent. */
.at-footer__ask { display: none; }

@media (min-width: 901px) {
  .at-footer__ask {
    display: block;
    /* Bij twee kolommen is er alleen de rechterhelft. */
    grid-column: 2;
  }

  /* Compacter dan de mobiele variant: hier staat hij náást iets, niet alleen. */
  .at-footer__ask .at-ask {
    padding: 1rem 1.15rem;
    gap: .8rem;
  }
  .at-footer__ask .at-ask__title { font-size: 1.02rem; }
  .at-footer__ask .at-ask__sub { font-size: .74rem; }
}

/* Met vier kolommen stopt hij op de kantlijn van Foundation. Doorlopen tot
   de buitenrand kán wel — de vakken liggen daar netjes gelijk — maar de
   Follow-kolom eronder is maar een paar korte woorden breed, en dan steekt
   een dicht vlak zichtbaar voorbij alles waar het boven staat. */
@media (min-width: 1020px) {
  .at-footer__ask {
    /* Twee kolommen krijgt hij toegewezen, maar hij vult ze niet: hij begint
       op de kantlijn van Foundation en groeit naar rechts tot precies zover
       als de kop nodig heeft. Eén regel, en geen pixel meer. */
    grid-column: 3 / span 2;
    justify-self: start;
    width: max-content;
    max-width: 100%;
  }
  .at-footer__ask .at-ask { width: auto; }
  .at-footer__ask .at-ask__title { white-space: nowrap; }
}

.at-ask {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: clamp(1rem, 2.5vw, 1.4rem) clamp(1.1rem, 3vw, 1.6rem);
  border: 0;
  border-radius: var(--at-r);
  /* Een zweem van de accentkleur over het vlak en in de rand: genoeg om niet
     als zomaar een grijs blokje te lezen, niet zoveel dat hij schreeuwt. */
  background:
    linear-gradient(to bottom right,
      color-mix(in srgb, var(--at-accent) 10%, transparent), transparent 60%),
    var(--at-surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--at-accent) 38%, var(--at-border-2));
  color: var(--at-text);
  text-align: left;
  cursor: pointer;
  transition:
    transform .35s var(--at-ease-out),
    box-shadow .3s var(--at-ease-out),
    color .3s var(--at-ease-out);
}

/* Hetzelfde rood dat overal van links inveegt. */
.at-ask::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--at-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--at-ease);
}
.at-ask:hover,
.at-ask:focus-visible {
  transform: translate(2px, -2px);
  color: var(--at-accent-ink);
  box-shadow: inset 0 0 0 1px var(--at-accent);
}
.at-ask:hover::before,
.at-ask:focus-visible::before { transform: scaleX(1); }

.at-ask .at-ico,
.at-ask .at-pin { width: 22px; height: 22px; color: currentColor; }

.at-ask__text {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
  margin-right: auto;
}
/* Kleiner dan de oude "Questions?" — die stond op één regel, deze vraagt om
   twee. Op de smalste telefoon blijft het daarmee twee regels. */
.at-ask__title {
  font-family: var(--at-font-display);
  font-weight: 700;
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.at-ask__sub {
  font-family: var(--at-font-body);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: inherit;
  opacity: .72;
}

.at-ask .at-btn__arrow {
  width: 1.2rem;
  height: 1.2rem;
  flex: none;
  transition: transform .35s var(--at-ease-out);
}
.at-ask:hover .at-btn__arrow { transform: translateX(.3em); }

/* --- Het ongelezen berichtje -----------------------------------------------
   Een bolletje met een 1 dat net over de hoek hangt, zoals op een app-icoon.
   Daar hoort geen uitleg bij: iedereen weet meteen wat het betekent, en dat
   is precies waarom het werkt. */
.at-ask__badge {
  position: absolute;
  top: -.6rem;
  /* Wel over de bovenrand, niet over de kantlijn: de knop loopt tot aan de
     marge van de pagina, dus alles wat hier naar rechts steekt hangt buiten
     het stramien. */
  right: 0;
  z-index: 1;

  display: grid;
  place-items: center;
  min-width: 1.65rem;
  height: 1.65rem;
  padding: 0 .35rem;
  box-sizing: border-box;

  border-radius: 999px;
  background: var(--at-accent);
  color: var(--at-accent-ink);

  font-family: var(--at-font-body);
  font-size: .82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;

  /* De donkere rand eromheen maakt hem los van de knop, ook als die bij het
     aanwijzen helemaal rood wordt. */
  box-shadow: 0 0 0 3px var(--at-bg), 0 4px 14px rgba(0, 0, 0, .45);
}

/* Eén keer aankloppen bij het verschijnen, daarna stil. Een bolletje dat
   blijft pulseren is na tien seconden geen blikvanger meer maar een klacht. */
@keyframes at-ask-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.at-ask__badge { animation: at-ask-pop .5s var(--at-ease-out) .6s backwards; }

@media (prefers-reduced-motion: reduce) {
  .at-ask__badge { animation: none; }
}


/* In het contactpaneel staat dezelfde knop, maar dan onderaan zijn kolom. */
.at-info__col .at-ask { margin-top: auto; }

.at-menu__foot { margin-top: clamp(1.75rem, 4vw, 3rem); }
.at-menu__secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: .8rem;
  color: var(--at-text-3);
}
.at-menu__secondary a { transition: color .3s var(--at-ease-out); }
.at-menu__secondary a:hover { color: var(--at-text); }

/* --------------------------------------------------------------------------
   CONTACTPANEEL — route, contact en de ingang naar de assistent

   Eén stramien voor alles: een streep, een klein opschrift, en daaronder het
   antwoord. Er stonden hiervoor vier verschillende omkaderingen door elkaar —
   een kadertje om het e-mailadres, pillen om de socials, twee soorten knoppen
   — en dat maakte het rommelig zonder dat het iets verduidelijkte.
   -------------------------------------------------------------------------- */
.at-info {
  position: fixed;
  inset: 0;
  z-index: 46;
}
.at-info[hidden] { display: none; }

.at-info__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  opacity: 0;
  transition: opacity .5s var(--at-ease);
}
.at-info.is-open .at-info__backdrop { opacity: 1; }

/* Schuift van boven binnen, net als het menu — zelfde beweging, zodat de
   twee knoppen in de balk zich ook hetzelfde gedragen. */
.at-info__panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--at-bg);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .72s var(--at-ease);
}
.at-info.is-open .at-info__panel { clip-path: inset(0 0 0 0); }

.at-info__inner {
  max-width: var(--at-max);
  margin-inline: auto;
  padding: var(--at-header-h) var(--at-pad) 3rem;
}

.at-info__cols {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr);
  padding-top: clamp(1.25rem, 3vw, 2.5rem);
}
@media (min-width: 900px) {
  .at-info__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.at-info__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Kop met een gearceerde baan die de regel uitvult — dezelfde signatuur als
   boven de spotlight op de homepage. */
.at-info__head {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}
.at-info__head .at-rule { --rule-h: clamp(1.1rem, 2.2vw, 1.7rem); }

.at-info__title {
  flex: none;
  font-family: var(--at-font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1;
  letter-spacing: -.03em;
}

/* --- Het stramien -------------------------------------------------------- */
.at-info__group {
  padding-block: clamp(1rem, 2.2vw, 1.35rem);
  border-top: 1px solid var(--at-border);
}
.at-info__group:last-of-type { border-bottom: 1px solid var(--at-border); }

.at-info__label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  font-family: var(--at-font-body);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: var(--at-ls-label);
  text-transform: uppercase;
  color: var(--at-text-3);
}
.at-info__label .at-ico { width: 15px; height: 15px; color: currentColor; }

/* Het antwoord: adres en e-mailadres krijgen exact dezelfde behandeling. */
.at-info__value {
  font-family: var(--at-font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--at-text);
}

.at-info__link {
  display: inline-block;
  color: var(--at-accent);
  text-decoration: none;
  text-underline-offset: .2em;
  text-decoration-thickness: 2px;
  transition: color .3s var(--at-ease-out);
}
.at-info__link:hover {
  color: var(--at-accent);
  text-decoration-color: var(--at-accent);
}

.at-info__body {
  margin-top: .5rem;
  font-family: var(--at-font-body);
  font-size: .95rem;
  line-height: 1.55;
  color: var(--at-text-2);
  text-wrap: pretty;
}

.at-info__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}

/* Socials met hun naam erbij: op een telefoon is een los icoontje te weinig
   houvast om op te durven tikken. */
.at-info__socials {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.at-info__socials a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  border-radius: var(--at-r-sm);
  box-shadow: inset 0 0 0 1px var(--at-border);
  font-family: var(--at-font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--at-text);
  transition:
    color .3s var(--at-ease-out),
    box-shadow .3s var(--at-ease-out),
    transform .3s var(--at-ease-out);
}
.at-info__socials a:hover {
  color: var(--at-accent);
  box-shadow: inset 0 0 0 1px var(--at-accent);
  transform: translate(2px, -2px);
}
.at-info__socials .at-social-icon { width: 16px; height: 16px; }

/* De knop naar de assistent zakt naar de onderkant van zijn kolom, zodat de
   twee kolommen gelijk eindigen. */
.at-info__col .at-ask { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 900px) {
  .at-info__col .at-ask { margin-top: auto; }
}

/* --------------------------------------------------------------------------
   DE ASSISTENT — een eigen venster

   Bewust géén schermvullende overlay zoals de twee panelen: dit is een
   gesprek dat je ernaast openhoudt, niet een plek waar je heen navigeert.
   Op een telefoon pakt hij wel bijna het hele scherm, want daar valt niets
   naast te zetten.
   -------------------------------------------------------------------------- */
.at-chat {
  position: fixed;
  inset: 0;
  z-index: 60;
}
.at-chat[hidden] { display: none; }

.at-chat__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  opacity: 0;
  transition: opacity .4s var(--at-ease);
}
.at-chat.is-open .at-chat__backdrop { opacity: 1; }

.at-chat__panel {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  max-height: min(90vh, 780px);
  height: 100%;
  margin-inline: auto;
  border-radius: var(--at-r) var(--at-r) 0 0;
  overflow: hidden;
  background: var(--at-bg-2);
  box-shadow: inset 0 0 0 1px var(--at-border-2), 0 -20px 60px rgba(0, 0, 0, .5);
  /* Komt van onderen omhoog — de beweging van een chat die opengaat. */
  transform: translateY(101%);
  transition: transform .5s var(--at-ease);
}
.at-chat.is-open .at-chat__panel { transform: none; }

@media (min-width: 760px) {
  .at-chat__panel {
    inset: auto clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem) auto;
    width: min(30rem, calc(100vw - 3rem));
    height: min(80vh, 720px);
    margin-inline: 0;
    border-radius: var(--at-r);
  }
}

.at-chat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: none;
  padding: 1rem clamp(1rem, 3vw, 1.4rem);
  border-bottom: 1px solid var(--at-border);
}

.at-chat__title {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--at-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.02em;
}
.at-chat__title .at-ico { width: 20px; height: 20px; }

.at-chat__close {
  position: relative;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: var(--at-r-sm);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--at-border);
  cursor: pointer;
  transition: box-shadow .3s var(--at-ease-out), background-color .3s var(--at-ease-out);
}
.at-chat__close:hover { background: var(--at-surface); box-shadow: inset 0 0 0 1px var(--at-border-2); }
.at-chat__close span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  margin-left: -7px;
  background: var(--at-text);
}
.at-chat__close span:first-child { transform: rotate(45deg); }
.at-chat__close span:last-child  { transform: rotate(-45deg); }

/* Het widget vult dit vak; het heeft zelf een hoogte van 100% nodig. */
.at-chat__embed {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
}
.at-chat__embed.is-ready { display: block; }

.at-chat__wait {
  font-family: var(--at-font-body);
  font-size: .85rem;
  color: var(--at-text-2);
}
.at-chat__embed.is-ready .at-chat__wait { display: none; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.at-footer {
  /* Eén maat voor de ruimte tussen de kolommen: de knop op de regel van het
     logo rekent ermee om op dezelfde kantlijnen uit te komen. */
  --at-footer-gap: clamp(2rem, 4vw, 3rem);

  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) 2rem;
  border-top: 1px solid var(--at-border);
  color: var(--at-text-2);
  font-size: .875rem;
}

/* Gearceerde baan die vanaf de scheidingslijn uitdooft. */
.at-footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(2rem, 5vw, 3.5rem);
  background-image: var(--at-hatch);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
          mask-image: linear-gradient(to bottom, #000, transparent);
  pointer-events: none;
}

/* --- Claimregel ---------------------------------------------------------- */
.at-footer__claim {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.at-footer__logo { height: clamp(52px, 7vw, 74px); width: auto; }
.at-footer__claim .at-rule { --rule-h: clamp(1.6rem, 3vw, 2.6rem); }

/* Vanaf desktop staat de assistent op deze regel mee. Dan gaat de claimregel
   op hetzelfde stramien als de kolommen eronder: de knop krijgt gewoon een
   paar kolommen toegewezen en de kantlijnen liggen per definitie gelijk —
   geen som die uit de pas kan gaan lopen. */
@media (min-width: 901px) {
  .at-footer__claim {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--at-footer-gap);
    align-items: center;
  }
  .at-footer__brand { justify-self: start; }
}

@media (min-width: 1020px) {
  .at-footer__claim { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* --- Kolommen ------------------------------------------------------------ */
.at-footer__grid {
  display: grid;
  gap: var(--at-footer-gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 620px) {
  .at-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1020px) {
  .at-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.at-footer__head {
  margin-bottom: 1.1rem;
  font-family: var(--at-font-body);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: var(--at-ls-label);
  text-transform: uppercase;
  color: var(--at-text-3);
}

.at-footer__address {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  font-style: normal;
  line-height: 1.5;
}
.at-footer__mail {
  margin-top: .5rem;
  color: var(--at-text);
  width: fit-content;
}
.at-footer__mail:hover { color: var(--at-accent); }

.at-footer__text {
  max-width: 30ch;
  line-height: 1.55;
}

.at-footer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.25rem;
}
.at-footer__actions .at-btn {
  font-size: .72rem;
  padding: .75em 1.1em;
}

.at-footer__list {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin-top: 1rem;
}
.at-footer__list--social { margin-top: 0; }

/* Foundation: twee knoppen onder elkaar, elk zo breed als hun eigen tekst. */
.at-footer__list--buttons {
  align-items: flex-start;
  gap: .5rem;
}
.at-footer__list--buttons .at-btn {
  font-size: .72rem;
  padding: .75em 1.1em;
}

/* Linkregel met een streepje dat vanaf links inloopt. */
.at-footer__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem 0;
  color: var(--at-text);
  transition: color .3s var(--at-ease-out), padding-left .35s var(--at-ease-out);
}
.at-footer__link::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: .3rem;
  width: 0;
  height: 1px;
  background: var(--at-accent);
  transition: width .35s var(--at-ease-out);
}
.at-footer__link:hover { color: var(--at-accent); }
.at-footer__link:hover::before { width: 1.4rem; }
.at-footer__link:hover { padding-left: 1.9rem; }
.at-footer__link .at-social-icon,
.at-footer__link .at-btn__arrow,
.at-footer__link .at-pin {
  width: 1em;
  height: 1em;
  flex: none;
  opacity: .55;
  transition: opacity .3s ease, transform .3s var(--at-ease-out);
}
.at-footer__link:hover .at-social-icon,
.at-footer__link:hover .at-btn__arrow,
.at-footer__link:hover .at-pin { opacity: 1; transform: translate(1px, -1px); }

/* --- Juridische regel ---------------------------------------------------- */
.at-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--at-border);
  font-size: .72rem;
  color: var(--at-text-3);
}
.at-footer__menu {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.35rem;
}
.at-footer__menu a { transition: color .3s var(--at-ease-out); }
.at-footer__menu a:hover { color: var(--at-text); }
.at-footer__copy { margin: 0; }

/* --------------------------------------------------------------------------
   MAIN
   -------------------------------------------------------------------------- */
.at-main { padding-top: var(--at-header-h); }

/* Een pagina-eigen beeldmerk in de balk (ADE, Pride). Breder dan het gewone
   torentje, dus op hoogte begrenzen en niet op breedte. */
.at-header__logo--custom {
  width: auto;
  height: clamp(34px, 4.4vw, 48px);
  max-width: min(46vw, 260px);
  object-fit: contain;
  object-position: left center;
}

/* --------------------------------------------------------------------------
   COOKIEBANNER

   Complianz bouwt zijn eigen stijlbestand op basis van kleuren die je in de
   beheeromgeving kiest. Dat bestand is hier onbruikbaar: het staat in de
   gedeelde uploads-map en de oude site schrijft er ook naartoe — wie het laatst
   opslaat, wint. Gelukkig draait die hele banner op variabelen, dus we zetten
   ze hier gewoon zelf. Dan hangt het uiterlijk aan ons thema en niet aan een
   bestand dat iemand anders kan overschrijven.

   :root:root in plaats van :root — dezelfde selector, maar zwaarder, zodat het
   niet uitmaakt of hun bestand ná het onze wordt ingeladen.
   -------------------------------------------------------------------------- */
:root:root {
  --cmplz_banner_background_color: var(--at-surface);
  --cmplz_banner_border_color: var(--at-border-2);
  --cmplz_text_color: var(--at-text);
  --cmplz_hyperlink_color: var(--at-accent);

  --cmplz_button_accept_background_color: var(--at-accent);
  --cmplz_button_accept_border_color: var(--at-accent);
  --cmplz_button_accept_text_color: var(--at-accent-ink);

  /* Weigeren en instellingen als spookknop, net als elders op de site: even
     goed vindbaar, zonder om aandacht te schreeuwen. */
  --cmplz_button_deny_background_color: transparent;
  --cmplz_button_deny_border_color: var(--at-border-2);
  --cmplz_button_deny_text_color: var(--at-text);
  --cmplz_button_settings_background_color: transparent;
  --cmplz_button_settings_border_color: var(--at-border-2);
  --cmplz_button_settings_text_color: var(--at-text);

  --cmplz_slider_active_color: var(--at-accent);
  --cmplz_slider_inactive_color: var(--at-border-2);
  --cmplz_slider_bullet_color: var(--at-text);

  /* De diagonale hoek van de huisstijl. Ook dit gaat via hun variabele en niet
     via een eigen regel: hun bestand laadt ná het onze, en bij gelijke
     specificiteit wint de laatste. */
  --cmplz_banner_border_radius: 0 14px 0 14px;
  --cmplz_button_border_radius: 0 10px 0 10px;
}

/* Deze twee staan als vaste kleur in hun bestand en volgen dus geen variabele. */
.cmplz-cookiebanner .cmplz-categories .cmplz-category {
  background-color: rgba(255, 255, 255, .04);
}
.cmplz-cookiebanner .cmplz-category-header .cmplz-always-active {
  color: var(--at-accent);
}

.cmplz-cookiebanner { font-family: var(--at-font-body); }