/* =================================================================
   THE RANCH / PANWA — Design System v1
   ================================================================= */

/* ----- Tokens ----- */
:root {
  /* Brand palette */
  --bone:           #F5F1E8;
  --bone-dim:       #EDE6D8;
  --jungle:         #1F3A2E;
  --jungle-soft:    rgba(31, 58, 46, 0.6);
  --jungle-line:    rgba(31, 58, 46, 0.15);
  --bougainvillea:  #7D5260;
  --brick:          #B5613A;
  --canopy:         #4A6B4F;
  --andaman:        #5B7A8C;
  --ink:            #131313;
  --on-jungle:      #F5F1E8;

  /* Surface scale */
  --surface:           #FFFCF8;
  --surface-container: #F5ECE7;

  /* Type scale */
  --display-xl:  clamp(48px, 8vw, 96px);
  --display-lg:  clamp(40px, 6vw, 72px);
  --headline-lg: clamp(32px, 4vw, 48px);
  --headline-md: clamp(22px, 2.6vw, 28px);
  --body-lg:     18px;
  --body-md:     16px;
  --body-sm:     14px;
  --label-mono:  12px;
  --label-caps:  11px;

  /* Spacing (4px base) */
  --space-2xs:  4px;
  --space-xs:   8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  48px;
  --space-xl:  80px;
  --space-2xl:120px;

  /* Layout */
  --margin: clamp(20px, 4vw, 40px);
  --gutter: 24px;
  --maxw:   1440px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  240ms;

  /* Mockup-aliased opacity tokens */
  --jungle-70: rgba(31, 58, 46, 0.7);
  --jungle-30: rgba(31, 58, 46, 0.3);
  --jungle-15: rgba(31, 58, 46, 0.15);
  --jungle-08: rgba(31, 58, 46, 0.08);
  --bone-2:    #EFE9DC;
  --on-bone-soft: rgba(245, 241, 232, 0.55);
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }

/* ----- Base ----- */
body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--body-md);
  line-height: 1.6;
  color: var(--jungle);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--bougainvillea); }
a:focus-visible {
  outline: 2px solid var(--bougainvillea);
  outline-offset: 3px;
}

::selection { background: var(--bougainvillea); color: var(--bone); }

/* ----- Skip link ----- */
.skip-link {
  position: absolute; top: -40px; left: 0;
  background: var(--jungle); color: var(--bone);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--label-caps); letter-spacing: 0.1em; text-transform: uppercase;
  z-index: 100;
}
.skip-link:focus { top: 0; }

/* ----- Type utilities ----- */
.section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--label-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bougainvillea);
  display: inline-block;
  margin-bottom: var(--space-md);
}

.mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--label-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.link-inline {
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.link-inline:hover { color: var(--bougainvillea); border-color: var(--bougainvillea); }

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 14px 24px;
  font-family: 'Inter', sans-serif;
  font-size: var(--label-caps);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 0;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn--primary {
  background: var(--jungle);
  color: var(--bone);
}
.btn--primary:hover {
  background: var(--bougainvillea);
  color: var(--bone);
}
.btn--ghost {
  background: transparent;
  color: var(--jungle);
  border: 1px solid var(--jungle);
}
.btn--ghost:hover {
  background: var(--bougainvillea);
  border-color: var(--bougainvillea);
  color: var(--bone);
}

/* ===========================================================
   HEADER
   =========================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--margin);
  background: rgba(245, 241, 232, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--jungle-line);
}
.wordmark { display: block; width: 140px; flex-shrink: 0; }
.wordmark svg { width: 100%; height: auto; }
.wordmark-text {
  font-family: 'Fraunces', serif;
  font-size: 56px;
  font-weight: 500;
  letter-spacing: 0.05em;
  fill: var(--jungle);
}

.primary-nav ul {
  list-style: none; padding: 0; margin: 0;
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
}
.primary-nav a {
  font-family: 'Inter', sans-serif;
  font-size: var(--label-caps);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--space-xs) 0;
  position: relative;
}
.primary-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--bougainvillea);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.primary-nav a:hover::after { transform: scaleX(1); }

.menu-toggle { display: none; }

@media (max-width: 880px) {
  .site-header { grid-template-columns: auto auto auto; }
  .primary-nav { display: none; }
  .primary-nav.is-open {
    display: block;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bone);
    padding: var(--space-md) var(--margin);
    border-bottom: 1px solid var(--jungle-line);
  }
  .primary-nav.is-open ul {
    flex-direction: column;
    gap: var(--space-md);
    align-items: flex-start;
  }
  .menu-toggle {
    display: flex; flex-direction: column; gap: 5px;
    width: 32px; height: 32px;
    align-items: center; justify-content: center;
  }
  .menu-toggle span {
    display: block; width: 24px; height: 1px;
    background: var(--jungle);
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .site-header__cta { display: none; }
}

/* ===========================================================
   HERO
   =========================================================== */
.hero {
  position: relative;
  height: clamp(560px, 88vh, 920px);
  overflow: hidden;
  background: var(--jungle);
}
.hero__image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
}
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(31, 58, 46, 0.10) 0%,
    rgba(31, 58, 46, 0.05) 35%,
    rgba(31, 58, 46, 0.65) 100%
  );
}
.hero__content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-xl) var(--margin) var(--space-2xl);
  max-width: var(--maxw);
  margin: 0 auto;
}
.hero__pill {
  align-self: flex-start;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--label-mono);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 8px 14px;
  background: rgba(125, 82, 96, 0.92);
  color: var(--bone);
  margin-bottom: var(--space-lg);
}
.hero__tagline {
  font-family: 'Fraunces', serif;
  font-size: var(--display-xl);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--bone);
  max-width: 14ch;
}
.hero__discover {
  position: absolute; right: var(--margin); bottom: var(--space-xl);
  display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--label-mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bone);
}
.hero__discover-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--bone);
  background: rgba(125, 82, 96, 0.15);
  font-size: 20px;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hero__discover:hover .hero__discover-arrow {
  background: var(--bougainvillea);
  border-color: var(--bougainvillea);
  transform: translateY(4px);
}
@media (max-width: 600px) {
  .hero__discover-label { display: none; }
  .hero__discover { bottom: var(--space-md); right: var(--space-md); }
}

