/* Homepage hero: framed photo, copy left, glass review card, proof cards below. Index only. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&display=swap');

.theme{ --f-hero: 'Archivo', 'Inter Tight', sans-serif; }
.mh-page{ --mh-cream: #eeeee8; --mh-ink: #0b1220; --mh-hot: #1c3563; --rust: #14284d; --rust-deep: #0b1426; --blush: #b9c9e6; background: var(--mh-cream); }

.mh{ background: var(--mh-cream); color: var(--mh-ink); padding: clamp(84px, 11vh, 104px) clamp(12px, 1.6vw, 24px) clamp(12px, 1.6vw, 24px); }
.mh-frame{
  position: relative; overflow: hidden; isolation: isolate;
  min-height: calc(100svh - clamp(96px, 12.5vh, 128px));
  border-radius: clamp(18px, 2.4vw, 34px);
  background: linear-gradient(90deg, #eef4f4 0%, #dfe8ea 70%, #d3dee1 100%);
  display: flex; align-items: flex-end;
  padding: clamp(28px, 5vw, 80px);
}
.mh-fig{
  position: absolute; z-index: -1; top: 0; right: 0; width: 52%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
  transform: scale(1.04);
  animation: mhFloat 18s ease-in-out infinite alternate;
}
@keyframes mhFloat{ to{ transform: scale(1.1) translate3d(-1%, 1%, 0); } }

.mh-copy{ max-width: 760px; }
.mh-title{
  font-family: var(--f-hero); font-stretch: 125%; font-variation-settings: 'wdth' 125;
  font-weight: 850; text-transform: uppercase;
  font-size: clamp(2.1rem, 3.7vw, 4.2rem); line-height: .93; letter-spacing: -.025em;
  margin: 0; color: var(--mh-ink);
}
.mh-title span{ display: block; }
.mh-last{ color: var(--mh-hot); }
.mh-lede{ margin: clamp(18px, 2.6vh, 28px) 0 clamp(20px, 3vh, 32px); max-width: 44ch; font-size: clamp(.98rem, 1.1vw, 1.1rem); line-height: 1.45; color: rgba(11,18,32,.88); }

.mh-pill{
  position: relative; display: inline-block; overflow: hidden; isolation: isolate;
  padding: 19px 34px; border-radius: 0;
  background: var(--mh-hot); color: #fff;
  font-family: var(--f-hero); font-stretch: 112%; font-weight: 800;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
}
.mh-pill::before{
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--mh-ink); transform: translateX(-101%);
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.mh-pill:hover::before{ transform: translateX(0); }

.mh-stack{
  position: absolute; right: clamp(20px, 3.4vw, 56px); bottom: clamp(20px, 3.4vw, 56px);
  display: grid; gap: 12px; width: clamp(230px, 20vw, 290px);
}
.mh-work{
  position: relative; display: block; overflow: hidden; border-radius: 18px;
  background: var(--mh-ink); box-shadow: 0 18px 44px rgba(20,24,30,.22);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.mh-work img{ display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: top; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.mh-work span{
  display: block; padding: 14px 18px; background: var(--mh-ink); color: #fff;
  font-family: var(--f-hero); font-stretch: 112%; font-weight: 800;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  transition: background .35s;
}
.mh-work:hover span{ background: var(--mh-hot); }
.mh-work:hover{ transform: translateY(-3px); }
.mh-work:hover img{ transform: scale(1.05); }
.mh-glass{
  position: relative;
  display: grid; gap: 4px; padding: 18px 22px; border-radius: 18px;
  background: rgba(244,244,239,.78); border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%);
  color: var(--mh-ink);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.mh-glass:hover{ transform: translateY(-3px); }
.mh-glass-stars{ color: var(--mh-hot); letter-spacing: .14em; font-size: 1rem; }
.mh-glass b{ font-family: var(--f-hero); font-stretch: 112%; font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; }

/* header sits on cream until scrolled */
.mh-page .site-header:not(.is-scrolled) .brand img{ filter: brightness(0); }
.mh-page .site-header:not(.is-scrolled) .main-nav a:not(.btn){ color: var(--mh-ink); }
.mh-page .site-header:not(.is-scrolled) .nav-whatsapp,
.mh-page .site-header:not(.is-scrolled) .nav-facebook{ color: var(--mh-ink); border-color: rgba(11,18,32,.3); }
.mh-page .site-header:not(.is-scrolled) .nav-links .btn-primary{ background: var(--mh-ink); color: var(--mh-cream); }
.mh-page .site-header:not(.is-scrolled) .menu-toggle{ color: var(--mh-ink); border-color: rgba(11,18,32,.35); }
.mh-page .site-header:not(.is-scrolled) .menu-toggle span,
.mh-page .site-header:not(.is-scrolled) .menu-toggle span::before,
.mh-page .site-header:not(.is-scrolled) .menu-toggle span::after{ background: var(--mh-ink); }

