/* Service-page styles are isolated from the existing site templates. */
.mg-services-page { --mgs-cream:#eee8d8; --mgs-ink:#312927; --mgs-sage:#a6aea3; --mgs-orange:#ff3804; }
.mg-services-page header { background:var(--mgs-cream); }
.mg-services-page header .header_block .header_menu > ul > li > a { color:var(--mgs-ink); }
.mgs { background:#000; color:#fff; font-family:Roboto,sans-serif; font-size:18px; font-weight:300; line-height:1.5556; }
.mgs *, .mgs *::before, .mgs *::after { box-sizing:border-box; }
.mgs h1,.mgs h2,.mgs h3 { font-family:Michroma,sans-serif; font-weight:400; padding:0; letter-spacing:0; color:inherit; }
.mgs h1 { font-size:clamp(32px,3.4722vw,60px); line-height:1.325; margin:0 0 30px; }
.mgs h2 { font-size:clamp(26px,2.43vw,42px); line-height:1.4286; margin:0 0 32px; }
.mgs h3 { font-size:clamp(24px,2.2vw,38px); line-height:1.3684; margin:0 0 26px; }
.mgs p { color:inherit; font-size:18px; font-weight:300; line-height:28px; margin:0 0 24px; padding:0; }
.mgs p:last-child { margin-bottom:0; }
.mgs img { display:block; }
.mgs-container { width:calc(100% - 12.2%); max-width:1518px; margin-inline:auto; }
.mgs-wide { width:calc(100% - 5.8%); max-width:1628px; margin-inline:auto; }
.mgs-centered { text-align:center; max-width:1020px; margin-inline:auto!important; }
.mgs-hero { color:var(--mgs-ink); background:var(--mgs-cream); padding:55px 0 80px; }
.mgs-hero__grid { display:grid; grid-template-columns:minmax(0,1.53fr) minmax(0,1fr); gap:7%; align-items:center; }
.mgs-hero__image { aspect-ratio:553/608; border-radius:20px; overflow:hidden; }
.mgs-hero__image img { width:100%; height:100%; object-fit:cover; }
.mgs .mgs-lead { font-size:24px; line-height:32px; }
.mgs-buttons { display:flex; gap:28px; flex-wrap:wrap; margin-top:36px; }
.mgs .mgs-button { display:inline-flex; align-items:center; justify-content:center; text-align:center; border:3px solid var(--mgs-orange); border-radius:50px; background:var(--mgs-orange); color:#fff; font-family:'Roboto Condensed',sans-serif; font-size:16px; font-weight:400; letter-spacing:.64px; line-height:1.2; padding:14px 34px; min-height:53px; text-transform:uppercase; text-decoration:none; transition:background .18s,color .18s,border-color .18s; }
.mgs .mgs-button--outline { border-color:currentColor; background:transparent; color:inherit; }
.mgs .mgs-button:not(.mgs-button--outline):hover { background:transparent; border-color:var(--mgs-orange); color:var(--mgs-orange); }
.mgs .mgs-button--outline:hover { background:#fff; border-color:#fff; color:#000; }
.mgs .mgs-hero .mgs-button--outline:hover { background:#000; border-color:#000; color:#fff; }
.mgs a:focus-visible { outline:3px solid #f98c68; outline-offset:5px; }
.mgs-intro-wrap { background:linear-gradient(var(--mgs-cream) 50%,#000 50%); }
.mgs-intro { padding:80px; border-radius:20px; background:#383838; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:80px; }
.mgs-intro--sage { background:var(--mgs-sage); color:#000; }
.mgs-intro--text { grid-template-columns:.8fr 1.2fr; padding:85px 100px; }
.mgs-intro__image { aspect-ratio:683/541; overflow:hidden; border-radius:20px; }
.mgs-intro__image img { width:100%; height:100%; object-fit:cover; }
.mgs-bullets { margin:24px 0; }
.mgs-bullets ul { margin:0; padding-left:22px; list-style:disc; }
.mgs-bullets li { padding-left:1px; }
.mgs--computer-repair .mgs-intro .mgs-bullets ul { padding-left:0; list-style:none; }
.mgs--computer-repair .mgs-intro .mgs-bullets li { position:relative; padding-left:23px; }
.mgs--computer-repair .mgs-intro .mgs-bullets li::before { content:""; position:absolute; top:10px; left:3px; width:7px; height:7px; background:currentColor; transform:rotate(45deg); }
.mgs--managed-it .mgs-split--audience .mgs-bullets ul { padding-left:0; list-style:none; }
.mgs--managed-it .mgs-split--audience .mgs-bullets li { position:relative; padding-left:23px; font-family:Roboto,sans-serif; font-size:18px; font-weight:400; line-height:28px; }
.mgs--managed-it .mgs-split--audience .mgs-bullets li::before { content:""; position:absolute; top:10px; left:3px; width:7px; height:7px; background:#292929; transform:rotate(45deg); }
.mgs-services { padding-top:88px; padding-bottom:96px; }
.mgs-services > h2 { margin-bottom:70px; }
.mgs-service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:78px 9%; }
.mgs-service { scroll-margin-top:130px; }
.mgs-services .mgs-service h3 { font-size:38px; }
.mgs-service .mgs-button { margin-top:28px; }
.mgs-service--compact p { padding-right:21px; }
.mgs-service--compact { display:flex; }
.mgs-service--compact > div { display:flex; flex:1; flex-direction:column; min-width:0; }
.mgs-service--compact > div > p:last-of-type { margin-bottom:28px; }
.mgs-service--compact .mgs-button { align-self:flex-start; margin-top:auto; }
.mgs-service--image-left,.mgs-service--image-right { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:6%; padding:65px 7.5%; min-height:477px; border:0; border-radius:20px; background:#000; box-shadow:inset 0 0 0 2px #626262; position:relative; overflow:hidden; isolation:isolate; }
.mgs-service--image-left::before,.mgs-service--image-left::after,.mgs-service--image-right::before,.mgs-service--image-right::after,.mgs--managed-it .mgs-steps--photo::before,.mgs--managed-it .mgs-steps--photo::after { --mgs-border-angle:0deg; content:""; position:absolute; z-index:2; inset:0; padding:2px; border-radius:inherit; pointer-events:none; background:conic-gradient(from calc(220deg + var(--mgs-border-angle)) at 50% 50%,transparent,transparent,transparent,transparent,var(--mgs-orange),transparent,transparent,transparent,transparent); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.mgs-service--image-left::after,.mgs-service--image-right::after,.mgs--managed-it .mgs-steps--photo::after { background:conic-gradient(from calc(245deg + var(--mgs-border-angle)) at 50% 50%,transparent,transparent,transparent,transparent,var(--mgs-orange),transparent,transparent,transparent,transparent); }
.mgs-service--image-left > *,.mgs-service--image-right > *,.mgs--managed-it .mgs-steps--photo > * { position:relative; z-index:1; }
.mgs-service--image-right .mgs-service__image { order:2; }
.mgs-service__image { display:flex; justify-content:center; align-items:center; position:relative; min-width:0; }
.mgs-service__image img { max-width:100%; height:auto; }
.mgs-image-labels { position:absolute; inset:10% 0; display:flex; flex-direction:column; justify-content:space-around; text-align:center; font:20px 'Roboto Condensed',sans-serif; }
.mgs-feature { background:var(--mgs-sage); color:#000; display:grid; grid-template-columns:1fr 1fr; }
.mgs-feature__image { min-height:576px; }
.mgs-feature__image img { width:100%; height:100%; object-fit:cover; }
.mgs-feature__copy { padding:90px 12%; align-self:center; }
.mgs-feature__copy .mgs-button { margin-top:28px; }
.mgs-light { background:var(--mgs-cream); color:#292929; }
.mgs-benefits { padding:90px 5% 70px; }
.mgs-benefits > h2 { margin-bottom:60px; }
.mgs-benefits__grid { display:grid; grid-template-columns:1fr 1fr; gap:60px 9%; }
.mgs-benefits__grid > div { padding-bottom:20px; border-bottom:1px solid #292929; }
.mgs-benefits p { font-weight:400; }
.mgs-benefits h3,.mgs-steps h3 { font-size:22px; line-height:1.6; margin-bottom:8px; }
.mgs-split { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:7%; padding-block:45px; }
.mgs-split__image { aspect-ratio:1.5; border-radius:20px; overflow:hidden; }
.mgs-split__image img { width:100%; height:100%; object-fit:cover; }
.mgs-steps { padding-block:65px; }
.mgs-steps__copy > h2 { text-align:center; margin-bottom:50px; }
.mgs-steps__list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:40px 70px; counter-reset:step; }
.mgs-steps__list li { display:flex; gap:28px; border-bottom:1px solid #b9b6ac; padding-bottom:25px; }
.mgs-step-number { flex:0 0 51px; width:51px; height:51px; border:1px solid currentColor; border-radius:50%; display:grid; place-items:center; font:24px Michroma,sans-serif; }
.mgs-steps--photo { display:grid; grid-template-columns:.92fr 1.08fr; padding:0; margin-block:50px; background:#383838; color:white; border:2px solid var(--mgs-orange); border-radius:20px; overflow:hidden; }
.mgs-steps--photo .mgs-steps__image img { width:100%; height:100%; object-fit:cover; }
.mgs-steps--photo .mgs-steps__copy { padding:65px 60px; }
.mgs-steps--photo .mgs-steps__copy > h2 { text-align:left; }
.mgs-steps--photo .mgs-steps__list { grid-template-columns:1fr; gap:24px; }
.mgs-steps--photo .mgs-steps__list li:last-child { border-bottom:0; padding-bottom:0; }
/* Computer Repair process typography and filled number markers. */
.mgs--computer-repair .mgs-steps__copy > h2 { margin-bottom:92px; }
.mgs--computer-repair .mgs-steps .mgs-step-number { border:0; background:#e2dccd; color:#312927; line-height:26px; }
.mgs--computer-repair .mgs-steps h3 { font-size:22px; font-weight:400; line-height:42px; margin-bottom:14px; }
.mgs--computer-repair .mgs-steps p { font-size:18px; font-weight:400; line-height:28px; }
.mgs--computer-repair .mgs-steps__list li { border-bottom-color:#606060; }
@media(min-width:768px) {
 .mgs--computer-repair .mgs-steps__list { grid-template-rows:repeat(2,auto); grid-auto-flow:column; row-gap:25px; }
 .mgs--computer-repair .mgs-steps__list li:nth-child(even) { border-bottom:0; padding-bottom:0; }
}
@media(max-width:767px) {
 .mgs--computer-repair .mgs-steps__list li:last-child { border-bottom:0; padding-bottom:0; }
 .mgs--computer-repair .mgs-steps__copy > h2 { margin-bottom:60px; }
 .mgs--computer-repair .mgs-steps h3 { font-size:20px; line-height:32px; }
}
.mgs--managed-it .mgs-steps--photo { position:relative; isolation:isolate; border:0; padding:2px; box-shadow:none; }
.mgs--managed-it .mgs-steps--photo::before,.mgs--managed-it .mgs-steps--photo::after { inset:0; padding:2px; }
.mgs--managed-it .mgs-steps--photo::before { background:conic-gradient(from calc(220deg + var(--mgs-border-angle)) at 50% 50%,transparent 0 51%,var(--mgs-orange) 54% 64%,transparent 71.5% 100%),#000; }
.mgs--managed-it .mgs-steps--photo::after { background:conic-gradient(from calc(245deg + var(--mgs-border-angle)) at 50% 50%,transparent 0 44%,var(--mgs-orange) 47% 57%,transparent 64.5% 100%); }
.mgs--managed-it .mgs-steps--photo .mgs-step-number { border:0; background:#606060; color:#fff; }
.mgs--managed-it .mgs-steps--photo .mgs-steps__list li { border-bottom-color:#606060; }
.mgs-faq { padding-top:60px; padding-bottom:95px; }
.mgs-faq > h2 { margin-bottom:65px; }
.mgs-faq__grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.mgs-faq article { background:#e2dccd; border-radius:14px; padding:48px 76px 48px 60px; }
.mgs-faq h3 { font-size:22px; line-height:1.5; margin-bottom:22px; }
.mgs-cta { padding:90px 4%; display:grid; grid-template-columns:1fr auto; gap:8%; align-items:end; }
.mgs-cta h2 { font-size:clamp(32px,3.4722vw,60px); line-height:1.325; }
.mgs-cta p { font-size:24px; line-height:32px; }
.mgs-cta > a { margin-bottom:8px; }
@media(min-width:1025px) and (max-width:1450px) {
 .mgs-intro { padding:55px; gap:50px; }
 .mgs-feature__copy { padding:65px 10%; }
 .mgs-faq article { padding:38px; }
 .mgs-steps--photo .mgs-steps__copy { padding:45px 35px; }
}
@media(max-width:1024px) {
 .mgs-container,.mgs-wide { width:90%; }
 .mgs-hero__grid { gap:5%; grid-template-columns:1.25fr 1fr; }
 .mgs-intro { padding:40px; gap:35px; }
 .mgs-service-grid { gap:45px 6%; }
 .mgs-service--image-left,
 .mgs-service--image-right { padding:40px; min-height:380px; gap:40px; }
 .mgs-service--image-left { grid-template-columns:minmax(220px,280px) minmax(0,1fr); }
 .mgs-service--image-right { grid-template-columns:minmax(0,1fr) minmax(220px,280px); }
 .mgs-service__image { width:100%; max-width:280px; margin-inline:auto; }
 .mgs-feature__image { min-height:450px; }
 .mgs-feature__copy { padding:50px 9%; }
 .mgs-benefits { padding-inline:0; }
 .mgs-faq article { padding:30px; }
 .mgs-cta { grid-template-columns:1fr; gap:30px; }
 .mgs-cta > a { justify-self:start; }
 .mgs-steps--photo { grid-template-columns:minmax(220px,280px) minmax(0,1fr); }
 .mgs-steps__image { width:100%; max-height:450px; overflow:hidden; }
 .mgs-steps--photo .mgs-steps__copy { padding:40px; }

 .mgs--managed-it .mgs-intro,
 .mgs--computer-repair .mgs-intro { grid-template-columns:minmax(220px,280px) minmax(0,1fr); }
 .mgs--managed-it .mgs-intro__image,
 .mgs--computer-repair .mgs-intro__image { width:100%; max-width:280px; margin-inline:auto; }

 /* Keep the Services overview fluid as soon as it leaves the desktop layout. */
 .mgs--services .mgs-hero__grid,
 .mgs--services .mgs-intro,
 .mgs--services .mgs-feature,
 .mgs--services .mgs-split { grid-template-columns:minmax(0,1fr); }
 .mgs--services .mgs-hero__grid > *,
 .mgs--services .mgs-intro > *,
 .mgs--services .mgs-feature > *,
 .mgs--services .mgs-split > *,
 .mgs--services .mgs-service-grid > *,
 .mgs--services .mgs-benefits__grid > *,
 .mgs--services .mgs-faq__grid > *,
 .mgs--services .mgs-cta > * {
  min-width:0;
  width:auto;
  max-width:100%;
 }
 .mgs--services .mgs-hero h1,
 .mgs--services .mgs-hero p,
 .mgs--services .mgs-centered { width:auto; max-width:100%; }
 .mgs--services .mgs-service-grid { width:100%; margin-inline:0; }
 .mgs--services .mgs-service--image-left,
 .mgs--services .mgs-service--image-right { width:100%; margin-left:0; }

 /* Keep the remaining Managed IT sections fluid at tablet widths. */
 .mgs--managed-it .mgs-hero__grid,
 .mgs--managed-it .mgs-feature,
 .mgs--managed-it .mgs-split { grid-template-columns:minmax(0,1fr); }
 .mgs--managed-it .mgs-hero__grid > *,
 .mgs--managed-it .mgs-intro > *,
 .mgs--managed-it .mgs-feature > *,
 .mgs--managed-it .mgs-split > *,
 .mgs--managed-it .mgs-service-grid > *,
 .mgs--managed-it .mgs-benefits__grid > *,
 .mgs--managed-it .mgs-steps--photo > *,
 .mgs--managed-it .mgs-faq__grid > *,
 .mgs--managed-it .mgs-cta > * {
  min-width:0;
  width:auto;
  max-width:100%;
 }
 .mgs--managed-it .mgs-hero h1,
 .mgs--managed-it .mgs-hero p,
 .mgs--managed-it .mgs-centered { width:auto; max-width:100%; }
 .mgs--managed-it .mgs-intro__image,
 .mgs--managed-it .mgs-split__image,
 .mgs--managed-it .mgs-service--image-left,
 .mgs--managed-it .mgs-service--image-right,
 .mgs--managed-it .mgs-steps--photo { width:100%; margin-left:0; }
 .mgs--managed-it .mgs-service--image-right .mgs-service__image { order:0; }

 /* Keep Computer Repair sections fluid through the tablet breakpoint. */
 .mgs--computer-repair .mgs-feature,
 .mgs--computer-repair .mgs-split { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
 .mgs--computer-repair .mgs-hero__grid > *,
 .mgs--computer-repair .mgs-intro > *,
 .mgs--computer-repair .mgs-feature > *,
 .mgs--computer-repair .mgs-split > *,
 .mgs--computer-repair .mgs-service-grid > *,
 .mgs--computer-repair .mgs-benefits__grid > *,
 .mgs--computer-repair .mgs-faq__grid > *,
 .mgs--computer-repair .mgs-cta > * {
  min-width:0;
  width:auto;
  max-width:100%;
 }
 .mgs--computer-repair .mgs-intro__image {
  width:100%;
  max-width:280px;
  aspect-ratio:683 / 541;
  margin-inline:auto;
 }
 .mgs--computer-repair .mgs-service--image-left,
 .mgs--computer-repair .mgs-service--image-right { width:100%; margin-left:0; }
}
@media(min-width:768px) and (max-width:1024px) {
 /* Getting Started uses a full-width image above a full-width list on tablet. */
 .mgs--managed-it .mgs-steps--photo {
  grid-template-columns:minmax(0,1fr);
  width:90%;
  margin-left:auto;
  margin-right:auto;
 }
 .mgs--managed-it .mgs-steps--photo .mgs-steps__image {
  width:100%;
  max-width:none;
  height:clamp(280px,42vw,420px);
  max-height:none;
  margin:0;
 }
 .mgs--managed-it .mgs-steps--photo .mgs-steps__copy,
 .mgs--managed-it .mgs-steps--photo .mgs-steps__list,
 .mgs--managed-it .mgs-steps--photo .mgs-steps__list li { width:100%; }
}
@media(max-width:767px) {
 .mgs h1 { font-size:32px; }
 .mgs h2 { font-size:26px; }
 .mgs h3 { font-size:24px; }
 .mgs p { font-size:17px; line-height:27px; }
 .mgs-hero { padding:40px 0 45px; }
 .mgs-hero__grid,.mgs-intro,.mgs-feature,.mgs-split { grid-template-columns:minmax(0,1fr); gap:32px; }
 .mgs-hero__image { aspect-ratio:1.2; }
 .mgs-buttons { gap:14px; margin-top:28px; }
 .mgs .mgs-button { font-size:14px; padding:13px 23px; min-height:50px; max-width:100%; }
 .mgs-intro { padding:28px; }
 .mgs-intro h2 { margin-bottom:20px; }
 .mgs-intro--text { gap:0; }
 .mgs-services { padding-block:50px; }
 .mgs-services > h2 { margin-bottom:35px; }
 .mgs-service-grid { grid-template-columns:1fr; gap:40px; }
 .mgs-service--compact p { padding-right:0; }
 .mgs-service--image-left,.mgs-service--image-right { grid-template-columns:1fr; gap:30px; padding:28px; }
 .mgs-service--image-right .mgs-service__image { order:0; }
 .mgs-service__image { max-width:100%; overflow:hidden; }
 .mgs-service__image img { max-height:300px; object-fit:contain; }
 .mgs-feature { gap:0; }
 .mgs-feature__image { min-height:0; height:320px; }
 .mgs-feature__copy { padding:40px 6%; }
 .mgs-benefits { padding-block:50px 20px; }
 .mgs-benefits > h2 { margin-bottom:30px; }
 .mgs-benefits__grid,.mgs-steps__list,.mgs-faq__grid { grid-template-columns:1fr; gap:24px; }
 .mgs-benefits h3,.mgs-steps h3,.mgs-faq h3 { font-size:20px; }
 .mgs-steps { padding-block:40px; }
 .mgs-steps--photo { grid-template-columns:minmax(0,1fr); padding:0; }
 .mgs-steps--photo .mgs-steps__copy { padding:28px; }
 .mgs-steps__list li { gap:18px; }
 .mgs-step-number { width:40px; height:40px; flex-basis:40px; font-size:20px; }
 .mgs-faq { padding-block:40px 50px; }
 .mgs-faq > h2 { margin-bottom:30px; }
 .mgs-faq article { padding:28px; }
 .mgs-cta { padding-block:50px; }
 .mgs-cta h2 { font-size:32px; }
 .mgs-cta p { font-size:20px; line-height:29px; }

 .mgs--services .mgs-container,
 .mgs--services .mgs-wide { width:calc(100% - 32px); }
 .mgs--services .mgs-buttons { width:100%; }
 .mgs--services .mgs-button { white-space:normal; }

 .mgs--managed-it .mgs-container,
 .mgs--managed-it .mgs-wide { width:calc(100% - 32px); }
 .mgs--managed-it .mgs-buttons { width:100%; }
 .mgs--managed-it .mgs-button { white-space:normal; }
 .mgs--managed-it .mgs-intro__image,
 .mgs--computer-repair .mgs-intro__image,
 .mgs-service__image,
 .mgs-steps__image { max-width:280px; margin-inline:auto; }
 .mgs--managed-it .mgs-intro,
 .mgs--computer-repair .mgs-intro { grid-template-columns:minmax(0,1fr); }
 /* Preserve visible page gutters around Getting Started on mobile. */
 .mgs--managed-it .mgs-steps--photo {
  width:calc(100% - 32px);
  max-width:none;
  margin-left:auto;
  margin-right:auto;
 }
 .mgs--managed-it .mgs-steps--photo .mgs-steps__image {
  width:100%;
  max-width:none;
  height:260px;
  margin:0;
 }
 .mgs--computer-repair .mgs-container,
 .mgs--computer-repair .mgs-wide { width:calc(100% - 32px); }
 .mgs--computer-repair .mgs-buttons { width:100%; }
 .mgs--computer-repair .mgs-button { white-space:normal; }
 .mgs--computer-repair .mgs-feature,
 .mgs--computer-repair .mgs-split { grid-template-columns:minmax(0,1fr); }
}

@property --mgs-border-angle {
 syntax:"<angle>";
 inherits:false;
 initial-value:0deg;
}
@keyframes mgs-border-rotation {
 from { --mgs-border-angle:0deg; }
 to { --mgs-border-angle:360deg; }
}
@keyframes mgs-border-rotation-reverse {
 from { --mgs-border-angle:360deg; }
 to { --mgs-border-angle:0deg; }
}
@media(min-width:768px) {
 .mgs-service--image-left.active::before,
 .mgs-service--image-right.active::before,
 .mgs--managed-it .mgs-steps--photo.active::before { animation:mgs-border-rotation 5s linear; }
 .mgs-service--image-left.active::after,
 .mgs-service--image-right.active::after,
 .mgs--managed-it .mgs-steps--photo.active::after { animation:mgs-border-rotation-reverse 5s linear; }
}
.mg-services-page header .header_menu .menu > li > a { color:var(--mgs-ink); }
.mg-services-page header .menu_bar_tigger img { filter:brightness(0); }
.mg-services-page header { border-bottom:0; }
.mgs-service__image img { width:auto; }

/* Preserve the photo crops supplied in Figma; replacement images use the default cover crop. */
.mgs-hero__image,.mgs-intro__image,.mgs-feature__image,.mgs-split__image,.mgs-steps__image { position:relative; overflow:hidden; }
.mgs img[src*="managed-Istockphoto21714654182048X20481"] { position:absolute; max-width:none; width:181.72%; height:102.52%; left:-33.52%; top:-0.35%; }
.mgs img[src*="managed-Istockphoto5071187062048X20481"] { position:absolute; max-width:none; width:103.42%; height:103.46%; left:-0.05%; top:0; }
.mgs img[src*="managed-Istockphoto22203499342048X20481"] { position:absolute; max-width:none; width:148.17%; height:113.14%; left:-37.28%; top:0; }
.mgs img[src*="managed-Istockphoto21481784722048X20481"] { position:absolute; max-width:none; width:181.97%; height:110.59%; left:-52.36%; top:-6.81%; }
.mgs img[src*="managed-Istockphoto21950608462048X20481"] { position:absolute; max-width:none; width:130.64%; height:109.92%; left:0.04%; top:-9.98%; }
.mgs img[src*="3028-1039-Istockphoto21816691842048X20481"] { position:absolute; max-width:none; width:110.54%; height:109.23%; left:0; top:-5.67%; }
.mgs img[src*="3028-1039-Istockphoto11448211362048X20481"] { position:absolute; max-width:none; width:201.32%; height:122.2%; left:-58.98%; top:-18.26%; }
.mgs img[src*="3029-1710-Istockphoto14082550242048X20481"] { position:absolute; max-width:none; width:135.53%; height:135.43%; left:-0.01%; top:-35.42%; }
.mgs img[src*="3029-1710-Istockphoto17187425382048X20481"] { position:absolute; max-width:none; width:132.48%; height:123.04%; left:0.02%; top:-11.19%; }
.mgs img[src*="3029-1710-Istockphoto20441974122048X20481"] { position:absolute; max-width:none; width:184.56%; height:111.88%; left:-36.42%; top:-11.84%; }
.mgs img[src*="3029-1710-Istockphoto14979003962048X20481"] { position:absolute; max-width:none; width:144.27%; height:102.45%; left:-31.28%; top:-1.34%; }
.mgs-intro__image img[src*="1497900396"] { transform:scaleX(-1); }

/* Figma fidelity pass: shared desktop geometry. */
@media (min-width: 1025px) {
  .mgs-hero__grid {
    grid-template-columns: minmax(0, 890fr) minmax(0, 553fr);
    gap: 71px;
    align-items: center;
  }
  .mgs-hero__grid > div:first-child { padding-top: 0; }
  .mgs-hero__image { width: 100%; height: 608px; aspect-ratio: auto; transform: translateX(-2px); }
  .mgs-services { width: 1505px; max-width: calc(100% - 12.2%); }
  .mgs-service--image-left,
  .mgs-service--image-right { min-height: 477px; }
  .mgs-feature { grid-template-columns: 854fr 874fr; }
  .mgs-feature__copy { padding-left: 118px; padding-right: 110px; }
  .mgs-cta { width:80.7%; max-width:none; }

  /* Overview hero geometry from Figma node 3051:406. */
  /* Header already contributes 35px below its content: 35px + 29px = 64px. */
  .mgs--services .mgs-hero { height: auto; padding: 29px 0 206px; }
  .mgs--services .mgs-hero__grid > div:first-child { width: 100%; max-width: 890px; padding-top: 0; }
  .mgs--services .mgs-hero h1 { width: 100%; max-width: 844px; line-height: 1.2889; margin-bottom: 30px; }
  .mgs--services .mgs-lead,
  .mgs--services .mgs-copy { width: 100%; max-width: 844px; }
  .mgs--services .mgs-lead { margin-bottom: 36px; }
  .mgs--services .mgs-buttons { gap: 41px; margin-top: 42px; }
  .mgs--services .mgs-buttons .mgs-button:first-child { flex: 0 1 261px; }
  .mgs--services .mgs-buttons .mgs-button:nth-child(2) { flex: 0 1 294px; }
  .mgs--services .mgs-intro-wrap { min-height: 402px; margin-top: -126px; }
  .mgs--services .mgs-intro-wrap { background: none; }
  .mgs--services .mgs-intro { min-height: 402px; }
  .mgs--services .mgs-intro {
    grid-template-columns: minmax(0, 595fr) minmax(0, 757fr);
    gap: 43px;
    padding: 88px 106px 80px;
    align-items: start;
  }
  .mgs--services .mgs-intro > div:last-child { padding-top: 8px; }
  .mgs--services .mgs-services { padding-top: 101px; }
  .mgs--services .mgs-services { padding-bottom: 96px; }
  .mgs--services .mgs-services > h2 { margin-bottom: 85px; }
  .mgs--services .mgs-service-grid { row-gap: 83px; }
  .mgs--services #managed-it { min-height: 477px; padding-top: 57px; padding-bottom: 57px; }
  .mgs--services #computer-repair,
  .mgs--services #remote-support { min-height: 284px; }
  .mgs--services #voip,
  .mgs--services #cybersecurity { min-height: 477px; }
  .mgs--services #custom-pcs,
  .mgs--services #servers { min-height: 358px; }
  .mgs--services #data-backup,
  .mgs--services #oasis { min-height: 349px; }
  .mgs--services .mgs-benefits { padding-top: 94px; padding-bottom: 90px; }
  .mgs--services .mgs-services > h2,
  .mgs--services .mgs-faq > h2 { max-width: 817px; }
  .mgs--services .mgs-benefits > h2 { max-width: 752px; }
  .mgs--services .mgs-feature { grid-template-columns: minmax(0, 854fr) minmax(0, 874fr); }
  .mgs--services .mgs-feature__copy { padding-left: 134px; padding-right: 124px; transform: translateY(4px); }
  .mgs--services .mgs-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 4.8846%;
    width: 100%;
    max-width: 1413px;
    margin-inline: auto;
  }
  .mgs--services .mgs-service--image-left,
  .mgs--services .mgs-service--image-right {
    width: calc(100% + 6.511%);
    max-width: 1505px;
    margin-left: -3.2555%;
  }
  .mgs--services #computer-repair,
  .mgs--services #remote-support { transform: translateY(-3px); }
  .mgs--services #voip,
  .mgs--services #custom-pcs,
  .mgs--services #servers { transform: translateY(-2px); }
  .mgs--services #cybersecurity,
  .mgs--services #data-backup,
  .mgs--services #oasis { transform: translateY(-4px); }
  .mgs--services .mgs-faq { min-height: 753px; padding-top: 0; padding-bottom: 98px; }
  .mgs--services .mgs-faq article:nth-child(-n+2) { min-height: 247px; }
  .mgs--services .mgs-faq article:nth-child(n+3) { min-height: 267px; }
  .mgs--services .mgs-cta {
    min-height: 447px;
    padding: 94px 0 0;
    grid-template-columns: minmax(0, 63.1fr) minmax(0, 21.4fr);
    gap: 12%;
    align-items: start;
  }
  .mgs--services .mgs-cta > a { margin-top: 192px; }

  /* Inner service pages share the 1217px hero and 720px overlap card. */
  .mgs--managed-it .mgs-hero,
  .mgs--computer-repair .mgs-hero { min-height: 1070px; padding: 30px 0 0; }
  .mgs--managed-it .mgs-intro-wrap,
  .mgs--computer-repair .mgs-intro-wrap { min-height: 720px; }
  .mgs--managed-it .mgs-intro,
  .mgs--computer-repair .mgs-intro { min-height: 720px; }
  .mgs--managed-it .mgs-intro-wrap { margin-top: -347px; }
  .mgs--computer-repair .mgs-intro-wrap { margin-top: -347px; }
  .mgs--computer-repair .mgs-hero__grid > div:first-child { padding-top: 0; }
  /* Match the Computer Repair hero text measure and CTA spacing in Figma. */
  .mgs--computer-repair .mgs-hero h1 { margin-bottom:34px; }
  .mgs--computer-repair .mgs-hero p { max-width:814px; margin-bottom:28px; }
  .mgs--computer-repair .mgs-hero p:last-child { margin-bottom:0; }
  .mgs--computer-repair .mgs-hero .mgs-buttons { gap:30px; margin-top:39px; }
  .mgs--computer-repair .mgs-hero .mgs-button { min-width:302px; }
  .mgs--computer-repair .mgs-hero .mgs-button--outline { min-width:255px; }
  .mgs--managed-it .mgs-intro {
    grid-template-columns: minmax(0, 683fr) minmax(0, 721fr);
    gap: 82px;
    padding-left: 82px;
    padding-right: 82px;
  }
  .mgs--managed-it .mgs-intro__image { width: 100%; max-width: 683px; height: auto; aspect-ratio: 683/541; transform: translateY(3px); }
  .mgs--computer-repair .mgs-intro {
    grid-template-columns: minmax(0, 683fr) minmax(0, 721fr);
    gap: 65px;
    padding-left: 82px;
    padding-right: 82px;
    align-items: center;
  }
  .mgs--computer-repair .mgs-intro__image { width:100%; max-width:683px; height:auto; aspect-ratio:683/541; transform:translateY(3px); }
  .mgs--computer-repair .mgs-intro > div:last-child { padding-top:0; }

  /* Managed IT section landmarks from the Figma frame. */
  .mgs--managed-it .mgs-services { padding-top: 97px; padding-bottom: 100px; }
  .mgs--managed-it .mgs-services > h2 { margin-bottom: 97px; }
  .mgs--managed-it .mgs-services > h2 { max-width: 989px; transform: translateX(-73px); }
  .mgs--managed-it .mgs-hero__grid > div:first-child { transform: translateX(8px); }
  .mgs--managed-it .mgs-hero__image { transform: translateX(-6px); }
  .mgs--managed-it .mgs-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10.7756%;
    row-gap: 92px;
  }
  .mgs--managed-it .mgs-service--image-left,
  .mgs--managed-it .mgs-service--image-right { width: 100%; max-width: 1505px; }
  .mgs--managed-it .mgs-service--image-left,
  .mgs--managed-it .mgs-service--image-right { min-height: 513px; padding-top: 54px; padding-bottom: 54px; }
  .mgs--managed-it #it-support,
  .mgs--managed-it #server-migration { min-height: 313px; }
  .mgs--managed-it #cnc-protection,
  .mgs--managed-it #infrastructure { min-height: 386px; }
  .mgs--managed-it .mgs-feature { min-height: 746px; }
  .mgs--managed-it .mgs-feature__image { min-height: 746px; }
  .mgs--managed-it .mgs-feature__copy { transform: translateY(9px); }
  .mgs--managed-it .mgs-benefits { min-height: 844px; padding-top: 94px; padding-bottom: 110px; }
  .mgs--managed-it .mgs-benefits > h2 { max-width: 889px; }
  .mgs--managed-it .mgs-split--audience {
    width: calc(100% - 12.2%);
    max-width: 1492px;
    min-height: 495px;
    padding: 0;
    grid-template-columns: minmax(0, 650fr) minmax(0, 740fr);
    gap: 6.8365%;
    align-items: start;
    transform: translateX(-5px);
  }
  .mgs--managed-it .mgs-split--audience > div:first-child { padding-top: 11px; }
  .mgs--managed-it .mgs-split--audience h2 { width:100%; max-width:658px; margin-bottom:35px; line-height:52px; white-space:nowrap; }
  .mgs--managed-it .mgs-split--audience > div:first-child > p { width:100%; max-width:625px; margin-bottom:0; }
  .mgs--managed-it .mgs-split--audience .mgs-bullets { width:100%; max-width:650px; margin:31px 0 0; }
  .mgs--managed-it .mgs-split--audience .mgs-split__image { width: 100%; max-width:740px; height:auto; aspect-ratio:740/493; }
  .mgs--managed-it .mgs-steps--photo { min-height: 886px; margin-top: 101px; margin-bottom: 103px; }
  .mgs--managed-it .mgs-steps--photo { grid-template-columns: minmax(0, 747fr) minmax(0, 881fr); }
  .mgs--managed-it .mgs-steps--photo .mgs-steps__copy { padding: 90px 132px 55px 100px; }
  .mgs--managed-it .mgs-faq { min-height: 1347px; padding-top: 0; padding-bottom: 101px; }
  .mgs--managed-it .mgs-faq > h2 { max-width: 817px; }
  .mgs--managed-it .mgs-faq article:nth-child(-n+2) { min-height: 268px; }
  .mgs--managed-it .mgs-faq article:nth-child(3),
  .mgs--managed-it .mgs-faq article:nth-child(4) { min-height: 301px; }
  .mgs--managed-it .mgs-faq article:nth-child(n+5) { min-height: 247px; }
  .mgs--managed-it .mgs-cta {
    min-height: 477px;
    padding: 95px 0 0;
    grid-template-columns: minmax(0, 66.2fr) minmax(0, 20.8fr);
    gap: 13%;
    align-items: start;
  }
  .mgs--managed-it .mgs-cta > a { margin-top: 226px; }

  /* Computer Repair landmarks: service grid, 610px feature and lower content. */
  .mgs--computer-repair .mgs-services { padding-top: 96px; padding-bottom: 109px; }
  .mgs--computer-repair .mgs-services > h2 { margin-bottom: 84px; }
  .mgs--computer-repair .mgs-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10.53%;
    row-gap: 96px;
  }
  .mgs--computer-repair .mgs-service--image-left,
  .mgs--computer-repair .mgs-service--image-right { width:100%; max-width:1505px; }
  .mgs--computer-repair .mgs-service--image-left,
  .mgs--computer-repair .mgs-service--image-right { min-height: 513px; }
  .mgs--computer-repair #hardware,
  .mgs--computer-repair #software,
  .mgs--computer-repair #malware,
  .mgs--computer-repair #tune-ups { min-height: 337px; }
  .mgs--computer-repair #data-recovery,
  .mgs--computer-repair #malware,
  .mgs--computer-repair #tune-ups,
  .mgs--computer-repair #remote-repair { transform: translateY(2px); }
  .mgs--computer-repair #remote-repair { min-height: 518px; }
  .mgs--computer-repair .mgs-feature { min-height: 610px; }
  .mgs--computer-repair .mgs-feature__image { min-height: 610px; }
  .mgs--computer-repair .mgs-feature { grid-template-columns: minmax(0, 854fr) minmax(0, 874fr); }
  .mgs--computer-repair .mgs-feature__copy { padding-left: 154px; padding-right: 104px; transform: translateY(12px); }
  .mgs--computer-repair .mgs-steps { min-height: 684px; padding-top: 110px; padding-bottom: 80px; }
  .mgs--computer-repair .mgs-steps__list { max-width:1345px; margin-inline:auto; column-gap:115px; }
  .mgs--computer-repair .mgs-split--local {
    width: calc(100% - 12.2%);
    max-width: 1500px;
    min-height: 491px;
    padding: 0;
    grid-template-columns: minmax(0, 655fr) minmax(0, 737fr);
    gap: 7.2%;
    align-items: start;
    transform: translateX(-3px);
  }
  .mgs--computer-repair .mgs-split--local > div:first-child { padding-top: 91px; }
  .mgs--computer-repair .mgs-split--local .mgs-split__image { width:100%; max-width:737px; height:auto; aspect-ratio:737/491; }
  .mgs--computer-repair .mgs-faq { min-height: 1422px; padding-top: 109px; padding-bottom: 108px; }
  .mgs--computer-repair .mgs-services > h2 { max-width: 989px; }
  .mgs--computer-repair .mgs-faq > h2 { max-width: 817px; }
  .mgs--computer-repair .mgs-faq article:nth-child(-n+2) { min-height: 247px; }
  .mgs--computer-repair .mgs-faq article:nth-child(3),
  .mgs--computer-repair .mgs-faq article:nth-child(4) { min-height: 280px; }
  .mgs--computer-repair .mgs-faq article:nth-child(n+5) { min-height: 247px; }
  .mgs--computer-repair .mgs-cta {
    min-height: 423px;
    padding: 83px 0 0;
    grid-template-columns: minmax(0, 66.3fr) minmax(0, 21.4fr);
    gap: 12.3%;
    align-items: start;
  }
  .mgs--computer-repair .mgs-cta > a { margin-top: 169px; }

  /* The supplied footer frame is 459px tall. */
  .mg-services-page footer .footer__row--col > p { display: none; }
  .mg-services-page footer .footer__row { padding: 62px 0 58px; }
}

/* Match the homepage's compact two-column black cards below the full desktop layout. */
@media (max-width: 1279px) {
  .mgs-services .mgs-service h3 { font-size:clamp(24px, 2.96875vw, 38px); }
}

@media (min-width: 1025px) and (max-width: 1279px) {
  .mgs-service--image-left {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 40px;
  }
  .mgs-service--image-right {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: 40px;
  }
  .mgs-service__image { width:100%; max-width:280px; margin-inline:auto; }
}

@media (min-width: 1025px) and (max-width: 1200px) {
  .mgs--managed-it .mgs-intro,
  .mgs--computer-repair .mgs-intro {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  }
  .mgs--managed-it .mgs-intro__image,
  .mgs--computer-repair .mgs-intro__image {
    width:100%;
    max-width:280px;
    margin-left:auto;
    margin-right:auto;
  }
}

/* Getting Started: stack the photo at small desktop widths and remove it below 1024px. */
@media (min-width: 1024px) and (max-width: 1200px) {
  .mgs--managed-it .mgs-steps--photo {
    width: 90%;
    max-width: none;
    min-height: 0;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: minmax(0, 1fr);
  }
  .mgs--managed-it .mgs-steps--photo .mgs-steps__image {
    width: 100%;
    max-width: none;
    height: clamp(320px, 38vw, 440px);
    max-height: none;
    margin: 0;
  }
  .mgs--managed-it .mgs-steps--photo .mgs-steps__copy,
  .mgs--managed-it .mgs-steps--photo .mgs-steps__list,
  .mgs--managed-it .mgs-steps--photo .mgs-steps__list li { width: 100%; }
}
@media (max-width: 1023px) {
  .mgs--managed-it .mgs-steps--photo .mgs-steps__image { display: none; }
}