/* ===========================================================
   MANIFESTO
   =========================================================== */
.manifesto {
  padding: var(--space-2xl) var(--margin);
  max-width: 960px;
  margin: 0 auto;
}
.manifesto__lead {
  font-family: 'Fraunces', serif;
  font-size: var(--headline-lg);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--jungle);
  margin-bottom: var(--space-md);
}
.manifesto__sub {
  font-size: var(--body-lg);
  color: var(--jungle-soft);
  max-width: 60ch;
}

/* ===========================================================
   DETAILS — atmosphere strip
   =========================================================== */
.details {
  padding: 0 var(--margin) var(--space-2xl);
  max-width: var(--maxw);
  margin: 0 auto;
}
.details__header {
  margin-bottom: var(--space-xl);
  max-width: 720px;
}
.details__title {
  font-family: 'Fraunces', serif;
  font-size: var(--headline-lg);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--jungle);
}
.details__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
@media (max-width: 880px) {
  .details__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
}
.detail-card {
  margin: 0;
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.detail-card__image-wrap {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--jungle);
}
.detail-card__image-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 800ms var(--ease);
}
.detail-card:hover .detail-card__image-wrap img { transform: scale(1.04); }
.detail-card__caption {
  display: flex; align-items: baseline; gap: var(--space-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--label-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.detail-card__num { color: var(--bougainvillea); }
.detail-card__label { color: var(--jungle-soft); }

/* ===========================================================
   UNITS
   =========================================================== */
.units {
  padding: var(--space-2xl) var(--margin);
  max-width: var(--maxw);
  margin: 0 auto;
  border-top: 1px solid var(--jungle-line);
}
.units__header { margin-bottom: var(--space-xl); max-width: 720px; }
.units__title {
  font-family: 'Fraunces', serif;
  font-size: var(--headline-lg);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--jungle);
}
.units__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
@media (max-width: 880px) {
  .units__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
}

.unit-card {
  display: flex; flex-direction: column; gap: var(--space-md);
}
.unit-card__image-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--jungle);
}
.unit-card__image-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease);
}
.unit-card:hover .unit-card__image-wrap img { transform: scale(1.03); }
.unit-card__meta { display: flex; flex-direction: column; gap: var(--space-xs); }
.unit-card__type {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--label-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bougainvillea);
}
.unit-card__name {
  font-family: 'Fraunces', serif;
  font-size: var(--headline-md);
  font-weight: 500;
  line-height: 1.15;
  color: var(--jungle);
}
.unit-card__desc {
  font-size: var(--body-md);
  color: var(--jungle-soft);
  line-height: 1.55;
  max-width: 32ch;
}
.unit-card__price {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--label-mono);
  letter-spacing: 0.08em;
  color: var(--jungle);
  margin-top: var(--space-xs);
}
.unit-card__price .price {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.unit-card__cta { align-self: flex-start; margin-top: var(--space-xs); }

.units__note {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--jungle-line);
  text-align: center;
  color: var(--jungle-soft);
  font-size: var(--body-md);
}
.units__note .mono {
  color: var(--jungle);
  margin-right: var(--space-xs);
}

/* ===========================================================
   SERVICES
   =========================================================== */
.services {
  padding: var(--space-2xl) var(--margin);
  background: var(--surface-container);
  border-top: 1px solid var(--jungle-line);
}
.services__header {
  max-width: var(--maxw);
  margin: 0 auto var(--space-xl);
}
.services__title {
  font-family: 'Fraunces', serif;
  font-size: var(--headline-lg);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--jungle);
  max-width: 22ch;
}
.services__grid {
  list-style: none; padding: 0; margin: 0 auto;
  max-width: var(--maxw);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--jungle-line);
  border: 1px solid var(--jungle-line);
}
@media (max-width: 880px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .services__grid { grid-template-columns: 1fr; } }

.service-item {
  display: flex; flex-direction: column; gap: var(--space-xs);
  padding: var(--space-lg);
  background: var(--surface-container);
}
.service-item__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--label-mono);
  letter-spacing: 0.1em;
  color: var(--bougainvillea);
}
.service-item__name {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--jungle);
  line-height: 1.2;
}
.service-item__desc {
  font-size: var(--body-md);
  color: var(--jungle-soft);
}

/* ===========================================================
   APPLY
   =========================================================== */
.apply {
  padding: var(--space-2xl) var(--margin);
  background: var(--jungle);
  color: var(--on-jungle);
}
.apply__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.apply .section-label { color: rgba(245, 241, 232, 0.6); }
.apply__title {
  font-family: 'Fraunces', serif;
  font-size: var(--display-lg);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin-bottom: var(--space-md);
}
.apply__lead {
  font-size: var(--body-lg);
  color: rgba(245, 241, 232, 0.8);
  max-width: 50ch;
  margin: 0 auto var(--space-lg);
}
.apply__cta {
  background: var(--bougainvillea);
  color: var(--bone);
  border: 0;
  font-size: var(--label-caps);
  padding: 18px 32px;
}
.apply__cta:hover { background: var(--bone); color: var(--jungle); }
.apply__filter {
  margin-top: var(--space-xl);
  font-size: var(--label-mono);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.08em;
  color: rgba(245, 241, 232, 0.55);
}
.apply__filter .link-inline { color: var(--bone); }

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer {
  padding: var(--space-lg) var(--margin) var(--space-md);
  background: var(--bone);
  border-top: 1px solid var(--jungle-line);
}
.site-footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding-bottom: var(--space-md);
}
.site-footer__brand,
.site-footer__legal {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--jungle-soft);
}
.site-footer__legal {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--jungle-line);
}

/* ===========================================================
   UNIT PAGES — hero, intro, gallery, lightbox
   =========================================================== */

