/*
Theme Name: Milestone Grid
Theme URI: https://milestonegrid.com
Author: Milestone Grid Consultant
Author URI: https://milestonegrid.com
Description: Custom brand theme for Milestone Grid Consultant — consulting, procurement and logistics. Fully editable Home, About, Services and Contact pages via the WordPress block editor.
Version: 1.3.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: milestonegrid
*/

/* ================= Design tokens ================= */
:root{
	--mg-navy:#074180;
	--mg-navy-dark:#052f5c;
	--mg-teal:#08add7;
	--mg-teal-deep:#068fb3;
	--mg-ink:#1c2a38;
	--mg-muted:#5b6b7c;
	--mg-light:#f3f8fb;
	--mg-border:#e2ebf1;
	--mg-max:1180px;
	--mg-gut:max(24px, calc(50vw - (var(--mg-max) / 2)));
	--font-heading:'Poppins', 'Segoe UI', Arial, sans-serif;
	--font-body:'Inter', 'Segoe UI', Arial, sans-serif;
}

/* ================= Reset & base ================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0;
	font-family:var(--font-body);
	color:var(--mg-ink);
	font-size:16px;
	line-height:1.7;
	background:#fff;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--mg-teal-deep); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4,h5,h6{ font-family:var(--font-heading); color:var(--mg-navy); line-height:1.3; font-weight:600; margin:0 0 16px 0; }
p{ margin:0 0 16px 0; }
ul{ margin:0; padding:0; list-style:none; }
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; }
.skip-link{ position:absolute; left:-9999px; top:0; background:#fff; padding:12px 20px; z-index:9999; }
.skip-link:focus{ left:16px; top:16px; }
.mg-icon{ display:block; flex-shrink:0; }

/* ================= Brand palette utility classes =================
   WordPress normally auto-generates these from add_theme_support(
   'editor-color-palette') via its Global Styles stylesheet. They are
   duplicated here explicitly so every card/panel colors correctly
   even on setups where global styles output is disabled or cached
   out (and so this file previews correctly stand-alone). */
