:root{
  --navy:#0A2540;
  --navy-2:#123754;
  --teal:#1D5E58;
  --green:#3E9C4F;
  --accent:#1F6B4E;
  --ground:#FCFDFD;
  --ground-2:#F0F4F6;
  --ink:#12283C;
  --ink-soft:#3E5468;
  --muted:#7B90A1;
  --faint:#9BAEBC;
  --line:#E5EBEF;
  --panel-text:#FFFFFF;
  --shadow:0 2px 4px rgba(10,37,64,.05), 0 26px 60px -34px rgba(10,37,64,.55);
}

*{box-sizing:border-box;}

html,body{height:100%;}

body{
  margin:0;
  background:var(--ground);
  background-image:radial-gradient(130% 70% at 50% 0%, var(--ground-2) 0%, var(--ground) 58%);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit;}
a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px;}
img{max-width:100%;}

/* ============ shell ============ */
.page{
  min-height:100dvh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  align-items:center;
  justify-items:center;
  max-width:1340px;
  margin:0 auto;
  padding:clamp(18px,3.6vh,40px) clamp(18px,3vw,40px) clamp(12px,2vh,22px);
  gap:clamp(14px,2.6vh,30px);
}

.masthead{display:grid;justify-items:center;gap:clamp(8px,1.4vh,14px);}
.masthead img{height:clamp(50px,10vh,96px);width:auto;display:block;}
.masthead .rule{
  width:clamp(190px,26vw,340px);height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent 0%,var(--navy) 22%,var(--teal) 62%,var(--green) 100%);
}

/* ============ three columns ============ */
.trio{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.42fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(16px,2.6vw,36px);
}

.side{
  display:grid;justify-items:center;text-align:center;
  gap:clamp(10px,1.8vh,18px);
  text-decoration:none;
  padding:10px 4px;
  border-radius:12px;
  transition:transform .2s ease;
}
.side:hover{transform:translateY(-2px);}
.side img{height:clamp(66px,12.6vh,118px);width:auto;display:block;}
.side p{
  margin:0;color:var(--ink-soft);
  font-size:clamp(12.5px,1.66vh,14.5px);
  line-height:1.6;max-width:34ch;font-style:italic;
}
.side .go{
  font-size:clamp(12px,1.5vh,13.5px);font-weight:700;letter-spacing:.005em;
  color:var(--accent);display:inline-flex;align-items:center;gap:6px;
}
.side .go::after{content:"→";font-weight:600;transition:transform .2s ease;}
.side:hover .go::after{transform:translateX(3px);}

/* ============ centre panel ============ */
.panel{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:18px;
  padding:clamp(26px,5.4vh,56px) clamp(22px,3vw,52px);
  color:var(--panel-text);
  text-align:center;
  background:linear-gradient(145deg,var(--navy) 0%,var(--navy-2) 32%,var(--teal) 66%,var(--green) 100%);
  box-shadow:var(--shadow);
  display:grid;gap:clamp(12px,2.2vh,22px);
  align-content:center;
}
.panel::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:url("ahoro-mark.webp") center 54% / auto clamp(230px,58vh,520px) no-repeat;
  opacity:.2;
  filter:brightness(1.6);
}
.panel .eyebrow{
  margin:0;font-size:clamp(12px,1.6vh,14px);font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:rgba(255,255,255,.82);
}
.panel h1{
  margin:0;font-weight:700;
  font-size:clamp(24px,4.4vh,42px);
  letter-spacing:-.02em;line-height:1.1;text-wrap:balance;
}
.panel .say{
  margin:0 auto;max-width:46ch;
  font-size:clamp(13px,1.85vh,16px);line-height:1.6;
  color:rgba(255,255,255,.94);
}
.panel .say a{color:#FFFFFF;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45);}
.panel .say a:hover{border-bottom-color:#FFFFFF;}
.panel .tag{
  margin:0;font-weight:600;
  font-size:clamp(15px,2.4vh,23px);letter-spacing:-.01em;
  color:#FFFFFF;
}

/* ============ colofon ============ */
.colofon{
  width:100%;display:grid;justify-items:center;gap:6px;
  padding-top:clamp(8px,1.4vh,16px);
  border-top:1px solid var(--line);
  text-align:center;
}
.legal{
  margin:0;font-size:10.5px;line-height:1.75;letter-spacing:.02em;
  color:var(--faint);max-width:min(1040px,100%);transition:color .25s ease;
}
.colofon:hover .legal{color:var(--muted);}
.legal a{text-decoration:none;border-bottom:1px solid transparent;}
.legal a:hover{color:var(--accent);border-bottom-color:currentColor;}
.legal .sep{opacity:.5;padding:0 3px;}
.copyright{margin:0;font-size:10.5px;color:var(--faint);}
.contact{
  margin:0;display:flex;flex-wrap:wrap;justify-content:center;
  gap:2px 16px;font-size:12px;color:var(--ink-soft);
}
.contact a{text-decoration:none;border-bottom:1px solid var(--line);}
.contact a:hover{color:var(--accent);border-bottom-color:var(--accent);}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;}
}

/* ============ narrow ============ */
@media (max-width:900px){
  .trio{grid-template-columns:1fr;gap:18px;max-width:520px;}
  .panel{order:-1;}
  .side{
    grid-template-columns:auto 1fr;justify-items:start;text-align:left;
    gap:4px 16px;align-items:center;
  }
  .side img{height:52px;grid-row:span 2;}
  .side p{max-width:none;font-size:13px;}
  .page{min-height:100dvh;gap:16px;padding-top:20px;}
  .masthead img{height:52px;}
  .panel h1{font-size:24px;}
  .panel .say{font-size:13px;}
  .panel .tag{font-size:16px;}
}

@media (max-height:620px) and (min-width:901px){
  .panel .say{display:none;}
}

/* ============ subpagina's (privacy / cookies) ============ */
.doc{
  max-width:74ch;margin:0 auto;
  padding:clamp(26px,5vh,56px) clamp(20px,4vw,32px) clamp(40px,6vh,72px);
}
.doc .backlink{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;color:var(--accent);
  text-decoration:none;margin-bottom:clamp(18px,3vh,28px);
}
.doc .backlink::before{content:"←";}
.doc img.brand{height:52px;width:auto;display:block;margin-bottom:22px;}
.doc h1{font-size:clamp(24px,3.4vh,32px);letter-spacing:-.02em;margin:0 0 .2em;}
.doc .updated{margin:0 0 2em;color:var(--muted);font-size:12.5px;}
.doc h2{
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:2.2em 0 .6em;
}
.doc p, .doc li{color:var(--ink-soft);font-size:14.5px;line-height:1.65;}
.doc ul{padding-left:1.1em;margin:.4em 0;}
.doc li{margin:.3em 0;}
.doc a{color:var(--accent);}
.doc .colofon{margin-top:clamp(32px,5vh,56px);}