/* Glyph Portal © 2026 Christian Katzmann. MIT. Origin: https://ktzm.dk.
   WordPress adaptation — one scroll sequence on the homepage. */
.sg-portal {
  --sgp-h: 660px;
  --sgp-travel: 750px;
  --sgp-top: 88px;
  position: relative;
  isolation: isolate;
  margin-block: 0 !important;
  background: #f5faff;
  color: #10243f;
}
.sg-portal__pin { position: relative; overflow: clip; }
.sg-portal__opening { padding: 64px 24px 48px; text-align: center; }
.sg-portal .sg-portal__eyebrow { margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; line-height: 1.7; }
.sg-portal .sg-portal__poster { margin: 24px 0; font: 900 clamp(56px, 15vw, 220px)/1 Arial, sans-serif; letter-spacing: -.025em; background: linear-gradient(120deg,#087cf0,#123759 55%,#168361); color: #087cf0; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.sg-portal .sg-portal__support { font-size: clamp(.9rem,1.5vw,1.1rem); color: #526478; line-height: 1.7; margin: 0; }
.sg-portal__scene { display: none; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sg-portal__caption { display: none; }
.sg-portal .sg-portal__content { position: relative; padding: clamp(36px,5vw,72px) max(24px,7vw); background: linear-gradient(135deg,#0757aa,#123759 50%,#0b6049); color: #fff; }
.sg-portal .sg-portal__content > .sg-portal__eyebrow { color: #c6e8ff; }
.sg-portal .sg-portal__content h2 { color: #fff; margin: 24px 0 32px; font-size: clamp(2.25rem,5.3vw,4.5rem); line-height: 1.03; font-weight: 800; letter-spacing: -.045em; }
.sg-portal .sg-portal__content h2 em { color: #85edc1; font-style: normal; }
.sg-portal__levers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(20px,3.5vw,56px); }
.sg-portal .sg-portal__levers a { position: relative; display: grid; gap: 9px; border-top: 1px solid #ffffff55; padding: 18px 24px 8px 0; color: #fff; text-decoration: none; text-underline-offset: 4px; }
.sg-portal .sg-portal__levers a:hover strong { text-decoration: underline; }
.sg-portal .sg-portal__number { font-size: .65rem; font-weight: 800; letter-spacing: .12em; color: #b9e7ff; }
.sg-portal .sg-portal__levers strong { font-size: 1rem; line-height: 1.4; color: #fff; }
.sg-portal .sg-portal__levers a > span:last-of-type { color: #d8e7f1; font-size: .88rem; line-height: 1.65; }
.sg-portal__levers i { position: absolute; right: 0; top: 18px; font-style: normal; color: #85edc1; }
.sg-portal a:focus-visible { outline: 3px solid #85edc1; outline-offset: 6px; border-radius: 2px; }
#sg-portal-suite { height: 0; margin: 0 !important; scroll-margin-top: 104px; }
@media (min-width: 783px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .sg-portal[data-motion="on"] { height: calc(var(--sgp-h) + var(--sgp-travel)); }
  .sg-portal[data-motion="on"] .sg-portal__pin { position: sticky; top: var(--sgp-top); height: var(--sgp-h); }
  .sg-portal[data-motion="on"] .sg-portal__scene { display: block; }
  .sg-portal[data-motion="on"] .sg-portal__poster { visibility: hidden; }
  .sg-portal[data-motion="on"] .sg-portal__opening { position: absolute; inset: 0; padding: 0; opacity: var(--sgp-caption,1); pointer-events: none; }
  .sg-portal[data-motion="on"] .sg-portal__opening .sg-portal__eyebrow { position: absolute; top: 14%; width: 100%; }
  .sg-portal[data-motion="on"] .sg-portal__support { position: absolute; top: 69%; width: 100%; }
  .sg-portal[data-motion="on"] .sg-portal__caption { display: flex; position: absolute; inset: auto 7% 6%; align-items: center; justify-content: space-between; font-size: .78rem; gap: 16px; opacity: var(--sgp-caption,1); }
  .sg-portal__hint { color: #526478; }
  .sg-portal__hint > span { padding-left: 16px; }
  .sg-portal .sg-portal__skip { color: #10243f; display: inline-flex; align-items: center; gap: 18px; min-height: 44px; padding: 0 16px; border: 1px solid #bdd8ef; border-radius: 99px; background: #ffffffd9; text-decoration: none; }
  .sg-portal[data-motion="on"] .sg-portal__content { box-sizing: border-box; position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; background: transparent; opacity: var(--sgp-reveal,0); }
}
@media (max-width: 782px) {
  .sg-portal__levers { grid-template-columns: 1fr; gap: 18px; }
  .sg-portal__opening { padding: 40px 20px 32px; }
  .sg-portal .sg-portal__content { padding: 36px 24px; }
  .sg-portal .sg-portal__content h2 { margin-block: 20px 28px; }
}