/* ============================================================================
   Mildred Group public site
   Layered on the shared MCSL design system (theme.css): Plus Jakarta Sans
   headings, Inter body copy, and the navy, teal, gold, and white palette.
   Account, portal, and operations screens are shared with MCSL and receive
   the flatter treatment at the end of this file.
   ============================================================================ */

:root {
  --group-ink: var(--navy);
  --group-muted: #516071;
  --group-line: var(--border);
  --group-max: 1280px;
  --group-hero-copy: #d4dfea;
  --group-hero-kicker: #b9dadd;
  --grad-hero: var(--navy);
  --grad-cta: var(--navy);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-teal: none;
  --shadow-gold: none;
  --glow-teal: none;
}

body { background: var(--white); color: var(--group-ink); }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 4px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ─── Header ────────────────────────────────────────────────────────────────── */
.group-skip { position: absolute; left: -999px; }
.group-skip:focus { left: 20px; top: 8px; z-index: 20; padding: 12px; background: var(--white); }
.group-header {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 6vw; background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); border-bottom: 1px solid var(--group-line);
}
.group-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 600 11px/1.3 'Plus Jakarta Sans', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.group-brand img { width: 44px; height: 44px; object-fit: contain; }
.group-nav, .group-access { display: flex; align-items: center; gap: 22px; }
.group-header .nav-link { font-size: 13px; font-weight: 500; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.group-header .nav-link:hover, .group-header .nav-link.active { border-bottom-color: var(--teal); }
.group-pill { padding: 9px 18px; border: 1px solid var(--navy); border-radius: 999px; font-size: 13px; font-weight: 500; text-decoration: none; }
.group-pill:hover { background: var(--navy); color: var(--white); }
.group-menu { display: none; width: 40px; height: 40px; padding: 8px; border: 1px solid var(--group-line); border-radius: 8px; background: var(--white); cursor: pointer; }
.group-menu span { display: block; height: 2px; margin: 5px 0; background: var(--navy); transition: transform .2s, opacity .2s; }
.group-menu.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.group-menu.open span:nth-child(2) { opacity: 0; }
.group-menu.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.group-mobile-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; padding: 12px 6vw 20px; background: var(--white); border-bottom: 1px solid var(--group-line); }
.group-mobile-nav.open { display: flex; }
.group-mobile-nav a { padding: 12px 0; border-bottom: 1px solid var(--group-line); font-size: 15px; text-decoration: none; }

/* ─── Page frame and typography ─────────────────────────────────────────────── */
.group-page { max-width: var(--group-max); margin: auto; padding: 64px 6vw 110px; }
.group-kicker { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-deep); }
.group-page h1, .group-page h2, .group-page h3, .group-hero h1, .group-section h2, .group-feature h2, .group-invitation h2 { color: inherit; overflow-wrap: anywhere; }
.group-page h1, .group-hero h1 { font: 500 clamp(40px, 5.2vw, 76px)/1.12 'Plus Jakarta Sans', sans-serif; letter-spacing: -.03em; margin: 20px 0 24px; max-width: 20ch; }
.group-page h2, .group-section h2, .group-feature h2, .group-invitation h2 { font: 500 clamp(28px, 3.6vw, 46px)/1.2 'Plus Jakarta Sans', sans-serif; letter-spacing: -.025em; margin: 16px 0; }
.group-page h3 { font-weight: 600; }
.group-page p, .group-section p, .group-feature p, .group-invitation p { max-width: 62ch; font-size: 16px; line-height: 1.8; color: var(--group-muted); }
.group-lead { font-size: 19px !important; color: var(--text-mid) !important; }
.group-empty { color: var(--group-muted); }

/* ─── Buttons and links ─────────────────────────────────────────────────────── */
.group-cta {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 20px; padding: 15px 25px;
  border: 0; border-radius: 999px; cursor: pointer; background: var(--navy); color: var(--white); text-decoration: none;
  font: 500 14px/1.5 'Inter', sans-serif; white-space: normal;
}
.group-cta span { font-size: 20px; font-weight: 400; }
.group-cta:hover { background: var(--navy-mid); color: var(--white); }
.group-cta:disabled { opacity: .5; cursor: wait; }
.group-text-link { display: inline-flex; align-items: center; gap: 18px; margin-top: 20px; color: var(--navy); font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 6px; }
.group-text-link:hover { color: var(--teal-deep); }

