/* ==========================================================================
   UI Pro — interface layer, loaded last.

   Rebuilt on the editorial-consultancy model measured from the reference:
   near-sharp corners, tight display tracking, no shadows, one decisive
   easing curve. The green palette is unchanged; what changes is precision.

   Reference: radius 2px, display 60px/500/-1.8px, body 16px/400,
   motion 0.55s cubic-bezier(0.85, 0, 0, 1), scale + translate not just fade.
   ========================================================================== */

:root {
  --mi-ease: cubic-bezier(0.85, 0, 0, 1);
  --mi-slow: 0.55s;
  --mi-med:  0.35s;
  --mi-fast: 0.2s;

  --mi-radius:       2px;
  --mi-radius-panel: 2px;
  --mi-radius-media: 2px;
  --mi-radius-sm:    2px;

  --mi-ink:  #0B0B0B;
  --mi-rule: #E2E6E3;
  --mi-mute: #55605A;
}

.mi-dark {
  --mi-rule: rgba(255, 255, 255, 0.22);
  --mi-mute: #B9CCC0;
}

/* ---------- typography: tighter, more confident ---------- */

.mi-display, .mi-hero__title, .mi-pagehead__title, .mi-cta__title {
  letter-spacing: -0.035em;
  line-height: 1.03;
  font-weight: 500;
}

.mi-h2, .mi-pillar__title, .mi-plat__name, .mi-proc__name,
.mi-path__title, .mi-ins__title, .mi-ind__name, .mi-feature__copy h2 {
  letter-spacing: -0.028em;
  line-height: 1.08;
  font-weight: 500;
}

.mi-body { font-size: var(--mi-body); line-height: 1.65; }

.mi-label, .mi-pillar__label, .mi-pagehead__label {
  font-size: var(--mi-small);
  letter-spacing: 0.16em;
  font-weight: 500;
}

/* ---------- buttons: sharp, with a travelling underline ---------- */

.mi-btn {
  position: relative;
  border-radius: var(--mi-radius);
  padding: 1.05em 2em;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  overflow: visible;
  transition: background-color var(--mi-med) var(--mi-ease),
              color var(--mi-med) var(--mi-ease),
              transform var(--mi-med) var(--mi-ease);
}
.mi-btn:hover { transform: translateY(-2px); }

/* The arrow returns, and it moves. */
.mi-btn__arrow {
  display: inline-block;
  transition: transform var(--mi-slow) var(--mi-ease);
}
.mi-btn:hover .mi-btn__arrow { transform: translateX(6px); }

.mi-btn--ghost {
  border-color: var(--mi-ink);
  background: transparent;
  color: var(--mi-ink);
}
.mi-btn--ghost:hover { background: var(--mi-ink); color: #FFFFFF; }
.mi-dark .mi-btn--ghost { border-color: rgba(255,255,255,.5); color: #FFFFFF; }
.mi-dark .mi-btn--ghost:hover { background: #FFFFFF; color: var(--mi-charcoal); }

/* ---------- nav: underline that wipes in from the left ---------- */

.mi-nav__links a::after {
  height: 2px;
  bottom: -7px;
  transition: transform var(--mi-slow) var(--mi-ease);
}
.mi-nav__logo { border-radius: var(--mi-radius-sm); }

/* ---------- media: sharp, and it scales on hover ---------- */

.mi-feature__shot,
.mi-hero__media,
.mi-why__media { border-radius: var(--mi-radius-media); overflow: hidden; }

.mi-feature__shot img,
.mi-hero__media img {
  transition: transform 0.9s var(--mi-ease);
  will-change: transform;
}
@media (hover: hover) {
  .mi-feature__shot:hover img,
  .mi-hero__media:hover img { transform: scale(1.04); }
}

/* ---------- panels: hairline, no shadow, accent edge on hover ---------- */

.mi-pillar, .mi-plat__row, .mi-impact__cell, .mi-ind__cell, .mi-proc__step,
.mi-proc__card, .mi-svc__row, .mi-ins__row, .mi-path {
  border-radius: var(--mi-radius-panel);
  box-shadow: none;
  transition: background-color var(--mi-med) var(--mi-ease),
              border-color var(--mi-med) var(--mi-ease),
              transform var(--mi-med) var(--mi-ease);
}

/* A rule that grows along the leading edge, rather than a tint wash. */
.mi-svc__row, .mi-ins__row, .mi-path, .mi-pillar {
  position: relative;
}
.mi-svc__row::before, .mi-ins__row::before, .mi-path::before, .mi-pillar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--mi-bronze);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--mi-slow) var(--mi-ease);
}
@media (hover: hover) {
  .mi-svc__row:hover::before, .mi-ins__row:hover::before,
  .mi-path:hover::before, .mi-pillar:hover::before { transform: scaleY(1); }
}

/* ---------- inputs: underline, not boxes ---------- */

