/* ============================================================================
   Marketing site — band + decoration system.

   The look this supports: sections alternate between a deep navy band and a
   near-white one, each carrying a couple of quiet geometric decorations, with
   an angled edge where a band meets the next. Everything here is drawn in CSS
   (gradients, radii, clip-path) rather than shipped as image assets, so there
   is nothing to download and the shapes recolour with the band they sit in.

   Load order: linked BEFORE css/tailwind.build.css so utilities still win.
   ========================================================================== */

:root {
    --mk-navy: #001b3b;
    --mk-navy-soft: #0a2a52;   /* lifted navy, for shapes drawn on the dark band */
    --mk-soft: #f5f8fc;        /* the light band */
    --mk-blue: #0d59f2;
    --mk-blue-on-navy: #4d85ff;  /* the tint brand blue takes on a dark band */
    --mk-body: #5c6067;
    --mk-container: 1140px;
}

/* ── Bands ─────────────────────────────────────────────────────────────────
   A band is a full-bleed section with its own surface. Decorations are
   absolutely positioned inside it and never affect layout, so a band can be
   dropped anywhere without disturbing the flow. */
.band { position: relative; overflow: hidden; }
.band > * { position: relative; z-index: 1; }   /* content above decorations */

.band-dark { background: var(--mk-navy); }
.band-soft { background: var(--mk-soft); }
.band-white { background: #fff; }

/* The container width the whole page aligns to.

   Positioned so content always paints ABOVE the decorations. Without this the
   shapes win: they are positioned with z-index 0 while the container is
   static, and a positioned element paints after in-flow content regardless of
   source order. It went unnoticed while every decoration sat at 4-10% alpha,
   but anything that MOVES across a headline is immediately visible. Safe to
   add here: every absolutely positioned element on the page already has its
   own `relative` parent, so nothing was using the band as its containing
   block. */
.mk-container { max-width: var(--mk-container); margin-inline: auto;
                padding-inline: 1.25rem; position: relative; z-index: 1; }

/* ── Angled edge ───────────────────────────────────────────────────────────
   The slanted transition between two bands. It is a child of the band it
   belongs to, drawn at the bottom edge, so the band above appears to be cut on
   a diagonal. Height is deliberately small — a shallow angle reads as a design
   decision, a steep one reads as a mistake. */
.band-angle-bottom { position: absolute; left: 0; right: 0; bottom: -1px;
                     height: 64px; z-index: 2; pointer-events: none; }
.band-angle-bottom::before { content: ""; position: absolute; inset: 0;
                             background: var(--mk-blue);
                             clip-path: polygon(0 62%, 100% 0, 100% 100%, 0 100%); }
.band-angle-bottom::after { content: ""; position: absolute; inset: 0;
                            background: var(--mk-angle-to, var(--mk-soft));
                            clip-path: polygon(0 78%, 100% 16%, 100% 100%, 0 100%); }
/* The lower half of the slant has to be the colour of whatever section comes
   NEXT, or a seam shows. Default is the pale band; this variant is for a slant
   that runs into a white one. */
.band-angle-bottom--to-white { --mk-angle-to: #fff; }

/* ── Decorations ───────────────────────────────────────────────────────────
   Four primitives, each positioned with utility-ish modifiers. They are
   decorative only: aria-hidden in the markup, no text, never interactive. */
.mk-shape { position: absolute; z-index: 0; pointer-events: none; }

/* A hairline grid, the texture the dark band carries. Two repeating gradients
   rather than an SVG so it costs nothing and scales at any size. */
.mk-grid { inset: 0;
           background-image:
             repeating-linear-gradient(to right,  rgba(255,255,255,.045) 0 1px, transparent 1px 88px),
             repeating-linear-gradient(to bottom, rgba(255,255,255,.045) 0 1px, transparent 1px 88px);
           mask-image: linear-gradient(to bottom, #000 0%, transparent 78%); }
.band-soft .mk-grid, .band-white .mk-grid {
           background-image:
             repeating-linear-gradient(to right,  rgba(0,27,59,.05) 0 1px, transparent 1px 88px),
             repeating-linear-gradient(to bottom, rgba(0,27,59,.05) 0 1px, transparent 1px 88px); }

/* An outlined ring. Big, mostly off-canvas, low contrast — but a shape that
   MOVES has to be visible enough for the movement to register, so the alphas
   on the dark band are roughly double what they were when everything here was
   static. Turn these two lines back down to .05 / .10 to make the drift
   near-subliminal again. */
.mk-ring { border-radius: 50%; border: 44px solid rgba(13,89,242,.10); }
.band-dark .mk-ring { border-color: rgba(255,255,255,.11); }

/* A hatched disc — diagonal stripes clipped to a circle. */
.mk-hatch { border-radius: 50%;
            background-image: repeating-linear-gradient(45deg,
              rgba(13,89,242,.20) 0 2px, transparent 2px 9px); }
.band-dark .mk-hatch { background-image: repeating-linear-gradient(45deg,
              rgba(255,255,255,.18) 0 2px, transparent 2px 9px); }

/* A soft filled disc, used to lift one corner of a band. */
.mk-blob { border-radius: 50%; background: rgba(13,89,242,.06); }
.band-dark .mk-blob { background: var(--mk-navy-soft); }

/* Placement modifiers — kept as named positions rather than arbitrary values
   so the same few spots repeat down the page and the rhythm stays deliberate. */
.mk-at-tr { top: -120px;  right: -140px; }
.mk-at-tl { top: -100px;  left:  -160px; }
.mk-at-br { bottom: -160px; right: -120px; }
.mk-at-bl { bottom: -140px; left:  -180px; }
/* Two mid-height spots, so a band can carry a shape that is not in a corner. */
.mk-at-ml { top: 24%; left:  -110px; }
.mk-at-mr { top: 44%; right: -100px; }
.mk-sz-sm { width: 190px;  height: 190px; }
.mk-sz-md { width: 340px;  height: 340px; }
.mk-sz-lg { width: 520px;  height: 520px; }

/* ── Drift ─────────────────────────────────────────────────────────────────
   `.mk-float` composes with any primitive and any placement: the shape keeps
   the spot it was given and wanders slowly around it. A named set of four
   variants rather than per-element values, for the same reason the placements
   are named — and because four shapes sharing one animation move in lockstep,
   which reads as a sliding sheet rather than as drift.

   TRANSFORM ONLY, never top/left: a transform stays on the compositor, so the
   drift costs no layout or paint. The band's own `overflow: hidden` clips
   whatever wanders past its edge, and the shapes sit behind the container, so
   nothing here can push the page sideways or cross a headline. */
.mk-float      { will-change: transform;
                 animation: mk-drift-a 11s ease-in-out infinite alternate; }
.mk-float--b   { animation: mk-drift-b 15s ease-in-out infinite alternate; }
.mk-float--c   { animation: mk-drift-c 17s ease-in-out infinite alternate; }
.mk-float--d   { animation: mk-drift-d 13s ease-in-out infinite alternate; }

@keyframes mk-drift-a {
    from { transform: translate3d(0, 0, 0)         rotate(0deg); }
    to   { transform: translate3d(58px, -66px, 0)  rotate(20deg); }
}
@keyframes mk-drift-b {
    from { transform: translate3d(0, 0, 0)         rotate(0deg); }
    to   { transform: translate3d(-64px, 54px, 0)  rotate(-16deg); }
}
/* The big soft disc is a plain circle — rotating it would be invisible, so it
   breathes instead. Deliberately the calmest of the four: it is a 520px opaque
   plate, and at the amplitude the small shapes use its edge swept back and
   forth underneath the headline, which is far more distracting than the same
   edge sitting still. The lively motion is the ring's and the hatched discs'
   job. */
@keyframes mk-drift-c {
    from { transform: translate3d(0, 0, 0)         scale(1); }
    to   { transform: translate3d(34px, -18px, 0)  scale(1.06); }
}
@keyframes mk-drift-d {
    from { transform: translate3d(0, 0, 0)         rotate(0deg); }
    to   { transform: translate3d(-52px, -60px, 0) rotate(24deg); }
}

/* Ambient motion is the definition of decorative — nothing is lost by holding
   it still, and a drifting background is exactly what this setting is for. */
@media (prefers-reduced-motion: reduce) {
    .mk-float, .mk-float--b, .mk-float--c, .mk-float--d {
        animation: none;
        will-change: auto;
    }
}

/* Centred variant: a rule on BOTH sides. The single leading rule is correct
   when the eyebrow is left-aligned with the heading, but centred it hangs off
   one side and reads lopsided. */
.eyebrow--center::after { content: ""; width: 2rem; height: 2px;
                          background: currentColor; }

/* ── Brand blue on a dark band ─────────────────────────────────────────────
   #0d59f2 drops to 3.06 against #001b3b — under the 4.5 small-text minimum.
   A lighter tint of the same hue gives 5.01 and still reads as the brand
   colour. The eyebrow's leading rule inherits currentColor, so it lightens
   with the text.

   This applies to ANY brand-blue text on the navy, not just the eyebrow: the
   rule was written for the eyebrow alone and left the infrastructure feature
   icons at 2.8 and the featured pricing card's check marks at 3.06. Note
   `.band-dark` is a card surface as well as a section band (the "Most
   Popular" plan), so a descendant selector is what covers both. Two classes
   beats Tailwind's single-class `.text-primary` on specificity, so load
   order does not matter here. */
.band-dark .eyebrow,
.band-dark .text-primary { color: var(--mk-blue-on-navy); }

/* ── Hero ──────────────────────────────────────────────────────────────────
   An even frame. A single deeply-rounded corner was tried and dropped: that
   treatment needs a tall portrait subject to cut into, and against a wide,
   pale product shot it just read as a lopsided blob. */
.mk-hero-frame { border-radius: 1.25rem; overflow: hidden;
                 box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.mk-hero-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Service cards: pin the "Learn More" link to the bottom.

   The grid already stretches every card in a row to the same height, but the link
   sat straight after the description — so with descriptions of 3 and 4 lines the
   links landed on different baselines inside cards whose bottoms were identical
   (measured at 1280: 1415 / 1415 / 1389 on row one, 1811 / 1837 / 1837 on row
   two). A column with an auto top margin on the last child puts them on one line
   whatever the copy does. */
.mk-svc-card {
    display: flex;
    flex-direction: column;
}

.mk-svc-card > :last-child {
    margin-top: auto;
}

/* The hero's copy column, capped to the same width as the frame beside it.

   Below lg the hero grid stacks, and the frame is already capped at 560px and
   centred (see the note in index.html — the cap stops a 512px source being
   upscaled 2.2x). The copy column had no matching cap, so at a tablet width it
   ran the full 780px container hard against the 20px gutter while the image sat
   centred with 110px either side: the two halves of one hero on two different
   axes, which is what reads as "the header is not centred".
   Same cap and the same centring puts the eyebrow, headline, paragraph, buttons
   and the Cape Town line on the image's left edge. 780px was too long a measure
   for body copy at this size anyway.
   No lower bound is needed: at 390 the content area is ~350px, so the cap never
   bites and the auto margins resolve to zero. At lg the two-column layout takes
   over and the frame drops its own cap (lg:max-w-none). */
@media (max-width: 1023.98px) {
    .mk-hero-copy {
        max-width: 560px;
        margin-inline: auto;
    }
}

/* A small floating card that overlaps the hero photo's lower edge. */
.mk-hero-badge { position: absolute; left: -1.5rem; bottom: -1.5rem;
                 background: #fff; border-radius: 1rem; padding: 1rem 1.25rem;
                 box-shadow: 0 18px 40px rgba(0,27,59,.18); }

@media (max-width: 767.98px) {
    .mk-hero-frame { border-radius: 1rem; }
    .mk-hero-badge { left: 0.5rem; bottom: -1rem; padding: .75rem 1rem; }
    .band-angle-bottom { height: 36px; }
    .mk-sz-lg { width: 320px; height: 320px; }
    .mk-ring { border-width: 28px; }

    /* The mid-height placements are a desktop idea: they work because the
       content sits in a column with clear space beside it. On a phone the
       content is full width, so a shape parked at mid-height sits behind ALL
       of it — measured at 390, the ring crossed the headline, both paragraphs
       and both buttons at every point of its drift. A 28px translucent band
       sliding over a headline reads as a rendering fault, not as decoration.
       The corner shapes still carry the band. */
    .mk-at-ml, .mk-at-mr { display: none; }
}

/* ── Pricing: skeletons + the mailbox line ─────────────────────────────────
   The cards are rendered from GET /pricing, so the section has a loading state
   for the first time. Gradient sweep, not a spinner — the same treatment the
   portal uses. */

.pk-skel-card { padding: 2rem; border-radius: 1rem; background: #fff;
    border: 1px solid rgba(226, 232, 240, .7);
    box-shadow: 0 10px 30px rgba(0, 27, 59, .05); }

.pk-skel { border-radius: 999px;
    background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 37%, #eef2f7 63%);
    background-size: 400% 100%;
    animation: pk-sweep 1.4s ease-in-out infinite; }

@keyframes pk-sweep {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.pk-skel-title { height: .875rem; width: 40%;  margin-bottom: 1rem; }
.pk-skel-price { height: 2.25rem; width: 60%;  margin-bottom: 1.75rem; border-radius: .5rem; }
.pk-skel-line  { height: .75rem;  width: 100%; margin-bottom: 1rem; }
.pk-skel-cta   { height: 3.25rem; width: 100%; margin-top: 1.5rem; }
.pk-skel-note  { height: .875rem; width: min(420px, 80%); margin-inline: auto; }

/* Motion here is decoration — a held still bar reads the same. */
@media (prefers-reduced-motion: reduce) {
    .pk-skel { animation: none; }
}

/* The mailbox tiers, under the optional-email sentence. Wraps to one per line
   on a phone rather than being clipped — the failure the portfolio chips had. */
.pk-mailboxes { display: flex; flex-wrap: wrap; justify-content: center;
    gap: .35rem 1.5rem; margin-top: .6rem; }
.pk-mailbox { font-size: .8125rem; color: var(--mk-body); }

/* ── Mobile nav ────────────────────────────────────────────────────────────
   The header bar is translucent with a blur so the page tints it as you
   scroll. That is right for a 80px bar and wrong the moment the mobile menu
   drops out of it: the bar picks up whatever band is behind it while the panel
   below stays opaque, and one surface reading as two tones looks like a
   rendering fault. So the whole header goes solid while the menu is open.

   Making the PANEL translucent instead was measured and rejected: over the
   navy hero the 16px links land at 3.88, under the 4.5 minimum.

   Element+class beats the single Tailwind utility class it overrides, so this
   wins on specificity no matter which stylesheet loads last. */
header.mk-nav-open { background-color: var(--mk-soft); }

/* ── Portfolio thumbnails ──────────────────────────────────────────────────
   One class per project rather than `style="background-image: url(...)"` on
   each card. The URL never changes at runtime, so it was a constant in an
   inline style — the thing that forces a CSP to allow 'unsafe-inline' on
   style-src, which is the same escape hatch an injected style would use.

   Paths are relative to THIS file (css/), hence the ../images prefix — an
   inline style resolved against the page instead. */
.mk-work-barbershop { background-image: url('../images/design-barbershop.jpg'); background-position: left top; }
.mk-work-plumber    { background-image: url('../images/design-plumber.jpg');    background-position: left top; }
.mk-work-attorney   { background-image: url('../images/design-attorney.jpg');   background-position: left top; }

/* The contact form's extra field. Off-screen rather than display:none, which
   is deliberate — kept exactly as it was, only moved out of the markup. */
.form-extra { position: absolute; left: -9999px; }

/* ── FAQ ───────────────────────────────────────────────────────────────────
   Built on <details>/<summary>, so it opens and closes with no JavaScript at
   all: keyboard accessible for free, findable by the browser's own in-page
   search even while collapsed, and nothing for the CSP to allow.

   The marker is drawn as a rotated border rather than a Material Symbols
   ligature, so the control does not depend on an icon font having loaded. */
.mk-faq { border-top: 1px solid rgba(0, 27, 59, .10); }
.mk-faq:last-of-type { border-bottom: 1px solid rgba(0, 27, 59, .10); }

.mk-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.35rem 0;
    cursor: pointer;
    list-style: none;              /* Firefox */
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 700;
    color: var(--mk-navy);
    transition: color .15s ease;
}
.mk-faq__q::-webkit-details-marker { display: none; }   /* Safari/Chrome */
.mk-faq__q:hover { color: var(--mk-blue); }

.mk-faq__q::after {
    content: "";
    flex: 0 0 auto;
    width: .55rem;
    height: .55rem;
    margin-right: .3rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}
.mk-faq[open] > .mk-faq__q::after { transform: rotate(-135deg) translate(-2px, -2px); }

.mk-faq__a { padding: 0 0 1.5rem; max-width: 60ch; color: var(--mk-body); line-height: 1.7; }
.mk-faq__a p + p { margin-top: .75rem; }

@media (prefers-reduced-motion: reduce) {
    .mk-faq__q, .mk-faq__q::after { transition: none; }
}

/* ── reCAPTCHA badge ───────────────────────────────────────────────────────
   Google requires attribution and accepts either their floating badge or the
   "protected by reCAPTCHA" sentence near the form. We show the sentence (see
   the contact form in index.html), so the badge is hidden — which also leaves
   the bottom-right corner free for the back-to-top button, since the badge is
   position:fixed and 256x60 and would have sat right underneath it.

   `visibility: hidden`, not `display: none`: the widget still needs to occupy
   its own layout box to work. If the attribution text is ever removed from the
   form, this rule has to go with it. */
.grecaptcha-badge { visibility: hidden; }

/* ── Back to top ───────────────────────────────────────────────────────────
   Fixed bottom-right, revealed once the page has scrolled a screen or so.
   48px, comfortably over the 44px tap-target floor, and it sits below the
   sticky header's z-index so it can never cover the nav. */
.mk-to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 40;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    background: var(--mk-blue);
    box-shadow: 0 10px 24px rgba(13, 89, 242, .35);
    transition: background-color .2s ease, transform .2s ease;
}
.mk-to-top:hover { background: #0b4ccc; transform: translateY(-2px); }
.mk-to-top:active { transform: translateY(0); }

@media (max-width: 767.98px) {
    /* Tucked in a little on a phone, where the corner is closer to the
       thumb and to whatever the page's last element is. */
    .mk-to-top { right: 1rem; bottom: 1rem; }

    /* Room for it at the very bottom of the page. Measured, not guessed: at
       390 the button overlapped the footer's copyright line by 21px, because
       that line is centred and nearly full width while the button is fixed
       over the same corner. 48px button + 16px inset, so the last line needs
       about 64px of clearance beneath it. Only below 768px — at 820 and 1280
       the line is short enough that the corner is already clear. */
    .mk-to-top-clearance { padding-bottom: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .mk-to-top { transition: none; }
    .mk-to-top:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   HOW IT WORKS — the process timeline.

   Seven steps is a lot to show without it reading as "this will be hard work".
   The fix is not fewer steps, it is making obvious how few of them are the
   CLIENT'S: the four they act on carry a filled brand-blue marker, the three we
   handle are quiet slate. Four blue dots in a column of seven says "this is all
   you have to do" faster than a sentence can, and it is the same argument the
   FAQ makes in words.

   A vertical list rather than a horizontal stepper, because seven columns
   cannot survive 390px and a list stacks for free.
--------------------------------------------------------------------------- */

.mk-steps {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 760px;
}

.mk-step {
    position: relative;
    display: flex;
    gap: 1.25rem;
    padding-bottom: 2.25rem;
}

.mk-step:last-child { padding-bottom: 0; }

/* The line joining each marker to the next. Drawn from below one marker to the
   top of the following one and suppressed on the last step, so it never trails
   off the end of the list. */
.mk-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 27px;               /* half the 56px marker, less half the 2px line */
    top: 60px;
    bottom: -2px;
    width: 2px;
    background: linear-gradient(to bottom, rgba(0, 27, 59, .14), rgba(0, 27, 59, .05));
}

.mk-step__marker {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Above the connecting line, and opaque, so the line stops at the circle's
       edge instead of showing through it. */
    position: relative;
    z-index: 1;
}

.mk-step__marker .material-symbols-outlined { font-size: 26px; }

.mk-step--you .mk-step__marker {
    background: var(--mk-blue);
    color: #fff;
    box-shadow: 0 6px 16px rgba(13, 89, 242, .25);
}

.mk-step--us .mk-step__marker {
    background: var(--mk-soft);
    color: var(--mk-navy);
    border: 1px solid rgba(0, 27, 59, .10);
}

/* Steps that need BOTH sides. The domain step is the only one: we register a
   new domain ourselves, but a domain the client already owns needs them to add
   a TXT record and change nameservers at their own registrar. Tagging it "we
   handle it" would hide a task they have to do. Blue on the soft fill so it
   reads as ours-with-your-input, not a third unrelated state. */
.mk-step--both .mk-step__marker {
    background: var(--mk-soft);
    color: var(--mk-blue);
    border: 1px solid var(--mk-blue);
}

.mk-step__body { padding-top: .3rem; }

.mk-step__tag {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .35rem;
}

.mk-step--you .mk-step__tag  { color: var(--mk-blue); }
.mk-step--us .mk-step__tag   { color: var(--mk-body); }
.mk-step--both .mk-step__tag { color: var(--mk-blue); }

/* At 390 the marker plus gap already eats 76px of a 350px content box. Shrink
   both so the copy keeps a sane measure rather than wrapping every third word. */
@media (max-width: 480px) {
    .mk-step { gap: 1rem; }
    .mk-step__marker { flex-basis: 46px; width: 46px; height: 46px; }
    .mk-step__marker .material-symbols-outlined { font-size: 22px; }
    .mk-step:not(:last-child)::before { left: 22px; top: 50px; }
}

/* The framed illustration beside the Business Email copy. Capped rather than
   left to fill the column: the source is 1000px wide and the grid cell reaches
   ~540px at 1280 and the full container width when the columns stack, so
   without a cap the tablet layout would upscale it — the same mistake the hero
   frame's comment describes. */
.mk-mailboxes-frame {
    /* 640 not 560: the source is 1000px wide so there is headroom, and at 560
       the addresses inside rendered around 9px — legible but too quiet to make
       the point that this is a real management screen. Still well under the
       intrinsic width, so it never upscales. */
    max-width: 640px;
    margin: 0 auto;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0, 27, 59, .13);
    border: 1px solid rgba(226, 232, 240, .9);
    background: #fff;
}

.mk-mailboxes-frame img {
    display: block;   /* kills the inline-descender gap under the image */
    width: 100%;
    height: auto;
}

/* ---------------------------------------------------------------------------
   The full-bleed map strip above Contact.

   Deliberately outside .mk-container: this one runs edge to edge, which is what
   makes it read as a divider between the FAQ and Contact rather than another
   card on another band.

   line-height: 0 on the wrapper kills the few pixels of descender space an
   inline iframe otherwise leaves under itself, which showed as a pale seam
   against the white contact band below.
--------------------------------------------------------------------------- */
.mk-map {
    line-height: 0;
    /* The band above is pale and the one below is white; a hairline keeps the
       map from appearing to float between them. */
    border-top: 1px solid rgba(0, 27, 59, .08);
    border-bottom: 1px solid rgba(0, 27, 59, .08);
}

.mk-map iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}


/* Shorter on a phone: 420px of map on a 844px-tall screen is half the viewport
   spent on something nobody scrolled here for. */
@media (max-width: 640px) {
    .mk-map iframe { height: 280px; }
}

/* Visibility is a class, never an inline style. */
.is-hidden { display: none !important; }

/* ---------------------------------------------------------------------------
   Footer

   The brand column is col-span-2 but only held a logo and three lines, so the
   band closed on a large empty rectangle. Address and email fill it with the
   two things people actually come to a footer for.
   --------------------------------------------------------------------------- */

.mk-foot-contact {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    font-size: .9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .62);
}

.mk-foot-contact li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

/* Optical, not geometric: the icon's own box has leading above the glyph, so
   matching the text's line-box top leaves it sitting low. */
.mk-foot-contact .material-symbols-outlined {
    font-size: 20px;
    line-height: 1.5;
    color: var(--mk-blue-on-navy);
    flex: 0 0 20px;
}

.mk-foot-contact a {
    color: rgba(255, 255, 255, .62);
    transition: color .2s;
    /* Long address on a 350px phone: break rather than push the band wide. */
    overflow-wrap: anywhere;
}

.mk-foot-contact a:hover { color: var(--mk-blue-on-navy); }

/* Social accounts under the contact lines. The same three are the JSON-LD
   sameAs entries; a new account goes in both. */
.mk-foot-social {
    margin-top: 1.25rem;
    display: flex;
    gap: .75rem;
}

.mk-foot-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .72);
    transition: color .2s, border-color .2s, background-color .2s;
}

.mk-foot-social a:hover {
    color: #fff;
    border-color: var(--mk-blue-on-navy);
    background-color: rgba(255, 255, 255, .06);
}

.mk-foot-social a:focus-visible {
    outline: 2px solid var(--mk-blue-on-navy);
    outline-offset: 2px;
}

.mk-foot-social svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* Bottom bar: copyright left, legal right on a wide screen; stacked and
   centred once there is not room for both on one line. */
.mk-foot-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
}

