/* ===================================================================
   mk-about.css

   Companion stylesheet for the natively-rebuilt About page. Same
   division of labour as mk-native.css and mk-contact.css: Elementor's
   controls carry every colour, size, radius, border and gap they can
   express, and this file carries only what they cannot —

     - the hero photograph, absolutely placed with its scrim overlay
     - the gradient-clipped headings and the gold rule under each one
     - the hairline dividers between the capability columns
     - the gold connector between the four approach steps
     - the map-pin bullets on the service-area list
     - the fluid clamp() sizes the original uses, which have no
       equivalent in an Elementor control

   Every rule is scoped to an .mk-* class set in the Elementor panel
   under Advanced > CSS Classes, so editing content in the builder never
   detaches the styling.
   =================================================================== */

/* ---------- 0. Reset the theme's own block margins ----------------- */

.e-con .elementor-widget-heading .elementor-heading-title { margin: 0; }
.e-con .elementor-widget-text-editor p { margin-top: 0; }
.e-con .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.e-con .elementor-widget-text-editor ul,
.e-con .elementor-widget-text-editor ol { margin: 0; }
.e-con .elementor-icon svg {
  fill: none !important;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 1. Section grounds ------------------------------------ */

/* Three-stop washes; Elementor's gradient control tops out at two. */
.mk-sec-mist {
  background-image: linear-gradient(176deg, #f7fafd 0%, #e9f0f9 54%, #f4f8fc 100%) !important;
}
.mk-sec-warm {
  background-image: linear-gradient(174deg, #fbfcfe 0%, #f1f5fb 100%) !important;
}

/* ---------- 2. Hero ------------------------------------------------ */

.mk-about-hero { position: relative; overflow: hidden; }

/* The photograph fills the right 58% of the band and sits behind the
   copy, with the navy scrim that keeps the headline legible. */
.mk-ah-photo {
  position: absolute !important;
  inset: 0 0 0 42%;
  /* the container's own width control would otherwise stretch it to 100%
     of the section from the 42% offset, pushing it off the right edge */
  width: 58% !important;
  z-index: 0;
  padding: 0 !important;
  pointer-events: none;
}
.mk-ah-photo .elementor-widget-image,
.mk-ah-photo .elementor-widget-container,
.mk-ah-photo figure { height: 100%; margin: 0; }
.mk-ah-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mk-ah-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    #041634 0%, rgba(4, 22, 52, .92) 26%,
    rgba(4, 22, 52, .34) 68%, rgba(4, 22, 52, .34) 100%);
}
.mk-ah-inner { position: relative; z-index: 2; }
.mk-ah-copy { max-width: 560px; }

/* The breadcrumb is absolutely placed against the section in the
   original, so it takes no room in the flow. */
.mk-crumbs-bar {
  position: absolute !important;
  top: clamp(18px, 3vw, 30px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  margin: 0 !important;
}
.mk-crumbs { margin: 0 !important; }
.mk-crumbs .elementor-button { padding: 0; background: transparent; }
.mk-crumbs .elementor-button:hover { color: #fff; }
.mk-crumb-sep .elementor-heading-title { opacity: .55; }

/* The hero call to action is the navy gradient pill, not the white one
   the closing card uses. */
.mk-btn-navy-grad .elementor-button {
  background-image: linear-gradient(135deg, #062b6f 0%, #013c80 52%, #00558f 100%);
  border: 1px solid transparent;
  box-shadow: 0 10px 24px -12px rgba(6, 43, 111, .55),
              inset 0 0 0 1px rgba(201, 171, 99, .3);
}
.mk-btn-navy-grad .elementor-button:hover { filter: brightness(1.06); }

/* ---------- 3. Fluid type and spacing ------------------------------ */

/* clamp() has no Elementor control. The panel keeps the 1536px value so
   the builder shows a sensible number; these rules restore the fluid
   behaviour at every other width. */
.mk-h-xl-a .elementor-heading-title {
  font-size: clamp(2.4rem, 5.2vw, 3.9rem) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.015em !important;
}
.mk-h-lg-a .elementor-heading-title {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.015em !important;
}
.mk-ah-sub .elementor-heading-title {
  font-size: clamp(1.4rem, 2.6vw, 2rem) !important;
  line-height: 1.24 !important;
}
.mk-story-grid { gap: clamp(32px, 5vw, 68px) !important; }
.mk-serve-grid { gap: clamp(26px, 4vw, 56px) !important; }
.mk-closing-copy { padding: clamp(30px, 4vw, 52px) !important; }
.mk-cap-item { padding: 4px clamp(12px, 1.6vw, 22px) !important; }
.mk-sig-mark img { width: clamp(140px, 14vw, 178px) !important; height: auto; }

/* ---------- 4. Section headings ------------------------------------ */

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .mk-h-lg-a .elementor-heading-title {
    background-image: linear-gradient(96deg, #062b6f 0%, #013c80 44%, #005b9e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .mk-h-lg-light .elementor-heading-title {
    background-image: none;
    -webkit-text-fill-color: #fff;
  }
}
.mk-h-lg-a .elementor-heading-title::after {
  content: "";
  display: block;
  width: 78px;
  height: 2px;
  margin-top: 17px;
  border-radius: 2px;
  -webkit-text-fill-color: initial;
  background: linear-gradient(90deg,
    rgba(125, 106, 46, 0) 0%, rgba(125, 106, 46, .85) 26%,
    #a58f4c 50%, rgba(125, 106, 46, .85) 74%, rgba(125, 106, 46, 0) 100%);
}
.mk-section-head-a .mk-h-lg-a .elementor-heading-title::after {
  margin-left: auto;
  margin-right: auto;
}
.mk-h-lg-light .elementor-heading-title::after {
  background: linear-gradient(90deg,
    rgba(201, 171, 99, 0) 0%, rgba(201, 171, 99, .9) 26%,
    #efdca8 50%, rgba(201, 171, 99, .9) 74%, rgba(201, 171, 99, 0) 100%);
}

/* The eyebrow's 18px tick. The label is inline-flex inside a 26.4px line
   box in the original, which is where its extra height comes from. */
.mk-eyebrow { line-height: 26.4px; }
.mk-eyebrow .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mk-eyebrow .elementor-heading-title::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: #7d6a2e;
}
.mk-section-head-a .mk-eyebrow .elementor-heading-title { justify-content: center; }

/* ---------- 5. Story rows ------------------------------------------ */

.mk-story-photo { overflow: hidden; }
.mk-story-photo .elementor-widget-image,
.mk-story-photo .elementor-widget-container,
.mk-story-photo figure { margin: 0; line-height: 0; }
.mk-story-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.mk-story-photo { box-shadow: 0 8px 24px -10px rgba(13, 31, 66, .18); }
.mk-story-lede p { text-wrap: pretty; }
.mk-sig-block { line-height: 0; }
.mk-sig-mark .elementor-widget-container { line-height: 0; }

/* ---------- 6. Capability row -------------------------------------- */

.mk-cap-item, .mk-cap-item .elementor-widget { text-align: center; }
/* Elementor renders the icon inline-block, so the surrounding line box adds
   descender space the original's inline-flex span does not have. */
.mk-cap-ico, .mk-step-ico { line-height: 0; }
.mk-cap-ico .elementor-icon, .mk-step-ico .elementor-icon { display: block; margin: 0 auto; }
/* The hairline between columns is a 1px gradient, faded at both ends. */
.mk-capability-row > .e-con + .e-con {
  background-image: linear-gradient(180deg,
    transparent 0%, rgba(201, 171, 99, .5) 22%,
    rgba(201, 171, 99, .5) 78%, transparent 100%);
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: left center;
}
.mk-cap-item { border-radius: 10px; transition: transform .15s ease; }
.mk-cap-item:hover { transform: translateY(-3px); }
.mk-cap-item:hover .mk-cap-h .elementor-heading-title { color: #7d6a2e; }

/* ---------- 7. Approach steps -------------------------------------- */

.mk-step-item, .mk-step-item .elementor-widget { text-align: center; }
.mk-step-art {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 1px solid #007cc2;
  background: #fff;
  overflow: visible;
}
.mk-step-art .mk-step-ico { line-height: 0; }
.mk-step-num {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #062b6f;
  background-image: linear-gradient(140deg, #082f78 0%, #013c80 55%, #005b9e 100%);
  border: 1px solid rgba(201, 171, 99, .6);
  box-shadow: 0 0 0 4px rgba(201, 171, 99, .1);
  z-index: 2;
}
.mk-step-num .elementor-heading-title { color: #fff; }

/* The gold thread that links one step to the next. */
.mk-approach-row > .e-con { position: relative; }
.mk-approach-row > .e-con + .e-con::before {
  content: "";
  position: absolute;
  top: 39px;
  right: calc(50% + 46px);
  left: calc(-50% + 46px);
  height: 1px;
  background: #007cc2;
  opacity: .5;
}

/* ---------- 8. Service area ---------------------------------------- */

.mk-serve-map { overflow: hidden; }
.mk-serve-map .elementor-widget-container { line-height: 0; }
.mk-serve-map iframe {
  display: block;
  width: 100%;
  min-height: clamp(230px, 26vw, 300px);
  border: 0;
  border-radius: 30px;
  box-shadow: 0 36px 110px 0 rgba(20, 30, 60, .16);
}
.mk-serve-list ul { margin: 0; padding: 0; }
.mk-serve-list .elementor-icon-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  /* !important because Elementor writes its own padding-bottom on every
     item but the last, from the list's "space between" control. */
  padding: 6px 0 !important;
}
.mk-serve-list .elementor-icon-list-item::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: #005b9e;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mk-serve-list .elementor-icon-list-icon { display: none; }

/* ---------- 9. Closing card ---------------------------------------- */

.mk-closing-card {
  position: relative;
  overflow: hidden;
  background-color: #062b6f !important;
  background-image: linear-gradient(150deg,
    #06265f 0%, #062b6f 22%, #082f78 48%, #004e8e 72%, #013c80 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(201, 171, 99, .34);
}
/* The faint drifting ledger grid behind the copy. */
.mk-closing-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 63.5H64M63.5 0V64' stroke='%239ec5e8' stroke-width='1' opacity='0.20'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(160deg, rgba(0,0,0,.85), rgba(0,0,0,.25) 62%, transparent);
          mask-image: linear-gradient(160deg, rgba(0,0,0,.85), rgba(0,0,0,.25) 62%, transparent);
}
.mk-closing-photo, .mk-closing-copy { position: relative; z-index: 1; }

/* ---------- 10. Responsive ------------------------------------------ */

@media (max-width: 1040px) {
  .mk-serve-grid > .e-con:first-child { flex: 1 1 100% !important; width: 100% !important; }
  .mk-capability-row > .e-con { flex: 1 1 calc(50% - 1px) !important; }
  .mk-capability-row > .e-con:nth-child(odd) { background-image: none; }
  .mk-approach-row > .e-con { flex: 1 1 50% !important; }
  .mk-approach-row > .e-con + .e-con::before { display: none; }
}

@media (max-width: 860px) {
  .mk-about-hero { padding-top: clamp(76px, 14vw, 110px) !important; }
  /* below the split the photograph fills the whole band behind the copy */
  .mk-ah-photo { inset: 0; width: 100% !important; }
  .mk-ah-photo::after {
    background: linear-gradient(180deg, rgba(4, 22, 52, .9), rgba(4, 22, 52, .82));
  }
  .mk-ah-copy { max-width: none; }
  .mk-story-grid, .mk-serve-grid { gap: 28px !important; }
  .mk-story-grid > .e-con, .mk-serve-grid > .e-con {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  /* the flipped row puts the photograph back under the copy on mobile */
  .mk-story-grid-flip > .mk-story-photo-flip { order: 2; }
  .mk-serve-list-col { width: 100% !important; }
}

@media (max-width: 620px) {
  .mk-capability-row > .e-con { flex: 1 1 100% !important; background-image: none; }
  .mk-approach-row > .e-con { flex: 1 1 100% !important; }
  .mk-closing-card { flex-wrap: wrap; }
  .mk-closing-card > .e-con { flex: 1 1 100% !important; width: 100% !important; }
  .mk-closing-photo { min-height: 200px; }
  .mk-closing-copy { padding: 32px 24px !important; }
  .mk-cta-actions .elementor-widget-button,
  .mk-cta-actions .elementor-button { width: 100%; justify-content: center; }
}