.mi-field input, .mi-field textarea {
  border-radius: var(--mi-radius-sm);
  border-color: var(--mi-rule);
  transition: border-color var(--mi-med) var(--mi-ease),
              box-shadow var(--mi-med) var(--mi-ease);
}
.mi-field input:focus, .mi-field textarea:focus {
  box-shadow: 0 0 0 2px var(--mi-olive);
}

.mi-news__form input { border-radius: var(--mi-radius-sm); }
.mi-social__link { border-radius: var(--mi-radius-sm); }

/* ---------- reveals: shorter travel, the signature curve ---------- */

.mi-js .mi-reveal {
  transform: translateY(20px);
  transition: opacity var(--mi-slow) var(--mi-ease),
              transform var(--mi-slow) var(--mi-ease);
}
.mi-js .mi-line > span { transition: transform var(--mi-slow) var(--mi-ease); }

/* ---------- focus: visible and sharp ---------- */

a:focus-visible, button:focus-visible, .mi-btn:focus-visible {
  outline: 2px solid var(--mi-bronze);
  outline-offset: 3px;
  border-radius: var(--mi-radius-sm);
}

/* ---------- footer wordmark: centred ---------- */
.mi-foot__mark {
  text-align: center;
  white-space: nowrap;
  margin-inline: auto;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .mi-btn:hover { transform: none; }
  .mi-feature__shot:hover img, .mi-hero__media:hover img { transform: none; }
  .mi-svc__row::before, .mi-ins__row::before,
  .mi-path::before, .mi-pillar::before { transition: none; }
}


/* ---------- footer: the oversized wordmark sits flush ----------
   The section's own bottom padding left 44px of empty space under the
   mark. Zero it here rather than in the shared .mi-section rule, which
   every other section still needs. */
.mi-section.mi-foot { padding-bottom: 0; }
.mi-foot__mark { margin-bottom: 0; }

/* Social icons in the footer. The default hover paints a pale green
   ground and a pale green glyph, which all but disappears against the
   dark footer, so the dark ground gets its own inverted treatment. */
.mi-foot__col .mi-social { margin-top: var(--mi-md); }
.mi-dark .mi-social__link:hover,
.mi-dark .mi-social__link:focus-visible {
  background: #FFFFFF;
  color: #044D28;
  border-color: transparent;
}


/* ---------- scrolling ----------
   Anchor jumps ease instead of snapping, and land clear of the fixed
   header rather than underneath it. The wheel itself is left alone --
   accenture.com does the same, and hijacking it costs more than it
   gains on trackpads and for anyone using find-on-page. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 142px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* The page heading shares its grid row with the intro block beside it.
   That block is taller, so the heading was sinking to the bottom of the
   row and landing ~60px lower than the copy next to it. */
.mi-pagehead__title { align-self: start; }


/* ---------- long-form pages ----------
   The privacy policy and the job posting are written in plain WordPress
   blocks, so their paragraphs never carried .mi-body and were left at the
   theme's 16px while everything else moved to 18px. Give core content the
   same reading size, and a measure that keeps lines comfortable. */
.wp-block-group p,
.wp-block-group li {
  font-size: var(--mi-body);
  line-height: 1.65;
}

.wp-block-group li + li { margin-top: 0.45em; }

/* Headings in long-form content, sized against the same scale. */
.wp-block-group h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.08;
  margin: 2em 0 0.5em;
}

.wp-block-group h3 {
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.2;
  margin: 1.7em 0 0.45em;
}

.wp-block-group h2:first-child,
.wp-block-group h3:first-child { margin-top: 0; }

/* The apply button is a raw anchor, so it needs the inline-flex the
   block buttons get from their wrapper. */
.wp-block-group a.mi-btn { display: inline-flex; margin: 0.6em 0 1.2em; }

/* WordPress emits the constrained-layout width as an inline style in the
   page head. Pin the measure here as well, so long-form pages keep a
   readable line length even if that inline style is absent. */
section.wp-block-group {
  box-sizing: border-box;
  max-width: 736px;
  margin-inline: auto;
}

/* The footer's link columns set `ul { flex-direction: column }`, and that
   selector outranks .mi-social__list, so the icon row inherited the
   stacking meant for the text links. Put it back on one line. */
.mi-foot__col .mi-social__list {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Compact reading style, shared by the privacy policy and the job posting:
   one step down from body copy (17px vs 18px) on a tighter rhythm. h2 stays
   larger than h3 so a page with both keeps its hierarchy. */
.mi-compact { font-size: 1.0625rem; line-height: 1.6; color: var(--mi-ink); }
.mi-compact p { margin: 0 0 0.9em; font-size: inherit; line-height: inherit; }
.mi-compact h2 { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.015em;
                 line-height: 1.25; color: var(--mi-ink); margin: 1.5em 0 0.5em; }
.mi-compact h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em;
                 line-height: 1.3; color: var(--mi-ink); margin: 1.85em 0 0.45em; }
