/* Cabin Ownership.
 *
 * Layout follows the reference design closely - left-aligned section headers
 * with a small uppercase eyebrow, a dark band carrying a 2x2 hairline grid, and
 * floor-plan cards on cream. The palette and type are this site's:
 * Playfair Display / Source Sans 3, navy / gold / cream from
 * landing-camping-pass.css, which is enqueued first.
 */

body.amr-cabin-ownership {
  font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  max-width: 100vw;
  margin: 0;
  padding: 0;
}

body.amr-cabin-ownership * { box-sizing: border-box; }

body.amr-cabin-ownership h1,
body.amr-cabin-ownership h2,
body.amr-cabin-ownership h3 { font-family: 'Playfair Display', serif; }

body.amr-cabin-ownership section,
body.amr-cabin-ownership .announcement-bar,
body.amr-cabin-ownership .site-header { max-width: 100%; width: 100%; }

.co-wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }

.co-eyebrow {
  display: block;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 0.9rem;
}

/* ── HERO ── */
.co-hero {
  position: relative;
  background:
    linear-gradient(90deg, rgba(20,42,40,0.86) 0%, rgba(20,42,40,0.62) 55%, rgba(20,42,40,0.35) 100%),
    var(--co-hero-img, none) center / cover no-repeat,
    var(--blue-deep);
  color: var(--white);
  padding: 7rem 0 6rem;
}

.co-hero .co-eyebrow { color: rgba(255,255,255,0.75); }

.co-hero h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  line-height: 1.02;
  margin: 0 0 1.4rem;
  color: var(--white);
  max-width: 15ch;
}

.co-hero h1 .co-h1-second { display: block; color: var(--gold-light); }

.co-hero-sub {
  max-width: 34ch;
  font-size: 1.18rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
  margin: 0 0 2.2rem;
}

.co-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }

.co-btn {
  display: inline-block;
  background: var(--gold);
  color: var(--blue-deep);
  padding: 0.95rem 2rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(212,168,67,0.3);
  transition: background 0.18s ease, transform 0.18s ease;
}

.co-btn:hover { background: var(--gold-light); transform: translateY(-2px); }

.co-btn-quiet {
  display: inline-block;
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.4);
}

.co-btn-quiet:hover { color: var(--gold-light); border-bottom-color: var(--gold-light); }

/* ── SECTIONS ── */
.co-section { padding: 5rem 0; }
.co-section-cream { background: var(--cream); }
.co-section-white { background: var(--white); }

.co-section-dark {
  background: var(--blue-deep);
  color: var(--white);
}

.co-section-dark .co-eyebrow { color: var(--gold-light); }
.co-section-dark h2 { color: var(--white); }

.co-head { max-width: 620px; margin-bottom: 3rem; }

.co-head h2 {
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  line-height: 1.14;
  margin: 0 0 1rem;
  color: var(--blue-deep);
}

.co-head p { font-size: 1.06rem; line-height: 1.7; color: var(--text-mid); margin: 0; }

/* Dark-section overrides must come after (and out-specify) the .co-head rules
   above. `.co-head h2` and `.co-section-dark h2` have equal specificity, so the
   later one won and put navy headings on a navy band - invisible. */
.co-section-dark .co-head h2,
.co-section-dark .co-plain h2 { color: var(--white); }
.co-section-dark .co-head p { color: rgba(255,255,255,0.82); }

/* Stylised opening statement.
   Mirrors the reference: a large display serif set at body weight, with two
   accent phrases - one italic in the cool tone, one bold in the warm tone.
   The reference used teal + terracotta; the equivalents in this palette are
   --blue-mid and --gold-dark. */
.co-lede {
  max-width: 20ch;
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  font-weight: 400;
  line-height: 1.18;
  color: var(--blue-deep);
  margin: 0;
}

.co-lede em {
  font-style: italic;
  color: var(--blue-mid);
}

.co-lede strong {
  font-weight: 700;
  color: var(--gold-dark);
}