/* Wraps, unlike before: this was two links and fitted one line anywhere. The
   third ("Refunds & Cancellations") does not fit beside them at 390, and a flex
   row with no wrap does not break — it pushes past the viewport and the page
   scrolls sideways. The row gap only shows once it has actually wrapped. */
.mk-foot-legal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
}

.mk-foot-legal a {
    color: rgba(255, 255, 255, .5);
    transition: color .2s;
}

.mk-foot-legal a:hover { color: var(--mk-blue-on-navy); }

@media (max-width: 640px) {
    .mk-foot-bottom { justify-content: center; text-align: center; }
    .mk-foot-legal  { width: 100%; justify-content: center; }
}

/* Contact-card links. The address, email and phone in the contact section were
   plain text, so the two that CAN be actioned on a phone were not tappable.
   Underline on hover only — the card already reads as a block of details and
   three permanently underlined lines would fight the form beside it. */
.mk-contact-link {
    color: inherit;
    text-decoration: none;
    transition: color .2s;
}

.mk-contact-link:hover {
    color: var(--mk-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The logo is a link now (scrolls to top on the homepage, goes home from
   anywhere else). It must not pick up default link styling, and it needs a
   visible focus ring for keyboard users — it is the first thing Tab reaches. */
.mk-logo {
    text-decoration: none;
    border-radius: 6px;
    outline-offset: 4px;
}

.mk-logo:focus-visible {
    outline: 2px solid var(--mk-blue);
}

.band-dark .mk-logo:focus-visible {
    outline-color: var(--mk-blue-on-navy);
}

/* The wordmark image (images/logo.svg on light surfaces, logo-dark.svg on
   navy ones). Height only — width follows the SVG's own aspect ratio.
   The translateY compensates for the swoosh below the letters: box-centering
   the image puts the TEXT above the bar's midline, so next to the nav links
   the wordmark read as sitting off their line. */
.mk-logo-img {
    height: 1.75rem;
    width: auto;
    transform: translateY(0.1875rem);
}

/* Below lg the desktop nav is gone and the bar is logo + hamburger; centre
   the brand in the bar like the portals do. Scoped to header — the footer
   and the 404 page reuse .mk-logo in flowing/centered contexts where
   absolute positioning would break them. The sticky header is a positioned
   ancestor, so no extra position:relative is needed. */
@media (max-width: 1023.98px) {
    header .mk-logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

/* ---------------------------------------------------------------------------
   Contact form: submit button states + result dialog
   --------------------------------------------------------------------------- */

/* Visually hidden but still announced. The dialog takes focus, which a screen
   reader reports as a context change rather than as a result, so the outcome
   is also written into a polite live region that sighted users never see. */
.mk-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.mk-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
}

/* Disabled while the request is in flight. Cursor and opacity say "not now"
   without the button moving or resizing — a button that changes width mid
   submit drags the whole form card with it. */
.mk-submit[disabled] {
    opacity: .72;
    cursor: not-allowed;
}

.mk-submit__spinner {
    display: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    animation: mk-spin .7s linear infinite;
}

.mk-submit.is-busy .mk-submit__spinner { display: block; }

@keyframes mk-spin { to { transform: rotate(360deg); } }

/* A visitor who asked for less motion still needs to see that something is
   happening, so the ring stays and only the rotation stops. */
@media (prefers-reduced-motion: reduce) {
    .mk-submit__spinner { animation: none; }
}

/* ── Result dialog ─────────────────────────────────────────────────────── */

.mk-modal {
    position: fixed;
    inset: 0;
    z-index: 120;              /* over the sticky header (z-50) and back-to-top */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.mk-modal.is-hidden { display: none; }

.mk-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 27, 59, .55);
    backdrop-filter: blur(2px);
}

.mk-modal__card {
    position: relative;
    width: 100%;
    max-width: 26rem;
    background: #fff;
    border-radius: 1.25rem;
    padding: 2.25rem 1.75rem 1.75rem;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 27, 59, .28);
    animation: mk-modal-in .18s ease-out;
}

