/* Self-hosted Montserrat (latin subset) - removes render-blocking Google Fonts request */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("/tpl/fonts/montserrat-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("/tpl/fonts/montserrat-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("/tpl/fonts/montserrat-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:800;font-display:swap;src:url("/tpl/fonts/montserrat-800.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:900;font-display:swap;src:url("/tpl/fonts/montserrat-900.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* Metric-matched Arial fallback: renders at Montserrat's proportions so the swap
   from fallback to Montserrat does not reflow text (kills font-swap CLS). */
@font-face{font-family:"Montserrat Fallback";src:local("Arial");ascent-override:96.88%;descent-override:25.12%;line-gap-override:0%;size-adjust:112.16%;}
/* =========================================================================
   mhg.css - Most High Gutters' own layer over the base template.
   Loaded AFTER custom.css so our rules win.
   PALETTE: strictly the logo colors (steel blue, deep navy, charcoal, white
   + tints). No amber, no green. TYPE: Montserrat, to match the logo lettering.
   ========================================================================= */
:root {
  --mhg-blue:      #005484;   /* logo wordmark / roof accent / downspout */
  --mhg-blue-deep: #002D47;   /* darkest logo blue */
  --mhg-ink:       #24303C;   /* logo charcoal (roof shadow, phone text) */
  --mhg-ink-2:     #111820;
  --mhg-tint:      #E0EAF0;   /* light tint of the brand blue */
  --mhg-paper:     #F4F7FA;   /* light section background */
  --mhg-line:      rgba(0,45,71,0.12);
  --mhg-font:      'Montserrat', 'Montserrat Fallback', system-ui, sans-serif;

  /* The base template's accent was cyan (#0aa5e1), which is NOT a logo color.
     Remap the template's own color vars to the logo palette so every var-based
     surface (accordion, need-help box, badges, etc.) inherits brand blue. */
  --primary-color:   #005484;
  --secondary-color: #005484;
  --accent-color:    #005484;
}

/* =========================================================================
   RESET + PRIMITIVES
   The homepage now loads ONLY this file (bootstrap + custom.css are gone), so
   the base reset, .container, form + utility primitives all live here.
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--mhg-font); color: var(--mhg-ink); background: #fff; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dd, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font-family: inherit; color: inherit; background: none; border: 0; padding: 0; }
input, textarea, select { font-family: inherit; font-size: 1rem; }
:focus-visible { outline: 3px solid var(--mhg-blue); outline-offset: 2px; }

.container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 1.5rem); }
.mhg-band { background: #fff; padding: clamp(3rem, 6vw, 5rem) 0; }
.mhg-band--paper { background: var(--mhg-paper); }

.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.visually-hidden-focusable:focus { position: fixed; top: .5rem; left: .5rem; z-index: 5000; width: auto; height: auto; padding: .7rem 1rem; background: var(--mhg-blue); color: #fff; border-radius: 6px; clip: auto; }

/* Section label pill (recreates the base template's rounded "• Label" chip). */
.mhg-pill { display: inline-flex; align-items: center; gap: .5rem; background: var(--mhg-tint); color: var(--mhg-blue); border-radius: 999px; padding: .4rem .95rem; font-family: var(--mhg-font); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.mhg-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mhg-blue); flex: 0 0 auto; }
.mhg-pill--light { background: rgba(255,255,255,0.12); color: #fff; }
.mhg-pill--light::before { background: #fff; }

/* --- Typography: match the logo (Montserrat) everywhere --- */
body, p, li, a, span, input, textarea, button, div, h1, h2, h3, h4, h5, h6,
.section-title h1, .section-title h2, .section-title h3, .navbar-nav .nav-link,
.rgp-label, .rgp-left-sub, .rgp-right-sub, .btn-default {
  font-family: var(--mhg-font);
}
h1, h2, h3, h4, h5, h6, .section-title h1, .section-title h2, .section-title h3 {
  letter-spacing: -0.01em; font-weight: 800;
}
body { color: var(--mhg-ink); }

/* --- Template behaviour tweaks --- */
@media (prefers-reduced-motion: reduce) { .hero-video { display: none !important; } }
.slicknav_btn .slicknav_icon { position: static !important; float: none !important; }
.navbar-toggle, .slicknav_btn { z-index: 1002; }
.rg-ticker-viewport:hover .rg-track { animation-play-state: paused; }

/* --- Header: clean in-flow white bar, capped square logo --- */
.rgs-header { position: relative !important; background: #ffffff !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.rgs-header .header-sticky { position: relative !important; background: transparent !important; }
.rgs-header .navbar-brand img { height: 54px !important; max-height: 54px !important; width: auto !important; }
.rgs-header .navbar-nav .nav-link { color: var(--mhg-ink) !important; font-weight: 600; }
.rgs-header .navbar-nav .nav-link:hover { color: var(--mhg-blue) !important; }
@media (max-width: 991px) { .rgs-header .navbar-brand img { height: 46px !important; max-height: 46px !important; } }

/* =========================================================================
   OUR BUTTON  (custom; not the template's btn-default)
   Squared, Montserrat, with a deep-navy fill that sweeps in from the left on
   hover, plus a flow-chevron that nudges. Used everywhere via .mhg-btn.
   ========================================================================= */
.mhg-btn {
  --btn-bg: var(--mhg-blue);
  --btn-fg: #fff;
  --btn-sweep: var(--mhg-blue-deep);
  position: relative; z-index: 0; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 1.5rem; border-radius: 4px; text-align: center;
  font-family: var(--mhg-font); font-weight: 700; font-size: 1rem; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; border: 2px solid var(--btn-bg);
  background: var(--btn-bg); color: var(--btn-fg);
  transition: transform .25s ease, color .25s ease, border-color .25s ease;
}
.mhg-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-sweep); transform: translateX(-101%);
  transition: transform .38s cubic-bezier(.6,.02,.2,1);
}
.mhg-btn:hover { transform: translateY(-2px); }
.mhg-btn:hover::before { transform: translateX(0); }
.mhg-btn__chev { transition: transform .3s ease; }
.mhg-btn:hover .mhg-btn__chev { transform: translateX(4px); }
.mhg-btn--white   { --btn-bg: #fff; --btn-fg: var(--mhg-blue-deep); --btn-sweep: var(--mhg-tint); border-color: #fff; }
.mhg-btn--outline { --btn-bg: transparent; --btn-fg: var(--mhg-blue); --btn-sweep: var(--mhg-blue); border-color: var(--mhg-blue); }
.mhg-btn--outline:hover { color: #fff; }
.mhg-btn--ghost   { --btn-bg: transparent; --btn-fg: #fff; --btn-sweep: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.5); }
.mhg-btn--ghost:hover { border-color: #fff; color: #fff; }

/* Retire the template button look: map any leftover .btn-default to ours */
.btn-default, .btn-default.btn-highlighted, .btn-default.btn-border {
  background: var(--mhg-blue) !important; color: #fff !important; border: 2px solid var(--mhg-blue) !important;
  border-radius: 4px !important; font-weight: 700 !important; box-shadow: none !important;
}
.btn-default.btn-border { background: transparent !important; color: var(--mhg-blue) !important; }
.btn-default:hover { background: var(--mhg-blue-deep) !important; border-color: var(--mhg-blue-deep) !important; color: #fff !important; }

/* --- Client-avatar thumbs: fixed circular size + fill --- */
.satisfy-client-image { width: 54px !important; height: 54px !important; flex: 0 0 auto !important; }
.satisfy-client-image figure { width: 100%; height: 100%; margin: 0; overflow: hidden; border-radius: 50%; }
.satisfy-client-image figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Brand backgrounds (replace the template's LA images) --- */
.crew-hero, .crew-hero__bg { background-color: var(--mhg-blue-deep); }
.crew-hero::before { background: linear-gradient(90deg, rgba(0,45,71,0.92), rgba(0,45,71,0.65)); }
#rgWhy.inspection-coverage { background: var(--mhg-paper); }
.where-we-work-section { background: var(--mhg-blue-deep) !important; }
.where-we-work-section .overlay { background: rgba(0,45,71,0.35); }

/* =========================================================================
   FLOW ARROW  (our own circular double-chevron: flows right + drips on hover)
   ========================================================================= */
.mhg-arrow {
  --size: 56px; position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: var(--size); height: var(--size); border-radius: 50%;
  background: #fff; border: 2px solid var(--mhg-blue); color: var(--mhg-blue);
  overflow: hidden; transition: background-color .3s, color .3s, border-color .3s, transform .3s; flex: 0 0 auto;
}
/* Our own animation: water RISES to fill the disc, the chevron nudges, and a
   drop falls. (Replaces the copied "chevron slides out, clone slides in".) */
.mhg-arrow::before { content: ""; position: absolute; inset: -1px; z-index: 0; background: var(--mhg-blue); border-radius: 50%; transform: translateY(101%); transition: transform .5s cubic-bezier(.5,.05,.2,1); }
.mhg-arrow:hover, a:hover > .mhg-arrow { color: #fff; transform: translateY(-2px); }
.mhg-arrow:hover::before, a:hover > .mhg-arrow::before { transform: translateY(0); }
.mhg-arrow__chevrons { position: relative; z-index: 1; width: 22px; height: 16px; }
.mhg-arrow__chev { position: absolute; top: 0; left: 0; width: 22px; height: 16px; transition: transform .3s ease; }
.mhg-arrow__chev svg { width: 22px; height: 16px; display: block; }
.mhg-arrow__chev--clone { display: none; }
.mhg-arrow:hover .mhg-arrow__chev--lead, a:hover > .mhg-arrow .mhg-arrow__chev--lead { transform: translateX(4px); }
.mhg-arrow__drop { position: absolute; left: 50%; bottom: 7px; z-index: 2; width: 6px; height: 6px; margin-left: -3px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #fff; opacity: 0; }
.mhg-arrow:hover .mhg-arrow__drop, a:hover > .mhg-arrow .mhg-arrow__drop { animation: mhg-drip .7s ease-in .05s; }
@keyframes mhg-drip { 0% { opacity: 0; transform: translateY(-6px) scaleY(.5); } 35% { opacity: 1; transform: translateY(0) scaleY(1); } 100% { opacity: 0; transform: translateY(14px) scaleY(1.3); } }
@media (prefers-reduced-motion: reduce) { .mhg-arrow, .mhg-arrow::before, .mhg-arrow__chev { transition: none; } .mhg-arrow__drop { display: none; } }
.mhg-card-arrow { position: absolute; right: 16px; bottom: 16px; z-index: 3; }
.mhg-card-arrow .mhg-arrow { box-shadow: 0 6px 16px rgba(0,0,0,0.18); }
.mhg-arrow-link { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--mhg-blue); font-family: var(--mhg-font); font-weight: 700; }
.mhg-arrow-link:hover { color: var(--mhg-blue-deep); }
.mhg-arrow-link .mhg-arrow { --size: 46px; }

/* =========================================================================
   Sticky mobile CTA (rule #6). Logo colors only.
   ========================================================================= */
.mhg-sticky-cta { display: none; }
@media (max-width: 767px) {
  .mhg-sticky-cta { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000; box-shadow: 0 -4px 16px rgba(0,0,0,0.18); }
  .mhg-sticky-cta a { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .95rem .5rem; font-family: var(--mhg-font); font-weight: 700; font-size: 1rem; text-decoration: none; }
  .mhg-sticky-call { background: var(--mhg-blue); color: #fff; }
  .mhg-sticky-quote { background: var(--mhg-blue-deep); color: #fff; }
  .mhg-sticky-ico { display: inline-flex; }
  .mhg-sticky-ico svg { width: 1.15rem; height: 1.15rem; }
  body { padding-bottom: 60px; }
}

/* --- Footer nav --- */
.mhg-footer-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; }
.mhg-footer-nav a { color: rgba(255,255,255,0.82); text-decoration: none; font-family: var(--mhg-font); font-weight: 600; transition: color .15s ease; }
.mhg-footer-nav a:hover { color: #fff; }

/* --- Marker underline (steel-blue tint; use on LIGHT sections) --- */
/* Highlighter marker that wraps safely across lines (no nowrap -> no overflow on
   narrow screens). Background-based so each wrapped line keeps the highlight. */
.mhg-mark { color: var(--mhg-blue); padding: 0 2px; border-radius: 2px;
  background-image: linear-gradient(var(--mhg-tint), var(--mhg-tint));
  background-repeat: no-repeat; background-size: 100% 0.30em; background-position: 0 88%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* =========================================================================
   HERO  (deep navy, blueprint grid, white text, white CTA, flow line)
   ========================================================================= */
.mhg-hero { position: relative; overflow: hidden; color: #fff; padding: clamp(2.5rem,6vw,5.5rem) 0 clamp(3rem,6vw,5.5rem);
  background: radial-gradient(1200px 500px at 82% -10%, rgba(0,84,132,0.6), transparent 60%), var(--mhg-blue-deep); }
.mhg-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 46px 46px; mask-image: radial-gradient(80% 80% at 30% 20%, #000 40%, transparent 100%); }
.mhg-hero__grid { position: relative; display: grid; gap: clamp(2rem,4vw,3.5rem); align-items: center; }
@media (min-width: 992px) { .mhg-hero__grid { grid-template-columns: 1.05fr 0.95fr; } }
.mhg-eyebrow { display: inline-flex; align-items: center; gap: .55rem; text-transform: uppercase; letter-spacing: .2em; font-size: .78rem; font-weight: 700; color: var(--mhg-tint); margin: 0 0 1.1rem; }
.mhg-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--mhg-tint); display: inline-block; }
.mhg-hero__title { font-weight: 800; font-size: clamp(2.5rem,5.6vw,4.3rem); line-height: 1.0; letter-spacing: -0.02em; margin: 0 0 1.25rem; color: #fff; }
.mhg-hero__title .u { text-decoration: underline; text-decoration-color: var(--mhg-blue); text-decoration-thickness: .12em; text-underline-offset: .1em; }
.mhg-hero__lead { font-size: clamp(1.05rem,1.5vw,1.22rem); line-height: 1.6; color: rgba(255,255,255,0.82); max-width: 46ch; margin: 0 0 1.9rem; }
.mhg-hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 2.2rem; }
.mhg-hero__trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,auto); gap: 0 2rem; }
.mhg-hero__trust li { padding-top: 1rem; border-top: 2px solid rgba(255,255,255,0.2); }
.mhg-hero__trust strong { display: block; font-family: var(--mhg-font); font-size: 1.7rem; font-weight: 800; color: #fff; line-height: 1; }
.mhg-hero__trust span { font-size: .85rem; color: rgba(255,255,255,0.7); }
.mhg-hero__media { position: relative; aspect-ratio: 3 / 4; max-height: 600px; }
.mhg-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 10px; display: block; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6); }
.mhg-hero__badge { position: absolute; left: -14px; bottom: 26px; background: #fff; color: var(--mhg-blue-deep); border-radius: 8px; padding: .85rem 1.1rem; box-shadow: 0 18px 40px -12px rgba(0,0,0,0.45); border-left: 5px solid var(--mhg-blue); }
.mhg-hero__badge .num { display: block; font-family: var(--mhg-font); font-weight: 800; font-size: 1.1rem; }
.mhg-hero__badge span:last-child { font-size: .8rem; color: #4a5a68; }
@media (max-width: 991px) { .mhg-hero__media { display: block; max-height: 340px; } .mhg-hero__trust { grid-template-columns: repeat(3,1fr); gap: 0 1rem; } }
.mhg-flowline { position: absolute; top: 0; bottom: 0; left: 26px; width: 2px; z-index: 1; pointer-events: none; }
.mhg-flowline::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(224,234,240,0.55) 20%, rgba(224,234,240,0.55) 80%, transparent); }
.mhg-flowline::after { content: ""; position: absolute; left: -3px; width: 8px; height: 8px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--mhg-tint); animation: mhg-flow 3.2s ease-in infinite; }
@keyframes mhg-flow { 0% { top: 6%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 92%; opacity: 0; } }
@media (max-width: 991px) { .mhg-flowline { display: none; } }
@media (prefers-reduced-motion: reduce) { .mhg-flowline::after { animation: none; opacity: 0; } }

/* =========================================================================
   SHARED section header (kicker + rule + heading), logo colors
   ========================================================================= */
.mhg-kicker { display: inline-flex; align-items: center; gap: .55rem; text-transform: uppercase; letter-spacing: .2em; font-size: .78rem; font-weight: 700; color: var(--mhg-blue); margin: 0 0 .8rem; }
.mhg-kicker::before { content: ""; width: 26px; height: 2px; background: var(--mhg-blue); display: inline-block; }
.mhg-h2 { font-size: clamp(1.9rem,3.6vw,2.9rem); font-weight: 800; letter-spacing: -0.02em; color: var(--mhg-ink); line-height: 1.05; margin: 0; }
.mhg-h2--light { color: #fff; }

/* =========================================================================
   HOW IT WORKS  (our own: a connected "flow" of numbered steps, no cards)
   ========================================================================= */
.mhg-steps { background: var(--mhg-paper); padding: clamp(3rem,6vw,5.5rem) 0; }
.mhg-steps__head { max-width: 640px; margin: 0 0 clamp(2rem,4vw,3.5rem); }
.mhg-steps__row { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem; position: relative; }
@media (min-width: 900px) { .mhg-steps__row { grid-template-columns: repeat(4,1fr); gap: 1.5rem; } }
.mhg-step { position: relative; padding-top: 4.2rem; }
.mhg-step__num { position: absolute; top: 0; left: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--mhg-blue); color: #fff; font-family: var(--mhg-font); font-weight: 800; display: grid; place-items: center; font-size: 1.1rem; box-shadow: 0 8px 18px -6px rgba(0,84,132,0.5); }
@media (min-width: 900px) {
  .mhg-step::after { content: ""; position: absolute; top: 23px; left: 62px; right: -1.5rem; height: 2px;
    background: repeating-linear-gradient(90deg, var(--mhg-blue) 0 8px, transparent 8px 16px); opacity: .45; }
  .mhg-step:last-child::after { display: none; }
}
.mhg-step h4 { font-family: var(--mhg-font); font-weight: 800; font-size: 1.15rem; color: var(--mhg-ink); margin: 0 0 .5rem; }
.mhg-step p { color: #55636e; margin: 0; font-size: .98rem; line-height: 1.55; }

/* =========================================================================
   SERVICES  (our own: two big split blocks with an index numeral + overlay)
   ========================================================================= */
.mhg-svcs { display: grid; gap: 1.75rem; }
@media (min-width: 860px) { .mhg-svcs { grid-template-columns: 1fr 1fr; } }
.mhg-svc { position: relative; display: block; border-radius: 12px; overflow: hidden; min-height: 360px; text-decoration: none; box-shadow: 0 20px 40px -18px rgba(0,0,0,.3); }
.mhg-svc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mhg-svc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,45,71,0.12) 0%, rgba(0,45,71,0.5) 52%, rgba(0,45,71,0.92) 100%); }
.mhg-svc:hover img { transform: scale(1.05); }
.mhg-svc__index { position: absolute; top: 1.2rem; left: 1.4rem; z-index: 2; font-family: var(--mhg-font); font-weight: 800; font-size: 1rem; color: var(--mhg-tint); letter-spacing: .1em; }
.mhg-svc__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.6rem; color: #fff; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.mhg-svc__title { font-family: var(--mhg-font); font-weight: 800; font-size: 1.5rem; margin: 0 0 .35rem; color: #fff !important; }
.mhg-svc__desc { margin: 0; color: rgba(255,255,255,0.82); font-size: .95rem; max-width: 34ch; }
/* flow-arrow reacts to a hover anywhere on the whole card */
.mhg-svc:hover .mhg-arrow { color: #fff; transform: translateY(-2px); }
.mhg-svc:hover .mhg-arrow::before { transform: translateY(0); }
.mhg-svc:hover .mhg-arrow .mhg-arrow__chev--lead { transform: translateX(4px); }
.mhg-svc:hover .mhg-arrow .mhg-arrow__drop { animation: mhg-drip .7s ease-in .05s; }

/* =========================================================================
   FROM-SCRATCH REBUILDS + cleanup (removed template JS: cursor, smoothscroll,
   wow, gsap, swiper, slicknav, parallax, YT). Neutralize their leftover classes
   so nothing stays hidden, and restore the default cursor.
   ========================================================================= */
* { cursor: auto; }
a, button, [role="button"], .mhg-nav__toggle, summary, .accordion-button, label[for] { cursor: pointer; }
.wow { visibility: visible !important; opacity: 1 !important; animation: none !important; }
.text-anime-style-3 { opacity: 1 !important; }
.image-anime { opacity: 1 !important; }
.image-anime::before, .image-anime::after { display: none !important; }
/* .reveal ships visibility:hidden and relied on the GSAP JS we removed; force it
   visible + let the figure size normally so the FAQ photos actually render */
.reveal { visibility: visible !important; display: block !important; width: 100%; }
.reveal img { position: static !important; height: auto !important; width: 100% !important; transform: none !important; clip-path: none !important; }
/* kill the template button's built-in arrow pseudo-elements */
.btn-default::before, .btn-default::after { content: none !important; display: none !important; }
.btn-default { transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease; }
.btn-default:hover { transform: translateY(-2px); }

/* extra button sizes/shapes for our .mhg-btn */
.mhg-btn--sm { padding: .62rem 1.05rem; font-size: .92rem; }
.mhg-btn--block { width: 100%; justify-content: center; }

/* =========================================================================
   HEADER  (single line: logo | nav | phone + CTA)  built from scratch
   ========================================================================= */
.mhg-nav { position: sticky; top: 0; z-index: 1000; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.mhg-nav__inner { display: flex; align-items: center; gap: 1.5rem; padding-top: .65rem; padding-bottom: .65rem; }
.mhg-nav__logo img { height: 72px; width: auto; display: block; }
.mhg-nav__menu { margin-left: auto; }
.mhg-nav__menu ul { display: flex; align-items: center; gap: 1.35rem; list-style: none; margin: 0; padding: 0; }
.mhg-nav__menu a { color: var(--mhg-ink); font-weight: 600; font-size: .95rem; text-decoration: none; transition: color .15s ease; }
.mhg-nav__menu a:hover { color: var(--mhg-blue); }
.mhg-nav__right { display: flex; align-items: center; gap: 1rem; }
.mhg-nav__phone { display: inline-flex; align-items: center; gap: .45rem; color: var(--mhg-blue-deep); font-weight: 700; text-decoration: none; white-space: nowrap; }
.mhg-nav__phone:hover { color: var(--mhg-blue); }
.mhg-nav__phone-ico { width: 18px; height: 18px; color: var(--mhg-blue); display: inline-flex; }
.mhg-nav__phone-ico svg { width: 100%; height: 100%; }
.mhg-nav__toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 40px; border: 0; background: transparent; padding: 0; }
.mhg-nav__toggle span { display: block; height: 3px; width: 24px; margin: 0 auto; background: var(--mhg-blue-deep); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.mhg-nav.is-open .mhg-nav__toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.mhg-nav.is-open .mhg-nav__toggle span:nth-child(2) { opacity: 0; }
.mhg-nav.is-open .mhg-nav__toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 991px) {
  .mhg-nav__inner { flex-wrap: wrap; }
  .mhg-nav__menu { position: absolute; top: 100%; left: 0; right: 0; background: #fff; box-shadow: 0 12px 24px rgba(0,0,0,0.1); display: none; margin: 0; }
  .mhg-nav.is-open .mhg-nav__menu { display: block; }
  .mhg-nav__menu ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 5%; }
  .mhg-nav__menu li a { display: block; padding: .85rem 0; border-bottom: 1px solid var(--mhg-line); }
  .mhg-nav__right { margin-left: auto; }
  .mhg-nav__toggle { display: flex; }
  .mhg-nav__phone span:last-child { display: none; }
}
@media (max-width: 520px) { .mhg-nav .mhg-btn--sm { display: none; } }

/* =========================================================================
   MARQUEE  (own CSS scroll; SVG water-drop between items; no glitch)
   ========================================================================= */
.mhg-marquee { background: var(--mhg-blue); overflow: hidden; }
.mhg-marquee__track { display: flex; width: max-content; animation: mhg-marquee 34s linear infinite; }
.mhg-marquee:hover .mhg-marquee__track, .mhg-marquee:focus-within .mhg-marquee__track { animation-play-state: paused; }
.mhg-marquee__item { display: inline-flex; align-items: center; gap: .6rem; padding: 1rem 1.6rem; color: #fff; font-weight: 700; font-size: .95rem; white-space: nowrap; }
.mhg-marquee__item svg { width: 16px; height: 20px; color: var(--mhg-tint); flex: 0 0 auto; }
@keyframes mhg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mhg-marquee__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; } }

/* =========================================================================
   GALLERY  (native horizontal slideshow + prev/next buttons; no wheel hijack,
   no custom scrollbar). Own hover: zoom + steel-blue ring.
   ========================================================================= */
.mhg-gallery { position: relative; }
.mhg-gallery__track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: .75rem; }
.mhg-gallery__item { position: relative; flex: 0 0 auto; width: min(82vw, 380px); aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; scroll-snap-align: start; }
.mhg-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.mhg-gallery__item:hover img { transform: scale(1.06); }
.mhg-gallery__item::after { content: ""; position: absolute; inset: 8px; border: 2px solid var(--mhg-tint); border-radius: 6px; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.mhg-gallery__item:hover::after { opacity: .9; }
.mhg-gallery__nav { display: flex; gap: .6rem; margin-top: 1.1rem; }
.mhg-gallery__btn { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--mhg-blue); background: #fff; color: var(--mhg-blue); cursor: pointer; display: grid; place-items: center; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.mhg-gallery__btn:hover { background: var(--mhg-blue); color: #fff; transform: translateY(-2px); }
.mhg-gallery__btn svg { width: 24px; height: 24px; }

/* =========================================================================
   FOOTER  (white, full-width, ends the page)  built from scratch
   ========================================================================= */
.mhg-footer { background: #fff; border-top: 1px solid var(--mhg-line); }
.mhg-footer .container { padding-top: clamp(2.5rem,5vw,4rem); padding-bottom: 1.4rem; }
.mhg-footer__top { display: grid; gap: 2.5rem; grid-template-columns: 1.5fr 1fr 1.2fr; }
@media (max-width: 860px) { .mhg-footer__top { grid-template-columns: 1fr; gap: 2rem; } }
.mhg-footer__brand img { height: 84px; width: auto; }
.mhg-footer__brand p { color: #55636e; margin: 1rem 0; max-width: 44ch; line-height: 1.6; }
.mhg-footer__social a { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mhg-blue); color: #fff; }
.mhg-footer__social a:hover { background: var(--mhg-blue-deep); }
.mhg-footer__social svg { width: 20px; height: 20px; display: block; }
.mhg-footer__links h3, .mhg-footer__contact h3 { font-family: var(--mhg-font); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--mhg-ink); margin: 0 0 1rem; }
.mhg-footer__links ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.mhg-footer__links a { color: #55636e; text-decoration: none; font-weight: 600; }
.mhg-footer__links a:hover { color: var(--mhg-blue); }
.mhg-footer__row { display: flex; align-items: center; gap: .6rem; color: var(--mhg-ink); text-decoration: none; margin: 0 0 .7rem; font-weight: 600; }
.mhg-footer__row:hover { color: var(--mhg-blue); }
.mhg-footer__ico { width: 20px; height: 20px; color: var(--mhg-blue); flex: 0 0 auto; display: inline-flex; }
.mhg-footer__ico svg { width: 100%; height: 100%; }
.mhg-footer__lic { color: #5b6976; font-size: .85rem; margin: .2rem 0 0; }
.mhg-footer__bar { border-top: 1px solid var(--mhg-line); margin-top: 2.2rem; padding-top: 1.3rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: #5b6976; font-size: .85rem; }
.mhg-footer__bar p { margin: 0; }
.mhg-footer__bar a { color: #55636e; text-decoration: none; }
.mhg-footer__bar a:hover { color: var(--mhg-blue); text-decoration: underline; }
.mhg-footer__meta span { margin: 0 .5rem; color: var(--mhg-line); }

/* =========================================================================
   PHOTO-HOVER TWIST on service cards (underline-draw under the title)
   ========================================================================= */
.mhg-svc img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.mhg-svc:hover img { transform: scale(1.06); }
.mhg-svc__body { transition: transform .4s ease; }
.mhg-svc:hover .mhg-svc__body { transform: translateY(-5px); }
.mhg-svc__title { background-image: linear-gradient(var(--mhg-tint), var(--mhg-tint)); background-size: 0% 3px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 4px; transition: background-size .4s ease; }
.mhg-svc:hover .mhg-svc__title { background-size: 100% 3px; }

/* --- Inline SVG icon utilities (Remix set) --- */
.mhg-ico { display: inline-flex; align-items: center; justify-content: center; color: var(--mhg-blue); }
.mhg-ico svg { width: 1.6rem; height: 1.6rem; }
.mhg-mk { display: inline-flex; width: 1.05em; height: 1.05em; color: inherit; vertical-align: -0.17em; margin-right: .25rem; }
.mhg-mk svg { width: 100%; height: 100%; }
/* the template contact section sized <img> icons; keep our spans tidy there */
.rgp-ico .mhg-ico svg { width: 1.5rem; height: 1.5rem; }
/* contact icons sit on a solid blue chip: recolor chip to brand blue, icon white */
.rgp-ico { background: var(--mhg-blue) !important; }
.rgp-ico .mhg-ico, .rgp-ico .mhg-ico a { color: #fff; }
/* the base template shipped a cyan accent (#0aa5e1) not in the logo palette;
   remap the remaining rendered cyan surfaces to brand blue for cohesion */
.rgp-left { background: var(--mhg-blue) !important; }
.rgp-badge span { background: var(--mhg-blue) !important; }
.rgp-item h3 a { color: var(--mhg-blue) !important; }
.need-help-box .icon-box .mhg-ico svg { width: 1.6rem; height: 1.6rem; color: #fff; }
.need-help-box .icon-box .mhg-ico { color: #fff; }
/* accent + primary are now the same blue, so give the hover fill the deep navy
   for a visible state change */
.need-help-box::before { background: var(--mhg-blue-deep) !important; }

/* Arrow-link legible on the dark "areas we serve" section */
.where-we-work-section .mhg-arrow-link { color: #fff; }
.where-we-work-section .mhg-arrow { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.where-we-work-section .mhg-arrow::before { background: #fff; }
.where-we-work-section .mhg-arrow-link:hover .mhg-arrow, .where-we-work-section .mhg-arrow:hover { color: var(--mhg-blue-deep); border-color: #fff; }
.where-we-work-section .mhg-arrow__drop { background: var(--mhg-blue-deep); }

/* a11y: outline button on the dark crew section must be white (was low-contrast blue-on-navy) */
.crew-hero .btn-default.btn-border, .bg-dark .btn-default.btn-border { color: #fff !important; border-color: rgba(255,255,255,.6) !important; }
.crew-hero .btn-default.btn-border:hover, .bg-dark .btn-default.btn-border:hover { background: #fff !important; color: var(--mhg-blue-deep) !important; }

/* =========================================================================
   REBUILT SECTIONS (own CSS, no bootstrap / no custom.css dependency)
   contact | why-us | crew | faq (native <details> accordion) | areas
   ========================================================================= */

/* ---- Contact ----------------------------------------------------------- */
.mhg-contact { padding: clamp(3rem, 6vw, 5rem) 0; background: #fff; }
.mhg-contact__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.mhg-contact__info { background: var(--mhg-blue); border-radius: 24px 0 0 24px; padding: 22px; }
.mhg-contact__card { background: #fff; border-radius: 20px; padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: 0 10px 30px rgba(0,0,0,0.06); height: 100%; }
.mhg-contact__title { font-family: var(--mhg-font); font-weight: 800; color: var(--mhg-blue-deep); font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.08; margin: 1rem 0 .8rem; }
.mhg-contact__sub { color: #55636e; margin-bottom: 1.6rem; max-width: 46ch; }
.mhg-contact__rows { display: grid; gap: 1rem; }
.mhg-contact__row { display: flex; align-items: center; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--mhg-line); }
.mhg-contact__row:first-child { border-top: 0; padding-top: 0; }
.mhg-contact__ico { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 50%; background: var(--mhg-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.mhg-contact__ico svg { width: 1.4rem; height: 1.4rem; }
.mhg-contact__label { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: #5b6976; margin-bottom: .1rem; }
.mhg-contact__val, .mhg-contact__val a { font-family: var(--mhg-font); font-weight: 800; color: var(--mhg-blue); font-size: 1.05rem; }
.mhg-contact__form { background: var(--mhg-blue-deep); color: #fff; border-radius: 0 24px 24px 0; padding: clamp(2rem, 4vw, 3rem) clamp(1.4rem, 3vw, 2.2rem); display: flex; flex-direction: column; }
.mhg-contact__form-title { font-family: var(--mhg-font); font-weight: 800; color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .4rem; }
.mhg-contact__form-sub { color: rgba(255,255,255,0.8); margin-bottom: 1.4rem; }
.mhg-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: auto; }
.mhg-field-full { grid-column: 1 / -1; }
.mhg-input { width: 100%; background: #fff; color: var(--mhg-ink); border: 2px solid transparent; border-radius: 10px; padding: .85rem 1rem; font-family: var(--mhg-font); }
.mhg-input::placeholder { color: #8a94a0; }
.mhg-input:focus { outline: none; border-color: var(--mhg-tint); box-shadow: 0 0 0 3px rgba(255,255,255,0.35); }
textarea.mhg-input { resize: vertical; min-height: 120px; }
.mhg-alert { border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1rem; background: #fff; font-weight: 600; }
@media (max-width: 860px) {
  .mhg-contact__grid { grid-template-columns: 1fr; }
  .mhg-contact__info { border-radius: 24px 24px 0 0; }
  .mhg-contact__form { border-radius: 0 0 24px 24px; }
  .mhg-field-grid { grid-template-columns: 1fr; }
}

/* ---- Why choose us ----------------------------------------------------- */
.mhg-why { background: var(--mhg-paper); padding: clamp(3.5rem, 7vw, 6rem) 0; }
.mhg-why__head { max-width: 680px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.mhg-why__head .mhg-h2 { margin-top: .8rem; }
.mhg-why__lead { color: #55636e; margin-top: .9rem; }
.mhg-why__points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.mhg-why__point { background: #fff; border: 1px solid var(--mhg-line); border-radius: 14px; padding: 1.6rem; border-top: 4px solid var(--mhg-blue); }
.mhg-why__point h4 { font-family: var(--mhg-font); font-weight: 800; color: var(--mhg-blue); font-size: 1.15rem; margin-bottom: .5rem; }
.mhg-why__point p { color: #55636e; font-size: .97rem; }
@media (max-width: 860px) { .mhg-why__points { grid-template-columns: 1fr; } }

/* ---- Crew -------------------------------------------------------------- */
.mhg-crew { position: relative; background: var(--mhg-blue-deep); color: #fff; padding: clamp(3.5rem, 7vw, 7rem) 0; overflow: hidden; }
.mhg-crew__grid { display: grid; grid-template-columns: 1.25fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.mhg-crew__content { max-width: 640px; }
.mhg-crew__portrait { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6); }
.mhg-crew__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.mhg-crew__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 1.3rem 1.1rem; background: linear-gradient(to top, rgba(0,45,71,0.92), rgba(0,45,71,0)); }
.mhg-crew__cap strong { display: block; font-family: var(--mhg-font); font-weight: 800; font-size: 1.2rem; color: #fff; }
.mhg-crew__cap span { color: var(--mhg-tint); font-size: .9rem; }
@media (max-width: 860px) {
  .mhg-crew__grid { grid-template-columns: 1fr; gap: 2rem; }
  .mhg-crew__content { max-width: none; }
  .mhg-crew__portrait { order: -1; max-width: 360px; }
}
.mhg-crew__title { font-family: var(--mhg-font); font-weight: 800; color: #fff; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08; margin: 1rem 0 .9rem; }
.mhg-crew__lead { color: rgba(255,255,255,0.82); max-width: 60ch; margin-bottom: 1.6rem; }
.mhg-crew__btns { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.4rem; }
.mhg-crew__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; }
.mhg-crew__exp strong { display: block; font-family: var(--mhg-font); font-weight: 900; font-size: clamp(2.6rem, 5vw, 3.4rem); line-height: 1; color: #fff; }
.mhg-crew__exp span { color: rgba(255,255,255,0.8); font-weight: 600; }
.mhg-crew__faces { display: flex; align-items: center; gap: 1rem; }
.mhg-crew__thumbs { display: flex; }
.mhg-crew__thumbs figure { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 3px solid var(--mhg-blue-deep); margin-left: -14px; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.mhg-crew__thumbs figure:first-child { margin-left: 0; }
.mhg-crew__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.mhg-crew__facescopy p { color: rgba(255,255,255,0.75); font-size: .85rem; }
.mhg-crew__facescopy strong { font-weight: 800; color: #fff; }

/* ---- FAQ + native accordion ------------------------------------------- */
.mhg-faq { padding: clamp(3.5rem, 7vw, 6rem) 0; background: #fff; }
.mhg-faq__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2.2rem; }
.mhg-faq__head .mhg-h2 { margin-top: .6rem; }
.mhg-faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.mhg-faq__media { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-content: start; }
.mhg-faq__photo { border-radius: 16px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,45,71,0.12); aspect-ratio: 3 / 4; }
.mhg-faq__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mhg-faq__help { grid-column: 1 / -1; display: flex; align-items: center; gap: .9rem; background: var(--mhg-blue); color: #fff; border-radius: 14px; padding: 1rem 1.2rem; font-weight: 700; transition: background-color .25s ease; }
.mhg-faq__help:hover { background: var(--mhg-blue-deep); }
.mhg-faq__help-ico { display: inline-flex; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; background: rgba(255,255,255,0.15); align-items: center; justify-content: center; }
.mhg-faq__help-ico svg { width: 1.25rem; height: 1.25rem; }
.mhg-faq__list { display: grid; gap: .8rem; }
.mhg-acc { border: 1px solid var(--mhg-line); border-radius: 12px; overflow: hidden; background: #fff; }
.mhg-acc[open] { border-color: var(--mhg-blue); }
.mhg-acc__q { display: flex; align-items: center; gap: .8rem; cursor: pointer; list-style: none; padding: 1rem 1.1rem; font-family: var(--mhg-font); font-weight: 700; color: var(--mhg-ink); background: var(--mhg-paper); }
.mhg-acc__q::-webkit-details-marker { display: none; }
.mhg-acc__q::marker { content: ""; }
.mhg-acc[open] .mhg-acc__q { background: var(--mhg-blue); color: #fff; }
.mhg-acc__n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; background: var(--mhg-blue); color: #fff; font-size: .85rem; font-weight: 800; }
.mhg-acc[open] .mhg-acc__n { background: #fff; color: var(--mhg-blue); }
.mhg-acc__icon { margin-left: auto; transition: transform .25s ease; }
.mhg-acc__icon svg { width: 1.2rem; height: 1.2rem; display: block; }
.mhg-acc[open] .mhg-acc__icon { transform: rotate(180deg); }
.mhg-acc__a { padding: 1rem 1.1rem; color: #55636e; }
.mhg-acc__a p { margin: 0; }
@media (max-width: 860px) {
  .mhg-faq__grid { grid-template-columns: 1fr; }
  .mhg-faq__head { flex-direction: column; align-items: flex-start; }
}

/* ---- Areas we serve ---------------------------------------------------- */
.mhg-areas { background: var(--mhg-blue-deep); color: #fff; padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.mhg-areas__head { text-align: center; max-width: 680px; margin: 0 auto clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.mhg-areas__title { font-family: var(--mhg-font); font-weight: 800; color: #fff; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.1; }
.mhg-areas__grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem 3rem; }
.mhg-areas__list { display: grid; gap: 1rem; }
.mhg-areas__list a { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-size: 1.2rem; font-weight: 600; transition: color .2s ease; }
.mhg-areas__list a:hover { color: var(--mhg-tint); }
.mhg-areas__list .mhg-mk { color: var(--mhg-tint); }
.mhg-areas .mhg-arrow-link { color: #fff; }
.mhg-areas .mhg-arrow { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.mhg-areas .mhg-arrow::before { background: #fff; }
.mhg-areas .mhg-arrow-link:hover .mhg-arrow, .mhg-areas .mhg-arrow:hover { color: var(--mhg-blue-deep); border-color: #fff; }
.mhg-areas .mhg-arrow__drop { background: var(--mhg-blue-deep); }