/*! mk-home.css - Makcon home page sections.
 *  Scoped to .mkh-* so it cannot collide with the shared theme CSS that
 *  styles the header, off-canvas menu and footer.
 *  Palette and type are taken from the existing brand: navy #011e41,
 *  Saudi-gold accent, Montserrat.
 */

:root {
  --mkh-navy: #011e41;
  --mkh-navy-80: #0a2d55;
  --mkh-navy-60: #1d4571;
  --mkh-gold: #f09815;
  --mkh-gold-ink: #8f4608;
  --mkh-blue: #166fd3;
  --mkh-ink: #1d2430;
  --mkh-body: #4a5260;
  --mkh-muted: #6f7988;
  --mkh-line: #e3e7ef;
  --mkh-bg: #f5f7fa;
  --mkh-white: #fff;
  --mkh-r: 12px;
  --mkh-r-sm: 8px;
  --mkh-sh: 0 2px 10px rgba(1, 30, 65, .06);
  --mkh-sh-lg: 0 14px 36px rgba(1, 30, 65, .13);
  --mkh-pad: clamp(52px, 6vw, 88px);
}

/* ---------- primitives ---------- */
.mkh { font-family: Montserrat, "Montserrat Fallback", Arial, sans-serif; }
.mkh section { padding: var(--mkh-pad) 0; }
.mkh-wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }

.mkh h2, .mkh h3, .mkh h4 { color: var(--mkh-navy); margin: 0; text-transform: none; letter-spacing: -.01em; }
.mkh h2 { font-size: clamp(1.55rem, 3.1vw, 2.35rem); line-height: 1.18; font-weight: 700; }
.mkh h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.25; font-weight: 700; }
.mkh h4 { font-size: 1.02rem; line-height: 1.3; font-weight: 700; }
.mkh p { color: var(--mkh-body); font-size: .97rem; line-height: 1.75; margin: 0; }

/* Prose links. Without this they inherit the theme's global mint-green link
   colour, which is off-brand against the navy/gold palette. */
.mkh p a,
.mkh li a {
  color: var(--mkh-gold-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.mkh p a:hover,
.mkh li a:hover { color: var(--mkh-navy); }

.mkh-kicker {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mkh-gold-ink); margin-bottom: 10px;
}
.mkh-kicker--light { color: var(--mkh-gold); }

.mkh-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 46px); }
.mkh-head--center { margin-inline: auto; text-align: center; }
.mkh-head p { margin-top: 14px; font-size: 1rem; }

.mkh-rule { width: 54px; height: 3px; background: var(--mkh-gold); border-radius: 2px; margin-top: 18px; }
.mkh-head--center .mkh-rule { margin-inline: auto; }

/* ---------- buttons ---------- */
.mkh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: .9rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 14px 26px; border-radius: var(--mkh-r-sm); border: 2px solid transparent;
  text-decoration: none; line-height: 1.1; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.mkh-btn:hover { transform: translateY(-2px); }
