/* Site chrome: header, mega navigation, header search, footer.
   Colours are the kit's brand values so this stays in step without importing
   anything from Elementor at runtime. One definition per selector per context;
   a duplicate later in the file wins silently and that exact failure trapped
   the mega panel at 89px wide in v1.3.1. tools/render-check.php asserts the
   invariants that have already been paid for. */

/* -------------------------------------------------------------------------
   Tokens. Declared on both roots so [milpark_nav] dropped outside the header
   still resolves everything; --mk-bar-* are the on-blue colours and default
   to the on-white ones wherever the header is not the background.
   ------------------------------------------------------------------------- */
.mk-header,.mk-nav{--mk-navy:#1A134A;--mk-blue:#1C3687;--mk-yellow:#F9F106;
  --mk-rule:#E0E3F4;--mk-body:#394154;--mk-muted:#5A6B85;--mk-panel-bg:#fff}

/* position:static, deliberately. The panels are absolutely positioned and must
   resolve against .mk-header, which is sticky and therefore a containing
   block, so they span the full header width. Making .mk-nav, .mk-nav-item or
   .mk-search positioned traps a panel at the width of one control: that was
   the v1.3.1 bug. */
.mk-nav{position:static;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}

/* Our own copy of the theme convention. The chrome labels its icon buttons
   with .screen-reader-text and Hello's settings screen can deregister the
   stylesheet that defines it, which would print "Menu" and "Search Milpark"
   into the header. Depend on nothing a checkbox can remove. */
.mk-header .screen-reader-text,
.mk-nav .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.mk-nav-list{display:flex;align-items:stretch;gap:0;margin:0;padding:0;list-style:none}
.mk-nav-item{position:static;margin:0}

/* Five labels, search and three actions genuinely exceed the inner width at
   the narrow end of desktop, so the horizontal padding flexes with the
   viewport instead of the labels wrapping to two lines. The underline inset
   below must track it, hence the custom property. The 12px cap is load
   bearing: the row runs the 1240px container completely full, and the search
   divider below is paid for out of this padding. */
.mk-nav-top{--mk-top-pad:clamp(7px,0.85vw,12px);
  position:relative;display:inline-flex;align-items:center;gap:7px;padding:26px var(--mk-top-pad);margin:0;border:0;background:none;
  font:inherit;font-size:clamp(13.5px,1.05vw,15px);font-weight:600;line-height:1;letter-spacing:.01em;color:var(--mk-bar-ink,var(--mk-blue));
  white-space:nowrap;text-decoration:none;cursor:pointer}
/* hello-elementor/reset.css carries
     [type="button"]:focus, [type="button"]:hover { background-color:#c36 }
   which matches every <button type="button"> we render. Same specificity as a
   bare .mk-nav-top:hover, so it is a coin toss on source order. Every button
   in this file scopes its states with a parent class to win outright. */
.mk-nav .mk-nav-top:hover,
.mk-nav .mk-nav-top:focus,
.mk-nav .mk-nav-top:active{background:none;background-color:transparent;color:var(--mk-bar-ink,var(--mk-blue))}
.mk-nav-top:focus-visible{outline:2px solid var(--mk-bar-focus,var(--mk-blue));outline-offset:-4px;border-radius:4px}

/* The yellow underline is the open and hover cue, drawn without changing
   layout so nothing shifts when a panel opens. bottom sits it 8px under the
   label rather than on the bar's bottom edge, so it reads as part of the
   item, not part of the header. */
.mk-nav-top::after{content:"";position:absolute;left:var(--mk-top-pad,14px);right:var(--mk-top-pad,14px);bottom:15px;height:3px;border-radius:2px;background:var(--mk-yellow);
  transform:scaleX(0);transition:transform .18s ease}
.mk-nav-item[data-open] .mk-nav-top::after,
.mk-nav-item .mk-nav-top:hover::after,
.mk-nav-item .mk-nav-top:focus-visible::after{transform:scaleX(1)}

.mk-nav-caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;opacity:.75;
  transform:rotate(45deg) translateY(-2px);transition:transform .18s ease}
.mk-nav-item[data-open] .mk-nav-caret{transform:rotate(-135deg) translateY(-2px)}

