/* R5 (2026-11-12) "calm" look, PREVIEW. Mike: "too much purple"; Raheel: UI feels "funky".
   Every rule is scoped to html.mgg-look-calm, so nothing changes until a visitor switches it on
   (?look=calm, off with ?look=current; inc/v4-look.php). Content is untouched; only colour, buttons, cards and motion.
   Rules:
   1. Purple is an accent, not a colour of the page: the --mgg-purple token maps to ink; the real purple lives in
      --mgg-accent and is used only for the short line before section labels, link hover and focus rings.
   2. Neutrals are pure greys (Raheel, Nov 12): section backgrounds #FAFAFA, cards #F5F5F5, lines #E0E0E0.
   3. One button system: yellow = the main action; a dark outline = the secondary one.
   4. Cards: #F5F5F5, no border (Raheel: "avoid borders on card so it looks clean and modern"), smaller corners,
      no lift or tinted glow; hover darkens the fill a touch. Tables keep their lines.
   5. Calmer motion: no spinning orbit, no blinking skyline lights, no travelling dot. The logo strip still moves. */

/* 1 + 2. tokens */
html.mgg-look-calm{
  --mgg-accent:#4D00A4;
  --mgg-purple:#161B1B;
  --mgg-purple-800:#2A3131;
  --mgg-purple-900:#0B0F0F;
  --mgg-purple-50:#EFEFEF;
  --mgg-purple-100:#E3E3E3;
  --mgg-purple-300:#B5B5B5;
  --mgg-soft:#FAFAFA;
  --mgg-card:#F5F5F5;
  --mgg-line:#E0E0E0;
  --mgg-line-soft:#EBEBEB;
  --mgg-radius-card:14px;
  --mgg-radius-band:18px;
  --mgg-radius-btn:10px;
}