/* ─── Home hero ─────────────────────────────────────────────────────────────── */
.group-hero {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 6vw; align-items: center; min-height: 560px;
  padding: 72px max(6vw, calc((100vw - 1440px) / 2)); background: var(--navy); color: var(--white);
}
.group-hero .group-kicker { color: var(--group-hero-kicker); }
.group-hero h1 { color: var(--white); }
.group-hero h1 span { display: block; color: var(--teal); font-size: .55em; margin-top: 12px; letter-spacing: -.01em; }
.group-hero p { max-width: 48ch; color: var(--group-hero-copy); font-size: 17px; }
.group-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 28px; }
.group-hero-actions .group-cta { margin: 0; background: var(--teal); color: var(--navy); }
.group-hero-actions .group-cta:hover { background: var(--teal-pale); }
.group-hero .group-text-link { margin: 0; color: var(--white); }
.group-hero-proof { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 34px 0 0; padding: 0; list-style: none; color: var(--group-hero-copy); font-size: 14px; }
.group-hero-proof strong { color: var(--white); font-weight: 600; }
.group-hero-photo { margin: 0; }
.group-hero-photo img { width: 100%; aspect-ratio: 1.07; object-fit: cover; border-radius: 50% 50% 8px 8px; }
.group-hero-photo figcaption { margin-top: 14px; text-align: right; font-size: 11px; color: var(--group-hero-kicker); }

/* ─── Pathways, sections, cards ─────────────────────────────────────────────── */
.group-pathways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; max-width: var(--group-max); margin: auto; padding: 36px 6vw; }
.group-pathways a { display: grid; grid-template-columns: 1fr auto; gap: 7px 20px; color: var(--navy); font-size: 15px; font-weight: 500; text-decoration: none; }
.group-pathways a:hover { color: var(--teal-deep); }
.group-pathways span { grid-column: 1 / -1; font-size: 11px; font-weight: 400; color: var(--group-muted); }
.group-pathways b { font-size: 20px; font-weight: 400; color: var(--teal-deep); }
.group-section { max-width: var(--group-max); margin: 90px auto 0; padding: 0 6vw; }
.group-page .group-section { padding: 0; }
.group-section-intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: 7vw; align-items: center; }
.group-section-intro h2 { margin-top: 18px; }
.group-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
.group-card { min-width: 0; padding: 16px 0; }
.group-card small { display: block; margin-bottom: 20px; color: var(--teal-deep); font-size: 11px; letter-spacing: .08em; }
.group-card-icon { display: block; margin-bottom: 14px; font-size: 22px; color: var(--teal-deep); }
.group-card h3 { margin-bottom: 14px; font-size: clamp(20px, 2vw, 26px); letter-spacing: -.02em; }
.group-card p { margin: 0 0 10px; font-size: 15px; }
.group-card-body p { font-size: 14px; }
.group-cards-list { grid-template-columns: 1fr; gap: 0; }
.group-cards-list .group-card { display: grid; grid-template-columns: 44px 1fr 1.15fr; gap: 28px; align-items: baseline; padding: 30px 0; border-bottom: 1px solid var(--group-line); }
.group-cards-list .group-card small { margin: 0; }
.group-cards-list .group-card-icon { display: none; }
.group-cards-list .group-card h3 { margin: 0; }
.group-cards-list .group-card-body { grid-column: 3; }
.group-sectors { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 40px; }
.group-sector { display: grid; gap: 10px; padding: 26px; border: 1px solid var(--group-line); border-radius: 10px; text-decoration: none; color: var(--navy); transition: border-color .2s; }
.group-sector:hover { border-color: var(--teal-deep); }
.group-sector i { font-size: 22px; color: var(--teal-deep); }
.group-sector span { font-weight: 600; font-size: 18px; }
.group-sector small { color: var(--group-muted); font-size: 13px; line-height: 1.6; }
.group-steps { max-width: 760px; margin: 30px 0 0; padding-left: 22px; }
.group-steps li { margin-bottom: 16px; line-height: 1.8; color: var(--group-muted); }
.group-steps strong { color: var(--navy); }