@media (max-width: 900px) {
  .co-lede { max-width: 26ch; }
}

/* ── STEP GRID (hairline rules, no cards) ── */
.co-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid rgba(255,255,255,0.18);
}

.co-step {
  padding: 2.2rem 2.2rem 2.4rem;
  border-right: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
}

.co-step:nth-child(2n) { border-right: none; }
.co-step:nth-last-child(-n+2) { border-bottom: none; }

.co-step-num {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.5);
}

.co-step h3 { font-size: 1.4rem; margin: 1rem 0 0.8rem; color: var(--white); }
.co-step p { margin: 0; font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,0.82); }

@media (max-width: 760px) {
  .co-steps { grid-template-columns: 1fr; }
  .co-step { border-right: none; }
  .co-step:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.18); }
  .co-step:last-child { border-bottom: none; }
}

.co-finenote {
  max-width: 62ch;
  margin: 2rem 0 0;
  font-size: 0.85rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.5);
}

.co-section-cream .co-finenote,
.co-section-white .co-finenote { color: var(--text-light); }

/* ── SETTINGS ── */
.co-settings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 860px) { .co-settings { grid-template-columns: 1fr; max-width: 480px; } }

.co-setting { border-radius: 14px; overflow: hidden; background: var(--white); border: 1px solid var(--cream-dark); }
.co-setting-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-dark); }
.co-setting-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.co-setting-body { padding: 1.3rem 1.4rem 1.5rem; }
.co-setting h3 { font-size: 1.35rem; margin: 0 0 0.4rem; color: var(--blue-deep); }
.co-setting p { margin: 0; color: var(--text-mid); font-size: 0.98rem; line-height: 1.6; }

/* ── EVERY CABIN INCLUDES ──
   Image-led rather than another grid of boxes: the page already has tiles,
   pills, cards and a hairline grid, so this one earns its place with a photo
   and a quiet typographic list. The offset gold frame gives it depth without
   adding another container style. */
.co-includes-split {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 4rem;
  align-items: center;
}

@media (max-width: 900px) {
  .co-includes-split { grid-template-columns: 1fr; gap: 2.5rem; }
}

.co-includes-figure { position: relative; }

.co-includes-figure::before {
  content: '';
  position: absolute;
  inset: -14px -14px 14px 14px;
  border: 2px solid var(--gold);
  border-radius: 16px;
  pointer-events: none;
}

/* ── INTERIOR SLIDER ── */
.co-slider {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: rgba(255,255,255,0.06);
}

@supports not (aspect-ratio: 4 / 3) { .co-slider { height: 420px; } }

.co-slides { position: absolute; inset: 0; }

.co-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.co-slide.is-active { opacity: 1; pointer-events: auto; }

/* Imagify wraps attachments in <picture>, so the wrapper needs to be a block
   or it collapses and the frame sits on nothing. */
.co-slide picture { display: block; width: 100%; height: 100%; }

.co-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* A portrait photo cropped to the 4:3 frame loses its top and bottom, so show
   it whole and let it pillarbox against the slider's own background. */
.co-slide.is-portrait img {
  object-fit: contain;
}

.co-slide-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.6rem 1.2rem 1rem;
  background: linear-gradient(180deg, transparent, rgba(16,28,45,0.82));
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.co-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(16,28,45,0.45);
  color: var(--white);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, border-color 0.18s ease;
  z-index: 2;
}

.co-slider-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--blue-deep); }
.co-slider-btn:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }
.co-slider-btn.is-prev { left: 0.8rem; }
.co-slider-btn.is-next { right: 0.8rem; }

.co-slider-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.85rem;
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  z-index: 2;
}

.co-slider-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.co-slider-dots button.is-active { background: var(--gold); transform: scale(1.35); }
.co-slider-dots button:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .co-slide { transition: none; }
  .co-slider-dots button { transition: none; }
}

@media (max-width: 900px) {
  .co-includes-figure::before { inset: -10px -10px 10px 10px; }
}