/* Panels drop over the page from under the sticky header. grid-template-rows
   0fr to 1fr animates to natural height without hardcoding one. visibility is
   part of the closed state: a closed panel's links used to sit invisibly in
   the tab order, so a keyboard user tabbed through eight links they could not
   see; hidden removes them from both the tab order and the accessibility
   tree, and the delay keeps the close animation visible. */
.mk-nav-panel{position:absolute;left:0;right:0;top:100%;z-index:40;
  display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows .28s ease,visibility 0s linear .28s;
  background:var(--mk-panel-bg)}
.mk-nav-item[data-open] .mk-nav-panel{grid-template-rows:1fr;visibility:visible;
  transition:grid-template-rows .28s ease,visibility 0s;
  box-shadow:0 28px 44px -26px rgba(26,19,74,.55)}
.mk-nav-panel-inner{overflow:hidden;min-height:0}

/* Aligned to .mk-header-inner (1560px, fluid 20 to 60px gutters) so columns start where
   the nav items do. Change one and change the other. */
.mk-nav-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px 48px;
  margin:0 auto;padding:34px clamp(20px,(100vw - 1200px) / 4 + 20px,60px) 42px;max-width:1560px;list-style:none}
.mk-nav-col{margin:0}

/* Hierarchy inside a panel: blue group titles on a hairline, neutral links
   under them, so the eye scans groups first and reads links second. The flat
   title is the same device on a flat group, carrying the parent item's name
   so a single-list panel shares the columned panels' grammar. */
.mk-nav-col-title,.mk-nav-flat-title{display:block;margin:0 0 14px;padding:0 0 10px;border-bottom:1px solid var(--mk-rule);
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mk-blue)}
.mk-nav-links{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.mk-nav-link{display:inline-block;font-size:15px;line-height:1.45;color:var(--mk-body);text-decoration:none}
.mk-nav-link:hover{color:var(--mk-blue);text-decoration:underline;text-underline-offset:3px}
.mk-nav-link:focus-visible{outline:2px solid var(--mk-blue);outline-offset:2px;border-radius:2px}
/* A run of childless depth 1 items shares one column (see the walker), so a
   flat panel reads as a considered list instead of links scattered one per
   grid cell. In a mixed panel the real column titles stand right beside the
   group, so its own label would say the obvious twice; hiding it costs the
   label's height, which the padding puts back so first links align. */
.mk-nav-col--flat .mk-nav-links{gap:11px}
.mk-nav-cols:has(.mk-nav-col-title) .mk-nav-flat-title{display:none}
.mk-nav-cols:has(.mk-nav-col-title) .mk-nav-col--flat{padding-top:41px}

.mk-nav-toggle{display:none}
/* The header's secondary actions, repeated at the foot of the mobile popup
   (navigation.php). Desktop has them in the header row, so never here. */
.mk-nav-mobile-actions{display:none}

/* Anchor targets: most nav links point at a section, and with a sticky header
   every jump would otherwise land with the heading hidden underneath it. */
:where(h1,h2,h3,section,div)[id]{scroll-margin-top:96px}

/* -------------------------------------------------------------------------
   Header search. The toggle sits in the utility area; the sheet is a panel
   with the same mechanics as the mega panels, resolving against .mk-header.
   ------------------------------------------------------------------------- */
.mk-search{position:static}

/* Desktop only: a hairline between the wayfinding and the utility cluster.
   The header row runs full at common widths, which parked the magnifier hard
   against the last menu item's caret where it read as part of Contact Us.
   Scoped to min-width because the mobile block turns .mk-search into
   display:contents, and a pseudo element there would leak a stray rule into
   the brand row. */
@media (min-width:1200px){
  .mk-header .mk-search{display:flex;align-items:center;gap:10px;margin-left:6px}
  .mk-header .mk-search::before{content:"";flex:none;width:1px;height:22px;background:rgba(255,255,255,.28)}
}

.mk-search-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;margin:0;border:0;border-radius:999px;
  background:none;font:inherit;line-height:1;color:var(--mk-bar-ink,var(--mk-blue));cursor:pointer;
  transition:background-color .16s ease}
