/* Phone and tablet layout. Desktop (wider than 900px) is untouched. */
.m-only { display: none; }
@media (max-width: 900px) {
  .m-only { display: block; font-size: 13px; color: #8a6a47; margin-top: 8px; text-align: center; }
  html, body { overflow-x: hidden; }
  x-dc div, x-dc a, x-dc img { max-width: 100% !important; }
  [style*="width: 1440px"] { width: 100% !important; }
  /* side padding */
  [style*="padding"][style*=" 64px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding: 48px 40px"] { padding-left: 20px !important; padding-right: 20px !important; }
  /* rows wrap instead of overflowing */
  [style*="display: flex"]:not([style*="flex-direction: column"]) { flex-wrap: wrap !important; }
  /* bullet rows must not wrap */
  .bullet-row { flex-wrap: nowrap !important; }
  [style*="display: flex"]:not([style*="flex-direction: column"]) > [style*="flex: 1"] { flex: 1 1 260px !important; min-width: 0 !important; }
  [style*="gap: 56px"], [style*="gap: 48px"], [style*="gap: 40px"], [style*="gap: 32px"] { gap: 20px !important; }
  /* big grids become 2 columns */
  [style*="repeat(4,"], [style*="repeat(3,"], [style*="repeat(2,"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* direction cards: picture on top, words below */
  [style*="min-height: 540px"] { display: flex !important; flex-direction: column !important; padding: 0 !important; min-height: 0 !important; margin: 0 16px 20px !important; align-items: stretch !important; gap: 0 !important; }
  [style*="min-height: 540px"] > img { position: relative !important; width: 100% !important; height: auto !important; object-fit: contain !important; order: -1; -webkit-mask-image: none !important; mask-image: none !important; }
  [style*="min-height: 540px"] > [style*="z-index: 2"] { padding: 8px 22px 28px !important; max-width: 100% !important; }
  /* tighter vertical spacing */
  [style*="padding: 140px"], [style*="padding: 120px"], [style*="padding: 80px"], [style*="padding: 60px 64px"], [style*="padding: 56px 64px"] { padding-top: 36px !important; padding-bottom: 28px !important; }
  /* top menu on inner pages */
  [style*="padding: 16px 64px"][style*="justify-content: space-between"] { justify-content: center !important; gap: 12px !important; padding-top: 12px !important; padding-bottom: 12px !important; }
  [style*="gap: 24px"][style*="text-transform: uppercase"][style*="font-size: 11px"] { gap: 8px 14px !important; justify-content: center !important; width: 100%; }
  /* big headings */
  [style*="font-size: 72px"] { font-size: 38px !important; }
  [style*="font-size: 52px"], [style*="font-size: 48px"] { font-size: 30px !important; }
  [style*="font-size: 40px"], [style*="font-size: 38px"] { font-size: 28px !important; }
  [style*="font-size: 32px"] { font-size: 24px !important; }
  /* fixed-size photo boxes */
  [style*="height: 400px"], [style*="height: 320px"] { height: auto !important; min-height: 220px; }
  [style*="width: 340px"], [style*="width: 520px"], [style*="width: 300px"] { width: 100% !important; }
}
@media (max-width: 600px) {
  [style*="repeat(3,"], [style*="repeat(2,"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="height: 280px"] { height: 170px !important; }
  [style*="padding: 32px"], [style*="padding: 36px"], [style*="padding: 32px 36px"] { padding: 22px 18px !important; }
}

/* Laptops and tablets in landscape: let the page fit the screen instead of scrolling sideways */
@media (min-width: 901px) and (max-width: 1439px) {
  html, body { overflow-x: hidden; }
  [style*="width: 1440px"] { width: 100% !important; }
}
/* Banner pictures: show the whole picture (nothing cropped or faded) on any screen narrower than the design */
@media (max-width: 1439px) {
  /* banners show the whole picture */
  [style*="height: 810px"], [style*="height: 811px"], [style*="height: 960px"] { height: auto !important; display: flex !important; flex-direction: column !important; }
  [style*="height: 810px"] > img, [style*="height: 811px"] > img, [style*="height: 960px"] > img { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; }
  /* banners: no fade over the bottom of the picture, show it whole */
  [style*="height: 810px"] > div[style*="linear-gradient"], [style*="height: 811px"] > div[style*="linear-gradient"], [style*="height: 960px"] > div[style*="linear-gradient"] { display: none !important; }
  /* home page menu sits above the banner */
  [style*="top: 30px"][style*="right: 48px"] { position: relative !important; top: auto !important; right: auto !important; order: -1; justify-content: center; gap: 10px 18px !important; padding: 14px 16px !important; background: rgba(251,241,222,.95); }
}

/* Tablets and laptops (landscape iPad etc.): direction cards keep words on the left and the whole picture on the right, no overlap, no cropped picture text */
@media (min-width: 901px) and (max-width: 1439px) {
  [style*="min-height:540px"], [style*="min-height: 540px"] { margin: 0 32px 24px !important; padding: 0 !important; min-height: 0 !important; gap: 0 !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; }
  [style*="min-height:540px"] > [style*="z-index:2"], [style*="min-height: 540px"] > [style*="z-index: 2"] { flex: 0 0 38% !important; max-width: 38% !important; padding: 36px 0 36px 40px !important; gap: 12px !important; align-self: center !important; }
  [style*="min-height:540px"] > img, [style*="min-height: 540px"] > img { position: relative !important; inset: auto !important; flex: 0 0 62% !important; width: 62% !important; height: auto !important; aspect-ratio: 3 / 2; margin-left: auto; object-fit: cover !important; max-width: none !important; }
  [style*="min-height:540px"] .disp, [style*="min-height: 540px"] .disp { font-size: 32px !important; line-height: 1.1; }
  [style*="min-height:540px"] [style*="font-size:16px"], [style*="min-height: 540px"] [style*="font-size: 16px"] { font-size: 15px !important; }
}

/* Village page banner: show the whole picture on screens narrower than the design */
@media (max-width: 1439px) {
  [style*="height:300px"][style*="overflow:hidden"], [style*="height: 300px"][style*="overflow: hidden"] { height: auto !important; display: flex !important; flex-direction: column !important; }
  [style*="height:300px"][style*="overflow:hidden"] > img, [style*="height: 300px"][style*="overflow: hidden"] > img { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; }
  [style*="height:300px"][style*="overflow:hidden"] > div[style*="linear-gradient"], [style*="height: 300px"][style*="overflow: hidden"] > div[style*="linear-gradient"] { display: none !important; }
}

/* Large desktop screens: center the page instead of leaving an empty band on the right */
@media (min-width: 1441px) {
  html, body { background: #fbf1de; }
  [style*="width:1440px"], [style*="width: 1440px"] { margin-left: auto !important; margin-right: auto !important; }
}