/* ============================================================================
   MEKOZZA · DESKTOP HOME PAGE — bright & friendly
   ----------------------------------------------------------------------------
   Styles home_desktop.php. Two jobs, both inside @media (min-width: 992px):

     1 · hide the previous desktop markup
     2 · lay out the new page

   Below 992px this file contributes nothing, so the phone keeps the page it
   already had. Every selector is prefixed .mkd, which exists nowhere else in
   the project.

   Tuned for 1920x1080 — a 1440px column, and a hero sized so the fold is
   filled rather than leaving a band of empty background under the content.
   ========================================================================= */

/* Desktop-only. Hidden unconditionally first, so a narrow viewport never
   renders it even for the instant before the media query is evaluated. */
.mkd { display: none; }


@media (min-width: 992px) {

  /* ==========================================================================
     0 · SWAP
     The old blocks are shared with the mobile layout and cannot be deleted,
     so they are hidden at this width and the new page takes their place.
     ====================================================================== */
  body.mkd-on .banner-desktop,
  body.mkd-on .banner-mobile,
  body.mkd-on .petcare-section,
  body.mkd-on .animated-banner,
  body.mkd-on .top-category-section,
  body.mkd-on .pet-layout-container,
  body.mkd-on .pet-section-container,
  body.mkd-on main.category-showcase,
  body.mkd-on .bg-orbs,
  body.mkd-on .premium-badge,
  body.mkd-on .floating-heart {
    display: none !important;
  }

  body.mkd-on .mkd { display: block; }

  /* ==========================================================================
     0b · THE HEADER SEAM
     header_ui.php floats the bar with `position: sticky; top: 15px`. A sticky
     element reserves its own height in the flow and is then drawn 15px lower,
     so the first 15px of whatever follows sits underneath it — here, the top
     of the hero. And the page body is #f5f5f5 while this page is cream, so a
     grey band showed around the floating pill.

     Both are fixed here rather than in header_ui.php, because that file is
     shared by twenty pages and this is the home page's business.
     ====================================================================== */
  body.mkd-on { background: #fff8f0; }
  body.mkd-on .mkd { padding-top: 15px; }



  /* ==========================================================================
     1 · TOKENS
     A warm, sunny palette. Cream rather than white, so the page feels lit
     rather than clinical, and the brand orange has somewhere to sit.
     ====================================================================== */
  .mkd {
    --cream:   #fff8f0;   /* the page ground */
    --cream-2: #ffeede;   /* the alternating band */
    --peach:   #ffe3cc;
    --white:   #ffffff;

    /* Warm ink, not blue-black — a cool grey on a cream page looks dirty. */
    --ink:     #2c1c13;
    --ink-2:   #6b544a;
    --ink-3:   #9b847a;

    --brand:   #ff6b35;
    --brand-2: #ff9350;
    --brand-d: #e2542a;
    --brand-s: #fff0e8;
    --brand-l: rgba(255,107,53,.22);
    --grad:    linear-gradient(135deg, #ff6b35, #ff9350);

    --sun:     #ffb020;
    --sun-s:   #fff3d6;

    --line:    rgba(44,28,19,.08);
    --line-2:  rgba(44,28,19,.15);

    /* Warm-tinted shadows. A neutral grey shadow on cream reads as grime. */
    --e1: 0 2px 4px rgba(120,72,40,.05),  0 12px 26px -16px rgba(120,72,40,.30);
    --e2: 0 3px 8px rgba(120,72,40,.07),  0 28px 54px -28px rgba(120,72,40,.42);
    --e3: 0 6px 14px rgba(120,72,40,.08), 0 48px 90px -40px rgba(120,72,40,.50);
    --e-b: 0 16px 36px -12px rgba(255,107,53,.55);

    /* Friendly geometry: generous, consistently rounded. */
    --r-s:  14px;
    --r-m:  22px;
    --r-l:  30px;
    --r-xl: 40px;
    --r-pill: 999px;

    --wrap: 1440px;
    --gut:  48px;
    --beat: 108px;

    --ease: cubic-bezier(.22, 1, .36, 1);
    --t-fast: 190ms var(--ease);
    --t-med:  380ms var(--ease);
    --t-slow: 760ms var(--ease);

    background: var(--cream);
    color: var(--ink-2);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .mkd *, .mkd *::before, .mkd *::after { box-sizing: border-box; }
  .mkd img { display: block; max-width: 100%; }

  .mkd-wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gut);
  }

  .mkd-section { padding-block: var(--beat); }


  /* ==========================================================================
     2 · TYPE
     Poppins for headings — geometric and round, which is what makes it read
     as friendly rather than corporate. Both faces are loaded by index.php's
     own <head>, so nothing here waits on the footer's stylesheet.
     ====================================================================== */
  .mkd-display {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: clamp(40px, 2.9vw, 54px);
    font-weight: 800;
    line-height: 1.12;
    text-wrap: balance;
    letter-spacing: -.028em;
    color: var(--ink);
    margin: 0 0 20px;
  }
  .mkd-display em {
    font-style: normal;
    position: relative;
    color: var(--brand-d);
    white-space: nowrap;
  }
  /* A hand-drawn-feeling underline under the accent words. Soft, thick and
     rounded, so it reads as a highlighter mark rather than a rule. */
  .mkd-display em::after {
    content: '';
    position: absolute;
    left: -2px; right: -2px; bottom: .06em;
    height: .30em;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, rgba(255,176,32,.45), rgba(255,107,53,.35));
    z-index: -1;
  }

  .mkd-h2 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: clamp(32px, 2.4vw, 44px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.024em;
    color: var(--ink);
    margin: 0;
    text-wrap: balance;
  }

  .mkd-lede {
    font-size: 18px;
    line-height: 1.68;
    color: var(--ink-2);
    margin: 0 0 32px;
    max-width: 46ch;
  }

  .mkd-sub {
    font-size: 16.5px;
    line-height: 1.68;
    color: var(--ink-2);
    margin: 10px auto 0;
    max-width: 56ch;
  }

  .mkd-eyebrow {
    display: inline-block;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-d);
    margin-bottom: 12px;
  }

  .mkd-head { margin-bottom: 48px; text-align: center; }
  .mkd-head--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    text-align: left;
  }

  /* A soft status pill, used in the hero and on the offer panel. */
  .mkd-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px;
    margin-bottom: 22px;
    border-radius: var(--r-pill);
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: var(--e1);
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
  }
  .mkd-pill__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,.18);
  }
  .mkd-pill--on-brand {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.4);
    color: #fff;
    box-shadow: none;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
  }


  /* ==========================================================================
     3 · BUTTONS
     ====================================================================== */
  .mkd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 58px;
    padding: 0 32px;
    border: 0;
    border-radius: var(--r-pill);
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--t-fast), box-shadow var(--t-fast),
                background-color var(--t-fast);
  }
  .mkd-btn svg {
    width: 19px; height: 19px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform var(--t-fast);
  }
  .mkd-btn:hover svg { transform: translateX(4px); }

  .mkd-btn--brand { background: var(--grad); color: #fff; box-shadow: var(--e-b); }
  .mkd-btn--brand:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 46px -12px rgba(255,107,53,.7);
  }

  .mkd-btn--soft {
    background: var(--white);
    color: var(--ink);
    border: 1.5px solid var(--line-2);
    box-shadow: var(--e1);
  }
  .mkd-btn--soft:hover { transform: translateY(-3px); border-color: var(--brand-l); }

  .mkd-btn--outline {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--line-2);
  }
  .mkd-btn--outline:hover { border-color: var(--brand); color: var(--brand-d); transform: translateY(-3px); }

  .mkd-btn--white { background: #fff; color: var(--brand-d); box-shadow: 0 16px 34px -14px rgba(90,30,0,.5); }
  .mkd-btn--white:hover { transform: translateY(-3px); }

  .mkd-btn--lg { height: 62px; padding: 0 38px; font-size: 17px; }


  /* ==========================================================================
     4 · HERO
     Sized so that on a 1080-tall screen the fold is filled by content. An
     earlier version left ~180px of empty ground under the copy on a 1920x1080
     display, which is what made the page feel sparse.
     ====================================================================== */
  .mkd-hero {
    position: relative;
    overflow: hidden;
    padding-block: 36px 52px;
    background:
      radial-gradient(60% 70% at 88% 18%, rgba(255,176,32,.20), transparent 62%),
      radial-gradient(52% 62% at 6% 88%, rgba(255,107,53,.14), transparent 60%),
      var(--cream);
  }

  /* Soft shapes behind everything, for warmth rather than decoration. */
  .mkd-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
  }
  .mkd-blob--a { width: 460px; height: 460px; right: -120px; top: -140px; background: rgba(255,176,32,.28); }
  .mkd-blob--b { width: 380px; height: 380px; left: -150px; bottom: -160px; background: rgba(255,107,53,.20); }
  .mkd-blob--c { width: 300px; height: 300px; right: 34%;  bottom: -180px; background: rgba(255,208,120,.24); }

  .mkd-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
    align-items: center;
    gap: 52px;
    min-height: min(68vh, 600px);
  }

  .mkd-hero__copy { max-width: 640px; }

  .mkd-actions { display: flex; gap: 14px; flex-wrap: wrap; }

  /* --- the three reassurances under the buttons ------------------------- */
  .mkd-ticks { list-style: none; margin: 0; padding: 0; }
  .mkd-ticks li {
    position: relative;
    padding-left: 30px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-2);
  }
  /* Drawn in CSS — cheaper than an icon request and it cannot fail to load. */
  .mkd-ticks li::before {
    content: '';
    position: absolute;
    left: 0; top: 1px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--brand-s);
  }
  .mkd-ticks li::after {
    content: '';
    position: absolute;
    left: 6.5px; top: 7px;
    width: 7px; height: 4px;
    border-left: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: rotate(-45deg);
  }
  .mkd-ticks--row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin-top: 34px;
  }

  /* --- the rotating frame ------------------------------------------------
     Four images that change on their own. It replaces a single photograph in
     an organic blob: the blob crop cut the dog awkwardly at its edges, and
     one still image could only ever say one thing. The frame is a plain
     rounded rectangle, which crops predictably and lets each photograph be
     seen whole. */
  .mkd-hero__art { position: relative; }

  .mkd-hero__frame {
    position: relative;
    width: 100%;
    height: clamp(430px, 36vw, 530px);
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--peach);
    box-shadow: var(--e3);
    /* A hairline of brand light around the edge, so the frame reads as an
       object rather than a hole cut in the page. */
    outline: 1px solid rgba(255,255,255,.7);
    outline-offset: -1px;
  }

  .mkd-hero__slide {
    position: absolute;
    inset: 0;
    display: block;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 900ms var(--ease), visibility 0s linear 900ms;
  }
  .mkd-hero__slide.is-on {
    opacity: 1;
    visibility: visible;
    transition: opacity 900ms var(--ease), visibility 0s;
    z-index: 1;
  }

  .mkd-hero__slide img {
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.06);
    transition: transform 7s linear;
  }
  /* A slow drift while a frame is showing, so the hero is never quite still. */
  .mkd-hero__slide.is-on img { transform: scale(1); }

  /* Where each photograph should sit inside the frame. The array in
     home_desktop.php carried these values but nothing ever applied them, so
     every frame was defaulting to dead centre — which put the floor in shot
     on the ones whose subject sits high. */
  .mkd-hero__slide--1 img { object-position: center 30%; }   /* the hug */
  .mkd-hero__slide--2 img { object-position: center 35%; }   /* grooming */
  .mkd-hero__slide--3 img { object-position: 40% center; }   /* the vet */
  .mkd-hero__slide--4 img { object-position: center 45%; }   /* delivery */

  .mkd-hero__slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(26,12,4,.16) 0%,
      rgba(26,12,4,0)   30%,
      rgba(26,12,4,0)   52%,
      rgba(26,12,4,.60) 100%);
  }

  /* The caption names what is on screen — without it a rotating photograph
     is just decoration. */
  .mkd-hero__cap {
    position: absolute;
    left: 20px; bottom: 20px;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "t a" "s a";
    align-items: center;
    gap: 0 16px;
    padding: 14px 18px;
    border-radius: var(--r-m);
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.3);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
            backdrop-filter: blur(16px) saturate(150%);
    color: #fff;
    box-shadow: 0 16px 40px -22px rgba(0,0,0,.8);
    transform: translateY(14px);
    opacity: 0;
    transition: transform 800ms var(--ease) 160ms, opacity 800ms var(--ease) 160ms;
  }
  .mkd-hero__slide.is-on .mkd-hero__cap { transform: none; opacity: 1; }

  .mkd-hero__cap strong {
    grid-area: t;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.018em;
    line-height: 1.2;
  }
  .mkd-hero__cap small {
    grid-area: s;
    font-size: 13px;
    color: rgba(255,255,255,.88);
  }
  .mkd-hero__cap svg {
    grid-area: a;
    width: 34px; height: 34px;
    padding: 8px;
    border-radius: 50%;
    background: var(--grad);
    fill: none; stroke: #fff; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform var(--t-fast);
  }
  .mkd-hero__slide:hover .mkd-hero__cap svg { transform: translateX(3px); }

  /* --- dots --------------------------------------------------------------
     Real buttons, so the rotation can be driven from the keyboard. */
  .mkd-hero__dots {
    position: absolute;
    right: 20px; top: 20px;
    z-index: 3;
    display: flex;
    gap: 7px;
    padding: 7px 9px;
    border-radius: var(--r-pill);
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.3);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
  }
  .mkd-hero__dot {
    width: 9px; height: 9px;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: rgba(255,255,255,.55);
    cursor: pointer;
    transition: width var(--t-med), background var(--t-med);
  }
  .mkd-hero__dot.is-on { width: 26px; background: #fff; }
  .mkd-hero__dot span { display: block; }


  .mkd-tag {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px 12px 12px;
    border-radius: var(--r-pill);
    background: var(--white);
    box-shadow: var(--e2);
    text-decoration: none;
    color: var(--ink);
    transition: transform var(--t-med), box-shadow var(--t-med);
  }
  .mkd-tag:hover { transform: translateY(-5px) scale(1.03); box-shadow: var(--e3); }
  .mkd-tag img {
    width: 48px; height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 48px;
  }
  .mkd-tag span { display: grid; gap: 1px; line-height: 1.25; }
  .mkd-tag b {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 700;
  }
  .mkd-tag i {
    font-style: normal;
    font-size: 14px;
    font-weight: 800;
    color: var(--brand-d);
  }

  .mkd-tag--1 { left: -34px;  top: 16%; animation: mkdBob 5.5s ease-in-out infinite; }
  .mkd-tag--2 { right: -22px; bottom: 20%; animation: mkdBob 6.5s ease-in-out .8s infinite; }

  /* Moved to the bottom right. At bottom-left it sat on top of the frame's
     caption and hid the price line under it. */
  .mkd-tag--stat {
    left: auto;
    right: -16px;
    bottom: -24px;
    flex-direction: row;
    gap: 12px;
    padding: 14px 22px;
    background: var(--grad);
    color: #fff;
    box-shadow: var(--e-b);
    animation: mkdBob 7s ease-in-out .4s infinite;
  }
  .mkd-tag--stat strong {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
  }
  .mkd-tag--stat span { font-size: 11.5px; font-weight: 600; opacity: .92; }

  @keyframes mkdBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
  }


  /* ==========================================================================
     5 · CATEGORIES
     The friendliest thing on the page, so it comes first after the hero.
     ====================================================================== */
  .mkd-cats { background: var(--cream); }

  .mkd-catrow {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
  }

  .mkd-cat {
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: 20px 12px 18px;
    border-radius: var(--r-l);
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: var(--e1);
    text-decoration: none;
    color: var(--ink);
    text-align: center;
    transition: transform var(--t-med), box-shadow var(--t-med);
  }
  .mkd-cat:hover { transform: translateY(-8px); box-shadow: var(--e2); }

  /* Each tile gets its own warm tint behind the photograph, so the row reads
     as colourful without six different card colours fighting each other. */
  .mkd-cat__pic {
    width: 92px; height: 92px;
    border-radius: 50%;
    padding: 5px;
    margin-bottom: 10px;
    display: grid;
    place-items: center;
  }
  .mkd-cat__pic img {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    transition: transform var(--t-med);
  }
  .mkd-cat:hover .mkd-cat__pic img { transform: scale(1.07); }

  .mkd-cat--1 .mkd-cat__pic { background: #ffe6d2; }
  .mkd-cat--2 .mkd-cat__pic { background: #ffeec2; }
  .mkd-cat--3 .mkd-cat__pic { background: #ffdcd2; }
  .mkd-cat--4 .mkd-cat__pic { background: #d9f2e4; }
  .mkd-cat--5 .mkd-cat__pic { background: #d6ecff; }
  .mkd-cat--6 .mkd-cat__pic { background: #f0e4ff; }

  .mkd-cat strong {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 700;
  }
  .mkd-cat__meta { font-size: 12.5px; color: var(--ink-3); }


  /* ==========================================================================
     6 · SERVICES — interactive showcase
     A list on the left, a stage on the right. The stage shows whichever
     service is under the pointer and cycles on its own until someone reaches
     for the list. Replaces a dense five-column bento that read as cramped.
     ====================================================================== */
  .mkd-services {
    background:
      radial-gradient(50% 60% at 96% 4%, rgba(255,176,32,.18), transparent 62%),
      radial-gradient(40% 50% at 0% 100%, rgba(255,107,53,.10), transparent 60%),
      var(--cream-2);
  }

  .mkd-head__aside {
    display: grid;
    justify-items: end;
    gap: 16px;
    max-width: 380px;
    text-align: right;
  }
  .mkd-head__aside p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--ink-2);
  }

  .mkd-show {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 36px;
    align-items: stretch;
  }

  /* --- the list --------------------------------------------------------- */
  .mkd-show__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
    counter-reset: none;
  }

  .mkd-show__item {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 13px 18px 13px 16px;
    border-radius: var(--r-m);
    border: 1px solid transparent;
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    transition: background var(--t-med), border-color var(--t-med),
                box-shadow var(--t-med), transform var(--t-med);
  }
  .mkd-show__item:hover { background: rgba(255,255,255,.55); }

  .mkd-show__item.is-on {
    background: var(--white);
    border-color: var(--line);
    box-shadow: var(--e2);
    transform: translateX(6px);
  }

  .mkd-show__n {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-3);
    transition: color var(--t-med);
  }
  .mkd-show__item.is-on .mkd-show__n { color: var(--brand); }

  .mkd-show__txt { display: grid; gap: 2px; min-width: 0; }
  .mkd-show__txt strong {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: inherit;
  }
  /* The description is only shown on the active row. Ten rows each carrying
     a sentence is a wall of text; one sentence under the row you are looking
     at is a caption. */
  .mkd-show__txt small {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ink-2);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height var(--t-med), opacity var(--t-med);
  }
  .mkd-show__item.is-on .mkd-show__txt small { max-height: 42px; opacity: 1; }

  .mkd-live {
    font-style: normal;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: #fee2e2;
    color: #dc2626;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
  }

  .mkd-show__meta {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--brand-d);
    white-space: nowrap;
  }

  /* Progress along the foot of the active row, so the cycling is legible
     rather than something that just happens to you. */
  .mkd-show__bar {
    position: absolute;
    left: 0; bottom: 0;
    height: 3px;
    width: 0;
    background: var(--grad);
  }
  .mkd-show__item.is-on .mkd-show__bar { animation: mkdBar 5s linear forwards; }
  .mkd-show.is-paused .mkd-show__bar { animation: none; width: 100%; opacity: .35; }
  @keyframes mkdBar { from { width: 0; } to { width: 100%; } }

  /* --- the stage -------------------------------------------------------- */
  .mkd-show__stage {
    position: relative;
    min-height: 620px;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--peach);
    box-shadow: var(--e3);
  }

  .mkd-show__slide {
    position: absolute;
    inset: 0;
    display: block;
    text-decoration: none;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity 700ms var(--ease), visibility 0s linear 700ms;
  }
  .mkd-show__slide.is-on {
    opacity: 1;
    visibility: visible;
    transition: opacity 700ms var(--ease), visibility 0s;
    z-index: 1;
  }

  .mkd-show__slide img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    transition: transform 6s var(--ease);
  }
  /* A slow push-in while a slide is showing — the image settles rather than
     sitting still. */
  .mkd-show__slide.is-on img { transform: scale(1); }

  .mkd-show__slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(24,10,2,.22) 0%,
      rgba(24,10,2,0)   26%,
      rgba(24,10,2,0)   48%,
      rgba(24,10,2,.62) 100%);
  }

  .mkd-show__count {
    position: absolute;
    right: 24px; top: 22px;
    z-index: 2;
    padding: 7px 14px;
    border-radius: var(--r-pill);
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.36);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
  }

  /* The caption card: frosted glass over the photograph. */
  .mkd-show__card {
    position: absolute;
    left: 24px; right: 24px; bottom: 24px;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "price price"
      "title cta"
      "desc  cta";
    align-items: end;
    gap: 6px 24px;
    padding: 24px 26px;
    border-radius: var(--r-l);
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.32);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
            backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 20px 50px -24px rgba(0,0,0,.6);
    transform: translateY(18px);
    opacity: 0;
    transition: transform 700ms var(--ease) 120ms, opacity 700ms var(--ease) 120ms;
  }
  .mkd-show__slide.is-on .mkd-show__card { transform: none; opacity: 1; }

  .mkd-show__price {
    grid-area: price;
    justify-self: start;
    padding: 5px 12px;
    margin-bottom: 6px;
    border-radius: var(--r-pill);
    background: #fff;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--brand-d);
  }
  .mkd-show__card strong {
    grid-area: title;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.026em;
  }
  .mkd-show__desc {
    grid-area: desc;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255,255,255,.92);
  }
  .mkd-show__cta {
    grid-area: cta;
    align-self: end;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 52px;
    padding: 0 26px;
    border-radius: var(--r-pill);
    background: var(--grad);
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: var(--e-b);
  }
  .mkd-show__cta svg {
    width: 18px; height: 18px;
    fill: none; stroke: #fff; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform var(--t-fast);
  }
  .mkd-show__stage:hover .mkd-show__cta svg { transform: translateX(4px); }


  /* ==========================================================================
     6b · CATEGORIES — arch cards
     Each family in its own tinted card, the photograph cut into an arch.
     Taller than the circular thumbnails they replace, so the animals are
     actually visible rather than being icons.
     ====================================================================== */
  .mkd-cat {
    gap: 4px;
    padding: 14px 14px 20px;
  }
  .mkd-cat__pic {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1.08;
    padding: 0;
    margin-bottom: 14px;
    border-radius: 999px 999px 22px 22px;
    overflow: hidden;
  }
  .mkd-cat__pic img {
    border-radius: 0;
  }
  .mkd-cat--1 { background: linear-gradient(180deg, #fff 0%, #fff1e6 100%); }
  .mkd-cat--2 { background: linear-gradient(180deg, #fff 0%, #fff6dc 100%); }
  .mkd-cat--3 { background: linear-gradient(180deg, #fff 0%, #ffece6 100%); }
  .mkd-cat--4 { background: linear-gradient(180deg, #fff 0%, #e9f7ef 100%); }
  .mkd-cat--5 { background: linear-gradient(180deg, #fff 0%, #e8f3ff 100%); }
  .mkd-cat--6 { background: linear-gradient(180deg, #fff 0%, #f4ecff 100%); }


  /* ==========================================================================
     6c · LINK COLOUR, IN EVERY STATE
     index.php loads Bootstrap 4.6.2, whose reboot sets
         a:hover { color: #0056b3; text-decoration: underline; }
     That is (0,1,1) specificity and beat every card here that stated its
     colour with a single class (0,1,0) — so under the pointer, headings and
     labels turned Bootstrap blue. Each link's colour is restated with its
     states, which is (0,2,0) and wins.
     ====================================================================== */
  .mkd a:hover,
  .mkd a:focus,
  .mkd a:active { text-decoration: none; }

  .mkd-show__item,  .mkd-show__item:hover,  .mkd-show__item:focus,
  .mkd-cat,         .mkd-cat:hover,         .mkd-cat:focus,
  .mkd-card,        .mkd-card:hover,        .mkd-card:focus,
  .mkd-tag,         .mkd-tag:hover,         .mkd-tag:focus,
  .mkd-btn--soft,   .mkd-btn--soft:hover,   .mkd-btn--soft:focus { color: var(--ink); }

  .mkd-show__slide, .mkd-show__slide:hover,
  .mkd-btn--brand,  .mkd-btn--brand:hover,  .mkd-btn--brand:focus { color: #fff; }

  .mkd-btn--white,  .mkd-btn--white:hover,  .mkd-btn--white:focus { color: var(--brand-d); }

  .mkd-btn--outline,
  .mkd-btn--outline:focus { color: var(--ink); }
  .mkd-btn--outline:hover { color: var(--brand-d); }

  /* ==========================================================================
     7 · FEATURED LISTINGS
     ====================================================================== */
  .mkd-featured { background: var(--cream); }

  .mkd-cards {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
  }

  .mkd-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--r-l);
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: var(--e1);
    text-decoration: none;
    color: var(--ink);
    transition: transform var(--t-med), box-shadow var(--t-med);
  }
  .mkd-card:hover { transform: translateY(-8px); box-shadow: var(--e2); }

  .mkd-card__media { position: relative; overflow: hidden; }
  .mkd-card__media img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform var(--t-slow);
  }
  .mkd-card:hover .mkd-card__media img { transform: scale(1.07); }

  .mkd-card__cat {
    position: absolute;
    left: 12px; top: 12px;
    padding: 6px 13px;
    border-radius: var(--r-pill);
    background: rgba(255,255,255,.94);
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .mkd-card__rating {
    position: absolute;
    right: 12px; top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 11px;
    border-radius: var(--r-pill);
    background: rgba(255,255,255,.94);
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
  }
  .mkd-card__rating svg { width: 13px; height: 13px; fill: var(--sun); }

  .mkd-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px 15px;
    flex: 1;
  }
  .mkd-card__body h3 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.012em;
    margin: 0;
  }
  .mkd-price {
    margin-top: auto;      /* prices line up however long the name runs */
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: var(--brand-d);
  }


  /* ==========================================================================
     8 · WHY MEKOZZA
     ====================================================================== */
  .mkd-why { background: var(--cream-2); }

  .mkd-whyrow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .mkd-why__item {
    padding: 22px;
    border-radius: var(--r-l);
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: var(--e1);
    transition: transform var(--t-med), box-shadow var(--t-med);
  }
  .mkd-why__item:hover { transform: translateY(-6px); box-shadow: var(--e2); }

  .mkd-why__ico {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: var(--r-s);
    margin-bottom: 14px;
  }
  .mkd-why__ico svg {
    width: 27px; height: 27px;
    fill: none; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .mkd-why__ico--1 { background: #ffe6d2; } .mkd-why__ico--1 svg { stroke: #e2542a; }
  .mkd-why__ico--2 { background: #ffd9dd; } .mkd-why__ico--2 svg { stroke: #e0455c; }
  .mkd-why__ico--3 { background: #d6ecff; } .mkd-why__ico--3 svg { stroke: #2b7cc4; }
  .mkd-why__ico--4 { background: #d9f2e4; } .mkd-why__ico--4 svg { stroke: #219a6c; }

  .mkd-why__item h3 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.018em;
    color: var(--ink);
    margin: 0 0 9px;
  }
  .mkd-why__item p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-2); }


  /* ==========================================================================
     9 · ₹29 OFFER
     Warm and bright rather than dark — the page should end on the same note
     it started on.
     ====================================================================== */
  .mkd-offer { padding-block: var(--beat); background: var(--cream); }

  .mkd-offer__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    align-items: center;
    gap: 48px;
    padding: 44px 52px;
    /* .mkd-wrap supplies the gutter as padding, and the panel's own padding
       replaced it — so the orange panel ran 48px past the content edge of
       every other section on both sides. Stating the width here puts its
       edges on the same line as the bento and the cards above it. */
    width: calc(100% - var(--gut) * 2);
    max-width: calc(var(--wrap) - var(--gut) * 2);
    border-radius: var(--r-xl);
    background:
      radial-gradient(70% 120% at 88% 12%, rgba(255,255,255,.26), transparent 60%),
      var(--grad);
    box-shadow: var(--e-b);
    overflow: hidden;
  }

  .mkd-offer__title {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: clamp(34px, 2.6vw, 46px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.026em;
    color: #fff;
    margin: 0 0 16px;
  }
  .mkd-offer__copy > p {
    font-size: 17px;
    line-height: 1.66;
    color: rgba(255,255,255,.92);
    margin: 0 0 26px;
    max-width: 46ch;
  }

  .mkd-ticks--on-brand { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 22px; margin-bottom: 26px; }
  .mkd-ticks--on-brand li { color: #fff; font-size: 15.5px; }
  .mkd-ticks--on-brand li::before { background: rgba(255,255,255,.26); }
  .mkd-ticks--on-brand li::after { border-color: #fff; }

  .mkd-fine { margin: 14px 0 0; font-size: 13px; color: rgba(255,255,255,.72); }

  .mkd-offer__art { position: relative; height: 260px; }
  .mkd-offer__pic {
    position: absolute;
    display: block;
    border-radius: var(--r-l);
    overflow: hidden;
    box-shadow: 0 26px 50px -20px rgba(90,30,0,.55);
    border: 4px solid rgba(255,255,255,.9);
  }
  .mkd-offer__pic img { width: 100%; height: 100%; object-fit: cover; }
  .mkd-offer__pic--1 { width: 186px; height: 230px; left: 2%;  top: 8px;   transform: rotate(-7deg); }
  .mkd-offer__pic--2 { width: 158px; height: 196px; left: 38%; top: 122px; transform: rotate(5deg); }
  .mkd-offer__pic--3 { width: 168px; height: 208px; left: 66%; top: 18px;  transform: rotate(9deg); }


  /* ==========================================================================
     10 · MOTION
     Scroll reveals are AOS's job now (data-aos attributes in
     home_desktop.php, initialised in home-desktop.js). The scroll-driven
     CSS version that used to live here has gone: running both meant every
     card animated twice, fighting over opacity and transform.

     What stays is the hero's entrance. It is already in view when the page
     opens, so it cannot be a scroll reveal — it runs on a timer, staggered
     down the column.

     AOS is told about prefers-reduced-motion when it is initialised; this
     block honours it directly.
     ====================================================================== */
  @media (prefers-reduced-motion: no-preference) {
    .mkd-hero__copy > * { animation: mkdIn 820ms var(--ease) both; }
    .mkd-hero__copy > *:nth-child(1) { animation-delay:  40ms; }
    .mkd-hero__copy > *:nth-child(2) { animation-delay: 110ms; }
    .mkd-hero__copy > *:nth-child(3) { animation-delay: 180ms; }
    .mkd-hero__copy > *:nth-child(4) { animation-delay: 250ms; }
    .mkd-hero__copy > *:nth-child(5) { animation-delay: 320ms; }
    .mkd-hero__frame { animation: mkdIn 900ms var(--ease) 120ms both; }
  }
  @keyframes mkdIn {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
  }

  /* AOS animates transform and opacity. Anything it is attached to must not
     also be running a transform of its own at rest, or the two overwrite
     each other — so the reveal targets are wrappers, never a card that
     lifts on hover. */
  .mkd [data-aos] { will-change: opacity, transform; }
  .mkd [data-aos].aos-animate { will-change: auto; }

  /* AOS's finished state is written as
         [data-aos^="fade"][data-aos^="fade"].aos-animate { transform: … }
     — a doubled attribute selector, so (0,3,0). A hover rule written with a
     single class is (0,2,0) and loses to it, which would have quietly killed
     the lift on every card carrying a reveal. Restating them one step
     stronger puts them back. */
  .mkd .mkd-cat:hover      { transform: translateY(-8px); }
  .mkd .mkd-card:hover     { transform: translateY(-8px); }
  .mkd .mkd-why__item:hover{ transform: translateY(-6px); }
  .mkd .mkd-show__item.is-on { transform: translateX(6px); }


  /* ==========================================================================
     11 · FOCUS
     ====================================================================== */
  .mkd a:focus-visible, .mkd button:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 3px;
    border-radius: var(--r-s);
  }
  .mkd-offer a:focus-visible { outline-color: #fff; }


  /* ==========================================================================
     12 · REDUCED MOTION
     ====================================================================== */
  @media (prefers-reduced-motion: reduce) {
    .mkd *, .mkd *::before, .mkd *::after {
      animation-duration: .001ms !important;
      animation-delay: 0ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
    }
  }


  /* ==========================================================================
     13 · NARROWER DESKTOPS
     ====================================================================== */
  @media (max-width: 1500px) {
    .mkd { --wrap: 1280px; --gut: 40px; }
  }
  @media (max-width: 1280px) {
    .mkd { --wrap: 1100px; --gut: 32px; --beat: 72px; }
    .mkd-catrow { grid-template-columns: repeat(3, 1fr); }
    .mkd-cards  { grid-template-columns: repeat(3, 1fr); }
    .mkd-whyrow { grid-template-columns: repeat(2, 1fr); }
    .mkd-show__stage { min-height: 560px; }
    .mkd-show__card strong { font-size: 25px; }
  }
  @media (max-width: 1060px) {
    .mkd-hero__inner { grid-template-columns: 1fr; gap: 40px; min-height: 0; }
    .mkd-hero__art { max-width: 620px; }
    .mkd-offer__inner { grid-template-columns: 1fr; padding: 40px 36px; }
    .mkd-offer__art { height: 240px; max-width: 520px; }
    .mkd-ticks--on-brand { grid-template-columns: 1fr; }
    .mkd-show { grid-template-columns: 1fr; }
    .mkd-show__stage { min-height: 460px; }
    .mkd-head--row { flex-direction: column; align-items: flex-start; }
    .mkd-head__aside { justify-items: start; text-align: left; }
  }
}