/* ============================================================
   #overview — "Meet the People Behind the Wild"
   Stacked by default; >=1200px = locked 1672x620 composition.
   Cream colour: change --ot-cream (and it flows everywhere).
============================================================ */
#overview{
  --ot-cream:#f8f2e4; --ot-ink:#35271e; --ot-text:#45443f; --ot-forest:#3e2d22;
  position:relative; background:var(--ot-cream); overflow:hidden; color:var(--ot-ink);
  font-family:'Mulish','Montserrat',system-ui,sans-serif;
}
#overview *,#overview *::before,#overview *::after{ box-sizing:border-box; }
#overview img{ display:block; max-width:none; }
#overview .ot-canvas{ position:relative; width:100%; max-width:1920px; margin-inline:auto; --u:calc(100cqw / 1672); }
#overview .ot-inner{ position:relative; z-index:5; display:flex; flex-direction:column; padding:2.25rem 1.5rem 0; }

/* ---------- decorations ---------- */
#overview .ot-topo{ position:absolute; left:0; top:9rem; width:5rem; height:13rem; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,#000 25%,transparent 100%); mask-image:linear-gradient(to right,#000 25%,transparent 100%); }
#overview .ot-corner{ position:absolute; left:0; top:0; width:5.5rem; height:5.5rem; z-index:6; pointer-events:none; overflow:visible; }

/* ---------- copy (stacked defaults) ---------- */
#overview .ot-copy{ order:1; display:flex; flex-direction:column; }
#overview .ot-label{ order:1; display:flex; align-items:center; gap:.7rem; font:600 .8rem/1 'Mulish',sans-serif; letter-spacing:.2em; text-transform:uppercase; color:#443328; margin:0; }
#overview .ot-label-leaf{ width:.95rem; height:.9rem; flex:none; }
#overview .ot-label b{ display:block; width:3rem; height:2px; background:currentColor; }
#overview .ot-title{ order:2; margin:1.1rem 0 0; font:600 clamp(2.2rem,7.5vw,3.3rem)/1.04 'Source Serif 4',Georgia,serif; color:var(--ot-ink); }
#overview .ot-title em{ font-style:italic; font-weight:600; }
#overview .ot-tbr{ display:none; }
#overview .ot-p1{ order:3; margin:1.3rem 0 0; font:400 1rem/1.6 'Mulish',sans-serif; color:var(--ot-text); max-width:34rem; }
#overview .ot-script{ order:4; margin:1.9rem 0 0; font:700 2.4rem/1.05 'Caveat',cursive; color:var(--ot-ink); transform:rotate(-5deg); transform-origin:left center; }
#overview .ot-script span{ display:block; margin-left:1.2rem; }
#overview .ot-underline{ order:5; width:10rem; height:1.2rem; margin:.3rem 0 0 1.2rem; }
#overview .ot-p2{ order:6; margin:1rem 0 0; font:400 .95rem/1.6 'Mulish',sans-serif; color:var(--ot-text); max-width:34rem; }