.co-includes-head h2 {
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  line-height: 1.14;
  margin: 0 0 0.7rem;
  color: var(--white);
}

.co-includes-intro {
  margin: 0 0 1.6rem;
  color: rgba(255,255,255,0.72);
  font-size: 1.04rem;
  line-height: 1.7;
  max-width: 44ch;
}

.co-includes { list-style: none; margin: 0; padding: 0; }

.co-includes li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  font-size: 1.08rem;
  color: var(--white);
}

.co-includes li:first-child { border-top: 1px solid rgba(255,255,255,0.14); }

.co-includes li::before {
  content: '\2713';
  flex: none;
  color: var(--gold);
  font-size: 0.95rem;
  font-weight: 800;
}

/* ── FLOOR PLANS ── */
.co-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
@media (max-width: 960px) { .co-plans { grid-template-columns: 1fr; max-width: 520px; } }

.co-plan { background: var(--white); border: 1px solid var(--cream-dark); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.co-plan-img { background: var(--white); padding: 1.2rem; border-bottom: 1px solid var(--cream-dark); }
.co-plan-img img { width: 100%; height: 175px; object-fit: contain; display: block; }
.co-plan-body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; }

.co-plan-kicker {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.co-plan h3 { font-size: 1.5rem; margin: 0.5rem 0 0.5rem; color: var(--blue-deep); }
.co-plan-spec { font-size: 0.88rem; color: var(--text-light); margin: 0 0 0.9rem; }
.co-plan-desc { font-size: 0.96rem; line-height: 1.6; color: var(--text-mid); margin: 0 0 1.3rem; }

.co-plan-prices { margin-top: auto; border-top: 1px solid var(--cream-dark); }

.co-plan-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--cream-dark);
  font-size: 0.93rem;
}

.co-plan-row:last-child { border-bottom: none; }
.co-plan-row dt { color: var(--text-light); margin: 0; }
.co-plan-row dd { margin: 0; font-weight: 700; color: var(--blue-deep); }
.co-plan-row.is-headline dd { color: var(--gold-dark); font-size: 1.2rem; }

/* Plans fine print with the booking CTA alongside it, so the disclaimers do not
   end the section on a dead stop. */
.co-plans-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.5rem;
  align-items: center;
  margin-top: 2.5rem;
}

.co-plans-fineprint .co-finenote { margin-top: 0; }
.co-plans-fineprint .co-finenote + .co-finenote { margin-top: 1rem; }

.co-plans-cta { white-space: nowrap; }

@media (max-width: 860px) {
  .co-plans-footer { grid-template-columns: 1fr; gap: 1.6rem; justify-items: start; }
  .co-plans-cta { width: 100%; text-align: center; }
}

/* ── NOT A TIMESHARE ──
   The one warm, high-contrast moment on the page. Every other band is cream,
   white or navy, so a gold ground makes this section read as the emphatic
   statement it is without competing with the navy closing band beneath it. */
.co-section-feature {
  background: var(--white);
  position: relative;
}

.co-plain {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

@media (max-width: 860px) { .co-plain { grid-template-columns: 1fr; gap: 2rem; } }

.co-plain h2 {
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  line-height: 1.05;
  margin: 0 0 1.1rem;
  color: var(--blue-deep);
  letter-spacing: -0.01em;
}

.co-plain h2 .co-plain-em {
  display: block;
  color: var(--gold-dark);
  font-style: italic;
}

.co-plain-sub {
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--text-mid);
  margin: 0;
  max-width: 42ch;
}

.co-nots { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }

.co-nots li {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  background: var(--cream);
  border: 1px solid var(--cream-dark);
  border-radius: 999px;
  padding: 0.85rem 1.4rem;
  font-size: 1.02rem;
  color: var(--blue-deep);
  font-weight: 700;
}