/* ─── Feature bands, stats, invitation ──────────────────────────────────────── */
.group-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: center; max-width: var(--group-max); margin: 96px auto 0; padding: 0 6vw; }
.group-feature h2 { margin-top: 20px; }
.group-feature-reverse > :first-child { order: 2; }
.group-feature-visual { display: grid; place-content: center; justify-items: center; aspect-ratio: 1.15; padding: 45px; border-radius: 10px; background: var(--slate); }
.group-feature-visual-teal { background: var(--teal-pale); }
.group-feature-visual img { width: min(280px, 100%); border-radius: 8px; }
.group-feature-visual p { margin-top: 24px; font-size: 12px; text-align: center; }
.group-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; max-width: var(--group-max); margin: 96px auto 0; padding: 0 6vw; }
.group-stats div { padding: 28px; border-top: 2px solid var(--teal); }
.group-stats strong { display: block; font: 600 48px/1 'Plus Jakarta Sans', sans-serif; color: var(--navy); }
.group-stats span { display: block; margin-top: 10px; color: var(--group-muted); font-size: 14px; line-height: 1.6; }
.group-stats-compact { margin: 20px 0 0; padding: 0; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.group-stats-compact div { padding: 16px; }
.group-stats-compact strong { font-size: 32px; }
.group-invitation { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10vw; align-items: end; margin-top: 96px; padding: 60px 6vw; border-radius: 10px; background: var(--slate); }
.group-invitation .group-cta { background: var(--gold); color: var(--navy); }
.group-invitation .group-cta:hover { background: var(--gold-deep); }
.group-invitation .group-text-link { display: flex; }

/* ─── Company, contact, news, legal ─────────────────────────────────────────── */
.group-company-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 7vw; }
.group-facts { display: grid; gap: 14px; margin-top: 24px; }
.group-facts div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--group-line); }
.group-facts dt { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--group-muted); }
.group-facts dd { margin: 0; line-height: 1.7; }
.group-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; margin-top: 36px; }
.group-person img, .group-person-mark { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; background: var(--slate); display: grid; place-content: center; color: var(--teal-deep); font-size: 30px; }
.group-person h3 { margin: 18px 0 4px; }
.group-person-role { color: var(--teal-deep) !important; font-weight: 500; }
.group-faqs { max-width: 800px; margin-top: 28px; }
.group-faq { padding: 18px 0; border-bottom: 1px solid var(--group-line); }
.group-faq summary { cursor: pointer; font-weight: 600; font-size: 17px; }
.group-faq div { padding-top: 12px; }
.group-former { display: block; margin-top: 6px; color: var(--group-muted); font-size: 13px; }
.group-contact { display: grid; grid-template-columns: 1.1fr 1fr; gap: 8vw; }
.group-contact-details p { margin: 0 0 14px; font-size: 15px; }
.group-form label { display: block; margin: 20px 0 8px; font-size: 13px; font-weight: 500; }
.group-form input, .group-form textarea, .group-form select { width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--group-line); border-radius: 0; background: transparent; color: var(--group-ink); font: inherit; }
.group-form input:focus, .group-form textarea:focus, .group-form select:focus { border-bottom-color: var(--teal-deep); }
.group-form textarea { min-height: 150px; resize: vertical; }
.group-news-list { display: grid; gap: 40px; margin-top: 40px; max-width: 800px; }
.group-news time { font-size: 12px; color: var(--teal-deep); letter-spacing: .06em; }
.group-news h2 { margin: 8px 0 12px; font-size: clamp(24px, 3vw, 34px); }
.group-legal h2 { margin-top: 40px; font-size: 26px; }
.group-legal p { max-width: 72ch; }