/* section labels: dark-grey text, the short line before them is the purple signature */
html.mgg-look-calm .mgg-tag:not(.mgg-tag-yellow),
html.mgg-look-calm .mgg-kicker{color:var(--mgg-muted,#4A5257)}
html.mgg-look-calm .mgg-tag:not(.mgg-tag-yellow)::before{background-color:var(--mgg-accent)}
/* on dark sections and panels the label is light (grey on ink was 2.2:1) and its line is yellow */
html.mgg-look-calm :is(.mgg-section-dark,.mgg-phero,.mgg-band,.mgg-cta-section,.mgg-formpanel__side,.mgg-founder,.mgg-tpl-cta) :is(.mgg-tag:not(.mgg-tag-yellow),.mgg-kicker){color:rgba(255,255,255,.74)}
html.mgg-look-calm :is(.mgg-section-dark,.mgg-phero,.mgg-band,.mgg-cta-section,.mgg-formpanel__side,.mgg-founder,.mgg-tpl-cta) .mgg-tag:not(.mgg-tag-yellow)::before{background-color:var(--mgg-yellow,#FFDE59)}

/* links: the colour follows the token (ink on light, yellow modifiers stay yellow on dark) and gains a quiet underline
   that darkens on hover */
html.mgg-look-calm .elementor .mgg-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
html.mgg-look-calm .elementor .mgg-link:hover{text-decoration-color:currentColor}
html.mgg-look-calm .elementor .mgg-tpl-content a{text-decoration-color:var(--mgg-line)}
html.mgg-look-calm .elementor .mgg-tpl-content a:hover{text-decoration-color:currentColor}
html.mgg-look-calm :focus-visible{outline-color:var(--mgg-accent)}

/* ===== R5e (Nov 13, D-067): purple back as a TEXT accent only (Mike: from "too much" to "barely"). Purple = section
   labels, links inside text, step numbers. Yellow = actions, ink = structure. Still no purple fills, glows, icons or
   buttons (the 46 touches Mike called too much were mostly those). Light backgrounds only; dark bands keep light/yellow. */
html.mgg-look-calm .mgg-tag:not(.mgg-tag-yellow):not(:is(.mgg-section-dark,.mgg-phero,.mgg-band,.mgg-cta-section,.mgg-formpanel__side,.mgg-founder,.mgg-tpl-cta,.mgg-hero,.mgg-results-band) *),
html.mgg-look-calm .mgg-kicker:not(:is(.mgg-section-dark,.mgg-phero,.mgg-band,.mgg-cta-section,.mgg-formpanel__side,.mgg-founder,.mgg-tpl-cta,.mgg-hero,.mgg-results-band) *){color:var(--mgg-accent,#4D00A4)}
html.mgg-look-calm .elementor:not([data-elementor-type="header"],[data-elementor-type="footer"]) :is(p,li) a:not(.mgg-btn):not(:is(.mgg-section-dark,.mgg-phero,.mgg-band,.mgg-cta-section,.mgg-formpanel__side,.mgg-founder,.mgg-tpl-cta,.mgg-hero,.mgg-results-band,[class*="mgg-toc"]) *),
html.mgg-look-calm .elementor:not([data-elementor-type="header"],[data-elementor-type="footer"]) a.mgg-link:not(:is(.mgg-section-dark,.mgg-phero,.mgg-band,.mgg-cta-section,.mgg-formpanel__side,.mgg-founder,.mgg-tpl-cta,.mgg-hero,.mgg-results-band) *),
html.mgg-look-calm .elementor:not([data-elementor-type="header"],[data-elementor-type="footer"]) .mgg-tpl-content a:not(.mgg-btn):not(:is([class*="mgg-toc"]) *){color:var(--mgg-accent,#4D00A4);text-decoration-color:color-mix(in srgb,var(--mgg-accent,#4D00A4) 35%,transparent)}
html.mgg-look-calm .elementor:not([data-elementor-type="header"],[data-elementor-type="footer"]) :is(p,li) a:not(.mgg-btn):not(:is(.mgg-section-dark,.mgg-phero,.mgg-band,.mgg-cta-section,.mgg-formpanel__side,.mgg-founder,.mgg-tpl-cta,.mgg-hero,.mgg-results-band,[class*="mgg-toc"]) *):hover,
html.mgg-look-calm .elementor:not([data-elementor-type="header"],[data-elementor-type="footer"]) a.mgg-link:not(:is(.mgg-section-dark,.mgg-phero,.mgg-band,.mgg-cta-section,.mgg-formpanel__side,.mgg-founder,.mgg-tpl-cta,.mgg-hero,.mgg-results-band) *):hover,
html.mgg-look-calm .elementor:not([data-elementor-type="header"],[data-elementor-type="footer"]) .mgg-tpl-content a:not(.mgg-btn):not(:is([class*="mgg-toc"]) *):hover{color:var(--mgg-accent,#4D00A4);text-decoration-color:var(--mgg-accent,#4D00A4);text-decoration-thickness:2px}
html.mgg-look-calm .elementor:not([data-elementor-type="header"],[data-elementor-type="footer"]) .mgg-card-num:not(:is(.mgg-section-dark,.mgg-phero,.mgg-band,.mgg-cta-section,.mgg-formpanel__side,.mgg-founder,.mgg-tpl-cta,.mgg-hero,.mgg-results-band) *){color:var(--mgg-accent,#4D00A4)}
html.mgg-look-calm .elementor .mgg-intro>.mgg-h2:not(:is(.mgg-section-dark,.mgg-phero,.mgg-band,.mgg-cta-section,.mgg-formpanel__side,.mgg-founder,.mgg-tpl-cta,.mgg-hero,.mgg-results-band) *)::before{background:var(--mgg-accent,#4D00A4)}
/* the post table of contents stays ink: 16 purple links in one box is too many */
/* one strong purple moment per page (D-068): the closing call-to-action band is flat brand purple (no glow); a page
   without one (homepage) gets it on its in-page band instead; the post CTA box matches. Everything else stays ink. */
html.mgg-look-calm .elementor .mgg-section.mgg-cta-section,
html.mgg-look-calm body:not(:has(.mgg-cta-section)) .elementor .mgg-band,
html.mgg-look-calm .elementor .mgg-tpl-cta .mgg-cta{background:var(--mgg-accent,#4D00A4)}

/* 3. buttons: the filled default button becomes the yellow main action; next to a yellow button it steps back to a
   dark outline; outline buttons are dark, not purple */
html.mgg-look-calm .elementor .mgg-btn:not(.mgg-btn-yellow):not(.mgg-btn-ghost){color:var(--mgg-ink);background-color:var(--mgg-yellow);border-color:var(--mgg-yellow);box-shadow:none}
html.mgg-look-calm .elementor .mgg-btn:not(.mgg-btn-yellow):not(.mgg-btn-ghost):hover{color:var(--mgg-ink);background-color:var(--mgg-yellow-600,#F3CC33);border-color:var(--mgg-yellow-600,#F3CC33)}
html.mgg-look-calm .elementor .mgg-btn-yellow ~ .mgg-btn:not(.mgg-btn-yellow),
html.mgg-look-calm .elementor .mgg-btn:not(.mgg-btn-yellow):has(~ .mgg-btn-yellow),
html.mgg-look-calm .elementor .mgg-btn-ghost{color:var(--mgg-ink);background-color:transparent;border-color:#D4D4D4;box-shadow:none}
html.mgg-look-calm .elementor .mgg-btn-yellow ~ .mgg-btn:not(.mgg-btn-yellow):hover,
html.mgg-look-calm .elementor .mgg-btn:not(.mgg-btn-yellow):has(~ .mgg-btn-yellow):hover,
html.mgg-look-calm .elementor .mgg-btn-ghost:hover{color:var(--mgg-ink);background-color:transparent;border-color:var(--mgg-ink)}
html.mgg-look-calm .elementor .mgg-btn:hover{box-shadow:none}
/* on dark backgrounds an outline button stays light */
html.mgg-look-calm .elementor :is(.mgg-section-dark,.mgg-phero,.mgg-band,.mgg-cta-section) .mgg-btn-ghost{color:var(--mgg-white);border-color:rgba(255,255,255,.4)}

/* 4. cards: #F5F5F5 fill, no border (transparent, so sizes don't shift), no lift, no tinted glow */
html.mgg-look-calm .elementor :is(.mgg-card,.mgg-svc,.mgg-icard,.mgg-case,.mgg-post--card,.mgg-xsell,.mgg-tq,.mgg-callout,.mgg-faq-item,.mgg-formpanel,.mgg-toc__box,.mgg-tpl-news--card,.mgg-pill),
html.mgg-look-calm .elementor .mgg-bento>.mgg-svc,
html.mgg-look-calm .mgg-tm figure.mgg-tm__card{background-color:var(--mgg-card);border-color:transparent;box-shadow:none}
html.mgg-look-calm .elementor :is(.mgg-card,.mgg-svc,.mgg-icard,.mgg-case,.mgg-post--card,.mgg-xsell):hover{transform:none;box-shadow:none;border-color:transparent;background-color:#EFEFEF}
html.mgg-look-calm .elementor .mgg-faq-item.is-open{background-color:var(--mgg-card);border-color:transparent;box-shadow:none}
/* small chips and frames inside a card: white, no border */
html.mgg-look-calm .elementor :is(.mgg-icard-ico,.mgg-def-ico){background-color:var(--mgg-white);border-color:transparent;box-shadow:none}
html.mgg-look-calm .elementor .mgg-img-logo{border-color:transparent}
html.mgg-look-calm .elementor .mgg-tpl-content h2[id^="key-takeaways"]+:is(ul,ol)>li{border-top-color:var(--mgg-line-soft)}

/* dark heroes and bands: plain ink, no purple glow */
html.mgg-look-calm .mgg-bg--hero{background:var(--mgg-ink,#161B1B)}
html.mgg-look-calm .elementor .mgg-phero:not(:has(.mgg-bg)){background:radial-gradient(38% 60% at 0% 100%,rgba(255,222,89,.06),rgba(255,222,89,0) 70%),var(--mgg-ink,#161B1B)}

/* remaining purple glows and fills: dark call-to-action bands, form side panels, founder panel, post CTA box,
   illustration shadows, the first review avatar, comparison table headers */
html.mgg-look-calm .elementor .mgg-cta-section{background-image:none}
html.mgg-look-calm .elementor .mgg-formpanel__side,
html.mgg-look-calm .elementor .mgg-founder{background:radial-gradient(70% 60% at 100% 0%,rgba(255,255,255,.07),rgba(255,255,255,0) 70%),var(--mgg-ink,#161B1B)}
html.mgg-look-calm .orbit__core{box-shadow:0 0 0 12px rgba(255,255,255,.06),0 0 0 26px rgba(255,255,255,.03)}
html.mgg-look-calm .sa__now{box-shadow:0 30px 60px -30px rgba(22,27,27,.35)}
html.mgg-look-calm .mgg-reviews__face--0{background:#4A5257}
/* comparison tables (page content .mgg-cmp, AI SEO page .mgg-ch): ink header row; on phones the row-header bars and
   the small labels follow */
html.mgg-look-calm .mgg-cmp table.mgg-cmp__t thead th,
html.mgg-look-calm .mgg-ch table thead th{background:var(--mgg-ink,#161B1B)}
html.mgg-look-calm .mgg-cmp table.mgg-cmp__t thead th:first-child,
html.mgg-look-calm .mgg-ch table thead th:first-child{background:#2A3131}
html.mgg-look-calm .mgg-cmp table.mgg-cmp__t tbody tr:hover td{background:#FAFAFA}
@media (max-width:767px){
  html.mgg-look-calm .mgg-cmp table.mgg-cmp__t tbody th,
  html.mgg-look-calm .mgg-ch table tbody th{background:var(--mgg-ink,#161B1B)}
  html.mgg-look-calm .mgg-cmp table.mgg-cmp__t tbody td::before,
  html.mgg-look-calm .mgg-ch table tbody td::before{color:var(--mgg-muted,#4A5257)}
}

/* homepage hero: the photo overlay fades to ink, not purple */
html.mgg-look-calm .mgg-hero-media::after{background:
  linear-gradient(90deg,rgba(22,27,27,.94) 0%,rgba(22,27,27,.8) 42%,rgba(22,27,27,.5) 75%,rgba(22,27,27,.35) 100%),
  linear-gradient(180deg,rgba(22,27,27,.6) 0%,rgba(22,27,27,0) 24%,rgba(22,27,27,0) 72%,rgba(22,27,27,.7) 100%)}
/* animated "who we help" icons and anything still on the Elementor kit's primary colour */
html.mgg-look-calm .mgg-icon{--p:#161B1B}
html.mgg-look-calm .mgg-icon .bg{fill:#FFFFFF}
html.mgg-look-calm body[class*="elementor-kit-"]{--e-global-color-primary:#161B1B}
/* the kit makes every link hover the primary colour (now ink): on dark and purple bands that hid the link. There a
   hovered link turns white; the case-study result cards (ink) do the same */
html.mgg-look-calm :is(.mgg-section-dark,.mgg-phero,.mgg-band,.mgg-cta-section,.mgg-formpanel__side,.mgg-founder,.mgg-tpl-cta,.mgg-hero,.mgg-results-band,[data-elementor-type="footer"]) a:not([class*="btn"]):not(.mgg-ftr-soc):hover,
html.mgg-look-calm body.parent-pageid-5417 .elementor .mgg-section:has(.mgg-card-num):not(:has(~ .mgg-section .mgg-card-num)) .mgg-icard a:hover{color:#fff}
/* quote marks: a quiet grey, not a heavy black glyph */
html.mgg-look-calm .mgg-tq.mgg-i-quotes-fill::before{background-color:#C4C4C4}

/* inner-page hero backgrounds are purple network/photo graphics: keep the picture, drop most of its colour */
html.mgg-look-calm .mgg-phero :is(.mgg-bg,.mgg-bg-wrap) img{filter:saturate(.2)}
/* homepage hero photo/video has purple city light: tone it down, keep the picture */
html.mgg-look-calm .mgg-hero-media :is(img,video){filter:saturate(.5)}

/* 5. calmer motion */
html.mgg-look-calm .orbit__spin,
html.mgg-look-calm .orbit__node,
html.mgg-look-calm .flow__dot,
html.mgg-look-calm .mgg-skyline .sk-light{animation:none}

/* ===== R5b (Nov 12, Raheel: "too much padding", "weird icon usage", "weirdly done section", "two similar sections with
   different topics but same exact structure"). Homepage, calm look only. ===== */
/* intro: heading on top, the three facts side by side (label over text); no skyline drawing, no icons */
html.mgg-look-calm .elementor .mgg-split:has(> .mgg-defs){grid-template-columns:minmax(0,1fr);gap:36px}
html.mgg-look-calm .elementor .e-div-block-base:has(> .elementor-widget-shortcode .mgg-skyline){display:none}
html.mgg-look-calm .elementor .mgg-defs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;padding:0;border-top:0}
html.mgg-look-calm .elementor .mgg-defs>.mgg-def{display:block;padding:22px 0 0;border-top:1px solid var(--mgg-line);border-bottom:0}
html.mgg-look-calm .elementor .mgg-def-ico{display:none}
html.mgg-look-calm .elementor .mgg-def-text{display:block;color:var(--mgg-muted)}
html.mgg-look-calm .elementor .mgg-def-text strong{display:block;margin:0 0 8px;color:var(--mgg-ink)}
/* "Search has changed": text only (no mock search screen), a normal gap above instead of 80 + 72 px */
html.mgg-look-calm .elementor .mgg-shift-side>.e-div-block-base:has(> .elementor-widget-shortcode){display:none}
html.mgg-look-calm .elementor .mgg-shift{margin-top:56px;padding-top:56px}
@media (min-width:1025px){html.mgg-look-calm .elementor .mgg-shift-side{position:sticky;top:120px;align-self:start;padding:0}}
/* services: four equal cards with one structure (icon, title, text, link); no dark feature card, no mini charts or
   orbit; line icons that match the service; normal padding */
html.mgg-look-calm .elementor .mgg-bento{grid-template-columns:repeat(2,minmax(0,1fr));padding:0}
html.mgg-look-calm .elementor .mgg-bento>.mgg-svc{grid-row:auto;grid-column:auto;display:flex;flex-direction:column;gap:14px;padding:32px;color:var(--mgg-ink)}
html.mgg-look-calm .elementor .mgg-bento :is(.mgg-svc-vig,.mgg-svc-vig-orbit,.mgg-svc-vig-wide){display:none}
html.mgg-look-calm .elementor .mgg-bento :is(.mgg-svc-body,.mgg-svc-head){padding:0}
html.mgg-look-calm .elementor .mgg-bento .mgg-svc-body{display:flex;flex-direction:column;gap:14px;height:100%}
html.mgg-look-calm .elementor .mgg-bento .mgg-svc-body>.mgg-link{margin-top:auto}
html.mgg-look-calm .elementor .mgg-bento .mgg-svc-feature :is(h2,h3,.mgg-h3){color:var(--mgg-ink)}
html.mgg-look-calm .elementor .mgg-bento .mgg-svc-feature .mgg-on-dark{color:var(--mgg-muted)}
html.mgg-look-calm .elementor .mgg-bento .mgg-svc-feature .mgg-link-yellow{color:var(--mgg-ink)}
html.mgg-look-calm .elementor .mgg-bento .mgg-ico-tile{width:44px;height:44px;border-radius:10px;background-color:var(--mgg-white);border:0;color:var(--mgg-ink)}
html.mgg-look-calm .elementor .mgg-bento .mgg-ico-tile img{display:none}
html.mgg-look-calm .elementor .mgg-bento .mgg-ico-tile::before{content:"";position:static;inset:auto;display:block;width:22px;height:22px;margin:0;opacity:1;background:currentColor;-webkit-mask:var(--mgg-ico) center/contain no-repeat;mask:var(--mgg-ico) center/contain no-repeat}
html.mgg-look-calm .elementor .mgg-bento>.mgg-svc:nth-child(1) .mgg-ico-tile{--mgg-ico:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 256 256%27 fill=%27%23000%27%3E%3Cpath d=%27M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z%27/%3E%3C/svg%3E")}
html.mgg-look-calm .elementor .mgg-bento>.mgg-svc:nth-child(2) .mgg-ico-tile{--mgg-ico:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 256 256%27 fill=%27%23000%27%3E%3Cpath d=%27M248,120a48.05,48.05,0,0,0-48-48H160.2c-2.91-.17-53.62-3.74-101.91-44.24A16,16,0,0,0,32,40V200a16,16,0,0,0,26.29,12.25c37.77-31.68,77-40.76,93.71-43.3v31.72A16,16,0,0,0,159.12,214l11,7.33A16,16,0,0,0,194.5,212l11.77-44.36A48.07,48.07,0,0,0,248,120ZM48,199.93V40h0c42.81,35.91,86.63,45,104,47.24v65.48C134.65,155,90.84,164.07,48,199.93Zm131,8,0,.11-11-7.33V168h21.6ZM200,152H168V88h32a32,32,0,1,1,0,64Z%27/%3E%3C/svg%3E")}
html.mgg-look-calm .elementor .mgg-bento>.mgg-svc:nth-child(3) .mgg-ico-tile{--mgg-ico:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 256 256%27 fill=%27%23000%27%3E%3Cpath d=%27M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z%27/%3E%3C/svg%3E")}
html.mgg-look-calm .elementor .mgg-bento>.mgg-svc:nth-child(4) .mgg-ico-tile{--mgg-ico:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 256 256%27 fill=%27%23000%27%3E%3Cpath d=%27M245.66,74.34l-32-32a8,8,0,0,0-11.32,11.32L220.69,72H208c-49.33,0-61.05,28.12-71.38,52.92-9.38,22.51-16.92,40.59-49.48,42.84a40,40,0,1,0,.1,16c43.26-2.65,54.34-29.15,64.14-52.69C161.41,107,169.33,88,208,88h12.69l-18.35,18.34a8,8,0,0,0,11.32,11.32l32-32A8,8,0,0,0,245.66,74.34ZM48,200a24,24,0,1,1,24-24A24,24,0,0,1,48,200Z%27/%3E%3C/svg%3E")}
@media (max-width:767px){
  html.mgg-look-calm .elementor .mgg-defs,html.mgg-look-calm .elementor .mgg-bento{grid-template-columns:minmax(0,1fr)}
  html.mgg-look-calm .elementor .mgg-defs{row-gap:22px}
  html.mgg-look-calm .elementor .mgg-bento>.mgg-svc{padding:24px}
  html.mgg-look-calm .elementor .mgg-shift{margin-top:40px;padding-top:40px}
}

/* ===== R5d (Nov 12, design sweep of all page types) ===== */
/* section heads: the intro text starts level with the heading (bottom alignment put long intros above the heading) */
html.mgg-look-calm .elementor .mgg-head{align-items:start}
/* white line icon (ad page service card): black line icon on white, like the card next to it */
html.mgg-look-calm .elementor img.mgg-img-cover.mgg-img-on-dark{background-color:#000;filter:invert(1)}
/* partner write-ups: one row per partner (logo left, text in a readable column) instead of three 1,500 px columns */
@media (min-width:768px){
  html.mgg-look-calm .elementor .mgg-grid-3:has(>.mgg-case>:nth-child(9)){grid-template-columns:minmax(0,1fr);gap:24px}
  html.mgg-look-calm .elementor .mgg-grid-3:has(>.mgg-case>:nth-child(9))>.mgg-case{display:block;position:relative;padding:44px 48px 44px 384px}
  html.mgg-look-calm .elementor .mgg-grid-3:has(>.mgg-case>:nth-child(9))>.mgg-case>img:first-child{position:absolute;left:44px;top:44px;width:292px;margin:0}
  html.mgg-look-calm .elementor .mgg-grid-3:has(>.mgg-case>:nth-child(9))>.mgg-case>:not(img){max-width:70ch}
  html.mgg-look-calm .elementor .mgg-grid-3:has(>.mgg-case>:nth-child(9))>.mgg-case>:not(img)+:not(img){margin-top:12px}
  /* the kit's inline p{margin-top:0!important} would glue the paragraphs together */
  html.mgg-look-calm .elementor .mgg-grid-3:has(>.mgg-case>:nth-child(9))>.mgg-case>:is(p,h3,h4)+p{margin-top:12px!important}
  html.mgg-look-calm .elementor .mgg-grid-3:has(>.mgg-case>:nth-child(9))>.mgg-case>.mgg-kicker+p{margin-top:4px!important}
  html.mgg-look-calm .elementor .mgg-grid-3:has(>.mgg-case>:nth-child(9))>.mgg-case>:is(.mgg-kicker,h4){margin-top:24px}
  html.mgg-look-calm .elementor .mgg-grid-3:has(>.mgg-case>:nth-child(9))>.mgg-case>a:last-child{margin-top:20px}
}
@media (min-width:768px) and (max-width:1024px){
  html.mgg-look-calm .elementor .mgg-grid-3:has(>.mgg-case>:nth-child(9))>.mgg-case{padding:32px 32px 32px 268px}
  html.mgg-look-calm .elementor .mgg-grid-3:has(>.mgg-case>:nth-child(9))>.mgg-case>img:first-child{left:32px;top:32px;width:204px}
}
/* case studies: challenge, solution and results were the same numbered card block three times in a row.
   Challenge = a plain list with dividers, solution = cards (unchanged), results = dark cards (the payoff). */
html.mgg-look-calm body.parent-pageid-5417 .elementor .mgg-section:not(.mgg-section-soft):has(.mgg-card-num):has(~ .mgg-section-soft .mgg-card-num) .mgg-icard,
html.mgg-look-calm body.parent-pageid-5417 .elementor .mgg-section:not(.mgg-section-soft):has(.mgg-card-num):has(~ .mgg-section-soft .mgg-card-num) .mgg-icard:hover{background:none;border:0;border-left:1px solid var(--mgg-line);border-radius:0;padding:2px 8px 4px 24px}
html.mgg-look-calm body.parent-pageid-5417 .elementor .mgg-section:not(.mgg-section-soft):has(.mgg-card-num):has(~ .mgg-section-soft .mgg-card-num) .mgg-card-num{background:none;padding:0;min-width:0;color:var(--mgg-muted,#5F6B73)}
html.mgg-look-calm body.parent-pageid-5417 .elementor .mgg-section:has(.mgg-card-num):not(:has(~ .mgg-section .mgg-card-num)) .mgg-icard,
html.mgg-look-calm body.parent-pageid-5417 .elementor .mgg-section:has(.mgg-card-num):not(:has(~ .mgg-section .mgg-card-num)) .mgg-icard:hover{background-color:#161B1B}
html.mgg-look-calm body.parent-pageid-5417 .elementor .mgg-section:has(.mgg-card-num):not(:has(~ .mgg-section .mgg-card-num)) .mgg-icard .mgg-h3{color:#fff}
html.mgg-look-calm body.parent-pageid-5417 .elementor .mgg-section:has(.mgg-card-num):not(:has(~ .mgg-section .mgg-card-num)) .mgg-icard :is(.mgg-text,.mgg-muted){color:rgba(255,255,255,.74)}
html.mgg-look-calm body.parent-pageid-5417 .elementor .mgg-section:has(.mgg-card-num):not(:has(~ .mgg-section .mgg-card-num)) .mgg-icard a{color:#FFDE59}
html.mgg-look-calm body.parent-pageid-5417 .elementor .mgg-section:has(.mgg-card-num):not(:has(~ .mgg-section .mgg-card-num)) .mgg-card-num{background-color:#FFDE59;color:#161B1B}

/* ===== R5f (Nov 13, Raheel: "fix 2 landing pages") ===== */
/* 6622 core services: the two clip-art icons were stretched to 614x346 (one is a 128 px file); icon size on a white
   tile, like the homepage service cards */
html.mgg-look-calm body.page-id-6622 .elementor .mgg-grid-2>.mgg-case>img.mgg-img-logo:first-child{width:96px;height:96px;aspect-ratio:auto;padding:18px;margin:14px 0 4px 14px;object-fit:contain;border:0;border-radius:16px;background-color:#fff;align-self:flex-start}
html.mgg-look-calm body.page-id-6622 .elementor .mgg-grid-2>.mgg-case>img.mgg-img-on-dark:first-child{background-color:#000}
/* 6799 "Our Lead Generation Consists Of": the white line icon was swapped for a photo in the doc (D-070); keep the
   people in frame when the photo is cropped */
html.mgg-look-calm body.page-id-6799 .elementor .mgg-xsell-media>img.mgg-xsell-img{object-position:50% 0}
/* both ad pages' closing block: heading and line on top, then Core services / Company / Contact side by side
   (was one 650 px centred stack) */
@media (min-width:768px){
  html.mgg-look-calm body:is(.page-id-6622,.page-id-6799) .elementor .mgg-cta-section .mgg-cta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row dense;column-gap:40px;row-gap:10px;justify-items:center;align-items:start;text-align:center;max-width:960px}
  html.mgg-look-calm body:is(.page-id-6622,.page-id-6799) .elementor .mgg-cta-section .mgg-cta>:nth-child(-n+2){grid-column:1 / -1}
  html.mgg-look-calm body:is(.page-id-6622,.page-id-6799) .elementor .mgg-cta-section .mgg-cta>:nth-child(n+3):nth-child(-n+7){grid-column:1}
  html.mgg-look-calm body:is(.page-id-6622,.page-id-6799) .elementor .mgg-cta-section .mgg-cta>:nth-child(n+8):nth-child(-n+11){grid-column:2}
  html.mgg-look-calm body:is(.page-id-6622,.page-id-6799) .elementor .mgg-cta-section .mgg-cta>:nth-child(n+12){grid-column:3}
  html.mgg-look-calm body:is(.page-id-6622,.page-id-6799) .elementor .mgg-cta-section .mgg-cta>h5{margin:26px 0 4px}
}

/* ===== QA (Nov 13, Areeba): one system for form controls, placeholders, eyebrows, two-column sections, links,
   buttons and tables, plus page fixes. Content unchanged. ===== */
/* A. every form control uses the site font. Forminator asked for "Poppins" in the select list, which this site does
   not load, so the options fell back to a serif */
html.mgg-look-calm :is(input,textarea,select,option,button),
html.mgg-look-calm :is(.select2-container,.select2-dropdown,.select2-results__option,.select2-selection__rendered,.select2-search__field){font-family:var(--mgg-font,"Schibsted Grotesk",system-ui,sans-serif)!important}
/* B. placeholders: the field's own font, one muted grey (#69737A, 4.6:1 on the field fill); light grey on dark forms */
html.mgg-look-calm :is(input,textarea)::placeholder{font:inherit!important;color:#69737A!important;opacity:1!important}
html.mgg-look-calm :is([data-elementor-type="footer"],.mgg-section-dark,.mgg-phero,.mgg-band,.mgg-cta-section,.mgg-formpanel__side,.mgg-founder,.mgg-tpl-cta,.mgg-hero,.mgg-results-band) :is(input,textarea)::placeholder{color:rgba(255,255,255,.62)!important}
/* 9. "What are you trying to fix?": the list in the site font and palette (no purple/yellow highlight), same frame as
   the inputs */
/* (Forminator's own per-form CSS asks for Poppins 15px, a purple selected row, a yellow hover row and a 15 px inset, all
   !important on long selectors; the ID inside :is() gives these rules the weight to win) */
html.mgg-look-calm :is(#mgg-fp,.select2-dropdown,.forminator-select-dropdown):is(.select2-dropdown,.forminator-select-dropdown){border:1px solid #CDD5DC!important;border-radius:12px!important;overflow:hidden;background:#fff!important;box-shadow:0 16px 32px -16px rgba(22,27,27,.28)!important}
html.mgg-look-calm :is(#mgg-fp,.select2-dropdown,.forminator-select-dropdown) .select2-results__options .select2-results__option{font-family:var(--mgg-font,"Schibsted Grotesk",system-ui,sans-serif)!important;font-size:16px!important;font-weight:400!important;line-height:1.4!important;padding:12px 16px!important;color:var(--mgg-ink,#161B1B)!important;background:#fff!important}
html.mgg-look-calm :is(#mgg-fp,.select2-dropdown,.forminator-select-dropdown) .select2-results__options .select2-results__option.select2-results__option--selected{background:#F5F5F5!important;font-weight:600!important}
html.mgg-look-calm :is(#mgg-fp,.select2-dropdown,.forminator-select-dropdown) .select2-results__options .select2-results__option:is(.select2-results__option--highlighted,:hover){background:#EBEBEB!important;color:var(--mgg-ink,#161B1B)!important}
/* the closed field: same 16 px text inset as the other inputs (Forminator added 15 px on top of ours) */
html.mgg-look-calm :is(#mgg-fp,.forminator-ui) .forminator-select .select2-selection{padding:0!important;border-radius:12px!important}
html.mgg-look-calm .select2-container--open .select2-selection,html.mgg-look-calm .select2-container--focus .select2-selection{border-color:var(--mgg-ink,#161B1B)!important;box-shadow:0 0 0 3px rgba(22,27,27,.08)!important}
/* the "Edit form" link under a form is shown only to logged-in admins; hidden so reviews look like the live page */
html.mgg-look-calm .forminator-edit-module{display:none!important}

/* C. one eyebrow style for section labels, client labels and sub-labels: 13px, 600, 0.09em, uppercase; purple on
   light, light grey on dark */
html.mgg-look-calm .elementor :is(.mgg-tag,.mgg-col-label,.mgg-kicker){font-family:var(--mgg-font);font-size:13px;font-weight:600;line-height:1.3;letter-spacing:.09em;text-transform:uppercase}
html.mgg-look-calm .elementor .mgg-col-label,html.mgg-look-calm .elementor .mgg-col-label a{color:var(--mgg-accent,#4D00A4)}
/* hero labels sat 22 px above the heading, all others 14 px */
html.mgg-look-calm .elementor :is(.mgg-phero-copy,.mgg-hero-copy)>.mgg-tag{margin-bottom:-8px}
/* every label sits 14 px above its heading (stacks used 16, picture/text cards 20) */
html.mgg-look-calm .elementor .mgg-stack>.mgg-tag{margin-bottom:-2px}
html.mgg-look-calm .elementor .mgg-xsell-body>.mgg-tag{margin-bottom:-6px}
/* section labels: purple on light, yellow on dark (the hero labels were already yellow; others on dark were grey) */
html.mgg-look-calm :is(.mgg-section-dark,.mgg-phero,.mgg-band,.mgg-cta-section,.mgg-formpanel__side,.mgg-founder,.mgg-tpl-cta,.mgg-hero,.mgg-results-band) .mgg-tag:not(.mgg-x){color:var(--mgg-yellow,#FFDE59)}

/* D. two-column picture/text sections: two in a row alternate (the second has the picture on the left); halves are
   equal and the text is centred vertically; on tablet and phone the picture is always first */
html.mgg-look-calm .elementor .mgg-xsell-body{justify-content:center}
@media (min-width:1025px){
  html.mgg-look-calm .elementor .mgg-section:has(.mgg-xsell)+.mgg-section:has(.mgg-xsell) .mgg-xsell>.mgg-xsell-media{order:-1}
  html.mgg-look-calm .elementor .mgg-section:has(.mgg-xsell)+.mgg-section:has(.mgg-xsell)+.mgg-section:has(.mgg-xsell) .mgg-xsell>.mgg-xsell-media{order:0}
  /* text sections: one layout, heading left and text right (the centred single column on 3 pages matched no other) */
  html.mgg-look-calm .elementor .mgg-intro.mgg-intro--center{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:80px;max-width:none;margin-inline:0}
  html.mgg-look-calm .elementor .mgg-intro--center>.mgg-intro-body{max-width:none}
}
html.mgg-look-calm .elementor .mgg-callout.mgg-intro--duo{align-items:start}

/* E. one inline-link style: purple + thin underline, solid underline on hover, a visible focus ring everywhere */
html.mgg-look-calm a:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
/* 5. the reviews badge on a light card (Social Media page) had white text: dark text, purple link */
html.mgg-look-calm .mgg-reviews.mgg-reviews--dark:not(:is(.mgg-section-dark,.mgg-phero,.mgg-band,.mgg-cta-section,.mgg-formpanel__side,.mgg-founder,.mgg-tpl-cta,.mgg-hero,.mgg-results-band) *) :is(.mgg-reviews__text,.mgg-reviews__stars,.mgg-reviews__row,.mgg-reviews__gwrap){color:var(--mgg-ink,#161B1B)}
html.mgg-look-calm .mgg-reviews.mgg-reviews--dark:not(:is(.mgg-section-dark,.mgg-phero,.mgg-band,.mgg-cta-section,.mgg-formpanel__side,.mgg-founder,.mgg-tpl-cta,.mgg-hero,.mgg-results-band) *) .mgg-reviews__row .off{color:#C4C4C4}
html.mgg-look-calm .mgg-reviews.mgg-reviews--dark:not(:is(.mgg-section-dark,.mgg-phero,.mgg-band,.mgg-cta-section,.mgg-formpanel__side,.mgg-founder,.mgg-tpl-cta,.mgg-hero,.mgg-results-band) *) .mgg-reviews__link{color:var(--mgg-accent,#4D00A4);text-decoration-color:color-mix(in srgb,var(--mgg-accent,#4D00A4) 35%,transparent)}
html.mgg-look-calm .mgg-reviews.mgg-reviews--dark:not(:is(.mgg-section-dark,.mgg-phero,.mgg-band,.mgg-cta-section,.mgg-formpanel__side,.mgg-founder,.mgg-tpl-cta,.mgg-hero,.mgg-results-band) *):hover .mgg-reviews__link{color:var(--mgg-accent,#4D00A4);text-decoration-color:var(--mgg-accent,#4D00A4)}
html.mgg-look-calm .elementor a.mgg-link:not(:is(.mgg-section-dark,.mgg-phero,.mgg-band,.mgg-cta-section,.mgg-formpanel__side,.mgg-founder,.mgg-tpl-cta,.mgg-hero,.mgg-results-band) *):hover{color:var(--mgg-accent,#4D00A4)}

/* F. one button system: 16.5px/600, 17px 26px padding, 10px corners, 2px border, no shadow; yellow goes a shade darker
   on hover and darker again when pressed; outline buttons turn ink on hover; focus = 2px ring (ink, white on dark).
   Covers every .mgg-btn size, the outline "View more" buttons and the form submit buttons */
html.mgg-look-calm .elementor a.mgg-btn{font-family:var(--mgg-font);font-size:16.5px;font-weight:600;padding:17px 26px;border-radius:10px;border-width:2px;border-style:solid;box-shadow:none}
html.mgg-look-calm .elementor a.mgg-btn:not(.mgg-btn-ghost):active{background-color:#E6BC20;border-color:#E6BC20}
html.mgg-look-calm .elementor a.mgg-btn.mgg-btn-ghost:active{background-color:#F5F5F5}
html.mgg-look-calm .elementor a.mgg-btn:focus-visible{outline:2px solid var(--mgg-ink,#161B1B);outline-offset:3px}
html.mgg-look-calm :is(.mgg-section-dark,.mgg-phero,.mgg-band,.mgg-cta-section,.mgg-formpanel__side,.mgg-founder,.mgg-tpl-cta,.mgg-hero,.mgg-results-band,[data-elementor-type="footer"]) a.mgg-btn:focus-visible{outline-color:#fff}
html.mgg-look-calm :is(.forminator-ui,#mgg-fp) .forminator-button.forminator-button-submit{font-family:var(--mgg-font)!important;font-size:16.5px!important;font-weight:600!important;line-height:18px!important;padding:17px 26px!important;min-height:56px;height:auto!important;border-radius:10px!important;border:2px solid var(--mgg-yellow,#FFDE59)!important;background:var(--mgg-yellow,#FFDE59)!important;color:var(--mgg-ink,#161B1B)!important;box-shadow:none!important;text-transform:none!important;letter-spacing:0!important;transition:background-color .2s,border-color .2s}
html.mgg-look-calm :is(.forminator-ui,#mgg-fp) .forminator-button.forminator-button-submit:hover{background:#F3CC33!important;border-color:#F3CC33!important;transform:none!important}
html.mgg-look-calm :is(.forminator-ui,#mgg-fp) .forminator-button.forminator-button-submit:active{background:#E6BC20!important;border-color:#E6BC20!important}
html.mgg-look-calm :is(.forminator-ui,#mgg-fp) .forminator-button.forminator-button-submit:focus-visible{outline:2px solid var(--mgg-ink,#161B1B)!important;outline-offset:3px!important}
/* the footer newsletter button sits next to a 52 px field */
html.mgg-look-calm [data-elementor-type="footer"] :is(.forminator-ui,#mgg-fp) .forminator-button.forminator-button-submit{min-height:52px;padding:0 22px!important;font-size:15.5px!important;border-radius:10px!important}
html.mgg-look-calm [data-elementor-type="footer"] :is(.forminator-ui,#mgg-fp) .forminator-button.forminator-button-submit:focus-visible{outline-color:#fff!important}

/* 4. one table header style: ink row, white 16px/600 text, 16px 20px padding, left aligned (the "Compare" corner cell
   was lighter and smaller) */
html.mgg-look-calm .elementor table thead th{background:var(--mgg-ink,#161B1B)!important;color:#fff!important;font-family:var(--mgg-font)!important;font-size:16px!important;font-weight:600!important;line-height:1.35!important;padding:16px 20px!important;text-align:left!important;vertical-align:bottom}
html.mgg-look-calm .elementor table thead th:first-child>.mgg-cmp__sub:only-child{display:inline;margin:0;font:inherit!important;color:inherit!important;opacity:1!important;letter-spacing:0;text-transform:none}

/* 2. contact page: the hero was 915 px (one long column), so the form started below the fold. Heading and intro on the
   left, topics + reviews + contact on the right; no full-screen minimum height */
html.mgg-look-calm body.page-id-5028 .elementor .mgg-phero{min-height:0}
@media (min-width:1025px){
  html.mgg-look-calm body.page-id-5028 .elementor .mgg-phero{padding-top:140px;padding-bottom:72px}
  html.mgg-look-calm body.page-id-5028 .elementor .mgg-phero-copy:has(>.mgg-phero-copy){display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:72px;max-width:none;width:100%;align-items:start}
  html.mgg-look-calm body.page-id-5028 .elementor .mgg-phero-copy>.mgg-phero-copy{max-width:none}
  html.mgg-look-calm body.page-id-5028 .elementor .mgg-phero-copy>.mgg-phero-copy+.mgg-phero-copy{padding-top:10px}
}
@media (max-width:1024px){html.mgg-look-calm body.page-id-5028 .elementor .mgg-phero{padding-bottom:48px}}
@media (max-width:767px){html.mgg-look-calm body.page-id-5028 .elementor .mgg-phero .mgg-pill{font-size:13.5px;padding:8px 14px}}

/* 3. a centred call-to-action band centres its button row too (Thank You page) */
html.mgg-look-calm .elementor .mgg-cta>.mgg-row{justify-content:center}

/* 6. partner write-ups: the text fills the row in two columns (it left a 550 px empty strip), and the rows alternate
   logo left / logo right */
@media (min-width:1025px){
  html.mgg-look-calm .elementor .mgg-grid-3:has(>.mgg-case>:nth-child(9))>.mgg-case{columns:2;column-gap:48px;padding:48px 56px 48px 404px}
  html.mgg-look-calm .elementor .mgg-grid-3:has(>.mgg-case>:nth-child(9))>.mgg-case:nth-child(even){padding:48px 404px 48px 56px}
  html.mgg-look-calm .elementor .mgg-grid-3:has(>.mgg-case>:nth-child(9))>.mgg-case>img:first-child{left:48px;top:48px;width:300px}
  html.mgg-look-calm .elementor .mgg-grid-3:has(>.mgg-case>:nth-child(9))>.mgg-case:nth-child(even)>img:first-child{left:auto;right:48px}
  html.mgg-look-calm .elementor .mgg-grid-3:has(>.mgg-case>:nth-child(9))>.mgg-case>h3{column-span:all;margin-bottom:14px}
  html.mgg-look-calm .elementor .mgg-grid-3:has(>.mgg-case>:nth-child(9))>.mgg-case>:not(img){max-width:none;break-inside:avoid}
  html.mgg-look-calm .elementor .mgg-grid-3:has(>.mgg-case>:nth-child(9))>.mgg-case>:is(.mgg-kicker,h4){break-after:avoid}
}

/* 8. homepage case columns: the two text paragraphs sat 10 px further in than the client label, title and picture */
html.mgg-look-calm .elementor .mgg-col-text{padding-left:0;padding-right:0}

/* ===== D-072 (Nov 13, Raheel) ===== */
/* posts: text uses the full 1024 px column like the image and contents box above it (Raheel, Nov 14; the 72-character cap of D-072 was reverted) */
/* 3 post tables have no header markup (first row = plain cells): same dark header row as every other table (Areeba 4) */
html.mgg-look-calm .elementor .mgg-tpl-content table:not(:has(thead)) tr:first-child>td{background:var(--mgg-ink,#161B1B)!important;color:#fff!important;font-family:var(--mgg-font)!important;font-size:16px!important;font-weight:600!important;line-height:1.35!important;padding:16px 20px!important;text-align:left!important;font-style:normal!important}
html.mgg-look-calm .elementor .mgg-tpl-content table:not(:has(thead)) tr:first-child>td *{color:inherit!important;font:inherit!important}
/* outline buttons (3 on the site, all on light backgrounds) are filled purple next to the yellow main action */
html.mgg-look-calm .elementor a.mgg-btn.mgg-btn-ghost:not(:is(.mgg-section-dark,.mgg-phero,.mgg-band,.mgg-cta-section,.mgg-formpanel__side,.mgg-founder,.mgg-tpl-cta,.mgg-hero,.mgg-results-band) *){color:#fff;background-color:var(--mgg-accent,#4D00A4);border-color:var(--mgg-accent,#4D00A4)}
html.mgg-look-calm .elementor a.mgg-btn.mgg-btn-ghost:not(:is(.mgg-section-dark,.mgg-phero,.mgg-band,.mgg-cta-section,.mgg-formpanel__side,.mgg-founder,.mgg-tpl-cta,.mgg-hero,.mgg-results-band) *):is(:hover,:focus-visible,:visited){color:#fff}
html.mgg-look-calm .elementor a.mgg-btn.mgg-btn-ghost:not(:is(.mgg-section-dark,.mgg-phero,.mgg-band,.mgg-cta-section,.mgg-formpanel__side,.mgg-founder,.mgg-tpl-cta,.mgg-hero,.mgg-results-band) *):hover{background-color:#3D0085;border-color:#3D0085}
html.mgg-look-calm .elementor a.mgg-btn.mgg-btn-ghost:not(:is(.mgg-section-dark,.mgg-phero,.mgg-band,.mgg-cta-section,.mgg-formpanel__side,.mgg-founder,.mgg-tpl-cta,.mgg-hero,.mgg-results-band) *):active{background-color:#300069;border-color:#300069}

/* the preview switch (staging only, inc/v4-look.php) */
.mgg-look-switch{position:fixed;left:16px;bottom:16px;z-index:99990;display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:#161B1B;box-shadow:0 10px 30px -10px rgba(0,0,0,.45);font:600 13px/1 "Poppins",Arial,sans-serif}
.mgg-look-switch__label{padding:0 8px 0 10px;color:rgba(255,255,255,.7)}
.mgg-look-switch a{display:inline-block;padding:9px 14px;border-radius:999px;color:#fff;text-decoration:none}
.mgg-look-switch a[aria-current="true"]{background:#FFDE59;color:#161B1B}
.mgg-look-switch a:focus-visible{outline:2px solid #FFDE59;outline-offset:2px}
@media print{.mgg-look-switch{display:none}}