@keyframes mk-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mk-modal__card { animation: none; }
}

.mk-modal__close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 40px; height: 40px;      /* real tap target, not a bare glyph */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: var(--mk-body);
    transition: background .2s, color .2s;
}

.mk-modal__close:hover { background: rgba(0, 27, 59, .06); color: var(--mk-navy); }

.mk-modal__icon {
    width: 64px; height: 64px;
    margin: 0 auto 1rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mk-modal__icon .material-symbols-outlined { font-size: 34px; }

/* One class per outcome rather than per-element colour, so the tone is set in
   a single place when the state changes. */
.mk-modal__icon--success { background: rgba(16, 148, 82, .10); color: #109452; }
.mk-modal__icon--error   { background: rgba(198, 40, 40, .10);  color: #c62828; }
.mk-modal__icon--warning { background: rgba(180, 120, 0, .12);  color: #a76b00; }

.mk-modal__title {
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-weight: 800;
    font-size: 1.375rem;
    color: var(--mk-navy);
    margin-bottom: .5rem;
}

.mk-modal__body {
    color: var(--mk-body);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.mk-modal__action {
    width: 100%;
    background: var(--mk-blue);
    color: #fff;
    font-weight: 700;
    padding: .875rem 1.5rem;
    border-radius: 9999px;
    transition: background .2s;
}

.mk-modal__action:hover { background: #0b4ed6; }

.mk-modal__close:focus-visible,
.mk-modal__action:focus-visible {
    outline: 2px solid var(--mk-blue);
    outline-offset: 3px;
}

@media (max-width: 400px) {
    .mk-modal__card { padding: 2rem 1.25rem 1.25rem; }
}

/* ── Why Us comparison (2026-10-09) ────────────────────────────────────────
   A real <table> on tablet and up; below 768px every row becomes its own
   card with one labelled line per provider (label from data-label), the
   house rule for tables on a phone. Our column is tinted throughout and
   capped with a navy header so the eye lands on it first. */
.mk-cmp {
    background: #fff;
    border: 1px solid #e3e9f2;
    border-radius: 1.25rem;
    box-shadow: 0 20px 45px -25px rgba(0, 27, 59, 0.25);
    overflow: hidden;
}
.mk-cmp__table { width: 100%; border-collapse: collapse; }
.mk-cmp__table thead th {
    background: var(--mk-soft);
    color: var(--mk-navy);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 1.25rem 1rem;
    text-align: center;
    width: 21%;
}
.mk-cmp__table thead th.mk-cmp__corner { width: 37%; }
.mk-cmp__table thead th.mk-cmp__us--head {
    background: var(--mk-navy);
    color: #fff;
}
.mk-cmp__feature {
    color: var(--mk-navy);
    font-weight: 600;
    text-align: left;
    padding: 1rem 1.25rem;
    border-top: 1px solid #eef2f8;
}
.mk-cmp__table td {
    color: var(--mk-body);
    font-size: 0.875rem;
    line-height: 1.35;
    padding: 1rem;
    text-align: center;
    border-top: 1px solid #eef2f8;
}
.mk-cmp__table td.mk-cmp__us {
    background: rgba(13, 89, 242, 0.05);
    color: var(--mk-navy);
    font-weight: 600;
}
.mk-cmp__val { display: block; }
.mk-cmp__mark { display: flex; justify-content: center; margin-bottom: 0.2rem; }
.mk-cmp__mark .material-symbols-outlined { font-size: 22px; }
.mk-cmp__mark--yes  { color: #16a34a; }
.mk-cmp__mark--no   { color: #b4bcc8; }
.mk-cmp__mark--some { color: #d97706; }

.mk-cmp__note {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    max-width: 860px;
    margin: 2.5rem auto 0;
    padding: 1.5rem 1.75rem;
    background: var(--mk-soft);
    border-left: 4px solid var(--mk-blue);
    border-radius: 1rem;
}
.mk-cmp__note-icon { color: var(--mk-blue); font-size: 32px; }

@media (max-width: 767px) {
    .mk-cmp { background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
    .mk-cmp__table, .mk-cmp__table tbody, .mk-cmp__table tr,
    .mk-cmp__table th, .mk-cmp__table td { display: block; width: auto; }
    .mk-cmp__table thead {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }
    .mk-cmp__table tbody tr {
        background: #fff;
        border: 1px solid #e3e9f2;
        border-radius: 1rem;
        padding: 1rem 1rem 0.5rem;
        margin-bottom: 0.875rem;
        box-shadow: 0 10px 25px -20px rgba(0, 27, 59, 0.3);
    }
    .mk-cmp__feature { border-top: 0; padding: 0 0 0.5rem; font-size: 1rem; }
    .mk-cmp__table td {
        display: grid;
        grid-template-columns: 8.5rem 1fr;
        gap: 0.75rem;
        align-items: start;
        text-align: left;
        padding: 0.6rem 0;
    }
    .mk-cmp__table td::before {
        content: attr(data-label);
        color: var(--mk-navy);
        font-weight: 600;
        font-size: 0.8rem;
    }
    .mk-cmp__table td.mk-cmp__us {
        margin: 0 -0.5rem 0.5rem;
        padding: 0.6rem 0.5rem;
        border-radius: 0.6rem;
        border-top: 0;
    }
    .mk-cmp__mark { display: inline-flex; vertical-align: -5px; margin: 0 0.3rem 0 0; }
    .mk-cmp__mark .material-symbols-outlined { font-size: 20px; }
    .mk-cmp__note { padding: 1.25rem; }
}

/* Who We Serve: template screenshots are cropped from the top (the header and
   hero carry the design), never from the middle. */
.mk-shot-top-left { object-position: left top; }   /* keeps the headline's first letters */

/* Client Portal screenshot: a real dashboard render, framed like a window. */
.mk-portal-shot {
    max-width: 1040px;
    margin: 0 auto;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
    background: #fff;
}
.mk-portal-shot img { display: block; width: 100%; height: auto; }

/* Company video (index.html #video, js/video.js). The same click to play block
   ships on client sites (client-website-template css/consent.css). */
.mk-video { max-width: 1040px; margin: 0 auto; }
.video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 1rem;
    background: var(--mk-navy);
    box-shadow: 0 40px 80px -30px rgba(0, 27, 59, 0.45);
}
.video-embed__poster,
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed__poster { object-fit: cover; }
.video-embed__play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    width: 100%; padding: 0; border: 0; cursor: pointer;
    background: rgba(0, 27, 59, 0.12); transition: background 0.2s ease;
}
.video-embed__play:hover { background: rgba(0, 27, 59, 0.02); }
.video-embed__icon {
    position: relative; width: 84px; height: 84px; border-radius: 50%;
    background: var(--mk-blue); box-shadow: 0 12px 34px rgba(13, 89, 242, 0.45);
    transition: transform 0.2s ease;
}
/* The play triangle, drawn with borders: no icon font to wait for. */
.video-embed__icon::after {
    content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
    border-style: solid; border-width: 15px 0 15px 25px;
    border-color: transparent transparent transparent #fff;
}
.video-embed__play:hover .video-embed__icon { transform: scale(1.08); }
.video-embed__play:focus-visible { outline: 3px solid var(--mk-blue); outline-offset: -6px; }
@media (max-width: 640px) { .video-embed__icon { width: 64px; height: 64px; } }

/* Hero: a quiet link down to the company video, under the two buttons. */
.mk-watch-link { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600;
    color: var(--mk-blue-on-navy); text-decoration: none; }
.mk-watch-link:hover { text-decoration: underline; }
.mk-watch-link .material-symbols-outlined { font-size: 1.6rem; }