/* ===================================================================
   Kawa Lodge — Public marketing site
   Layered on the design system in main.css (palette, type, keytag,
   buttons, cards). This file handles layout for welcome.php and the
   rooms / dining / gallery / about / contact pages.
   =================================================================== */

:root { --nav-h: 73px; }

body.welcome-page {
  overflow-x: hidden;
  padding-top: var(--nav-h);
}

.welcome-page section { padding: 88px 0; }
.welcome-page .eyebrow { margin-bottom: 10px; display: block; }

/* -------------------------------------------------------------
   Nav
   ------------------------------------------------------------- */
.w-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
  transition: background .25s var(--ease), backdrop-filter .25s var(--ease), border-color .25s var(--ease);
}
/* Starts see-through over the hero's own dark background, and only
   picks up its own solid backdrop once scrolled - so it still reads
   clearly once whatever's behind it stops being guaranteed-dark. */
.w-nav.w-nav--transparent {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
.w-nav.w-nav--transparent.is-scrolled {
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom-color: rgba(16, 24, 40, 0.08);
}

/* The spacer above reserves the fixed header's measured height. On
   the home page this fixed tone continues the hero backdrop behind
   the transparent header until the hero image takes over. */
body.has-transparent-nav::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h, 73px);
  background: #152250;
  z-index: 49;
  pointer-events: none;
}
.w-nav .container { padding-top: 12px; padding-bottom: 12px; }

.w-wordmark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.w-wordmark-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.18rem;
  color: var(--parchment);
  letter-spacing: -0.01em;
}
 .w-wordmark-text { text-decoration: none !important; }

.w-nav-links { display: flex; align-items: center; gap: 30px; }
.w-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--parchment);
  font-weight: 500;
  font-size: 0.94rem;
  padding: 6px 0;
  position: relative;
}
.w-nav-icon { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.8; }
.w-nav-link.is-active .w-nav-icon { opacity: 1; }
.w-nav-link:hover { color: var(--clay-light); text-decoration: none; }
.w-nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: -3px;
  height: 2px;
  background: var(--clay);
  transition: right .2s var(--ease);
}
.w-nav-link:hover::after { right: 0; }
.w-nav-link.is-active { color: var(--clay); font-weight: 600; }
.w-nav-link.is-active::after { right: 0; }
.w-nav-staff { margin-left: 8px; }

.w-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: transparent;
  border: 1.5px solid var(--stone-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.w-nav-toggle span { width: 18px; height: 2px; background: var(--clay); border-radius: 2px; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.w-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.w-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.w-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------------
   Hero
   ------------------------------------------------------------- */
/* -------------------------------------------------------------
   Hero Slideshow - Full width background
   ------------------------------------------------------------- */
.w-hero {
  padding: 0;
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ink);
}

.w-hero-slideshow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.w-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  z-index: 0;
}

.w-hero-slide.is-active {
  opacity: 1;
  z-index: 1;
}

.w-hero-slide-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform 8s var(--ease);
}

.w-hero-slide.is-active .w-hero-slide-bg {
  transform: scale(1);
}

.w-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.w-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(27, 42, 91, 0.85) 0%, rgba(16, 28, 66, 0.75) 50%, rgba(0, 0, 0, 0.6) 100%);
  z-index: 2;
}

.w-hero .container {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
}

.w-hero-panel {
  background: transparent;
  border-radius: var(--radius-lg);
  padding: 0;
}

.w-hero-panel .eyebrow {
  color: var(--clay-light);
}

.w-hero-panel h1 {
  color: var(--white);
}

.w-hero-panel .w-hero-sub {
  color: rgba(251, 252, 254, 0.8);
}

.w-hero-panel .btn-hero {
  padding: 14px 32px;
  font-size: 1rem;
  min-height: 52px;
}

.w-hero-panel .btn-ghost {
  border-color: rgba(243, 245, 249, 0.3);
  color: var(--white);
}

.w-hero-panel .btn-ghost:hover {
  background: rgba(243, 245, 249, 0.1);
  border-color: var(--clay-light);
  color: var(--clay-light);
}

