/* Homepage (round 24 mockup) */
.hero { padding-block: clamp(28px, 5vw, 64px) 24px; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.hero h1 .script { display: block; font-size: 1.45em; margin: 6px 0 -4px; }
.hero p.lede { font-size: 19px; margin-top: 18px; max-width: 520px; }
.find { margin-top: 26px; display: flex; gap: 8px; background: var(--white); border-radius: 999px; padding: 6px; box-shadow: 0 8px 28px rgba(0,124,137,.12); max-width: 520px; }
.find input { flex: 1; min-width: 0; border: 0; font: inherit; padding: 10px 16px; background: transparent; color: var(--ink); }
.find input:focus-visible { outline: none; }
.stats { display: flex; gap: clamp(18px, 3vw, 36px); margin-top: 30px; flex-wrap: wrap; }
.stats div { display: flex; flex-direction: column; }
.stats b { font-size: 30px; font-weight: 800; color: var(--teal); line-height: 1; font-variant-numeric: tabular-nums; }
.stats span { font-size: 14px; font-weight: 600; color: var(--muted); margin-top: 4px; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } }

/* hero photos: washing line (H1, picked Oct 27). Computer: 3 photos on a curved line. Phone: the line drifts with 7 photos. */
.hv1 { position: relative; aspect-ratio: 1 / 0.8; max-width: 100%; }
.hv1 .line { position: absolute; left: -4%; top: 2%; width: 108%; height: 14%; }
.hang { position: absolute; top: 10%; width: 31%; margin: 0; background: var(--white); padding: 8px 8px 40px; border-radius: 6px; box-shadow: 0 16px 34px rgba(14,42,59,.15); transform-origin: 50% 0; animation: sway 5s ease-in-out infinite alternate; }
.hang img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.hang figcaption { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-family: var(--script); font-size: clamp(22px, 2.6vw, 32px); color: var(--ink); line-height: 1; }
.hang .clip { position: absolute; left: 50%; top: -20px; width: 26px; translate: -50% 0; filter: drop-shadow(0 3px 3px rgba(14,42,59,.25)); }
.h1a { left: 0; top: 7%; rotate: -4deg; } .h1b { left: 34.5%; top: 16%; rotate: 2deg; animation-delay: -1.7s; } .h1c { right: 0; top: 7%; rotate: 4deg; animation-delay: -3.4s; }
@keyframes sway { from { transform: rotate(-1.5deg) } to { transform: rotate(1.5deg) } }
@media (max-width: 860px) { .hv1 { order: -1; width: 100%; max-width: 520px; margin: 0 auto; } }
.hang.extra { display: none; }
@keyframes drift { to { translate: -50% 0; } }
@media (max-width: 600px) {
  .hv1 { aspect-ratio: auto; width: auto; max-width: none; margin-inline: -16px; overflow: hidden; padding-block: 6px 26px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
  .hv1 .line { display: none; }
  .hv1 .track { display: flex; gap: 22px; width: max-content; padding: 30px 11px 0; background: linear-gradient(#9BD3CF, #9BD3CF) 0 22px / 100% 3px no-repeat; animation: drift 46s linear infinite; }
  .hv1:active .track, .hv1:hover .track { animation-play-state: paused; }
  .hv1 .hang, .hang.extra { display: block; position: relative; inset: auto; flex: none; width: 168px; padding: 7px 7px 38px; }
  .hv1 .hang:nth-child(odd) { rotate: -3deg; } .hv1 .hang:nth-child(even) { rotate: 3deg; margin-top: 10px; }
  .hang .clip { top: -21px; }
  .hang figcaption { font-size: 24px; }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) { .hv1 { overflow-x: auto; } .hv1 .track { animation: none; } }
@media (prefers-reduced-motion: reduce) { .hang { animation: none; } }

.featured { display: flex; align-items: center; gap: clamp(16px, 4vw, 44px); flex-wrap: wrap; justify-content: center; padding-block: 18px; color: var(--muted); font-weight: 800; font-size: 15px; }
.featured span:first-child { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--rose); }

/* map section */
.map-sec { background: var(--aqua); }
.map-sec .sec { padding-block: 28px 56px; }
.map-box { background: var(--white); border-radius: 48px 80px 56px 90px / 70px 50px 90px 60px; padding: clamp(10px, 2vw, 22px); box-shadow: 0 20px 50px rgba(0,124,137,.12); }

/* reels */
.reels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.reel { position: relative; display: block; aspect-ratio: 9 / 15; border-radius: 999px 999px 28px 28px; overflow: hidden; text-decoration: none; color: var(--white); box-shadow: 0 14px 30px rgba(14,42,59,.15); transition: transform .3s; }
.reel:nth-child(even) { margin-top: 34px; border-radius: 28px 28px 999px 999px; }
.reel:hover { transform: translateY(-6px) rotate(-1deg); }
.reel img { width: 100%; height: 100%; object-fit: cover; }
.reel .play { position: absolute; left: 50%; top: 22%; translate: -50% 0; width: 50px; height: 50px; border-radius: 50%; background: var(--coral); display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(255,107,139,.3); }
.reel:nth-child(even) .play { top: auto; bottom: 32%; }
.reel .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 16px 22px; background: linear-gradient(transparent, rgba(14,42,59,.82)); font-weight: 800; font-size: 16px; line-height: 1.25; text-align: center; }
.reel:nth-child(even) .cap { top: 0; bottom: auto; padding: 28px 16px 60px; background: linear-gradient(rgba(14,42,59,.82), transparent); }
@media (max-width: 900px) {
  .reels { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  .reel { flex: 0 0 62%; scroll-snap-align: start; }
  .reel:nth-child(even) { margin-top: 0; }
}

/* posts */
.posts { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 26px; }
.post { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 10px; }
.post .ph { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 34px 34px 34px 8px; }
.post:nth-child(2) .ph { border-radius: 50% 50% 34px 34px / 40% 40% 34px 34px; }
.post:nth-child(3) .ph { border-radius: 8px 34px 34px 34px; }
.post .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.post:hover .ph img { transform: scale(1.05); }
.post h3 { font-size: 21px; }
.post:first-child { grid-row: span 2; }
.post:first-child .ph { aspect-ratio: 4 / 4.2; border-radius: 46% 54% 40% 60% / 38% 44% 56% 62%; }
.post:first-child h3 { font-size: 28px; }
.post.small { flex-direction: row; align-items: center; gap: 14px; }
.post.small .ph { flex: 0 0 96px; aspect-ratio: 1; border-radius: 50%; }
.post.small h3 { font-size: 17px; }
.post.badge-new .ph { position: relative; }
@media (max-width: 860px) { .posts { grid-template-columns: 1fr; } .post:first-child { grid-row: auto; } }

/* trip styles */
.styles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.style { text-decoration: none; color: var(--ink); padding: 26px 22px 24px; display: flex; flex-direction: column; gap: 10px; position: relative; transition: transform .3s; }
.style:hover { transform: translateY(-5px); }
.style:nth-child(1) { background: var(--aqua); border-radius: 62% 38% 46% 54% / 36% 44% 56% 64%; }
.style:nth-child(2) { background: var(--pink); border-radius: 40% 60% 60% 40% / 56% 40% 60% 44%; }
.style:nth-child(3) { background: var(--lemon); border-radius: 54% 46% 38% 62% / 42% 58% 42% 58%; }
.style:nth-child(4) { background: var(--soft); border-radius: 44% 56% 60% 40% / 60% 44% 56% 40%; }
.style img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 4px solid var(--white); }
.style span { font-size: 15px; color: var(--body); }
.style .ico { position: absolute; top: 22px; right: 26px; width: 30px; height: 30px; color: var(--teal); }
@media (max-width: 900px) { .styles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .styles { grid-template-columns: 1fr; } .style { border-radius: 44px 70px 50px 80px / 60px 44px 80px 50px !important; } }

/* this or that */
.tot { display: grid; grid-template-columns: 0.9fr 1.1fr 1.1fr; gap: 22px; align-items: center; }
.vs { position: relative; display: block; height: 290px; text-decoration: none; color: var(--white); }
.vs .ph { position: absolute; top: 0; bottom: 0; width: 62%; overflow: hidden; border-radius: 50%; border: 6px solid var(--white); box-shadow: 0 12px 30px rgba(14,42,59,.15); }
.vs .ph img { width: 100%; height: 100%; object-fit: cover; }
.vs .a { left: 0; } .vs .b { right: 0; top: 30px; bottom: -10px; }
.vs .or { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 58px; height: 58px; border-radius: 50%; background: var(--sun); color: var(--ink); font-weight: 800; display: grid; place-items: center; z-index: 2; font-size: 18px; }
.vs .nm { position: absolute; z-index: 2; background: var(--ink); color: var(--white); font-weight: 800; padding: 6px 14px; border-radius: 999px; font-size: 15px; }
.vs .nm.n1 { left: 6%; bottom: 8%; } .vs .nm.n2 { right: 4%; top: 6%; }
.tot-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tot-list a { text-decoration: none; font-weight: 700; font-size: 14.5px; color: var(--ink); background: var(--white); border: 2px solid var(--aqua); padding: 7px 14px; border-radius: 999px; }
.tot-list a b { color: var(--coral); margin: 0 4px; }
@media (max-width: 900px) { .tot { grid-template-columns: 1fr; } .vs { height: 240px; max-width: 420px; } }

/* valencia + about */
.home-base { background: var(--lemon); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.wins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 4vw, 56px); max-width: 860px; margin: 0 auto; }
.winbox { margin: 0; }
.winbox figcaption { text-align: center; font-family: var(--script); font-size: clamp(28px, 4vw, 44px); color: var(--teal); line-height: 1; margin-top: 8px; }
.stampwrap { max-width: 520px; width: 100%; margin: 0 auto; }
.casewrap { max-width: 380px; width: 100%; margin: 0 auto; }
.blobpic { aspect-ratio: 1.1; overflow: hidden; border-radius: 42% 58% 62% 38% / 46% 38% 62% 54%; box-shadow: 0 20px 44px rgba(14,42,59,.15); }
.blobpic img { width: 100%; height: 100%; object-fit: cover; }
.nums { display: flex; gap: 28px; margin-top: 24px; flex-wrap: wrap; }
.nums b { display: block; font-size: 34px; color: var(--teal); font-weight: 800; line-height: 1; }
.nums span { font-size: 14.5px; font-weight: 600; }
.about-pics { position: relative; aspect-ratio: 1.15; }
.about-pics img { position: absolute; object-fit: cover; border-radius: 50%; border: 7px solid var(--white); box-shadow: 0 16px 36px rgba(14,42,59,.15); }
.about-pics .a1 { width: 62%; aspect-ratio: 1; left: 0; top: 0; }
.about-pics .a2 { width: 48%; aspect-ratio: 1; right: 0; bottom: 0; }
.about-pics .a3 { width: 26%; aspect-ratio: 1; right: 8%; top: 2%; border-width: 5px; }
.quote { margin-top: 20px; font-family: var(--script); font-size: 34px; color: var(--teal); line-height: 1.1; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } .about-pics { max-width: 420px; } }

/* reel pop-up: the TikTok player loads only when a reel is tapped */
.reelbox { border: 0; padding: 14px; border-radius: 30px; background: var(--white); width: min(380px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; box-shadow: 0 30px 80px rgba(14,42,59,.35); }
.reelbox::backdrop { background: rgba(14,42,59,.7); }
.reelvid { aspect-ratio: 9 / 16; max-height: calc(100dvh - 130px); margin-inline: auto; border-radius: 20px; overflow: hidden; background: var(--ink); }
.reelvid iframe { width: 100%; height: 100%; border: 0; display: block; }
.reelx { position: absolute; top: 20px; right: 20px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--white); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.reelgo { display: flex; justify-content: center; margin-top: 12px; }