/* McPhillips brand tokens + global styles — authoritative, from the latest design. */

/* ---------- Manrope, served from this server ----------
   It used to come from fonts.googleapis.com, which cost two DNS lookups, two TLS
   handshakes and a render-BLOCKING stylesheet on a third-party origin before a
   single word could be painted — measured at 1946ms of the critical path, the
   largest remaining item on the site by a wide margin once the images were dealt
   with. Nothing renders until it resolves, so it delayed every page equally.

   This is the same font: Manrope v20, the VARIABLE file, which covers the whole
   400-800 range the site uses in one download rather than five static weights.
   Latin and latin-ext only — the site is UK construction, and the Cyrillic, Greek
   and Vietnamese subsets Google also offers were never going to be requested.
   40KB for both, against 5 static weights before.

   Manrope is OFL-licensed, so serving it ourselves is within its terms.
   font-display: swap matches what the Google URL asked for, so first paint
   behaves exactly as it did. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --burgundy: #690B16;
  --burgundy-deep: #4E0810;
  --burgundy-tint: #7A1A24;
  --navy: #3D3A40;
  --navy-deep: #2C2A2F;
  --navy-blue: #2F4058; /* McPhillips blue — offset squares behind single-image panels */
  --navy-blue-deep: #22304A; /* hover partner for --navy-blue (consent panel buttons) */
  --brand-grey: #3D3A4F;   /* McPhillips Dark Grey, brand guide 2.5 (RGB 61-58-79): the corporate dark blue-grey */
  --cream: #F9F5EE;
  --cream-warm: #F3EDE3;
  --paper: #FFFFFF;
  --ink: #211F1D;
  --ink-soft: #534E48;
  --ink-mute: #6F6763; /* WCAG AA (>=4.5:1 on cream/paper/cream-warm) for small meta/label text */
  --line: #EBE5DB;
  --line-soft: #F1ECE4;
  --ledger: #3A3733; /* the dark stats panel — one colour; home carried #6b6661 and the services/careers panel #3a3733 for the same component */

  /* One padding for every filled CTA. The templates set their own inline — 17/32,
     17/30, 18/28, 16/24, 15/26, 14/22 — so buttons that sit inches apart were built
     to different measures. The rule that applies these lives in main.css under
     "Button padding"; change the numbers here, not there. */
  --cta-pad-y: 14px;   /* 16/26 until 11.09.26: the filled button was carrying too much weight */
  --cta-pad-x: 22px;

  /* Display headings — Manrope at weight 800 (same family as body). */
  --font-display: 'Manrope', -apple-system, system-ui, sans-serif;
  --font-sans: 'Manrope', -apple-system, system-ui, sans-serif;
  /* Serif accent retired (2026-08-05, perf): the alias now resolves to the sans stack. */
  --font-serif: 'Manrope', -apple-system, system-ui, sans-serif;
  /* Tags / eyebrows / metadata — using the same Manrope as body, tracked-out uppercase. */
  --font-mono: 'Manrope', -apple-system, system-ui, sans-serif;
}