.w-hero-proof {
  border-top-color: rgba(243, 245, 249, 0.15);
}

.w-hero-proof-item strong {
  color: var(--white);
}

.w-hero-proof-item span {
  color: var(--white);
}

.w-hero-proof-divider {
  background: rgba(243, 245, 249, 0.15);
}

/* Hero controls */
.w-hero-controls {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 24px;
  z-index: 10;
}

.w-hero-arrow {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  cursor: pointer;
  transition: all 0.3s var(--ease);
  backdrop-filter: blur(4px);
}

.w-hero-arrow:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.w-hero-arrow:active {
  transform: scale(0.95);
}

.w-hero-dots {
  display: flex;
  gap: 10px;
}

.w-hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  padding: 0;
}

.w-hero-dot:hover {
  background: rgba(255, 255, 255, 0.2);
}

.w-hero-dot.is-active {
  background: var(--clay);
  border-color: var(--clay);
  transform: scale(1.2);
}

/* Responsive adjustments */
@media (max-width: 980px) {
  .w-hero {
    min-height: auto;
    padding: 80px 0 60px;
  }
  
  .w-hero-slideshow {
    position: absolute;
    inset: 0;
  }
  
  .w-hero .container {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  
  .w-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .w-hero-art {
    max-width: 300px;
    margin: 0 auto;
  }
  
  .w-hero-controls {
    bottom: 20px;
    gap: 16px;
  }
  
  .w-hero-arrow {
    width: 36px;
    height: 36px;
  }
  
  .w-hero-dot {
    width: 8px;
    height: 8px;
  }
}

@media (max-width: 720px) {
  .w-hero {
    padding: 60px 0 40px;
  }
  
  .w-hero-panel .btn-hero {
    padding: 10px 20px;
    font-size: 0.9rem;
    min-height: 44px;
  }
  
  .w-hero-proof {
    flex-wrap: wrap;
    gap: 8px 16px;
  }
  
  .w-hero-controls {
    bottom: 12px;
    gap: 12px;
  }
  
  .w-hero-arrow {
    width: 32px;
    height: 32px;
  }
  
  .w-hero-arrow svg {
    width: 18px;
    height: 18px;
  }
}

/* Native, dependency-free scroll reveals (enabled only when JS supports them). */
.motion-enabled [data-aos] {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 16px, 0);
  transition: opacity var(--reveal-duration, .7s) var(--ease), transform var(--reveal-duration, .7s) var(--ease);
}
.motion-enabled [data-aos="fade-right"] { transform: translate3d(-18px, 0, 0); }
.motion-enabled [data-aos="fade-left"] { transform: translate3d(18px, 0, 0); }
.motion-enabled [data-aos="fade-down"] { transform: translate3d(0, -16px, 0); }
.motion-enabled [data-aos].aos-animate { opacity: 1; pointer-events: auto; transform: translate3d(0, 0, 0); }

/* Key tag in hero stays visible */
.w-hero .keytag {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.w-hero-panel .eyebrow { color: var(--clay-light); }
.w-hero-panel h1 { color: var(--parchment); }
.w-hero-panel .w-hero-sub { color: #c9c4b5; }
.w-hero-panel .btn-ghost { border-color: rgba(243,245,249,.28); color: var(--parchment); }
.w-hero-panel .btn-ghost:hover { border-color: var(--clay-light); color: var(--clay-light); }
@media (max-width: 720px) { .w-hero-panel { padding: 36px 24px; } }
.w-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.w-hero h1 { font-size: clamp(2.3rem, 4vw, 3.4rem); }
.w-hero-sub { font-size: 1.06rem; max-width: 46ch; color: var(--ink-soft); }
.w-hero-copy .flex-gap { margin-top: 8px; flex-wrap: wrap; }

.w-hero-proof {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(16,24,40,.1);
}
.w-hero-proof-item { display: flex; align-items: center; gap: 9px; }
.w-hero-proof-item strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--white); display: block; line-height: 1; }
.w-hero-proof-item span { font-size: 0.76rem; color: var(--white); }
.w-hero-proof-divider { width: 1px; height: 26px; background: rgba(16,24,40,.12); }