/* ---- proof cards under the hero ---- */
.mh-after{ background: var(--mh-cream); color: var(--mh-ink); padding: clamp(36px, 5vw, 72px) 0 clamp(56px, 7vw, 100px); }
.mh-services{
  list-style: none; margin: 0 0 clamp(22px, 3vw, 36px); padding: 0;
  display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap;
  font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(11,18,32,.62);
}
.mh-cards{ display: grid; grid-template-columns: 3fr 5fr 3fr 2.8fr; gap: 16px; height: clamp(250px, 30vw, 330px); }
.mh-card{ position: relative; overflow: hidden; border-radius: 16px; display: block; background: var(--rust-deep); isolation: isolate; color: var(--bone); }
.mh-card img{ transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.mh-card:hover > img{ transform: scale(1.05); }

.mh-motion > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; filter: grayscale(.55) contrast(1.08) brightness(.95); }
.mh-motion::after{ content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28,53,99,.35) 0%, rgba(11,18,32,.9) 100%); }
.mh-cap{ position: absolute; left: 18px; right: 18px; bottom: 16px; font-size: .86rem; font-weight: 500; line-height: 1.2; color: var(--bone); }

.mh-project{ background: linear-gradient(135deg, var(--rust) 0%, var(--rust-deep) 70%); display: grid; grid-template-columns: 1fr 1.3fr; align-items: end; padding: 26px 0 0 26px; }
.mh-k{ font-size: .78rem; font-weight: 500; color: var(--blush); }
.mh-project-copy h2{ font-family: var(--f-hero); font-stretch: 112%; font-weight: 800; font-size: clamp(1.15rem, 1.7vw, 1.65rem); line-height: 1.02; letter-spacing: -.02em; margin: 10px 0 8px; text-transform: uppercase; }
.mh-project-copy p{ margin: 0 0 18px; font-size: .88rem; color: var(--bone-dim); }
.mh-link{ font-size: .88rem; font-weight: 500; border-bottom: 1px solid var(--hairline-strong); padding-bottom: 3px; transition: border-color .3s; }
.mh-card:hover .mh-link{ border-color: var(--mh-hot); }
.mh-laptop{ align-self: end; margin: 0 14px -6px 0; transform: translateY(6px) rotate(-2deg); transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.mh-project:hover .mh-laptop{ transform: translateY(0) rotate(0deg); }
.mh-screen{ border: 6px solid #0b0f12; border-bottom-width: 7px; border-radius: 10px 10px 2px 2px; background: #0b0f12; aspect-ratio: 16/10; overflow: hidden; }
.mh-screen img{ width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.mh-base{ height: 9px; margin: 0 -5%; background: linear-gradient(#e6ddd2, #a79b8e); border-radius: 0 0 14px 14px; }

.mh-reviews{ background: var(--rust-deep); padding: 22px; display: flex; flex-direction: column; justify-content: space-between; }
.mh-stat{ display: flex; align-items: flex-end; gap: 12px; margin: 10px 0 12px; }
.mh-stat b{ font-family: var(--f-hero); font-stretch: 125%; font-weight: 900; font-size: clamp(2.8rem, 4.6vw, 4.2rem); line-height: .8; letter-spacing: -.04em; }
.mh-stat span{ font-size: .84rem; font-weight: 600; line-height: 1.15; max-width: 9ch; }
.mh-stars{ margin: -6px 0 0; color: var(--blush); font-size: 1.05rem; letter-spacing: .12em; display: flex; align-items: center; gap: 12px; }
.mh-stars small{ font-size: .78rem; letter-spacing: 0; color: rgba(238,249,251,.7); }
.mh-quote{ margin: 0; font-size: 1.02rem; line-height: 1.25; font-weight: 500; letter-spacing: -.01em; }
.mh-by{ margin: 6px 0 0; font-size: .78rem; opacity: .7; }

.mh-col{ display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.mh-done{ flex: 1; background: var(--mh-hot); color: #eef2f9; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.mh-done .mh-k{ color: #eef2f9; opacity: .8; }
.mh-done b{ font-family: var(--f-hero); font-stretch: 125%; font-weight: 900; font-size: clamp(2.8rem, 4.6vw, 4.4rem); line-height: .85; letter-spacing: -.04em; }
.mh-done p{ margin: 0; font-size: .82rem; line-height: 1.25; font-weight: 500; }
.mh-start{
  display: block; padding: 18px 20px; border-radius: 0; text-align: center;
  background: var(--rust-deep); color: var(--bone);
  font-family: var(--f-hero); font-stretch: 112%; font-weight: 800;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  transition: background .3s;
}
.mh-start:hover{ background: var(--mh-hot); }

.mh-strip{ padding-top: clamp(40px, 5vw, 72px); padding-bottom: 0; }

@media (max-width: 1000px){
  .mh-cards{ grid-template-columns: 1fr 1fr; height: auto; }
  .mh-motion{ min-height: 220px; }
  .mh-project{ grid-column: 1 / -1; order: -1; min-height: 260px; }
  .mh-reviews{ min-height: 220px; gap: 18px; }
  .mh-col{ grid-column: 1 / -1; flex-direction: row; }
  .mh-done{ min-height: 150px; }
  .mh-start{ width: 42%; }
}
@media (max-width: 760px){
  .mh-frame{ flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 20px; min-height: 640px; }
  .mh-fig{ right: -20%; width: 120%; object-position: 50% 20%; opacity: .75; }
  .mh-stack{ position: static; align-self: stretch; width: auto; }
  .mh-copy{ position: relative; }
}
@media (max-width: 640px){
  .mh-cards{ grid-template-columns: 1fr; }
  .mh-project{ grid-template-columns: 1fr; padding: 24px 24px 0; }
  .mh-laptop{ margin: 20px 0 0; transform: translateY(10px); }
  .mh-col{ flex-direction: column; }
  .mh-start{ width: auto; }
  .mh-services{ justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce){ .mh-fig{ animation: none; } }

.mh-glass-top{ display: flex; align-items: center; gap: 12px; }
.mh-glass-quote{ font-style: normal; font-size: .9rem; line-height: 1.3; color: rgba(11,18,32,.8); }

.mh-quote-box{ display: grid; gap: 8px; padding: 18px 22px; border-radius: 18px; background: rgba(244,244,239,.78); border: 1px solid rgba(255,255,255,.55); backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); color: var(--mh-ink); transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.mh-quote-box:hover{ transform: translateY(-3px); }
.mh-quote-box p{ margin: 0; font-size: .9rem; line-height: 1.35; font-weight: 500; }
.mh-quote-box span{ font-size: .78rem; font-weight: 600; color: var(--mh-hot); }

.mh-work-btn{ display: block; text-align: center; }

/* hero photo blends down into the page */
.mh-frame::after{ content: ''; position: absolute; inset: auto 0 0 0; height: clamp(110px, 16vh, 170px); z-index: -1; background: linear-gradient(180deg, rgba(238,238,232,0) 0%, var(--mh-cream) 100%); pointer-events: none; }
.mh-frame{ border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* hero colour runs behind the nav, full width */
.mh{ padding: 0; }
.mh-frame{ min-height: 100svh; border-radius: 0; }


.mh-glass-top{ justify-content: space-between; }
.mh-fb{ width: 20px; height: 20px; fill: #1877F2; flex: none; }