.mi-compact > *:first-child { margin-top: 0; }
.mi-compact ul, .mi-compact ol { margin: 0 0 0.9em; padding-left: 1.2rem; }
.mi-compact li { margin-bottom: 0.35em; font-size: inherit; line-height: inherit; }
/* Buttons carry their own colour -- tinting them here put green text on a
   green background and made the label vanish. */
.mi-compact a:not(.mi-btn) { color: var(--mi-accent-ink); }

/* Cards may show a small icon instead of a number. The slot keeps the
   number version untouched, so only opted-in cards change. */
.mi-ind__idx--icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  align-self: flex-start;
  height: calc(clamp(1.05rem, 1.9vw, 1.55rem) * 1.08);
}
.mi-ico { width: 30px; height: 30px; flex: none; display: block; color: var(--mi-accent-ink); }

/* Blog articles render through the theme post template, so they never picked
   up the site typography -- different face, different sizes, full page width.
   Scoped to .single so the main pages are untouched. */
.single .wp-block-post-content {
  font-family: var(--mi-font);
  font-size: var(--mi-body);
  line-height: 1.65;
  color: var(--mi-ink);
  max-width: 68ch;
  margin-inline: auto;
}
.single .wp-block-post-content p { margin: 0 0 1.15em; font-size: inherit; line-height: inherit; }
.single .wp-block-post-content h2 {
  font-family: var(--mi-font); font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500; letter-spacing: -0.025em; line-height: 1.15;
  color: var(--mi-ink); margin: 2em 0 0.5em;
}
.single .wp-block-post-content h3 {
  font-family: var(--mi-font); font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 600; line-height: 1.3; color: var(--mi-ink); margin: 1.7em 0 0.4em;
}
.single .wp-block-post-content > *:first-child { margin-top: 0; }
.single .wp-block-post-content ul,
.single .wp-block-post-content ol { margin: 0 0 1.15em; padding-left: 1.3rem; }
.single .wp-block-post-content li { margin-bottom: 0.4em; }
.single .wp-block-post-content a:not(.mi-btn) { color: var(--mi-accent-ink); }
.single .wp-block-post-content img { max-width: 100%; height: auto; }
.single .wp-block-post-content hr { margin: 2em 0; border: 0; border-top: 1px solid var(--mi-rule); }

/* The article headline, which the theme centres at its own scale. */
.single .hostinger-ai-page-title,
.single .wp-block-post-title {
  font-family: var(--mi-font); font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 500; letter-spacing: -0.03em; line-height: 1.08;
  text-align: left; max-width: 68ch; margin-inline: auto; color: var(--mi-ink);
}

/* Rounded image corners, matching the designed media slots which already
   use --mi-radius-media. Content images take the smaller panel radius so a
   modest image is not over-rounded.

   .mi-pagehead__media is deliberately excluded: it is absolutely positioned
   to inset 0 and runs the full width of the viewport, so rounding it would
   notch the page edges instead of softening the picture. */
.wp-block-image img,
.wp-block-image figure,
.mi-compact img,
.single .wp-block-post-content img,
.wp-block-post-featured-image img,
.mi-ins__media img,
.mi-ind__cell img {
  border-radius: 28px;
}

/* The large designed slots keep the bigger radius. */
.mi-feature__shot,
.mi-hero__media,
.mi-why__media,
.mi-feature__shot img,
.mi-hero__media img {
  border-radius: 40px;
  overflow: hidden;
}

/* WP Job Manager listings: the plugin renders its own grey styling, which
   sits oddly against the rest of the page. Use the site tokens instead. */
ul.job_listings { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mi-rule); }
ul.job_listings li.job_listing { border-bottom: 1px solid var(--mi-rule); padding: 0; }
ul.job_listings li.job_listing a {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 26px);
  padding: clamp(18px, 2.2vw, 28px) 0;
  text-decoration: none; color: var(--mi-ink);
  font-family: var(--mi-font);
  transition: opacity var(--mi-med) var(--mi-ease);
}
ul.job_listings li.job_listing a:hover { opacity: 0.72; }
ul.job_listings .position { flex: 1 1 auto; }
ul.job_listings .position h3 {
  margin: 0 0 4px; color: var(--mi-ink);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.2; text-transform: none;
}
ul.job_listings .company, ul.job_listings .company strong {
  color: var(--mi-mute); font-weight: 400; font-size: var(--mi-body); font-style: normal;
}
ul.job_listings .location { color: var(--mi-mute); font-size: var(--mi-small); text-align: right; }
ul.job_listings ul.meta { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; align-items: center; }
ul.job_listings ul.meta li { color: var(--mi-mute); font-size: var(--mi-small); font-style: normal; }
ul.job_listings ul.meta li.job-type {
  color: var(--mi-accent-ink); border: 1px solid var(--mi-rule);
  border-radius: 999px; padding: 3px 12px; white-space: nowrap;
}
/* The plugin falls back to a placeholder logo image. */
ul.job_listings img.company_logo { display: none; }

@media (max-width: 640px) {
  ul.job_listings li.job_listing a { flex-wrap: wrap; }
  ul.job_listings .location { text-align: left; width: 100%; }
}