.w-hero-art { position: relative; }
.w-hero-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 24px 40px rgba(16,24,40,.16)); }

/* -------------------------------------------------------------
   Value strip
   ------------------------------------------------------------- */
.w-strip { background: var(--white); border-top: 1px solid rgba(16,24,40,.06); border-bottom: 1px solid rgba(16,24,40,.06); padding: 64px 0; }
.w-strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.w-strip-item {
  background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(243,245,249,0.45));
  border: 1px solid rgba(16,24,40,.06);
  border-radius: 16px;
  padding: 24px 22px;
  box-shadow: 0 10px 24px rgba(16,24,40,0.04);
}
.w-strip-item .keytag { margin-bottom: 16px; }
.w-strip-item h3 { font-size: 1.15rem; margin-bottom: 6px; }
.w-strip-item p { font-size: 0.94rem; margin-bottom: 0; }

/* -------------------------------------------------------------
   Section heads (reused across pages)
   ------------------------------------------------------------- */
.w-section-head { max-width: 640px; margin-bottom: 44px; }
.w-section-head.w-center { margin-left: auto; margin-right: auto; text-align: center; }
.w-section-head h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.w-section-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 36px; }

/* -------------------------------------------------------------
   Photo slot — placeholder visual component
   Used everywhere a real photo will eventually go. Styled as an
   intentional artifact (brass hairline + camera mark + caption),
   not a broken image.
   ------------------------------------------------------------- */
.photo-slot {
  position: relative;
  width: 100%;
  aspect-ratio: var(--slot-ratio, 4 / 3);
  border-radius: var(--radius);
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(184,134,59,.08) 0 2px, transparent 2px 18px),
    linear-gradient(155deg, var(--parchment-dim), var(--parchment-flat));
  border: 1px solid rgba(16,24,40,.08);
  display: flex;
  align-items: flex-end;
  color: var(--stone);
}
.photo-slot::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(184,134,59,.35);
  border-radius: calc(var(--radius) - 4px);
  pointer-events: none;
}
.photo-slot-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--brass-dark);
}
.photo-slot-label svg { flex-shrink: 0; opacity: .8; }
.photo-slot--tall { --slot-ratio: 3 / 4; }
.photo-slot--wide { --slot-ratio: 16 / 9; }
.photo-slot--square { --slot-ratio: 1 / 1; }

/* -------------------------------------------------------------
   Rooms
   ------------------------------------------------------------- */
.w-room-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.w-room-card {
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(251,252,254,0.96));
  border: 1px solid rgba(16,24,40,.08);
}
.w-room-card--compact { padding: 24px; }
.w-room-card--compact .badge { align-self: flex-start; margin-bottom: 18px; }
.w-room-card--compact h3 { margin-bottom: 8px; }
.w-room-card--compact .w-price { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--parchment-dim); }
.w-room-card .photo-slot { border-radius: 0; border: none; border-bottom: 1px solid rgba(16,24,40,.08); }
.w-room-card-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid rgba(16,24,40,.08);
}
.w-room-card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.w-room-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.w-room-tag {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--brass-dark);
  background: var(--moss-light);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}
.w-room-card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.w-room-card .text-stone { font-size: 0.92rem; flex: 1; }
.w-room-amenities { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 16px; padding: 14px 0 0; border-top: 1px solid var(--parchment-dim); }
.w-room-amenities span { font-size: 0.8rem; color: var(--stone); display: flex; align-items: center; gap: 6px; }
.w-room-amenities span::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--brass); }
.w-price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--ink); margin: 0 0 14px; }
.w-price span { font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; color: var(--stone); }
.w-room-card-cta { display: flex; gap: 10px; }
.w-room-card-cta .btn { flex: 1; }
.w-rooms-note { margin-top: 28px; font-size: 0.86rem; }