/* ----- Unit hero ----- */
.unit-hero {
  position: relative;
  height: clamp(440px, 70vh, 720px);
  overflow: hidden;
  background: var(--jungle);
}
.unit-hero__image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.unit-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(31, 58, 46, 0.10) 0%,
    rgba(31, 58, 46, 0.20) 50%,
    rgba(31, 58, 46, 0.70) 100%
  );
}
.unit-hero__content {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-xl) var(--margin) var(--space-xl);
  max-width: var(--maxw);
  margin: 0 auto;
  color: var(--bone);
}
.unit-hero__type {
  align-self: flex-start;
  background: rgba(125, 82, 96, 0.92);
  color: var(--bone);
  padding: 8px 14px;
  font-size: var(--label-mono);
  letter-spacing: 0.15em;
  margin-bottom: var(--space-md);
}
.unit-hero__name {
  font-family: 'Fraunces', serif;
  font-size: var(--display-xl);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
}
.unit-hero__tagline {
  font-family: 'Fraunces', serif;
  font-size: clamp(20px, 2.4vw, 26px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  color: rgba(245, 241, 232, 0.88);
  max-width: 30ch;
}

/* ----- Unit intro ----- */
.unit-intro {
  padding: var(--space-2xl) var(--margin);
  max-width: 1080px;
  margin: 0 auto;
}
.unit-intro__lead {
  font-family: 'Fraunces', serif;
  font-size: var(--headline-lg);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--jungle);
  margin-top: var(--space-md);
  margin-bottom: var(--space-xl);
  max-width: 28ch;
}
.unit-intro__detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.unit-intro__detail p {
  font-size: var(--body-lg);
  color: var(--jungle-soft);
  line-height: 1.6;
}
@media (max-width: 720px) {
  .unit-intro__detail { grid-template-columns: 1fr; }
}

.unit-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--jungle-line);
  padding-top: var(--space-lg);
  margin-top: var(--space-xl);
}
.unit-specs__item {
  display: flex; flex-direction: column; gap: var(--space-xs);
  padding-right: var(--space-md);
}
.unit-specs__item dt {
  font-size: var(--label-mono);
  letter-spacing: 0.1em;
  color: var(--bougainvillea);
}
.unit-specs__item dd {
  font-size: var(--body-md);
  color: var(--jungle);
  margin: 0;
}
.unit-specs__item .price {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  color: var(--jungle);
}
@media (max-width: 720px) {
  .unit-specs { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* ----- Gallery ----- */
.unit-gallery {
  padding: var(--space-2xl) var(--margin);
  max-width: var(--maxw);
  margin: 0 auto;
  border-top: 1px solid var(--jungle-line);
}
.unit-gallery__header {
  margin-bottom: var(--space-xl);
  max-width: 720px;
}
.unit-gallery__title {
  font-family: 'Fraunces', serif;
  font-size: var(--headline-lg);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--jungle);
}

.gallery-group {
  margin-bottom: var(--space-xl);
}
.gallery-group__header {
  display: flex; align-items: baseline; gap: var(--space-md);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--jungle-line);
}
.gallery-group__label {
  font-size: var(--label-mono);
  letter-spacing: 0.1em;
  color: var(--bougainvillea);
}
.gallery-group__count {
  font-size: var(--label-mono);
  letter-spacing: 0.05em;
  color: var(--jungle-soft);
}

.gallery-group__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
@media (max-width: 880px) { .gallery-group__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .gallery-group__grid { grid-template-columns: 1fr; } }

.gallery-photo { margin: 0; }
.gallery-photo__btn {
  display: block; width: 100%;
  background: none; padding: 0; border: 0;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bone-dim);
}
.gallery-photo__btn img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 600ms var(--ease);
}
.gallery-photo:hover .gallery-photo__btn img { transform: scale(1.04); }
.gallery-photo__btn:focus-visible {
  outline: 2px solid var(--bougainvillea);
  outline-offset: 2px;
}
.gallery-photo__caption {
  font-size: var(--body-sm);
  color: var(--jungle-soft);
  line-height: 1.5;
  margin-top: var(--space-sm);
  padding: 0 4px;
}

.gallery__error {
  padding: var(--space-xl);
  text-align: center;
  color: var(--jungle-soft);
}
.gallery__error code {
  display: inline-block;
  margin-top: var(--space-xs);
  padding: 4px 8px;
  background: var(--bone-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}

/* ----- Lightbox ----- */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(19, 19, 19, 0.95);
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
}
.lightbox.is-open { display: flex; }
.lightbox__figure {
  margin: 0;
  max-width: 90vw;
  max-height: 86vh;
  display: flex; flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}
.lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  background: var(--jungle);
}
.lightbox__caption {
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--bone);
  text-align: center;
  font-size: var(--body-lg);
  max-width: 60ch;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgba(245, 241, 232, 0.10);
  color: var(--bone);
  border: 1px solid rgba(245, 241, 232, 0.35);
  width: 48px; height: 48px;
  font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 200ms;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--bougainvillea); border-color: var(--bougainvillea); }
.lightbox__close { top: 24px; right: 24px; }
.lightbox__nav--prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__counter {
  position: absolute; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  color: rgba(245, 241, 232, 0.6);
  font-size: var(--label-mono);
  letter-spacing: 0.15em;
}
@media (max-width: 600px) {
  .lightbox__close { top: 12px; right: 12px; width: 40px; height: 40px; font-size: 20px; }
  .lightbox__nav { width: 40px; height: 40px; font-size: 20px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
}

/* ===========================================================
   STICKY-SCROLL HEADER (per R2 annotation)
   State A: top of page — solid Bone, no blur
   State B: scrolled past 80px — translucent Bone w/ blur, hairline
   =========================================================== */
.site-header {
  background: var(--bone);
  border-bottom: 1px solid transparent;
  transition: padding var(--dur) var(--ease),
              background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header.is-scrolled {
  padding-top: 12px;
  padding-bottom: 12px;
  background: rgba(245, 241, 232, 0.78);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--jungle-line);
}

/* ===========================================================
   PRIMARY NAV — Option B with Stays dropdown
   =========================================================== */
.primary-nav .has-dropdown { position: relative; }
.primary-nav .has-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.primary-nav .dropdown {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 280px;
  background: var(--bone);
  border: 1px solid var(--jungle-line);
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
  z-index: 60;
}
.primary-nav .has-dropdown:hover > .dropdown,
.primary-nav .has-dropdown:focus-within > .dropdown,
.primary-nav .has-dropdown.is-open > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.primary-nav .has-dropdown > a[aria-expanded="true"] + .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.primary-nav .dropdown li { padding: 0; }
.primary-nav .dropdown a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  border: 0;
}
.primary-nav .dropdown a::after { display: none; }
.primary-nav .dropdown a:hover,
.primary-nav .dropdown a:focus-visible {
  background: var(--bone-2);
  color: var(--bougainvillea);
}
.primary-nav .dropdown-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--jungle-soft);
  text-transform: uppercase;
  font-weight: 400;
}
/* Active state on Stays parent (set when on a unit page) */
.primary-nav .has-dropdown.is-active > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 28px;
  bottom: 0;
  height: 1px;
  background: var(--bougainvillea);
  transform: scaleX(1);
}
.primary-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* ===========================================================
   MOBILE DRAWER — full-height slide-in from right
   =========================================================== */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: 90vw;
  background: var(--bone);
  border-left: 1px solid var(--jungle-line);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transform: translateX(100%);
  transition: transform 320ms var(--ease);
  overflow-y: auto;
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(31, 58, 46, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms var(--ease), visibility 320ms var(--ease);
  z-index: 90;
}
.mobile-drawer__backdrop.is-open { opacity: 1; visibility: visible; }
.mobile-drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--jungle-line);
}
.mobile-drawer__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--jungle-soft);
  text-transform: uppercase;
}
.mobile-drawer__close {
  font-size: 28px;
  width: 40px;
  height: 40px;
  line-height: 1;
  color: var(--jungle);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-drawer__nav { flex: 1; padding: 16px 0; list-style: none; margin: 0; }
.mobile-drawer__nav li {
  padding: 16px 24px;
  border-bottom: 1px solid var(--jungle-line);
  display: grid;
  gap: 4px;
}
.mobile-drawer__nav li a {
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--jungle);
}
.mobile-drawer__nav li a[aria-current="page"] {
  color: var(--bougainvillea);
}
.mobile-drawer__nav .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--jungle-soft);
  text-transform: uppercase;
}
.mobile-drawer__cta {
  padding: 24px;
  border-top: 1px solid var(--jungle-line);
}
.mobile-drawer__cta .btn {
  width: 100%;
  justify-content: center;
  padding: 18px;
}
.mobile-drawer__foot {
  margin-top: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--jungle-soft);
  text-align: center;
  text-transform: uppercase;
}
@media (min-width: 881px) {
  .mobile-drawer, .mobile-drawer__backdrop { display: none; }
}
@media (max-width: 880px) {
  /* Replace inline mobile nav with drawer on this width */
  .primary-nav.is-open { display: none; }
}
body.drawer-open { overflow: hidden; }

/* ===========================================================
   PHOTO PLACEHOLDERS (used where real photos don't exist yet)
   =========================================================== */
.photo-placeholder {
  position: relative;
  background-color: var(--jungle-08);
  background-image: repeating-linear-gradient(135deg, rgba(31, 58, 46, 0.05) 0 1px, transparent 1px 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.photo-placeholder__tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jungle-soft);
  text-align: center;
  padding: 8px 12px;
  border: 1px solid var(--jungle-line);
  background: rgba(245, 241, 232, 0.6);
  max-width: 80%;
}
.photo-placeholder--brick {
  background-color: rgba(181, 97, 58, 0.12);
  background-image: repeating-linear-gradient(135deg, rgba(181, 97, 58, 0.10) 0 1px, transparent 1px 14px);
}
.photo-placeholder--brick .photo-placeholder__tag { color: var(--brick); }
.photo-placeholder--jungle {
  background-color: var(--jungle);
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 14px);
}
.photo-placeholder--jungle .photo-placeholder__tag {
  color: rgba(245, 241, 232, 0.8);
  border-color: rgba(245, 241, 232, 0.2);
  background: rgba(31, 58, 46, 0.4);
}

/* ===========================================================
   FOOTER (extended) — three-col + Cloudflare Analytics line
   =========================================================== */
.site-footer--full {
  background: var(--jungle);
  color: var(--bone);
  padding: var(--space-xl) var(--margin) var(--space-md);
  border-top: 0;
}
.site-footer--full .site-footer__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(245, 241, 232, 0.15);
}
@media (max-width: 720px) {
  .site-footer--full .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-md); }
}
.site-footer--full .rf-col h2 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.55);
  margin-bottom: var(--space-sm);
  font-weight: 500;
}
.site-footer--full .rf-col ul { list-style: none; padding: 0; margin: 0; }
.site-footer--full .rf-col li { margin-bottom: 10px; font-size: 14px; }
.site-footer--full .rf-col a { border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.site-footer--full .rf-col a:hover { color: var(--bougainvillea); border-bottom-color: var(--bougainvillea); }
.site-footer--full .rf-mark {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  letter-spacing: 0.12em;
  line-height: 1.3;
  margin-bottom: var(--space-sm);
}
.site-footer--full .rf-mark .rule {
  display: inline-block;
  width: 80px;
  height: 1px;
  background: var(--bougainvillea);
  margin: 4px 0;
}
.site-footer--full .rf-address {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.7;
  text-transform: uppercase;
}
.site-footer--full .rf-legal {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(245, 241, 232, 0.55);
  padding-top: var(--space-md);
  flex-wrap: wrap;
  gap: var(--space-sm);
  border: 0;
}
.site-footer--full .rf-analytics {
  max-width: var(--maxw);
  margin: var(--space-sm) auto 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(245, 241, 232, 0.45);
  text-transform: none;
}

/* ===========================================================
   APPLY BLOCK — reusable inline CTA used at bottom of pages
   =========================================================== */
.apply-block {
  background: var(--jungle);
  color: var(--bone);
  padding: var(--space-2xl) var(--margin);
  text-align: center;
}
.apply-block__inner {
  max-width: 720px;
  margin: 0 auto;
}
.apply-block .section-label { color: rgba(245, 241, 232, 0.7); }
.apply-block h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.1;
  margin-bottom: var(--space-md);
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}
.apply-block p {
  font-size: var(--body-lg);
  color: rgba(245, 241, 232, 0.85);
  max-width: 50ch;
  margin: 0 auto var(--space-lg);
}
.apply-block .btn--primary {
  background: var(--bougainvillea);
  color: var(--bone);
  border: 0;
  padding: 18px 32px;
}
.apply-block .btn--primary:hover { background: var(--bone); color: var(--jungle); }
.apply-block__filter {
  margin-top: var(--space-xl);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--label-mono);
  letter-spacing: 0.08em;
  color: rgba(245, 241, 232, 0.55);
  text-transform: uppercase;
}
.apply-block__filter .link-inline { color: var(--bone); }

