/* Mobile site — same brand, lightweight layout (works with or without pages.css) */
:root {
  --m-cream: #f5f0e8;
  --m-cream2: #F9F4EE;
  --m-tan: #C8926A;
  --m-brown: #2d1810;
  --m-blue: #A3D1E5;
  --m-navy: #1C3D5A;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.m-site {
  font-family: "Oswald", system-ui, sans-serif;
  background: var(--m-cream);
  color: var(--m-brown);
  overflow-x: clip;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; height: auto; display: block; }

/* Preference bar */
.m-pref {
  background: #1a120c;
  color: #e8ddd0;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 0.45rem 1rem;
  padding-top: calc(0.45rem + env(safe-area-inset-top, 0));
}
.m-pref a {
  color: var(--m-tan);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Header */
.m-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  background: rgba(245, 240, 232, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(45, 24, 16, 0.08);
}
.m-header__logo img { height: 44px; width: auto; }
.m-header__mid {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.m-header__menu {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
}
.m-header__menu span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--m-brown);
  border-radius: 1px;
}
.m-header__actions { display: flex; align-items: center; gap: 0.5rem; }
.m-header__cta {
  display: none;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.45rem 1rem;
  background: #fff;
  color: var(--m-brown);
  text-decoration: none;
  border-radius: 999px;
}
@media (min-width: 380px) {
  .m-header__cta { display: inline-block; }
}

.lang-btn {
  font-size: 0.7rem;
  font-weight: 700;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 2px solid var(--m-brown);
  background: transparent;
  color: var(--m-brown);
  cursor: pointer;
}

/* Nav overlay — reuse desktop clip animation */
.m-site .nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: 1fr;
  pointer-events: none;
  visibility: hidden;
}
.m-site .nav-overlay.is-open { pointer-events: all; visibility: visible; }
.m-site .nav-overlay__lhs {
  background: #F5EDE0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 2rem;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}
.m-site .nav-overlay.is-open .nav-overlay__lhs { clip-path: inset(0 0% 0 0); }
.m-site .nav-overlay__rhs { display: none; }
.m-site .nav-overlay__nav { display: flex; flex-direction: column; gap: 1.25rem; }
.m-site .nav-overlay__link {
  font-family: "Anton", "Bebas Neue", Impact, sans-serif;
  font-size: clamp(2rem, 9vw, 3rem);
  color: var(--m-brown);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.m-site .nav-overlay__socials {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.m-site .nav-overlay__social {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--m-tan);
}
.m-site .nav-overlay__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 48px;
  height: 48px;
  border: none;
  background: rgba(45,24,16,0.08);
  border-radius: 50%;
  cursor: pointer;
}
.m-site .nav-overlay__close span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 2px;
  background: var(--m-brown);
}
.m-site .nav-overlay__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.m-site .nav-overlay__close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

