/* JANIR Rustic Springs, LLC — Hot Spring Bathhouse motif */

:root {
  --moss-pine: #1C231D;
  --pool-deep: #14201A;
  --hot-jade: #4FA98F;
  --steam-cream: #F3EFE2;
  --wood-knot: #6E5A44;
  --jade-soft: #7FC3AC;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-size: 16px;
  margin: 0;
  padding: 0;
  background-color: #1C231D;
  color: #F3EFE2;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.7;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, li {
  margin: 0;
}

a {
  color: #4FA98F;
  text-decoration: none;
}

a:hover {
  color: #7FC3AC;
}

img {
  max-width: 100%;
}

/* ============ HEADER : STONE LANTERN PATH ============ */

.lanternpath {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: #1C231D;
  border-bottom: 1px solid #6E5A44;
}

.lanternpath-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.brandplate {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #14201A;
  border: 1px solid #6E5A44;
  border-radius: 10px 10px 4px 4px;
  padding: 12px 18px;
  box-shadow: 0 4px 0 #0E1814;
}

.brandplate-window {
  width: 12px;
  height: 12px;
  background-color: #4FA98F;
  border-radius: 3px;
  display: inline-block;
}

.brandplate-text {
  color: #F3EFE2;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  font-weight: bold;
}

.lanternrow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.lantern {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background-color: #14201A;
  border: 1px solid #6E5A44;
  border-radius: 8px 8px 3px 3px;
  padding: 8px 14px 10px;
  min-width: 74px;
}

.lantern-high {
  transform: translateY(-8px);
}

.lantern-cap {
  width: 70%;
  height: 3px;
  background-color: #6E5A44;
  border-radius: 2px;
  display: block;
}

.lantern-window {
  width: 16px;
  height: 10px;
  background-color: #4FA98F;
  border-radius: 2px;
  display: block;
}

.lantern-word {
  color: #F3EFE2;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lantern:hover .lantern-window {
  background-color: #F3EFE2;
}

.steppingstone-line {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px 10px;
  max-width: 1180px;
  margin: 0 auto;
  overflow: hidden;
}

.stoneoval {
  width: 22px;
  height: 9px;
  border: 1px solid #4FA98F;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}

.reed {
  width: 2px;
  height: 16px;
  background-color: #6E5A44;
  border-radius: 2px;
  display: inline-block;
  flex: 0 0 auto;
}

/* ============ HERO : SPRING POOL ============ */

.springpool {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 24px 40px;
  display: grid;
  grid-template-columns: 55% 45%;
  gap: 32px;
  align-items: center;
}

.springpool-kicker {
  color: #4FA98F;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: 16px;
}

.springpool-head {
  font-size: 3rem;
  line-height: 1.12;
  color: #F3EFE2;
  margin-bottom: 22px;
}

.jade-word {
  display: block;
  color: #4FA98F;
}

.springpool-lede {
  color: #F3EFE2;
  font-size: 1.06rem;
  max-width: 44rem;
  margin-bottom: 26px;
}

.dipper-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 26px;
}

.dippertab {
  display: inline-block;
  background-color: #4FA98F;
  color: #14201A;
  padding: 13px 26px;
  border-radius: 3px 14px 14px 3px;
  border: 2px solid #6E5A44;
  font-weight: bold;
  letter-spacing: 0.03em;
}

.dippertab:hover {
  background-color: #F3EFE2;
  color: #14201A;
}

.dippertab-quiet {
  background-color: #14201A;
  color: #F3EFE2;
}

.dippertab-quiet:hover {
  background-color: #4FA98F;
  color: #14201A;
}

.springpool-notes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 0;
}

.springpool-notes li {
  color: #F3EFE2;
  font-size: 0.92rem;
  padding-left: 16px;
  position: relative;
}

.springpool-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  background-color: #4FA98F;
  border-radius: 50%;
}

/* spring pool scene */