/* Rooms page: comparison table */
.w-compare-wrap { overflow-x: auto; margin-top: 12px; }
.w-compare { width: 100%; border-collapse: collapse; min-width: 560px; }
.w-compare th, .w-compare td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--parchment-dim); font-size: 0.9rem; }
.w-compare th { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .04em; font-size: 0.72rem; color: var(--stone); }
.w-compare td:first-child, .w-compare th:first-child { font-weight: 600; color: var(--ink); }
.w-compare tr:last-child td { border-bottom: none; }

/* -------------------------------------------------------------
   Stay strip (check-in / check-out)
   ------------------------------------------------------------- */
.w-stay { background: var(--ink); color: var(--parchment); }
.w-stay .eyebrow { color: var(--clay); }
.w-stay h2 { color: var(--white); }
.w-stay p { color: rgba(243,245,249,.72); }
.w-stay-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.w-stay-panel { padding: 28px; border: 1px solid rgba(243,245,249,.14); border-radius: 16px; background: rgba(255,255,255,.045); }
.w-stay-tag { display: flex; align-items: center; justify-content: center; gap: 22px; }
.w-stay-time { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.w-stay-time > span { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(243,245,249,.56); }
.w-stay-time .keytag { margin: 0; }
.w-stay-arrow { color: var(--clay); font-size: 1.4rem; }

/* -------------------------------------------------------------
   Dining preview / page
   ------------------------------------------------------------- */
.w-dining-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.w-dining-list { list-style: none; margin: 24px 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.w-dining-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.96rem; color: var(--ink-soft); }
.w-dining-list li .keytag { flex-shrink: 0; padding: 5px 10px 5px 22px; border-radius: 6px 6px 6px 16px; font-size: 0.7rem; }
.w-dining-list li .keytag::before { left: 8px; width: 6px; height: 6px; }

.w-menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.w-menu-card {
  padding: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(251,252,254,0.96));
  border: 1px solid rgba(16,24,40,.08);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(16,24,40,0.04);
}
.w-menu-card h3 { font-size: 1.1rem; margin-bottom: 4px; }
.w-menu-card .w-menu-time { font-family: var(--font-mono); font-size: 0.76rem; color: var(--brass-dark); text-transform: uppercase; letter-spacing: .04em; }
.w-menu-card ul { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--parchment-dim); display: flex; flex-direction: column; gap: 8px; }
.w-menu-card li { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9rem; color: var(--ink-soft); }
.w-menu-card li span:last-child { font-family: var(--font-mono); color: var(--stone); white-space: nowrap; }

.w-hours-table { width: 100%; border-collapse: collapse; }
.w-hours-table td { padding: 9px 0; font-size: 0.92rem; border-bottom: 1px solid var(--parchment-dim); }
.w-hours-table td:first-child { color: var(--ink-soft); }
.w-hours-table td:last-child { text-align: right; font-family: var(--font-mono); color: var(--stone); }
.w-hours-table tr:last-child td { border-bottom: none; }

/* -------------------------------------------------------------
   Testimonials
   ------------------------------------------------------------- */
.w-quotes { background: var(--moss-light); }
.w-quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.w-quote-card {
  padding: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(251,252,254,0.96));
  border: 1px solid rgba(16,24,40,.08);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(16,24,40,0.04);
}
.w-quote-mark { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--brass); display: block; margin-bottom: 4px; }
.w-quote-card p { font-size: 0.96rem; color: var(--ink-soft); }
.w-quote-attr { font-size: 0.82rem; color: var(--stone); font-weight: 600; margin: 0; }
.w-quote-attr span { font-weight: 400; }

/* -------------------------------------------------------------
   Gallery
   ------------------------------------------------------------- */
.w-gallery-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; }
.w-gallery-tab {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.86rem;
  padding: 9px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--stone-light);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.w-gallery-tab:hover { background: var(--parchment-dim); }