.has-mg-navy-background-color{ background-color:var(--mg-navy) !important; }
.has-mg-navy-dark-background-color{ background-color:var(--mg-navy-dark) !important; }
.has-mg-teal-background-color{ background-color:var(--mg-teal) !important; }
.has-mg-teal-deep-background-color{ background-color:var(--mg-teal-deep) !important; }
.has-mg-ink-background-color{ background-color:var(--mg-ink) !important; }
.has-mg-light-background-color{ background-color:var(--mg-light) !important; }
.has-mg-white-background-color{ background-color:#fff !important; }
.has-mg-navy-color{ color:var(--mg-navy) !important; }
.has-mg-navy-dark-color{ color:var(--mg-navy-dark) !important; }
.has-mg-teal-color{ color:var(--mg-teal) !important; }
.has-mg-teal-deep-color{ color:var(--mg-teal-deep) !important; }
.has-mg-ink-color{ color:var(--mg-ink) !important; }
.has-mg-light-color{ color:var(--mg-light) !important; }
.has-mg-white-color{ color:#fff !important; }

/* ================= Layout helpers ================= */
.mg-container{ max-width:var(--mg-max); margin:0 auto; padding:0 24px; }
.mg-section{ padding:72px var(--mg-gut); max-width:var(--mg-max); margin:0 auto; }
.mg-section-tint{ background:var(--mg-light); }
.wp-block-group.mg-section-tint{ max-width:none; padding-left:var(--mg-gut); padding-right:var(--mg-gut); }
.mg-bleed{
	width:100vw; position:relative; left:50%; right:50%;
	margin-left:-50vw; margin-right:-50vw;
	padding:88px var(--mg-gut);
}
.mg-kicker{ font-family:var(--font-heading); font-size:12.5px; letter-spacing:2px; font-weight:700; color:var(--mg-teal-deep); margin-bottom:12px; }
.mg-lead-tag{ display:inline-block; background:var(--mg-teal); color:#fff !important; font-family:var(--font-heading); font-size:12px; font-weight:700; letter-spacing:1.5px; padding:6px 14px; border-radius:20px; margin-bottom:14px; }
.mg-link-arrow a{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--mg-teal-deep); }
.mg-center{ text-align:center; }
.mg-wws-title{ font-family:var(--font-heading); font-size:13px; letter-spacing:1.5px; color:var(--mg-teal-deep); text-transform:uppercase; margin:28px 0 16px 0; }

/* ================= Buttons ================= */
.wp-block-button.mg-btn .wp-block-button__link,
a.mg-btn{
	font-family:var(--font-heading); font-weight:600; font-size:15px;
	padding:14px 28px; border-radius:8px; display:inline-block;
	background:var(--mg-teal); color:#fff !important; text-decoration:none !important;
	border:2px solid var(--mg-teal);
}
.wp-block-button.mg-btn .wp-block-button__link:hover{ background:var(--mg-teal-deep); border-color:var(--mg-teal-deep); }
.wp-block-button.mg-btn.is-style-outline .wp-block-button__link{
	background:transparent; color:#fff !important; border:2px solid rgba(255,255,255,0.7);
}
.wp-block-button.mg-btn.is-style-outline .wp-block-button__link:hover{ background:rgba(255,255,255,0.12); }
.wp-block-button.mg-btn-light .wp-block-button__link{ background:#fff; color:var(--mg-navy) !important; border-color:#fff; }
.wp-block-button.mg-btn-light .wp-block-button__link:hover{ background:var(--mg-light); }
.wp-block-buttons{ display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; }

/* ================= Header ================= */
.mg-header{ position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid var(--mg-border); }
.mg-header-inner{ display:flex; align-items:center; gap:24px; padding:14px 24px; }
.mg-header-logo img{ height:40px; width:auto; }
.mg-logo-fallback{ display:inline-block; }
.mg-nav{ flex:1; display:flex; justify-content:center; }
.mg-menu{ display:flex; gap:32px; }
.mg-menu li{ position:relative; }
.mg-menu a{ color:var(--mg-navy); font-weight:600; font-size:15px; }
.mg-menu a:hover{ color:var(--mg-teal-deep); text-decoration:none; }
.mg-menu ul{ display:none; position:absolute; top:100%; left:0; background:#fff; box-shadow:0 12px 24px rgba(7,65,128,0.12); border-radius:8px; padding:8px; min-width:200px; }
.mg-menu li:hover > ul{ display:block; }
.mg-menu ul a{ display:block; padding:8px 12px; white-space:nowrap; }
.mg-header-actions{ display:flex; align-items:center; gap:16px; }
.mg-btn-sm{ padding:10px 20px !important; font-size:14px !important; }
.mg-nav-toggle{ display:none; background:none; border:0; padding:6px; cursor:pointer; }
.mg-nav-mobile{ display:none; flex-direction:column; gap:4px; padding:12px 24px 20px; border-top:1px solid var(--mg-border); }
.mg-nav-mobile .mg-menu{ flex-direction:column; gap:0; }
.mg-nav-mobile .mg-menu a{ display:block; padding:12px 0; border-bottom:1px solid var(--mg-border); }
.mg-nav-mobile .mg-menu ul{ position:static; box-shadow:none; display:block; padding-left:16px; }
.mg-nav-mobile .mg-btn{ margin-top:12px; text-align:center; }
.mg-header.is-open .mg-nav-mobile{ display:flex; }

/* ================= Hero / page hero ================= */
.mg-hero{ position:relative; overflow:hidden; color:#fff; }
.mg-hero::after{
	content:""; position:absolute; top:-120px; right:-120px; width:420px; height:420px;
	background:radial-gradient(circle,rgba(8,173,215,0.35) 0%,rgba(8,173,215,0) 70%);
	pointer-events:none;
}
.mg-hero-title{ color:#fff; font-size:clamp(30px,4vw,46px); max-width:820px; }
.mg-hero p{ color:rgba(255,255,255,0.88); max-width:640px; font-size:17px; }
.mg-eyebrow{ font-family:var(--font-heading); font-size:12.5px; letter-spacing:2px; font-weight:700; color:var(--mg-teal) !important; text-transform:uppercase; }
.mg-page-hero{ position:relative; overflow:hidden; color:#fff; padding-top:64px; padding-bottom:64px; }
.mg-page-hero-title{ color:#fff; font-size:clamp(28px,3.6vw,38px); margin-bottom:0; }
.mg-page-hero .mg-eyebrow{ display:block; margin-bottom:10px; }
.mg-cta-band{ color:#fff; text-align:center; }
.mg-cta-title{ color:#fff; font-size:clamp(24px,3vw,32px); }
.mg-cta-band .wp-block-buttons{ justify-content:center; }

/* ================= Grids & cards ================= */
.mg-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.mg-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:8px; }
.mg-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:8px; }

/* CSS Grid only applies grid-template-columns to DIRECT children. If a
   Group block wrapping mg-grid-2/3/4 is ever opened and re-saved in the
   block editor, WordPress can insert an extra ".wp-block-group__inner-container"
   div between the grid and its cards (a long-standing Group block quirk),
   which silently breaks the column layout into a single stacked column.
   This neutralizes that wrapper wherever it appears so the grid always
   sees its cards as direct children, regardless of how the block was
   last saved. */
.mg-grid-2 > .wp-block-group__inner-container,
.mg-grid-3 > .wp-block-group__inner-container,
.mg-grid-4 > .wp-block-group__inner-container{ display:contents; }

.mg-icon-circle{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(7,65,128,0.08); margin-bottom:18px; }
.mg-icon-circle.on-color{ background:rgba(255,255,255,0.18); }

.mg-pillar-card,.mg-value-card{ padding:34px 28px; border-radius:14px; color:#fff; }
.mg-pillar-card h3,.mg-value-card h3{ color:#fff; font-size:19px; }
.mg-pillar-card p,.mg-value-card p{ color:rgba(255,255,255,0.9); font-size:14.5px; margin-bottom:12px; }
.mg-pillar-card a{ color:#fff; font-weight:600; font-size:14px; display:inline-flex; align-items:center; gap:6px; }

.mg-commit-card,.mg-why-card{ padding:30px 26px; border-radius:14px; background:var(--mg-light); border:1px solid var(--mg-border); }
.mg-commit-card h3,.mg-why-card h3{ font-size:17.5px; margin-bottom:8px; }
.mg-commit-card p,.mg-why-card p{ font-size:14px; color:var(--mg-muted); margin-bottom:0; }
.mg-commit-card .mg-icon-circle,.mg-why-card .mg-icon-circle{ background:rgba(8,173,215,0.12); }

/* ================= Chip list ================= */
.mg-chip-list{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.mg-chip-list li{ display:flex; align-items:center; gap:8px; background:var(--mg-light); border:1px solid var(--mg-border); border-radius:30px; padding:9px 16px; font-size:14px; font-weight:600; color:var(--mg-navy); }

/* ================= Split panels (vision/mission) ================= */
.mg-split-panel{ padding:40px 34px; border-radius:14px; color:#fff; }
.mg-split-kicker{ color:#fff; font-size:14px; letter-spacing:1.5px; text-transform:uppercase; margin:6px 0 14px 0; }
.mg-split-panel p{ color:rgba(255,255,255,0.92); font-size:15.5px; margin-bottom:0; }

/* ================= Service flow diagram ================= */
.mg-flow-wrap{ position:relative; margin:32px 0 8px 0; overflow-x:auto; padding-bottom:8px; }
.mg-flow-line{ position:absolute; top:26px; left:26px; right:26px; height:2px; background:var(--mg-border); }
.mg-flow-row{ display:flex; justify-content:space-between; gap:8px; position:relative; min-width:640px; }
.mg-flow-node{ display:flex; flex-direction:column; align-items:center; width:100px; text-align:center; }
.mg-flow-num{ font-family:var(--font-heading); font-size:11px; font-weight:700; color:var(--mg-teal-deep); margin-bottom:4px; }
.mg-flow-ic{ width:52px; height:52px; border-radius:50%; background:var(--mg-navy); display:flex; align-items:center; justify-content:center; z-index:1; }
.mg-flow-ic.is-teal{ background:var(--mg-teal-deep); }
.mg-flow-label{ font-size:13px; font-weight:600; color:var(--mg-navy); margin-top:10px; }
.mg-flow-note{ background:var(--mg-light); border:1px solid var(--mg-border); border-radius:12px; padding:22px 26px; margin-top:24px; color:var(--mg-muted); font-size:14.5px; }

/* ================= Approach pillars & rights band ================= */
.mg-pillars-row{ display:flex; gap:16px; margin-top:24px; flex-wrap:wrap; }
.mg-pillar{ flex:1 1 160px; background:var(--mg-light); border:1px solid var(--mg-border); border-radius:12px; padding:26px 16px; text-align:center; }
.mg-pillar-label{ font-size:13.5px; font-weight:600; color:var(--mg-navy); margin-top:12px; }
.mg-rights-band{ margin-top:32px; border-radius:14px; padding:34px 30px; }
.mg-rights-title{ color:#fff; font-size:14px; letter-spacing:1.5px; text-transform:uppercase; opacity:0.9; margin-bottom:20px; }
.mg-rights-row{ margin-top:0; }
.mg-right-item{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.mg-right-item svg{ width:40px; height:40px; padding:9px; border-radius:50%; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.35); }
.mg-right-label{ color:#fff; font-size:13.5px; font-weight:600; }

/* ================= Contact page ================= */
.mg-contact-grid{ align-items:start; }
.mg-contact-info{ display:flex; flex-direction:column; gap:14px; margin-top:20px; }
.mg-contact-row{ display:flex; align-items:center; gap:12px; background:var(--mg-light); border:1px solid var(--mg-border); border-radius:10px; padding:14px 18px; font-weight:600; color:var(--mg-navy) !important; text-decoration:none !important; }
/* Forminator Form Styling to Match Theme */
.forminator-ui.forminator-custom-form { margin-top: 16px; }
.forminator-ui.forminator-custom-form .forminator-input,
.forminator-ui.forminator-custom-form .forminator-textarea {
	width:100%; padding:14px 16px !important; 
	border:1px solid var(--mg-border) !important; 
	border-radius:8px !important; 
	font-family:var(--font-body) !important; 
	font-size: 15px !important;
	color: var(--mg-navy) !important;
	background: var(--mg-light) !important;
	box-shadow: none !important;
	transition: border-color 0.2s, background 0.2s;
}
.forminator-ui.forminator-custom-form .forminator-input:focus,
.forminator-ui.forminator-custom-form .forminator-textarea:focus {
	border-color: var(--mg-teal) !important;
	background: #fff !important;
}
.forminator-ui.forminator-custom-form .forminator-label {
	font-weight: 600 !important;
	color: var(--mg-navy-dark) !important;
	font-family: var(--font-body) !important;
	font-size: 14.5px !important;
	margin-bottom: 6px !important;
}
.forminator-ui.forminator-custom-form .forminator-button-submit {
	font-family:var(--font-heading) !important; 
	font-weight:600 !important; 
	background:var(--mg-teal) !important; 
	color:#fff !important; 
	border:0 !important; 
	padding:14px 32px !important; 
	border-radius:8px !important; 
	cursor:pointer !important;
	font-size: 16px !important;
	transition: background 0.2s, transform 0.1s !important;
	width: auto !important;
}
.forminator-ui.forminator-custom-form .forminator-button-submit:hover { 
	background:var(--mg-teal-deep) !important; 
	transform: translateY(-1px) !important;
}

/* ================= Footer ================= */
.mg-footer{ background:var(--mg-navy-dark); color:rgba(255,255,255,0.85); margin-top:40px; }
.mg-footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; padding:64px 24px 40px; }
.mg-footer-logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-heading); font-weight:700; font-size:19px; margin-bottom:14px; }
.wm-teal{ color:var(--mg-teal); }
.wm-white{ color:#fff; }
.mg-footer-tagline{ font-size:12.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--mg-teal); margin-bottom:14px; }
.mg-footer-desc{ font-size:14px; color:rgba(255,255,255,0.7); }
.mg-footer-social{ display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important; gap:10px; margin-top:18px; }
.mg-footer-social a{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:36px !important; height:36px !important; border-radius:50%; background:rgba(8,173,215,0.18); color:var(--mg-teal); transition:background .2s; flex-shrink:0; text-decoration:none; }
.mg-footer-social a:hover{ background:var(--mg-teal) !important; color:#fff; }
.mg-footer-social a svg{ display:block !important; width:18px !important; height:18px !important; }
.mg-footer-col h4{ color:#fff; font-size:15px; margin-bottom:16px; }
.mg-footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.mg-footer-col a{ color:rgba(255,255,255,0.78); font-size:14.5px; }
.mg-footer-col a:hover{ color:#fff; }
.mg-footer-contact li,.mg-footer-contact a{ display:flex; align-items:flex-start; gap:8px; font-size:14px; color:rgba(255,255,255,0.78); }
.mg-footer-bottom{ border-top:1px solid rgba(255,255,255,0.12); }
.mg-footer-bottom-inner{ display:flex; justify-content:space-between; align-items:center; padding:20px 24px; font-size:13px; color:rgba(255,255,255,0.6); flex-wrap:wrap; gap:10px; }
.mg-footer-menu{ display:flex; gap:20px; list-style:none; padding:0; margin:0; }
.mg-footer-menu a{ color:rgba(255,255,255,0.6); }

/* ================= Blog / archive fallback ================= */
.mg-archive-title{ margin-bottom:32px; }
.mg-post-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:28px; }
.mg-post-card{ border:1px solid var(--mg-border); border-radius:12px; overflow:hidden; padding:0 0 20px 0; }
.mg-post-card-thumb img{ width:100%; }
.mg-post-card h2{ font-size:18px; padding:0 20px; margin-top:16px; }
.mg-post-card-meta{ padding:0 20px; font-size:13px; color:var(--mg-muted); margin-bottom:10px; }
.mg-post-card-excerpt{ padding:0 20px; font-size:14px; color:var(--mg-muted); }
.mg-post-card .mg-link-arrow{ padding:0 20px; display:inline-block; margin-top:8px; }
.mg-pagination{ margin-top:40px; text-align:center; }
.mg-page-links{ padding:20px 0; }

/* ================= Responsive ================= */
@media (max-width:900px){
	.mg-nav, .mg-header-actions .mg-btn-sm{ display:none; }
	.mg-nav-toggle{ display:inline-flex; }
	.mg-grid-2,.mg-grid-3,.mg-grid-4{ grid-template-columns:1fr 1fr; }
	.mg-footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
	.mg-grid-2,.mg-grid-3,.mg-grid-4{ grid-template-columns:1fr; }
	.mg-footer-top{ grid-template-columns:1fr; }
	.mg-section,.mg-bleed{ padding-top:56px; padding-bottom:56px; }
	.mg-pillars-row{ flex-direction:column; }
	.mg-svc-detail-row{ flex-direction:column; }
}

/* ================= Service Detail Rows ================= */
.mg-svc-detail-row{
	display:flex; align-items:flex-start; gap:24px;
	background:#fff; border:1px solid #e8eef4; border-radius:10px;
	padding:28px 32px; margin-bottom:16px;
	transition:box-shadow .2s;
}
.mg-svc-detail-row:hover{ box-shadow:0 4px 20px rgba(7,65,128,.08); }
.mg-svc-icon{
	display:flex; align-items:center; justify-content:center;
	width:56px; height:56px; border-radius:12px;
	background:rgba(8,173,215,.1); flex-shrink:0;
}
.mg-svc-icon svg{ width:26px; height:26px; }
.mg-svc-detail-body{ flex:1; }
.mg-svc-detail-title{
	font-size:17px; font-weight:700; color:var(--mg-navy);
	margin:0 0 10px; font-family:var(--font-heading);
}
.mg-svc-detail-list{
	margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px;
}
.mg-svc-detail-list li{ font-size:14.5px; color:var(--mg-ink); line-height:1.6; }
.mg-cta-sub{ font-size:16px; color:rgba(255,255,255,.8); text-align:center; margin-bottom:8px; }

/* ================= What We Deliver — Accordion ================= */
.mg-acc-wrap{
	border-radius:14px; overflow:hidden;
	box-shadow:0 6px 36px rgba(7,65,128,.11);
	margin-top:32px; border:1px solid #e4edf5;
}
.mg-acc-item{ border-bottom:1px solid #e4edf5; }
.mg-acc-item:last-child{ border-bottom:none; }

/* Header button */
.mg-acc-btn{
	display:flex; align-items:center; gap:16px;
	width:100%; padding:20px 28px; border:none;
	background:#fff; cursor:pointer; text-align:left;
	border-left:4px solid transparent;
	transition:background .22s, border-color .22s;
	outline:none;
}
.mg-acc-btn:hover{ background:#f4f8fc; }
.mg-acc-item.mg-acc-open .mg-acc-btn{
	background:var(--mg-navy); border-left-color:var(--mg-teal);
}

/* Number badge */
.mg-acc-num{
	font-family:var(--font-heading); font-size:12px; font-weight:700;
	color:#c0cdd8; min-width:26px; flex-shrink:0; line-height:1;
}
.mg-acc-item.mg-acc-open .mg-acc-num{ color:var(--mg-teal); }

/* Icon circle */
.mg-acc-icon-wrap{
	width:44px; height:44px; border-radius:11px; flex-shrink:0;
	background:rgba(8,173,215,.1); display:flex;
	align-items:center; justify-content:center;
	color:var(--mg-teal); transition:background .22s, color .22s;
}
.mg-acc-icon-wrap svg{ width:22px; height:22px; }
.mg-acc-item.mg-acc-open .mg-acc-icon-wrap{
	background:rgba(255,255,255,.15); color:#fff;
}

/* Title group */
.mg-acc-title-group{ flex:1; display:flex; flex-direction:column; gap:3px; }
.mg-acc-tag{
	font-size:10.5px; font-weight:700; letter-spacing:1.4px;
	text-transform:uppercase; color:#a0b4c6;
	transition:color .22s;
}
.mg-acc-item.mg-acc-open .mg-acc-tag{ color:rgba(8,173,215,.8); }
.mg-acc-name{
	font-size:15.5px; font-weight:700; color:var(--mg-navy);
	font-family:var(--font-heading); line-height:1.2;
	transition:color .22s;
}
.mg-acc-item.mg-acc-open .mg-acc-name{ color:#fff; }

/* Chevron */
.mg-acc-chevron{
	flex-shrink:0; color:#b0c0ce;
	transition:transform .3s cubic-bezier(.4,0,.2,1), color .22s;
}
.mg-acc-item.mg-acc-open .mg-acc-chevron{
	transform:rotate(180deg); color:var(--mg-teal);
}

/* Body — closed */
.mg-acc-body{
	max-height:0; overflow:hidden;
	transition:max-height .42s cubic-bezier(.4,0,.2,1);
}
/* Body — open */
.mg-acc-item.mg-acc-open .mg-acc-body{ max-height:360px; }

/* Inner content */
.mg-acc-inner{
	display:flex; flex-direction:column; gap:18px;
	padding:24px 28px 28px 96px; /* indent to align with name text */
	background:#f7fbfd;
	border-top:1px solid rgba(8,173,215,.18);
}
.mg-acc-intro{
	font-size:14.5px; color:var(--mg-ink); line-height:1.75; margin:0;
	border-left:3px solid var(--mg-teal); padding-left:14px;
}
.mg-acc-list{
	list-style:none; margin:0; padding:0;
	display:flex; flex-direction:column; gap:12px;
}
.mg-acc-list li{
	display:flex; align-items:flex-start; gap:10px;
	font-size:14px; color:var(--mg-ink); line-height:1.65;
}
.mg-acc-list li svg{ width:16px; height:16px; flex-shrink:0; margin-top:3px; }
.mg-acc-cta{
	display:inline-flex; align-items:center; gap:5px;
	font-size:13px; font-weight:700; color:var(--mg-teal);
	text-decoration:none; letter-spacing:.3px;
	transition:gap .2s, opacity .2s;
}
.mg-acc-cta:hover{ gap:9px; opacity:.8; }

/* Responsive */
@media(max-width:600px){
	.mg-acc-btn{ padding:16px 20px; gap:12px; }
	.mg-acc-inner{ padding:20px; }
	.mg-acc-num{ display:none; }
}