/* ===========================================================
   THE RANCH PAGE
   =========================================================== */
.tr-hero {
  position: relative;
  height: clamp(560px, 80vh, 720px);
  overflow: hidden;
  background: var(--jungle);
}
.tr-hero__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
}
.tr-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31, 58, 46, 0.4) 0%, rgba(31, 58, 46, 0.7) 100%);
}
.tr-hero__content {
  position: absolute;
  inset: auto var(--margin) var(--space-xl) var(--margin);
  max-width: var(--maxw);
  margin: 0 auto;
  color: var(--bone);
}
.tr-hero__content .section-label {
  color: var(--bone);
  border-bottom: 1px solid rgba(245, 241, 232, 0.4);
  padding-bottom: 6px;
  margin-bottom: var(--space-md);
}
.tr-hero__h {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-style: italic;
  max-width: 16ch;
}
.tr-hero__attr {
  margin-top: var(--space-md);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}

.tr-manifesto {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--margin);
}
.tr-manifesto__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.tr-manifesto__head .section-label { margin-bottom: 0; }
.tr-manifesto__coords {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  opacity: 0.5;
  letter-spacing: 0.1em;
}
.tr-manifesto__lead {
  font-family: 'Fraunces', serif;
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: var(--space-lg);
  text-wrap: pretty;
  letter-spacing: -0.01em;
}
.tr-manifesto__body p {
  font-size: var(--body-lg);
  line-height: 1.7;
  padding: var(--space-md) 0;
  max-width: 60ch;
  color: var(--jungle);
}
.tr-manifesto__body hr {
  border: 0;
  border-top: 1px solid var(--jungle-line);
  margin: 0;
}
.tr-manifesto__body .pull {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.4;
}
.tr-manifesto__body .closing {
  font-family: 'Fraunces', serif;
  font-size: clamp(22px, 2.8vw, 28px);
  font-style: italic;
  color: var(--bougainvillea);
}

.tr-host {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: var(--space-lg);
  padding: var(--space-2xl) var(--margin);
  border-top: 1px solid var(--jungle-line);
  align-items: start;
  max-width: var(--maxw);
  margin: 0 auto;
}
@media (max-width: 880px) {
  .tr-host { grid-template-columns: 1fr; gap: var(--space-md); }
}
.tr-host__photo {
  aspect-ratio: 3 / 4;
  min-height: 480px;
}
.tr-host__h {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  font-weight: 400;
  margin: var(--space-md) 0 var(--space-md);
  letter-spacing: -0.015em;
}
.tr-host__h em { font-style: italic; color: var(--bougainvillea); }
.tr-host__bio p {
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 14px;
  max-width: 50ch;
  color: var(--jungle);
}
.tr-host__facts {
  margin-top: var(--space-lg);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--jungle-line);
}
.tr-host__facts li {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--jungle-line);
  font-size: 15px;
  gap: var(--space-sm);
}
.tr-host__facts .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
  align-self: center;
}
.tr-host__facts .val {
  font-family: 'Fraunces', serif;
  font-size: 18px;
}

.tr-fit {
  padding: var(--space-2xl) var(--margin);
  background: var(--bone-2);
  max-width: 100%;
}
.tr-fit__inner { max-width: var(--maxw); margin: 0 auto; }
.tr-fit__h {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 400;
  font-style: italic;
  max-width: 16ch;
  margin-bottom: var(--space-xl);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.tr-fit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
@media (max-width: 880px) {
  .tr-fit__grid { grid-template-columns: 1fr; }
}
.tr-fit__col header {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--jungle-30);
}
.tr-fit__col header .mono-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--canopy);
  display: block;
  margin-bottom: var(--space-xs);
}
.tr-fit__col--no header .mono-label { color: var(--bougainvillea); }
.tr-fit__col h3 {
  font-family: 'Fraunces', serif;
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 400;
  margin-top: var(--space-xs);
  max-width: 22ch;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.tr-fit__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tr-fit__list li {
  padding: var(--space-sm) 0 var(--space-sm) 28px;
  border-bottom: 1px solid var(--jungle-line);
  font-size: 17px;
  line-height: 1.5;
  position: relative;
}
.tr-fit__list li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--bougainvillea);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
}
.tr-fit__col--no .tr-fit__list li::before { content: '×'; font-size: 18px; top: 18px; }

.tr-services {
  padding: var(--space-2xl) var(--margin);
  max-width: var(--maxw);
  margin: 0 auto;
}
.tr-services__head { max-width: 900px; margin-bottom: var(--space-xl); }
.tr-services__head h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 400;
  margin-top: var(--space-xs);
  max-width: 18ch;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.tr-services__lead {
  margin-top: var(--space-md);
  font-size: var(--body-lg);
  max-width: 60ch;
  line-height: 1.6;
  color: var(--jungle-soft);
}
.tr-services__lead em { font-style: italic; color: var(--jungle); }
.tr-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
@media (max-width: 880px) {
  .tr-services__grid { grid-template-columns: 1fr; }
}
.tr-services__col-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--canopy);
  display: block;
}
.tr-services__col--alt .tr-services__col-label { color: var(--bougainvillea); }
.tr-services__list {
  margin-top: var(--space-md);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--jungle-30);
}
.tr-services__list li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-md);
  padding: 20px 0;
  border-bottom: 1px solid var(--jungle-line);
}
.tr-services__list .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--bougainvillea);
  padding-top: 4px;
}
.tr-services__list b {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  display: block;
  margin-bottom: var(--space-2xs);
  letter-spacing: -0.005em;
}
.tr-services__list p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--jungle-soft);
}