.w-gallery-tab.is-active { background: var(--ink); border-color: var(--ink); color: var(--white); }
.w-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.w-gallery-item { display: none; }
.w-gallery-item.is-visible { display: block; }
.w-gallery-item .photo-slot { transition: transform .2s var(--ease); }
.w-gallery-item:hover .photo-slot { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.w-gallery-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
  border: 1px solid rgba(16,24,40,.08);
}
.w-gallery-photo-wrap {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s var(--ease);
}
.w-gallery-item:hover .w-gallery-photo-wrap { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.w-gallery-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 16px 14px;
  background: linear-gradient(180deg, rgba(20,15,10,0) 0%, rgba(20,15,10,.75) 100%);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------
   About page
   ------------------------------------------------------------- */
.w-about-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.w-values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.w-value-card {
  padding: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(251,252,254,0.96));
  border: 1px solid rgba(16,24,40,.08);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(16,24,40,0.04);
}
.w-value-card .keytag { margin-bottom: 14px; }
.w-value-card h3 { font-size: 1.02rem; margin-bottom: 6px; }
.w-value-card p { font-size: 0.88rem; margin-bottom: 0; }

.w-timeline { display: flex; flex-direction: column; gap: 0; max-width: 620px; }
.w-timeline-item { display: grid; grid-template-columns: 90px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid var(--parchment-dim); }
.w-timeline-item:first-child { border-top: none; }
.w-timeline-item .mono { color: var(--brass-dark); font-weight: 600; }
.w-timeline-item h4 { font-family: var(--font-body); font-weight: 600; font-size: 1rem; margin-bottom: 4px; }
.w-timeline-item p { font-size: 0.9rem; margin-bottom: 0; }

/* -------------------------------------------------------------
   Contact page
   ------------------------------------------------------------- */
.w-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.w-contact-card { padding: 30px; }
.w-contact-info { display: flex; flex-direction: column; gap: 20px; margin-top: 28px; }
.w-contact-info-item { display: flex; gap: 14px; align-items: flex-start; }
.w-contact-info-item .keytag { flex-shrink: 0; padding: 8px 8px 8px 22px; border-radius: 6px 6px 6px 16px; }
.w-contact-info-item h4 { font-size: 0.94rem; margin-bottom: 3px; }
.w-contact-info-item p { font-size: 0.9rem; margin-bottom: 0; }
.w-map-slot { margin-top: 28px; }

.w-form-error,
.w-form-success {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 18px;
}
.w-form-error {
  background: #fbeaea;
  color: #8b2d2d;
  border: 1px solid #e8b0b0;
}
.w-form-success {
  background: var(--moss-light);
  color: var(--moss);
}
.w-form-error.show,
.w-form-success.show { display: flex; }

/* -------------------------------------------------------------
   CTA band (reused on inner pages)
   ------------------------------------------------------------- */
.w-cta {
  background: linear-gradient(155deg, var(--clay), var(--clay-dark));
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 52px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.w-cta h2 { color: var(--white); font-size: 1.7rem; margin-bottom: 6px; }
.w-cta p { color: rgba(251,252,254,.8); margin-bottom: 0; }
.w-cta .btn-ghost { background: rgba(251,252,254,.08); color: var(--white); border-color: rgba(251,252,254,.4); }
.w-cta .btn-ghost:hover { background: rgba(251,252,254,.16); }

/* -------------------------------------------------------------
   Page header (inner pages)
   ------------------------------------------------------------- */
.w-page-head { padding: 28px 0 32px; position: relative; }
.w-page-head::before {
  content: '';
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  margin-bottom: 20px;
  background: linear-gradient(90deg, var(--primary), var(--clay));
}
.w-page-head h1 { font-size: clamp(2rem, 3.4vw, 2.7rem); max-width: 18ch; }
.w-page-head p { font-size: 1.02rem; max-width: 52ch; color: var(--ink-soft); }
.w-page-head-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: end; }
.w-breadcrumb { font-family: var(--font-mono); font-size: 0.76rem; color: var(--stone); margin-bottom: 18px; }
.w-breadcrumb a { color: var(--stone); }
.w-breadcrumb a:hover { color: var(--clay-dark); }

/* -------------------------------------------------------------
   Find us / footer
   ------------------------------------------------------------- */
