/* =====================================================================
   MURPHYS TECHNOLOGY - 2026 homepage redesign layer
   Loaded after style.css / main.css / custom.css so it wins the cascade.
   Colour tokens live below; change them once and every new section
   follows. Sections covered:
     1. Glass navbar restyle (video hero variant)
     2. Full screen video hero
     3. Domain search widget
     4. Partner marquee
     5. Growth services tiles
     6. Showcase split (video panel)
     7. The Murphys Difference comparison
     9. Shared helpers
   ===================================================================== */

:root {
  --mt-ink: #0a0d12;            /* deepest background */
  --mt-panel: #10141c;          /* raised panels */
  --mt-line: rgba(255, 255, 255, 0.1);
  --mt-text: #f4f7f2;
  --mt-text-dim: rgba(244, 247, 242, 0.68);
  --mt-accent: var(--accent, #4356ea);
  --mt-accent-2: var(--accent-hover, #7fd136);
  --mt-glow: rgba(67, 86, 234, 0.55);
  --mt-radius: 18px;
}

/* =====================================================================
   1. GLASS NAVBAR (hero variant)
   The existing pill nav keeps its classes so navbar.js still runs.
   We wrap the whole row in .mt-topbar and glass it.
   ===================================================================== */

.mt-topbar {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(1280px, calc(100% - 32px));
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 16px;
  border-radius: 16px;
}

/* Glass paint lives on a pseudo-element: backdrop-filter or transform on
   .mt-topbar itself would become the containing block for the nav pill's
   position:fixed states (mobile bottom pill, scrolled pill), pinning them
   inside the bar. A pseudo has no descendants, so fixed stays viewport-true. */
.mt-topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 16px;
  background: rgba(10, 13, 18, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.mt-topbar .nav {
  width: 100%;
  margin: 0;
}

.mt-topbar .nav-logo {
  width: 190px;
}

/* Glass treatment for the pill itself so the scrolled fixed state
   matches the hero state */
.mt-topbar .nav-tabs-custom,
.nav-menu.fixed .nav-tabs-custom {
  background: rgba(16, 20, 28, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

.mt-topbar .tab-custom,
.nav-menu.fixed .tab-custom {
  color: var(--mt-text);
}

.mt-topbar .tab-custom:not(.active):hover,
.nav-menu.fixed .tab-custom:not(.active):hover {
  background: rgba(255, 255, 255, 0.12);
}

.mt-topbar .mt-nav-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--mt-text);
  color: #0a0d12;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mt-topbar .mt-nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(255, 255, 255, 0.22);
}

@media screen and (max-width: 991px) {
  .mt-topbar {
    top: 12px;
    padding: 8px 12px;
  }
  .mt-topbar .nav-logo {
    width: 150px;
  }
  .mt-topbar .mt-nav-cta {
    padding: 9px 16px;
    font-size: 0.74rem;
  }
}

@media screen and (max-width: 767px) {
  .mt-topbar .mt-nav-cta {
    display: none; /* pill nav is fixed at the bottom on phones; keep the bar clean */
  }
}

/* =====================================================================
   2. FULL SCREEN VIDEO HERO
   ===================================================================== */

.mt-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--mt-ink);
  border-radius: 0 0 28px 28px;
  /* no overflow:hidden here on purpose — Safari clips position:fixed
     descendants (the bottom nav pill) inside an overflow:hidden box.
     The video carries the rounded corners itself instead. */
}

.mt-hero__video {
  position: absolute;
  inset: 0;
  border-radius: 0 0 28px 28px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.mt-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10, 13, 18, 0.62) 0%, rgba(10, 13, 18, 0.28) 38%, rgba(10, 13, 18, 0.72) 100%);
}

.mt-hero__content {
  position: relative;
  z-index: 2;
  width: min(980px, calc(100% - 40px));
  margin: 0 auto;
  padding: 140px 0 90px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mt-hero__eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mt-text);
  opacity: 0.85;
  margin: 0 0 22px;
  animation: mt-rise 0.9s ease both;
}

.mt-hero__title {
  margin: 0 0 22px;
  color: #ffffff;
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.02em;
  animation: mt-rise 0.9s 0.12s ease both;
}

.mt-hero__sub {
  margin: 0 0 34px;
  max-width: 620px;
  color: var(--mt-text);
  opacity: 0.88;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  animation: mt-rise 0.9s 0.24s ease both;
}

.mt-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  animation: mt-rise 0.9s 0.36s ease both;
}

.mt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.mt-btn--solid {
  background: #ffffff;
  color: #0a0d12;
}

.mt-btn--solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(255, 255, 255, 0.28);
}

.mt-btn--ghost {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.mt-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}

.mt-hero__foot {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 34px;
  padding-bottom: 34px;
  flex-wrap: wrap;
}

.mt-hero__foot-item {
  color: var(--mt-text);
  opacity: 0.75;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@keyframes mt-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media screen and (max-width: 767px) {
  .mt-hero__content {
    padding: 120px 0 70px;
  }
  .mt-hero__foot {
    gap: 16px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* =====================================================================
   3. DOMAIN SEARCH WIDGET
   Animated gradient frame, glowing focus states, TLD price chips.
   Hook the live availability API inside murphys.js (MT_DOMAIN_API_KEY).
   ===================================================================== */

















.mt-tld {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--mt-line);
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.mt-tld:hover {
  border-color: rgba(67, 86, 234, 0.7);
  box-shadow: 0 0 22px rgba(67, 86, 234, 0.35);
  transform: translateY(-2px);
}

.mt-tld__ext {
  color: var(--mt-text);
  font-weight: 800;
  font-size: 0.95rem;
}

.mt-tld__price {
  color: var(--mt-accent-2);
  font-weight: 700;
  font-size: 0.85rem;
}

.mt-tld__was {
  color: rgba(244, 247, 242, 0.38);
  font-size: 0.78rem;
  text-decoration: line-through;
}

@keyframes mt-border-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}



/* =====================================================================
   4. PARTNER MARQUEE
   Two mirrored tracks, edge fades, tilted chips, pause on hover.
   ===================================================================== */

.mt-partners {
  margin: 96px auto 0;
  overflow: hidden;
}

.mt-partners__label {
  text-align: center;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mt-text-dim);
  margin: 0 0 26px;
}

.mt-marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  padding: 14px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.mt-marquee__track {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-right: 22px;
  flex-shrink: 0;
  will-change: transform;
}

.mt-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 74px;
  padding: 0 34px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mt-chip:nth-child(odd)  { transform: rotate(-1.4deg); }
.mt-chip:nth-child(even) { transform: rotate(1.4deg); }

.mt-chip:hover {
  transform: rotate(0deg) translateY(-4px) scale(1.03);
  box-shadow: 0 16px 40px rgba(67, 86, 234, 0.35);
}

.mt-chip img {
  height: 34px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
}


@media screen and (max-width: 767px) {
  .mt-partners { margin-top: 72px; }
  .mt-chip { height: 60px; padding: 0 24px; }
  .mt-chip img { height: 26px; }
}

/* =====================================================================
   5. GROWTH SERVICES TILES
   Big condensed statement + full width tile row, hover fill.
   ===================================================================== */

.mt-services__head {
  text-align: center;
  width: min(860px, calc(100% - 40px));
  margin: 0 auto 54px;
}

.mt-services__title {
  margin: 0 0 16px;
  font-size: clamp(2.2rem, 6vw, 4.4rem);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--mt-text);
}