.newsletter-input::placeholder { color: rgba(255,255,255,0.55); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
button { font-family: var(--font-sans); cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }

/* Clickable author byline — name turns burgundy on hover */
.mc-author-link { cursor: pointer; }
.mc-author-link:hover .mc-author-name { color: var(--burgundy-deep); }
/* Clickable category label — underlines on hover */
.mc-cat-link { cursor: pointer; }
.mc-cat-link:hover { text-decoration: underline; }
/* Static-page sidebar menu links */
.mc-legal-link { transition: color 180ms ease; }
.mc-legal-link:hover { color: var(--burgundy-deep) !important; }

/* CSGallery filmstrip — hover affordances (used on case studies + news articles) */
.cs-film-tile img { transition: transform 600ms cubic-bezier(.2,.7,.2,1); }
.cs-film-tile:hover img { transform: scale(1.05); }
.cs-film-tile:hover .cs-film-zoom { opacity: 1 !important; }
.cs-film-tile svg, .cs-film-tile:hover svg { transform: none !important; }
.cs-film-arrow:hover { background: var(--burgundy) !important; color: #fff !important; border-color: var(--burgundy) !important; }
.cs-film-arrow svg, .cs-film-arrow:hover svg { transform: none; }               /* no longer !important: the slide-through animation in main.css has to win on hover */
.cs-film-arrow--prev svg, .cs-film-arrow--prev:hover svg { transform: rotate(180deg); }

/* Global CTA rollover effects */
button, a { transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, opacity 220ms ease, transform 220ms ease, box-shadow 220ms ease; }
button:not(.dc-grip):not(.dc-expand):not(.dc-kebab):not(.dc-menu button):not(.mc-clean-hover):hover { filter: brightness(1.08); }
button[style*="background: var(--burgundy)"]:hover { background: var(--burgundy-deep) !important; }
button[style*="background: rgb(105, 11, 22)"]:hover { background: var(--burgundy-deep) !important; }
/* Consistent burgundy CTA rollover — clearly darker (burgundy-deep), no brightening.
   Covers buttons AND links, with or without a space after the colon in the inline style. */
button[style*="background:var(--burgundy)"]:hover,
a[style*="background:var(--burgundy)"]:hover,
a[style*="background: var(--burgundy)"]:hover,
/* .mcp-btn--burgundy hover now lives in main.css (wipe fill + lift) — a flat
   colour swap here would make the wipe invisible by arriving first. */
.mcp-btn--burgundy:hover { filter: none !important; }
.mc-clean-hover:hover { background: var(--cream) !important; filter: none !important; }
@keyframes mcDropIn { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
button svg, a svg { transition: transform 240ms cubic-bezier(.2,.7,.2,1); }
button:hover svg, a:hover svg { transform: translateX(4px); }
.mc-cta-arrow:hover svg { transform: translateX(6px); }
.mc-cta-back:hover svg { transform: translateX(-6px); }
/* LinkedIn glyphs are logos, not arrows — opt them out of the global hover nudge. */
.mcp-board-card__li:hover svg, .mc-li:hover svg, .mcp-li-btn:hover svg { transform: none !important; }
.mcp-li-btn { transition: background-color 200ms ease; }
.mcp-li-btn:hover { background: var(--burgundy-deep) !important; }
.mc-disc-arrow:hover { background: var(--burgundy) !important; color: #fff !important; border-color: var(--burgundy) !important; }
.mc-disc-arrow { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
.mc-download:hover .mc-disc-arrow { background: var(--burgundy) !important; color: #fff !important; border-color: var(--burgundy) !important; }
.mc-download:hover svg { transform: none !important; }
.mcp-cookiebar__close svg, .mcp-cookiebar__close:hover svg { transform: none !important; }   /* a × that slides right on hover reads as broken */
.mc-disc-banner { transition: background-color 280ms ease, color 280ms ease; cursor: pointer; }
.mc-disc-banner:hover { background: var(--burgundy) !important; color: #fff !important; }

/* Hero entrance — headline lines rise once per page load. The padding/margin pair
   gives descenders room inside the overflow mask (no cut-off letters). The .mc-anim
   class is set by an inline head script on the front end only; without JS the
   headline simply renders in place. */
.mc-hline { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }

/* ---------- Let the browser set the line breaks ----------
   `balance` evens out a multi-line heading so the last line is never a single
   word hanging under two full ones; it never changes the line COUNT, only where
   the breaks fall. `pretty` stops a paragraph ending on an orphan. Both are
   progressive — a browser without them lays out exactly as before — and both
   replace the non-breaking spaces that were being placed by hand, one widow at a
   time, in copy the client will go on editing. The hero h1 is unaffected: its
   lines are authored as separate blocks (.mc-hline) and balance works within
   each. Hub labels and nav items are single-line and unchanged; card titles DO wrap
   inside a narrow column, so .mcp-newscard__title (main.css) opts back to `pretty`. */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, figcaption, blockquote { text-wrap: pretty; }

/* ---------- Cross-page transitions ----------
   One soft crossfade between pages, so a multi-page site reads as one continuous
   thing. Same-origin navigations only; a browser without View Transitions does a
   plain load. The easing is the site's own (the header card, the consent panel,
   the reveals all use it) and the duration sits under the hero entrance, which
   keeps running through it. Off under reduced motion, like every other animation
   on the site. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

.mc-hline__in { display: block; }
html.mc-anim .mc-hline__in { transform: translateY(118%); transition: transform 900ms cubic-bezier(.16, .84, .28, 1); }
html.mc-anim .mc-hline:nth-of-type(2) .mc-hline__in { transition-delay: 110ms; }
html.mc-anim .mc-hline:nth-of-type(3) .mc-hline__in { transition-delay: 220ms; }
html.mc-anim.mc-anim-go .mc-hline__in { transform: translateY(0); }
/* The masthead logo rides the SAME entrance as the headline — see mcp_brand_link().

   It used to have its own: a left-to-right gradient mask that wiped the wordmark out
   of the roundel, on the reasoning that the roundel sits at the left so the mark
   "signs itself". That reads well in isolation and badly in place — the headline
   beside it RISES, so the page opened with two things arriving in two directions at
   once, and the logo looked like a separate event rather than the first beat of the
   same one. Consistency is worth more here than the cleverer gesture.

   There is deliberately no rule below: the logo is wrapped in `.mc-hline`, so it
   inherits the rise, the 900ms and the easing from the block above. Tuning that block
   now moves the mark and the type together, which is the point. */

.mcp-brand { display: inline-block; }
/* The wrapper must not clip the focus ring — .mc-hline is overflow:hidden, so an
   outline drawn on the anchor's own box is the only one that survives. */
.mcp-brand:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }

/* ---------- Keyboard focus, everywhere ----------
   Until September the site had seven bespoke focus rings and left every other
   link, button and field on the browser default — fine in Chrome, faint in
   Safari, and inconsistent between them. One ring, in the brand colour, on
   anything that can take focus. Over photography, on burgundy and navy panels
   and in the footer the ring turns white so it stays visible. :focus-visible,
   not :focus — a mouse click never shows it. The seven bespoke rules are more
   specific and keep winning where they apply. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 3px;
}
.mcp-hero :focus-visible, .mcp-innerhero :focus-visible, footer :focus-visible,
.mcp-cf-apply :focus-visible, .mcp-rail__end:focus-visible, .mcp-navcard:focus-visible,
[style*="background:var(--burgundy)"] :focus-visible, [style*="background:var(--navy"] :focus-visible,
[style*="background:var(--ledger)"] :focus-visible, [style*="background:#0a0a0a"] :focus-visible {
  outline-color: #fff;
}
/* Fields and the checkboxes on the contact form: the inputs are 18×18 by default,
   below the 44px touch floor even with the label as the hit area; 24 with the brand
   accent, and the label (which wraps them) stays the target. */
.mcp-cform input[type="checkbox"] { width: 24px !important; height: 24px !important; flex-shrink: 0; accent-color: var(--burgundy); margin-top: 1px !important; }
/* Breadcrumb links are 19px tall; vertical padding on an inline element widens
   the hit area without moving anything. */
.mcp-breadcrumb a { padding: 13px 0; }   /* 19px text + 26 = 45: the touch floor */
/* The logo link is 30px tall; padding with a cancelling margin gives it 44 without moving anything. */
.mcp-brand { padding: 7px 0; margin: -7px 0; }


@media (prefers-reduced-motion: reduce) {
  html.mc-anim .mc-hline__in { transform: none !important; transition: none !important; }
}

/* Contact map — branded static panel. The embed is inert (no scroll-trap); the
   filter mutes Google's default palette to the site's warm greys. */
.mc-map-frame iframe { pointer-events: none; filter: grayscale(.88) sepia(.22) hue-rotate(-8deg) saturate(1.05) contrast(.92) brightness(1.05); }
.mc-map-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); pointer-events: none; filter: drop-shadow(0 8px 12px rgba(33,31,29,0.35)); }
.mc-map-card { position: absolute; left: 24px; bottom: 24px; background: #fff; box-shadow: 0 18px 36px -14px rgba(33,31,29,0.4); padding: 18px 20px 16px; max-width: 330px; }
.mc-map-card__name { font-weight: 800; font-size: 15px; letter-spacing: -0.2px; color: var(--ink); margin: 0 0 4px; }
.mc-map-card__addr { font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 12px; }
.mc-map-link { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--burgundy); }
.mc-map-link:hover { color: var(--burgundy-deep); }
@media (max-width: 640px) {
  .mc-map-card { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* Case-study before/after slider — drag (or arrow keys on the knob) to compare */
.mc-ba { cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
.mc-ba img { pointer-events: none; }
.mc-ba__rail { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; box-shadow: 0 0 0 0.5px rgba(33,31,29,0.25); transform: translateX(-1px); }
.mc-ba__knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: var(--burgundy); border: 2px solid #fff; color: #fff; display: flex; align-items: center; justify-content: center; cursor: ew-resize; }
.mc-ba__knob:hover { background: var(--burgundy-deep) !important; filter: none !important; }
.mc-ba__knob:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mc-ba__knob svg, .mc-ba__knob:hover svg { transform: none !important; }
.mc-ba__lab { position: absolute; top: 16px; background: rgba(23,16,14,0.72); color: #fff; font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; padding: 7px 12px; }
.mc-ba__lab--l { left: 16px; }
.mc-ba__lab--r { right: 16px; }
@media (max-width: 900px) {
  .mcp-ba-sec { padding: 56px 20px !important; }
  .mc-ba > img { aspect-ratio: 4/3 !important; }
  /* Both labels sat on the same line, 16px in from each edge. On a 346px slider a
     descriptive "before" label leaves an 18px gap to the one opposite, and the two
     read as a single run of text. Diagonally opposite they cannot meet, and the pair
     reads as the two states of one image rather than one caption. */
  .mc-ba__lab { font-size: 10px; padding: 6px 10px; max-width: 60%; }
  .mc-ba__lab--l { top: 12px; left: 12px; }
  .mc-ba__lab--r { top: auto; bottom: 12px; right: 12px; }
}

/* Disciplines carousel — custom horizontal-drag cursor */
.mc-disc-cursor, .mc-disc-cursor * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'><circle cx='28' cy='28' r='26' fill='%235F0D17'/><path d='M16 28h24M22 22l-6 6 6 6M34 22l6 6-6 6' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") 28 28, ew-resize;
}
.mc-social { transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease; }
.mc-social:hover { background: #fff !important; color: var(--navy) !important; border-color: #fff !important; }
.mc-social:hover svg { stroke: var(--navy) !important; transform: none; }

/* The brand marks never travel on hover.
   The rule above — a:hover svg { transform: translateX(4px) } — says "this is going
   somewhere to the right", which is true of an arrow and false of a wordmark. The
   logo is a link to the homepage, so it was inheriting it and sliding 4px sideways
   under the cursor, which reads as a wobble rather than an invitation. This is the
   same exception the chevrons, the slider knob and the social icons already carry. */
.mcp-brandmark, a:hover .mcp-brandmark, button:hover .mcp-brandmark { transform: none !important; }
.mc-li { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
.mc-li:hover { background: var(--burgundy) !important; color: #fff !important; border-color: var(--burgundy) !important; }
.mc-li svg, .mc-li:hover svg { transform: none !important; }
.mc-follow:hover { color: var(--burgundy) !important; }
.mc-follow svg, .mc-follow:hover svg { transform: none !important; }

/* "Our story" pill */
.mc-our-story { transition: background-color 220ms ease, color 220ms ease; }
.mc-our-story:hover { background: var(--burgundy-deep) !important; color: #fff !important; filter: none !important; }

/* ───────── Nav mega-menu ───────── */
.mc-nav-item { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 18px 0; }
/* Descendant, not direct child: this pair wanted `> .mc-nav-chev` while the chevron
   sat inside the <a>, so it matched nothing and the rotation never once fired. The
   chevron now lives in .mc-nav-chevbtn, which is a child of the item, so the selector
   has to reach one level further either way. */
.mc-nav-chevbtn {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; margin: 0;
  color: inherit; font: inherit; line-height: 0;
  cursor: pointer;
  /* Inert on anything with a real pointer — desktop keeps hover, and the button
     neither takes clicks nor adds a tab stop (tabindex="-1" in the markup). */
  pointer-events: none;
}
.mc-nav-item .mc-nav-chev { transition: transform 220ms cubic-bezier(.2,.7,.2,1); opacity: .8; }
.mc-nav-item.is-open .mc-nav-chev { transform: rotate(180deg); }
.mc-nav-item > a { transition: color 180ms ease; }
.mc-nav-item.is-open > a,
.mc-nav-item:focus-within > a { color: var(--burgundy-deep) !important; }

.mc-nav-panel {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, -8px);
  min-width: 320px;
  background: #fff; color: var(--ink);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.28), 0 4px 16px rgba(0,0,0,0.08);
  border-top: 3px solid var(--burgundy);
  opacity: 0; visibility: hidden;
  transition:
    opacity 160ms cubic-bezier(.2,.7,.2,1) 220ms,
    transform 0s linear 380ms,
    visibility 0s linear 380ms;
  z-index: 60;
  padding: 18px 0;
  overflow: hidden;
}
/* The dropdown panels are centred on their nav item (left:50% + translate), so the
   720px mega panel on a right-hand item overhangs the viewport on a narrow desktop.
   They are visibility:hidden until hover — but hidden elements STILL occupy layout,
   so at 1024px the page could be scrolled 24px sideways to reach an invisible menu.
   Clip the horizontal axis on the containers; overflow-y stays visible so the panels
   still drop DOWN. `clip` is the right tool here — `hidden` would force the other
   axis to `auto` and give the nav its own scrollbar. Pre-Safari-16 simply keeps the
   old behaviour, which is a 24px scroll, not a broken menu.
   The STATIC header only. #mcp-stickynav used to be in this list and it broke the
   sticky bar's menus (Sarai, 23.09.26: "struggling to click on the subcategories"):
   the bar is position:fixed and slides in with a transform, and in Chromium a
   transformed layer with overflow-x:clip hit-tests as if clipped on BOTH axes. The
   panel painted in full below the 124px bar but the pointer fell through it to the
   page underneath, so hovering the list counted as leaving the item and the panel
   closed mid-move. A fixed box never widens the page's scroll area, so the bar
   never needed the clip in the first place. */
.mcp-siteheader { overflow-x: clip; overflow-y: visible; }

.mc-nav-panel--mega {
  display: grid;
  grid-template-columns: minmax(340px, 1fr) 300px;
  width: 720px;
  padding: 0;
}
/* .is-open, not :hover, on a pointer device too (14.09.26). The sub-sector list sits in
   the LEFT half of a 720px panel centred on its label, so the natural diagonal from
   "Sectors" down to a sub-sector crosses "Services" on the way — and with :hover that
   swapped the panels mid-move ("the menu is collapsing too quickly"). initMegamenuA11y
   sets the class with hover intent: a neighbour has to be rested on before it takes
   over, and a panel survives a short excursion. :focus-within keeps the keyboard path. */
.mc-nav-item.is-open .mc-nav-panel,
.mc-nav-item:focus-within .mc-nav-panel {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity 200ms cubic-bezier(.2,.7,.2,1), transform 280ms cubic-bezier(.2,.7,.2,1);
}
.mc-nav-panel::before {
  content: ''; position: absolute; left: -32px; right: -32px; top: -22px; height: 22px;
}

/* ───────── Tap to open, where there is no hover ─────────
   A hover-driven mega menu is unusable on a tablet: the chevron used to sit inside
   the link, so tapping "About" just went to /about/ and the panel was unreachable.
   The chevron is its own button now — tap the label to reach the hub page, tap the
   chevron to open the panel. Scoped by CAPABILITY, not width, so no desktop browser
   can ever match this block at any window size. JS adds .is-open (initMegamenuA11y). */
@media (hover: none) {
  .mc-nav-chevbtn { pointer-events: auto; padding: 6px; margin: -6px; }
  /* Kill the hover/focus opening — on touch these fire on tap and fight the toggle. */
  .mc-nav-item:hover .mc-nav-panel,
  .mc-nav-item:focus-within .mc-nav-panel {
    opacity: 0; visibility: hidden; transform: translate(-50%, -8px);
  }
  .mc-nav-item:hover .mc-nav-link,
  .mc-nav-item:focus-within .mc-nav-link { opacity: 0; transform: translateY(6px); }
  .mc-nav-item:hover .mc-nav-chev { transform: none; }
  .mc-nav-item:hover > a,
  .mc-nav-item:focus-within > a { color: inherit !important; }

  .mc-nav-item.is-open .mc-nav-panel {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
    transition: opacity 200ms cubic-bezier(.2,.7,.2,1), transform 280ms cubic-bezier(.2,.7,.2,1);
  }
  .mc-nav-item.is-open .mc-nav-link { opacity: 1; transform: translateY(0); }
  .mc-nav-item.is-open .mc-nav-chev { transform: rotate(180deg); }
  .mc-nav-item.is-open > a { color: var(--burgundy-deep) !important; }
}

.mc-nav-panel__list { padding: 14px 0 18px 0; background: #fff; }
.mc-nav-panel--mega .mc-nav-panel__list { padding: 22px 0 22px 0; }
.mc-nav-panel__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 600;
  padding: 0 28px 16px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 8px;
}

.mc-nav-link {
  position: relative; display: block; padding: 13px 28px;
  font-family: var(--font-sans); color: var(--ink);
  text-decoration: none;
  opacity: 0; transform: translateY(6px);
  transition: opacity 320ms ease, transform 320ms ease, background-color 200ms ease, color 200ms ease;
  transition-delay: calc(60ms + var(--i, 0) * 40ms);
}
.mc-nav-item.is-open .mc-nav-link,
.mc-nav-item:focus-within .mc-nav-link { opacity: 1; transform: translateY(0); }

.mc-nav-link__label {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-weight: 700; font-size: 19px; letter-spacing: -0.3px;
  transition: color 180ms ease;
}
.mc-nav-link__arrow {
  opacity: 0; transform: translateX(-6px);
  transition: opacity 220ms ease, transform 240ms cubic-bezier(.2,.7,.2,1);
  color: var(--burgundy-deep);
}
.mc-nav-link__desc {
  display: block; font-size: 12.5px; line-height: 1.4;
  color: var(--ink-mute); margin-top: 3px;
  transition: color 180ms ease;
}
.mc-nav-link:hover { background: var(--cream); }
.mc-nav-link:hover .mc-nav-link__label { color: var(--burgundy-deep); }
.mc-nav-link:hover .mc-nav-link__arrow { opacity: 1; transform: translateX(0); }

.mc-nav-feature {
  position: relative; display: flex; flex-direction: column;
  background: var(--burgundy); color: #fff;
  text-decoration: none; overflow: hidden;
  opacity: 0; transform: translateY(6px);
  transition: opacity 360ms ease 160ms, transform 360ms cubic-bezier(.2,.7,.2,1) 160ms;
}
.mc-nav-item.is-open .mc-nav-feature,
.mc-nav-item:focus-within .mc-nav-feature { opacity: 1; transform: translateY(0); }
.mc-nav-feature__media {
  height: 150px;
  background-size: cover; background-position: center;
  position: relative;
  transition: transform 600ms cubic-bezier(.2,.7,.2,1);
}
.mc-nav-feature:hover .mc-nav-feature__media { transform: scale(1.06); }
.mc-nav-feature__body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mc-nav-feature__eyebrow {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 1.4px;
  text-transform: uppercase; color: rgba(255,255,255,0.82); font-weight: 600;
  margin-bottom: 4px;
}
.mc-nav-feature__title {
  font-family: var(--font-sans); font-weight: 800; font-size: 26px;
  letter-spacing: -0.6px; line-height: 1.05;
  margin-top: 2px;
}
.mc-nav-feature__desc {
  font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.85);
  margin-top: 4px;
}
.mc-nav-feature__cta {
  margin-top: auto; padding-top: 14px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 700; font-size: 12px;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: #fff;
}
.mc-nav-feature__cta svg { transition: transform 240ms cubic-bezier(.2,.7,.2,1); }
.mc-nav-feature:hover .mc-nav-feature__cta svg { transform: translateX(4px); }

/* ---------- Horizontal rails: no overscroll past either end ----------
   At rest the first card is already flush and the prev arrow is disabled, but a drag
   to the right still pulled the whole rail and sprang it back — the browser's
   rubber-band, which reads as "there is something over there" when there is not. It
   also chained the gesture to the page behind it. `none` stops both: past the last
   card in either direction, nothing moves. Covers every rail on the site — services,
   projects, accreditations, the case-study gallery, other services/sectors and the
   sub-sector strip. */
#mcp-services-track,
#mcp-cases-list,
.mcp-accred-grid,
.mcp-csgallery-track,
.mcp-othersec__track,
.mcp-svc-other,
.mcp-scrubber__grid {
  overscroll-behavior-x: none;
}