/* Aestimo Office — site.css
   Responsieve laag over de design-markup (inline styles uit het ontwerp).
   Het ontwerp is de wet op desktop; hieronder alleen stapelen en schalen. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; }
a { transition: opacity .3s cubic-bezier(.16,1,.3,1); }
a:hover { opacity: .85; }

/* Kaart-hover uit het ontwerp: -2px met diepere schaduw */
[style*="border-radius:18px"][style*="box-shadow"] {
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ── Tablet en smaller: grids stapelen, header mag wrappen ── */
@media (max-width: 880px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  header > div { height: auto !important; padding: 14px 20px !important; flex-wrap: wrap; row-gap: 10px; }
  header nav { gap: 14px 18px !important; flex-wrap: wrap; }
}

/* ── Mobiel: maten en marges terugschalen ── */
@media (max-width: 760px) {
  [style*="padding:0 32px"]  { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding:100px 32px"], [style*="padding:96px 32px"], [style*="padding:90px 32px"],
  [style*="padding:76px 32px"], [style*="padding:80px 32px"], [style*="padding:64px 32px"],
  [style*="padding:104px 32px"], [style*="padding:108px 32px"]
    { padding-left: 20px !important; padding-right: 20px !important; }

  [style*="font-size:52px"] { font-size: 34px !important; }
  [style*="font-size:48px"] { font-size: 32px !important; }
  [style*="font-size:46px"] { font-size: 31px !important; }
  [style*="font-size:44px"] { font-size: 30px !important; }
  [style*="font-size:40px"] { font-size: 28px !important; }
  [style*="font-size:36px"] { font-size: 26px !important; }
  [style*="font-size:34px"] { font-size: 25px !important; }

  header nav a[href="#inloggen"], header nav span[style*="width:1px"] { display: none; }
  footer [style*="display:flex"] { flex-wrap: wrap; gap: 14px 22px !important; }
}

/* ── Mobiele overloop-fixes ── */
@media (max-width: 760px) {
  /* rapport-covers verhoudingsgewijs verkleinen */
  [style*="width:150px"][style*="height:204px"] { zoom: .66; }
  /* haarlijn-scheiders in statistiekrijen verbergen */
  [style*="width:1px"][style*="height:52px"] { display: none; }
  .stats-rij { flex-wrap: wrap; row-gap: 22px; justify-content: center; }
}

/* ── Navigatie: hamburger onder 1024px ── */
.ao-burger { display: none; }
@media (max-width: 880px) {
  header nav { display: none !important; }
  header nav.ao-open {
    display: flex !important; position: fixed; inset: 0 0 auto 0; top: 0;
    flex-direction: column; align-items: flex-start; gap: 6px !important;
    background: linear-gradient(165deg, #2C3D2E, #1E3024);
    padding: 86px 28px 30px !important; z-index: 60;
    box-shadow: 0 30px 60px rgba(15,22,12,.45);
  }
  header nav.ao-open a { font-size: 17px !important; padding: 10px 0 !important; }
  header nav.ao-open span[style*="width:1px"] { display: none; }
  .ao-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; background: none; border: 0; cursor: pointer;
    position: relative; z-index: 70; padding: 8px;
  }
  .ao-burger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .3s; }
  .ao-burger.ao-x span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .ao-burger.ao-x span:nth-child(2) { opacity: 0; }
  .ao-burger.ao-x span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ── Scroll-reveal ── */
.rv-init { opacity: 0; transform: translateY(18px); }
.rv-in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }

/* ── Zwevende demo-knop ── */
.ao-pill {
  position: fixed; right: 22px; bottom: 22px; z-index: 55;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 14px;
  color: #1E3024; text-decoration: none;
  background: linear-gradient(135deg, #CDB079, #A89058);
  padding: 13px 22px; border-radius: 999px;
  box-shadow: 0 16px 36px rgba(15,22,12,.4);
  opacity: 0; transform: translateY(20px); pointer-events: none;
  transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
}
.ao-pill.ao-zichtbaar { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .rv-init { opacity: 1; transform: none; } }

/* ── Rapporten-pagina: laatste mobiele fixes ── */
@media (max-width: 900px) {
  .bst-wrap { grid-template-columns: minmax(0,1fr) !important; }
}
@media (max-width: 760px) {
  .bst-chip { display: block; margin: 5px 0 0; }
  .bst-opt-p { text-align: right; }
  [style*="flex:none"][style*="gap:14px"] { flex: 0 1 auto !important; flex-wrap: wrap; row-gap: 6px; }
  [style*="justify-content:space-between"][style*="align-items:center"] { flex-wrap: wrap; row-gap: 14px; }
}

/* ── 10/10-polish: hover en focus ── */
a[style*="linear-gradient(135deg"] { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1) !important; }
a[style*="linear-gradient(135deg"]:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(196,168,114,.45) !important; opacity: 1; }
.ao-pill:hover { transform: translateY(-2px); box-shadow: 0 20px 42px rgba(15,22,12,.5); }
:focus-visible { outline: 2px solid #C4A872; outline-offset: 3px; border-radius: 4px; }
header nav a:hover { opacity: 1; color: #fff !important; }
::selection { background: rgba(196,168,114,.35); color: #1E3024; }

/* ── Tussenmaat: kleine laptops en tablets liggend (881-1150px) ── */
@media (min-width: 881px) and (max-width: 1150px) {
  [style*="padding:0 32px"] { padding-left: 26px !important; padding-right: 26px !important; }
  [style*="font-size:52px"] { font-size: 44px !important; }
  [style*="font-size:46px"], [style*="font-size:48px"] { font-size: 40px !important; }
  [style*="gap:60px"] { gap: 34px !important; }
  [style*="gap:64px"] { gap: 36px !important; }
  header nav { gap: 18px !important; }
  .hm-side { width: 148px; }
}

/* ── Sectie "Wat Office doet": kaarten op sage ── */
.wat-kaart{
  background:rgba(252,251,247,.72);
  border:1px solid rgba(196,168,114,.22);
  border-radius:18px;
  padding:26px 24px 24px;
  backdrop-filter:blur(2px);
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1), background .4s;
}
.wat-kaart:hover{
  transform:translateY(-3px);
  background:#FCFBF7;
  box-shadow:0 18px 44px rgba(30,48,36,.10);
}
@media (max-width:820px){ .wat-grid{grid-template-columns:1fr !important} }

/* ── Scroll-aanwijzing onder de hero ── */
.scroll-cue{
  position:absolute; left:max(32px,calc(50% - 540px)); bottom:30px; transform:none;
  display:flex; flex-direction:row; align-items:center; gap:12px;
  text-decoration:none; z-index:6; opacity:.85;
  transition:opacity .3s, transform .3s cubic-bezier(.16,1,.3,1);
}
.scroll-cue:hover{ opacity:1; transform:translateY(3px); }
.sc-tekst{
  font-family:'Lora',Georgia,serif; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; font-weight:600; color:rgba(255,255,255,.7);
}
.sc-pijl{
  width:13px; height:13px; border-right:1.5px solid #C4A872; border-bottom:1.5px solid #C4A872;
  transform:rotate(45deg); animation:scWip 2.4s ease-in-out infinite;
}
@keyframes scWip{
  0%,100%{ transform:rotate(45deg) translate(0,0); opacity:.5 }
  50%    { transform:rotate(45deg) translate(3px,3px); opacity:1 }
}
@media (max-width:760px){ .scroll-cue{ bottom:14px } .sc-tekst{ display:none } }
@media (prefers-reduced-motion: reduce){ .sc-pijl{ animation:none } }