/* Icon only at every width; the label stays for assistive tech. */
.mk-search-toggle-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Same hello reset.css trap as .mk-nav-top above. */
.mk-search .mk-search-toggle:hover,
.mk-search .mk-search-toggle:focus{background:none;background-color:rgba(255,255,255,.14);color:var(--mk-bar-ink,var(--mk-blue))}
.mk-search .mk-search-toggle:active{background-color:rgba(255,255,255,.2);color:var(--mk-bar-ink,var(--mk-blue))}
.mk-search[data-open] .mk-search-toggle{background-color:rgba(255,255,255,.16)}
.mk-search-toggle:focus-visible{outline:2px solid var(--mk-bar-focus,var(--mk-blue));outline-offset:2px}
.mk-search-icon{display:block;flex:none}

.mk-search-panel{position:absolute;left:0;right:0;top:100%;z-index:41;
  display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows .24s ease,visibility 0s linear .24s;
  background:var(--mk-panel-bg)}
.mk-search[data-open] .mk-search-panel{grid-template-rows:1fr;visibility:visible;
  transition:grid-template-rows .24s ease,visibility 0s;
  box-shadow:0 28px 44px -26px rgba(26,19,74,.55)}
.mk-search-panel-inner{overflow:hidden;min-height:0}

/* The sheet never outgrows the viewport: the header is sticky, so anything
   the panel pushed past the fold could not be scrolled to at all. The form
   and the chips stay pinned; the results list is the part that scrolls.
   box-sizing is declared here rather than inherited, because the global
   border-box the theme provides lives in a stylesheet Hello's settings
   screen can deregister, and content-box would put the padding on top of
   the max-height and push the sheet 82px past the fold. */
.mk-search-sheet{display:flex;flex-direction:column;box-sizing:border-box;max-width:880px;margin:0 auto;padding:38px 20px 44px;
  max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px)}
.mk-search-form,.mk-search-filters{flex:none}

/* The input is the sheet's one big moment: an exam-paper baseline that turns
   blue when writing starts. Focus is shown by that colour change, which is why
   the border lives on the form and the input carries no outline of its own. */