.w-find { background: var(--white); border-top: 1px solid rgba(16,24,40,.06); }
.w-find-grid { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.w-find .mono { font-size: 0.94rem; color: var(--ink-soft); margin-bottom: 2px; }

.w-footer { background: var(--ink); color: rgba(243,245,249,.65); padding: 64px 0 0; }
.w-footer .w-wordmark-text { color: var(--white); }
.w-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr; gap: 32px; padding-bottom: 48px; }
.w-footer-tag { color: rgba(243,245,249,.55); font-size: 0.88rem; margin-top: 14px; max-width: 26ch; }
.w-footer-col { display: flex; flex-direction: column; gap: 10px; }
.w-footer-head { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(243,245,249,.4); margin-bottom: 4px; }
.w-footer-col a, .w-footer-col span { color: rgba(243,245,249,.72); font-size: 0.9rem; }
.w-footer-col a:hover { color: var(--white); text-decoration: none; }
.w-footer-bottom {
  border-top: 1px solid rgba(243,245,249,.12);
  padding: 20px 0;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.w-footer-bottom .text-stone { color: rgba(243,245,249,.45); }
.w-footer-dev {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: .04em;
  color: rgba(243,245,249,.55);
}

/* -------------------------------------------------------------
   Legal & help prose pages (terms, privacy, faqs, help,
   cancellation). Narrow measure so long policy text stays readable.
   ------------------------------------------------------------- */
.w-legal { max-width: 820px; }
.w-legal-updated {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0 0 24px;
}
.w-legal h2 { font-size: 1.12rem; margin: 32px 0 10px; color: var(--ink); }
.w-legal h2:first-of-type { margin-top: 0; }
.w-legal p, .w-legal li { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.7; }
.w-legal ul { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.w-legal a { color: var(--clay-dark); }
.w-faq-item { padding: 18px 20px; margin-bottom: 12px; }
.w-faq-item h3 { font-size: 1rem; margin: 0 0 6px; color: var(--ink); }
.w-faq-item p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.65; }
.w-help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* -------------------------------------------------------------
   Responsive
   ------------------------------------------------------------- */
@media (max-width: 980px) {
  .w-hero-grid, .w-dining-grid, .w-stay-grid, .w-about-hero-grid, .w-contact-grid, .w-page-head-grid { grid-template-columns: 1fr; }
  .w-hero-art { order: -1; max-width: 340px; margin: 0 auto; }
  .w-room-cards { grid-template-columns: repeat(2, 1fr); }
  .w-strip-grid { grid-template-columns: 1fr; gap: 32px; }
  .w-values-grid { grid-template-columns: repeat(2, 1fr); }
  .w-quote-grid, .w-menu-grid, .w-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .w-footer-grid { grid-template-columns: 1fr 1fr; }
  .w-help-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .welcome-page section { padding: 60px 0; }
  .w-nav-links {
    position: fixed;
    top: calc(var(--nav-h, 73px) + 4px); left: 16px; right: 16px;
    background: rgba(0, 0, 0, 0.96);
    border: 1px solid rgba(16,24,40,.08);
    border-radius: var(--radius);
    box-shadow: var(--shadow-modal);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all .18s var(--ease);
  }
  .w-nav-links.is-open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .w-nav-link {
    color: var(--parchment);
    padding: 12px 10px;
    border-radius: var(--radius-sm);
  }
  .w-nav-link:hover {
    background: rgba(255,255,255,0.04);
    color: var(--clay-light);
  }
  .w-nav-link.is-active { color: var(--clay-light); }
  .w-nav-link::after { display: none; }
  .w-nav-staff { margin: 6px 2px 2px; text-align: center; }
  .w-nav-toggle { display: flex; }

  .w-room-cards, .w-quote-grid, .w-menu-grid, .w-gallery-grid, .w-values-grid { grid-template-columns: 1fr; }
  .w-cta { flex-direction: column; align-items: flex-start; padding: 36px 28px; }
  .w-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .w-help-grid { grid-template-columns: 1fr; }
  .w-footer { padding-top: 44px; }
  .w-footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    /* extra bottom room so the fixed "Ask Kawa" fab never covers the
       copyright / developer credit when scrolled to the very end */
    padding: 16px 0 76px;
  }
  .w-find-grid { flex-direction: column; align-items: flex-start; }
  .w-hero-proof { flex-wrap: wrap; }
  .w-stay-panel { padding: 22px 16px; }
  .w-stay-tag { gap: 12px; }
  .w-stay-time .keytag--lg { padding: 12px 18px 12px 34px; font-size: 1rem; }
}