.tr-dave {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-lg);
  padding: var(--space-2xl) var(--margin);
  align-items: center;
  border-top: 1px solid var(--jungle-line);
  background: var(--bone-2);
  max-width: 100%;
}
.tr-dave__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: contents;
}
@media (max-width: 880px) {
  .tr-dave { grid-template-columns: 1fr; }
}
.tr-dave__photo {
  aspect-ratio: 4 / 3;
  min-height: 320px;
}
.tr-dave__h {
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.1;
  margin: var(--space-sm) 0 var(--space-sm);
  letter-spacing: -0.015em;
}
.tr-dave__h em {
  font-style: italic;
  color: var(--jungle-soft);
}
.tr-dave__copy p {
  font-size: var(--body-lg);
  line-height: 1.6;
  max-width: 44ch;
}

/* ===========================================================
   UNIT PAGES — extended (replacement template)
   =========================================================== */
.up-hero {
  position: relative;
  height: clamp(540px, 80vh, 720px);
  overflow: hidden;
  background: var(--jungle);
}
.up-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.up-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31, 58, 46, 0.25) 0%, rgba(31, 58, 46, 0.65) 100%);
}
.up-hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-xl) var(--margin) var(--space-xl);
  max-width: var(--maxw);
  margin: 0 auto;
  color: var(--bone);
}
.up-hero__type {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid rgba(245, 241, 232, 0.4);
  padding: 8px 14px;
  align-self: flex-start;
}
.up-hero__name {
  font-family: 'Fraunces', serif;
  font-size: clamp(64px, 11vw, 128px);
  font-weight: 300;
  font-style: italic;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-sm);
}
.up-hero__name--short {
  font-size: clamp(72px, 13vw, 156px);
}
.up-hero__tag {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(17px, 2.2vw, 22px);
  margin-top: var(--space-xs);
  opacity: 0.9;
  max-width: 32ch;
}

.up-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  padding: var(--space-2xl) var(--margin);
  border-bottom: 1px solid var(--jungle-line);
  align-items: start;
  max-width: var(--maxw);
  margin: 0 auto;
}
@media (max-width: 880px) {
  .up-intro { grid-template-columns: 1fr; gap: var(--space-md); padding: var(--space-xl) var(--margin); }
}
.up-intro__lead {
  font-family: 'Fraunces', serif;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.3;
  font-weight: 400;
  margin-top: var(--space-sm);
  text-wrap: pretty;
  letter-spacing: -0.01em;
}
.up-specs-block {
  align-self: stretch;
  border-top: 1px solid var(--jungle-30);
  list-style: none;
  padding: 0;
  margin: 0;
}
.up-spec-row {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--jungle-line);
  display: grid;
  gap: 6px;
}
.up-spec-row__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bougainvillea);
}
.up-spec-row__value {
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
}
.up-spec-row__desc {
  font-size: 13px;
  color: var(--jungle-soft);
}

.up-gallery {
  padding: var(--space-2xl) var(--margin);
  max-width: var(--maxw);
  margin: 0 auto;
  border-top: 0;
}
.up-gallery__head { margin-bottom: var(--space-xl); max-width: 1000px; }
.up-gallery__h {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1.05;
  font-weight: 400;
  margin-top: var(--space-xs);
  letter-spacing: -0.02em;
}
.up-gallery__h em { font-style: italic; color: var(--bougainvillea); }

/* When renderering from photos.json, the gallery container gets these styles */
.up-gallery .gallery-group__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--jungle-line);
}

.up-specs-detail {
  padding: var(--space-2xl) var(--margin);
  background: var(--bone-2);
  max-width: 100%;
}
.up-specs-detail__inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.up-specs-detail__h {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 400;
  margin-bottom: var(--space-lg);
  letter-spacing: -0.015em;
}
.up-specs-detail__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-lg);
  border-top: 1px solid var(--jungle-30);
}
@media (max-width: 720px) {
  .up-specs-detail__list { grid-template-columns: 1fr; }
}
.up-specs-detail__list li {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-md);
  padding: 18px 0;
  border-bottom: 1px solid var(--jungle-line);
  align-items: baseline;
}
@media (max-width: 720px) {
  .up-specs-detail__list li { grid-template-columns: 1fr; gap: 6px; }
}
.up-specs-detail__list .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bougainvillea);
}
.up-specs-detail__list .val {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  line-height: 1.3;
}

/* ===========================================================
   PANWA PAGE
   =========================================================== */
.pw-hero {
  position: relative;
  height: clamp(480px, 70vh, 640px);
  overflow: hidden;
  background: var(--andaman);
}
.pw-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pw-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31, 58, 46, 0.2) 0%, rgba(31, 58, 46, 0.6) 100%);
}
.pw-hero__content {
  position: absolute;
  inset: auto var(--margin) var(--space-xl) var(--margin);
  max-width: var(--maxw);
  margin: 0 auto;
  color: var(--bone);
}
.pw-hero__content .section-label {
  color: var(--bone);
  border-bottom: 1px solid rgba(245, 241, 232, 0.4);
  padding-bottom: 6px;
  margin-bottom: var(--space-md);
}
.pw-hero__h {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.pw-hero__h em { font-style: italic; opacity: 0.8; }
.pw-hero__coords {
  margin-top: var(--space-md);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  opacity: 0.7;
  text-transform: uppercase;
}

.pw-why {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-lg);
  padding: var(--space-2xl) var(--margin);
  align-items: start;
  max-width: var(--maxw);
  margin: 0 auto;
}
@media (max-width: 880px) { .pw-why { grid-template-columns: 1fr; } }
.pw-why__head h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 400;
  line-height: 1.1;
  margin-top: var(--space-xs);
  letter-spacing: -0.015em;
}
.pw-why__body p {
  font-size: var(--body-lg);
  line-height: 1.7;
  max-width: 56ch;
}
.pw-why__body hr { border: 0; border-top: 1px solid var(--jungle-line); margin: var(--space-md) 0; }
.pw-why__body .pull {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.4;
}