.mk-search-form{display:flex;align-items:center;gap:14px;margin:0;padding:0 0 12px;
  border-bottom:2px solid #C7CFE4;transition:border-color .16s ease}
.mk-search-form:focus-within{border-bottom-color:var(--mk-blue)}
.mk-search-form .mk-search-icon{color:var(--mk-blue)}
.mk-search-input{flex:1 1 auto;min-width:0;margin:0;padding:4px 0;border:0;background:none;
  font-family:inherit;font-size:26px;font-weight:400;line-height:1.3;letter-spacing:-.01em;color:var(--mk-navy)}
.mk-search-input::placeholder{color:#8D99B5;opacity:1}
.mk-search-input:focus{outline:none}
.mk-search-input::-webkit-search-decoration,
.mk-search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

.mk-search-filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.mk-chip-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;margin:0;border:1px solid #C7CFE4;border-radius:999px;
  background:#fff;font:inherit;font-size:13px;font-weight:600;line-height:1.2;color:var(--mk-body);cursor:pointer;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease}
/* Chips are <button type="button"> too, so the hello reset.css rule applies. */
.mk-search .mk-chip-btn:hover,
.mk-search .mk-chip-btn:focus{background:#F3F5FB;background-color:#F3F5FB;border-color:var(--mk-blue);color:var(--mk-blue)}
.mk-search .mk-chip-btn:active{background-color:#E9EDF8;color:var(--mk-blue)}
.mk-search .mk-chip-btn[aria-pressed="true"],
.mk-search .mk-chip-btn[aria-pressed="true"]:hover,
.mk-search .mk-chip-btn[aria-pressed="true"]:focus{background:var(--mk-blue);background-color:var(--mk-blue);border-color:var(--mk-blue);color:#fff}
.mk-chip-btn:focus-visible{outline:2px solid var(--mk-blue);outline-offset:2px}
.mk-chip-count{font-weight:500;opacity:.7}
/* A chip whose type holds nothing for the current term stays clickable but
   stops competing for attention. */
.mk-search .mk-chip-btn.is-empty:not([aria-pressed="true"]){opacity:.5}

.mk-search-results{margin-top:26px;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  /* Breathing room so the scrollbar never sits on top of result text. */
  padding-right:8px}
.mk-sr-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px 48px}
.mk-sr-group{min-width:0}
.mk-sr-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.mk-sr-link{display:block;padding:7px 0;text-decoration:none}
.mk-sr-name{display:block;font-size:15px;font-weight:500;line-height:1.4;color:var(--mk-blue)}
.mk-sr-link:hover .mk-sr-name{text-decoration:underline;text-underline-offset:3px}
.mk-sr-link:focus-visible{outline:2px solid var(--mk-blue);outline-offset:2px;border-radius:3px}
.mk-sr-sub{display:block;margin-top:1px;font-size:12.5px;line-height:1.4;color:var(--mk-muted)}
.mk-sr-more{display:inline-block;margin-top:8px;font-size:13px;font-weight:600;color:var(--mk-blue);text-decoration:none}
.mk-sr-more:hover{text-decoration:underline;text-underline-offset:3px}
.mk-sr-more:focus-visible{outline:2px solid var(--mk-blue);outline-offset:2px;border-radius:2px}
/* The link to the full results page, under every group. */
.mk-sr-all{display:block;margin-top:18px;padding-top:14px;border-top:1px solid #E0E3F4;font-size:14px}
.mk-search-empty{margin:0;padding:6px 0 2px;font-size:15px;line-height:1.5;color:var(--mk-muted)}
.mk-search-empty a{color:var(--mk-blue)}

/* -------------------------------------------------------------------------
   Site header
   Rendered on every page, so everything here is on the critical path. Milpark
   blue since v1.4.0; the uploaded logo is the on-dark variant (white wordmark,
   white panel, blue M) and requires a dark ground, see milpark_render_header().
   ------------------------------------------------------------------------- */
.mk-header{--mk-bar-ink:#fff;--mk-bar-focus:var(--mk-yellow);
  position:sticky;top:0;z-index:999;
  background:#1C3687;background:linear-gradient(94deg,#1A134A 0%,#1C3687 56%,#22418F 100%);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
/* 1560 with gutters capping at 60px, so the CONTENT box is 1440px, which is
   what the page actually gives its copy. Elementor's boxed container hangs the
   60px section padding on the OUTER element and caps the INNER one at the kit's
   container_width, so page copy spans the full 1440 and the padding sits
   outside it. v1.16.0 set 1440 here and then took the gutters off that cap.
   That is 120px the page never spends, and it left the logo 60px inside the
   body copy on both sides. Measured on the live About Us page rather than derived:
   header content 300 to 1620 against page content 240 to 1680 at 1920.
   Re-measured at 1200, 1210, 1280, 1440, 1560 and 1920: byte identical to
   v1.16.0 below 1360, where the cap is above the viewport and the gutter clamp
   does all the work, and exact alignment from 1440 up.

   1560 is 1440 + 2x60, so it tracks container_width. If the kit's
   container_width moves, this and .mk-nav-cols move with it.

   THE GUTTER IS FLUID, and that is not decoration. The desktop row starts at
   1200px viewport, where a flat 60px each side would take 120px off a row that
   only has 1200 to begin with, against the 40px it used to lose. The fluid
   clamps on the nav labels and their paddings are all at their FLOOR by then,
   so there is nothing left to give and the row tips into overlap. The clamp
   pays the gutter out of viewport width instead: 20px at the narrow end of
   desktop, reaching the full 60px at 1440 and above, where the max-width has
   taken over and the gutter is free. Tested at 1200, 1210, 1280, 1440, 1920. */
.mk-header-inner{display:flex;align-items:center;gap:14px;
  max-width:1560px;margin:0 auto;padding:0 clamp(20px,(100vw - 1200px) / 4 + 20px,60px);min-height:72px}

.mk-header-brand{display:inline-flex;align-items:center;flex:0 0 auto;text-decoration:none;color:#fff}
.mk-header-brand:focus-visible{outline:2px solid var(--mk-yellow);outline-offset:4px}
.mk-header-logo{display:block;width:auto;height:42px;max-width:190px;object-fit:contain}
.mk-header-brand--text{font-size:19px;font-weight:700;letter-spacing:-.01em}

/* The nav takes the slack so search and the actions sit hard right. */
.mk-header .mk-nav{flex:1 1 auto;min-width:0}
.mk-header .mk-nav-list{justify-content:flex-start}

.mk-header-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto}
/* Button padding flexes for the same reason the nav item padding does: the
   row runs the container full, and the narrow end of desktop needs every
   pixel the wide end can spare. */
.mk-action{display:inline-flex;align-items:center;justify-content:center;
  padding:10px clamp(11px,1.2vw,18px);border-radius:999px;border:1px solid transparent;
  font-size:14px;font-weight:600;line-height:1;letter-spacing:.01em;text-decoration:none;white-space:nowrap;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease}
.mk-action--link{padding:10px 6px;color:rgba(255,255,255,.88)}
.mk-action--link:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.mk-action--ghost{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.mk-action--ghost:hover{background:#fff;border-color:#fff;color:var(--mk-blue)}
.mk-action--solid{background:var(--mk-yellow);color:var(--mk-navy);font-weight:700}
.mk-action--solid:hover{background:#E8E005;color:var(--mk-navy)}
.mk-action:focus-visible{outline:2px solid var(--mk-yellow);outline-offset:2px}
.mk-action--solid:focus-visible{outline-color:#fff}

/* The sticky header is what makes the anchor offset in the nav block above
   necessary. Change one and check the other. */
.mk-content{display:block}

.skip-link{position:absolute;left:-9999px;top:0}
.skip-link:focus{left:8px;top:8px;z-index:100;width:auto;height:auto;
  padding:10px 16px;background:#fff;color:#1C3687;border-radius:6px;
  box-shadow:0 2px 12px rgba(0,0,0,.2)}

@media (max-width:1199px){
  /* Size and position are in the header row block below (38px). */
  .mk-nav-toggle{display:inline-flex;align-items:center;justify-content:center;
    padding:0;border:0;background:none;cursor:pointer;color:#fff}
  /* Same hello reset.css rule as .mk-nav-top above. */
  .mk-nav .mk-nav-toggle:hover,
  .mk-nav .mk-nav-toggle:focus,
  .mk-nav .mk-nav-toggle:active{background:none;background-color:transparent;color:#fff}
  .mk-nav-toggle:focus-visible{outline:2px solid var(--mk-yellow);outline-offset:2px;border-radius:6px}
  .mk-nav-toggle-bar,.mk-nav-toggle-bar::before,.mk-nav-toggle-bar::after{
    display:block;width:22px;height:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
  .mk-nav-toggle-bar::before,.mk-nav-toggle-bar::after{content:"";position:absolute}
  .mk-nav-toggle-bar::before{transform:translateY(-7px)}
  .mk-nav-toggle-bar::after{transform:translateY(7px)}
  .mk-nav-toggle[aria-expanded="true"] .mk-nav-toggle-bar{transform:rotate(45deg)}
  .mk-nav-toggle[aria-expanded="true"] .mk-nav-toggle-bar::before{opacity:0}
  .mk-nav-toggle[aria-expanded="true"] .mk-nav-toggle-bar::after{transform:rotate(-90deg)}

  /* Mobile is a real layout, not a squeezed desktop one: the same markup
     becomes a floating popup card OVER the page, not a drawer that shoves
     the content down. Absolute against .mk-header-inner (positioned below),
     capped to the viewport and scrolling internally, with the same
     visibility discipline as the panels so closed links stay out of the tab
     order. */
  .mk-nav-list{position:absolute;left:12px;right:12px;top:calc(100% + 6px);z-index:45;
    display:flex;flex-direction:column;gap:0;background:#fff;border-radius:14px;
    box-shadow:0 30px 60px -22px rgba(26,19,74,.6);
    max-height:calc(100vh - 92px);max-height:calc(100dvh - 92px);
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
  .mk-nav[data-mobile-open] .mk-nav-list{opacity:1;visibility:visible;transform:none;
    transition:opacity .18s ease,transform .18s ease,visibility 0s}
  .mk-nav-item{border-bottom:1px solid var(--mk-rule)}
  .mk-nav-item:last-child{border-bottom:0}
  /* While the popup or the search sheet is open, it owns the scroll. */
  html:has(.mk-nav[data-mobile-open]),
  html:has(.mk-search[data-open]){overflow:hidden}
  .mk-nav-top{width:100%;justify-content:space-between;padding:16px 20px;font-size:16px;color:var(--mk-blue)}
  .mk-nav .mk-nav-top:hover,
  .mk-nav .mk-nav-top:focus,
  .mk-nav .mk-nav-top:active{color:var(--mk-blue)}
  .mk-nav-top:focus-visible{outline-color:var(--mk-blue)}
  .mk-nav-top::after{display:none}
  .mk-nav-panel{position:static;box-shadow:none}
  .mk-nav-item[data-open] .mk-nav-panel{box-shadow:none}
  .mk-nav-cols{grid-template-columns:1fr;gap:20px;padding:2px 20px 22px;max-width:none}
  .mk-nav-col-title{margin-bottom:8px}
  .mk-nav-mobile-actions{display:flex;flex-wrap:wrap;gap:10px;padding:16px 20px 20px;border-top:1px solid var(--mk-rule);list-style:none}
  .mk-nav .mk-nav-mobile-action{display:inline-flex;align-items:center;justify-content:center;flex:1 1 140px;
    min-height:44px;padding:10px 18px;border-radius:999px;font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;
    border:2px solid var(--mk-blue);color:var(--mk-blue);background:#fff}
  .mk-nav .mk-nav-mobile-action--ghost{background:var(--mk-blue);color:#fff}
  .mk-nav .mk-nav-mobile-action:hover,
  .mk-nav .mk-nav-mobile-action:focus{color:var(--mk-blue);background:#EEF1F8}
  .mk-nav .mk-nav-mobile-action--ghost:hover,
  .mk-nav .mk-nav-mobile-action--ghost:focus{color:#fff;background:#152a6b}
  .mk-nav-mobile-action:focus-visible{outline:2px solid var(--mk-blue);outline-offset:2px}
}

@media (prefers-reduced-motion:reduce){
  .mk-nav-panel,.mk-search-panel,.mk-nav-caret,.mk-nav-top::after,.mk-nav-list{transition:none}
}

/* Footer */
.mk-foot-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px 36px;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
.mk-foot-title{margin:0 0 12px;font-size:16px;font-weight:700;line-height:1.3;color:#fff}
.mk-foot-links{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.mk-foot-links a{font-size:14px;line-height:1.5;color:rgba(255,255,255,.86);text-decoration:none}
.mk-foot-links a:hover{color:#fff;text-decoration:underline}
.mk-foot-links a:focus-visible{outline:2px solid #F9F106;outline-offset:2px;border-radius:2px}

/* =========================================================================
   Site header, responsive row
   ========================================================================= */
@media (max-width:1199px){
  /* Row gap 0: the nav and search rows are empty until opened (their toggles
     are lifted into the brand row below), and any row gap here renders as a
     strip of dead header under the brand row on every phone. */
  .mk-header-inner{position:relative;flex-wrap:wrap;gap:0 12px;min-height:56px;padding:10px 16px}
  .mk-header-brand{order:1;margin-right:auto}
  /* Room for the search and menu toggles, which are lifted out of the flow
     below. */
  .mk-header-actions{order:2;gap:8px;margin-right:96px}
  .mk-action--link{display:none}
  .mk-action{padding:9px 14px;font-size:13px}
  /* The wrappers dissolve out of the flex layout: everything inside them is
     absolutely positioned (the two toggles, the search panel, the menu
     popup), and an empty flex item still costs the header a visible strip of
     line height per row on every phone. display:contents changes layout
     only; the DOM, the data attributes and the event handlers in nav.js are
     untouched. */
  .mk-header .mk-nav,
  .mk-header .mk-search{display:contents}
  /* Positioned, not reordered. The toggles are grandchildren of the flex row
     and sit in the brand row by coordinates, not by flex order. */
  .mk-nav-toggle{position:absolute;top:12px;right:12px;width:38px;height:38px}
  .mk-search-toggle{position:absolute;top:12px;right:54px;width:38px;height:38px}

  .mk-search-sheet{padding:22px 16px 28px}
  .mk-search-input{font-size:19px}
  .mk-search-results{margin-top:20px}
  .mk-sr-groups{gap:22px 32px}
}

@media (max-width:480px){
  .mk-header-logo{height:34px;max-width:150px}
  /* Both actions on phones (round 1 feedback, 5 Oct 2026). They do not fit
     beside the logo and the two toggles at 375px, so they take their own row
     of two equal buttons. The header stays at 92px, inside the 96px
     scroll-margin-top every anchor rule uses; grow this row and those have to
     grow with it. */
  .mk-header-actions{order:3;flex:1 1 100%;margin:8px 0 0;gap:8px}
  .mk-header-actions .mk-action{flex:1 1 0;height:30px;padding:0 10px}
  .mk-nav-list{max-height:calc(100vh - 104px);max-height:calc(100dvh - 104px)}
}

/* =========================================================================
   Site footer
   ========================================================================= */
.mk-footer{--mk-accent:#F9F106;background:#1C3687;color:#fff;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
.mk-footer-inner{display:grid;grid-template-columns:minmax(260px,1fr) 2fr;gap:40px;
  max-width:1240px;margin:0 auto;padding:56px 20px 40px}

/* The footer lockup. Sized by height so the artwork's own ratio decides the
   width, the same way the header logo is handled. */
.mk-foot-brand-link{display:inline-block;margin:0 0 28px;text-decoration:none}
.mk-foot-brand-link:focus-visible{outline:2px solid var(--mk-accent);outline-offset:4px;border-radius:2px}
.mk-foot-logo{display:block;width:auto;height:54px;max-width:220px;object-fit:contain}

.mk-foot-contact{display:flex;flex-direction:column;gap:20px}
.mk-foot-contact-row{display:flex;flex-direction:column;gap:4px}
.mk-foot-contact-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.6)}
.mk-foot-contact-value{font-size:15px;line-height:1.5;color:#fff;font-style:normal;text-decoration:none}
/* HOVER HAS TO CHANGE THE COLOUR, and going to white cannot: these start
   white. The nav and legal links below are dimmed at rest and brighten to
   white on hover, which reads clearly; the contact values are full white at
   rest because a phone number and an email address are the point of the
   column, so they go to the footer accent instead. Underline alone was the
   only feedback and it was easy to miss. */
a.mk-foot-contact-value:hover{color:var(--mk-accent);text-decoration:underline;text-underline-offset:3px}
a.mk-foot-contact-value:focus-visible{outline:2px solid var(--mk-accent);outline-offset:2px;border-radius:2px}

.mk-footer-bottom{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px;
  max-width:1240px;margin:0 auto;padding:20px 20px 32px;
  border-top:1px solid rgba(255,255,255,.16)}
.mk-foot-copyright{margin:0;font-size:13px;color:rgba(255,255,255,.7)}
.mk-foot-legal-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.mk-foot-legal-link{font-size:13px;color:rgba(255,255,255,.7);text-decoration:none}
.mk-foot-legal-link:hover{color:#fff;text-decoration:underline}
.mk-foot-legal-link:focus-visible{outline:2px solid var(--mk-accent);outline-offset:2px;border-radius:2px}

.mk-foot-social{display:flex;align-items:center;gap:6px;margin-left:auto}
.mk-social{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;color:rgba(255,255,255,.82);text-decoration:none;
  transition:background-color .16s ease,color .16s ease}
.mk-social:hover{background:rgba(255,255,255,.14);color:#fff}
.mk-social:focus-visible{outline:2px solid var(--mk-accent);outline-offset:2px}
.mk-social-icon{display:block}
.mk-social-text{font-size:12px}

@media (max-width:900px){
  .mk-footer-inner{grid-template-columns:1fr;gap:36px;padding:40px 20px 32px}
  .mk-footer-bottom{padding:20px 20px 28px}
  .mk-foot-social{margin-left:0;width:100%}
}