/* =====================================================================
   Meet Greek Singles — registration, log in, password, e-mail confirmation,
   welcome and legal pages. Loaded after mgs-home.css (variables, header,
   footer, buttons). Mobile-first. Classes are prefixed "mgs-".
   ===================================================================== */

/* ---------- page frame ---------- */
.mgs-page { min-height: 100vh; display: flex; flex-direction: column; }
@supports (min-height: 100svh) { .mgs-page { min-height: 100svh; } }
.mgs-page > main { flex: 1 0 auto; }
:where(.mgs-page) [hidden] { display: none !important; }

/* who sees what in the header: guest / pending (logged in, e-mail not confirmed) / member */
.mgs-auth-guest [data-mgs-for]:not([data-mgs-for~="guest"]),
.mgs-auth-pending [data-mgs-for]:not([data-mgs-for~="pending"]),
.mgs-auth-member [data-mgs-for]:not([data-mgs-for~="member"]) { display: none !important; }

.mgs-link { color: var(--mgs-blue-700); font-weight: 700; text-underline-offset: 3px; }
.mgs-link:hover { color: var(--mgs-blue-600); }

/* ---------- two-part layout of the registration page ---------- */
.mgs-auth { display: grid; grid-template-columns: minmax(0, 1fr); }
.mgs-auth__intro {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 34px var(--mgs-gutter) 38px; text-align: center; color: var(--mgs-white);
  background: var(--mgs-navy-800) url("../video/poster-mobile-720x1280.jpg") 50% 34% / cover no-repeat;
}
.mgs-auth__intro::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0, 26, 58, .86), rgba(0, 31, 69, .8));
}
.mgs-auth__intro-inner { max-width: 560px; margin-inline: auto; }
.mgs-auth__title { margin: 0; font: 700 clamp(1.85rem, 3.2vw + 1.1rem, 3rem)/1.12 var(--mgs-serif); letter-spacing: -.01em; }
.mgs-auth__intro .mgs-divider { margin-inline: auto; }
.mgs-auth__lead { margin: 0 0 .7rem; font-size: 1.04rem; color: #f1ead9; }
.mgs-auth__launch { margin: 0; font-weight: 800; font-size: .92rem; letter-spacing: .02em; color: var(--mgs-gold-300); }
.mgs-auth__panel { display: flex; flex-direction: column; align-items: center; padding: 26px var(--mgs-gutter) 56px; }
.mgs-auth__alt { margin: 22px 0 0; text-align: center; font-size: .95rem; color: var(--mgs-ink-soft); }

@media (min-width: 1024px) {
  .mgs-auth { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .mgs-auth__intro {
    display: flex; align-items: center; padding: 64px 56px; text-align: left;
    background-image: url("../video/poster-desktop-1080.jpg"); background-position: 78% 50%;
  }
  .mgs-auth__intro::after { background: linear-gradient(105deg, rgba(0, 26, 58, .93) 0%, rgba(0, 31, 69, .8) 55%, rgba(0, 31, 69, .58) 100%); }
  .mgs-auth__intro-inner { margin: 0; max-width: 460px; position: sticky; top: 140px; }
  .mgs-auth__intro .mgs-divider { margin-inline: 0; }
  .mgs-auth__lead { font-size: 1.14rem; }
  .mgs-auth__panel { padding: 48px 40px 72px; }
}

/* ---------- single-card pages (log in, password, Almost There, welcome) ---------- */
.mgs-solo { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 36px var(--mgs-gutter) 64px; }
@media (min-width: 768px) { .mgs-solo { padding-block: 60px 88px; } }
.mgs-solo__alt { margin: 0; text-align: center; font-size: .95rem; color: var(--mgs-ink-soft); }

.mgs-panel {
  width: 100%; max-width: 520px;
  background: var(--mgs-cream-50); border: 1px solid rgba(212, 165, 72, .45); border-radius: var(--mgs-radius);
  box-shadow: var(--mgs-shadow); padding: 26px 20px 30px;
}
.mgs-panel--wide { max-width: 640px; }
.mgs-panel--center { text-align: center; }
@media (min-width: 600px) { .mgs-panel { padding: 36px 40px 40px; } }
.mgs-panel__icon {
  display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px;
  border: 1.5px solid var(--mgs-gold-500); border-radius: 50%; color: var(--mgs-blue-700); background: #fff;
}
.mgs-panel__icon svg { width: 30px; height: 30px; }
.mgs-panel__title { text-wrap: balance; margin: 0 0 .7rem; font: 700 clamp(1.6rem, 1.6vw + 1.2rem, 2.1rem)/1.15 var(--mgs-serif); color: var(--mgs-heading); letter-spacing: -.01em; }
.mgs-panel--center .mgs-divider { margin-inline: auto; }
.mgs-panel p { margin: 0 0 .85rem; }
.mgs-panel p:last-child { margin-bottom: 0; }
.mgs-panel__lead { font-size: 1.06rem; font-weight: 700; color: var(--mgs-heading); }
.mgs-panel__actions { margin-top: 1.5rem; }
.mgs-panel__soft { font-size: .92rem; color: var(--mgs-ink-soft); }
.mgs-panel__mail { font-weight: 700; color: var(--mgs-heading); overflow-wrap: anywhere; }
.mgs-panel hr { border: 0; border-top: 1px solid rgba(212, 165, 72, .45); margin: 1.5rem 0; }

/* views of the password page: the body carries data-mgs-view */
[data-mgs-view] [data-view] { display: none; }
[data-mgs-view="request"] [data-view~="request"],
[data-mgs-view="sent"] [data-view~="sent"],
[data-mgs-view="reset"] [data-view~="reset"],
[data-mgs-view="invalid"] [data-view~="invalid"] { display: block; }

/* ---------- step indicator ---------- */
.mgs-steps { display: flex; align-items: center; justify-content: center; gap: 0; margin: 0 0 22px; padding: 0; list-style: none; }
.mgs-steps li { display: flex; align-items: center; }
.mgs-steps li + li::before { content: ""; width: clamp(34px, 12vw, 72px); height: 2px; background: #d9cfbb; margin-inline: 8px; }
.mgs-steps__dot {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid #d9cfbb; background: #fff; color: var(--mgs-ink-soft); font: 800 .9rem/1 var(--mgs-sans);
}
.mgs-steps li.is-done + li::before, .mgs-steps li.is-current::before { background: var(--mgs-gold-500); }
.mgs-steps li.is-done .mgs-steps__dot { border-color: var(--mgs-gold-500); background: var(--mgs-gold-500); color: #fff; }
.mgs-steps li.is-current .mgs-steps__dot { border-color: var(--mgs-gold-400); background: var(--mgs-blue-700); color: #fff; box-shadow: 0 0 0 4px rgba(1, 56, 116, .12); }

.mgs-step__count { margin: 0 0 .25rem; font: 800 .74rem/1.3 var(--mgs-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mgs-gold-text); text-align: center; }
.mgs-step__title { margin: 0 0 1.4rem; font: 700 clamp(1.45rem, 1.2vw + 1.15rem, 1.8rem)/1.2 var(--mgs-serif); color: var(--mgs-heading); text-align: center; }
.mgs-step__title:focus { outline: none; }

/* ---------- form fields ---------- */
.mgs-form { margin: 0; }
.mgs-field { margin: 0 0 1.25rem; padding: 0; border: 0; min-width: 0; }
.mgs-label { display: block; margin: 0 0 .4rem; padding: 0; font: 700 .95rem/1.35 var(--mgs-sans); color: var(--mgs-heading); }
.mgs-input, .mgs-select {
  display: block; width: 100%; min-height: 50px; padding: 12px 14px;
  border: 1.5px solid #cdc3af; border-radius: 12px; background-color: #fff;
  font: 500 1rem/1.3 var(--mgs-sans); color: var(--mgs-ink);
  transition: border-color .15s, box-shadow .15s;
}
.mgs-select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23013874' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
.mgs-select:invalid, .mgs-select.is-empty { color: #6c7686; }
.mgs-select option { color: var(--mgs-ink); }
.mgs-input:hover, .mgs-select:hover { border-color: #b3a78f; }
.mgs-input:focus, .mgs-select:focus, .mgs-input:focus-visible, .mgs-select:focus-visible {
  outline: none; border-color: var(--mgs-blue-700); box-shadow: 0 0 0 3px rgba(1, 56, 116, .16); border-radius: 12px;
}
.mgs-note { margin: .4rem 0 0; font-size: .85rem; line-height: 1.45; color: var(--mgs-ink-soft); }
.mgs-error { margin: .4rem 0 0; font-size: .87rem; line-height: 1.45; font-weight: 700; color: #a3231f; }
.mgs-error:empty { display: none; }
.is-invalid .mgs-input, .is-invalid .mgs-select { border-color: #a3231f; }
.is-invalid .mgs-choice span, .is-invalid .mgs-check { border-color: #a3231f; }

.mgs-row3 { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
/* phones: the three date boxes share about 300 px, so they give up padding and the arrow moves to the edge; otherwise
   "Ημέρα", "Έτος" and the long month names are cut off. The font stays at 16 px (iOS zooms into smaller form fields). */
@media (max-width: 480px) {
  .mgs-row3 { grid-template-columns: minmax(0, .98fr) minmax(0, 1.6fr) minmax(0, .87fr); gap: 6px; }
  .mgs-row3 .mgs-select { padding-left: 8px; padding-right: 20px; background-position: right 4px center; background-size: 14px; letter-spacing: -.01em; }
}
@media (max-width: 374px) {
  .mgs-row3 .mgs-select { font-size: .92rem; }
}

/* password with a show/hide button */
.mgs-password { position: relative; }
.mgs-password .mgs-input { padding-right: 54px; }
.mgs-password__toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--mgs-blue-700); cursor: pointer;
}
.mgs-password__toggle:hover { background: rgba(1, 56, 116, .08); }
.mgs-password__toggle svg { width: 22px; height: 22px; }
.mgs-password__toggle .mgs-i-hide, .mgs-password__toggle[aria-pressed="true"] .mgs-i-show { display: none; }
.mgs-password__toggle[aria-pressed="true"] .mgs-i-hide { display: block; }

/* one-of choices shown as buttons (I am, Greek roots, relationship status) */
.mgs-choices { display: grid; gap: 10px; }
.mgs-choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 480px) { .mgs-choices--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mgs-choice { position: relative; display: block; cursor: pointer; }
.mgs-choice input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.mgs-choice span {
  display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 11px 14px; text-align: center;
  border: 1.5px solid #cdc3af; border-radius: 12px; background: #fff;
  font: 700 .95rem/1.3 var(--mgs-sans); color: var(--mgs-ink);
  transition: background-color .15s, border-color .15s, color .15s;
}
.mgs-choices--list .mgs-choice span { justify-content: flex-start; text-align: left; }
.mgs-choice:hover span { border-color: var(--mgs-blue-700); }
.mgs-choice input:checked + span { background: var(--mgs-blue-700); border-color: var(--mgs-gold-400); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.mgs-choice input:focus-visible + span { outline: 3px solid var(--mgs-gold-300); outline-offset: 2px; }

/* several-of choices (Languages You Speak): the same buttons with a tick box in front; Greek and English are shown,
   the rest of Chameleon's 78 languages opens under "More languages" in a box that scrolls, so step 2 stays short */
.mgs-note--lead { margin: -.1rem 0 .65rem; }
.mgs-choices--multi .mgs-choice span { justify-content: flex-start; gap: 10px; text-align: left; overflow-wrap: break-word; }
.mgs-choices--multi .mgs-choice span::before {
  content: ""; flex: none; width: 20px; height: 20px; border: 1.5px solid #b3a78f; border-radius: 6px; background: #fff;
}
.mgs-choices--multi .mgs-choice input:checked + span::before {
  border-color: var(--mgs-gold-400);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23013874' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.mgs-more { margin-top: 10px; }
.mgs-more__toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; cursor: pointer; list-style: none;
  font: 700 .95rem/1.3 var(--mgs-sans); color: var(--mgs-blue-700);
}
.mgs-more__toggle::-webkit-details-marker { display: none; }
.mgs-more__toggle::after {
  content: ""; width: 16px; height: 16px; transition: transform .15s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23013874' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mgs-more[open] > .mgs-more__toggle::after { transform: rotate(180deg); }
.mgs-more__toggle:hover > span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.mgs-more__toggle:focus-visible { outline: 3px solid var(--mgs-gold-300); outline-offset: 2px; border-radius: 8px; }
.mgs-more__list {
  max-height: 292px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  margin-top: 4px; padding: 10px; border: 1.5px solid #cdc3af; border-radius: 12px; background: var(--mgs-cream-100);
}
.mgs-more__list .mgs-choice span { min-height: 46px; padding: 9px 12px; font-weight: 600; }
/* phones: one language per line in the list, two would cut names like "Nederlands" in half */
@media (max-width: 479px) { .mgs-more__list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 374px) {
  .mgs-choices--multi .mgs-choice span { gap: 8px; padding-left: 10px; padding-right: 10px; }
}

/* tick boxes */
.mgs-check {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 14px; border: 1.5px solid #cdc3af; border-radius: 12px; background: #fff;
  font-size: .95rem; line-height: 1.5; cursor: pointer;
}
.mgs-check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--mgs-blue-700); cursor: pointer; }
.mgs-check a { color: var(--mgs-blue-700); font-weight: 700; text-underline-offset: 3px; }
.mgs-check--plain { padding: 0; border: 0; background: none; }

/* a field no person sees (kept out of the way of screen readers and the keyboard too) */
.mgs-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* messages above a form */
.mgs-form__alert, .mgs-form__ok {
  margin: 0 0 1.2rem; padding: 12px 14px; border-radius: 12px; font-size: .93rem; font-weight: 700; line-height: 1.45; text-align: left;
}
.mgs-form__alert { background: #fbeceb; border: 1px solid #e3b0ac; color: #8d1f1b; }
.mgs-form__ok { background: #eef5ee; border: 1px solid #b4d0b6; color: #24552b; }
.mgs-form__alert:empty, .mgs-form__ok:empty { display: none; }

/* buttons under a form */
.mgs-form__actions { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 12px; margin-top: 1.6rem; }
.mgs-form__actions .mgs-btn { width: 100%; }
.mgs-form__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 1.25rem; font-size: .93rem; }
@media (min-width: 520px) {
  .mgs-form__actions { flex-direction: row; align-items: center; justify-content: space-between; }
  .mgs-form__actions .mgs-btn { width: auto; min-width: 200px; }
  .mgs-form__actions--single { justify-content: center; }
  .mgs-form__actions > .mgs-btn:only-child { margin-inline: auto; }
}
/* the last step: the long "create my free account" button gets the full width, Back sits underneath */
.mgs-form__actions.mgs-form__actions--stack { flex-direction: column-reverse; align-items: stretch; }
.mgs-form__actions--stack .mgs-btn { width: 100%; min-width: 0; }
.mgs-form__actions--stack .mgs-btn--text { align-self: center; width: auto; }
.mgs-btn[disabled] { opacity: .65; cursor: progress; transform: none; }
.mgs-btn--text {
  min-height: 44px; padding: .6em .4em; border: 0; background: none; box-shadow: none;
  color: var(--mgs-blue-700); letter-spacing: .04em; text-transform: none; font-size: .95rem; text-decoration: underline; text-underline-offset: 3px;
}
.mgs-btn--text:hover { transform: none; color: var(--mgs-blue-600); }

/* ---------- legal texts ---------- */
.mgs-legal { width: 100%; max-width: 820px; margin-inline: auto; padding: 36px var(--mgs-gutter) 72px; }
@media (min-width: 768px) { .mgs-legal { padding-block: 60px 96px; } }
.mgs-legal__title { margin: 0 0 .5rem; font: 700 clamp(2rem, 2.4vw + 1.3rem, 2.9rem)/1.1 var(--mgs-serif); color: var(--mgs-heading); letter-spacing: -.01em; }
.mgs-legal .mgs-divider { margin: 1rem 0 1.6rem; }
.mgs-legal__updated { margin: 0 0 1.4rem; font-size: .9rem; font-weight: 700; color: var(--mgs-gold-text); }
.mgs-legal__body h2 { margin: 2rem 0 .6rem; font: 700 1.35rem/1.25 var(--mgs-serif); color: var(--mgs-heading); }
.mgs-legal__body p { margin: 0 0 .9rem; }
.mgs-legal__body ul { margin: 0 0 1rem; padding-left: 1.3rem; }
.mgs-legal__body li { margin: 0 0 .35rem; }
.mgs-legal__body a { color: var(--mgs-blue-700); font-weight: 700; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ---------- content pages: About Us, Questions & Answers, Advice ---------- */
.mgs-content { width: 100%; max-width: 760px; margin-inline: auto; padding: 40px var(--mgs-gutter) 72px; }
.mgs-content--wide { max-width: 1120px; }
@media (min-width: 768px) { .mgs-content { padding-block: 64px 96px; } }
.mgs-content__title { margin: 0; text-align: center; text-wrap: balance; overflow-wrap: break-word; font: 700 clamp(1.9rem, 2.4vw + 1.2rem, 2.9rem)/1.12 var(--mgs-serif); color: var(--mgs-heading); letter-spacing: -.01em; }
.mgs-content .mgs-divider { margin: 1.1rem auto 1.8rem; }
.mgs-content p { margin: 0 0 1.1rem; font-size: 1.05rem; line-height: 1.7; }
.mgs-content__closing { margin: 1.8rem 0 0; text-align: center; font: italic 600 clamp(1.3rem, 1.2vw + 1.05rem, 1.7rem)/1.3 var(--mgs-serif); color: var(--mgs-heading); }
.mgs-content .mgs-flag { vertical-align: -.14em; }   /* inline flag sits on the text line */
.mgs-content a { color: var(--mgs-blue-700); font-weight: 700; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* Questions & Answers: native <details>, the + turns into a - when open */
.mgs-faq { display: grid; gap: 12px; }
.mgs-faq__item { background: var(--mgs-cream-50); border: 1px solid rgba(212, 165, 72, .45); border-radius: var(--mgs-radius); box-shadow: var(--mgs-shadow); }
.mgs-faq__item[open] { border-color: var(--mgs-gold-500); }
.mgs-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 60px; padding: 14px 18px;
  font: 700 1.04rem/1.35 var(--mgs-sans); color: var(--mgs-heading); cursor: pointer; list-style: none; border-radius: var(--mgs-radius);
}
.mgs-faq__q::-webkit-details-marker { display: none; }
.mgs-faq__q::after {
  content: ""; flex: none; width: 30px; height: 30px; border: 1.5px solid var(--mgs-gold-500); border-radius: 50%; background: #fff;
  background-image: linear-gradient(var(--mgs-blue-700), var(--mgs-blue-700)), linear-gradient(var(--mgs-blue-700), var(--mgs-blue-700));
  background-repeat: no-repeat; background-position: center; background-size: 12px 2px, 2px 12px;
}
.mgs-faq__item[open] > .mgs-faq__q::after { background-size: 12px 2px, 0 0; background-color: var(--mgs-gold-300); }
.mgs-faq__q:hover { color: var(--mgs-blue-600); }
.mgs-faq__q:focus-visible { outline-offset: -3px; }
.mgs-content .mgs-faq__a { margin: 0; padding: 14px 18px 20px; border-top: 1px solid rgba(212, 165, 72, .35); }
@media (min-width: 768px) { .mgs-faq__q { padding-inline: 24px; font-size: 1.1rem; } .mgs-faq__a { padding-inline: 24px; } }

/* Advice: six plain cards (not links: no hover lift), stacked on phones */
.mgs-content__intro { max-width: 760px; margin-inline: auto; }
.mgs-advice { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 2.2rem; }
@media (min-width: 700px) { .mgs-advice { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
@media (min-width: 1040px) { .mgs-advice { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mgs-advice__card { background: var(--mgs-cream-50); border: 1px solid rgba(212, 165, 72, .45); border-radius: var(--mgs-radius); box-shadow: var(--mgs-shadow); padding: 24px 22px 14px; }
.mgs-advice__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border: 1.5px solid var(--mgs-gold-500); border-radius: 50%; background: #fff; font-size: 1.5rem; line-height: 1; }
.mgs-advice__icon .mgs-flag { margin: 0; vertical-align: baseline; }
.mgs-advice__title { margin: 0 0 .7rem; overflow-wrap: break-word; font: 700 1.4rem/1.2 var(--mgs-serif); color: var(--mgs-heading); }
.mgs-advice__card p { font-size: 1rem; line-height: 1.65; }
.mgs-advice__closing { max-width: 760px; margin: 3rem auto 0; padding: 28px 22px 30px; text-align: center; background: var(--mgs-cream-50); border: 1px solid rgba(212, 165, 72, .45); border-radius: var(--mgs-radius); box-shadow: var(--mgs-shadow); }
.mgs-advice__closing-title { margin: 0 0 .8rem; text-wrap: balance; overflow-wrap: break-word; font: 700 clamp(1.5rem, 1.4vw + 1.1rem, 2rem)/1.2 var(--mgs-serif); color: var(--mgs-heading); }
.mgs-advice__closing .mgs-content__closing { margin-top: 1.4rem; }

/* Events: the five cards are centred when the last row is incomplete (two from 700 px, three from 1040 px) */
.mgs-events__lead { margin: 0 0 1.4rem; text-align: center; text-wrap: balance; font: italic 600 clamp(1.25rem, 1.1vw + 1.05rem, 1.65rem)/1.35 var(--mgs-serif); color: var(--mgs-heading); }
.mgs-advice--centered { display: flex; flex-wrap: wrap; justify-content: center; }
.mgs-advice--centered > .mgs-advice__card { flex: 0 0 100%; min-width: 0; }
@media (min-width: 700px) { .mgs-advice--centered > .mgs-advice__card { flex-basis: calc((100% - 22px) / 2); } }
@media (min-width: 1040px) { .mgs-advice--centered > .mgs-advice__card { flex-basis: calc((100% - 44px) / 3); } }
.mgs-events__upcoming {
  max-width: 760px; margin: 3rem auto 0; padding: 32px 22px 34px; text-align: center; color: #fff;
  background: var(--mgs-navy-800); border: 1px solid var(--mgs-gold-400); border-radius: var(--mgs-radius); box-shadow: var(--mgs-shadow);
}
.mgs-events__kicker { margin: 0 0 .6rem; overflow-wrap: break-word; font: 800 .8rem/1.3 var(--mgs-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mgs-gold-300); }
.mgs-events__sub { margin: 0 0 1.1rem; text-wrap: balance; overflow-wrap: break-word; font: 700 clamp(1.5rem, 1.4vw + 1.1rem, 2rem)/1.2 var(--mgs-serif); color: #fff; }
.mgs-content .mgs-events__upcoming p { color: #f1ead9; }
.mgs-content .mgs-events__upcoming .mgs-events__action { margin: 1.6rem 0 0; }
.mgs-content p.mgs-events__closing { margin-top: 2.2rem; }
.mgs-content a.mgs-btn { font-weight: 800; text-decoration: none; overflow-wrap: break-word; max-width: 100%; }
.mgs-content a.mgs-btn--gold { color: var(--mgs-navy-800); }

/* Contact: header band (the picture is switched on by --photo), intro, form card, safety box */
.mgs-contact__hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: 34px 0 40px;
  background: #002954 linear-gradient(120deg, #001a3a 0%, #002954 55%, #0a4a92 100%);     /* the plain band, and what shows while the picture loads */
}
.mgs-contact__hero-inner { max-width: var(--mgs-container); margin-inline: auto; padding-inline: var(--mgs-gutter); }
/* wide screens: the band keeps the header's frame (mgs-home.css, --mgs-container-wide), so its title stays in line with the logo */
@media (min-width: 1200px) { .mgs-contact__hero-inner { max-width: var(--mgs-container-wide, var(--mgs-container)); } }
.mgs-contact__title { margin: 0; overflow-wrap: break-word; font: 700 clamp(2.3rem, 3.4vw + 1.2rem, 4rem)/1.1 var(--mgs-serif); letter-spacing: -.01em; color: #fff; }
.mgs-contact__rule { display: block; width: 56px; height: 3px; margin: .9rem 0 1rem; border-radius: 2px; background: var(--mgs-gold-400); }
.mgs-contact__sub { margin: 0; text-wrap: balance; font: 500 clamp(1.3rem, 1.6vw + .9rem, 2.1rem)/1.25 var(--mgs-serif); color: #fff; }

/* The picture. TO SWITCH IT OFF: remove the class mgs-contact__hero--photo from mgs_contact.html (src/) and rebuild.
   Phones and tablets (under 900 px): the text sits on the deep blue at the top and the picture fills the lower part of the
   band, so no text lies on the dove. From 900 px the picture is the whole band, with a deep-blue gradient over its left part. */
.mgs-contact__hero--photo { --mgs-pic: max(250px, 50.4vw); padding-bottom: calc(var(--mgs-pic) + 6px); }
.mgs-contact__hero--photo::before, .mgs-contact__hero--photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: var(--mgs-pic); }
.mgs-contact__hero--photo::before {
  background: url("../img/contact-hero-phone.jpg") 18% 50% / cover no-repeat;
  background-image: image-set(url("../img/contact-hero-phone.webp") type("image/webp"), url("../img/contact-hero-phone.jpg") type("image/jpeg"));
}
.mgs-contact__hero--photo::after { background: linear-gradient(180deg, #002954 0%, rgba(0, 41, 84, .55) 28%, rgba(0, 41, 84, 0) 62%); }
@media (min-width: 900px) {
  .mgs-contact__hero--photo { display: flex; align-items: center; min-height: clamp(300px, 28.8vw, 520px); padding-block: 40px; }
  .mgs-contact__hero--photo .mgs-contact__hero-inner { width: 100%; }
  .mgs-contact__hero--photo::before, .mgs-contact__hero--photo::after { top: 0; height: auto; }
  .mgs-contact__hero--photo::before {
    background: url("../img/contact-hero-wide.jpg") 100% 50% / cover no-repeat;
    background-image: image-set(url("../img/contact-hero-wide.webp") type("image/webp"), url("../img/contact-hero-wide.jpg") type("image/jpeg"));
  }
  .mgs-contact__hero--photo::after { background: linear-gradient(90deg, rgba(0, 26, 58, .94) 0%, rgba(0, 41, 84, .84) 26%, rgba(0, 41, 84, .38) 40%, rgba(0, 41, 84, 0) 50%); }
  .mgs-contact__hero--photo .mgs-contact__hero-text { max-width: min(460px, 40vw); }
}

.mgs-contact__body { width: 100%; max-width: 1040px; margin-inline: auto; padding: 34px var(--mgs-gutter) 72px; }
.mgs-contact__intro { max-width: 780px; margin: 0 auto; text-align: center; }
.mgs-contact__intro p { margin: 0 0 .9rem; font-size: 1.05rem; line-height: 1.65; color: var(--mgs-heading); }
.mgs-contact__mail { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 1.2rem !important; font-weight: 700; }
.mgs-contact__mail-icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: #f6e6c6; color: var(--mgs-blue-700); }
.mgs-contact__mail-icon svg { width: 22px; height: 22px; }
.mgs-contact__mail a { color: var(--mgs-blue-700); text-underline-offset: 3px; overflow-wrap: anywhere; }

.mgs-contact__card { margin-top: 1.6rem; padding: 24px 18px 26px; background: var(--mgs-cream-50); border: 1px solid rgba(212, 165, 72, .45); border-radius: var(--mgs-radius); box-shadow: var(--mgs-shadow); }
.mgs-contact__card-title { margin: 0 0 1.2rem; overflow-wrap: break-word; font: 700 clamp(1.6rem, 1.4vw + 1.2rem, 2.1rem)/1.2 var(--mgs-serif); color: var(--mgs-heading); }
.mgs-contact__cols { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 28px; }
.mgs-contact__col { display: flex; flex-direction: column; min-width: 0; }
.mgs-field--grow { display: flex; flex-direction: column; flex: 1 1 auto; }
.mgs-textarea { flex: 1 1 auto; min-height: 160px; resize: vertical; line-height: 1.5; font-size: 1rem; }
.mgs-req { margin-left: 2px; color: #c0261f; }
.mgs-inputicon { position: relative; }
.mgs-inputicon svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: #5d6a7d; pointer-events: none; }
.mgs-inputicon .mgs-input { padding-left: 44px; }
.mgs-input::placeholder { color: #6c7686; opacity: 1; }
.mgs-contact__send { width: 100%; margin-top: .4rem; }
.mgs-contact__send svg { width: 1.2em; height: 1.2em; }
.mgs-contact__done { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 8px 10px; text-align: center; }
.mgs-contact__done:focus { outline: none; }
.mgs-contact__done p { margin: 0; font: 700 1.2rem/1.4 var(--mgs-serif); color: var(--mgs-heading); }
.mgs-contact__done-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #eef5ee; border: 1.5px solid #b4d0b6; color: #24552b; }
.mgs-contact__done-icon svg { width: 28px; height: 28px; }
.mgs-contact__form-wrap[data-sent] .mgs-contact__form { display: none; }
@media (min-width: 768px) {
  .mgs-contact__card { padding: 30px 36px 34px; }
  .mgs-contact__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mgs-contact__safety {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: start; margin-top: 1.8rem; padding: 18px;
  background: #eaf1fb; border: 1px solid #cfdcee; border-radius: var(--mgs-radius);
}
.mgs-contact__safety-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #d3e2f6; color: var(--mgs-blue-700); }
.mgs-contact__safety-icon svg { width: 30px; height: 30px; }
.mgs-contact__safety-title { margin: 0 0 .3rem; overflow-wrap: break-word; font: 700 1.35rem/1.25 var(--mgs-serif); color: var(--mgs-heading); }
.mgs-contact__safety-body p { margin: 0; font-size: .98rem; line-height: 1.55; }
.mgs-contact__warning { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 0; padding: 13px 16px; border-radius: 10px; background: #fde4e4; color: #a3231f; font-weight: 800; line-height: 1.4; }
.mgs-contact__warning svg { flex: none; width: 28px; height: 28px; color: #d92a20; }
@media (min-width: 768px) {
  .mgs-contact__safety { align-items: center; padding: 22px 26px; gap: 14px 22px; }
  .mgs-contact__safety-icon { width: 68px; height: 68px; }
  .mgs-contact__safety-icon svg { width: 36px; height: 36px; }
}
.mgs-contact__thanks { margin: 2rem 0 0; text-align: center; text-wrap: balance; font: italic 600 clamp(1.1rem, .8vw + 1rem, 1.4rem)/1.4 var(--mgs-serif); color: var(--mgs-heading); }
.mgs-contact__thanks .mgs-flag { vertical-align: -.14em; }

@media (prefers-reduced-motion: reduce) {
  .mgs-input, .mgs-select, .mgs-choice span { transition: none; }
}