/* ============================================================
   TRAVLOOM — DECORATIVE BACKGROUND LAYER
   Subtle, low-opacity brand texture: topo lines, route curves,
   a compass mark, a soft dot grid, and thin geometric hairlines.
   Purely decorative — every rule here uses pointer-events:none
   and sits behind real content (z-index:0), so it never affects
   readability or interaction.
   ============================================================ */

.bg-grid{
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2742%27%20height%3D%2742%27%3E%0A%20%20%3Ccircle%20cx%3D%271.5%27%20cy%3D%271.5%27%20r%3D%271.5%27%20fill%3D%27%23202843%27%20fill-opacity%3D%270.055%27/%3E%0A%3C/svg%3E");
  background-repeat: repeat;
}

.bg-geo{
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2764%27%20height%3D%2764%27%3E%0A%20%20%3Cpath%20d%3D%27M0%2C64%20L64%2C0%27%20stroke%3D%27%23202843%27%20stroke-opacity%3D%270.04%27%20stroke-width%3D%271%27/%3E%0A%3C/svg%3E");
  background-repeat: repeat;
}

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

.bg-deco .topo{
  position: absolute;
  width: 620px;
  height: 620px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27620%27%20height%3D%27620%27%20viewBox%3D%270%200%20620%20620%27%3E%0A%20%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23202843%27%20stroke-opacity%3D%270.05%27%20stroke-width%3D%271.4%27%3E%0A%20%20%20%20%3Cpath%20d%3D%27M60%2C310%20C60%2C180%20190%2C70%20310%2C70%20C430%2C70%20560%2C180%20560%2C310%20C560%2C440%20430%2C550%20310%2C550%20C190%2C550%2060%2C440%2060%2C310%20Z%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M105%2C310%20C105%2C205%20205%2C125%20310%2C125%20C415%2C125%20515%2C205%20515%2C310%20C515%2C415%20415%2C495%20310%2C495%20C205%2C495%20105%2C415%20105%2C310%20Z%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M150%2C310%20C150%2C230%20230%2C175%20310%2C175%20C390%2C175%20470%2C230%20470%2C310%20C470%2C390%20390%2C445%20310%2C445%20C230%2C445%20150%2C390%20150%2C310%20Z%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M195%2C310%20C195%2C255%20255%2C220%20310%2C220%20C365%2C220%20425%2C255%20425%2C310%20C425%2C365%20365%2C400%20310%2C400%20C255%2C400%20195%2C365%20195%2C310%20Z%27/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}
.bg-deco .topo.cream{
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27620%27%20height%3D%27620%27%20viewBox%3D%270%200%20620%20620%27%3E%0A%20%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23FEC84C%27%20stroke-opacity%3D%270.10%27%20stroke-width%3D%271.4%27%3E%0A%20%20%20%20%3Cpath%20d%3D%27M60%2C310%20C60%2C180%20190%2C70%20310%2C70%20C430%2C70%20560%2C180%20560%2C310%20C560%2C440%20430%2C550%20310%2C550%20C190%2C550%2060%2C440%2060%2C310%20Z%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M105%2C310%20C105%2C205%20205%2C125%20310%2C125%20C415%2C125%20515%2C205%20515%2C310%20C515%2C415%20415%2C495%20310%2C495%20C205%2C495%20105%2C415%20105%2C310%20Z%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M150%2C310%20C150%2C230%20230%2C175%20310%2C175%20C390%2C175%20470%2C230%20470%2C310%20C470%2C390%20390%2C445%20310%2C445%20C230%2C445%20150%2C390%20150%2C310%20Z%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M195%2C310%20C195%2C255%20255%2C220%20310%2C220%20C365%2C220%20425%2C255%20425%2C310%20C425%2C365%20365%2C400%20310%2C400%20C255%2C400%20195%2C365%20195%2C310%20Z%27/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
}
.bg-deco .topo.top-right{ top:-160px; right:-160px; }
.bg-deco .topo.bottom-left{ bottom:-180px; left:-180px; }