/* -------------------------------------------------------------
   Public shell polish — full-bleed header/footer and contrast
   ------------------------------------------------------------- */
html:has(body.welcome-page),
body.welcome-page {
  min-height: 100%;
}
body.welcome-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--parchment);
}
body.welcome-page > .w-nav,
body.welcome-page > .w-footer {
  flex: 0 0 auto;
}
body.welcome-page > .w-footer {
  margin-top: auto;
}

/* Never let the public navigation inherit the dark primary text used
   by the general design system. Its surface is dark, so every label,
   icon and action must remain high-contrast. */
.w-nav .w-nav-link,
.w-nav .w-nav-link.is-active,
.w-nav .w-nav-link:hover,
.w-nav .btn-signin,
.w-nav .btn-signin:hover {
  color: var(--white) !important;
}
.w-nav .w-nav-link.is-active {
  color: var(--clay-light) !important;
}
.w-nav .w-nav-icon {
  color: currentColor !important;
}
.w-nav .btn-signin:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(243,245,249,.55);
}
.w-nav .btn-brass {
  color: var(--white) !important;
}
.w-nav .btn-brass:hover {
  color: var(--white) !important;
}
.w-nav-toggle {
  color: var(--clay-light);
}

/* Remove the visual 'paper strip' between the public header and the
   hero on the home page. The transparent header is part of the hero. */
body.welcome-page.has-transparent-nav {
  background: var(--ink);
}
body.welcome-page.has-transparent-nav .w-nav {
  margin-bottom: 0;
}

/* Full-width footer owns the very bottom of the viewport on short pages,
   so no parchment/white band is left underneath it. */
.w-footer {
  width: 100%;
}
.w-footer-bottom {
  margin-bottom: 0;
}

/* Public AI header: force the heading and all header text to stay light
   even if a later/general rule assigns --primary to headings. */
.kawa-public-ai-header,
.kawa-public-ai-header h2,
.kawa-public-ai-header p,
.kawa-public-ai-header .kawa-public-ai-badge {
  color: #fff !important;
}
.kawa-public-ai-header .kawa-public-ai-badge {
  color: #b9a4e8 !important;
}

/* A soft arrival and responsive card lift make the public pages feel active. */
.w-page-head h1,
.w-hero-panel {
  animation: kawa-arrive .62s cubic-bezier(.2,.72,.2,1) both;
}
.w-room-card,
.w-gallery-item,
.w-dining-card {
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .w-room-card:hover,
  .w-gallery-item:hover,
  .w-dining-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(16,24,40,.12);
    border-color: rgba(109,79,194,.28);
  }
}
@keyframes kawa-arrive {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------
   The hero's location line.

   Added to the H1 so the page names where it is and what it is,
   which the original three lines did not. Styled deliberately
   quieter than the rest of the headline - it is context, not a
   fourth promise - and slightly smaller so the four lines still
   read as one headline rather than a stack of slogans.
   ------------------------------------------------------------- */
.w-hero-panel h1 .w-hero-where {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.52em;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(251, 252, 254, 0.72);
  text-transform: none;
}

/* -------------------------------------------------------------
   The honeypot.

   Moved off-screen rather than hidden with display:none or
   visibility:hidden. Both of those are on every bot's skip list,
   and a bot that skips the field submits it empty - which is the
   one thing this must never do. Off-screen still occupies a real
   box in the layout, still receives a value when something fills
   the form in, and still posts.

   The absolute positioning and the clip keep it from pushing
   anything around, and tabindex="-1" on the input keeps it out of
   the tab order.
   ------------------------------------------------------------- */
.w-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}