/* ---------- photo ---------- */
#overview .ot-stage{ --s:calc(100cqw / 1032); order:7; position:relative; z-index:2; width:calc(100% + 3rem); margin:1.5rem -1.5rem 0; aspect-ratio:1032/800; container-type:inline-size; }
#overview .ot-brush{ position:absolute; inset:0; overflow:hidden; z-index:1;
  clip-path:polygon(9.21% 24.88%, 9.50% 25.62%, 9.30% 27.38%, 9.01% 28.12%, 8.04% 29.00%, 8.24% 30.00%, 7.56% 31.87%, 7.95% 35.25%, 7.46% 36.38%, 6.01% 37.50%, 5.33% 39.00%, 5.52% 39.88%, 5.04% 40.50%, 4.26% 43.00%, 4.26% 44.00%, 4.84% 45.25%, 4.75% 45.88%, 3.29% 46.62%, 3.39% 48.12%, 2.91% 48.88%, 3.10% 50.62%, 2.71% 51.38%, 3.78% 52.75%, 3.88% 53.25%, 2.81% 55.25%, 2.33% 56.75%, 1.84% 57.25%, 1.84% 57.63%, 2.42% 58.38%, 2.33% 59.88%, 3.20% 61.62%, 3.10% 62.75%, 3.39% 63.38%, 3.39% 64.00%, 3.00% 64.75%, 2.91% 67.00%, 3.20% 67.50%, 3.78% 67.62%, 4.36% 68.88%, 4.17% 70.50%, 4.75% 71.12%, 5.33% 71.12%, 6.01% 72.00%, 6.01% 73.12%, 6.69% 76.12%, 7.27% 76.50%, 8.62% 76.25%, 9.30% 77.75%, 10.37% 78.12%, 10.76% 78.62%, 11.34% 78.12%, 12.02% 78.12%, 12.40% 78.88%, 12.98% 79.25%, 14.73% 79.12%, 15.12% 79.62%, 15.70% 79.75%, 16.18% 80.88%, 21.03% 81.00%, 22.00% 82.75%, 22.97% 82.62%, 23.74% 82.00%, 24.52% 82.38%, 27.03% 82.25%, 27.81% 81.62%, 28.49% 81.75%, 28.97% 83.50%, 31.20% 84.25%, 30.91% 86.75%, 32.07% 86.62%, 33.14% 88.88%, 34.88% 88.62%, 35.66% 89.00%, 36.34% 87.50%, 37.31% 87.50%, 37.60% 88.00%, 37.31% 89.12%, 37.79% 90.12%, 37.69% 90.75%, 37.11% 91.25%, 37.31% 91.62%, 38.28% 91.38%, 38.47% 90.50%, 39.15% 89.88%, 39.15% 89.38%, 39.53% 88.75%, 40.12% 88.75%, 40.60% 90.00%, 42.64% 89.62%, 43.02% 90.25%, 43.22% 91.75%, 43.80% 93.00%, 44.96% 93.75%, 47.09% 94.12%, 47.38% 94.88%, 48.64% 95.88%, 49.81% 96.00%, 50.19% 97.00%, 50.87% 97.62%, 52.42% 97.62%, 53.29% 96.88%, 54.46% 96.88%, 55.52% 97.62%, 57.27% 97.38%, 59.30% 96.00%, 59.79% 94.88%, 63.76% 94.25%, 65.79% 91.00%, 65.89% 87.00%, 66.76% 87.38%, 67.73% 87.00%, 69.77% 87.25%, 70.54% 86.50%, 71.32% 86.25%, 72.77% 86.88%, 73.64% 85.75%, 74.22% 85.50%, 75.68% 86.00%, 76.65% 85.00%, 77.52% 85.12%, 78.49% 84.25%, 79.46% 84.00%, 80.33% 83.00%, 82.36% 83.25%, 83.33% 82.38%, 84.40% 82.25%, 85.27% 81.75%, 86.53% 80.12%, 87.50% 77.88%, 88.18% 77.88%, 89.24% 78.62%, 90.31% 78.88%, 90.41% 77.62%, 90.70% 77.12%, 92.05% 76.88%, 93.22% 76.00%, 94.20% 78.40%, 95.30% 79.60%, 96.40% 78.90%, 97.60% 80.40%, 98.70% 79.20%, 100.00% 77.80%, 100.00% 0.00%, 43.22% 0.00%, 43.70% 1.00%, 44.57% 1.00%, 45.25% 2.12%, 45.35% 2.88%, 44.77% 3.50%, 44.28% 3.38%, 43.31% 2.25%, 43.12% 1.50%, 42.44% 1.12%, 42.34% 0.62%, 42.64% 0.00%, 38.47% 0.00%, 39.15% 1.25%, 39.15% 1.88%, 38.08% 3.25%, 37.89% 4.00%, 38.08% 4.25%, 39.44% 4.00%, 40.21% 4.88%, 40.12% 5.62%, 39.15% 6.38%, 39.34% 7.38%, 38.95% 8.00%, 37.60% 7.88%, 37.40% 8.62%, 36.34% 9.50%, 34.88% 9.25%, 34.50% 8.62%, 34.30% 7.38%, 34.59% 6.88%, 35.85% 6.50%, 36.34% 4.75%, 35.66% 4.38%, 34.50% 4.50%, 33.24% 3.25%, 31.59% 3.12%, 31.10% 3.75%, 29.65% 3.62%, 28.29% 4.62%, 28.49% 5.00%, 28.39% 5.62%, 26.45% 7.00%, 25.10% 6.75%, 24.61% 6.12%, 23.93% 6.50%, 22.97% 6.38%, 22.87% 8.00%, 22.58% 8.50%, 21.61% 8.75%, 20.93% 8.00%, 20.45% 8.00%, 19.57% 8.75%, 19.19% 9.88%, 18.60% 10.00%, 18.90% 10.88%, 18.70% 11.62%, 18.99% 12.62%, 18.41% 13.50%, 17.44% 13.50%, 17.05% 12.50%, 15.99% 12.88%, 15.99% 14.00%, 15.21% 14.75%, 15.50% 16.25%, 15.41% 17.12%, 13.18% 17.75%, 12.31% 19.50%, 11.92% 23.38%, 11.14% 24.25%, 9.59% 24.25%); }