.co-nots li::before {
  content: '\2715';
  color: var(--gold-dark);
  font-size: 0.9rem;
  font-weight: 700;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(212,168,67,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 640px) {
  .co-nots li { font-size: 0.96rem; padding: 0.75rem 1.1rem; }
}

/* ── FORM ── */
.co-form-wrap {
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: 14px;
  padding: 2.2rem;
}

.co-form-wrap .gform_wrapper label.gfield_label {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--blue-deep);
}

.co-form-wrap .gform_wrapper input[type=text],
.co-form-wrap .gform_wrapper input[type=email],
.co-form-wrap .gform_wrapper input[type=tel],
.co-form-wrap .gform_wrapper textarea,
.co-form-wrap .gform_wrapper select {
  border: 1px solid var(--cream-dark);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1rem;
  background: var(--cream);
}

.co-form-wrap .gform_wrapper input:focus,
.co-form-wrap .gform_wrapper textarea:focus,
.co-form-wrap .gform_wrapper select:focus {
  outline: 3px solid rgba(74,142,196,0.35);
  outline-offset: 1px;
  border-color: var(--blue-light);
}

.co-form-wrap .gform_wrapper .gform_footer input[type=submit],
.co-form-wrap .gform_wrapper .gform_button {
  background: var(--gold);
  color: var(--blue-deep);
  border: none;
  border-radius: 999px;
  padding: 0.95rem 2.2rem;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}

.co-form-wrap .gform_wrapper .gform_footer input[type=submit]:hover { background: var(--gold-light); }

/* Form heading, sized to sit just under the big section headings */
.co-form-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.12;
  color: var(--blue-deep);
  margin: 0 0 1.3rem;
}

.co-form-intro {
  margin: 0 0 1.5rem;
  color: var(--text-mid);
  line-height: 1.7;
  font-size: 1.02rem;
  max-width: 46ch;
}

/* Privacy + TCPA consent. Lives inside the white form card, under the submit
   button, separated by a hairline so it reads as fine print rather than copy. */
.co-form-wrap .co-form-note {
  margin: 1.4rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--cream-dark);
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--text-light);
}

.co-form-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items: start; }
@media (max-width: 900px) { .co-form-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* Desktop only: the opening statement holds position while the form scrolls
   past it. Needs align-items:start on the grid (set above) so the column does
   not stretch to full height, which would leave nothing for sticky to travel
   against. Disabled under 900px, where the grid is a single column and a
   sticky element would just sit on top of the form. */
@media (min-width: 901px) {
  .co-form-grid > .co-lede-col {
    position: sticky;
    top: 2.5rem;
    align-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .co-form-grid > .co-lede-col { position: static; }
}

/* Full-bleed photographic slat, sits between the "not a timeshare" band and
   the closing CTA to give the eye a breath before the ask. Fixed height with
   object-fit so the crop stays predictable at any viewport width. */
.co-slat {
  position: relative;
  height: clamp(200px, 26vw, 380px);
  overflow: hidden;
  background: var(--cream-dark);
}

.co-slat picture { display: block; width: 100%; height: 100%; }

.co-slat img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  display: block;
}

/* ── CLOSING ── */
.co-close { background: var(--blue-deep); color: var(--white); text-align: center; padding: 4.5rem 0; }
.co-close h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); color: var(--white); margin: 0.6rem 0 1rem; }
.co-close p { max-width: 55ch; margin: 0 auto 2rem; color: rgba(255,255,255,0.85); line-height: 1.7; }
.co-close .co-eyebrow { color: var(--gold-light); }

.co-disclaimer {
  background: var(--cream-dark);
  color: var(--text-light);
  font-size: 0.82rem;
  line-height: 1.6;
  text-align: center;
  padding: 1.6rem 1.5rem;
}

.co-disclaimer p { max-width: 900px; margin: 0 auto; }

/* ── REVEAL ── */
.co-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; }
.co-reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .co-reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 640px) {
  .co-hero { padding: 4.5rem 0 3.5rem; }
  .co-section { padding: 3.4rem 0; }
  .co-btn { width: 100%; text-align: center; }
}