:root{
  --purple:#8f46bd;
  --blue:#12627f;
  --text:#404040;
  --muted:#999;
  --light:#f7f7f7;
  --contact:#d8d8d8;
  --education:#a9a331;
  --emerging:#dc5662;
  --rule:#176783;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);font-family:"Open Sans",Arial,sans-serif;background:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1220px,90%);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header */
.site-header{background:#fff;min-height:155px;display:flex;align-items:center}
.header-inner{width:min(1900px,94%);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand img{width:405px;max-width:28vw;height:auto;object-fit:contain;object-position:left center}
.main-nav{display:flex;gap:3.4rem;align-items:center;text-transform:uppercase;letter-spacing:.22em;font-family:Montserrat,Arial,sans-serif;font-size:14px;color:#aaa}
.main-nav a{padding:.75rem 0;transition:.2s;color:#a8a8a8}
.main-nav a:hover,.main-nav a.active{color:#296d86}
.menu-toggle{display:none;background:none;border:0;padding:10px;cursor:pointer}
.menu-toggle span:not(.sr-only){display:block;width:28px;height:2px;background:#333;margin:6px 0}

/* Home */
.home-hero{position:relative;background:#eee;overflow:hidden}
.home-hero-image{width:100%;height:auto;display:block}
.home-nav-overlay{position:absolute;top:9.4%;right:5.2%;display:flex;gap:3.6rem;text-transform:uppercase;letter-spacing:.18em;font:500 13px/1 Montserrat,Arial,sans-serif}
.home-nav-overlay a{color:transparent;min-width:75px;height:46px}
.patterned-section{position:relative;overflow:hidden;background:#fafafa;padding:46px 0 115px;min-height:820px}
.corner-art{position:absolute;z-index:0;opacity:.75;pointer-events:none}
.corner-art-right{right:-55px;top:-10px;width:365px}
.corner-art-left{left:-55px;bottom:-40px;width:360px}
.patterned-section>.container{position:relative;z-index:1}
.intro-block{text-align:center}
.intro-block h1,.what-home h2,.what-section>h1{font-family:Montserrat,Arial,sans-serif;color:#762b91;font-size:43px;letter-spacing:.015em;margin:0 0 44px;font-weight:700}
.intro-block p{font-size:18px;line-height:1.8;margin:0 0 42px;color:#505050}
.what-home{text-align:center}
.what-home h2{margin-bottom:38px}
.home-cards{display:grid;grid-template-columns:1fr 1fr;gap:88px;align-items:start}
.home-card{padding:0 40px}
.home-card img{width:210px;height:210px;object-fit:cover;margin:0 auto 42px}
.home-card h3{font:700 17px/1.3 Montserrat,Arial,sans-serif;margin:0 0 45px}
.education-title{color:var(--education)}
.emerging-title{color:var(--emerging)}
.home-card p{font-size:15px;line-height:2.25;text-align:left;margin:0 auto 38px;max-width:560px}
.outline-button{display:inline-block;border:3px solid #14627f;padding:17px 26px;color:#14627f;font:700 16px Montserrat,Arial,sans-serif;background:#fff;transition:.2s}
.outline-button:hover{background:#14627f;color:#fff}
.home-divider{height:92px;background:#777;border-bottom:4px solid var(--rule)}
.site-footer{min-height:220px;display:flex;align-items:center;justify-content:center;text-align:center;padding:35px 25px;background:#fff;font-size:14px}
.site-footer a{color:#5b9fc2}

/* What we do */
.what-page{min-height:785px}
.what-section{padding-top:105px;text-align:center}
.what-section>h1{margin-bottom:70px;font-size:44px}
.what-grid{display:grid;grid-template-columns:1fr 1fr;gap:150px}
.what-card img{width:225px;height:225px;object-fit:cover;margin:0 auto 58px}
.what-card h2{font:700 22px Montserrat,Arial,sans-serif;margin-bottom:70px}
.what-card p{font-size:18px;line-height:1.9;max-width:650px;margin:auto}
.thin-rule{border-top:5px solid var(--rule)}
.tall-footer{min-height:265px}

/* Contact */
.compact-header{min-height:145px}
.contact-hero img{width:100%;height:370px;object-fit:cover;object-position:center}
.contact-area{background:var(--contact);padding:105px 0 85px}
.contact-wrap{width:min(1040px,88%);margin:auto}
.contact-wrap h1{text-align:center;color:var(--purple);font:700 40px Montserrat,Arial,sans-serif;margin:0 0 48px}
.required-note{font-size:18px;font-style:italic;margin-bottom:36px}
.required-note span,.contact-form label span{color:#f03b30}
.contact-form{display:grid;grid-template-columns:1fr 1fr;column-gap:140px;row-gap:25px}
.form-column{display:flex;flex-direction:column}
.contact-form label{font-weight:700;font-size:14px;margin:0 0 12px}
.contact-form input,.contact-form textarea{border:1px solid #a5a5a5;background:#fff;font:16px "Open Sans",Arial,sans-serif;padding:13px 14px;outline:none;transition:.2s}
.contact-form input{height:52px;margin-bottom:25px}
.contact-form textarea{min-height:225px;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(18,98,127,.12)}
.form-actions{grid-column:1/-1;text-align:center;margin-top:2px}
.submit-button{background:#fff;border:3px solid var(--blue);padding:16px 24px;color:var(--blue);font-weight:700;cursor:pointer;font-family:Montserrat,Arial,sans-serif}
.submit-button:hover{background:var(--blue);color:#fff}
.form-status{min-height:20px;margin:10px 0 0;font-size:14px}
.career-copy{text-align:center;margin-top:20px;color:#222;font-size:14px;line-height:1.5}
.career-copy a{color:#65a4c0}
.contact-footer{min-height:190px}

/* Media centre */
.media-header{min-height:125px;border-bottom:1px solid #eee;position:sticky;top:0;z-index:10}
.media-header .brand img{width:300px}
.media-main{padding:60px 0 100px}
.media-layout{width:min(1050px,92%);margin:auto;display:grid;grid-template-columns:minmax(0,760px) 220px;gap:55px;align-items:start}
.news-post{display:grid;grid-template-columns:85px minmax(0,1fr);gap:18px;margin-bottom:70px}
.date-block{font-family:Montserrat,Arial,sans-serif;color:#777;text-align:right;padding-top:4px;font-size:12px}
.date-block span{display:block;font-weight:600;color:#555}
.date-block small{display:block;margin-bottom:8px;color:#999}
.date-block a{color:#4b89a4;font-size:10px}
.post-body h2{font:600 16px/1.45 Montserrat,Arial,sans-serif;color:#225a79;margin:0 0 18px}
.post-body img{max-width:620px;width:100%;height:auto;margin:0 0 16px}
.post-media-inline{display:grid;grid-template-columns:230px 1fr;gap:20px;align-items:start}
.post-media-inline img{width:230px;margin:0}
.post-body p{font-size:13px;line-height:1.85;color:#444;margin:0 0 12px}
.media-sidebar{font-size:12px;line-height:1.7;color:#777}
.media-sidebar h3{font:600 14px Montserrat,Arial,sans-serif;color:#333;margin:0 0 10px;border-bottom:1px solid #ddd;padding-bottom:8px}
.media-sidebar p{margin:0 0 30px}
.media-sidebar a{display:block;color:#4d8aa4;margin:4px 0}
.media-sidebar h3:not(:first-child){margin-top:30px}
.media-footer{border-top:1px solid #ddd;min-height:160px}

/* Responsive */
@media (max-width:1000px){
  .site-header{min-height:105px}
  .brand img{width:260px;max-width:50vw}
  .menu-toggle{display:block}
  .main-nav{position:absolute;left:0;right:0;top:105px;background:#fff;display:none;flex-direction:column;gap:0;padding:12px 24px 22px;border-top:1px solid #eee;box-shadow:0 12px 20px rgba(0,0,0,.08);z-index:50}
  .main-nav.open{display:flex}
  .main-nav a{padding:14px;width:100%;text-align:center}
  .home-nav-overlay{display:none}
  .home-hero::before{content:"";position:absolute;left:0;right:0;top:5%;height:90px;background:#fff;z-index:2}
  .home-hero::after{content:"MiDCOM GROUP";position:absolute;left:5%;top:7.5%;z-index:3;font:700 24px Montserrat,Arial,sans-serif;color:#111}
  .home-cards,.what-grid{grid-template-columns:1fr;gap:70px}
  .home-card p{text-align:center}
  .contact-form{grid-template-columns:1fr;column-gap:0}
  .contact-form .form-actions{grid-column:1}
  .media-layout{grid-template-columns:1fr}
  .media-sidebar{display:none}
}
@media (max-width:720px){
  .desktop-only{display:none}
  .home-hero-image{width:auto;max-width:none;height:520px;object-fit:cover;object-position:center top}
  .patterned-section{padding:55px 0 80px}
  .intro-block h1,.what-home h2,.what-section>h1{font-size:32px}
  .intro-block p{font-size:16px}
  .home-card{padding:0}
  .home-card img,.what-card img{width:180px;height:180px}
  .what-section{padding-top:70px}
  .what-card h2{margin-bottom:30px}
  .what-card p{font-size:16px}
  .contact-hero img{height:220px}
  .contact-area{padding:65px 0}
  .contact-wrap h1{font-size:31px}
  .news-post{grid-template-columns:1fr}
  .date-block{text-align:left;display:flex;gap:8px;align-items:center}
  .date-block span,.date-block small{display:inline;margin:0}
  .post-media-inline{grid-template-columns:1fr}
  .post-media-inline img{width:100%}
}