#overview .ot-brush img{ width:100%; height:100%; object-fit:cover; object-position:90% 40%; }

/* ---------- stats container (no icons) ---------- */
#overview .ot-ribbon{ order:8; position:relative; z-index:6; margin:calc(-17.05% - 1.75rem) 0 2rem auto; width:min(100%,26rem); padding:1.6rem 1rem 1.7rem; color:#fff;
  display:grid; grid-template-columns:repeat(3,1fr); align-items:center;
  background:
    radial-gradient(120% 90% at 20% 10%,rgba(255,255,255,.05),transparent 60%),
    repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 2px,transparent 2px 7px),
    linear-gradient(100deg,#3a2a1f,#413024 50%,#3c2b1f);
  clip-path:polygon(99.13% 17.19%, 97.38% 11.76%, 97.38% 7.69%, 97.88% 4.98%, 97.76% 3.17%, 94.76% 2.71%, 93.39% 4.07%, 87.91% 4.07%, 86.66% 1.81%, 75.06% 1.36%, 74.06% 2.71%, 71.70% 2.71%, 66.71% 0.00%, 45.51% 0.45%, 42.77% 2.71%, 39.65% 3.17%, 38.15% 1.36%, 8.60% 2.71%, 5.86% 4.07%, 5.36% 6.79%, 3.62% 8.14%, 3.24% 12.67%, 2.74% 14.48%, 2.12% 14.93%, 2.00% 18.55%, 1.50% 21.27%, 1.50% 24.43%, 0.25% 31.67%, 1.12% 38.46%, 2.24% 42.08%, 2.37% 46.15%, 0.87% 51.58%, 0.50% 61.09%, 1.12% 65.61%, 1.62% 66.97%, 1.75% 70.14%, 0.87% 73.30%, 0.00% 80.54%, 0.37% 82.81%, 2.37% 84.62%, 3.37% 89.59%, 3.49% 93.21%, 8.10% 93.21%, 9.10% 94.12%, 9.73% 97.74%, 15.84% 98.19%, 16.46% 99.10%, 17.96% 97.74%, 19.33% 97.74%, 20.45% 99.55%, 22.69% 99.55%, 23.94% 97.29%, 29.80% 96.83%, 31.30% 99.10%, 32.29% 97.74%, 33.42% 98.64%, 52.37% 97.74%, 53.62% 95.48%, 64.96% 95.48%, 66.83% 96.38%, 89.78% 96.38%, 92.77% 95.48%, 93.77% 92.31%, 95.01% 91.40%, 95.51% 89.14%, 96.38% 88.24%, 96.63% 85.52%, 97.51% 83.71%, 97.76% 80.54%, 98.75% 76.47%, 98.75% 68.78%, 99.63% 64.71%, 99.75% 62.44%, 99.13% 59.73%, 98.88% 56.56%, 98.13% 56.11%, 97.76% 54.75%, 97.63% 52.04%, 98.00% 49.77%, 98.13% 45.70%, 99.50% 40.72%, 99.88% 37.10%, 99.50% 32.13%, 99.13% 31.67%, 98.00% 26.70%, 98.00% 23.98%); }
#overview .ot-stat{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.25rem; padding:0 .25rem; }
#overview .ot-stat + .ot-stat{ border-left:1px solid rgba(255,255,255,.35); }
#overview .ot-stat strong{ font:600 1.6rem/1.05 'Source Serif 4',Georgia,serif; }
#overview .ot-stat span{ font:500 .72rem/1.25 'Mulish',sans-serif; }