.pw-map {
  padding: var(--space-2xl) var(--margin);
  background: var(--bone-2);
  max-width: 100%;
}
.pw-map__inner { max-width: var(--maxw); margin: 0 auto; }
.pw-map__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.pw-map__head .section-label { margin-bottom: 0; }
.pw-map__sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--jungle-soft);
  text-transform: uppercase;
}
.pw-map__embed {
  position: relative;
  width: 100%;
  height: 520px;
  border: 1px solid var(--jungle-line);
  background: var(--jungle-08);
}
@media (max-width: 720px) { .pw-map__embed { height: 360px; } }
.pw-map__embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.pw-map__link {
  display: inline-block;
  margin-top: var(--space-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--bougainvillea);
  border-bottom: 1px solid var(--bougainvillea);
  padding-bottom: 1px;
  text-transform: uppercase;
}

.pw-beaches {
  padding: var(--space-2xl) var(--margin);
  max-width: var(--maxw);
  margin: 0 auto;
}
.pw-beaches__head { margin-bottom: var(--space-xl); }
.pw-beaches__head h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 400;
  line-height: 1.05;
  margin-top: var(--space-xs);
  letter-spacing: -0.015em;
}
.pw-beaches__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 720px) {
  .pw-beaches__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
}
.pw-beaches__grid figure { margin: 0; }
.pw-beaches__grid .pw-beach-image,
.pw-beaches__grid .photo-placeholder {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  background: var(--jungle);
  min-height: 320px;
}
.pw-beaches__grid figcaption { padding-top: var(--space-sm); }
.pw-beaches__grid .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bougainvillea);
  display: block;
}
.pw-beaches__grid p { margin-top: var(--space-xs); font-size: 16px; line-height: 1.5; max-width: 40ch; }

.pw-town {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  padding: var(--space-2xl) var(--margin);
  background: var(--bone-2);
  align-items: center;
  max-width: 100%;
}
@media (max-width: 880px) { .pw-town { grid-template-columns: 1fr; } }
.pw-town__copy h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(32px, 4.4vw, 48px);
  font-weight: 400;
  line-height: 1.1;
  margin: var(--space-xs) 0 var(--space-sm);
  letter-spacing: -0.015em;
}
.pw-town__copy p { font-size: var(--body-lg); line-height: 1.6; max-width: 50ch; }
.pw-town__media { aspect-ratio: 4 / 3; min-height: 320px; }

.pw-restaurants {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-lg);
  padding: var(--space-2xl) var(--margin);
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
}
@media (max-width: 880px) { .pw-restaurants { grid-template-columns: 1fr; } }
.pw-restaurants__copy h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(32px, 4.4vw, 48px);
  font-weight: 400;
  margin: var(--space-xs) 0 var(--space-sm);
  letter-spacing: -0.015em;
}
.pw-restaurants__copy p { font-size: 17px; max-width: 48ch; line-height: 1.6; }
.pw-restaurants__copy .pw-map__link { margin-top: var(--space-md); }
.pw-restaurants__embed {
  position: relative;
  width: 100%;
  height: 380px;
  border: 1px solid var(--jungle-line);
}
.pw-restaurants__embed iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 720px) { .pw-restaurants__embed { height: 280px; } }

.pw-wildlife {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-lg);
  padding: var(--space-2xl) var(--margin);
  background: var(--jungle);
  color: var(--bone);
  align-items: center;
  max-width: 100%;
}
@media (max-width: 880px) { .pw-wildlife { grid-template-columns: 1fr; } }
.pw-wildlife .section-label {
  color: rgba(245, 241, 232, 0.7);
  border-bottom: 1px solid rgba(245, 241, 232, 0.3);
  padding-bottom: 6px;
}
.pw-wildlife__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pw-wildlife__media > .pw-wildlife__lead {
  grid-row: span 2;
  min-height: 612px;
}
@media (max-width: 720px) {
  .pw-wildlife__media { grid-template-columns: 1fr; }
  .pw-wildlife__media > .pw-wildlife__lead { grid-row: auto; min-height: 320px; }
}
.pw-wildlife__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 300px;
}
.pw-wildlife__copy h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  font-weight: 300;
  margin: var(--space-xs) 0 var(--space-sm);
  letter-spacing: -0.02em;
}
.pw-wildlife__copy h2 em { font-style: italic; color: rgba(245, 241, 232, 0.7); }
.pw-wildlife__copy p { font-size: 17px; line-height: 1.6; opacity: 0.85; max-width: 44ch; }

.pw-practical {
  padding: var(--space-2xl) var(--margin);
  max-width: var(--maxw);
  margin: 0 auto;
}
.pw-practical__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
  border-top: 1px solid var(--jungle-30);
}
@media (max-width: 880px) { .pw-practical__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pw-practical__grid { grid-template-columns: 1fr; } }
.pw-practical__grid li {
  padding: var(--space-md);
  border-bottom: 1px solid var(--jungle-line);
  border-right: 1px solid var(--jungle-line);
}
.pw-practical__grid li:nth-child(3n) { border-right: 0; }
@media (max-width: 880px) {
  .pw-practical__grid li:nth-child(3n) { border-right: 1px solid var(--jungle-line); }
  .pw-practical__grid li:nth-child(2n) { border-right: 0; }
}
@media (max-width: 540px) {
  .pw-practical__grid li:nth-child(2n) { border-right: 0; }
  .pw-practical__grid li { border-right: 0 !important; }
}
.pw-practical__grid .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bougainvillea);
  display: block;
  margin-bottom: var(--space-xs);
}
.pw-practical__grid p { font-size: 14px; line-height: 1.5; max-width: 32ch; }

/* ===========================================================
   APPLY PAGE
   =========================================================== */
