PageSourceSearch

https://amansala.com/host-a-retreat

html amansala.com collected 2026-10-01 10:31:58 UTC 65,928 bytes, 1,001 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<!-- Google tag (gtag.js) -->
vendor: 64 bytes, lines 4-5
4
5<script async src="https://www.googletagmanager.com/gtag/js?id=
5G-RJMST2QP98
vendor: 12 bytes, line 5
5"></script>
6<script>
7  
vendor: 133 bytes, lines 7-10
7window.dataLayer = window.dataLayer || [];
8  function gtag(){dataLayer.push(arguments);}
9  gtag('js', new Date());
10  gtag('config', '
10G-RJMST2QP98
vendor: 4 bytes, line 10
10');
11</script>
11
12
13<base href="https://amansala.com/">
14<meta charset="UTF-8">
15<meta name="viewport" content="width=device-width, initial-scale=1.0">
16<link rel="icon" type="image/x-icon" href="favicon.ico">
17<link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png">
18<link rel="icon" type="image/png" sizes="16x16" href="favicon-16.png">
19<link rel="apple-touch-icon" sizes="180x180" href="favicon-180.png">
20<title>Tulum Retreat Venue: Host Your Yoga Retreat | Amansala</title>
21<link rel="canonical" href="https://amansala.com/host-a-retreat">
22<meta name="description" content="Host your yoga or wellness retreat at Amansala, Tulum's beachfront retreat center for 20+ years. Oceanfront shalas, all-inclusive packages, dedicated team.">
23<link rel="preconnect" href="https://fonts.googleapis.com">
24<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
25<link rel="stylesheet" href="brand-global.css">
26
27
28<style>
29*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
30html { scroll-behavior: smooth; }
31body {
32  font-family: 'Jost', sans-serif; font-weight: 500;
33  background: #F0EFED; color: #2C2C2C;
34  overflow-x: hidden; -webkit-font-smoothing: antialiased;
35}
36:root {
37  --cream: #F5F0E6; --sand: #EDE2D2; --terracotta: #BDA68B;
38  --espresso: #574B3F; --nearblack: #362F28; --gold: #93702C;
39  --font-bayer: 'Archetype Bayer Universal', sans-serif;
40  --font-serif: 'Cormorant Garamond', serif;
41  --font-sans: 'Jost', sans-serif;
42  --ease: cubic-bezier(0.16, 1, 0.3, 1);
43}
44
45/* ── NAV ── */
46nav {
47  position: fixed; top: 16px; left: 16px; right: 16px; z-index: 100;
48  border-radius: 60px;
49  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
50  padding: 28px 48px; background: rgba(20,14,8,0.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background 0.4s, padding 0.4s;
51}
52nav.scrolled { background: rgba(240,239,237,0.97); backdrop-filter: blur(10px);
53  border-radius: 60px; padding: 16px 48px; }
54.nav-logo img { height: 44px; width: auto; display: block; filter: brightness(0) invert(1); opacity: 0.9; }
55.nav-links { display: flex; gap: 24px; list-style: none; align-items: center; justify-content: center; }
56.nav-links a { font-family: var(--font-bayer); font-size: 15px; letter-spacing: 0.15em; text-transform: lowercase; color: rgba(245,240,230,0.95); text-decoration: none; transition: color 0.3s; }
57.nav-links > li { position: relative; }
58.nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: rgba(245,240,230,0.94); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); border: 1px solid rgba(245,240,230,0.25); box-shadow: 0 16px 56px rgba(0,0,0,0.12); padding: 20px 0 14px; min-width: 210px; list-style: none; margin-top: 8px; z-index: 200; border-radius: 20px; overflow: hidden; }
59.nav-links > li:hover .nav-dropdown-menu { display: block; }
60.nav-links > li > a { position: relative; }
61.nav-links > li > a::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 20px; }
62.nav-dropdown-menu li a { display: block; padding: 10px 24px; font-family: var(--font-bayer,sans-serif); font-size: 13px; letter-spacing: 0.18em; text-transform: lowercase; color: rgba(44,44,44,0.85); transition: color 0.2s, background 0.2s; }
63.nav-dropdown-menu li a:hover { color: var(--espresso,#574B3F); background: rgba(147,112,44,0.12); }
64.nav-links a:hover { color: var(--cream); }
65.nav-book { font-family: var(--font-bayer); font-size: 14px; letter-spacing: 0.18em; text-transform: lowercase; padding: 11px 28px; border: 1px solid rgba(245,240,230,0.4); color: var(--cream); text-decoration: none; border-radius: 50px; transition: all 0.3s; }
66.nav-book:hover { background: #F0EFED; color: #2C2C2C; }
67@media(max-width:768px){ nav { padding: 14px 24px; top: 12px; left: 12px; right: 12px; border-radius: 50px; } nav.scrolled { padding: 10px 24px; } }
68
69/* ── HERO ── */
70.hero {
71  position: relative; height: 100vh; min-height: 640px;
72  overflow: hidden; display: flex; align-items: center; justify-content: center;
73}
74.hero-slides { position: absolute; inset: 0; }
75.hero-slide {
76  position: absolute; inset: 0;
77  background-size: cover; background-position: center;
78  opacity: 0; transition: opacity 1.4s ease-in-out;
79}
80.hero-slide.active { opacity: 1; }
81.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20,14,8,0.1) 0%, rgba(20,14,8,0.5) 100%); z-index: 1; }
82
83/* Slide counter dots */
84.hero-dots { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
85.hero-dot { width: 28px; height: 2px; background: rgba(245,240,230,0.3); transition: background 0.4s, width 0.4s; cursor: pointer; }
86.hero-dot.active { background: #F0EFED; width: 44px; }
87.hero-content { position: relative; z-index: 2; text-align: center; padding: 0 24px; }
88.hero-eyebrow { font-family: var(--font-bayer); font-size: 24px; letter-spacing: 0.4em; color: rgba(245,240,230,0.85); margin-bottom: 24px; }
89.hero-content h1 { font-family: var(--font-bayer); font-size: clamp(42px,7vw,100px); color: var(--cream); letter-spacing: 0.06em; line-height: 0.95; text-transform: lowercase; margin-bottom: 32px; font-weight: 400; }
90/* Rotating hero phrases */
91.hero-phrases { height: clamp(34px,4vw,52px); position: relative; margin: 0 auto 40px; max-width: 720px; }
92.hero-phrase { position: absolute; inset: 0; font-family: var(--font-serif); font-weight: 500; font-size: clamp(21px,2.8vw,32px); color: rgba(245,240,230,0.88); text-align: center; line-height: 1.4; opacity: 0; transition: opacity 1s ease; }
93.hero-phrase.active { opacity: 1; }
94.hero-cta { display: inline-block; font-family: var(--font-bayer); font-size: 12px; letter-spacing: 0.3em; text-transform: lowercase; padding: 18px 52px; border: 1px solid rgba(245,240,230,0.5); color: var(--cream); text-decoration: none; transition: all 0.3s; }
95.hero-cta:hover { background: #F0EFED; color: #2C2C2C; }
96
97/* ── INTRO STRIP ── */
98.intro-strip { background: #F0EFED; padding: 60px 48px; text-align: center; border-bottom: 1px solid rgba(147,112,44,0.12); }
99.intro-strip .eyebrow { font-family: var(--font-bayer); font-size: 27px; letter-spacing: 0.35em; color: var(--espresso); margin-bottom: 28px; display: block; }
100.intro-headline { font-family: var(--font-bayer); font-size: clamp(1.3rem,2.2vw,2.2rem); font-weight: 400; letter-spacing: 0.12em; text-transform: lowercase; color: #2C2C2C; margin-bottom: 32px; }
101.intro-body { font-family: var(--font-sans); font-size: clamp(17px,1.8vw,20px); font-weight: 500; color: rgba(44,44,44,0.88); max-width: 700px; margin: 0 auto; line-height: 1.95; }
102
103/* ── LOCATION PANEL ── */
104.location-panel {
105  display: grid; grid-template-columns: 1fr 1fr;
106}
107.location-image { position: relative; overflow: hidden; }
108.location-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; transition: transform 1.2s var(--ease); min-height: 500px; }
109.location-panel:hover .location-image img { transform: scale(1.04); }
110.location-text {
111  background: #F0EFED;
112  padding: 80px 64px;
113  display: flex; flex-direction: column; justify-content: center;
114}
115.location-text .eyebrow { font-family: var(--font-bayer); font-size: 18px; letter-spacing: 0.45em; text-transform: lowercase; color: var(--gold); margin-bottom: 20px; display: block; }
116.location-text h2 { font-family: var(--font-serif); font-size: clamp(2.2rem,3.3vw,3.3rem); font-weight: 500; color: #2C2C2C; line-height: 1.2; margin-bottom: 28px; }
117.location-text p { font-family: var(--font-sans); font-size: clamp(16px,1.6vw,19px); font-weight: 500; line-height: 1.95; color: rgba(44,44,44,0.85); margin-bottom: 16px; }
118.location-text .location-tag { font-family: var(--font-bayer); font-size: 15px; letter-spacing: 0.35em; text-transform: lowercase; color: rgba(44,44,44,0.3); margin-top: 16px; }
119@media(max-width:860px){
120  .location-panel { grid-template-columns: 1fr; }
121  .location-image { overflow: hidden; }
122  .location-image img { min-height: unset; width: 100%; height: auto; object-fit: unset; }
123  .location-text { padding: 48px 24px; }
124  .location-text h2 { font-size: clamp(1.8rem,7vw,2.6rem); }
125  .location-text p { font-size: 16px; line-height: 1.85; }
126}
127
128/* ── WHY AMANSALA ── */
129.why-section { background: #F0EFED; padding: 0; overflow: hidden; }
130.why-header { padding: 56px 72px 48px; display: flex; align-items: center; justify-content: center; text-align: center; gap: 48px; border-bottom: 1px solid rgba(147,112,44,0.15); }
131.why-header-left { flex: 1; }
132.why-section .section-eyebrow { display: block; font-family: var(--font-bayer); font-size: 16px; letter-spacing: 0.35em; text-transform: lowercase; color: var(--gold); margin-bottom: 20px; }
133.why-section h2 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(1.9rem,3.2vw,3.2rem); color: #2C2C2C; line-height: 1.2; }
134.why-header-rule { width: 1px; height: 80px; background: rgba(147,112,44,0.3); flex-shrink: 0; }
135.why-header-note { font-family: var(--font-serif); font-size: clamp(20px,2vw,26px); font-weight: 500; color: rgba(44,44,44,0.85); max-width: 420px; line-height: 1.5; text-align: right; flex-shrink: 0; margin-left: auto; }
136
137/* Horizontal reason rows */
138.why-list { list-style: none; }
139.why-row {
140  display: grid; grid-template-columns: 80px 1fr 1fr;
141  align-items: center; gap: 0;
142  padding: 0 72px;
143  border: 1px solid rgba(44,44,44,0.06);
144  position: relative; overflow: hidden;
145  transition: background 0.5s ease;
146  cursor: default;
147}
148.why-row::after {
149  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
150  background: linear-gradient(to right, var(--gold), var(--terracotta));
151  transition: width 0.6s var(--ease);
152}
153.why-row:hover { background: rgba(245,240,230,0.12); }
154.why-row:hover::after { width: 100%; }
155
156.why-row-num {
157  font-family: var(--font-serif); 
158  font-size: clamp(3rem,5vw,5.5rem); font-weight: 500;
159  color: rgba(147,112,44,0.55); line-height: 1;
160  padding: 52px 0; user-select: none;
161  transition: color 0.4s ease;
162}
163.why-row:hover .why-row-num { color: rgba(147,112,44,0.9); }
164
165.why-row-title {
166  padding: 52px 48px 52px 32px;
167  border: 1px solid rgba(44,44,44,0.06);
168  border: 1px solid rgba(44,44,44,0.06);
169}
170.why-row-title h3 {
171  font-family: var(--font-bayer); font-size: clamp(13px,1.5vw,17px);
172  letter-spacing: 0.1em; text-transform: lowercase;
173  color: #2C2C2C; line-height: 1.2;
174}
175.why-row-title .why-row-accent {
176  display: block; width: 24px; height: 1px;
177  background: var(--terracotta); margin-bottom: 14px;
178  transition: width 0.4s var(--ease);
179}
180.why-row:hover .why-row-accent { width: 48px; background: var(--gold); }
181
182.why-row-body { padding: 52px 0 52px 48px; }
183.why-row-body p {
184  font-family: var(--font-sans); font-size: 15px; font-weight: 500;
185  color: rgba(44,44,44,0.85); line-height: 1.95;
186  transition: color 0.4s ease;
187}
188.why-row:hover .why-row-body p { color: rgba(44,44,44,1); }
189
190.why-row--photo { grid-template-columns: 50% 50%; grid-template-rows: auto 1fr; align-items: stretch; padding: 0; min-height: 380px; max-height: 460px; }
191.why-row--photo .why-row-num { grid-column: 1; grid-row: 1; padding: 40px 0 12px 72px; }
192.why-row--photo .why-row-title-body { grid-column: 1; grid-row: 2; padding: 0 52px 40px 72px; display: flex; flex-direction: column; justify-content: flex-start; gap: 16px; border-left: none; }
193.why-row-photo { grid-column: 2; grid-row: 1 / span 2; width: 100%; height: 100%; max-height: 460px; overflow: hidden; outline: 6px solid rgba(147,112,44,0.45); outline-offset: -6px; }
194.why-row--photo:nth-of-type(even) .why-row-title-body { grid-column: 2; padding: 0 72px 40px 52px; }
195.why-row--photo:nth-of-type(even) .why-row-photo { grid-column: 1; }
196.why-row-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 1s var(--ease); }
197.why-row--photo:hover .why-row-photo img { transform: scale(1.05); }
198.mini-carousel { position: relative; width: 100%; height: 100%; }
199.mini-carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
200.mini-carousel-slide.active { opacity: 1; }
201.mini-carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
202.mini-carousel-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; }
203.mini-carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(245,240,230,0.55); transition: background 0.3s, width 0.3s, border-radius 0.3s; cursor: pointer; }
204.mini-carousel-dot.active { background: #F0EFED; width: 16px; border-radius: 3px; }
205@media(max-width:900px){ .why-row--photo { grid-template-columns: 1fr; grid-template-rows: auto; min-height: unset; padding: 0 32px; } .why-row--photo .why-row-num { grid-column: 1; grid-row: 1; padding: 40px 0 8px 0; } .why-row--photo .why-row-title-body, .why-row--photo:nth-of-type(even) .why-row-title-body { grid-column: 1 !important; grid-row: 2; padding: 0 0 40px 0; } .why-row-photo, .why-row--photo:nth-of-type(even) .why-row-photo { display: none; } }
206
207
208/* Closing statement */
209.why-close-wrap {
210  padding: 80px 72px 96px;
211  display: flex; align-items: center; gap: 48px;
212  border-top: 1px solid rgba(147,112,44,0.15);
213}
214.why-close-line { width: 48px; height: 1px; background: var(--gold); flex-shrink: 0; }
215.why-close {
216  font-family: var(--font-serif); font-weight: 500;
217  font-size: clamp(1.3rem,2.2vw,2rem); color: rgba(44,44,44,0.85);
218  line-height: 1.5; white-space: nowrap;
219}
220
221/* ── TESTIMONIALS ── */
222.testimonials-section { background: #F0EFED; padding: 80px 48px; text-align: center; border-top: 1px solid rgba(147,112,44,0.15); }
223.testimonials-section .section-eyebrow { display: block; font-family: var(--font-bayer); font-size: 20px; font-weight: 500; letter-spacing: 0.4em; text-transform: lowercase; color: var(--gold); margin-bottom: 20px; }
224.testimonials-section h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.2rem,4vw,3.6rem); color: #2C2C2C; margin-bottom: 0; }
225
226@media(max-width:900px){
227  .why-header { padding: 72px 32px 52px; flex-direction: column; align-items: flex-start; gap: 24px; }
228  .why-header-rule, .why-header-note { display: none; }
229  .why-row { grid-template-columns: 56px 1fr; padding: 0 32px; }
230  .why-row-body { display: none; }
231  .why-row-title { padding: 36px 0 36px 24px; border-right: none; }
232  .why-close-wrap { padding: 60px 32px 72px; flex-direction: column; gap: 16px; align-items: flex-start; }
233}
234@media(max-width:580px){
235  .why-row { grid-template-columns: 44px 1fr; padding: 0 24px; }
236  .why-row-num { font-size: clamp(2.2rem,8vw,3.5rem); }
237}
238
239/* ── AERIAL DIVIDER ── */
240.aerial-divider {
241  position: relative; overflow: hidden;
242}
243.aerial-divider img { width: 100%; height: 380px; object-fit: cover; object-position: center 75%; display: block; }
244.aerial-divider .aerial-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20,14,8,0.2), rgba(20,14,8,0.55)); display: flex; align-items: flex-end; padding: 40px 56px; }
245.aerial-divider .aerial-caption { font-family: var(--font-bayer); font-size: 14px; letter-spacing: 0.35em; text-transform: lowercase; color: rgba(245,240,230,0.85); }
246
247/* ── SHALAS ── */
248.shalas-section { background: #F0EFED; padding: 56px 48px 80px; }
249.shalas-section .section-eyebrow { display: block; font-family: var(--font-bayer); font-size: 18px; letter-spacing: 0.45em; text-transform: lowercase; color: var(--gold); text-align: center; margin-bottom: 16px; }
250.shalas-section h2 { font-family: var(--font-serif); font-size: clamp(3rem,5.4vw,5.4rem); font-weight: 500; color: #2C2C2C; text-align: center; margin-bottom: 20px; line-height: 1.1; }
251.shalas-intro { font-family: var(--font-serif); font-weight: 500; font-size: clamp(24px,2.6vw,32px); color: rgba(44,44,44,0.85); text-align: center; max-width: 780px; margin: 0 auto 72px; line-height: 1.75; }
252.shalas-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; max-width: 1100px; margin: 0 auto; }
253.shala-card {
254  position: relative; overflow: hidden;
255  aspect-ratio: 3/4;
256  cursor: default;
257}
258.shala-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s var(--ease); }
259.shala-card:hover img { transform: scale(1.06); }
260.shala-card .shala-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,14,8,0.55) 0%, rgba(20,14,8,0.05) 45%, rgba(20,14,8,0) 100%); }
261.shala-card .shala-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 28px 32px; }
262.shala-name { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.5rem,2vw,2.2rem); letter-spacing: 0.02em; color: var(--cream); display: block; margin-bottom: 8px; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
263.shala-mats { font-family: var(--font-serif); font-size: clamp(2rem,3vw,3rem); color: var(--terracotta); line-height: 1; display: inline; vertical-align: baseline; }
264.shala-label { font-family: var(--font-bayer); font-size: 11px; letter-spacing: 0.25em; text-transform: lowercase; color: rgba(245,240,230,0.75); text-shadow: 0 1px 8px rgba(0,0,0,0.5); display: inline; vertical-align: baseline; margin-left: 8px; }
265@media(max-width:900px){ .shalas-grid { grid-template-columns: 1fr 1fr; } }
266@media(max-width:520px){ .shalas-grid { grid-template-columns: 1fr; } .shala-card { aspect-ratio: 4/3; } }
267
268/* ── WHO IS THIS FOR ── */
269.who-section { background: #F0EFED; padding: 56px 48px 80px; }
270.who-section .section-eyebrow { display: block; font-family: var(--font-bayer); font-size: 18px; letter-spacing: 0.45em; text-transform: lowercase; color: var(--gold); text-align: center; margin-bottom: 20px; }
271.who-section h2 { font-family: var(--font-bayer); font-size: clamp(2rem,3.4vw,3.6rem); font-weight: 400; letter-spacing: 0.06em; text-transform: lowercase; color: #2C2C2C; text-align: center; margin-bottom: 56px; line-height: 1; }
272.who-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; max-width: 1100px; margin: 0 auto; }
273.who-card { overflow: hidden; border: 1px solid rgba(44,44,44,0.07); border-top: none; }
274.who-card-img { width: 100%; aspect-ratio: 3/2; overflow: hidden; }
275.who-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s var(--ease); }
276.who-card:hover .who-card-img img { transform: scale(1.05); }
277.who-card-body { padding: 32px 32px 40px; border-top: 2px solid var(--terracotta); }
278.who-card .card-eyebrow { font-family: var(--font-bayer); font-size: 14px; letter-spacing: 0.4em; text-transform: lowercase; color: var(--terracotta); margin-bottom: 16px; display: block; }
279.who-card h3 { font-family: var(--font-serif); font-size: clamp(2rem,3vw,3rem); font-weight: 500; color: #2C2C2C; line-height: 1.1; margin-bottom: 18px; }
280.who-card p { font-family: var(--font-sans); font-size: 17px; font-weight: 500; line-height: 1.85; color: rgba(44,44,44,0.85); }
281@media(max-width:900px){ .who-grid { grid-template-columns: 1fr; max-width: 520px; } }
282
283/* ── WHAT'S INCLUDED ── */
284.included-section { background: #F0EFED; padding: 56px 0; }
285.included-inner { display: grid; grid-template-columns: 1fr 1fr; max-width: 100%; }
286.included-image { position: relative; overflow: hidden; min-height: 560px; }
287.included-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
288.included-text { padding: 80px 72px; display: flex; flex-direction: column; justify-content: center; background: #F0EFED; }
289.included-text .eyebrow { font-family: var(--font-bayer); font-size: 18px; letter-spacing: 0.45em; text-transform: lowercase; color: var(--gold); margin-bottom: 20px; display: block; }
290.included-text h2 { font-family: var(--font-serif); font-size: clamp(1.8rem,3vw,2.8rem); font-weight: 500; color: #2C2C2C; line-height: 1.2; margin-bottom: 20px; }
291.included-text p { font-family: var(--font-sans); font-size: 16px; font-weight: 500; line-height: 1.9; color: rgba(44,44,44,0.9); margin-bottom: 36px; }
292.included-list { list-style: none; }
293.included-list li { font-family: var(--font-sans); font-size: 18px; font-weight: 500; color: #1E1E1E; padding: 15px 0; border: 1px solid rgba(44,44,44,0.1); display: flex; align-items: flex-start; gap: 18px; }
294.included-list li:first-child { border: 1px solid rgba(44,44,44,0.1); }
295.included-list li::before { content: ''; display: block; width: 20px; height: 1px; background: var(--terracotta); flex-shrink: 0; margin-top: 13px; }
296.included-item-body { flex: 1; }
297.included-item-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
298.included-optional-tag { font-family: var(--font-bayer); font-size: 11px; letter-spacing: 0.15em; text-transform: lowercase; color: var(--gold); border: 1px solid rgba(196,150,58,0.4); border-radius: 20px; padding: 3px 12px; white-space: nowrap; }
299.included-item-desc { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: rgba(44,44,44,0.7); line-height: 1.7; margin-top: 8px; }
300@media(max-width:900px){ .included-inner { grid-template-columns: 1fr; } .included-image { min-height: 360px; } .included-text { padding: 60px 32px; } }
301
302/* ── ADD-ONS ── */
303.addons-section { background: #F0EFED; padding: 0; }
304.addons-header { padding: 52px 48px 48px; text-align: center; }
305.addons-header .section-eyebrow { display: block; font-family: var(--font-bayer); font-size: clamp(2.2rem,3.8vw,3.6rem); letter-spacing: 0.15em; text-transform: lowercase; color: var(--gold); margin-bottom: 16px; }
306.addons-header h2 { font-family: var(--font-bayer); font-size: clamp(2rem,3.5vw,3.2rem); font-weight: 400; letter-spacing: 0.06em; text-transform: lowercase; color: #2C2C2C; line-height: 1; }
307.addons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: #FFFFFF; }
308.addon-card {
309  position: relative; overflow: hidden; min-height: 520px;
310  display: flex; flex-direction: column; justify-content: flex-end;
311}
312.addon-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s var(--ease); }
313.addon-card:hover img { transform: scale(1.05); }
314.addon-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,14,8,0.6) 0%, rgba(20,14,8,0.1) 45%, rgba(20,14,8,0) 100%); }
315.addon-content { position: relative; z-index: 1; padding: 48px 52px 56px; }
316.addon-tag { font-family: var(--font-bayer); font-size: 8px; letter-spacing: 0.4em; text-transform: lowercase; color: var(--gold); margin-bottom: 14px; display: block; }
317.addon-content h3 { font-family: var(--font-serif); font-size: clamp(1.8rem,2.7vw,2.6rem); font-weight: 500; color: var(--cream); line-height: 1.1; margin-bottom: 16px; }
318.addon-content p { font-family: var(--font-sans); font-size: 14.5px; font-weight: 500; line-height: 1.9; color: rgba(245,240,230,0.7); max-width: 380px; }
319.addon-note { font-family: var(--font-bayer); font-size: 8px; letter-spacing: 0.25em; text-transform: lowercase; color: rgba(44,44,44,0.3); margin-top: 16px; display: block; }
320@media(max-width:720px){ .addons-grid { grid-template-columns: 1fr; } .addon-card { min-height: 420px; } }
321
322/* ── PHOTO GALLERY STRIP ── */
323.gallery-strip { overflow: hidden; height: 380px; }
324.gallery-track { display: flex; gap: 4px; width: max-content; animation: scrollGallery 60s linear infinite; }
325.gallery-track:hover { animation-play-state: paused; }
326@keyframes scrollGallery { from { transform: translateX(0); } to { transform: translateX(-50%); } }
327.gallery-slide { flex: 0 0 480px; height: 380px; overflow: hidden; }
328.gallery-slide img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s var(--ease); }
329.gallery-slide:hover img { transform: scale(1.04); }
330@media(max-width:860px){ .gallery-strip { height: 260px; } .gallery-slide { flex: 0 0 320px; height: 260px; } }
331
332/* ── CTA ── */
333.cta-section { background: #F0EFED; padding: 72px 48px; text-align: center; border-top: 2px solid rgba(147,112,44,0.3); }
334.cta-section .eyebrow { font-family: var(--font-bayer); font-size: 14px; letter-spacing: 0.45em; text-transform: lowercase; color: rgba(147,112,44,0.9); margin-bottom: 28px; display: block; }
335.cta-section h2 { font-family: var(--font-serif); font-size: clamp(3rem,5.4vw,5.4rem); font-weight: 500; color: #2C2C2C; line-height: 1.1; margin-bottom: 28px; }
336.cta-section p { font-family: var(--font-sans); font-size: 18px; font-weight: 500; color: rgba(44,44,44,0.85); margin-bottom: 56px; max-width: 900px; white-space: nowrap; margin-left: auto; margin-right: auto; line-height: 1.9; }
337.cta-btn { display: inline-block; font-family: var(--font-bayer); font-size: 17px; letter-spacing: 0.3em; text-transform: lowercase; text-decoration: none; padding: 32px 96px; background: var(--gold); border: 1px solid var(--gold); color: #2C2C2C; font-weight: 500; transition: background 0.3s, color 0.3s, border-color 0.3s; }
338.cta-btn:hover { background: transparent; color: #2C2C2C; border-color: #2C2C2C; }
339
340/* ── FOOTER ── */
341footer { background: #F0EFED; padding: 48px; text-align: center; border: 1px solid rgba(44,44,44,0.05); }
342footer p { font-family: var(--font-bayer); font-size: 15px; letter-spacing: 0.2em; text-transform: lowercase; color: rgba(44,44,44,0.55); }
343
344/* ── FADE UP ── */
345.fade-up { opacity: 0; transform: translateY(28px); transition: opacity 0.9s ease, transform 0.9s ease; }
346.fade-up.visible { opacity: 1; transform: none; }
347.fade-up.delay-1 { transition-delay: 0.1s; }
348.fade-up.delay-2 { transition-delay: 0.2s; }
349.fade-up.delay-3 { transition-delay: 0.3s; }
350.fade-up.delay-4 { transition-delay: 0.4s; }
351
352@media(max-width:600px){
353  .intro-strip, .why-section, .shalas-section, .who-section,
354  .addons-header, .cta-section { padding: 72px 24px; }
355}
356
357/* ── OVERLAY TEXT – stays cream on dark photo backgrounds ── */
358.shala-name, .shala-mats, .shala-label,
359.retreat-card-content *, .addon-content *, .aerial-caption,
360.gal-lbl, .who-card-body * { color: inherit; }
361.shala-name { color: #F5F0E6 !important; }
362.shala-mats { color: var(--terracotta) !important; }
363.shala-label { color: rgba(245,240,230,0.75) !important; }
364
365
366@media(max-width:600px){
367  .why-section h2 { white-space: normal !important; font-size: clamp(1.6rem,7vw,2.2rem) !important; }
368  .why-close { white-space: normal !important; font-size: clamp(1rem,3.5vw,1.3rem) !important; }
369  .cta-section p { white-space: normal !important; max-width: 90% !important; font-size: 15px !important; }
370  .why-header-note { text-align: center !important; margin: 0 auto !important; max-width: 90% !important; }
371  .who-cards { grid-template-columns: 1fr !important; }
372  .shalas-grid { grid-template-columns: 1fr !important; }
373  .addons-grid { grid-template-columns: 1fr !important; }
374  .how-grid { grid-template-columns: 1fr !important; }
375  .intro-strip { padding: 48px 20px !important; }
376  .cta-section { padding: 56px 20px !important; }
377  .why-header { padding: 48px 20px 36px !important; }
378  .why-row-title h3 { font-size: clamp(1.1rem,4vw,1.4rem) !important; }
379  .location-text { padding: 48px 24px !important; }
380  .location-text p { font-size: 15px !important; }
381}
382
383/* On scroll, darken the logo and links on hero pages */
384nav.scrolled .nav-logo img { filter: brightness(0) !important; opacity: 0.8 !important; }
385nav.scrolled .nav-links a { color: var(--nearblack) !important; }
386nav.scrolled .nav-book { color: var(--nearblack) !important; border-color: rgba(44,44,44,0.4) !important; }
387nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.07); border: 1px solid rgba(44,44,44,0.08); }
388
389/* ── MOBILE NAV ── */
390.nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; z-index: 201; flex-shrink: 0; }
391.nav-hamburger span { display: block; width: 22px; height: 1.5px; background: rgba(245,240,230,0.9); transition: all 0.35s cubic-bezier(0.16,1,0.3,1); }
392nav.scrolled .nav-hamburger span, nav.mobile-open .nav-hamburger span { background: rgba(44,44,44,0.8); }
393nav.mobile-open .nav-hamburger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
394nav.mobile-open .nav-hamburger span:nth-child(2) { opacity: 0; }
395nav.mobile-open .nav-hamburger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
396.mobile-nav-overlay { display: none; position: fixed; inset: 0; z-index: 150; background: rgba(240,239,237,0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); flex-direction: column; align-items: center; justify-content: center; }
397.mobile-nav-overlay.open { display: flex; }
398.mobile-nav-overlay ul { list-style: none; text-align: center; width: 100%; }
399.mobile-nav-overlay ul li { border-bottom: 1px solid rgba(44,44,44,0.07); }
400.mobile-nav-overlay ul li a { display: block; font-family: var(--font-bayer, sans-serif); font-size: 20px; letter-spacing: 0.15em; text-transform: lowercase; color: #2C2C2C; text-decoration: none; padding: 22px 40px; transition: color 0.2s; }
401.mobile-nav-overlay ul li a:active { color: #93702C; }
402.mobile-nav-book-btn { display: inline-block; font-family: var(--font-bayer, sans-serif); font-size: 12px; letter-spacing: 0.28em; text-transform: lowercase; text-decoration: none; padding: 16px 48px; border: 1px solid rgba(147,112,44,0.5); color: #93702C; margin-top: 36px; transition: all 0.3s; }
403.mobile-nav-book-btn:hover { background: #93702C; color: #F5F0E6; }
404@media(max-width:900px) {
405  .nav-hamburger { display: flex; }
406  .nav-links { display: none !important; }
407  .nav-book, .nav-cta, .nav-back { display: none !important; }
408  nav { padding: 14px 20px !important; top: 10px !important; left: 10px !important; right: 10px !important; }
409  nav.scrolled { padding: 12px 20px !important; }
410  .nav-logo img { height: 34px !important; }
411}
412/* ── GLOBAL MOBILE FIXES ── */
413@media(max-width:600px) {
414  html { overflow-x: hidden; }
415  body { overflow-x: hidden; }
416  p, h2, h3, h4, .why-close, .cta-section p { white-space: normal !important; }
417  .hero-content { padding-left: 20px !important; padding-right: 20px !important; }
418}
419
420</style>
421</head>
422<body>
423
424<!-- NAV -->
425<nav id="nav">
426  <a class='nav-logo' href='/'>
427    <img src="images/amansala-logo.png" alt="Amansala">
428  </a>
429    <ul class="nav-links">
430    <li>
431      <a href='/rooms'>Stay With Us</a>
432      <ul class="nav-dropdown-menu">
433        <li><a href='/rooms'>Rooms &amp; Villas</a></li>
434      </ul>
435    </li>
436    <li>
437      <a href="#">Bring a Group</a>
438      <ul class="nav-dropdown-menu">
439        <li><a href='/host-a-retreat'>Host a Retreat</a></li>
440        <li><a href='/weddings'>Host Your Wedding</a></li>
441        <li><a href='/team-building'>Corporate Travel</a></li>
442        <li><a href='/bachelorette'>Bachelorette</a></li>
443        <li><a href='/birthday-celebrations-tulum'>Birthday Celebrations</a></li>
444      </ul>
445    </li>
446    <li><a href='/our-retreats'>Join a Retreat</a></li>
447    <li>
448      <a href="#">Experience Us</a>
449      <ul class="nav-dropdown-menu">
450        <li><a href='/ourschedule'>Wellness Schedule</a></li>
451        <li><a href='/spa'>Spa</a></li>
452        <li><a href='/beach-club'>Beach Club</a></li>
453        <li><a href='/restaurant'>Restaurant</a></li>
454        <li><a href='/tours'>Tours</a></li>
455      </ul>
456    </li>
457    <li>
458      <a href='/melissa-perlman'>About Us</a>
459      <ul class="nav-dropdown-menu">
460        <li><a href='/blog'>Amansala Journal</a></li>
461        <li><a href='/testimonials'>Reviews</a></li>
462      </ul>
463    </li>
464  </ul>
465  <a href="https://55903.17hats.com/p#/lcf/vhwfzkftpzvcvhbsrfwdtzzttkzstfsn" target="_blank" rel="noopener noreferrer" class="nav-book">get in touch</a>
466
467  <button class="nav-hamburger" id="navHamburger" aria-label="Open menu" aria-expanded="false"><span></span><span></span><span></span></button>
468</nav>
469
470<!-- 1. HERO -->
471<section class="hero">
472  <div class="hero-slides">
473    <div class="hero-slide active" style="background-image:url('retreat-group-circle-beach.jpg');background-position:center 50%;"></div>
474    <div class="hero-slide" style="background-image:url('fitness-class-rooftop-terrace.jpg');background-position:center 40%;"></div>
475    <div class="hero-slide" style="background-image:url('yoga-class-beachfront-instructor.jpg');background-position:center 40%;"></div>
476    <div class="hero-slide" style="background-image:url('ai-guest-balcony-ocean.jpg');background-position:center 50%;"></div>
477  </div>
478  <div class="hero-overlay"></div>
479  <div class="hero-content">
480    <div class="hero-eyebrow">Amansala · Tulum · Mexico</div>
481    <h1>Host a Retreat</h1>
482    <div class="hero-phrases" id="heroPhrases">
483      <div class="hero-phrase active">Share what you love</div>
484      <div class="hero-phrase">Do what you love and make money</div>
485      <div class="hero-phrase">A win win</div>
486      <div class="hero-phrase">A beautiful place with everything you need</div>
487      <div class="hero-phrase">For an amazing, successful retreat</div>
488    </div>
489    <a href="https://55903.17hats.com/p#/lcf/vhwfzkftpzvcvhbsrfwdtzzttkzstfsn" target="_blank" rel="noopener noreferrer" class="hero-cta" style="margin-top:32px;">looking to host? fill out this form</a>
490  </div>
491  <div class="hero-dots" id="heroDots"></div>
492</section>
493
494<!-- 2. INTRO STRIP -->
495<section class="intro-strip fade-up">
496  <span class="eyebrow">The Amansala Difference</span>
497  <h2 class="intro-headline">we make it easy</h2>
498  <p class="intro-body">We're experts at executing successful retreats, allowing you to do what you love and we help with all the rest.</p>
499  <a href="https://55903.17hats.com/p#/lcf/vhwfzkftpzvcvhbsrfwdtzzttkzstfsn" target="_blank" rel="noopener noreferrer" class="cta-btn" style="margin-top:24px;font-size:14px;padding:20px 56px;">looking to host? fill out this form</a>
500</section>
501
502<!-- 7. WHO IS THIS FOR (moved above location) -->
503<section class="who-section">
504  <span class="section-eyebrow fade-up">who we host</span>
505  <h2 class="fade-up">Is this for you?</h2>
506  <div class="who-grid">
507    <div class="who-card fade-up delay-1">
508      <div class="who-card-img">
509        <img src="yoga-class-sunrise-rooftop.jpg" alt="Yoga & Meditation Teachers">
510      </div>
511      <div class="who-card-body">
512        <span class="card-eyebrow">movement &amp; mindfulness</span>
513        <h3>Yoga &amp; Meditation Teachers</h3>
514        <p>Lead your community in one of the most iconic yoga settings in the world. Our shalas open directly onto the Caribbean, elevating every session.</p>
515      </div>
516    </div>
517    <div class="who-card fade-up delay-2">
518      <div class="who-card-img">
519        <img src="yoga-class-thatched-shala.jpg" alt="Wellness Brands & Coaches">
520      </div>
521      <div class="who-card-body">
522        <span class="card-eyebrow">brands &amp; coaches</span>
523        <h3>Wellness Brands &amp; Coaches</h3>
524        <p>Deepen client relationships with an immersive off-site. Beachfront setting, nourishing food and spa access create the perfect container for transformation.</p>
525      </div>
526    </div>
527    <div class="who-card fade-up delay-3">
528      <div class="who-card-img">
529        <img src="retreat-mud-treatment-beach.jpg" alt="Retreat mud treatment on the beach">
530      </div>
531      <div class="who-card-body">
532        <span class="card-eyebrow">groups &amp; celebrations</span>
533        <h3>Corporate &amp; Leadership Groups</h3>
534        <p>Retreat from the boardroom to the beach. Executive off-sites, team resets or bachelorette celebrations — we build a custom programme around your needs.</p>
535      </div>
536    </div>
537  </div>
538</section>
539
540<!-- 4. WHY AMANSALA -->
541<!-- 6. SHALAS -->
542<!-- 8. WHAT'S INCLUDED -->
543<section class="included-section">
544  <div class="included-inner">
545    <div class="included-image fade-up">
546      <img src="fullskyview-drone-vertical.jpg" alt="Aerial drone view of Amansala resort and beach">
547    </div>
548    <div class="included-text fade-up delay-1">
549      <span class="eyebrow">what's included</span>
550      <h2>Everything you need to run an exceptional retreat</h2>
551      <p>Let us help you curate an unforgettable retreat from start to finish.</p>
552      <ul class="included-list">
553        <li><div class="included-item-body"><div class="included-item-title-row"><span>Personalized retreat planning</span></div></div></li>
554        <li><div class="included-item-body"><div class="included-item-title-row"><span>Accommodations for every budget</span></div><p class="included-item-desc">Private garden rooms, large shared rooms, and deluxe beachfront suites at a range of price points.</p></div></li>
555        <li><div class="included-item-body"><div class="included-item-title-row"><span>Delicious, bountiful, healthy meals</span></div></div></li>
556        <li><div class="included-item-body"><div class="included-item-title-row"><span>Wellness activities</span><span class="included-optional-tag">optional</span></div><p class="included-item-desc">Cacao ceremonies, sound healings, Mayan clay meditation, ice bath and breath work, and Temazcal.</p></div></li>
557        <li><div class="included-item-body"><div class="included-item-title-row"><span>Unique experiences</span><span class="included-optional-tag">optional</span></div><p class="included-item-desc">Float down a beautiful channel, explore a swimming hole surrounded by mangroves, or visit the Mayan ruins.</p></div></li>
558        <li><div class="included-item-body"><div class="included-item-title-row"><span>Extra activities</span></div><p class="included-item-desc">Padel and pickleball, or select from our trainers and teachers to enhance your retreat.</p></div></li>
559        <li><div class="included-item-body"><div class="included-item-title-row"><span>Coordination of transportation and guest logistics</span></div></div></li>
560        <li><div class="included-item-body"><div class="included-item-title-row"><span>Dedicated on-site support</span></div></div></li>
561      </ul>
562      <p>You focus on your guests and doing what you love — we'll take care of the rest.</p>
563      <p style="font-family:var(--font-bayer);font-size:14px;letter-spacing:0.05em;color:var(--gold);font-weight:500;margin-top:-12px;">Shared rooms starting at $235 USD per person per night, and private rooms starting at $295 USD per person per night — plus tax and tip.</p>
564    </div>
565  </div>
566</section>
567
568<!-- 9. ADD-ONS -->
569<!-- 11. PHOTO GALLERY -->
570<div class="gallery-strip">
571  <div class="gallery-track">
572    <div class="gallery-slide"><img src="fitness-class-beachfront-deck.jpg" alt="Fitness class on the beachfront deck"></div>
573    <div class="gallery-slide"><img src="fitness-class-outdoor-rooftop.jpg" alt="Outdoor fitness class on rooftop"></div>
574    <div class="gallery-slide"><img src="fitness-class-rooftop-aerial-jungle.jpg" alt="Rooftop fitness class aerial view"></div>
575    <div class="gallery-slide"><img src="excursion-boat-lagoon.jpg" alt="Boat excursion on the lagoon"></div>
576    <div class="gallery-slide"><img src="fitness-class-rooftop-sunset-2.jpg" alt="Rooftop fitness class at sunset"></div>
577    <div class="gallery-slide"><img src="pool-aerial-drone-sunbathers.jpg" alt="Aerial view of pool with sunbathers"></div>
578    <div class="gallery-slide"><img src="guests-toasting-poolside.jpg" alt="Guests toasting poolside"></div>
579    <div class="gallery-slide"><img src="retreat-group-circle-shala.jpg" alt="Retreat group circle in the shala"></div>
580    <div class="gallery-slide"><img src="retreat-night-ceremony-jungle.jpg" alt="Night ceremony in the jungle"></div>
581    <div class="gallery-slide"><img src="yoga-class-thatched-shala.jpg" alt="Yoga class in the thatched shala"></div>
582    <div class="gallery-slide"><img src="yoga-class-restorative.jpg" alt="Restorative yoga class"></div>
583    <div class="gallery-slide"><img src="excursion-group-boardwalk.jpg" alt="Group excursion on the boardwalk"></div>
584    <div class="gallery-slide"><img src="ai-retreat-circle-beach.jpg" alt="Retreat circle on the beach"></div>
585    <!-- duplicates for seamless loop -->
586    <div class="gallery-slide"><img src="fitness-class-beachfront-deck.jpg" alt="Fitness class on the beachfront deck"></div>
587    <div class="gallery-slide"><img src="fitness-class-outdoor-rooftop.jpg" alt="Outdoor fitness class on rooftop"></div>
588    <div class="gallery-slide"><img src="fitness-class-rooftop-aerial-jungle.jpg" alt="Rooftop fitness class aerial view"></div>
589    <div class="gallery-slide"><img src="excursion-boat-lagoon.jpg" alt="Boat excursion on the lagoon"></div>
590    <div class="gallery-slide"><img src="fitness-class-rooftop-sunset-2.jpg" alt="Rooftop fitness class at sunset"></div>
591    <div class="gallery-slide"><img src="pool-aerial-drone-sunbathers.jpg" alt="Aerial view of pool with sunbathers"></div>
592    <div class="gallery-slide"><img src="guests-toasting-poolside.jpg" alt="Guests toasting poolside"></div>
593    <div class="gallery-slide"><img src="retreat-group-circle-shala.jpg" alt="Retreat group circle in the shala"></div>
594    <div class="gallery-slide"><img src="retreat-night-ceremony-jungle.jpg" alt="Night ceremony in the jungle"></div>
595    <div class="gallery-slide"><img src="yoga-class-thatched-shala.jpg" alt="Yoga class in the thatched shala"></div>
596    <div class="gallery-slide"><img src="yoga-class-restorative.jpg" alt="Restorative yoga class"></div>
597    <div class="gallery-slide"><img src="excursion-group-boardwalk.jpg" alt="Group excursion on the boardwalk"></div>
598    <div class="gallery-slide"><img src="ai-retreat-circle-beach.jpg" alt="Retreat circle on the beach"></div>
599  </div>
600</div>
601
602<!-- 12. CTA -->
603<section class="why-section fade-up">
604  <div class="why-header">
605    <div class="why-header-left">
606      <span class="section-eyebrow">why host at amansala</span>
607      <h2>Why do teachers keep coming back<br>over and over again to host with us?</h2>
608    </div>
609  </div>
610
611  <ul class="why-list">
612    <li class="why-row why-row--photo fade-up delay-1">
613      <div class="why-row-title-body">
614        <span class="why-row-accent"></span>
615        <h3>A Variety of Beautiful Rooms</h3>
616        <p style="font-family:var(--font-sans);font-size:16px;font-weight:500;color: rgba(44,44,44,0.85);line-height:1.95;">From garden doubles to beachfront king suites with private terraces — room styles to fit every guest and every budget in your group.</p>
617      </div>
618      <div class="why-row-photo">
619        <div class="mini-carousel">
620          <div class="mini-carousel-slide active"><img src="ai-beachfront-king-full-ocean.jpg" alt="Beachfront king room with ocean view at Amansala"></div>
621          <div class="mini-carousel-slide"><img src="ai-garden-king-jungle-window.png" alt="Garden King room with jungle-view window at Amansala"></div>
622          <div class="mini-carousel-slide"><img src="ai-king-room-sofa-canopy.png" alt="King room with sofa and canopy bed at Amansala"></div>
623          <div class="mini-carousel-slide"><img src="ai-king-room-beachview-lounge.png" alt="King room with beachview lounge at Amansala"></div>
624          <div class="mini-carousel-slide"><img src="ai-beachview-double.png" alt="Beachview double room at Amansala"></div>
625          <div class="mini-carousel-slide"><img src="ai-guest-balcony-ocean.png" alt="Guest balcony with ocean view at Amansala"></div>
626          <div class="mini-carousel-slide"><img src="ai-beachfront-balcony-sofa-thatched.png" alt="Beachfront balcony with sofa and thatched roof at Amansala"></div>
627          <div class="mini-carousel-slide"><img src="ai-beachfront-king-hammock-windows.png" alt="Beachfront King room with hammock and windows at Amansala"></div>
628          <div class="mini-carousel-slide"><img src="ai-garden-king-macrame-boho.png" alt="Garden King room with macrame boho decor at Amansala"></div>
629        </div>
630      </div>
631    </li>
632    <li class="why-row why-row--photo fade-up delay-2">
633      <div class="why-row-title-body">
634        <span class="why-row-accent"></span>
635        <h3>Beautiful Shalas</h3>
636        <p style="font-family:var(--font-sans);font-size:16px;font-weight:500;color: rgba(44,44,44,0.85);line-height:1.95;">Six gorgeous open-air shalas for yoga, movement and ceremony — each one opening directly onto the sea, jungle or sky.</p>
637      </div>
638      <div class="why-row-photo">
639        <div class="mini-carousel">
640          <div class="mini-carousel-slide active"><img src="ai-yoga-shala-mats-set.png" alt="Yoga shala with mats set for practice at Amansala"></div>
641          <div class="mini-carousel-slide"><img src="fitness-class-rooftop-terrace.png" alt="Fitness class on the rooftop terrace at Amansala"></div>
642          <div class="mini-carousel-slide"><img src="yoga-class-beachfront-instructor.png" alt="Yoga class with beachfront instructor at Amansala"></div>
643          <div class="mini-carousel-slide"><img src="yoga-shala-mats-laid-out.png" alt="Yoga shala with mats laid out at Amansala"></div>
644          <div class="mini-carousel-slide"><img src="images/shalas/skye.webp" alt="Skye Shala rooftop with colorful cushions at Amansala"></div>
645        </div>
646      </div>
647    </li>
648    <li class="why-row why-row--photo fade-up delay-3">
649      <div class="why-row-title-body">
650        <span class="why-row-accent"></span>
651        <h3>Beautiful Setting</h3>
652        <p style="font-family:var(--font-sans);font-size:16px;font-weight:500;color: rgba(44,44,44,0.85);line-height:1.95;">A village-like setting with vast grounds, lounge areas, and a beachfront dining deck — everything your group needs in one place.</p>
653      </div>
654      <div class="why-row-photo">
655        <div class="mini-carousel">
656          <div class="mini-carousel-slide active"><img src="beautifulsetting.jpg" alt="Amansala beachfront lounge area"></div>
657          <div class="mini-carousel-slide"><img src="beach-lounge-hammocks-daybeds.jpg" alt="Beachfront lounge with daybeds and hammocks at Amansala"></div>
658          <div class="mini-carousel-slide"><img src="rooftop-pool-ocean-view.jpg" alt="Rooftop pool with ocean view at Amansala"></div>
659          <div class="mini-carousel-slide"><img src="aerial-drone-resort.jpg" alt="Aerial drone view of Amansala resort"></div>
660          <div class="mini-carousel-slide"><img src="beach-walk-blast.jpg" alt="Group beach walk at Amansala"></div>
661          <div class="mini-carousel-slide"><img src="images/featured/beach-fitness.webp" alt="Beach fitness class at Amansala"></div>
662          <div class="mini-carousel-slide"><img src="images/featured/pool-aerial.webp" alt="Aerial view of pool at Amansala"></div>
663        </div>
664      </div>
665    </li>
666    <li class="why-row why-row--photo fade-up delay-1">
667      <div class="why-row-title-body">
668        <span class="why-row-accent"></span>
669        <h3>Great Healthy Food</h3>
670        <p style="font-family:var(--font-sans);font-size:16px;font-weight:500;color: rgba(44,44,44,0.85);line-height:1.95;">Fresh meals crafted to your group's needs. From the earth to your plate — every dish nourishes, energizes, and delights your guests from morning to night.</p>
671      </div>
672      <div class="why-row-photo">
673        <div class="mini-carousel">
674          <div class="mini-carousel-slide active"><img src="amansala-food-fresh-rolls.jpg" alt="Fresh healthy food at Amansala"></div>
675          <div class="mini-carousel-slide"><img src="images/retreat-dining.webp" alt="Retreat dining at Amansala"></div>
676          <div class="mini-carousel-slide"><img src="amansala-dining-dish-1.jpg" alt="Healthy dish served at Amansala"></div>
677          <div class="mini-carousel-slide"><img src="amansala-dining-dish-2.jpg" alt="Healthy dish served at Amansala"></div>
678          <div class="mini-carousel-slide"><img src="amansala-dining-dish-3.jpg" alt="Healthy dish served at Amansala"></div>
679          <div class="mini-carousel-slide"><img src="amansala-dining-dish-4.jpg" alt="Healthy dish served at Amansala"></div>
680          <div class="mini-carousel-slide"><img src="fresh-mangoes-tray.jpg" alt="Fresh mangoes at Amansala"></div>
681          <div class="mini-carousel-slide"><img src="green-juice-rosemary.jpg" alt="Fresh green juice with rosemary at Amansala"></div>
682          <div class="mini-carousel-slide"><img src="food-drinks-spread.jpg" alt="Food and drinks spread at Amansala"></div>
683          <div class="mini-carousel-slide"><img src="healthy-plate-avocado.jpg" alt="Healthy plate with avocado at Amansala"></div>
684        </div>
685      </div>
686    </li>
687    <li class="why-row why-row--photo fade-up delay-2">
688      <div class="why-row-title-body">
689        <span class="why-row-accent"></span>
690        <h3>Spa &amp; Soul Services</h3>
691        <p style="font-family:var(--font-sans);font-size:16px;font-weight:500;color: rgba(44,44,44,0.85);line-height:1.95;">Unforgettable pampering with our talented team of therapists. Add our signature Mayan clay ritual, Temazcal sweat lodge, ice bath, cacao, or sound healing ceremony.</p>
692      </div>
693      <div class="why-row-photo">
694        <div class="mini-carousel">
695          <div class="mini-carousel-slide active"><img src="ai-spa-room-round-frame.png" alt="Spa massage with ocean view at Amansala"></div>
696          <div class="mini-carousel-slide"><img src="ceremony-circle-shala-candlelit.png" alt="Candlelit ceremony circle in the shala at Amansala"></div>
697          <div class="mini-carousel-slide"><img src="retreat-ice-bath-double.png" alt="Ice bath treatment at Amansala"></div>
698          <div class="mini-carousel-slide"><img src="beach-dinner-moonlight.png" alt="Moonlight beach dinner at Amansala"></div>
699          <div class="mini-carousel-slide"><img src="ai-spa-room-organic-window.png" alt="Spa room with organic window at Amansala"></div>
700          <div class="mini-carousel-slide"><img src="ai-spa-massage-garden.png" alt="Spa massage in the garden at Amansala"></div>
701          <div class="mini-carousel-slide"><img src="ai-spa-treatment-ocean.png" alt="Spa treatment with ocean view at Amansala"></div>
702        </div>
703      </div>
704    </li>
705    <li class="why-row why-row--photo fade-up delay-3">
706      <div class="why-row-title-body">
707        <span class="why-row-accent"></span>
708        <h3>Add On Adventures</h3>
709        <p style="font-family:var(--font-sans);font-size:16px;font-weight:500;color: rgba(44,44,44,0.85);line-height:1.95;">Biking to Mayan ruins, snorkeling in cenotes, kayaking through the mangroves, or floating on crystal blue water — we arrange every detail with energetic local guides.</p>
710      </div>
711      <div class="why-row-photo">
712        <div class="mini-carousel">
713          <div class="mini-carousel-slide active"><img src="excursion-boat-lagoon.jpg" alt="Boat excursion on the lagoon"></div>
714          <div class="mini-carousel-slide"><img src="excursion-cenote-group.jpg" alt="Group excursion at a cenote near Amansala"></div>
715          <div class="mini-carousel-slide"><img src="excursion-group-boardwalk.jpg" alt="Group excursion on the boardwalk near Amansala"></div>
716          <div class="mini-carousel-slide"><img src="excursion-kayak-aerial.jpg" alt="Aerial view of kayaking excursion near Amansala"></div>
717          <div class="mini-carousel-slide"><img src="excursion-kayak-lagoon.jpg" alt="Kayaking through the lagoon near Amansala"></div>
718          <div class="mini-carousel-slide"><img src="excursion-kayak-swim.jpg" alt="Kayaking and swimming excursion near Amansala"></div>
719          <div class="mini-carousel-slide"><img src="grande-cenote-1.jpg" alt="Grande Cenote near Amansala"></div>
720          <div class="mini-carousel-slide"><img src="grande-cenote-2.jpg" alt="Grande Cenote near Amansala"></div>
721          <div class="mini-carousel-slide"><img src="tulum-ruins-gallery-3.jpg" alt="Tulum ruins excursion near Amansala"></div>
722          <div class="mini-carousel-slide"><img src="tulum-ruins-photo.jpg" alt="Tulum ruins excursion near Amansala"></div>
723          <div class="mini-carousel-slide"><img src="tulum-ruins-gallery-4.jpg" alt="Tulum ruins excursion near Amansala"></div>
724        </div>
725      </div>
726    </li>
727    <li class="why-row why-row--photo fade-up delay-1">
728      <div class="why-row-title-body">
729        <span class="why-row-accent"></span>
730        <h3>Logistics with Ease</h3>
731        <p style="font-family:var(--font-sans);font-size:16px;font-weight:500;color: rgba(44,44,44,0.85);line-height:1.95;">Two international airports in Cancún and Tulum with direct flights from most major cities. We coordinate all transportation.</p>
732      </div>
733      <div class="why-row-photo">
734        <div class="mini-carousel"><div class="mini-carousel-slide active"><img src="plane-caribbean.jpg" alt="Plane flying over the Caribbean"></div></div>
735      </div>
736    </li>
737    <li class="why-row why-row--photo fade-up delay-2">
738      <div class="why-row-title-body">
739        <span class="why-row-accent"></span>
740        <h3>Amazing Staff</h3>
741        <p style="font-family:var(--font-sans);font-size:16px;font-weight:500;color: rgba(44,44,44,0.85);line-height:1.95;">Our team has hosted retreat leaders from around the world for over two decades. We know how to support you so your retreat feels flawless.</p>
742      </div>
743      <div class="why-row-photo">
744        <div class="mini-carousel"><div class="mini-carousel-slide active"><img src="amansala-staff-smiling-beachfront.jpg" alt="Amansala staff member at the beach club"></div></div>
745      </div>
746    </li>
747  </ul>
748
749  <div class="why-close-wrap fade-up">
750    <div class="why-close-line"></div>
751    <p class="why-close">We know how to host you so you can show up and do what you love — without stress.</p>
752  </div>
753</section>
754
755<!-- TESTIMONIALS -->
756<section class="testimonials-section fade-up">
757  <span class="section-eyebrow">testimonials from teachers</span>
758  <h2>Hear what our past retreat leaders have to say</h2>
759  <p style="font-family:var(--font-sans);font-size:19px;font-weight:500;color:rgba(44,44,44,0.85);max-width:600px;margin:24px auto 0;line-height:1.9;">Watch video testimonials from past retreat leaders.</p>
760  <a href="/testimonials" style="display:inline-block;margin-top:24px;font-family:var(--font-bayer);font-size:13px;letter-spacing:0.25em;text-transform:lowercase;padding:15px 40px;border:1px solid var(--gold);color:var(--gold);text-decoration:none;transition:all 0.3s;">testimonials page →</a>
761</section>
762
763<section class="shalas-section">
764  <span class="section-eyebrow fade-up">practice spaces</span>
765  <h2 class="fade-up">Six extraordinary shalas</h2>
766  <p class="shalas-intro fade-up">From intimate gatherings to large-group immersions —<br>every space opens to the sea, the jungle, or the sky.</p>
767
768  <div class="shalas-grid">
769    <div class="shala-card fade-up delay-1">
770      <img src="mothersday-images/yoga-shala.jpg" alt="Beachfront Shala">
771      <div class="shala-overlay"></div>
772      <div class="shala-info">
773        <span class="shala-name">Beachfront Shala</span>
774        <span class="shala-mats">28</span>
775        <span class="shala-label">mats</span>
776      </div>
777    </div>
778    <div class="shala-card fade-up delay-2">
779      <img src="fitness-class-rooftop-terrace.jpg" alt="Rooftop Yoga Shala">
780      <div class="shala-overlay"></div>
781      <div class="shala-info">
782        <span class="shala-name">Rooftop Shala</span>
783        <span class="shala-mats">25</span>
784        <span class="shala-label">mats</span>
785      </div>
786    </div>
787    <div class="shala-card fade-up delay-3">
788      <img src="yoga-shala-mats-laid-out.jpg" alt="Grande Shala">
789      <div class="shala-overlay"></div>
790      <div class="shala-info">
791        <span class="shala-name">Grande Shala</span>
792        <span class="shala-mats">75</span>
793        <span class="shala-label">mats</span>
794      </div>
795    </div>
796    <div class="shala-card fade-up delay-1">
797      <img src="heaven-shala-rooftop-ocean.jpg" alt="Heaven Shala">
798      <div class="shala-overlay"></div>
799      <div class="shala-info">
800        <span class="shala-name">Heaven Shala</span>
801        <span class="shala-mats">25</span>
802        <span class="shala-label">mats</span>
803      </div>
804    </div>
805    <div class="shala-card fade-up delay-2">
806      <img src="yoga-shala-teal-mats.jpg" alt="Chica Shala">
807      <div class="shala-overlay"></div>
808      <div class="shala-info">
809        <span class="shala-name">Chica Shala</span>
810        <span class="shala-mats">45</span>
811        <span class="shala-label">mats</span>
812      </div>
813    </div>
814    <div class="shala-card fade-up delay-3">
815      <img src="skye-shala.jpg" alt="Skye Shala">
816      <div class="shala-overlay"></div>
817      <div class="shala-info">
818        <span class="shala-name">Skye Shala</span>
819        <span class="shala-mats">15</span>
820        <span class="shala-label">mats</span>
821      </div>
822    </div>
823  </div>
824</section>
825
826<section class="cta-section fade-up">
827  <span class="eyebrow">Amansala · Tulum · Mexico</span>
828  <h2>Ready to bring your<br>retreat to life?</h2>
829  <p>Take a moment to fill out this form to tell us more about your plans for group travel.</p>
830  <a href="https://55903.17hats.com/p#/lcf/vhwfzkftpzvcvhbsrfwdtzzttkzstfsn" target="_blank" rel="noopener noreferrer" class="cta-btn">explore hosting with us</a>
831  <a href="/retreat-calculator" class="cta-btn" style="margin-left:16px;">get your custom quote</a>
832  <a href="https://55903.17hats.com/p#/lcf/vhwfzkftpzvcvhbsrfwdtzzttkzstfsn" target="_blank" rel="noopener noreferrer" class="cta-btn" style="margin-left:16px;">looking to host? fill out this form</a>
833</section>
834
835<!-- FOOTER -->
836<section class="addons-section">
837  <div class="addons-header">
838    <span class="section-eyebrow fade-up">enhance your retreat</span>
839    <h2 class="fade-up">Add-On Offerings</h2>
840  </div>
841  <div class="addons-grid">
842    <div class="addon-card fade-up">
843      <img src="images/cenote-lagoon.jpg" alt="Adventure Tours — cenote, Mayan ruins">
844      <div class="addon-overlay"></div>
845      <div class="addon-content">
846        <span class="addon-tag">adventure</span>
847        <h3>Adventure Tours</h3>
848        <p>Biking to Mayan ruins, snorkeling freshwater cenotes, mangrove kayaking or floating in crystal blue water — half-day activities with energetic local guides.</p>
849      </div>
850    </div>
851    <div class="addon-card fade-up delay-1">
852      <img src="mothersday-images/ceremony-hands.jpg" alt="Group Ceremony — Temazcal, cacao">
853      <div class="addon-overlay"></div>
854      <div class="addon-content">
855        <span class="addon-tag">ceremony &amp; ritual</span>
856        <h3>Group Ceremonies</h3>
857        <p>Signature Mayan clay ritual, Temazcal sweat lodge, sound healing and cacao ceremony. Sacred, powerful additions to any retreat programme.</p>
858        <span class="addon-note">pre-book for group pricing</span>
859      </div>
860    </div>
861  </div>
862</section>
863
864<footer>
865  <div class="footer-social"><a href="https://www.instagram.com/amansalatulum" target="_blank" rel="noopener noreferrer" class="footer-instagram" aria-label="Amansala Tulum on Instagram"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2c2.717 0 3.056.01 4.122.06 1.065.05 1.79.217 2.428.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.248.637.415 1.363.465 2.428.05 1.066.06 1.405.06 4.122 0 2.717-.01 3.056-.06 4.122-.05 1.065-.217 1.79-.465 2.428a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.637.248-1.363.415-2.428.465-1.066.05-1.405.06-4.122.06-2.717 0-3.056-.01-4.122-.06-1.065-.05-1.79-.217-2.428-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.248-.637-.415-1.363-.465-2.428C2.013 15.056 2 14.717 2 12c0-2.717.01-3.056.06-4.122.05-1.065.217-1.79.465-2.428a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.637-.248 1.363-.415 2.428-.465C8.944 2.013 9.283 2 12 2zm0 1.802c-2.67 0-2.986.01-4.04.059-.976.045-1.505.207-1.858.344-.466.181-.8.399-1.15.748-.35.35-.567.684-.748 1.15-.137.353-.3.882-.344 1.857-.05 1.055-.06 1.37-.06 4.04 0 2.67.01 2.986.06 4.04.045.976.207 1.50
8655.344 1.858.181.466.399.8.748 1.15.35.35.684.567 1.15.748.353.137.882.3 1.857.344 1.054.05 1.37.06 4.04.06 2.67 0 2.987-.01 4.04-.06.976-.045 1.505-.207 1.858-.344.466-.181.8-.398 1.15-.748.35-.35.567-.684.748-1.15.137-.353.3-.882.344-1.857.05-1.055.06-1.37.06-4.04 0-2.67-.01-2.986-.06-4.04-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.055-.05-1.37-.06-4.04-.06zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zM12 15a3 3 0 100-6 3 3 0 000 6zm5.338-9.87a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"/></svg></a></div>
866  <p style="margin-top:10px;font-size:11px;"><a href='/cancellation-policy' style='color:#93702C;text-decoration:none;'>Cancellation Policy</a> &middot; <a href='/privacy-policy' style='color:#93702C;text-decoration:none;'>Privacy Policy</a> &middot; <a href='/terms-conditions' style='color:#93702C;text-decoration:none;'>Terms and Conditions</a></p>
867  <p>&copy; 2026 Amansala &middot; Tulum, Mexico</p>
868</footer>
869
870<script>
871const nav = document.getElementById('nav');
872window.addEventListener('scroll', () => nav.classList.toggle('scrolled', window.scrollY > 60));
873
874const obs = new IntersectionObserver(entries => {
875  entries.forEach(e => {
876    if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); }
877  });
878}, { threshold: 0.08 });
879document.querySelectorAll('.fade-up').forEach(el => obs.observe(el));
880
881// Hero slideshow
882(function() {
883  const slides = document.querySelectorAll('.hero-slide');
884  const dotsEl = document.getElementById('heroDots');
885  let current = 0;
886
887  // Build dots
888  slides.forEach((_, i) => {
889    const d = document.createElement('div');
890    d.className = 'hero-dot' + (i === 0 ? ' active' : '');
891    d.addEventListener('click', () => goTo(i));
892    dotsEl.appendChild(d);
893  });
894
895  function goTo(n) {
896    slides[current].classList.remove('active');
897    dotsEl.children[current].classList.remove('active');
898    current = n;
899    slides[current].classList.add('active');
900    dotsEl.children[current].classList.add('active');
901  }
902
903  setInterval(() => goTo((current + 1) % slides.length), 4500);
904})();
905
906// Mini carousels (why-row photos)
907document.querySelectorAll('.mini-carousel').forEach(carousel => {
908  const slides = carousel.querySelectorAll('.mini-carousel-slide');
909  if (slides.length < 2) return; // nothing to rotate yet
910
911  const dotsEl = document.createElement('div');
912  dotsEl.className = 'mini-carousel-dots';
913  carousel.appendChild(dotsEl);
914
915  let current = 0;
916  slides.forEach((_, i) => {
917    const d = document.createElement('div');
918    d.className = 'mini-carousel-dot' + (i === 0 ? ' active' : '');
919    d.addEventListener('click', () => goTo(i));
920    dotsEl.appendChild(d);
921  });
922
923  function goTo(n) {
924    slides[current].classList.remove('active');
925    dotsEl.children[current].classList.remove('active');
926    current = n;
927    slides[current].classList.add('active');
928    dotsEl.children[current].classList.add('active');
929  }
930
931  setInterval(() => goTo((current + 1) % slides.length), 12000 + Math.random() * 2000);
932});
933
934// Hero phrase rotator
935(function() {
936  const phrases = document.querySelectorAll('.hero-phrase');
937  let i = 0;
938  setInterval(() => {
939    phrases[i].classList.remove('active');
940    i = (i + 1) % phrases.length;
941    phrases[i].classList.add('active');
942  }, 2800);
943})();
944
945// Mobile nav hamburger
946const _ham = document.getElementById('navHamburger');
947const _mob = document.getElementById('mobileNavOverlay');
948if (_ham && _mob) {
949  _ham.addEventListener('click', () => {
950    const open = _mob.classList.toggle('open');
951    document.getElementById('nav').classList.toggle('mobile-open', open);
952    _ham.setAttribute('aria-expanded', open);
953    document.body.style.overflow = open ? 'hidden' : '';
954  });
955  _mob.querySelectorAll('a').forEach(a => a.addEventListener('click', () => {
956    _mob.classList.remove('open');
957    document.getElementById('nav').classList.remove('mobile-open');
958    _ham.setAttribute('aria-expanded', 'false');
959    document.body.style.overflow = '';
960  }));
961}
962
963</script>
963
964
965<!-- MOBILE NAV OVERLAY -->
966<div class="mobile-nav-overlay" id="mobileNavOverlay">
967  <ul>
968    <li><a href='/'>Home</a></li>
969    <li><a href='/rooms'>Stay With Us</a></li>
970    <li><a href='/host-a-retreat'>Bring a Group</a></li>
971    <li><a href='/our-retreats'>Join a Retreat</a></li>
972    <li><a href='/ourschedule'>Wellness Schedule</a></li>
973    <li><a href='/spa'>Spa</a></li>
974    <li><a href='/beach-club'>Beach Club</a></li>
975    <li><a href='/melissa-perlman'>About Us</a></li>
976    <li><a href='/blog'>Amansala Journal</a></li>
977    <li><a href='/testimonials'>Reviews</a></li>
978  </ul>
979  <a href="https://hotels.cloudbeds.com/en/reservation/asmG9k?currency=usd" target="_blank" class="mobile-nav-book-btn">Book Now</a>
980</div>
981
982<script src="retreat-guide-widget.js"></script>
vendor: 1 bytes, line 982
982
983<script>
984// GA4 click-intent tracking for the host-a-retreat 17hats inquiry form.
985// Fires on click, before the user leaves the page — this measures clicks
986// on the form link, NOT confirmed form submission (the form itself lives
987// entirely on 17hats.com, so our GA4 tag has no visibility into what
988// happens after the user lands there). 2026-09-30.
989document.querySelectorAll('a[href*="17hats.com"]').forEach(a => {
990  a.addEventListener('click', () => {
991    if (typeof gtag === 'function') {
992      gtag('event', 'generate_lead_host_retreat', {
993        page_path: window.location.pathname,
994        link_text: a.textContent.trim()
995      });
996    }
997  });
998});
999</script>
999
1000</body>
1001</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.