/*
 | The company frame around the index: header, footer, and the few pieces the
 | standalone product added (consent, honeypot, progress steps, report form).
 | The index's own screens keep their stylesheet (mpi.css).
 */
html, body { margin: 0; }
body.site {
    background: #F6EEDC;
    color: #0A3A4A;
    font-family: "Cairo", system-ui, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body.site > .mz-root { flex: 1 0 auto; }

.site-skip { position: absolute; inset-inline-start: -9999px; }
.site-skip:focus { inset-inline-start: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; z-index: 10; border-radius: 8px; }

.site-head { background: #0A3A4A; color: #F6EEDC; }
.site-head-in {
    max-width: 72rem; margin: 0 auto; padding: .75rem 1rem;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem;
}
.site-brand { display: flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; min-width: 0; }
.site-brand img { border-radius: 8px; background: #F6EEDC; flex: none; }
.site-brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.site-brand-name { font-weight: 700; font-size: 1.1rem; }
.site-brand-by { font-size: .8rem; color: #CFE2E0; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; font-weight: 600; font-size: .95rem; }
.site-nav a { color: #F6EEDC; text-decoration: none; padding: .35rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a.is-current { border-bottom-color: #E9B622; }
.site-nav a:focus-visible { outline: 2px solid #E9B622; outline-offset: 3px; }
.site-lang { border: 1px solid rgba(246, 238, 220, .5) !important; border-radius: 999px; padding: .25rem .8rem !important; }

.site-foot { background: #072C38; color: #CFE2E0; margin-top: 2rem; }
.site-foot-in { max-width: 72rem; margin: 0 auto; padding: 1.25rem 1rem 1.5rem; font-size: .9rem; }
.site-foot-in p { margin: 0 0 .35rem; }
.site-foot a { color: #F6EEDC; }
.site-foot-small { font-size: .8rem; color: #9FBFC0; }

/* The honeypot: out of sight and out of the tab order. */
.pz-trap { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pz-check { display: flex; align-items: flex-start; gap: .55rem; font-size: .92rem; line-height: 1.6; cursor: pointer; }
.pz-check input { margin-top: .3rem; width: 1.05rem; height: 1.05rem; accent-color: #188283; flex: none; }
.pz-consent { margin: .9rem 0 .4rem; padding: .7rem .9rem; border: 1px dashed #D3C49E; border-radius: 10px; background: #FFFBF1; }

.pz-report-form { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: .75rem; }

.pz-form-stack { display: flex; flex-direction: column; gap: .9rem; }
.pz-form-stack .pz-number input, .pz-form-stack textarea { width: 100%; box-sizing: border-box; }
.pz-wide { width: 100%; box-sizing: border-box; }

/* Progress: five steps, each ticked as it completes. */
.pz-progress { max-width: 44rem; }
.pz-steps { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.pz-step { display: flex; gap: .9rem; align-items: flex-start; padding: .7rem .4rem; border-radius: 10px; opacity: .55; }
.pz-step.is-now { opacity: 1; background: #FFFBF1; }
.pz-step.is-done { opacity: 1; }
.pz-step-mark {
    flex: none; width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center;
    border: 2px solid #D3C49E; color: #4F6670; font-weight: 700; position: relative;
}
.pz-step-text { display: flex; flex-direction: column; line-height: 1.5; min-width: 0; }
.pz-step-text span { font-size: .88rem; color: #4F6670; }
.pz-step-done, .pz-step-spin { display: none; }
.pz-step.is-done .pz-step-mark { background: #188283; border-color: #188283; color: #fff; }
.pz-step.is-done .pz-step-done { display: block; font-size: 1.1rem; }
.pz-step.is-done .pz-step-num { display: none; }
.pz-step.is-now .pz-step-mark { border-color: #188283; }
.pz-step.is-now .pz-step-num { display: none; }
.pz-step.is-now .pz-step-spin {
    display: block; width: 1rem; height: 1rem; border-radius: 999px;
    border: 2px solid #188283; border-top-color: transparent; animation: pz-spin .9s linear infinite;
}
@keyframes pz-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pz-step.is-now .pz-step-spin { animation: none; border-top-color: #188283; } }

@media (max-width: 640px) {
    .site-head-in { flex-direction: column; align-items: flex-start; }
    .site-nav { gap: .25rem .9rem; }
}

/*
 | The core's reset (`.mz-root a`, `.mz-root button`) outranks its one-class
 | utilities, so a button's colour lost to it: white text came out teal and
 | link-buttons underlined. The button tones, restated with enough weight.
 */
.mz-root a.mz\:inline-flex, .mz-root button.mz\:inline-flex { text-decoration: none; cursor: pointer; }
.mz-root a.mz\:text-brand-primary-contrast, .mz-root button.mz\:text-brand-primary-contrast { color: var(--brand-primary-contrast); }
.mz-root a.mz\:text-brand-secondary, .mz-root button.mz\:text-brand-secondary { color: var(--brand-secondary); }
.mz-root a.mz\:text-state-danger, .mz-root button.mz\:text-state-danger { color: var(--state-danger); }
.mz-root a.mz\:bg-brand-primary:hover, .mz-root button.mz\:bg-brand-primary:hover { filter: brightness(1.08); }
.mz-root a.mz\:inline-flex:focus-visible, .mz-root button.mz\:inline-flex:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }