/* ==========================================================================
   Makhmal — Contact page
   ========================================================================== */

/* ---- Hero: deliberately mirrors .mk-about-hero (same markup shape, same
   rules under this page's own class prefix) so the two pages' heroes read
   as one unified pattern — see makhmal-about.css if this ever needs to
   change, keep both in sync by hand (no shared file, per how the rest of
   this theme keeps each page's CSS self-contained). ---- */
.mk-contact-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(420px, 50vw, 560px);
  display: flex;
  align-items: center;
  padding-block: 120px 64px;
  overflow: hidden;
  background: var(--mk-color-bg);
}

.mk-contact-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.mk-contact-hero__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transform: scale(1.02);
}

.mk-contact-hero__media-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 25% 15%, color-mix(in srgb, var(--mk-blue-highlight) 45%, transparent) 0%, transparent 55%),
    linear-gradient(195deg, color-mix(in srgb, var(--mk-indigo) 60%, transparent) 0%, rgba(19, 15, 36, 0.72) 55%, rgba(15, 12, 28, 0.9) 100%);
}

.mk-contact-hero__deco {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.mk-contact-hero__ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.28);
}

.mk-contact-hero__ring--1 { width: 340px; height: 340px; top: -120px; inset-inline-end: -80px; animation: mk-c-spin 46s linear infinite; }
.mk-contact-hero__ring--2 { width: 220px; height: 220px; bottom: -90px; inset-inline-start: 4%; animation: mk-c-spin 34s linear infinite reverse; }

.mk-contact-hero__deco-item {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  color: #fff;
  box-shadow: 0 8px 22px rgba(15, 12, 28, 0.25);
  animation: mk-c-float 5.5s ease-in-out infinite;
}

.mk-contact-hero__deco-item svg { width: 46%; height: 46%; }

.mk-contact-hero__deco-item--1 { width: 54px; height: 54px; top: 18%; inset-inline-start: 8%; color: var(--mk-pastel-lemon); animation-delay: 0.2s; }
.mk-contact-hero__deco-item--2 { width: 40px; height: 40px; top: 62%; inset-inline-start: 14%; color: var(--mk-pastel-rose); animation-delay: 1.4s; }
.mk-contact-hero__deco-item--3 { width: 46px; height: 46px; top: 22%; inset-inline-end: 10%; color: var(--mk-pastel-sky); animation-delay: 0.8s; }
.mk-contact-hero__deco-item--4 { width: 34px; height: 34px; top: 72%; inset-inline-end: 16%; color: var(--mk-pastel-lemon); animation-delay: 2.1s; }
.mk-contact-hero__deco-item--5 { width: 30px; height: 30px; top: 42%; inset-inline-end: 4%; color: var(--mk-pastel-peach); animation-delay: 1.7s; }

.mk-contact-hero .mk-container {
  position: relative;
  z-index: 1;
}

.mk-contact-hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}

.mk-contact-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: var(--mk-radius-pill);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: var(--mk-fs-xs);
  font-weight: 700;
}

.mk-contact-hero__kicker svg { width: 15px; height: 15px; }

.mk-contact-hero__title {
  font-size: clamp(2.1rem, 4.6vw, 3rem);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 6px 26px rgba(15, 12, 28, 0.4);
}

.mk-contact-hero__lede {
  font-size: var(--mk-fs-lg);
  line-height: 2;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 14px rgba(15, 12, 28, 0.35);
}

.mk-contact-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

.mk-contact-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--mk-radius-pill);
  background: rgba(255, 255, 255, 0.94);
  color: var(--mk-color-primary-hover);
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(15, 12, 28, 0.22);
  transition: transform var(--mk-transition);
}

.mk-contact-hero__badge:hover { transform: translateY(-3px); }
.mk-contact-hero__badge svg { width: 15px; height: 15px; color: var(--mk-color-accent); }

@media (max-width: 991px) {
  .mk-contact-hero { min-height: clamp(380px, 90vw, 480px); padding-block: 96px 48px; }
  .mk-contact-hero__ring--1, .mk-contact-hero__ring--2 { display: none; }
  .mk-contact-hero__deco-item--3, .mk-contact-hero__deco-item--4, .mk-contact-hero__deco-item--5 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mk-contact-hero__deco-item, .mk-contact-hero__ring {
    animation: none;
  }
}

.mk-contact {
  position: relative;
  padding-block: 56px 72px;
  overflow: hidden;
}

.mk-contact__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.mk-contact__bg-paw {
  position: absolute;
  height: auto;
  color: var(--mk-tint-shade);
  opacity: 0.45;
  animation: mk-c-float 6s ease-in-out infinite;
}

.mk-contact__bg-paw--1 { width: 44px; top: 14%; inset-inline-start: 5%; rotate: -20deg; }
.mk-contact__bg-paw--2 { width: 28px; top: 62%; inset-inline-start: 2%; rotate: 18deg; animation-delay: 1.2s; }
.mk-contact__bg-paw--3 { width: 34px; bottom: 10%; inset-inline-end: 8%; rotate: 12deg; animation-delay: 2s; }

.mk-contact .mk-container {
  position: relative;
  z-index: 1;
}

/* ---- Layout ---- */
.mk-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 32px;
  align-items: center;
}

/* ---- Media ---- */
.mk-contact__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.mk-contact__ring {
  position: absolute;
  width: 86%;
  aspect-ratio: 1;
  border-radius: 48% 52% 53% 47% / 50% 48% 52% 50%;
  border: 2px dashed var(--mk-blue-highlight);
  opacity: 0.5;
  animation: mk-c-spin 28s linear infinite;
}

.mk-contact__frame {
  position: relative;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 54% 46% 48% 52% / 46% 53% 47% 54%;
  overflow: hidden;
  box-shadow: var(--mk-shadow-lg);
  animation: mk-c-wobble 13s ease-in-out infinite;
}

.mk-contact__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mk-contact__sticker {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-surface);
  box-shadow: var(--mk-shadow-md);
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  color: var(--mk-color-text);
  white-space: nowrap;
  animation: mk-c-float 4.6s ease-in-out infinite;
}

.mk-contact__sticker svg {
  width: 16px;
  height: 16px;
}

.mk-contact__sticker--top {
  top: 6%;
  inset-inline-start: -2%;
}

.mk-contact__sticker--top svg {
  color: var(--mk-color-accent);
}

.mk-contact__sticker--bottom {
  bottom: 8%;
  inset-inline-end: -2%;
  animation-delay: 1.5s;
}

.mk-contact__sticker--bottom svg {
  color: var(--mk-pastel-mint);
}

.mk-contact__media-paw {
  position: absolute;
  z-index: 2;
  width: 38px;
  height: auto;
  bottom: 2%;
  inset-inline-start: 10%;
  color: var(--mk-magenta);
  opacity: 0.7;
  rotate: -14deg;
  animation: mk-c-float 5.4s ease-in-out infinite;
  animation-delay: 0.7s;
}

/* ---- Methods ---- */
.mk-contact__panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mk-contact__panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-lg);
  font-weight: 700;
  color: var(--mk-color-text);
}

.mk-contact__panel-title svg {
  width: 18px;
  height: 18px;
  color: var(--mk-color-accent);
}

.mk-methods {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mk-method {
  --mk-method-c: var(--mk-color-primary);
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--mk-radius-lg);
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-border);
  box-shadow: var(--mk-shadow-sm);
  overflow: hidden;
  transition: transform var(--mk-transition), box-shadow var(--mk-transition),
              border-color var(--mk-transition), background var(--mk-transition);
}

.mk-method:hover {
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--mk-method-c) 8%, #fff);
  border-color: color-mix(in srgb, var(--mk-method-c) 45%, #fff);
  box-shadow: var(--mk-shadow-md);
}

.mk-method__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 38% 62% 55% 45% / 52% 44% 56% 48%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mk-method-c);
  color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--mk-method-c) 42%, transparent);
  transition: transform var(--mk-transition), border-radius 0.45s ease;
}

.mk-method__icon svg {
  width: 21px;
  height: 21px;
}

.mk-method:hover .mk-method__icon {
  transform: rotate(-8deg) scale(1.06);
  border-radius: 58% 42% 45% 55% / 44% 56% 44% 56%;
}

.mk-method__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.mk-method__label {
  font-size: var(--mk-fs-xs);
  color: var(--mk-color-text-muted);
}

.mk-method__value {
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-base);
  font-weight: 700;
  color: var(--mk-color-text);
  letter-spacing: 0.4px;
}

.mk-method__go {
  margin-inline-start: auto;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--mk-method-c);
  opacity: 0;
  translate: 8px 0;
  transition: opacity var(--mk-transition), translate var(--mk-transition);
}

.mk-method:hover .mk-method__go {
  opacity: 1;
  translate: 0 0;
}

.mk-method--phone { --mk-method-c: var(--mk-blue); }
.mk-method--insta { --mk-method-c: var(--mk-magenta); }
.mk-method--chat { --mk-method-c: var(--mk-pastel-mint); }

/* ---- Hours ---- */
.mk-hours {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--mk-radius-lg);
  background: var(--mk-gradient-cta);
  color: #fff;
  box-shadow: var(--mk-shadow-md);
  position: relative;
  overflow: hidden;
}

.mk-hours__shine {
  position: absolute;
  width: 200px;
  height: 200px;
  top: -110px;
  inset-inline-end: -50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.mk-hours__icon {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.24);
}

.mk-hours__icon svg {
  width: 20px;
  height: 20px;
}

.mk-hours__text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mk-hours__label {
  font-size: var(--mk-fs-xs);
  color: rgba(255, 255, 255, 0.85);
}

.mk-hours__value {
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-lg);
  font-weight: 700;
}

.mk-hours__dot {
  position: relative;
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--mk-radius-pill);
  background: rgba(255, 255, 255, 0.2);
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  white-space: nowrap;
}

.mk-hours__dot i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6ef0b8;
  box-shadow: 0 0 0 0 rgba(110, 240, 184, 0.7);
  animation: mk-c-pulse 2s ease-out infinite;
}

/* outside working hours the pill must stop claiming someone is listening */
.mk-hours__dot.is-closed i {
  background: #ffd166;
  box-shadow: none;
  animation: none;
}

/* ---- Closing note ---- */
.mk-contact__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  justify-content: center;
  padding: 16px 18px;
  border-radius: var(--mk-radius-lg);
  background: var(--mk-color-bg-soft);
  border: 1px dashed var(--mk-color-border);
  font-size: var(--mk-fs-sm);
  line-height: 2;
  color: var(--mk-color-text-soft);
}

.mk-contact__note svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 7px;
  color: var(--mk-color-accent-2);
}

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

@keyframes mk-c-wobble {
  0%, 100% { border-radius: 54% 46% 48% 52% / 46% 53% 47% 54%; }
  50%      { border-radius: 46% 54% 55% 45% / 54% 46% 52% 48%; }
}

@keyframes mk-c-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes mk-c-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(110, 240, 184, 0.7); }
  70%  { box-shadow: 0 0 0 9px rgba(110, 240, 184, 0); }
  100% { box-shadow: 0 0 0 0 rgba(110, 240, 184, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .mk-contact__bg-paw,
  .mk-contact__ring,
  .mk-contact__frame,
  .mk-contact__sticker,
  .mk-contact__media-paw,
  .mk-hours__dot i {
    animation: none;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991px) {
  .mk-contact {
    padding-block: 42px 56px;
  }

  .mk-contact__grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .mk-contact__media {
    order: -1;
    padding: 6px;
  }

  .mk-contact__frame {
    width: min(300px, 62%);
  }

  .mk-contact__ring {
    width: min(330px, 70%);
  }

  .mk-contact__bg-paw--2 {
    display: none;
  }
}

@media (max-width: 620px) {
  .mk-contact {
    padding-block: 32px 44px;
  }

  .mk-contact__frame {
    width: min(230px, 66%);
  }

  .mk-contact__ring {
    width: min(258px, 74%);
  }

  .mk-contact__sticker {
    font-size: 0.68rem;
    padding: 7px 12px;
  }

  .mk-contact__sticker--top { inset-inline-start: 0; }
  .mk-contact__sticker--bottom { inset-inline-end: 0; }

  .mk-method {
    padding: 13px 14px;
    gap: 11px;
  }

  .mk-method__icon {
    width: 42px;
    height: 42px;
  }

  .mk-method__value {
    font-size: var(--mk-fs-sm);
  }

  .mk-method__go {
    display: none;
  }

  /* the live-status pill has nowhere to sit on one line here */
  .mk-hours {
    flex-wrap: wrap;
    gap: 12px;
  }

  .mk-hours__dot {
    margin-inline-start: 0;
    width: 100%;
    justify-content: center;
  }

  .mk-contact__note {
    font-size: var(--mk-fs-xs);
  }
}

/* ==========================================================================
   Sec 2 — "Reach us": message form + auto-advancing Instagram gallery
   ========================================================================== */

.mk-reach {
  padding-block: 20px 84px;
}

.mk-reach__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}

/* ---- Form (start side / right in RTL) ---- */
.mk-reach__form-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-margin-top: 100px;
}

/* result of a submit, printed by the server after the redirect */
.mk-reach__notice {
  padding: 13px 16px;
  border-radius: var(--mk-radius-md);
  font-size: var(--mk-fs-sm);
  line-height: 1.9;
  border: 1px solid transparent;
}

.mk-reach__notice--ok {
  background: color-mix(in srgb, #2f9e6a 12%, #fff);
  border-color: color-mix(in srgb, #2f9e6a 35%, #fff);
  color: #24714f;
}

.mk-reach__notice--error {
  background: color-mix(in srgb, var(--mk-color-accent-2) 10%, #fff);
  border-color: color-mix(in srgb, var(--mk-color-accent-2) 35%, #fff);
  color: var(--mk-color-accent-2);
}

/* honeypot: taken out of sight without display:none, because a bot that
   reads the stylesheet skips display:none fields — and a screen reader is
   kept out by aria-hidden on the wrapper instead */
.mk-reach__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mk-reach__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  padding: 32px;
  border-radius: var(--mk-radius-lg);
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-border);
  box-shadow: var(--mk-shadow-sm);
}

.mk-reach__form-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 6px 15px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-bg-muted);
  color: var(--mk-color-primary-hover);
  font-size: var(--mk-fs-xs);
  font-weight: 700;
}

.mk-reach__form-kicker svg { width: 15px; height: 15px; }

.mk-reach__form-title {
  font-size: var(--mk-fs-xl);
  font-weight: 700;
  color: var(--mk-color-text);
}

.mk-reach__form-text {
  margin-top: -8px;
  font-size: var(--mk-fs-sm);
  line-height: 1.9;
  color: var(--mk-color-text-soft);
}

.mk-reach__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.mk-reach__field-label {
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  color: var(--mk-color-text-soft);
}

.mk-reach__input {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--mk-radius-md);
  border: 1px solid var(--mk-color-border);
  background: var(--mk-color-bg-soft);
  color: var(--mk-color-text);
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-sm);
  transition: border-color var(--mk-transition), box-shadow var(--mk-transition);
}

.mk-reach__input::placeholder { color: var(--mk-color-text-muted); }

.mk-reach__input:focus {
  outline: none;
  border-color: var(--mk-blue-highlight);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-blue-highlight) 25%, transparent);
}

.mk-reach__textarea {
  resize: vertical;
  min-height: 120px;
}

.mk-reach__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
  padding: 15px 30px;
  border: none;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-gradient-cta);
  color: var(--mk-color-text-on-brand);
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  box-shadow: var(--mk-shadow-md);
  transition: box-shadow var(--mk-transition), transform var(--mk-transition);
}

.mk-reach__submit svg { width: 17px; height: 17px; }

.mk-reach__submit:hover {
  box-shadow: var(--mk-shadow-lg);
  transform: translateY(-2px);
}

/* ---- Gallery (end side / left in RTL) ----
   Every photo is stacked in the same box; only .is-active is on-screen and
   at full opacity. A newly-activated photo starts translated toward the
   form (inset-inline-end, positive %) — since the form sits at a higher
   z-index with its own opaque background, that starting position is
   genuinely hidden UNDER the form, not just off to the side — then slides
   to its resting position, reading as if it emerged from behind the form.
   The exiting photo carries on past its resting spot in the same
   direction it was already travelling (inset-inline-start), so the motion
   never reverses mid-cycle. overflow stays visible on the container: the
   effect depends on photos being allowed to sit outside its own box. */
.mk-reach__gallery {
  position: relative;
  z-index: 1;
  min-height: 420px;
  overflow: visible;
}

.mk-reach__photo {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: var(--mk-radius-lg);
  overflow: hidden;
  box-shadow: var(--mk-shadow-lg);
  opacity: 0;
  z-index: 0;
  translate: 55% 0;
  transition: translate 0.9s cubic-bezier(0.22, 0.85, 0.3, 1), opacity 0.6s ease;
  animation: mk-reach-bob 6s ease-in-out infinite;
}

.mk-reach__photo.is-active {
  opacity: 1;
  z-index: 2;
  translate: 0 0;
}

.mk-reach__photo.is-prev {
  opacity: 0;
  z-index: 1;
  translate: -35% 0;
}

.mk-reach__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mk-reach__photo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 16, 36, 0.35);
  opacity: 0;
  transition: opacity var(--mk-transition);
}

.mk-reach__photo:hover .mk-reach__photo-overlay,
.mk-reach__photo:focus-visible .mk-reach__photo-overlay {
  opacity: 1;
}

.mk-reach__photo-overlay svg {
  width: 34px;
  height: 34px;
  color: #fff;
}

@keyframes mk-reach-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

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

@media (max-width: 991px) {
  .mk-reach__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .mk-reach__gallery {
    min-height: 280px;
    order: -1;
  }

  .mk-reach__photo {
    translate: 0 0;
  }

  .mk-reach__photo.is-prev {
    translate: 0 0;
  }

  .mk-reach__form {
    padding: 24px;
  }
}