/* ─── Footer ────────────────────────────────────────────────────────────────── */
.group-footer { padding: 64px 6vw 32px; background: var(--navy); color: var(--white); }
.group-footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.4fr; gap: 40px; max-width: var(--group-max); margin: auto; }
.group-footer a { display: block; margin: 8px 0; font-size: 14px; color: #d4dfea; text-decoration: none; }
.group-footer a:hover { color: var(--teal); }
.group-brand-footer { display: inline-block; font-size: 22px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--white); }
.group-footer p { max-width: 36ch; font-size: 14px; line-height: 1.7; color: #b9c9dc; }
.group-footer-address { font-style: normal; white-space: pre-line; font-size: 13px; color: #b9c9dc; }
.group-footer-title { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.group-footer-form { display: flex; gap: 8px; margin-top: 12px; }
.group-footer-form input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 6px; background: rgba(255, 255, 255, .06); color: var(--white); font: inherit; }
.group-footer-form button { padding: 10px 16px; border: 0; border-radius: 6px; background: var(--teal); color: var(--navy); font: 500 14px 'Inter', sans-serif; cursor: pointer; }
.group-footer-feedback { min-height: 1.2em; font-size: 13px; color: var(--teal-pale); }
.group-footer-social { display: flex; gap: 14px; margin-top: 18px; }
.group-footer-social a { display: grid; place-content: center; width: 38px; height: 38px; margin: 0; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; }
.group-footer-bottom { display: flex; justify-content: space-between; gap: 20px; max-width: var(--group-max); margin: 40px auto 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 12px; color: #b9c9dc; }
.group-footer-bottom nav { display: flex; gap: 18px; }
.group-footer-bottom a { display: inline; margin: 0; font-size: 12px; }

/* ─── Shared account, portal, and operations screens ────────────────────────── */
.auth-page-split, .registration-page, .dashboard-page, .portal-page, .auth-page-centered { background: var(--white); padding-top: 32px; }
.auth-shell { gap: 50px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.auth-intro { padding: 32px 20px; background: transparent; color: var(--group-ink); }
.auth-intro::before, .auth-intro::after { display: none; }
.auth-intro h1 { font-size: clamp(32px, 4vw, 52px); font-weight: 500; color: var(--group-ink); }
.auth-intro > p:not(.eyebrow), .auth-benefits li, .auth-brand, .auth-intro .eyebrow { color: var(--group-muted); }
.auth-benefits i { border: 0; background: transparent; color: var(--teal-deep); }
.auth-brand img { border: 0; border-radius: 0; background: transparent; }
.auth-card-elevated { padding: 32px 20px; background: transparent; }
.auth-card-narrow, .auth-status { border: 1px solid var(--group-line); box-shadow: none; }
.auth-page input, .auth-page textarea, .auth-page select, .auth-page button { border-radius: 4px; box-shadow: none; }
.auth-page .auth-submit, .group-form .group-cta { border: 0; background: var(--navy); color: var(--white); }
.auth-title, .registration-heading h1 { font-weight: 500; }
.registration-form, .registration-fieldset { border-radius: 0; box-shadow: none; }
.ops-page { padding-top: 32px; }
.ops-heading h1 { font-weight: 500; }
.ops-kicker { color: var(--teal-deep); }
.ops-panel { margin: 16px 0; padding: 32px 0; border: 0; border-radius: 0; background: transparent; }
.ops-card-grid { gap: 26px; }
.ops-work-card { border-radius: 4px; background: var(--off-white); }
.ops-page input, .ops-page select, .ops-page textarea, .group-manage input, .group-manage select, .group-manage textarea { border-color: var(--group-line); border-radius: 4px; background: var(--white); }
.ops-page button, .ops-tabs a, .group-manage button { border: 1px solid #bfdcdf; border-radius: 4px; background: var(--teal-pale); color: var(--navy); font-weight: 500; }
.ops-page button:hover, .ops-tabs a:hover, .group-manage button:hover { background: #d3f3f5; }
.ops-tag { color: var(--group-muted); }
.portal-sidebar { background: var(--navy); }
.portal-stat, .portal-panel, .portal-card, .portal-task, .portal-form, .portal-refresh { border-radius: 4px; box-shadow: none; }
.portal-stat i { background: var(--teal-pale) !important; color: var(--teal-deep) !important; }
.group-manage { max-width: 1320px; }
.group-manage .ops-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.group-manage .ops-form label { display: grid; gap: .45rem; font-size: .87rem; font-weight: 600; }
.group-manage .ops-form input, .group-manage .ops-form select, .group-manage .ops-form textarea { width: 100%; padding: .7rem; font: inherit; }
.group-manage .ops-form button { padding: .7rem 1rem; cursor: pointer; }
.group-manage .ops-span { grid-column: 1 / -1; }
.group-manage .ops-check { display: flex; align-items: center; gap: .5rem; }
.group-manage .ops-check input { width: 20px; }
.group-manage table { width: 100%; border-collapse: collapse; font-size: .88rem; text-align: left; }
.group-manage th, .group-manage td { padding: .8rem; border-bottom: 1px solid var(--group-line); vertical-align: top; }
.group-manage small { display: block; color: var(--group-muted); }

/* ─── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .group-hero { gap: 5vw; }
  .group-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .group-nav, .group-access #nav-register-link { display: none; }
  .group-menu { display: block; }
  .group-hero { grid-template-columns: 1fr; gap: 40px; padding: 48px 6vw; min-height: 0; }
  .group-hero-photo { width: 100%; max-width: 440px; justify-self: center; }
  .group-hero-photo img { aspect-ratio: 1.3; }
  .group-pathways { gap: 24px; padding-block: 30px; }
  .group-section, .group-feature, .group-stats { margin-top: 64px; }
  .group-section-intro, .group-feature, .group-invitation, .group-company-grid, .group-contact { grid-template-columns: 1fr; gap: 26px; }
  .group-feature-reverse > :first-child { order: 0; }
  .group-cards { grid-template-columns: 1fr; gap: 12px; }
  .group-cards-list .group-card { grid-template-columns: 28px 1fr; gap: 10px 16px; padding: 24px 0; }
  .group-cards-list .group-card p, .group-cards-list .group-card-body { grid-column: 2; }
  .group-stats { grid-template-columns: 1fr; gap: 16px; }
  .group-invitation { padding: 40px 6vw; border-radius: 0; }
  .group-manage .ops-form { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .group-page { padding-top: 40px; padding-bottom: 72px; }
  .group-page h1, .group-hero h1 { font-size: clamp(34px, 9vw, 48px); }
  .group-page h2, .group-section h2, .group-feature h2, .group-invitation h2 { font-size: clamp(26px, 7vw, 34px); }
  .group-pathways { grid-template-columns: 1fr; }
  .group-footer-grid { grid-template-columns: 1fr; }
  .group-footer-bottom { flex-direction: column; }
  .group-facts div { grid-template-columns: 1fr; }
  .auth-shell { grid-template-columns: 1fr; gap: 0; }
  .auth-intro, .auth-card-elevated { padding: 24px 16px; }
  .auth-benefits { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}