.mt-services__title .is-accent {
  color: var(--mt-accent);
  -webkit-text-stroke: 0;
}

.mt-services__sub {
  margin: 0 auto;
  max-width: 560px;
  color: var(--mt-text-dim);
  font-size: 1.02rem;
  line-height: 1.6;
}

.mt-services__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--mt-line);
  border-left: 1px solid var(--mt-line);
}

.mt-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  padding: 26px 24px;
  border-right: 1px solid var(--mt-line);
  border-bottom: 1px solid var(--mt-line);
  background: transparent;
  text-decoration: none;
  overflow: hidden;
  transition: background 0.35s ease;
}

.mt-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--mt-accent);
  transform: translateY(101%);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.mt-tile:hover::before {
  transform: translateY(0);
}

.mt-tile__index-line {
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  height: 2px;
  background: var(--mt-line);
  overflow: hidden;
}

.mt-tile__index-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--mt-accent-2);
  transform: translateX(-101%);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.mt-tile:hover .mt-tile__index-line::after {
  transform: translateX(0);
}

.mt-tile__name,
.mt-tile__desc,
.mt-tile__cta {
  position: relative;
  z-index: 1;
}

.mt-tile__name {
  margin: 0 0 10px;
  color: var(--mt-text);
  font-size: 1.35rem;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: color 0.35s ease;
}

.mt-tile__desc {
  margin: 0 0 18px;
  color: var(--mt-text-dim);
  font-size: 0.87rem;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease, color 0.35s ease;
}

.mt-tile__cta {
  display: inline-flex;
  align-self: flex-start;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: var(--mt-text);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s 0.05s ease, transform 0.35s 0.05s ease, background 0.25s ease, color 0.25s ease;
}

.mt-tile:hover .mt-tile__desc,
.mt-tile:hover .mt-tile__cta {
  opacity: 1;
  transform: translateY(0);
}

.mt-tile:hover .mt-tile__desc {
  color: rgba(255, 255, 255, 0.9);
}

.mt-tile:hover .mt-tile__cta {
  border-color: #ffffff;
}

.mt-tile__cta:hover {
  background: #ffffff;
  color: var(--mt-accent);
}

@media (hover: none) {
  /* Touch devices: everything visible, no hover dependence */
  .mt-tile__desc,
  .mt-tile__cta {
    opacity: 1;
    transform: none;
  }
}

@media screen and (max-width: 991px) {
  .mt-services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mt-tile { min-height: 240px; }
  .mt-tile:last-child { grid-column: 1 / -1; }
}

@media screen and (max-width: 479px) {
  .mt-services__grid {
    grid-template-columns: 1fr;
  }
  .mt-tile { min-height: 0; padding: 56px 20px 24px; }
}

/* =====================================================================
   6. SHOWCASE SPLIT (replaces the old growth graph)
   Gradient panel, copy left, looping portrait video right in a
   device style frame.
   ===================================================================== */




@keyframes mt-sheen {
  to { transform: rotate(360deg); }
}
















/* =====================================================================
   7. THE MURPHYS DIFFERENCE
   Column comparison: our highlighted column against three muted ones.
   Horizontal scroll with snap on small screens.
   ===================================================================== */










