/* The site frame (Phase 2): header behaviour, More sheet, footer, preloader, page transition.
   The header island and the tab bar themselves are in base.css. */

/* ---------- Header island: always in place, sliding lime ink, reading progress ---------- */
.hd__in { position: relative; }
.hd__nav { position: relative; }
.hd__ink { position: absolute; left: 0; bottom: 4px; width: var(--w, 0px); height: 3px; border-radius: 2px; background: var(--lime); transform: translateX(var(--x, 0px)) skewX(-24deg); opacity: 0; pointer-events: none; transition: transform .45s var(--ease-out), width .45s var(--ease-out), opacity .25s; }
.hd__nav.has-ink .hd__ink { opacity: 1; }
.hd__prog { position: absolute; inset: auto 34px -1px; height: 2px; border-radius: 2px; background: var(--lime); transform: scaleX(var(--progress, 0)); transform-origin: 0 50%; pointer-events: none; }
[dir="rtl"] .hd__prog { transform-origin: 100% 50%; }
.hd__cta[aria-current] { box-shadow: 0 0 0 3px rgba(255, 255, 255, .35), 0 10px 30px -10px rgba(128, 188, 0, .7); }

/* ---------- More sheet ---------- */
body.is-locked { overflow: hidden; }
.sheet { position: fixed; inset: 0; z-index: var(--z-sheet); }
.sheet[hidden] { display: none; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(2, 12, 26, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .35s; }
.sheet__panel { position: absolute; inset: auto 0 0; max-height: 88vh; max-height: 88svh; overflow-y: auto; overscroll-behavior: contain; padding: 10px 14px calc(18px + var(--safe-bottom)); border-radius: 28px 28px 0 0; background: linear-gradient(180deg, #0B3A6E 0%, #062B55 34%, #041E3D 100%); border-top: 1px solid var(--glass-line); box-shadow: 0 -30px 80px -20px rgba(0, 0, 0, .7); transform: translateY(102%); transition: transform .42s var(--ease-out); outline: none; }
.sheet.is-open .sheet__scrim { opacity: 1; }
.sheet.is-open .sheet__panel { transform: none; }
.sheet__grip { display: block; width: 44px; height: 5px; margin: 0 auto 6px; border-radius: 3px; background: rgba(255, 255, 255, .3); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 8px; }
.sheet__head h2 { font-size: 1.25rem; font-weight: 800; }
.sheet__x { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1px solid var(--glass-line); }
.sheet__links { list-style: none; display: grid; gap: 2px; }
.sheet__links a { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 8px; border-radius: 18px; font-weight: 700; font-size: 1.0625rem; }
.sheet__links a:active { background: rgba(255, 255, 255, .08); }
.sheet__links a[aria-current] { background: rgba(128, 188, 0, .16); }
.sheet__links i { display: grid; place-items: center; width: 42px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: var(--lime); transform: skewX(-24deg); flex: none; margin-inline: 6px 2px; }
.sheet__links i .ic { transform: skewX(24deg); }
.sheet__links a > .ic { margin-inline-start: auto; color: var(--ink-on-dark-mute); }
.sheet__foot { display: grid; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--glass-line); }
.sheet__row { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 16px; color: var(--ink-on-dark-soft); font-weight: 600; font-size: .9375rem; }
.sheet__row .ic { color: var(--lime); }
.calm .sheet__panel, .calm .sheet__scrim { transition: none; }

/* ---------- Footer ---------- */
.ft { position: relative; isolation: isolate; background: var(--deep); color: #fff; padding: clamp(64px, 7vw, 104px) var(--gutter) 0; }
/* the diagonal cut rises over the end of whatever section comes before */
.ft::before { content: ""; position: absolute; z-index: -2; inset: auto 0 calc(100% - 1px); height: clamp(48px, 7vw, 104px); background: var(--deep); clip-path: polygon(0 100%, 100% 0, 100% 100%); pointer-events: none; }
.ft::after { content: ""; position: absolute; inset: auto 0 calc(100% - 1px); height: clamp(48px, 7vw, 104px); background: var(--lime); clip-path: polygon(0 calc(100% - 5px), 100% 0, 100% 5px, 0 100%); pointer-events: none; }
/* the pattern starts right under the lime line: it reaches up into the slanted top, cut along the same slant */
.ft__field { --top: clamp(48px, 7vw, 104px); position: absolute; inset: calc(1px - var(--top)) 0 0; z-index: -1; clip-path: polygon(0 var(--top), 100% 0, 100% 100%, 0 100%); overflow: hidden; background: url("../img/pattern-lozenge.svg") 0 0 / 352px auto; opacity: .9; -webkit-mask-image: radial-gradient(110% 120% at 100% 0%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 78%); mask-image: radial-gradient(110% 120% at 100% 0%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 78%); }
[dir="rtl"] .ft__field { -webkit-mask-image: radial-gradient(110% 120% at 0% 0%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 78%); mask-image: radial-gradient(110% 120% at 0% 0%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 78%); }
.ft__field.is-live { background: none; }
.ft__field canvas { display: block; width: 100%; height: 100%; }
.ft__grid { max-width: var(--container); margin-inline: auto; display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1.35fr; gap: 40px; align-items: start; }
.ft__brand { display: grid; gap: 18px; }
.ft__brand img { height: 52px; width: auto; }
.ft__brand p { max-width: 38ch; color: var(--ink-on-dark-soft); font-size: .9375rem; }
.ft__col h2 { margin-bottom: 14px; font-size: .8125rem; font-weight: 700; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-on-dark-mute); }
.ft__col ul { list-style: none; display: grid; gap: 4px; }
.ft__col a, .ft__col li > span { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; color: var(--ink-on-dark-soft); font-weight: 600; font-size: .9375rem; transition: color .2s, translate .3s var(--ease-out); }
.ft__col a:hover { color: #fff; translate: 4px 0; }
[dir="rtl"] .ft__col a:hover { translate: -4px 0; }
.ft__col a[aria-current] { color: var(--lime-glow); }
.ft__contact .ic { color: var(--lime); }
.ft__cta { display: grid; gap: 10px; justify-items: start; padding: 24px; border-radius: 24px; }
.ft__cta h2 { font-size: 1.1875rem; font-weight: 800; line-height: 1.3; }
.ft__cta p { color: var(--ink-on-dark-soft); font-size: .9375rem; }
.ft__cta .btn { margin-top: 6px; }
.ft__bar { max-width: var(--container); margin: clamp(40px, 5vw, 64px) auto 0; padding: 22px 0 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; border-top: 1px solid var(--glass-line); font-size: .8125rem; color: var(--ink-on-dark-mute); }
.ft__bar ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.ft__bar a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink-on-dark-soft); font-weight: 600; }
.ft__bar a:hover { color: #fff; }
@media (max-width: 1000px) { .ft__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .ft__grid { grid-template-columns: 1fr; gap: 32px; }
  .ft__brand img { height: 44px; }
  .ft__bar { padding-bottom: calc(104px + var(--safe-bottom)); }
}

/* ---------- Preloader (html.pre-on is set before first paint, removed by frame.js) ---------- */
.pre { display: none; }
.pre-on .pre { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 26px; background: radial-gradient(70% 60% at 50% 45%, #0D427C 0%, #062B55 45%, #041E3D 100%); animation: pre-out .75s var(--ease-in-out) 1.45s forwards; }
.pre img { width: min(230px, 56vw); height: auto; animation: pre-logo .8s var(--ease-out) both; }
.pre__loz { display: flex; gap: 10px; }
.pre__loz i { position: relative; width: 46px; height: 14px; border-radius: 4px; background: rgba(255, 255, 255, .12); transform: skewX(-24deg); overflow: hidden; }
.pre__loz i::after { content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: 0 50%; animation: pre-fill .4s var(--ease-out) forwards; }
.pre__loz i:nth-child(1)::after { background: #2C63A6; animation-delay: .25s; }
.pre__loz i:nth-child(2)::after { background: #fff; animation-delay: .55s; }
.pre__loz i:nth-child(3)::after { background: var(--lime); animation-delay: .85s; }
@keyframes pre-logo { from { opacity: 0; transform: translateY(14px); } }
@keyframes pre-fill { to { transform: scaleX(1); } }
@keyframes pre-out { from { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 140%); } to { clip-path: polygon(0 0, 100% 0, 100% -40%, 0 0); } }

/* ---------- Page transition ---------- */
.pt { position: fixed; inset: 0; z-index: 190; overflow: hidden; pointer-events: none; visibility: hidden; }
.pt i { position: absolute; inset: 0 -45%; background: linear-gradient(90deg, var(--lime) 0, var(--lime) 16px, #041E3D 16px); transform: translateX(112%) skewX(-24deg); transition: transform .42s var(--ease-in-out); }
.pt.is-out { visibility: visible; }
.pt.is-out i { transform: translateX(0) skewX(-24deg); }
.pt-arrive .pt { visibility: visible; }
.pt-arrive .pt i { transform: translateX(0) skewX(-24deg); transition: none; animation: pt-in .6s var(--ease-in-out) .08s forwards; }
@keyframes pt-in { to { transform: translateX(-112%) skewX(-24deg); } }