.springpool-scene {
  position: relative;
  background-color: #14201A;
  border: 1px solid #6E5A44;
  border-radius: 18px 60px 48px 22px;
  min-height: 430px;
  overflow: hidden;
}

.scene-moon {
  position: absolute;
  top: 26px;
  right: 32px;
  width: 52px;
  height: 52px;
  background-color: #F3EFE2;
  border-radius: 50%;
  box-shadow: 0 0 0 8px #1C231D;
}

.scene-steam {
  position: absolute;
  top: 60px;
  left: 32%;
  display: flex;
  gap: 8px;
}

.scene-steam-mid {
  top: 96px;
  left: 50%;
}

.scene-steam-far {
  top: 74px;
  left: 16%;
}

.steamseg {
  width: 12px;
  height: 40px;
  background-color: #F3EFE2;
  border-radius: 8px;
  display: block;
}

.scene-steam .steamseg:nth-child(2n) {
  background-color: #4FA98F;
  height: 56px;
}

.scene-steam .steamseg:nth-child(3n) {
  height: 30px;
}

.poolbasin {
  position: absolute;
  left: 7%;
  bottom: 34px;
  width: 86%;
  height: 210px;
  background-color: #4FA98F;
  border-radius: 42% 36% 38% 44% / 40% 46% 34% 42%;
  padding: 10px;
}

.poolwater {
  width: 100%;
  height: 100%;
  background-color: #14201A;
  border-radius: 42% 36% 38% 44% / 40% 46% 34% 42%;
}

.poolrim {
  position: absolute;
  left: 50%;
  bottom: 30px;
  width: 46%;
  height: 4px;
  background-color: #F3EFE2;
  border-radius: 3px;
  transform: translateX(-50%);
}