/* ============================================================
   DESKTOP — locked 1672x620 composition, every value is
   (px of the design) x --u so it scales like a picture.
   To tweak: change the numbers below (they are "design px").
============================================================ */
@media (min-width:1200px){
  #overview .ot-canvas{ aspect-ratio:1672/620; container-type:inline-size; overflow:hidden; }
  #overview .ot-inner{ position:absolute; inset:0; display:block; padding:0; }
  #overview .ot-inner > *{ position:absolute; margin:0; }

  #overview .ot-topo{ left:0; top:calc(var(--u)*80); width:calc(var(--u)*140); height:calc(var(--u)*380); }
  #overview .ot-corner{ width:calc(var(--u)*130); height:calc(var(--u)*130); }

  /* LEFT: wide text column */
  #overview .ot-copy{ left:calc(var(--u)*156); top:calc(var(--u)*46); width:calc(var(--u)*810); }
  #overview .ot-label{ gap:calc(var(--u)*11); font-size:calc(var(--u)*16); line-height:calc(var(--u)*24); }
  #overview .ot-label-leaf{ width:calc(var(--u)*15); height:calc(var(--u)*14); }
  #overview .ot-label b{ width:calc(var(--u)*50); height:calc(var(--u)*2); margin-left:calc(var(--u)*4); }
  #overview .ot-tbr{ display:inline; }
  #overview .ot-title{ white-space:nowrap; margin-top:calc(var(--u)*14); font-size:calc(var(--u)*58); line-height:calc(var(--u)*60); }
  #overview .ot-p1{ margin-top:calc(var(--u)*20); max-width:none; font-size:calc(var(--u)*19); line-height:calc(var(--u)*30); }
  #overview .ot-script{ margin-top:calc(var(--u)*26); font-size:calc(var(--u)*46); line-height:calc(var(--u)*50); transform:rotate(-6deg); }
  #overview .ot-script span{ margin-left:calc(var(--u)*38); }
  #overview .ot-underline{ margin:calc(var(--u)*-2) 0 0 calc(var(--u)*46); width:calc(var(--u)*170); height:calc(var(--u)*24); }
  #overview .ot-p2{ margin-top:calc(var(--u)*12); max-width:none; font-size:calc(var(--u)*16.5); line-height:calc(var(--u)*26); }

  /* RIGHT: smaller photo, flush to the right edge */
  #overview .ot-stage{ left:calc(var(--u)*972); top:0; width:calc(var(--u)*700); }

  /* RIGHT: small stats container, overlapping the photo's lower edge */
  #overview .ot-ribbon{ left:calc(var(--u)*1226); top:calc(var(--u)*418); width:calc(var(--u)*430); height:calc(var(--u)*120); padding:0 calc(var(--u)*24); }
  #overview .ot-stat{ gap:calc(var(--u)*3); padding:0 calc(var(--u)*6); }
  #overview .ot-stat strong{ font-size:calc(var(--u)*34); line-height:calc(var(--u)*38); }
  #overview .ot-stat span{ font-size:calc(var(--u)*13.5); line-height:calc(var(--u)*17); }
}

@media (prefers-reduced-motion:no-preference){
  #overview .ot-stage, #overview .ot-ribbon{ animation:otRise .8s ease both; }
  @keyframes otRise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
}