.bg-deco .route{
  position: absolute;
  width: 900px;
  max-width: 140%;
  height: 320px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27900%27%20height%3D%27320%27%20viewBox%3D%270%200%20900%20320%27%3E%0A%20%20%3Cpath%20d%3D%27M20%2C260%20C220%2C40%20420%2C300%20460%2C150%20C500%2C20%20700%2C260%20880%2C60%27%20fill%3D%27none%27%20stroke%3D%27%23F0A825%27%20stroke-opacity%3D%270.16%27%20stroke-width%3D%272%27%20stroke-dasharray%3D%272%2010%27%20stroke-linecap%3D%27round%27/%3E%0A%20%20%3Ccircle%20cx%3D%2720%27%20cy%3D%27260%27%20r%3D%274.5%27%20fill%3D%27%23F0A825%27%20fill-opacity%3D%270.22%27/%3E%0A%20%20%3Ccircle%20cx%3D%27460%27%20cy%3D%27150%27%20r%3D%274%27%20fill%3D%27%23F0A825%27%20fill-opacity%3D%270.18%27/%3E%0A%20%20%3Ccircle%20cx%3D%27880%27%20cy%3D%2760%27%20r%3D%274.5%27%20fill%3D%27%23F0A825%27%20fill-opacity%3D%270.22%27/%3E%0A%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
}

.bg-deco .compass{
  position: absolute;
  width: 190px;
  height: 190px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27220%27%20height%3D%27220%27%20viewBox%3D%270%200%20220%20220%27%3E%0A%20%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23202843%27%20stroke-opacity%3D%270.07%27%20stroke-width%3D%271.3%27%3E%0A%20%20%20%20%3Ccircle%20cx%3D%27110%27%20cy%3D%27110%27%20r%3D%2790%27/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%27110%27%20cy%3D%27110%27%20r%3D%2768%27/%3E%0A%20%20%20%20%3Cline%20x1%3D%27110%27%20y1%3D%2710%27%20x2%3D%27110%27%20y2%3D%2732%27/%3E%0A%20%20%20%20%3Cline%20x1%3D%27110%27%20y1%3D%27188%27%20x2%3D%27110%27%20y2%3D%27210%27/%3E%0A%20%20%20%20%3Cline%20x1%3D%2710%27%20y1%3D%27110%27%20x2%3D%2732%27%20y2%3D%27110%27/%3E%0A%20%20%20%20%3Cline%20x1%3D%27188%27%20y1%3D%27110%27%20x2%3D%27210%27%20y2%3D%27110%27/%3E%0A%20%20%3C/g%3E%0A%20%20%3Cpath%20d%3D%27M110%2C55%20L124%2C110%20L110%2C165%20L96%2C110%20Z%27%20fill%3D%27%23202843%27%20fill-opacity%3D%270.045%27/%3E%0A%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}
.bg-deco .compass.light{
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27220%27%20height%3D%27220%27%20viewBox%3D%270%200%20220%20220%27%3E%0A%20%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23FEC84C%27%20stroke-opacity%3D%270.13%27%20stroke-width%3D%271.3%27%3E%0A%20%20%20%20%3Ccircle%20cx%3D%27110%27%20cy%3D%27110%27%20r%3D%2790%27/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%27110%27%20cy%3D%27110%27%20r%3D%2768%27/%3E%0A%20%20%20%20%3Cline%20x1%3D%27110%27%20y1%3D%2710%27%20x2%3D%27110%27%20y2%3D%2732%27/%3E%0A%20%20%20%20%3Cline%20x1%3D%27110%27%20y1%3D%27188%27%20x2%3D%27110%27%20y2%3D%27210%27/%3E%0A%20%20%20%20%3Cline%20x1%3D%2710%27%20y1%3D%27110%27%20x2%3D%2732%27%20y2%3D%27110%27/%3E%0A%20%20%20%20%3Cline%20x1%3D%27188%27%20y1%3D%27110%27%20x2%3D%27210%27%20y2%3D%27110%27/%3E%0A%20%20%3C/g%3E%0A%20%20%3Cpath%20d%3D%27M110%2C55%20L124%2C110%20L110%2C165%20L96%2C110%20Z%27%20fill%3D%27%23FEC84C%27%20fill-opacity%3D%270.09%27/%3E%0A%3C/svg%3E");
}
.bg-deco .compass.corner{ bottom:6%; right:4%; }

/* Ensure any section using .bg-deco keeps its real content above the layer */
.bg-deco-host{ position: relative; overflow: hidden; }
.bg-deco-host > .wrap{ position: relative; z-index: 1; }

@media (max-width: 760px){
  .bg-deco .topo{ width:380px; height:380px; }
  .bg-deco .compass{ width:130px; height:130px; }
  .bg-deco .route{ height:220px; }
}