.mkh-btn--gold { background: var(--mkh-gold-ink); color: #fff !important; border-color: var(--mkh-gold-ink); }
.mkh-btn--gold:hover { background: #763905; border-color: #763905; color: #fff !important; }
.mkh-btn--navy { background: var(--mkh-navy); color: #fff !important; border-color: var(--mkh-navy); }
.mkh-btn--navy:hover { background: var(--mkh-navy-80); border-color: var(--mkh-navy-80); color: #fff !important; }
.mkh-btn--ghost { background: transparent; color: var(--mkh-navy) !important; border-color: #c3ccdb; }
.mkh-btn--ghost:hover { background: var(--mkh-navy); border-color: var(--mkh-navy); color: #fff !important; }
.mkh-btn--onNavy { background: var(--mkh-gold); color: var(--mkh-navy) !important; border-color: var(--mkh-gold); }
.mkh-btn--onNavy:hover { background: #ffad33; border-color: #ffad33; color: var(--mkh-navy) !important; }

/* ---------- lifting-equipment strip under the hero ---------- */
.mkh .lf-strip { background: var(--mkh-navy); color: #fff; padding: 13px 0; }
.mkh .lf-strip__in {
  width: min(1200px, 100% - 32px); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 20px; font-size: .92rem; line-height: 1.4;
}
.mkh .lf-strip__t {
  font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  font-size: .72rem; color: var(--mkh-gold);
}
.mkh .lf-strip a {
  color: #fff; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .35); padding-bottom: 1px;
  transition: color .18s ease, border-color .18s ease;
}
.mkh .lf-strip a:hover { color: var(--mkh-gold); border-bottom-color: var(--mkh-gold); }
.mkh .lf-strip a.lf-strip__call {
  background: var(--mkh-gold); color: var(--mkh-navy); border: 0;
  padding: 8px 16px; border-radius: var(--mkh-r-sm); font-weight: 700;
}
.mkh .lf-strip a.lf-strip__call:hover { background: #ffad33; color: var(--mkh-navy); }
@media (max-width: 576px) {
  .mkh .lf-strip__in { font-size: .86rem; gap: 6px 14px; }
}

/* ---------- intro ---------- */
.mkh-intro { background: linear-gradient(180deg, #fff 0%, var(--mkh-bg) 100%); text-align: center; }
.mkh-intro h1 {
  color: var(--mkh-navy); font-size: clamp(1.7rem, 4vw, 2.75rem); line-height: 1.16;
  font-weight: 800; letter-spacing: -.02em; margin: 0 auto 18px; max-width: 17ch;
  text-transform: none;
}
.mkh-intro__lead { max-width: 78ch; margin-inline: auto; font-size: 1.02rem; }
.mkh-cta-pair {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px;
}
.mkh-cta {
  display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--mkh-line);
  border-radius: var(--mkh-r); padding: 15px 24px 15px 18px; text-decoration: none;
  box-shadow: var(--mkh-sh); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  min-width: 268px; text-align: left;
}
.mkh-cta:hover { transform: translateY(-3px); box-shadow: var(--mkh-sh-lg); border-color: #c9d3e2; }
.mkh-cta__ic {
  flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(240, 152, 21, .14); color: var(--mkh-gold-ink); font-size: 1.05rem;
}
.mkh-cta strong { display: block; color: var(--mkh-navy); font-size: .95rem; font-weight: 700; }
.mkh-cta small { display: block; color: var(--mkh-muted); font-size: .84rem; margin-top: 2px; }

/* ---------- stats band ---------- */
.mkh-stats { background: var(--mkh-navy); padding: clamp(34px, 4vw, 52px) 0 !important; }
.mkh-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mkh-stat { text-align: center; position: relative; }
.mkh-stat + .mkh-stat::before {
  content: ""; position: absolute; left: -10px; top: 12%; height: 76%; width: 1px;
  background: rgba(255, 255, 255, .16);
}
.mkh-stat__n {
  font-size: clamp(1.8rem, 4vw, 2.7rem); font-weight: 800; color: var(--mkh-gold);
  line-height: 1; letter-spacing: -.02em;
}
.mkh-stat p { color: rgba(255, 255, 255, .82); font-size: .84rem; margin-top: 9px; letter-spacing: .03em; }

/* ---------- generic card grid ---------- */
.mkh-grid { display: grid; gap: 20px; }
.mkh-grid--5 { grid-template-columns: repeat(5, 1fr); }
.mkh-grid--4 { grid-template-columns: repeat(4, 1fr); }
.mkh-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mkh-grid--2 { grid-template-columns: repeat(2, 1fr); }

.mkh-card {
  background: #fff; border: 1px solid var(--mkh-line); border-radius: var(--mkh-r);
  overflow: hidden; display: flex; flex-direction: column; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mkh-card:hover { transform: translateY(-4px); box-shadow: var(--mkh-sh-lg); border-color: #cfd8e6; }
.mkh-card__img { position: relative; aspect-ratio: 4 / 3; background: var(--mkh-bg); }
.mkh-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkh-card__b { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.mkh-card__b h3 { font-size: 1.04rem; margin-bottom: 8px; }
.mkh-card__b p { font-size: .87rem; line-height: 1.62; flex: 1; }
.mkh-go {
  margin-top: 14px; font-size: .76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--mkh-gold-ink); display: inline-flex; align-items: center; gap: 6px;
}
.mkh-card:hover .mkh-go { gap: 10px; }

/* ---------- lifting ---------- */
.mkh-lift { background: var(--mkh-bg); }
.mkh-lift__foot { text-align: center; margin-top: 30px; }
.mkh-lift__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.mkh-lift__more { margin-top: 22px; font-size: .9rem; color: var(--mkh-muted); }
.mkh-lift__more a { color: var(--mkh-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- services (navy) ---------- */
.mkh-serv { background: var(--mkh-navy); }
.mkh-serv h2, .mkh-serv h3 { color: #fff; }
.mkh-serv .mkh-head p { color: rgba(255, 255, 255, .78); }
.mkh-serv__card {
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .11);
  border-radius: var(--mkh-r); overflow: hidden; display: flex; flex-direction: column;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.mkh-serv__card:hover { background: rgba(255, 255, 255, .08); border-color: rgba(240, 152, 21, .5); transform: translateY(-4px); }
.mkh-serv__img { position: relative; aspect-ratio: 16 / 10; }
.mkh-serv__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkh-serv__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(1, 30, 65, .1) 0%, rgba(1, 30, 65, .85) 100%);
}
/* Bottom-aligned with a reserved two-line band, so one-line titles
   ("Material Supply") sit on the same baseline as two-line ones
   ("Industrial Support Services") across the row. */
.mkh-serv__tag {
  position: absolute; left: 16px; right: 16px; bottom: 13px; z-index: 1;
  color: #fff; font-size: 1.02rem; font-weight: 700; line-height: 1.25;
  min-height: 2.5em; display: flex; align-items: flex-end; margin: 0;
}
.mkh-serv__b { padding: 17px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.mkh-serv__b p { color: rgba(255, 255, 255, .72); font-size: .865rem; line-height: 1.65; flex: 1; }
.mkh-serv__link {
  margin-top: auto; padding-top: 15px; color: var(--mkh-gold); font-size: .79rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .07em; text-decoration: none;
}
.mkh-serv__link:hover { color: #ffb954; }

/* ---------- coverage ---------- */
.mkh-cov__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mkh-cov__card {
  background: #fff; border: 1px solid var(--mkh-line); border-left: 3px solid var(--mkh-gold);
  border-radius: var(--mkh-r-sm); padding: 20px 20px 22px;
}
.mkh-cov__card h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--mkh-gold-ink); margin-bottom: 9px; }
.mkh-cov__card p { font-size: .91rem; line-height: 1.65; color: var(--mkh-ink); }
.mkh-cov__note { margin-top: 24px; font-size: .93rem; color: var(--mkh-muted); max-width: 90ch; }

/* ---------- why / features ---------- */
.mkh-why { background: var(--mkh-bg); }
.mkh-feat {
  background: #fff; border: 1px solid var(--mkh-line); border-radius: var(--mkh-r);
  padding: 26px 24px 28px; transition: box-shadow .2s ease, transform .2s ease;
}
.mkh-feat:hover { box-shadow: var(--mkh-sh-lg); transform: translateY(-3px); }
.mkh-feat__n {
  font-size: .74rem; font-weight: 800; letter-spacing: .1em; color: var(--mkh-gold);
  display: block; margin-bottom: 10px;
}
.mkh-feat h4 { margin-bottom: 10px; font-size: 1.03rem; }
.mkh-feat p { font-size: .885rem; line-height: 1.68; }

/* ---------- split (about / quality) ---------- */
.mkh-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.mkh-split__media img { width: 100%; height: auto; display: block; border-radius: var(--mkh-r); }
.mkh-split__media--cover {
  min-height: 330px; border-radius: var(--mkh-r); background-size: cover; background-position: center;
}
.mkh-split p + p { margin-top: 14px; }

/* tabs */
.mkh-tabs { display: flex; gap: 8px; list-style: none; padding: 0; margin: 24px 0 18px; flex-wrap: wrap; }
.mkh-tabs a {
  display: inline-block; padding: 10px 18px; border-radius: 40px; font-size: .84rem; font-weight: 700;
  color: var(--mkh-navy); background: #eef1f6; text-decoration: none; letter-spacing: .04em;
  text-transform: uppercase; transition: background .18s ease, color .18s ease;
}
.mkh-tabs a:hover { background: #e0e5ee; }
.mkh-tabs a.active { background: var(--mkh-navy); color: #fff; }
.mkh-tabpane { display: none; }
.mkh-tabpane.active { display: block; }
.mkh-tabpane p {
  background: #fff; border: 1px solid var(--mkh-line); border-left: 3px solid var(--mkh-gold);
  border-radius: var(--mkh-r-sm); padding: 18px 20px; font-size: .93rem;
}

/* ---------- clients ---------- */
.mkh-clients { background: #fff; padding: clamp(40px, 5vw, 64px) 0 !important; }
.mkh-clients h3 { text-align: center; font-size: .82rem; text-transform: uppercase; letter-spacing: .16em; color: var(--mkh-muted); font-weight: 700; margin-bottom: 28px; }
.mkh-clients .brand-image { padding: 0 14px; }
.mkh-clients .brand-image img { width: 100%; height: auto; filter: grayscale(100%); opacity: .62; transition: filter .25s ease, opacity .25s ease; }
.mkh-clients .brand-image:hover img { filter: none; opacity: 1; }

/* ---------- industries ---------- */
.mkh-ind__card {
  background: #fff; border: 1px solid var(--mkh-line); border-radius: var(--mkh-r);
  padding: 24px 22px 26px; border-top: 3px solid var(--mkh-navy);
  transition: border-top-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.mkh-ind__card:hover { border-top-color: var(--mkh-gold); box-shadow: var(--mkh-sh-lg); transform: translateY(-3px); }
.mkh-ind__card h4 { margin-bottom: 9px; }
.mkh-ind__card p { font-size: .88rem; line-height: 1.66; }

/* ---------- CTA banner ---------- */
.mkh-cta-band { position: relative; background-size: cover; background-position: center; text-align: center; }
.mkh-cta-band::before { content: ""; position: absolute; inset: 0; background: rgba(1, 30, 65, .86); }
.mkh-cta-band .mkh-wrap { position: relative; z-index: 1; }
.mkh-cta-band h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.mkh-cta-band .mkh-btn { margin-top: 26px; }

/* ---------- quote block ---------- */
.mkh-quote { background: var(--mkh-bg); }
/* Centred, not top-aligned: the form column is much taller than the text,
   so starting both at the top left a large dead space under the CTA. */
.mkh-quote__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(26px, 4vw, 48px); align-items: center; }
.mkh-quote__text p + p { margin-top: 14px; }
.mkh-quote__text .mkh-btn { margin-top: 26px; }
.mkh-form {
  background: #fff; border: 1px solid var(--mkh-line); border-radius: var(--mkh-r);
  padding: clamp(24px, 3vw, 34px); box-shadow: var(--mkh-sh);
}
.mkh-form h3 { margin-bottom: 8px; }
.mkh-form > p { font-size: .9rem; margin-bottom: 20px; }
.mkh-field { margin-bottom: 15px; }
.mkh-field label {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--mkh-muted); margin-bottom: 6px;
}
.mkh-field input, .mkh-field textarea {
  width: 100%; border: 1px solid #d5d9e0; background: #f8fafc; border-radius: var(--mkh-r-sm);
  padding: 12px 14px; font: inherit; font-size: .93rem; color: var(--mkh-ink);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.mkh-field textarea { min-height: 112px; resize: vertical; }
.mkh-field input:focus, .mkh-field textarea:focus {
  outline: none; border-color: var(--mkh-blue); background: #fff;
  box-shadow: 0 0 0 3px rgba(22, 111, 211, .14);
}
.mkh-form button { width: 100%; }

/* ---------- FAQ ---------- */
.mkh-faq__list { max-width: 900px; margin-inline: auto; }
.mkh-faq .accordion-item {
  background: #fff; border: 1px solid var(--mkh-line); border-radius: var(--mkh-r-sm);
  margin-bottom: 10px; overflow: hidden;
}
.mkh-faq .accordion-header { margin: 0; }
.mkh-faq .accordion-button {
  width: 100%; text-align: left; background: #fff; border: 0; cursor: pointer;
  font: inherit; font-size: .97rem; font-weight: 600; color: var(--mkh-navy);
  padding: 17px 52px 17px 20px; position: relative; line-height: 1.45;
}
.mkh-faq .accordion-button:hover { background: #f9fafc; }
.mkh-faq .accordion-button::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--mkh-gold-ink); border-bottom: 2px solid var(--mkh-gold-ink);
  transform: translateY(-70%) rotate(45deg); transition: transform .22s ease;
}
.mkh-faq .accordion-button[aria-expanded="true"]::after { transform: translateY(-30%) rotate(-135deg); }
.mkh-faq .accordion-collapse { height: 0; overflow: hidden; }
.mkh-faq .accordion-collapse.show { height: auto; }
.mkh-faq .accordion-body {
  padding: 2px 20px 20px; font-size: .92rem; line-height: 1.72; color: var(--mkh-body);
}

/* ---------- below-fold rendering ----------
 * content-visibility:auto was removed deliberately. It made every deferred
 * section report a placeholder height (933px here) until scrolled into view,
 * so the document was ~1900px shorter than the browser reported. That caused
 * scrollbar jump while scrolling and broke full-page screenshot tools, which
 * step by the reported height and stitch the result. The class is kept in the
 * markup so nothing else needs changing. */

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .mkh-grid--5 { grid-template-columns: repeat(3, 1fr); }
  .mkh-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .mkh-cov__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .mkh-split { grid-template-columns: 1fr; }
  .mkh-split__media { order: -1; }
  .mkh-quote__grid { grid-template-columns: 1fr; }
  .mkh-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .mkh-grid--5, .mkh-grid--4, .mkh-grid--3, .mkh-grid--2 { grid-template-columns: 1fr; }
  .mkh-cov__grid { grid-template-columns: 1fr; }
  .mkh-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; }
  .mkh-stat + .mkh-stat::before { display: none; }
  .mkh-cta { min-width: 0; width: 100%; }
  .mkh-lift__btns .mkh-btn { width: 100%; }
  .mkh-card__img { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
  .mkh-card, .mkh-feat, .mkh-cta, .mkh-serv__card, .mkh-ind__card, .mkh-btn { transition: none; }
  .mkh-card:hover, .mkh-feat:hover, .mkh-cta:hover, .mkh-serv__card:hover,
  .mkh-ind__card:hover, .mkh-btn:hover { transform: none; }
}