/* Home hero */
.m-hero {
  position: relative;
  min-height: 72vh;
  min-height: 72dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem 1.25rem 3rem;
  background: #1a1510;
  color: #f5ede0;
  overflow: hidden;
}
.m-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  pointer-events: none;
}
.m-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 55%);
  pointer-events: none;
}
.m-hero__inner { position: relative; z-index: 2; }
.m-hero__eyebrow {
  font-size: clamp(0.75rem, 3vw, 0.9rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 0.75rem;
}
.m-hero__title {
  font-family: "Anton", "Bebas Neue", Impact, sans-serif;
  font-size: clamp(2.8rem, 14vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}
.m-hero__sub {
  font-size: clamp(1rem, 4vw, 1.15rem);
  line-height: 1.5;
  max-width: 22rem;
  opacity: 0.92;
  margin-bottom: 1.75rem;
}
.m-btn {
  display: inline-block;
  padding: 0.85rem 2rem;
  background: var(--m-tan);
  color: var(--m-brown);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
}

/* Sections */
.m-section {
  padding: 2.75rem 1.25rem;
}
.m-section--cream { background: var(--m-cream2); }
.m-section--tan { background: #C8926A; color: #1a1008; }
.m-section--dark { background: #151210; color: #f5ede0; }

.m-h2 {
  font-family: "Anton", "Bebas Neue", Impact, sans-serif;
  font-size: clamp(1.85rem, 8vw, 2.6rem);
  line-height: 1.05;
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.m-badge {
  display: inline-block;
  background: #7B4F28;
  color: #fff;
  padding: 0.08em 0.35em 0.15em;
  transform: rotate(-2deg);
  border-radius: 3px;
  margin: 0 0.1em;
}
.m-lead { font-size: 1rem; line-height: 1.65; opacity: 0.92; margin-bottom: 1.25rem; }

/* Service cards — vertical stack, tilted bg */
.m-services-intro { margin-bottom: 2rem; }
.m-card-list { display: flex; flex-direction: column; gap: 2.5rem; }
.m-svc-card {
  position: relative;
  padding: 1.5rem 1.25rem 4.5rem;
  border-radius: 22px;
  background: linear-gradient(145deg, #C8E8F8 0%, var(--m-blue) 55%, #88C0D8 100%);
  box-shadow: 0 14px 40px rgba(80, 160, 210, 0.35);
}
.m-svc-card__img-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  margin: -0.5rem 0 0.5rem;
}
.m-svc-card__img {
  max-height: 220px;
  width: auto;
  max-width: 88%;
  object-fit: contain;
  transform: rotate(7deg);
  filter: drop-shadow(0 16px 14px rgba(0,0,0,0.22));
}
.m-svc-card__name {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%) rotate(7deg);
  font-family: "Bebas Neue", "Anton", sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: var(--m-navy);
  text-align: center;
  white-space: nowrap;
}

/* Stats */
.m-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
.m-stat {
  background: rgba(255,255,255,0.25);
  border-radius: 16px;
  padding: 1rem;
  text-align: center;
}
.m-stat__val { font-family: "Anton", sans-serif; font-size: 1.75rem; color: #1a1008; }
.m-stat__lbl { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.35rem; opacity: 0.85; }

/* Feature pills */
.m-pills { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.25rem; }
.m-pill {
  text-align: center;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  font-family: "Bebas Neue", "Anton", sans-serif;
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.m-pill:nth-child(1) { background: var(--m-tan); color: #1a0e08; transform: rotate(-1deg); }
.m-pill:nth-child(2) { background: #F0E3D0; color: #2d1810; transform: rotate(1deg); }
.m-pill:nth-child(3) { background: #7A2E1C; color: #F5E6D0; transform: rotate(-0.5deg); }
.m-pill:nth-child(4) { background: #F0E070; color: #2d1810; transform: rotate(1.2deg); }

/* Reviews preview */
.m-review {
  background: #fff;
  border-radius: 18px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.m-review__stars { color: #F5A623; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
.m-review__text { font-size: 0.92rem; line-height: 1.6; margin-bottom: 0.75rem; }
.m-review__who { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8B6340; }

/* Location teaser */
.m-loc {
  position: relative;
  min-height: 280px;
  padding: 2rem 1.25rem;
  background: #5C2A14;
  color: #F5EDE0;
}
.m-loc__map {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  pointer-events: none;
}
.m-loc__inner { position: relative; z-index: 2; }

/* Footer */
.m-footer {
  text-align: center;
  padding: 2rem 1.25rem 2.5rem;
  background: #ede6dc;
  border-top: 1px solid rgba(45,24,16,0.08);
}
.m-footer__logo { height: 40px; margin: 0 auto 1rem; }
.m-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  margin: 1rem 0;
}
.m-footer__links a {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--m-brown);
  text-decoration: none;
}
.m-footer__copy { font-size: 0.75rem; opacity: 0.65; }

/* Subpages using pages.css: tighten + preference link */
body.m-site.pg-sub .m-pref { margin: 0; }
body.m-site.pg-sub .pg-header { top: 0; }

/* RTL */
[dir="rtl"] .m-header__mid { left: auto; right: 50%; transform: translateX(50%); }
[dir="rtl"] .m-site .nav-overlay__close { right: auto; left: 1.25rem; }