/* Section system v3 — the geometry Elementor's settings cannot express.
 *
 * ADDITIVE, and a file of its own for the same reason enrich.css is: the
 * deployed stylesheets carry corrections made directly on the sites, and
 * copying a freshly built file over them would silently discard that work.
 *
 * WHAT IS HERE AND WHY IT IS NOT IN THE DOCUMENT
 *
 * Column ratios. An Elementor child container resolves to `width: 100%` with
 * `--flex-basis: auto`, so two "growing" halves each ask for the whole row and
 * `flex-wrap: wrap` gives each its own line. `flex: <grow> 1 0` is what turns
 * the grow numbers into a ratio, and a container registers only align_self,
 * order, size, grow and shrink -- a `_flex_basis` key is stored and ignored.
 * This repository has now learned that in four separate places.
 *
 * Everything else here is a height, a hover, or an offset panel, none of which
 * a container setting reaches either.
 */

.mcl-v3-people,
.mcl-v3-recognition,
.mcl-v3-process,
.mcl-v3-guides,
.mcl-v3-enquiry,
.mcl-v3-official { overflow: hidden; }

/* ------------------------------------------------------- shared type ---- */

.mcl-v3-h2 .elementor-heading-title { line-height: 1.13; letter-spacing: -0.035em; }

/*
 * RETROFIT TYPE FOR THE HEADINGS THAT WERE ALREADY ON THE LIVE PAGES.
 *
 * The migration reuses the existing people/recognition/process/guides/enquiry
 * blocks and keeps every node id, which is the whole point of it -- but those
 * headings are old widgets reading the brand's GLOBAL h2 token. That token
 * measures 44px desktop and 30px MOBILE, and the specification's mobile band
 * is 32-34. So a migrated page would match the reference on colour, spacing,
 * imagery and captions, and still be two pixels under on a phone.
 *
 * The global token is not the place to fix it: twelve other brands read it,
 * and changing it is gated on "scoped to the pilot and all dependent widgets
 * reviewed". This is scoped instead -- it reaches ONLY headings inside the
 * five v3 bands, which are exactly the containers the migration labelled.
 *
 * SPECIFICITY, because this is the part that decides whether it works at all:
 * Elementor emits a global typography token at
 *   .elementor-NNN .elementor-element.elementor-element-<id> .elementor-heading-title
 * which is four classes. A two-class plugin rule loses to it silently, and
 * this repository has already shipped that mistake once. The selector below
 * is five, so it wins.
 *
 * There is NO `.elementor-widget-container` in the selector, and that is the
 * measured reason this rule works: Elementor's optimised DOM output drops that
 * wrapper, so the heading is a direct child of the widget element. Requiring
 * it made the whole block match nothing, silently, at full specificity -- the
 * rule was in the stylesheet and the probe still rendered 30px.
 *
 * `:not(.mcl-v3-h2)` is what keeps the NEW sections editable. A heading
 * built by the v3 templates carries its type in its own widget settings, where
 * it is a control in the editor; this rule steps aside for those and applies
 * only to the retrofitted ones. When the live heading ids are known, the
 * honest upgrade is to move these four numbers onto those widgets too, and
 * the rule then matches nothing.
 */
.mcl-v3-people   .elementor-widget-heading:not(.mcl-v3-h2):not(.mcl-v3-h3):not(.mcl-v3-eyebrow) h2.elementor-heading-title,
.mcl-v3-recognition .elementor-widget-heading:not(.mcl-v3-h2):not(.mcl-v3-h3):not(.mcl-v3-eyebrow) h2.elementor-heading-title,
.mcl-v3-process  .elementor-widget-heading:not(.mcl-v3-h2):not(.mcl-v3-h3):not(.mcl-v3-eyebrow) h2.elementor-heading-title,
.mcl-v3-guides   .elementor-widget-heading:not(.mcl-v3-h2):not(.mcl-v3-h3):not(.mcl-v3-eyebrow) h2.elementor-heading-title,
.mcl-v3-enquiry  .elementor-widget-heading:not(.mcl-v3-h2):not(.mcl-v3-h3):not(.mcl-v3-eyebrow) h2.elementor-heading-title {
  font-size: 44px;
  line-height: 1.13;
  letter-spacing: -0.035em;
}