/* ---------- resort intro content (location, rating, heading, tagline, buttons, highlights) ---------- */
#overview .ot-pin{ font-size:.95rem; color:#3e2d22; }
#overview .ot-rating{ order:2; display:flex; align-items:center; gap:.6rem; margin-top:.9rem; font:500 .95rem/1.2 'Mulish',sans-serif; color:#6b5d52; }
#overview .ot-stars{ color:#f0b429; letter-spacing:.08em; font-size:1.05rem; }
#overview .ot-title{ order:3; }
#overview .ot-p1{ order:4; margin-top:1.1rem; font:italic 600 1.2rem/1.5 'Source Serif 4',Georgia,serif; color:#4d4036; max-width:36rem; }
#overview .ot-actions{ order:5; display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.5rem; }
#overview .ot-btn{ display:inline-flex; align-items:center; gap:.7rem; padding:.85rem 1.5rem; border-radius:999px; font:600 .95rem/1 'Mulish',sans-serif; transition:background .3s,color .3s,transform .3s; }
#overview .ot-btn--solid{ background:#2e1f16; color:#fff; border:2px solid #2e1f16; }
#overview .ot-btn--solid:hover{ background:#4a3324; transform:translateY(-2px); }
#overview .ot-btn--line{ color:#2e1f16; border:2px solid #2e1f16; background:transparent; }
#overview .ot-btn--line:hover{ background:#2e1f16; color:#fff; transform:translateY(-2px); }
#overview .ot-feats{ order:6; display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 0; list-style:none; margin:1.6rem 0 0; padding:1.3rem 0 0; border-top:1px solid rgba(53,39,30,.16); max-width:36rem; }
#overview .ot-feats li{ display:flex; align-items:center; gap:.7rem; padding:0 1.4rem; font:500 .88rem/1.25 'Mulish',sans-serif; color:#35271e; }
#overview .ot-feats li:first-child{ padding-left:0; }
#overview .ot-feats li + li{ border-left:1px solid rgba(53,39,30,.18); }
#overview .ot-feats i{ font-size:1.5rem; color:#3e2d22; }
#overview .ot-p2{ order:7; }

@media (min-width:1200px){
  #overview .ot-pin{ font-size:calc(var(--u)*16); }
  #overview .ot-rating{ margin-top:calc(var(--u)*12); gap:calc(var(--u)*10); font-size:calc(var(--u)*17); line-height:calc(var(--u)*24); }
  #overview .ot-stars{ font-size:calc(var(--u)*19); }
  #overview .ot-title{ margin-top:calc(var(--u)*12); }
  #overview .ot-p1{ margin-top:calc(var(--u)*16); max-width:none; font-size:calc(var(--u)*24); line-height:calc(var(--u)*36); }
  #overview .ot-actions{ margin-top:calc(var(--u)*24); gap:calc(var(--u)*14); }
  #overview .ot-btn{ gap:calc(var(--u)*12); padding:calc(var(--u)*17) calc(var(--u)*28); font-size:calc(var(--u)*17); }
  #overview .ot-feats{ margin-top:calc(var(--u)*28); padding-top:calc(var(--u)*20); max-width:none; width:calc(var(--u)*640); }
  #overview .ot-feats li{ gap:calc(var(--u)*12); padding:0 calc(var(--u)*26); font-size:calc(var(--u)*16); }
  #overview .ot-feats i{ font-size:calc(var(--u)*26); }
  #overview .ot-p2{ margin-top:calc(var(--u)*22); max-width:none; font-size:calc(var(--u)*15.5); line-height:calc(var(--u)*25); width:calc(var(--u)*720); }
}

/* A normal photograph with its full original proportions, without a brush mask. */
#overview .ot-corner { width: 62px; height: 62px; left: -22px; top: -14px; opacity: .55; z-index: 0; }
#overview .ot-topo { opacity: .25; z-index: 0; }
#overview .ot-canvas { max-width: 1480px; aspect-ratio: auto; overflow: visible; container-type: inline-size; }
#overview .ot-inner { position: relative; inset: auto; display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; padding: 48px 24px; }
#overview .ot-inner > * { position: relative; inset: auto; margin: 0; }
#overview .ot-copy { width: 100%; min-width: 0; }
#overview .ot-stage { width: 100%; aspect-ratio: auto; container-type: normal; }
#overview .ot-brush { position: relative; inset: auto; clip-path: none; border-radius: 22px; box-shadow: 0 20px 40px -30px #35271e66; }
#overview .ot-brush img { display: block; width: 100%; height: auto; object-fit: contain; object-position: center; }
#overview .ot-ribbon { width: 100%; height: auto; min-height: 96px; padding: 20px 12px; clip-path: none; border-radius: 16px; }
#overview .ot-feats, #overview .ot-p2 { width: auto; max-width: none; }
@media (min-width: 1024px) {
  #overview .ot-inner { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px 48px; padding: 56px 40px; align-items: center; }
  #overview .ot-copy { grid-row: 1 / 3; }
  #overview .ot-stage { grid-column: 2; align-self: end; }
  #overview .ot-ribbon { grid-column: 2; align-self: start; }
}