.stonelantern {
  position: absolute;
  top: 96px;
  right: 42px;
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lanternbody {
  width: 46px;
  height: 54px;
  background-color: #14201A;
  border: 3px solid #6E5A44;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lanternslit {
  width: 12px;
  height: 28px;
  background-color: #4FA98F;
  border-radius: 3px;
  display: block;
}

.lanternroof {
  width: 62px;
  height: 10px;
  background-color: #6E5A44;
  border-radius: 4px 4px 0 0;
}

.lanternbase {
  width: 34px;
  height: 8px;
  background-color: #6E5A44;
  border-radius: 0 0 4px 4px;
}

.woodbucket {
  position: absolute;
  left: 16%;
  bottom: 60px;
  width: 54px;
  height: 44px;
  background-color: #6E5A44;
  border-radius: 4px 4px 16px 16px;
}

.bucketglyph {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 30px;
  background-color: #6E5A44;
  border-radius: 3px 3px 10px 10px;
  flex: 0 0 auto;
}

.hoop {
  position: absolute;
  left: -3px;
  right: -3px;
  height: 4px;
  background-color: #F3EFE2;
  border-radius: 2px;
}

.hoop-one {
  top: 7px;
}

.hoop-two {
  bottom: 7px;
}

.dipperstick {
  position: absolute;
  top: -22px;
  left: 24px;
  width: 4px;
  height: 26px;
  background-color: #F3EFE2;
  border-radius: 2px;
  transform: rotate(14deg);
}

.stepstone {
  position: absolute;
  height: 16px;
  background-color: #1C231D;
  border: 2px solid #4FA98F;
  border-radius: 50%;
}

.stepstone-a {
  left: 30%;
  bottom: 18px;
  width: 78px;
}

.stepstone-b {
  left: 48%;
  bottom: 4px;
  width: 96px;
}

.reedstrokes {
  position: absolute;
  left: 6%;
  bottom: 26px;
  display: flex;
  gap: 7px;
  align-items: flex-end;
}

.reedstrokes .reed {
  height: 30px;
  background-color: #6E5A44;
}

.reedstrokes .reed:nth-child(2n) {
  height: 44px;
}

/* ============ WELCOME ============ */

.welcomecourse {
  background-color: #14201A;
  padding: 56px 24px;
}

.welcome-plate {
  max-width: 900px;
  margin: 0 auto;
  padding: 34px 36px;
  background-color: #1C231D;
  border: 1px solid #6E5A44;
  border-radius: 60px 20px 60px 20px;
}

.welcome-title {
  color: #4FA98F;
  font-size: 1.7rem;
  margin-bottom: 18px;
}

.welcome-copy {
  color: #F3EFE2;
  margin-bottom: 16px;
}

/* ============ SOAKING COURSES ============ */

.soakingcourses {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 24px 24px;
}

.courseintro {
  max-width: 760px;
  margin: 0 auto 46px;
  text-align: center;
}

.courseintro-title {
  color: #F3EFE2;
  font-size: 2rem;
  margin-bottom: 14px;
}

.courseintro-copy {
  color: #F3EFE2;
}

.soakbasin {
  position: relative;
  background-color: #14201A;
  border: 3px solid #6E5A44;
  border-radius: 52px 22px 60px 26px;
  padding: 40px 34px 30px;
  max-width: 88%;
}

.soak-left {
  margin-right: auto;
  margin-left: 0;
}

.soak-right {
  margin-left: auto;
  margin-right: 0;
}

.soak-tilt-a {
  transform: rotate(-1deg);
}

.soak-tilt-b {
  transform: rotate(1deg);
  border-radius: 24px 58px 26px 56px;
}

.soakbasin:nth-of-type(2) {
  max-width: 78%;
}

.soakbasin:nth-of-type(4) {
  max-width: 84%;
}

.soakbasin:nth-of-type(6) {
  max-width: 80%;
}

.soakbasin:nth-of-type(8) {
  max-width: 86%;
}

.yutontag {
  position: absolute;
  top: -14px;
  left: 30px;
  background-color: #4FA98F;
  color: #14201A;
  font-weight: bold;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  padding: 5px 14px;
  border-radius: 4px 12px 12px 4px;
}

.basin-steam {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.bsteamseg {
  width: 10px;
  height: 30px;
  background-color: #F3EFE2;
  border-radius: 6px;
  display: block;
}

.bsteamseg:last-child {
  background-color: #4FA98F;
  height: 42px;
}

.basin-title {
  color: #F3EFE2;
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.basin-copy {
  color: #F3EFE2;
  margin-bottom: 16px;
}

.basin-link {
  display: inline-block;
  color: #4FA98F;
  border-bottom: 1px solid #6E5A44;
  font-size: 0.95rem;
}

.basin-link:hover {
  color: #F3EFE2;
}

.basin-with-bucket {
  padding-bottom: 30px;
}

.basin-with-bucket .bucketglyph {
  position: absolute;
  right: 34px;
  bottom: 24px;
}

.strideline {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 40px;
  max-width: 1180px;
  margin: 0 auto;
  overflow: hidden;
}

.strideline .stoneoval {
  width: 34px;
  height: 13px;
}

/* ============ LANTERN NIGHT STRIP ============ */

.lanternnight {
  background-color: #4FA98F;
  padding: 20px 24px;
}

.lanternnight-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.lanternnight-text {
  color: #14201A;
  font-weight: bold;
  font-size: 1.05rem;
  text-align: center;
}

.lanternglyph {
  width: 22px;
  height: 30px;
  background-color: #14201A;
  border-radius: 6px;
  display: inline-block;
  position: relative;
  flex: 0 0 auto;
}

.lanternglyph::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 7px;
  width: 8px;
  height: 12px;
  background-color: #F3EFE2;
  border-radius: 2px;
}

/* ============ APPROACH ============ */

.approachcourse {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 24px;
}

.approach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.approach-cell {
  background-color: #14201A;
  border-left: 4px solid #4FA98F;
  border-radius: 6px 26px 26px 6px;
  padding: 30px 26px;
}

.approach-title {
  color: #4FA98F;
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.approach-copy {
  color: #F3EFE2;
  font-size: 0.97rem;
}

/* ============ CLOSING ============ */

.closingcourse {
  background-color: #14201A;
  padding: 56px 24px;
}

.closing-plate {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 32px;
  border: 1px solid #6E5A44;
  border-radius: 26px 60px 26px 60px;
  background-color: #1C231D;
}

.closing-title {
  color: #F3EFE2;
  font-size: 1.9rem;
  margin-bottom: 14px;
}

.closing-copy {
  color: #F3EFE2;
  margin-bottom: 24px;
}

.closing-plate .dipper-row {
  justify-content: center;
}

/* ============ FOOTER : CHANGING ROOM ============ */

.changingroom {
  background-color: #14201A;
  color: #F3EFE2;
}

.towelrail {
  display: flex;
  gap: 14px;
  padding: 0 40px 0;
  border-top: 6px solid #6E5A44;
  max-width: 1180px;
  margin: 0 auto;
}

.towelslab {
  width: 70px;
  height: 34px;
  background-color: #4FA98F;
  border-radius: 0 0 10px 10px;
  display: block;
}

.towelslab:nth-child(2) {
  background-color: #F3EFE2;
}

.towelslab:nth-child(3) {
  background-color: #6E5A44;
}

.changingroom-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 24px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  justify-content: space-between;
}

.cedarnameplate {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  max-width: 520px;
  background-color: #1C231D;
  border: 1px solid #6E5A44;
  border-radius: 14px;
  padding: 22px 24px;
}

.cedarname {
  color: #4FA98F;
  font-weight: bold;
  margin-bottom: 8px;
}

.cedarblurb {
  color: #F3EFE2;
  font-size: 0.92rem;
}

.towelcolumns {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

.towelcol {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.towelcol-head {
  color: #6E5A44;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  margin-bottom: 6px;
}

.toweltag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #F3EFE2;
  background-color: #1C231D;
  border: 1px solid #6E5A44;
  border-radius: 4px 12px 12px 4px;
  padding: 8px 16px;
  font-size: 0.92rem;
}

.tagdot {
  width: 9px;
  height: 9px;
  background-color: #4FA98F;
  border-radius: 50%;
  display: inline-block;
}

.footerbase {
  position: relative;
  border-top: 1px solid #6E5A44;
  max-width: 1180px;
  margin: 12px auto 0;
  padding: 22px 24px 26px;
  text-align: center;
}

.footerbase p {
  color: #F3EFE2;
  font-size: 0.88rem;
  margin-bottom: 6px;
}

.steamcurl {
  width: 14px;
  height: 34px;
  background-color: #4FA98F;
  border-radius: 8px;
  display: block;
  margin: 0 auto 12px;
}

/* ============ SHARED PAGE BLOCKS ============ */

.pagecourse {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 24px;
}

.pagehead {
  max-width: 820px;
  margin: 0 auto 40px;
  text-align: center;
}

.pagehead-kicker {
  color: #4FA98F;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: 14px;
}

.pagehead-title {
  color: #F3EFE2;
  font-size: 2.4rem;
  margin-bottom: 16px;
}

.pagehead-lede {
  color: #F3EFE2;
}

.detailbasin {
  position: relative;
  background-color: #14201A;
  border: 3px solid #6E5A44;
  border-radius: 50px 22px 54px 24px;
  padding: 36px 34px 28px;
  margin-bottom: 34px;
}

.detailbasin-alt {
  border-radius: 24px 52px 26px 54px;
}

.detail-title {
  color: #F3EFE2;
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.detail-tag {
  color: #4FA98F;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.76rem;
  margin-bottom: 14px;
}

.detail-copy {
  color: #F3EFE2;
  margin-bottom: 14px;
}

.detail-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
}

.detail-list li {
  color: #F3EFE2;
  padding-left: 20px;
  position: relative;
}

.detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 9px;
  background-color: #4FA98F;
  border-radius: 50%;
}

.processband {
  background-color: #14201A;
  border-radius: 30px;
  padding: 40px 34px;
  margin-top: 10px;
}

.processband-title {
  color: #4FA98F;
  font-size: 1.6rem;
  margin-bottom: 18px;
}

.processstep {
  border-left: 4px solid #4FA98F;
  padding: 6px 0 6px 18px;
  margin-bottom: 18px;
}

.processstep h3 {
  color: #F3EFE2;
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.processstep p {
  color: #F3EFE2;
}

.ctaband {
  background-color: #4FA98F;
  border-radius: 20px;
  padding: 34px;
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.ctaband-text {
  color: #14201A;
  font-size: 1.15rem;
  font-weight: bold;
  max-width: 640px;
}

.ctaband .dippertab {
  border-color: #14201A;
}

/* ============ CONTACT ============ */

.contactgrid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 30px;
  align-items: start;
}

.contactcard {
  background-color: #14201A;
  border: 3px solid #6E5A44;
  border-radius: 40px 20px 48px 22px;
  padding: 32px 30px;
}

.contactcard-title {
  color: #4FA98F;
  font-size: 1.4rem;
  margin-bottom: 18px;
}

.fieldrow {
  margin-bottom: 18px;
}

.fieldrow label {
  display: block;
  color: #F3EFE2;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  margin-bottom: 7px;
}

.fieldrow input,
.fieldrow textarea {
  width: 100%;
  background-color: #1C231D;
  border: 1px solid #6E5A44;
  border-radius: 8px;
  color: #F3EFE2;
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 14px;
}

.fieldrow input:focus,
.fieldrow textarea:focus {
  outline: 2px solid #4FA98F;
}

.fieldrow textarea {
  min-height: 140px;
  resize: vertical;
}

.formstatus {
  color: #4FA98F;
  font-weight: bold;
  min-height: 22px;
  margin-top: 10px;
}

.infoblock {
  margin-bottom: 22px;
}

.infoblock h3 {
  color: #4FA98F;
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.infoblock p {
  color: #F3EFE2;
}

.faqitem {
  background-color: #14201A;
  border-left: 4px solid #4FA98F;
  border-radius: 6px 20px 20px 6px;
  padding: 18px 22px;
  margin-bottom: 16px;
}

.faqq {
  color: #F3EFE2;
  font-size: 1.05rem;
  margin-bottom: 8px;
  font-weight: bold;
}

.faqa {
  color: #F3EFE2;
}

.faq-banner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 40px;
}

.faq-banner h2 {
  color: #F3EFE2;
  font-size: 1.7rem;
  margin-bottom: 20px;
}

/* ============ REVEAL ============ */

.js .reveal-pending {
  opacity: 0;
  transform: translateY(20px);
}

.js .reveal-ready {
  opacity: 1;
  transform: none;
  transition: opacity 520ms ease, transform 520ms ease;
}

/* ============ RESPONSIVE ============ */

@media (max-width: 900px) {
  .springpool {
    grid-template-columns: 1fr;
  }
  .springpool-head {
    font-size: 2.2rem;
  }
  .soakbasin,
  .soakbasin:nth-of-type(2),
  .soakbasin:nth-of-type(4),
  .soakbasin:nth-of-type(6),
  .soakbasin:nth-of-type(8) {
    max-width: 100%;
  }
  .approach-grid {
    grid-template-columns: 1fr;
  }
  .contactgrid {
    grid-template-columns: 1fr;
  }
  .lantern-high {
    transform: none;
  }
}

@media (max-width: 640px) {
  .lanternpath-inner {
    justify-content: center;
  }
  .springpool-head {
    font-size: 1.8rem;
  }
  .springpool-scene {
    min-height: 340px;
  }
  .soakbasin {
    padding: 36px 22px 26px;
  }
  .strideline {
    padding: 18px 10px;
  }
}