@media (max-width: 1024px) {
  .mcl-v3-people   .elementor-widget-heading:not(.mcl-v3-h2):not(.mcl-v3-h3):not(.mcl-v3-eyebrow) h2.elementor-heading-title,
  .mcl-v3-recognition .elementor-widget-heading:not(.mcl-v3-h2):not(.mcl-v3-h3):not(.mcl-v3-eyebrow) h2.elementor-heading-title,
  .mcl-v3-process  .elementor-widget-heading:not(.mcl-v3-h2):not(.mcl-v3-h3):not(.mcl-v3-eyebrow) h2.elementor-heading-title,
  .mcl-v3-guides   .elementor-widget-heading:not(.mcl-v3-h2):not(.mcl-v3-h3):not(.mcl-v3-eyebrow) h2.elementor-heading-title,
  .mcl-v3-enquiry  .elementor-widget-heading:not(.mcl-v3-h2):not(.mcl-v3-h3):not(.mcl-v3-eyebrow) h2.elementor-heading-title {
    font-size: 38px;
  }
}

@media (max-width: 767px) {
  .mcl-v3-people   .elementor-widget-heading:not(.mcl-v3-h2):not(.mcl-v3-h3):not(.mcl-v3-eyebrow) h2.elementor-heading-title,
  .mcl-v3-recognition .elementor-widget-heading:not(.mcl-v3-h2):not(.mcl-v3-h3):not(.mcl-v3-eyebrow) h2.elementor-heading-title,
  .mcl-v3-process  .elementor-widget-heading:not(.mcl-v3-h2):not(.mcl-v3-h3):not(.mcl-v3-eyebrow) h2.elementor-heading-title,
  .mcl-v3-guides   .elementor-widget-heading:not(.mcl-v3-h2):not(.mcl-v3-h3):not(.mcl-v3-eyebrow) h2.elementor-heading-title,
  .mcl-v3-enquiry  .elementor-widget-heading:not(.mcl-v3-h2):not(.mcl-v3-h3):not(.mcl-v3-eyebrow) h2.elementor-heading-title {
    font-size: 34px;
  }
}
.mcl-v3-h3 .elementor-heading-title { font-size: 25px; line-height: 1.22; }
.mcl-v3-text p { margin: 0; max-width: 58ch; line-height: 1.65; }

/* The eyebrow's rule. A pseudo-element, so the widget stays a plain Heading
   that somebody can retype without inheriting a decoration they cannot see. */