.ap-shell {
  display: grid;
  grid-template-columns: 5fr 7fr;
  min-height: 760px;
}
@media (max-width: 880px) { .ap-shell { grid-template-columns: 1fr; min-height: 0; } }
.ap-side {
  background: var(--jungle);
  color: var(--bone);
  padding: var(--space-2xl) var(--space-lg);
}
@media (max-width: 880px) { .ap-side { padding: var(--space-xl) var(--margin) var(--space-lg); } }
.ap-side .section-label {
  color: rgba(245, 241, 232, 0.7);
  border-bottom: 1px solid rgba(245, 241, 232, 0.3);
  padding-bottom: 6px;
}
.ap-side__h {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 0.98;
  margin: var(--space-md) 0 var(--space-md);
  letter-spacing: -0.02em;
}
.ap-side__h em {
  font-style: italic;
  color: var(--bougainvillea);
  filter: brightness(1.4) saturate(0.8);
}
.ap-side__sub {
  font-size: 17px;
  line-height: 1.6;
  opacity: 0.85;
  max-width: 36ch;
}
.ap-side__steps {
  list-style: none;
  margin-top: var(--space-xl);
  padding: 0;
  border-top: 1px solid rgba(245, 241, 232, 0.2);
}
.ap-side__steps li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid rgba(245, 241, 232, 0.15);
  display: grid;
  grid-template-columns: 48px 1fr;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ap-side__steps .num { color: rgba(245, 241, 232, 0.5); }
@media (max-width: 880px) {
  .ap-side__steps {
    display: flex;
    flex-direction: row;
    gap: var(--space-md);
    flex-wrap: wrap;
    border-top: 0;
    padding-top: var(--space-md);
    border-top: 1px solid rgba(245, 241, 232, 0.2);
  }
  .ap-side__steps li {
    border-bottom: 0;
    padding: 0;
    grid-template-columns: auto auto;
    gap: 6px;
    font-size: 11px;
  }
}

.ap-form {
  padding: var(--space-2xl) var(--space-lg);
  max-width: 720px;
  width: 100%;
}
@media (max-width: 880px) { .ap-form { padding: var(--space-xl) var(--margin); } }
.ap-field {
  display: grid;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}
.ap-field label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: flex;
  gap: 12px;
  align-items: baseline;
  color: var(--jungle);
}
.ap-field .req { color: var(--bougainvillea); font-size: 9px; letter-spacing: 0.16em; }
.ap-field input,
.ap-field select,
.ap-field textarea {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  color: var(--jungle);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--jungle-30);
  padding: 10px 0;
  outline: 0;
  width: 100%;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}
.ap-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%231F3A2E' stroke-width='1' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 12px;
  padding-right: 24px;
}
.ap-field textarea { resize: vertical; min-height: 96px; }
.ap-field input::placeholder,
.ap-field textarea::placeholder {
  color: var(--jungle-30);
  font-style: italic;
}
.ap-field input:focus,
.ap-field select:focus,
.ap-field textarea:focus {
  border-bottom-color: var(--bougainvillea);
}
.ap-field.is-invalid input,
.ap-field.is-invalid select,
.ap-field.is-invalid textarea {
  border-bottom-color: var(--brick);
}
.ap-field__error {
  font-size: 13px;
  color: var(--brick);
  margin-top: 4px;
  min-height: 18px;
}
.ap-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
@media (max-width: 540px) { .ap-field-row { grid-template-columns: 1fr; gap: 0; } }
.ap-submit {
  margin-top: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.ap-submit .btn--primary {
  background: var(--bougainvillea);
  color: var(--bone);
  border: 0;
  padding: 18px 32px;
}
.ap-submit .btn--primary:hover { background: var(--jungle); color: var(--bone); }
.ap-submit .btn[disabled] { opacity: 0.5; cursor: progress; }
.ap-filter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jungle-soft);
}
.ap-form__error {
  margin-top: var(--space-md);
  padding: var(--space-sm);
  background: rgba(181, 97, 58, 0.08);
  border: 1px solid var(--brick);
  color: var(--brick);
  font-size: 14px;
}

/* APPLY SUCCESS */
.ap-success .ap-side--minimal { padding: var(--space-2xl) var(--space-lg); }
.ap-success__mark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  letter-spacing: 0.18em;
  font-size: 13px;
  line-height: 1;
  color: var(--bone);
}
.ap-success__mark .l1 { padding-bottom: 4px; }
.ap-success__mark .rule { width: 100%; height: 1px; background: var(--bougainvillea); }
.ap-success__mark .l2 { padding-top: 4px; }
.ap-success__step {
  display: block;
  margin-top: var(--space-xl);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(245, 241, 232, 0.7);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(245, 241, 232, 0.3);
  padding-bottom: 6px;
}
.ap-success__panel {
  padding: var(--space-2xl) var(--space-lg);
  display: flex;
  align-items: center;
  background: var(--bone);
}
.ap-success__inner { max-width: 540px; }
.ap-success__check {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--canopy);
  display: block;
  margin-bottom: var(--space-md);
}
.ap-success__h {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 1.05;
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}
.ap-success__h em { font-style: italic; color: var(--bougainvillea); }
.ap-success__sig {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--jungle);
  margin-bottom: var(--space-md);
}
.ap-success__rule {
  width: 80px;
  height: 1px;
  background: var(--bougainvillea);
  margin: var(--space-md) 0;
}
.ap-success__note {
  font-size: 14px;
  color: var(--jungle-soft);
  margin-bottom: var(--space-lg);
  max-width: 44ch;
}
.ap-success__back { margin-top: var(--space-sm); }

/* ===========================================================
   404
   =========================================================== */
.nf-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 640px;
  align-items: center;
  padding: var(--space-2xl) var(--margin);
  gap: var(--space-lg);
  max-width: var(--maxw);
  margin: 0 auto;
}
@media (max-width: 880px) {
  .nf-shell { grid-template-columns: 1fr; padding: var(--space-xl) var(--margin); }
}
.nf-photo {
  aspect-ratio: 4 / 5;
  min-height: 420px;
}
.nf-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nf-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--bougainvillea);
  text-transform: uppercase;
}
.nf-h {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(56px, 9vw, 96px);
  line-height: 1;
  margin: var(--space-sm) 0 var(--space-sm);
  font-style: italic;
  letter-spacing: -0.02em;
}
.nf-copy p { font-size: 19px; line-height: 1.5; max-width: 36ch; }
.nf-suggest {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--jungle-line);
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  align-items: baseline;
  list-style: none;
  padding-left: 0;
}
.nf-suggest li { font-size: 14px; }
.nf-suggest .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--jungle-soft);
  text-transform: uppercase;
}