/* Asakim Plus, direction A "The road from dream to plan". Provisional tokens from the logo.
   Scope: only classes under .ap-* and the body class .ap-en, so existing pages are not changed. */
:root {
  --ap-teal: #00a9bf;
  --ap-teal-deep: #008a9a;
  --ap-ink: #616264;
  --ap-paper: #f7f5f0;
  --ap-line: #d9d6cd;
  --ap-max: 1120px;
}
.ap-page {
  background: var(--ap-paper);
  color: var(--ap-ink);
  line-height: 1.7;
}
.ap-page .ap-wrap {
  max-width: var(--ap-max);
  margin: 0 auto;
  padding: 0 16px;
}
.ap-page h1 { font-size: clamp(34px, 6vw, 64px); line-height: 1.15; font-weight: 800; color: var(--ap-ink); }
.ap-page h1 span { color: var(--ap-teal); }
.ap-page h2 { font-size: 26px; margin: 40px 0 12px; color: var(--ap-ink); }
.ap-page a { color: var(--ap-teal-deep); }
.ap-btn {
  display: inline-block;
  background: var(--ap-teal);
  color: #fff !important;
  padding: 14px 26px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 700;
}
.ap-btn:hover { background: var(--ap-teal-deep); }
.ap-road { position: relative; margin: 56px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ap-road::before { content: ""; position: absolute; top: 14px; inset-inline: 0; height: 2px; background: var(--ap-teal); }
.ap-road li { position: relative; padding-top: 44px; }
.ap-road li::before { content: ""; position: absolute; top: 6px; inset-inline-start: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--ap-paper); border: 3px solid var(--ap-teal); }
.ap-road small { display: block; color: var(--ap-teal-deep); font-weight: 700; }
@media (max-width: 760px) {
  .ap-road { grid-template-columns: 1fr; gap: 28px; }
  .ap-road::before { top: 0; bottom: 0; inset-inline-start: 14px; inset-inline-end: auto; width: 2px; height: auto; }
  .ap-road li { padding: 0 0 0 44px; }
  .ap-road li::before { top: 4px; inset-inline-start: 5px; }
}
@media (prefers-reduced-motion: reduce) { .ap-page * { transition: none !important; animation: none !important; } }

/* Header and footer injected by functions.php */
.ap-header{background:var(--ap-paper);border-bottom:1px solid var(--ap-line);padding:18px 0}
.ap-header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ap-logo{height:52px;width:auto;display:block}
.ap-nav{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.ap-nav a{color:var(--ap-ink);text-decoration:none;font-size:15px}
.ap-nav a:hover{color:var(--ap-teal-deep);text-decoration:underline}
.ap-nav .ap-lang{color:var(--ap-teal-deep);border:1px solid var(--ap-teal);padding:5px 11px;border-radius:4px}
.ap-footer{border-top:1px solid var(--ap-line);margin-top:56px;padding:32px 0;font-size:15px;background:var(--ap-paper);color:var(--ap-ink)}
.ap-footer a{color:var(--ap-ink)}
.ap-wrap{max-width:var(--ap-max);margin:0 auto;padding:0 16px}
@media (max-width:760px){.ap-logo{height:44px}.ap-nav{gap:12px}.ap-nav a{font-size:14px}}