.mcl-v3-eyebrow .elementor-heading-title {
  display: flex;
  align-items: center;
  gap: 14px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.mcl-v3-eyebrow .elementor-heading-title::before {
  content: '';
  width: 30px;
  height: 1px;
  background: currentColor;
  opacity: 0.85;
  flex: none;
}

/* A text link is a Button widget with no fill; the arrow moves on hover. */
.mcl-v3-link .elementor-button { background: transparent; }
.mcl-v3-link .elementor-button-icon { transition: transform 0.2s ease; }
.mcl-v3-link .elementor-button:hover .elementor-button-icon { transform: translateX(4px); }
.mcl-v3-button .elementor-button { transition: transform 0.2s ease, background-color 0.2s ease; }
.mcl-v3-button .elementor-button:hover { transform: translateY(-2px); }

/* ------------------------------------------------------------ 1. people -- */

.mcl-v3-people__grid > .mcl-v3-people__figure { flex: 1.15 1 0; min-width: 0; }
.mcl-v3-people__grid > .mcl-v3-people__copy   { flex: 1 1 0; min-width: 0; }

/*
 * The sage panel behind the photograph, offset down and right.
 *
 * A pseudo-element on the cell rather than a second container: an empty
 * container with no id is exactly what check-slot-contract.mjs is built to
 * complain about, and rightly -- a decoration is not a slot.
 */
/*
 * THE OFFSET PADDING IS ON THE PHOTOGRAPH, NOT ON THE COLUMN.
 *
 * It was on both. An Elementor container is border-box with `flex-basis: 0`,
 * so 18px of padding on the column is 18px ADDED to its share of the row --
 * and the split measured 1.19:1 against the reference's 1.15:1. A ratio the
 * specification states is not a place to be four per cent out because a
 * decoration needed somewhere to hang.
 *
 * The column is now exactly its flex share; the panel lives inside it.
 */
.mcl-v3-people__figure { position: relative; }
.mcl-v3-people__photo { position: relative; padding: 0 18px 18px 0; }

/*
 * THE PANEL HANGS OFF THE PHOTOGRAPH, NOT OFF ITS CELL.
 *
 * On a fresh build the figure cell exists and either selector works. On a page
 * that is being RETROFITTED there is an image widget with a known id and no
 * cell anybody has recorded -- so asking for the cell's id would have held up
 * the whole migration for one decoration. The widget carries it instead, which
 * needs nothing but the class going onto the widget that is already there.
 */
.mcl-v3-people__photo::after {
  content: '';
  position: absolute;
  inset: 24px 0 0 24px;
  background: var(--mcl-v3-sage, #e9efee);
  z-index: 0;
}
.mcl-v3-people__photo > .elementor-widget-container,
.mcl-v3-people__photo img { position: relative; z-index: 1; }
/* Natural aspect ratio, and no clipped heads: this is a photograph of people. */
.mcl-v3-people__photo img { width: 100%; height: auto; border-radius: 3px; }

/* ------------------------------------------------------- 2. recognition -- */

.mcl-v3-recognition__top > .mcl-v3-recognition__title { flex: 1.6 1 0; min-width: 0; }
.mcl-v3-recognition__top > .mcl-v3-recognition__intro { flex: 1 1 0; min-width: 0; }
.mcl-v3-recognition__intro p { max-width: 34ch; }

.mcl-v3-recognition__grid > .mcl-v3-recognition__awards { flex: 1.3 1 0; min-width: 0; }
.mcl-v3-recognition__grid > .mcl-v3-recognition__event  { flex: 1 1 0; min-width: 0; }

/*
 * NO PANEL BEHIND THE AWARDS. This is the defect being fixed.
 *
 * The artwork is RGBA with 1,177,704 fully transparent pixels. The white a
 * reader used to see was not a container background anybody could switch off:
 * build-enrichment-images.py flattened every RGBA original onto white, so it
 * was IN THE PIXELS of every derivative the sites loaded. That is fixed in the
 * builder and guarded by check-image-alpha.mjs; this side just declines to put
 * a box back.
 */
.mcl-v3-recognition__awards { background: transparent; }
.mcl-v3-awards img {
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
}
/* The event photograph is a photograph and is cropped to a band. */
.mcl-v3-event img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center 42%;
  border-radius: 5px;
}

/* ----------------------------------------------------------- 3. process -- */

.mcl-v3-process__head > .mcl-v3-process__title { flex: 1 1 0; min-width: 0; }
.mcl-v3-process__head > .mcl-v3-process__lead   { flex: 1 1 0; min-width: 0; }
.mcl-v3-process__steps > .mcl-v3-step { flex: 1 1 0; min-width: 0; }
/* A light separator, not a card. The complaint was boxes. */
.mcl-v3-step {
  border-top: 1px solid var(--mcl-v3-step-rule, #bacdc4);
  padding-top: 24px;
}
.mcl-v3-step__num .elementor-heading-title { letter-spacing: 0.06em; }
.mcl-v3-step .mcl-v3-text p { max-width: 32ch; }

/* ------------------------------------------------------------ 4. guides -- */

.mcl-v3-guides__head > .mcl-v3-guides__title { flex: 2 1 0; min-width: 0; }
.mcl-v3-guides__head > .mcl-v3-guides__more  { flex: 1 1 0; min-width: 0; align-items: flex-end; }
.mcl-v3-guides__cards > .mcl-v3-card { flex: 1 1 0; min-width: 0; }

.mcl-v3-card__window { overflow: hidden; border-radius: 3px; }
.mcl-v3-card__img img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.mcl-v3-card:hover .mcl-v3-card__img img { transform: scale(1.025); }
.mcl-v3-card__meta p { margin: 0; text-transform: uppercase; letter-spacing: 0.13em; }

/*
 * A CARD WITH NO PICTURE, made to look deliberate.
 *
 * One of the three guides is illustrated in the prototype with a file that was
 * supplied as an image inside a message rather than as bytes on disk. Reaching
 * for one of the other two illustrations would put a pathway or the harbour on
 * an article about evidence, and it would look intentional. So that column
 * gets a rule where the picture goes, and becomes a picture the day the file
 * arrives.
 */
.mcl-v3-card--text { padding-top: 24px; border-top: 1px solid var(--mcl-v3-rule, #d8dfda); }

/* ----------------------------------------------------------- 5. enquiry -- */

.mcl-v3-enquiry__grid > .mcl-v3-enquiry__copy   { flex: 2 1 0; min-width: 0; }
.mcl-v3-enquiry__grid > .mcl-v3-enquiry__action { flex: 1 1 0; min-width: 0; align-items: flex-end; }

/* ---------------------------------------------------------- 6. official -- */

.mcl-v3-official__links p { margin: 0; }
.mcl-v3-official__links a {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: inherit;
}
.mcl-v3-official__links a:hover { text-decoration-thickness: 2px; }

/* -------------------------------------------------------------- tablet --- */

@media (max-width: 1024px) {
  .mcl-v3-event img { height: 220px; }
  .mcl-v3-card__img img { height: 200px; }
}

/* --------------------------------------------------------------- phone --- */

@media (max-width: 767px) {
  /* Every split stacks. The shorthand above set a basis of 0, and that does
     not stop being true on a phone just because Elementor sets --width: 100%
     at this breakpoint, so the basis is given back. */
  .mcl-v3-people__grid > .elementor-element,
  .mcl-v3-recognition__top > .elementor-element,
  .mcl-v3-recognition__grid > .elementor-element,
  .mcl-v3-process__head > .elementor-element,
  .mcl-v3-process__steps > .elementor-element,
  .mcl-v3-guides__head > .elementor-element,
  .mcl-v3-guides__cards > .elementor-element,
  .mcl-v3-enquiry__grid > .elementor-element { flex: 1 1 100%; }

  /* THE COPY COMES FIRST. A reader who has landed on a page is looking for
     the words, not for the photograph. */
  .mcl-v3-people__copy { order: -1; }
  .mcl-v3-people__figure { margin-top: 32px; }
  .mcl-v3-people__photo { padding: 0 12px 12px 0; }
  .mcl-v3-people__photo::after { inset: 16px 0 0 16px; }

  /* The award artwork keeps its own height on a phone rather than being
     cropped to a band: it is lettering, and cropping lettering loses words. */
  .mcl-v3-event img { height: auto; }
  .mcl-v3-card__img img { height: 220px; }
  .mcl-v3-guides__more,
  .mcl-v3-enquiry__action { align-items: flex-start; }
  .mcl-v3-official__row { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------ reduced motion --- */

/*
 * Doubled selectors, deliberately. Elementor writes per-element CSS at a
 * higher specificity than a single class, and a person who has asked their
 * operating system to stop moving things has asked for that and not for a
 * negotiation.
 */
@media (prefers-reduced-motion: reduce) {
  .mcl-v3-link .elementor-button .elementor-button-icon,
  .mcl-v3-button .elementor-button.elementor-button,
  .mcl-v3-card .mcl-v3-card__img img {
    transition: none !important;
    transform: none !important;
  }
}

/* ------------------------------------------------- links on the dark bands --
 *
 * THE ONE THING A NATIVE COLOUR SETTING CANNOT REACH.
 *
 * Elementor's Text Editor has a Text Color control and no link control, so the
 * migration's `text_color` recolours the sentence and leaves the link on the
 * theme's global link colour. Measured on the migrated page: the sentence
 * readable on the new ink and the link at 2.89:1 -- the only thing in it
 * anyone is meant to click.
 *
 * The colours are chosen per brand against the band each one actually sits on,
 * so a brand whose accent is lighter gets a different answer rather than the
 * pilot's. The underline is not decoration either: on a dark band a link told
 * apart by colour alone is the weakest possible signal, and WCAG 1.4.1 is
 * about exactly that.
 *
 * `:not(.elementor-button)` keeps buttons out of it -- they carry their own
 * background and their own contrast.
 */
.mcl-v3-recognition a:not(.elementor-button),
.mcl-v3-recognition .elementor-heading-title a {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.mcl-v3-enquiry a:not(.elementor-button),
.mcl-v3-enquiry .elementor-heading-title a {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/*
 * THE RESOURCES BLOCK NO LONGER KNOWS WHAT COLOUR IT IS ON.
 *
 * This said "the footer resources block is on the darkest band of the three"
 * and painted every link #FFFFFF to suit it. That band can now be
 * light -- Lawyers of Sydney puts it on sage -- and the same rule then paints
 * a near-white link on a near-white ground. Invisible links are the third
 * variant of this fault this repository has shipped.
 *
 * So the colour is not stated here at all. The builder picks the paragraph's
 * text colour against the band's ACTUAL background and measures it, the links
 * inherit that, and one decision covers both grounds. Hover changes the
 * underline rather than the colour, because a thicker line reads on any
 * ground and a fixed hover colour is the same mistake one state later.
 */
.mcl-v3-official a:not(.elementor-button) {
  color: inherit;
  text-underline-offset: 0.18em;
}

/* ------------------------------------- the awards card, inside a v3 band --
 *
 * enrich.css paints .mcl-enrich-recog-card--awards white with a border,
 * and it is right to: that card was designed as artwork on a light page. In a
 * v3 recognition band the ground is the brand's ink and the artwork's own
 * alpha is the point, so the same card has to stop being a box.
 *
 * Clearing the container's background setting to "" does NOT do this. Elementor
 * emits nothing for an empty value, so the stylesheet keeps winning -- which is
 * how a white box outlived the alpha asset, the container setting and the first
 * public look at the page. The native plan now sets an explicit #FFFFFF00,
 * which emits a per-element rule that outranks this one.
 *
 * This is the same correction for every brand whose native plan has not run
 * yet, and it is scoped to a v3 recognition band so the card keeps its white
 * treatment everywhere else. enrich.css is not edited: it carries corrections
 * made directly on deployed sites.
 */
.mcl-v3-recognition .mcl-enrich-recog-card--awards,
.mcl-v3-recognition .mcl-v3-recognition__awards,
.mcl-v3-recognition .mcl-v3-awards {
  background: transparent;
  border: 0;
  padding: 0;
}

/* ------------------------------- Home 90's guide images, edge to edge -----
 *
 * THE 56px WHITE STRIP, AND WHY THE OBVIOUS FIX IS A NO-OP.
 *
 * Home 90's three guide cards hold their picture as a DIRECT child of the card,
 * and the card carries 28px of padding on all four sides. The applied plan gave
 * each image widget `_margin: -28px -28px 0`, which moved it flush to the left
 * and top edges -- and left a 56px white strip down the right, because the
 * widget's WIDTH never changed. Measured on the live page: card 323.828 and
 * image 267.828 at 768, card 341.09 and image 285.09 at 1280. 267.828 is the
 * card's inner width exactly.
 *
 * Elementor puts `max-width: 100%` on a widget inside a flex container. That is
 * the whole defect. A stretched flex item with -28px side margins resolves its
 * margin box to the container's content width, so the content box WANTS to be
 * 56px wider -- and max-width clamps it back to 100% of the same 267.828.
 *
 * That is not inferred. Computed styles read off the anonymous public page:
 * widget 55561e2 width 285.094, MAX-WIDTH 100%, align-self auto, flex-shrink 1,
 * flex-basis auto, margin -28px -28px 0, padding 0; its direct parent, card
 * 63d781d (e-con-full e-flex e-con e-child), width 341.094, padding 28px,
 * max-width NONE. 341.094 - 56 = 285.094, so the widget is sitting at exactly
 * the clamp. e-con-full means no .e-con-inner between them: the widget is a
 * direct .e-con child, which is the selector Elementor's clamp uses.
 *
 * Which means `width: calc(100% + 56px)` ON ITS OWN CHANGES NOTHING. Chromium,
 * at the operator's own 768 numbers: as deployed 267.813 with a 56px strip;
 * with the calc width added and nothing else, 267.813 with a 56px strip. It
 * would have been stored, reported, and invisible -- the same shape of mistake
 * as writing a colour under a global binding. So max-width is cleared too.
 *
 * AND WHY BOTH DECLARATIONS, WHEN max-width: none ALONE ALSO MEASURES RIGHT.
 *
 * Because it is right for a reason the document does not state. Card 63d781d
 * sets flex_direction but no flex_align_items, and the widget's own align-self
 * reads `auto`, so alignment comes from a parent that never declared one:
 * `align-items` computes to normal and the widget stretches. Clear the clamp
 * and stretch alone does the rest -- today.
 * Give that card an alignment one day -- a perfectly ordinary editor action --
 * and stretch stops applying, width falls back to shrink-to-fit, and the image
 * collapses to its own 230px. Measured: 230px, a 93.8px gap. The explicit width
 * holds at 323.813 under either alignment, so it stays.
 *
 * SCOPED TO THIS DOCUMENT, DELIBERATELY.
 *
 * Library section 282 uses the same .mcl-v3-card__img class and must NOT get
 * this: there the image sits in its own wrapper inside a card with padding 0,
 * already flush, and 56px of added width would overflow the card. The negative
 * margins exist only on Home 90, so the compensation lives only there too.
 *
 * Four classes because Elementor's own rule is three and per-element CSS is
 * three; this has to outrank both without !important.
 *
 * ONE NUMBER, AND WHAT IT IS TIED TO: --mcl-card-bleed mirrors card 63d781d's
 * 28px padding AND the -28px margin on the widget. Those three move together or
 * not at all. The height does not follow: .mcl-v3-card__img img fixes 230px
 * (200 at tablet, 220 on a phone), so widening the picture does not make the
 * card taller and does not shorten the empty strip below the link. That was
 * claimed in the geometry plan's rationale and it was wrong -- a fixed height
 * cannot absorb anything.
 */
.elementor-90 .elementor-widget-image.mcl-v3-img.mcl-v3-card__img {
  --mcl-card-bleed: 28px;
  width: calc(100% + (var(--mcl-card-bleed) * 2));
  max-width: none;
}