.mt-mark {
  display: inline-flex;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.mt-mark--yes {
  background: rgba(127, 209, 54, 0.16);
  color: var(--mt-accent-2);
}

.mt-mark--yes.is-us {
  background: var(--mt-accent-2);
  color: #10240a;
  box-shadow: 0 0 18px rgba(127, 209, 54, 0.5);
}

.mt-mark--no {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(244, 247, 242, 0.4);
}



















/* =====================================================================
   9. SHARED / MOTION SAFETY
   ===================================================================== */

.mt-section-gap {
  margin-top: 160px;
}

@media screen and (max-width: 767px) {
  .mt-section-gap { margin-top: 96px; }
}




/* ============ Difference table logo ============ */


/* ============ Footer (Let's talk) ============ */
.mt-footer {
  position: relative;
  overflow: hidden;
  margin-top: 160px;
  background: #0a0a0a;
}
.mt-footer__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.mt-footer__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(5,8,14,0.55) 0%, rgba(5,8,14,0.25) 45%, rgba(5,8,14,0.72) 100%);
}
.mt-footer__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: 64px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 32px 72px;
}
.mt-footer__title {
  color: #fff;
  font-size: clamp(52px, 7vw, 96px);
  line-height: 0.95;
  margin: 0 0 36px;
}
.mt-footer__card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 20px 22px;
  max-width: 330px;
  margin-bottom: 40px;
}
.mt-footer__card-title { color: #fff; font-weight: 600; margin: 0 0 8px; font-size: 15px; }
.mt-footer__card-link {
  color: #8fc4ff;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 8px;
}
.mt-footer__card-link:hover { color: #fff; }
.mt-footer__card-note { color: rgba(255,255,255,0.72); font-size: 13px; margin: 0; line-height: 1.5; }
.mt-footer__socials { display: flex; gap: 22px; margin-bottom: 48px; }
.mt-footer__socials a {
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  border-bottom: 1px solid transparent;
}
.mt-footer__socials a:hover { opacity: 1; border-bottom-color: #fff; }
.mt-footer__addresses { display: flex; flex-wrap: wrap; gap: 48px; }
.mt-footer__addr-label { color: #fff; font-weight: 600; font-size: 14px; margin: 0 0 8px; }
.mt-footer__addr-text { color: rgba(255,255,255,0.78); font-size: 14px; line-height: 1.6; margin: 0; }
.mt-footer__form-card {
  background: #ffffff;
  border-radius: 6px;
  padding: 36px 34px 30px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.mt-footer__form { display: flex; flex-direction: column; }
.mt-footer__label { color: #0a0a0a; font-size: 13.5px; font-weight: 600; margin: 0 0 8px; }
.mt-footer__field {
  width: 100%;
  background: #f1f1f2;
  border: 1px solid #f1f1f2;
  border-radius: 4px;
  padding: 12px 14px;
  font-size: 14px;
  color: #0a0a0a;
  margin-bottom: 22px;
  outline: none;
  transition: border-color 0.2s ease;
  font-family: inherit;
}
.mt-footer__field:focus { border-color: #017bff; background: #fff; }
.mt-footer__field--area { min-height: 96px; resize: vertical; }
.mt-footer__reply { color: #444; font-size: 13px; line-height: 1.5; margin: -6px 0 18px; }
.mt-footer__submit {
  background: #017bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 15px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.mt-footer__submit:hover { background: #0064d6; transform: translateY(-1px); }
.mt-footer__alt { color: #444; font-size: 13px; margin: 16px 0 0; }
.mt-footer__alt a { color: #017bff; text-decoration: none; }
.mt-footer__legal {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 32px 26px;
  border-top: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.62);
  font-size: 12.5px;
}
.mt-footer__legal a { color: rgba(255,255,255,0.62); text-decoration: none; margin-right: 16px; }
.mt-footer__legal a:hover { color: #fff; }
.mt-footer__legal-right span { color: rgba(255,255,255,0.4); }
@media (max-width: 991px) {
  .mt-footer__inner { grid-template-columns: 1fr; gap: 48px; padding: 72px 24px 56px; }
  .mt-footer__form-card { max-width: 560px; }
}
@media (max-width: 767px) {
  .mt-footer { margin-top: 110px; }
  .mt-footer__form-card { padding: 26px 22px 24px; }
  .mt-footer__card { max-width: 100%; }
  .mt-footer__addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .mt-footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .mt-footer__legal-left { line-height: 1.7; }
  .mt-footer__legal-left .mt-abn { white-space: nowrap; }
  .mt-footer__legal-right {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
  }
  .mt-footer__legal-right a { margin-right: 0; white-space: nowrap; }
  .mt-footer__legal-right span { flex-basis: 100%; line-height: 1.6; }
}




/* =====================================================================
   DOMAIN SEARCH (registrar-style panel)
   ===================================================================== */
.mt-domain {
  position: relative;
  margin: 120px auto 0;
  padding: 0 16px;
  max-width: 1312px;
}
.mt-domain__content { position: relative; z-index: 2; max-width: 640px; }
.mt-domain__title {
  color: #fff;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.04;
  margin: 0 0 20px;
}
.mt-domain__sub {
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  line-height: 1.55;
  max-width: 560px;
  margin: 0 0 30px;
}
.mt-domain__form {
  display: flex;
  width: 100%;
  max-width: 620px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 34px rgba(46, 210, 255, 0.4), 0 14px 40px rgba(3, 18, 52, 0.45);
  animation: mt-domain-glow 3.2s ease-in-out infinite alternate;
}
@keyframes mt-domain-glow {
  from { box-shadow: 0 0 0 1px rgba(255,255,255,0.25), 0 0 22px rgba(46,210,255,0.30), 0 14px 40px rgba(3,18,52,0.45); }
  to   { box-shadow: 0 0 0 1px rgba(255,255,255,0.35), 0 0 46px rgba(46,210,255,0.55), 0 14px 40px rgba(3,18,52,0.45); }
}
.mt-domain__input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: #fff;
  color: #10131a;
  font-size: 15px;
  padding: 18px 20px;
  font-family: inherit;
}
.mt-domain__input::placeholder { color: #8a8f9a; }
.mt-domain__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: none;
  cursor: pointer;
  padding: 0 30px;
  background: linear-gradient(100deg, #00c2ff, #017bff 55%, #2f4bff);
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-family: inherit;
  transition: filter 0.2s ease, transform 0.15s ease;
}
.mt-domain__btn:hover { filter: brightness(1.12); }
.mt-domain__btn:active { transform: scale(0.98); }
.mt-domain__result {
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 14px;
  min-height: 0;
}
.mt-domain__result a { color: #9fe0ff; }
.mt-domain__result:empty { display: none; }
.mt-domain__tlds {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  margin-top: 30px;
}
.mt-domain__tld {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.mt-domain__tld-prices { display: inline-flex; flex-direction: column; line-height: 1.25; }
.mt-domain__tld-prices b { color: #fff; font-size: 13.5px; font-weight: 800; }
.mt-domain__tld-prices s { color: rgba(255, 255, 255, 0.62); font-size: 11.5px; }
@media screen and (max-width: 991px) {
  .mt-domain { margin-top: 96px; }
  .mt-domain__content { max-width: 100%; }
}
@media screen and (max-width: 599px) {
  .mt-domain { margin-top: 72px; padding: 0 10px; }
  .mt-domain__form { flex-direction: column; border-radius: 10px; }
  .mt-domain__input { padding: 16px 16px; }
  .mt-domain__btn { justify-content: center; padding: 15px 20px; }
  .mt-domain__tlds { gap: 12px 22px; }
}

/* =====================================================================
   RESPONSIVE HARDENING (hero / marquee / showcase / diff)
   ===================================================================== */
@media screen and (max-width: 599px) {
  .mt-hero__title { font-size: clamp(30px, 9vw, 42px); }
}
.mt-marquee__track { will-change: transform; }


/* =====================================================================
   NAV PILL: centered on mobile (overrides the per-width left hacks)
   ===================================================================== */
@media screen and (max-width: 767px) {
  .nav-menu,
  .nav-menu.other {
    left: 50% !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%);
  }
}

/* =====================================================================
   DOMAIN WIDGET: tighter height + framed screenshot visual
   ===================================================================== */



/* =====================================================================
   SHOWCASE: "Pictured it? We will build it." (image panel)
   ===================================================================== */
.mt-showcase {
  margin: 140px auto 0;
  padding: 0 16px;
  max-width: 1312px;
}
.mt-showcase__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 48px;
  border-radius: 24px;
  padding: 72px 56px;
  background:
    radial-gradient(700px 460px at 90% 0%, rgba(109, 92, 255, 0.5), transparent 60%),
    linear-gradient(118deg, #3c2ee0 0%, #5a3cf5 45%, #7a4dff 100%);
  box-shadow: 0 30px 90px rgba(24, 12, 80, 0.5);
  overflow: hidden;
}
.mt-showcase__title {
  color: #fff;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.05;
  margin: 0 0 20px;
}
.mt-showcase__sub {
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  line-height: 1.6;
  max-width: 460px;
  margin: 0 0 30px;
}
.mt-showcase__cta {
  display: inline-block;
  background: #fff;
  color: #1c1240;
  font-weight: 700;
  font-size: 15px;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mt-showcase__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
}
.mt-showcase__media img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 60px rgba(10, 4, 46, 0.45));
}
@media screen and (max-width: 991px) {
  .mt-showcase { margin-top: 110px; }
  .mt-showcase__inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 48px 28px;
  }
}
@media screen and (max-width: 599px) {
  .mt-showcase { margin-top: 84px; padding: 0 10px; }
  .mt-showcase__inner { padding: 36px 18px; border-radius: 18px; }
}

/* =====================================================================
   GLOBAL RESPONSIVE HARDENING
   ===================================================================== */
@media screen and (max-width: 767px) {
  /* keep content clear of the bottom-fixed nav pill */
  .mt-hero { padding-bottom: 84px; }
}


/* =====================================================================
   UNIFIED HEADER ON INNER PAGES
   ===================================================================== */
.mt-topbar .nav-menu.other {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.mt-nav-strip {
  padding-top: 150px !important;
}
@media screen and (max-width: 767px) {
  .mt-nav-strip { padding-top: 104px !important; }
}

/* =====================================================================
   HERO TYPOGRAPHY ON PHONES
   ===================================================================== */
@media screen and (max-width: 599px) {
  .mt-hero__content { text-align: center; padding-left: 18px; padding-right: 18px; }
  .mt-hero__eyebrow { font-size: 0.7rem; letter-spacing: 0.22em; }
  .mt-hero__title { font-size: clamp(28px, 8.4vw, 38px); line-height: 1.08; }
  .mt-hero__sub { font-size: 14.5px; line-height: 1.6; max-width: 34ch; margin-left: auto; margin-right: auto; }
  .mt-hero__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; gap: 12px; }
  .mt-hero__actions .mt-btn { width: 100%; text-align: center; }
  .mt-hero__foot { flex-wrap: wrap; justify-content: center; gap: 10px 18px; text-align: center; padding-left: 16px; padding-right: 16px; }
  .mt-hero__foot-item { font-size: 12px; }
}

/* =====================================================================
   FOOTER: badges + ABN emphasis
   ===================================================================== */
.mt-footer__badges {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
}
.mt-footer__badges img {
  height: 30px;
  width: auto;
  display: block;
  opacity: 0.92;
}
.mt-abn {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
@media screen and (max-width: 599px) {
  .mt-footer__badges { gap: 14px; margin-top: 26px; }
  .mt-footer__badges img { height: 24px; }
}


/* ============ Domain panel: single column, phone baked into background ============ */
.mt-domain__inner {
  position: relative;
  display: block;
  border-radius: 24px;
  padding: 56px 44% 52px 56px;
  min-height: 430px;
  overflow: hidden;
  background:
    url("images/domain-phone.png") no-repeat right -60px bottom -2px / 500px auto,
    radial-gradient(900px 520px at 88% 8%, rgba(46, 210, 255, 0.34), transparent 55%),
    radial-gradient(760px 560px at 6% 96%, rgba(1, 60, 172, 0.55), transparent 60%),
    linear-gradient(112deg, #062a63 0%, #0a54c8 34%, #2f6bff 58%, #6d5cff 100%);
  box-shadow: 0 30px 90px rgba(4, 24, 68, 0.55), 0 0 70px rgba(47, 107, 255, 0.28);
}
@media screen and (max-width: 1180px) {
  .mt-domain__inner { padding-right: 40%; background-size: 440px auto, auto, auto, auto; }
}
@media screen and (max-width: 991px) {
  .mt-domain__inner {
    padding: 48px 24px 40px;
    min-height: 0;
    background:
      radial-gradient(900px 520px at 88% 8%, rgba(46, 210, 255, 0.34), transparent 55%),
      radial-gradient(760px 560px at 6% 96%, rgba(1, 60, 172, 0.55), transparent 60%),
      linear-gradient(112deg, #062a63 0%, #0a54c8 34%, #2f6bff 58%, #6d5cff 100%);
  }
}
@media screen and (max-width: 599px) {
  .mt-domain__inner { padding: 36px 18px 32px; border-radius: 18px; }
}


/* =====================================================================
   DOMAIN TLD PRICES: single-line rows on phones (desktop unchanged)
   ===================================================================== */
@media screen and (max-width: 767px) {
  .mt-domain__tlds {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    margin-top: 26px;
  }
  .mt-domain__tld {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(4, 22, 62, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  .mt-domain__tld-prices {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
  }
  .mt-domain__tld-prices b { font-size: 13px; }
  .mt-domain__tld-prices s { font-size: 11px; }
}


/* =====================================================================
   WE DELIVER video block (Wistia) — matches the reference layout,
   with breathing room before the cards below it
   ===================================================================== */
.murphys__video {
  position: relative;
  margin-bottom: 40px;
  border-radius: 18px;
  overflow: hidden;
}
.murphys__video wistia-player {
  display: block;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
}
@media screen and (max-width: 991px) {
  .murphys__video { margin-bottom: 32px; }
}
@media screen and (max-width: 599px) {
  .murphys__video { margin-bottom: 24px; border-radius: 14px; }
  .murphys__video wistia-player { border-radius: 14px; }
}


/* =====================================================================
   SHORT LAPTOP SCREENS: keep the hero comfortably on one screen
   (13in and 14in laptops are ~700-800px tall once chrome is deducted)
   ===================================================================== */
@media screen and (min-width: 768px) and (max-height: 860px) {
  .mt-hero__content { padding: 118px 0 56px; }
  .mt-hero__title { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-bottom: 16px; }
  .mt-hero__sub { font-size: 15.5px; }
  .mt-hero__foot { gap: 26px; padding-bottom: 24px; }
}
@media screen and (min-width: 768px) and (max-height: 700px) {
  .mt-hero__content { padding: 104px 0 44px; }
  .mt-hero__title { font-size: clamp(2rem, 4vw, 3rem); }
}


/* =====================================================================
   TLD LOGOS in the domain panel (no chip box, registrar style)
   ===================================================================== */
.mt-domain__tlds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 30px;
  margin-top: 30px;
}
.mt-domain__tld {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: none;
  border: 0;
}
.mt-domain__tld-logo {
  flex: 0 0 auto;
  height: 22px;
  width: auto;
  display: block;
}
.mt-domain__tld-logo--sm { height: 19px; }
.mt-domain__tld-prices {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.2;
}
@media screen and (max-width: 767px) {
  .mt-domain__tlds {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    margin-top: 26px;
  }
  .mt-domain__tld {
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
    padding: 0;
    background: none;
    border: 0;
  }
  /* reserve one slot width so the three prices line up under each other */
  .mt-domain__tld-logo {
    height: 20px;
    width: 92px;
    object-fit: contain;
    object-position: left center;
  }
  .mt-domain__tld-logo--sm { height: 17px; }
  .mt-domain__tld-prices {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
  }
  .mt-domain__tld-prices b { font-size: 13px; }
  .mt-domain__tld-prices s { font-size: 11px; }
}
@media screen and (max-width: 400px) {
  .mt-domain__tld-logo { height: 18px; width: 82px; }
  .mt-domain__tld-logo--sm { height: 15px; }
}


/* =====================================================================
   MOBILE FIT: stop Webflow grids and long words from forcing the page
   wider than the phone screen (measured fix, see notes)
   - grid items default to min-width:auto, so a wide child blows the
     track past its container; min-width:0 lets them shrink properly
   - a single long word in a heading does the same thing, so allow
     breaking as a last resort on small screens
   ===================================================================== */
@media screen and (max-width: 991px) {
  .w-layout-grid > * { min-width: 0; }
  .w-layout-grid { max-width: 100%; }
}
@media screen and (max-width: 767px) {
  .w-layout-grid { grid-template-columns: minmax(0, 1fr); }
  .banner-big,
  .banner-small,
  .image-card-big,
  .image-card-large { min-width: 0; max-width: 100%; }
  /* break-word alone does not shrink an element's intrinsic width, so
     headings use anywhere: a single long word can still blow out a
     flex or grid track otherwise */
  h1, h2, h3 { overflow-wrap: anywhere; }
  h4, h5, p, li, a, span { overflow-wrap: break-word; }
}


/* =====================================================================
   MOBILE NAV PILL: detached to <body> by murphys.js so nothing can
   clip it; these rules keep the glass styling and centre it exactly
   ===================================================================== */
@media screen and (max-width: 767px) {
  .nav-menu,
  .nav-menu.other,
  .nav-menu.mt-nav-detached {
    position: fixed;
    bottom: max(18px, env(safe-area-inset-bottom, 0px));
    top: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    margin: 0 !important;
    width: max-content;
    max-width: calc(100vw - 24px);
    z-index: 60;
  }
  .nav-menu.mt-nav-detached .nav-tabs-custom {
    background: rgba(12, 15, 22, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.42);
  }
  .nav-menu.mt-nav-detached .tab-custom { color: rgba(255, 255, 255, 0.86); }
  .nav-menu.mt-nav-detached .tab-custom.active { color: #fff; }
  /* the logo is the only thing left in the bar on phones */
  .mt-topbar { justify-content: center; }
}


/* =====================================================================
   FOOTER LAYOUT v2: title above, form beside on desktop; on phones the
   order becomes title, form, contact details (matching the reference)
   and every block is tightened so the footer stops eating two screens
   ===================================================================== */
.mt-footer__inner {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
  grid-template-rows: auto 1fr;
  align-items: start;
  column-gap: 56px;
  row-gap: 24px;
}
.mt-footer__title { grid-column: 1; grid-row: 1; margin-bottom: 8px; }
.mt-footer__left { grid-column: 1; grid-row: 2; }
.mt-footer__form-card { grid-column: 2; grid-row: 1 / span 2; }

@media screen and (max-width: 991px) {
  .mt-footer__inner {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 48px 24px 36px;
  }
  .mt-footer__title { order: 1; font-size: clamp(38px, 11vw, 56px); margin-bottom: 0; }
  .mt-footer__form-card { order: 2; max-width: none; padding: 24px 20px 22px; }
  .mt-footer__left { order: 3; }
}
@media screen and (max-width: 767px) {
  .mt-footer { margin-top: 88px; }
  .mt-footer__inner { padding: 40px 20px 30px; gap: 22px; }
  .mt-footer__title { font-size: clamp(34px, 10vw, 46px); }

  /* form: tighter fields so the card is not 570px tall */
  .mt-footer__form-card { padding: 22px 18px 20px; border-radius: 14px; }
  .mt-footer__label { font-size: 12px; margin-bottom: 5px; }
  .mt-footer__field { padding: 9px 11px; margin-bottom: 11px; font-size: 14px; }
  .mt-footer__field--area { min-height: 66px; }
  .mt-field-row { gap: 0 10px; }
  .mt-footer__reply { font-size: 12.5px; margin: -4px 0 14px; }
  .mt-footer__submit { padding: 13px 16px; }
  .mt-footer__alt { font-size: 12.5px; margin-top: 12px; }

  /* contact block */
  .mt-footer__card { padding: 16px 18px; margin-bottom: 22px; max-width: 100%; }
  .mt-footer__card-title { font-size: 14px; margin-bottom: 6px; }
  .mt-footer__card-link { font-size: 17px; margin-bottom: 6px; }
  .mt-footer__card-note { font-size: 12.5px; }
  .mt-footer__socials { margin-bottom: 18px; gap: 18px; }
  .mt-footer__addresses { gap: 18px; }
  .mt-footer__addr-label { font-size: 13px; margin-bottom: 5px; }
  .mt-footer__addr-text { font-size: 13px; line-height: 1.5; }
  .mt-footer__badges { margin-top: 20px; gap: 12px; }
  .mt-footer__badges img { height: 22px; }

  /* legal strip */
  .mt-footer__legal { padding: 14px 20px 76px; gap: 8px; font-size: 12px; }
  .mt-footer__legal-left { line-height: 1.55; }
  .mt-footer__legal-right { gap: 8px 16px; }
}


/* =====================================================================
   ENQUIRY CONFIRMATION MODAL + honeypot field
   ===================================================================== */
.mt-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
}
.mt-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.mt-modal.is-open { display: flex; }
.mt-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 18, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: mt-fade 0.25s ease both;
}
.mt-modal__panel {
  position: relative;
  z-index: 1;
  width: min(430px, 100%);
  background: #ffffff;
  border-radius: 20px;
  padding: 38px 32px 30px;
  text-align: center;
  box-shadow: 0 30px 90px rgba(2, 10, 30, 0.5);
  animation: mt-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
@keyframes mt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mt-pop { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
.mt-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: #9aa0ae;
  cursor: pointer;
}
.mt-modal__close:hover { color: #14161c; }
.mt-modal__tick { width: 76px; height: 76px; margin: 0 auto 18px; }
.mt-modal__tick svg { width: 100%; height: 100%; }
.mt-modal__tick-ring {
  fill: none;
  stroke: #017bff;
  stroke-width: 2.5;
  stroke-dasharray: 152;
  stroke-dashoffset: 152;
  animation: mt-ring 0.6s ease forwards;
}
.mt-modal__tick-mark {
  fill: none;
  stroke: #017bff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: mt-mark 0.4s 0.45s ease forwards;
}
@keyframes mt-ring { to { stroke-dashoffset: 0; } }
@keyframes mt-mark { to { stroke-dashoffset: 0; } }
.mt-modal.is-error .mt-modal__tick-ring,
.mt-modal.is-error .mt-modal__tick-mark { stroke: #d94b3b; }
.mt-modal__title { margin: 0 0 10px; font-size: 22px; color: #14161c; }
.mt-modal__text { margin: 0 0 18px; color: #5c6272; font-size: 15px; line-height: 1.6; }
.mt-modal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: center;
  padding: 14px 0 18px;
  border-top: 1px solid #eceff4;
}
.mt-modal__meta a { color: #017bff; text-decoration: none; font-size: 13.5px; font-weight: 600; }
.mt-modal__ok {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: #017bff;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  padding: 14px 20px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s ease;
}
.mt-modal__ok:hover { background: #0064d6; }
@media screen and (max-width: 599px) {
  .mt-modal__panel { padding: 30px 22px 24px; border-radius: 16px; }
  .mt-modal__tick { width: 64px; height: 64px; }
  .mt-modal__title { font-size: 19px; }
  .mt-modal__text { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .mt-modal__panel, .mt-modal__backdrop { animation: none; }
  .mt-modal__tick-ring, .mt-modal__tick-mark { animation: none; stroke-dashoffset: 0; }
}


/* =====================================================================
   NAV TABS ON TOUCH: tapping used to leave the light hover background
   stuck under white text, making the label unreadable. Hover styles are
   now reserved for real pointers; taps get a translucent press state.
   ===================================================================== */
.nav-menu.mt-nav-detached .tab-custom:not(.active):hover,
.mt-topbar .tab-custom:not(.active):hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}
@media (hover: none), (pointer: coarse) {
  .tab-custom:not(.active):hover,
  .nav-menu .tab-custom:not(.active):hover,
  .nav-menu.mt-nav-detached .tab-custom:not(.active):hover,
  .mt-topbar .tab-custom:not(.active):hover {
    background: transparent;
    color: rgba(255, 255, 255, 0.86);
  }
  .nav-menu .tab-custom:not(.active):active,
  .nav-menu.mt-nav-detached .tab-custom:not(.active):active {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
  }
  /* the services tab keeps the same treatment while its sheet is open */
  .nav-menu .tab-custom.expertise.is-open,
  .nav-menu.mt-nav-detached .tab-custom.expertise.is-open {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
  }
  /* whatever the state, never let a pale chip sit under pale text */
  .nav-menu .tab-custom:not(.active) { -webkit-tap-highlight-color: transparent; }
}


/* =====================================================================
   CLIENT REVIEWS: white cards on a single scrolling rail, with the
   source line sitting under each card (reference layout)
   ===================================================================== */
.mt-reviews {
  margin: 150px 0 0;
  padding: 0 0 10px;
  overflow: hidden;
}
.mt-reviews__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto 42px;
  padding: 0 24px;
}
.mt-reviews__title {
  color: #fff;
  font-size: clamp(30px, 4.3vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 640px;
}
.mt-reviews__score {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding-bottom: 6px;
}
.mt-reviews__score img { height: 30px; width: auto; display: block; }
.mt-reviews__score span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  padding-bottom: 2px;
}
.mt-reviews__score:hover span { color: #fff; border-bottom-color: #fff; }

.mt-reviews__rail { position: relative; display: flex; overflow: hidden; }
.mt-reviews__track { display: flex; flex: 0 0 auto; gap: 20px; padding-left: 20px; will-change: transform; }

.mt-rev { flex: 0 0 auto; width: 344px; display: flex; flex-direction: column; }
.mt-rev__card {
  background: #ffffff;
  border-radius: 10px;
  padding: 20px 22px 18px;
  min-height: 196px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mt-rev__top { display: flex; align-items: center; gap: 11px; }
.mt-rev__avatar {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #017bff, #2f4bff);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  flex: 0 0 auto;
}
.mt-rev__name { color: #14161c; font-weight: 700; font-size: 15px; }
.mt-rev__quote {
  margin: 0;
  color: #3a3f4b;
  font-size: 14.5px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mt-rev__tags { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.mt-rev__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f3f7;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 600;
  color: #4b5162;
}
.mt-rev__tag svg { display: block; }
.mt-rev__tag--stars { padding: 5px 10px; }
.mt-rev__below { display: flex; align-items: center; gap: 11px; padding: 16px 4px 0; }
.mt-rev__mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.mt-rev__org { display: flex; flex-direction: column; line-height: 1.3; }
.mt-rev__org small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.mt-rev__org b { color: #ffffff; font-size: 14px; font-weight: 700; }

@media screen and (max-width: 991px) {
  .mt-reviews { margin-top: 112px; }
  .mt-reviews__head { align-items: flex-start; gap: 18px; margin-bottom: 32px; }
}
@media screen and (max-width: 767px) {
  .mt-reviews { margin-top: 88px; }
  .mt-reviews__head { padding: 0 18px; margin-bottom: 26px; }
  .mt-reviews__score img { height: 26px; }
  .mt-reviews__score span { font-size: 11.5px; }
  .mt-reviews__track { gap: 14px; padding-left: 16px; }
  .mt-rev { width: 272px; }
  .mt-rev__card { padding: 16px 16px 14px; min-height: 184px; border-radius: 9px; }
  .mt-rev__quote { font-size: 13.5px; -webkit-line-clamp: 5; }
  .mt-rev__name { font-size: 14px; }
  .mt-rev__below { padding-top: 12px; }
  .mt-rev__org b { font-size: 13px; }
}


/* =====================================================================
   FORM FIELD PAIRS: two short fields side by side, stacking only when
   the column is genuinely too narrow
   ===================================================================== */
.mt-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}
.mt-field { min-width: 0; display: flex; flex-direction: column; }
.mt-field .mt-footer__field,
.mt-field .form-input { width: 100%; }
.mt-footer__form select.mt-footer__field,
.form-block-form select.form-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7180' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 34px;
}
.mt-textarea {
  min-height: 110px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.55;
  padding-top: 12px;
}
.form-block-form .mt-field-row { margin-bottom: 0; }
@media screen and (max-width: 339px) {
  .mt-field-row { grid-template-columns: 1fr; gap: 0; }
}


/* =====================================================================
   CONTACT PAGE FIELDS: the shared .form-input rule is 62px tall with
   24px of vertical padding, which left a 14px content box — single line
   text (and every select) was being clipped. Selects also inherited the
   form's white text, so the native option list rendered white on white.
   ===================================================================== */
.form-block-form select.form-input {
  height: 56px;
  padding: 0 38px 0 18px;
  color: #ffffff;
  cursor: pointer;
}
.form-block-form select.form-input option,
.form-block-form select.form-input optgroup,
.mt-footer__form select.mt-footer__field option {
  color: #14161c;
  background-color: #ffffff;
}
.form-block-form input.form-input {
  height: 56px;
  padding: 0 18px;
}
.form-block-form textarea.form-input,
.form-block-form .mt-textarea {
  height: auto;
  min-height: 120px;
  padding: 14px 18px;
  line-height: 1.55;
}
.form-block-form .mt-field-row { column-gap: 16px; }
.form-block-form .mt-field .form-input { margin-bottom: 22px; }
@media screen and (max-width: 767px) {
  .form-block-form select.form-input,
  .form-block-form input.form-input { height: 52px; padding-left: 15px; }
  .form-block-form select.form-input { padding-right: 34px; }
  .form-block-form textarea.form-input,
  .form-block-form .mt-textarea { min-height: 104px; padding: 12px 15px; }
  .form-block-form .form-input { margin-bottom: 18px; }
  .form-block-form .mt-field .form-input { margin-bottom: 18px; }
}

/* =====================================================================
   LEGAL PAGES (Terms and Conditions, Privacy Policy, Refund Policy)
   Small text uses --mt-accent-soft: the brand blue only reaches 3.79:1
   on black, which is under the 4.5:1 readability threshold.
   Editorial layout: masthead, sticky clause index, numbered clauses.
   Shares the site shell, so only the page body is styled here.
   ===================================================================== */

:root {
  --mt-accent-soft: #8b98ff;
}

.mt-read-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  z-index: 120;
  background: linear-gradient(90deg, var(--mt-accent), var(--mt-accent-2));
  transition: width 0.08s linear;
  pointer-events: none;
}

/* ---------- masthead ---------- */

.mt-legal-hero {
  padding: 8px 0 0;
  max-width: 980px;
}

.mt-legal-hero__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 247, 242, 0.5);
}
.mt-legal-hero__kicker::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--mt-accent);
  flex: none;
}

.mt-legal-hero__title {
  margin: 0 0 26px;
  font-family: "Futura Pt Cond", sans-serif;
  font-weight: 800;
  font-size: clamp(42px, 7.2vw, 88px);
  line-height: 0.94;
  letter-spacing: -0.015em;
  color: #ffffff;
  overflow-wrap: anywhere;
}
.mt-legal-hero__title .is-accent { color: var(--mt-accent); }

.mt-legal-hero__lead {
  margin: 0 0 44px;
  max-width: 700px;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(244, 247, 242, 0.7);
}

.mt-legal-hero__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}
.mt-legal-hero__cell {
  padding: 20px 24px 20px 0;
  border-left: 1px solid rgba(255, 255, 255, 0.13);
  padding-left: 24px;
}
.mt-legal-hero__cell:first-child {
  border-left: 0;
  padding-left: 0;
}
.mt-legal-hero__cell span {
  display: block;
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 247, 242, 0.58);
}
.mt-legal-hero__cell strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.45;
}

/* ---------- body ---------- */

.mt-legal {
  padding: 76px 0 96px;
}

.mt-legal__grid {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}

.mt-legal__index-sticky {
  position: sticky;
  top: 132px;
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  scrollbar-width: none;
}
.mt-legal__index-sticky::-webkit-scrollbar { width: 0; height: 0; }

.mt-legal__index-title {
  margin: 0 0 16px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 247, 242, 0.58);
}

.mt-legal__index-list {
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.mt-legal__index-list a {
  display: flex;
  gap: 10px;
  padding: 8px 0 8px 16px;
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(244, 247, 242, 0.55);
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.mt-legal__index-list a span {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding-top: 2px;
  color: rgba(244, 247, 242, 0.3);
  transition: color 0.18s ease;
}
@media (hover: hover) {
  .mt-legal__index-list a:hover { color: #ffffff; }
  .mt-legal__index-list a:hover span { color: var(--mt-accent-soft); }
}
.mt-legal__index-list a.is-current {
  color: #ffffff;
  border-left-color: var(--mt-accent);
}
.mt-legal__index-list a.is-current span { color: var(--mt-accent-soft); }

.mt-legal__pdf {
  display: inline-block;
  margin-top: 26px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 13px;
  color: rgba(244, 247, 242, 0.72);
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease;
}
@media (hover: hover) {
  .mt-legal__pdf:hover { color: #ffffff; border-bottom-color: var(--mt-accent); }
}

.mt-legal__lead {
  margin: 0 0 12px;
  padding-bottom: 44px;
  font-size: 20px;
  line-height: 1.62;
  color: rgba(244, 247, 242, 0.82);
  max-width: 720px;
}

.mt-legal__clause {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  padding: 40px 0 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  scroll-margin-top: 130px;
}
.mt-legal__num {
  font-family: "Futura Pt Cond", sans-serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.42);
  padding-top: 2px;
}
.mt-legal__clause > *:not(.mt-legal__num) { grid-column: 2; }

.mt-legal__h {
  margin: 0 0 18px;
  font-family: "Futura Pt Cond", sans-serif;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #ffffff;
  overflow-wrap: anywhere;
}

.mt-legal__clause p {
  margin: 0 0 18px;
  font-size: 16.5px;
  line-height: 1.78;
  color: rgba(244, 247, 242, 0.7);
  max-width: 720px;
}
.mt-legal__clause p strong { color: rgba(255, 255, 255, 0.94); font-weight: 600; }

.mt-legal__list {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  max-width: 720px;
}
.mt-legal__list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 13px;
  font-size: 16.5px;
  line-height: 1.75;
  color: rgba(244, 247, 242, 0.7);
}
.mt-legal__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 12px;
  height: 1px;
  background: var(--mt-accent);
  opacity: 0.85;
}
.mt-legal__list li strong { color: rgba(255, 255, 255, 0.94); font-weight: 600; }

.mt-legal__subhead {
  margin: 30px 0 10px !important;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mt-accent-soft) !important;
  line-height: 1.5 !important;
}

.mt-legal__stage {
  display: block;
  margin-bottom: 3px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

.mt-legal__aside {
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 15px !important;
  color: rgba(244, 247, 242, 0.55) !important;
}

.mt-legal__link {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid rgba(67, 86, 234, 0.75);
  padding-bottom: 1px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
@media (hover: hover) {
  .mt-legal__link:hover { color: var(--mt-accent); border-bottom-color: var(--mt-accent); }
}

.mt-legal__contact {
  margin: 4px 0 8px;
  padding: 26px 28px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.028);
  max-width: 560px;
}
.mt-legal__contact p { margin: 0 0 7px !important; font-size: 15.5px !important; }
.mt-legal__contact p:last-child { margin-bottom: 0 !important; }
.mt-legal__contact-name {
  color: #ffffff !important;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.mt-legal__note {
  margin-top: 56px;
  padding: 34px 36px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 2px solid var(--mt-accent);
  border-radius: 4px 16px 16px 4px;
  background: linear-gradient(120deg, rgba(67, 86, 234, 0.1), rgba(255, 255, 255, 0.02) 62%);
}
.mt-legal__note-title {
  margin: 0 0 12px;
  font-family: "Futura Pt Cond", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
}
.mt-legal__note p:last-child {
  margin: 0;
  font-size: 16px;
  line-height: 1.72;
  color: rgba(244, 247, 242, 0.74);
}

/* ---------- refund summary table ---------- */

.mt-glance {
  margin-bottom: 84px;
}
.mt-glance__label {
  margin: 0 0 20px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 247, 242, 0.58);
}
.mt-glance__table { border-top: 1px solid rgba(255, 255, 255, 0.13); }
.mt-glance__row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr);
  gap: 32px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mt-glance__service {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: #ffffff;
}
.mt-glance__pos {
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(244, 247, 242, 0.66);
}
.mt-glance__foot {
  margin: 18px 0 0;
  font-size: 13.5px;
  color: rgba(244, 247, 242, 0.58);
}

/* ---------- cross links ---------- */

.mt-legal-more {
  padding: 0 0 104px;
}
.mt-legal-more__label {
  margin: 0 0 24px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 247, 242, 0.58);
}
.mt-legal-more__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.mt-legal-more__card {
  display: block;
  min-width: 0;
  padding: 30px 28px 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
  text-decoration: none;
  transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}
@media (hover: hover) {
  .mt-legal-more__card:hover {
    border-color: rgba(67, 86, 234, 0.75);
    background: rgba(67, 86, 234, 0.08);
    transform: translateY(-3px);
  }
}
.mt-legal-more__num {
  display: block;
  margin-bottom: 16px;
  font-family: "Futura Pt Cond", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--mt-accent-soft);
}
.mt-legal-more__title {
  display: block;
  margin-bottom: 9px;
  font-family: "Futura Pt Cond", sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: #ffffff;
  overflow-wrap: anywhere;
}
.mt-legal-more__text {
  display: block;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(244, 247, 242, 0.6);
}
.mt-legal-more__card--cta { background: rgba(67, 86, 234, 0.1); border-color: rgba(67, 86, 234, 0.4); }

/* ---------- legal page responsive ---------- */

@media screen and (max-width: 1100px) {
  .mt-legal__grid { grid-template-columns: 210px minmax(0, 1fr); gap: 48px; }
}

@media screen and (max-width: 991px) {
  .mt-legal { padding: 56px 0 76px; }
  .mt-legal__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mt-legal__index-sticky {
    position: static;
    max-height: none;
    overflow: visible;
    margin-bottom: 46px;
    padding: 24px 24px 26px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
  }
  .mt-legal__index-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-left: 0;
    column-gap: 22px;
  }
  .mt-legal__index-list a { padding-left: 0; margin-left: 0; border-left: 0; }
  .mt-legal__index-list a.is-current { border-left: 0; }
  .mt-legal-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 767px) {
  .mt-legal-hero__lead { font-size: 16.5px; margin-bottom: 34px; }
  .mt-legal-hero__meta { grid-template-columns: minmax(0, 1fr); }
  .mt-legal-hero__cell {
    border-left: 0;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .mt-legal-hero__cell:last-child { border-bottom: 0; }
  .mt-legal { padding: 44px 0 60px; }
  .mt-legal__lead { font-size: 17.5px; padding-bottom: 32px; }
  .mt-legal__clause { grid-template-columns: minmax(0, 1fr); padding-top: 32px; }
  .mt-legal__clause > *:not(.mt-legal__num) { grid-column: 1; }
  .mt-legal__num { font-size: 13px; letter-spacing: 0.16em; color: var(--mt-accent-soft); margin-bottom: 10px; }
  .mt-legal-hero { padding-top: 16px; }
  .mt-legal__h { font-size: 23px; margin-bottom: 15px; }
  .mt-legal__clause p, .mt-legal__list li { font-size: 16px; }
  .mt-legal__index-list { grid-template-columns: minmax(0, 1fr); }
  .mt-legal__contact { padding: 22px 20px; }
  .mt-legal__note { padding: 26px 22px; margin-top: 42px; }
  .mt-glance { margin-bottom: 56px; }
  .mt-glance__row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 0; }
  .mt-legal-more { padding-bottom: 72px; }
  .mt-legal-more__grid { grid-template-columns: minmax(0, 1fr); }
  .mt-legal-more__card { padding: 24px 22px 26px; }
}

/* =====================================================================
   CONTENT PROTECTION
   Text selection, right click and image dragging are switched off across
   the site. Anything a visitor legitimately needs to copy (form fields,
   phone numbers, email addresses, the address block) keeps normal
   selection through .mt-selectable, so this never blocks an enquiry.
   ===================================================================== */

body.mt-protected,
body.mt-protected .mt-legal,
body.mt-protected .section {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body.mt-protected input,
body.mt-protected textarea,
body.mt-protected select,
body.mt-protected .mt-selectable,
body.mt-protected .mt-selectable *,
body.mt-protected a[href^="mailto:"],
body.mt-protected a[href^="tel:"],
body.mt-protected .mt-footer__addr-text,
body.mt-protected .mt-footer__card-link,
body.mt-protected .mega-cta-line {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

body.mt-protected img,
body.mt-protected video {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: auto;
}

/* =====================================================================
   HUMAN CHECK (Cloudflare Turnstile)
   The widget is injected just above the submit button of every enquiry
   form. Nothing renders until the site key is set in murphys.js.
   ===================================================================== */

.mt-captcha {
  margin: 4px 0 20px;
  min-height: 0;
}
.mt-captcha:empty { margin: 0; }
.mt-captcha iframe { max-width: 100%; }

.form-block-form .mt-captcha { margin: 0 0 22px; }

.mt-captcha__note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(244, 247, 242, 0.45);
}

@media screen and (max-width: 359px) {
  .mt-captcha { transform: scale(0.92); transform-origin: left top; }
}

/* =====================================================================
   404 PAGE
   Reuses the legal page masthead and card grid, plus a row of quick
   links to the pages people most often land on.
   ===================================================================== */

.mt-404 { max-width: 820px; }
.mt-404-more { padding-top: 64px; }
.mt-404-label { margin-top: 56px; }

.mt-404-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mt-404-links a {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: 14.5px;
  line-height: 1.2;
  color: rgba(244, 247, 242, 0.78);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
@media (hover: hover) {
  .mt-404-links a:hover {
    color: #ffffff;
    border-color: rgba(67, 86, 234, 0.8);
    background: rgba(67, 86, 234, 0.12);
  }
}

@media screen and (max-width: 767px) {
  .mt-404-more { padding-top: 44px; }
  .mt-404-label { margin-top: 44px; }
  .mt-404-links a { padding: 9px 15px; font-size: 13.5px; }
}