/* ==========================================================================
   Terra Lux Boutique Villa — brand layer
   Loaded after style.css. Everything here overrides the base template so the
   template stylesheet stays untouched and upgradable.
   Palette sampled directly from img/logo.png.
   ========================================================================== */

:root {
  --tl-green:        #145336;
  --tl-green-dark:   #0D3823;
  --tl-green-deep:   #08271A;
  --tl-green-light:  #1C6C46;
  --tl-gold:         #C9A961;
  --tl-gold-light:   #E3CD93;
  --tl-gold-dim:     #A88B45;
  --tl-cream:        #FAF7F0;
  --tl-sand:         #F1ECE1;
  --tl-ink:          #1A1D1B;
  --tl-muted:        #6B7269;
  --tl-line:         rgba(201, 169, 97, 0.32);
  --tl-shadow:       0 18px 50px -22px rgba(8, 39, 26, 0.45);
  --tl-radius:       4px;
}

/* --------------------------------------------------------------------------
   Base typography
   -------------------------------------------------------------------------- */

html, body {
  /* AOS parks not-yet-animated elements 100px to the left or right of where
     they land. Without this the page scrolls sideways on every viewport
     narrow enough for a fade-right block to hang off the edge. */
  overflow-x: hidden;
  max-width: 100%;
}

body {
  color: var(--tl-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5,
.heading, .heading-serif {
  font-family: "Playfair Display", Georgia, times, serif;
  color: var(--tl-green-dark);
}

a { color: var(--tl-green); }
a:hover, a:focus { color: var(--tl-gold-dim); }

/* Small gold label that sits above a heading. */
.tl-eyebrow {
  display: block;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tl-gold-dim);
  margin-bottom: 14px;
}
.site-hero .tl-eyebrow,
.tl-on-dark .tl-eyebrow { color: var(--tl-gold-light); }

/* Short gold rule used under section headings. */
.tl-rule {
  display: block;
  width: 56px;
  height: 2px;
  background: var(--tl-gold);
  border: 0;
  margin: 22px 0 28px;
}
.text-center .tl-rule, .tl-rule.tl-rule-center { margin-left: auto; margin-right: auto; }

.lead { color: var(--tl-muted); font-weight: 300; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  border-radius: 2px;
  letter-spacing: 0.16em;
  font-size: 12px;
  font-weight: 600;
  padding: 16px 34px;
  transition: all .3s ease;
  border-width: 1px;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
  background: var(--tl-green);
  border-color: var(--tl-green);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
  background: var(--tl-green-dark);
  border-color: var(--tl-green-dark);
  color: var(--tl-gold-light);
  box-shadow: none;
}

.tl-btn-gold {
  background: var(--tl-gold);
  border-color: var(--tl-gold);
  color: var(--tl-green-deep);
}
.tl-btn-gold:hover, .tl-btn-gold:focus {
  background: var(--tl-gold-light);
  border-color: var(--tl-gold-light);
  color: var(--tl-green-deep);
}

.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.btn-outline-light:hover, .btn-outline-light:focus {
  background: rgba(255, 255, 255, 0.95);
  border-color: #fff;
  color: var(--tl-green-dark);
}

/* --------------------------------------------------------------------------
   Header + fullscreen navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 22px 0;
  transition: background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.site-header.tl-stuck {
  position: fixed;
  background: rgba(13, 56, 35, 0.96);
  padding: 10px 0;
  box-shadow: 0 6px 28px -14px rgba(0, 0, 0, 0.6);
}

.tl-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.tl-brand img {
  width: 54px;
  height: 54px;
  transition: width .35s ease, height .35s ease;
}
.tl-stuck .tl-brand img { width: 42px; height: 42px; }

.tl-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.tl-brand-name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
}
.tl-brand-tag {
  font-size: 9.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--tl-gold);
  margin-top: 3px;
}
@media (max-width: 575.98px) {
  .tl-brand img { width: 44px; height: 44px; }
  .tl-brand-name { font-size: 18px; }
  .tl-brand-tag { font-size: 8px; letter-spacing: 0.24em; }
}

/* Hamburger */
.site-menu-toggle span { background: #fff; }
.menu-open .site-menu-toggle span { background: var(--tl-gold); }

/* Fullscreen menu overlay */
.site-navbar {
  background: var(--tl-green-deep);
}
.site-navbar .menu li a {
  color: rgba(255, 255, 255, 0.88);
  font-family: "Playfair Display", Georgia, serif;
  transition: color .25s ease, padding-left .25s ease;
}
.site-navbar .menu li a:hover,
.site-navbar .menu li.active a {
  color: var(--tl-gold);
  padding-left: 10px;
}
.site-navbar .extra-info h3 {
  color: var(--tl-gold);
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-family: "Mukta Mahee", sans-serif;
  margin-bottom: 18px;
}
.site-navbar .extra-info p,
.site-navbar .extra-info a {
  color: rgba(255, 255, 255, 0.78);
}
.site-navbar .extra-info a:hover { color: var(--tl-gold); }

.tl-menu-brand {
  display: block;
  margin-bottom: 34px;
}
.tl-menu-brand img { width: 76px; height: 76px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.site-hero {
  position: relative;
  background-position: center center;
  background-size: cover;
  height: 100vh;
  min-height: 620px;
}
.site-hero.overlay:before {
  background: linear-gradient(
    180deg,
    rgba(8, 39, 26, 0.72) 0%,
    rgba(8, 39, 26, 0.42) 42%,
    rgba(8, 39, 26, 0.80) 100%
  );
  height: 100%;
  min-height: 0;
}
.site-hero-inner {
  position: relative;
  z-index: 2;
  height: 100vh;
  min-height: 620px;
}
.site-hero-inner .heading {
  font-size: 76px;
  color: #fff;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.site-hero-inner .heading em {
  font-style: normal;
  color: var(--tl-gold-light);
}
.site-hero-inner .sub-heading {
  font-size: 21px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.page-inside,
.page-inside .site-hero-inner {
  height: 62vh;
  min-height: 440px;
}
.page-inside.overlay:before { height: 100%; min-height: 0; }
.page-inside .site-hero-inner .heading { font-size: 58px; }

@media (max-width: 991.98px) {
  .site-hero, .site-hero-inner { height: 88vh; min-height: 480px; }
  .site-hero-inner .heading { font-size: 42px; }
  .site-hero-inner .sub-heading { font-size: 17px; }
  .page-inside, .page-inside .site-hero-inner { height: 56vh; min-height: 340px; }
  .page-inside .site-hero-inner .heading { font-size: 34px; }
}
@media (max-width: 575.98px) {
  .site-hero-inner .heading { font-size: 34px; }
  .site-hero-inner .sub-heading { font-size: 16px; }
  .site-hero-inner .btn { display: block; width: 100%; max-width: 300px; margin: 0 auto 12px; }
}

/* Scroll cue */
.tl-scroll-cue {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: rgba(255, 255, 255, 0.75);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
}
.tl-scroll-cue:hover { color: var(--tl-gold); }
.tl-scroll-cue span {
  display: block;
  width: 1px;
  height: 42px;
  margin: 10px auto 0;
  background: linear-gradient(to bottom, var(--tl-gold), transparent);
}
@media (max-width: 991.98px) { .tl-scroll-cue { display: none; } }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding: 96px 0; }
@media (max-width: 991.98px) { .section { padding: 64px 0; } }

.bg-light { background: var(--tl-cream) !important; }

/* The base template paints .bg-pattern with a texture PNG that no longer
   ships. Replace it with a flat sand tone. */
.bg-pattern { background: var(--tl-sand); }

/* .blog-post-entry pulled itself 500px up to tuck under the slider. Nothing
   overlaps it any more, so reset it or every page gains a 500px dead zone. */
.blog-post-entry { margin-top: 0; padding-top: 96px; }
@media (max-width: 991.98px) { .blog-post-entry { padding-top: 64px; } }

.bg-primary { background: var(--tl-green) !important; }

/* --------------------------------------------------------------------------
   At-a-glance strip
   -------------------------------------------------------------------------- */

.tl-glance {
  background: var(--tl-green-deep);
  padding: 54px 0;
}
.tl-glance .tl-glance-item {
  text-align: center;
  padding: 14px 10px;
  color: #fff;
}
.tl-glance .tl-glance-item + .tl-glance-item { border-left: 1px solid rgba(201, 169, 97, 0.22); }
@media (max-width: 767.98px) {
  .tl-glance .tl-glance-item + .tl-glance-item { border-left: 0; }
}
.tl-glance .tl-glance-num {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 40px;
  font-weight: 700;
  color: var(--tl-gold);
  line-height: 1;
  display: block;
}
.tl-glance .tl-glance-label {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   Spaces / feature cards
   -------------------------------------------------------------------------- */

.tl-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--tl-radius);
  box-shadow: var(--tl-shadow);
  text-decoration: none;
}
.tl-card .tl-card-media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2, .7, .3, 1);
}
.tl-card:hover .tl-card-media { transform: scale(1.06); }
.tl-card:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 39, 26, 0.86) 0%, rgba(8, 39, 26, 0.10) 55%, transparent 100%);
}
.tl-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 26px 24px;
}
.tl-card-body h3 {
  color: #fff;
  font-size: 23px;
  margin: 0 0 6px;
}
.tl-card-body p {
  margin: 0;
  color: var(--tl-gold-light);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tl-card-body:before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: var(--tl-gold);
  margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   Amenities
   -------------------------------------------------------------------------- */

.tl-amenity {
  display: flex;
  gap: 18px;
  padding: 26px 0;
  border-bottom: 1px solid var(--tl-line);
}
.tl-amenity i, .tl-amenity span.icon {
  flex: 0 0 auto;
  font-size: 26px;
  color: var(--tl-gold-dim);
  line-height: 1;
  margin-top: 3px;
}
.tl-amenity h4 {
  font-size: 18px;
  margin: 0 0 5px;
}
.tl-amenity p {
  margin: 0;
  color: var(--tl-muted);
  font-size: 15px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Home / gallery carousel — the mobile sizing fix
   --------------------------------------------------------------------------
   The template sized every slide at calc(100vh - 117px) with a 700px floor,
   so on a phone one slide was taller than the screen and the controls sat
   below the fold. Slides are now a fixed ratio the viewport can always
   contain, and the arrows are pulled inside the frame on narrow screens.
   -------------------------------------------------------------------------- */

.owl-carousel.home-slider .slider-item,
.owl-carousel.home-slider .slider-item .slider-text {
  height: auto;
  min-height: 0;
}

.owl-carousel.major-caousel {
  border-radius: var(--tl-radius);
  overflow: hidden;
  box-shadow: var(--tl-shadow);
}
.owl-carousel.major-caousel .owl-stage-outer {
  padding-top: 0;
  padding-bottom: 0;
}
.owl-carousel.major-caousel .slider-item img,
.tl-slide-img {
  width: 100%;
  height: 62vh;
  max-height: 620px;
  min-height: 280px;
  object-fit: cover;
  display: block;
}
@media (max-width: 991.98px) {
  .owl-carousel.major-caousel .slider-item img,
  .tl-slide-img { height: 48vh; max-height: 420px; }
}
@media (max-width: 575.98px) {
  .owl-carousel.major-caousel .slider-item img,
  .tl-slide-img { height: 56vw; min-height: 200px; }
}

/* Caption bar under each slide */
.tl-slide-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 46px 26px 20px;
  background: linear-gradient(to top, rgba(8, 39, 26, 0.85), transparent);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  pointer-events: none;
}
.owl-carousel.major-caousel .slider-item { position: relative; }
@media (max-width: 575.98px) {
  .tl-slide-caption { padding: 30px 16px 14px; font-size: 10px; letter-spacing: 0.14em; }
}

/* Arrows: outside the frame on desktop, inside on tablet and phone. */
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
  width: 46px;
  height: 46px;
  line-height: 46px;
  text-align: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--tl-green-dark) !important;
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.5);
  transition: background .25s ease, color .25s ease;
}
.owl-carousel .owl-nav .owl-prev:hover,
.owl-carousel .owl-nav .owl-next:hover {
  background: var(--tl-gold) !important;
  color: var(--tl-green-deep) !important;
}
@media (max-width: 1199.98px) {
  .owl-carousel.major-caousel .owl-nav .owl-prev { left: 12px !important; }
  .owl-carousel.major-caousel .owl-nav .owl-next { right: 12px !important; }
}
@media (max-width: 575.98px) {
  .owl-carousel.major-caousel .owl-nav .owl-prev,
  .owl-carousel.major-caousel .owl-nav .owl-next {
    width: 38px; height: 38px; line-height: 38px;
  }
}

/* Dots: keep them under the frame rather than floating 50px up over it. */
.owl-carousel.major-caousel .owl-dots {
  position: static !important;
  bottom: auto !important;
  margin-top: 22px;
  text-align: center;
}
.owl-carousel .owl-dots .owl-dot {
  width: 9px;
  height: 9px;
  background: rgba(20, 83, 54, 0.25);
  border: 0;
}
.owl-carousel .owl-dots .owl-dot.active { background: var(--tl-gold); border: 0; }

/* --------------------------------------------------------------------------
   Split feature rows (rooms)
   -------------------------------------------------------------------------- */

.half .image {
  background-position: center center;
  background-size: cover;
  min-height: 520px;
}
@media (max-width: 991.98px) { .half .image { min-height: 300px; } }

.half .text { padding: 72px 60px; }
@media (max-width: 991.98px) { .half .text { padding: 48px 26px; } }
.half .text h2 { font-size: 40px; margin-bottom: 4px; }
@media (max-width: 991.98px) { .half .text h2 { font-size: 30px; } }

.tl-price {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 27px;
  font-weight: 700;
  color: var(--tl-green);
  margin: 0 0 4px;
}
.tl-price small {
  font-family: "Mukta Mahee", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tl-muted);
  margin-left: 6px;
}

.tl-specs {
  list-style: none;
  padding: 0;
  margin: 22px 0 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.tl-specs li {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tl-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tl-specs li i { color: var(--tl-gold-dim); font-size: 15px; }

/* Small image strip under the room copy */
.tl-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 26px 0 0;
}
.tl-thumbs img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
  cursor: zoom-in;
  transition: opacity .25s ease;
}
.tl-thumbs img:hover { opacity: .82; }

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */

.tl-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(8, 39, 26, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 5vh 4vw;
}
.tl-lightbox.is-open { display: flex; }
.tl-lightbox img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 30px 80px -30px #000;
}
.tl-lightbox-close {
  position: absolute;
  top: 22px;
  right: 26px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 12px;
}
.tl-lightbox-close:hover { color: var(--tl-gold); }

/* --------------------------------------------------------------------------
   Media / post cards
   -------------------------------------------------------------------------- */

.media-custom img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--tl-radius);
}
.media-custom .media-body h2 { font-size: 22px; }
.media-custom .media-body h2 a { color: var(--tl-green-dark); }
.media-custom .media-body h2 a:hover { color: var(--tl-gold-dim); }
.meta-post {
  color: var(--tl-gold-dim);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.testimonial-section { background: var(--tl-cream); }
.testimonial {
  background: #fff;
  border: 1px solid var(--tl-line);
  border-radius: var(--tl-radius);
  padding: 40px 30px 34px;
  height: 100%;
}
.tl-avatar {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--tl-green);
  color: var(--tl-gold-light);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.testimonial blockquote {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
}
.testimonial blockquote p {
  font-size: 16px;
  line-height: 1.75;
  color: #40463f;
  font-style: italic;
}
.tl-stars { color: var(--tl-gold); letter-spacing: 3px; margin-bottom: 14px; font-size: 14px; }
.tl-cite {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tl-muted);
  margin: 0;
}

.reviews-star { color: var(--tl-gold); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-control {
  border-radius: 2px;
  border: 1px solid #d9d5cb;
  height: auto;
  padding: 13px 16px;
  font-size: 15px;
  color: var(--tl-ink);
}
.form-control:focus {
  border-color: var(--tl-gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.18);
}
label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tl-muted);
  font-weight: 600;
  margin-bottom: 7px;
}

/* Bootstrap pins `select.form-control:not([size]):not([multiple])` to a fixed
   38px, which is shorter than the 26px of vertical padding above plus a line
   of 15px text — so the chosen option was being clipped. Match the selects to
   the text inputs and draw our own chevron, since the native one sits on top
   of the value at this size. */
select.form-control,
select.form-control:not([size]):not([multiple]) {
  height: auto;
  min-height: 50px;
  line-height: 1.4;
  padding: 13px 44px 13px 16px;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%236B7269' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}
select.form-control::-ms-expand { display: none; }

/* Safari and Firefox render option rows with the page background otherwise. */
select.form-control option {
  color: var(--tl-ink);
  background: #fff;
  padding: 8px;
}

/* --------------------------------------------------------------------------
   Booking modal
   -------------------------------------------------------------------------- */

.tl-modal .modal-content {
  border: 0;
  border-radius: var(--tl-radius);
  box-shadow: 0 30px 90px -30px rgba(8, 39, 26, 0.6);
  overflow: hidden;
}
.tl-modal .modal-header {
  background: var(--tl-green);
  border: 0;
  padding: 22px 30px;
  align-items: center;
}
.tl-modal .modal-title {
  font-family: "Playfair Display", Georgia, serif;
  color: #fff;
  font-size: 22px;
  margin: 0;
}
.tl-modal .modal-header .close {
  color: var(--tl-gold-light);
  opacity: 1;
  text-shadow: none;
  font-size: 30px;
  font-weight: 300;
}
.tl-modal .modal-header .close:hover { color: #fff; }
.tl-modal .modal-body { padding: 30px; }

.tl-total {
  margin-top: 26px;
  padding: 18px 20px;
  background: var(--tl-cream);
  border-left: 3px solid var(--tl-gold);
  border-radius: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tl-total-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tl-muted);
  font-weight: 600;
}
.tl-total-value {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 25px;
  font-weight: 700;
  color: var(--tl-green);
}
.tl-nights-note { font-size: 13px; color: var(--tl-muted); margin: 8px 0 0; }

/* --------------------------------------------------------------------------
   Floating WhatsApp button
   -------------------------------------------------------------------------- */

.tl-wa {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 990;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.45);
  transition: transform .25s ease;
}
.tl-wa:hover { transform: scale(1.08); color: #fff; }
@media (max-width: 575.98px) { .tl-wa { width: 50px; height: 50px; font-size: 25px; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer-section {
  background: var(--tl-green-deep);
  color: rgba(255, 255, 255, 0.66);
  padding: 84px 0 34px;
}
.footer-section h4 {
  color: var(--tl-gold);
  font-family: "Mukta Mahee", sans-serif;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.footer-section p, .footer-section li { color: rgba(255, 255, 255, 0.66); }
.footer-section a { color: rgba(255, 255, 255, 0.78); }
.footer-section a:hover { color: var(--tl-gold); }
.footer-section .link li { margin-bottom: 11px; }
.footer-section .contact-info p span.d-block {
  color: var(--tl-gold);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.footer-section .bordertop { border-top: 1px solid rgba(201, 169, 97, 0.22); }
.tl-footer-brand img { width: 74px; height: 74px; margin-bottom: 18px; }
.tl-colophon { font-size: 13px; margin: 0; }
.tl-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-radius: 50%;
  margin-left: 8px;
  transition: all .25s ease;
}
.tl-social a:hover { background: var(--tl-gold); color: var(--tl-green-deep); border-color: var(--tl-gold); }

.footer-newsletter .form-control {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(201, 169, 97, 0.3);
  color: #fff;
}
.footer-newsletter .form-control::placeholder { color: rgba(255, 255, 255, 0.4); }
.footer-newsletter .btn { background: var(--tl-gold); color: var(--tl-green-deep); }

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */

.contact-section { padding-top: 0; }

.contact-section .tl-form-card {
  background: #fff;
  border-radius: var(--tl-radius);
  box-shadow: var(--tl-shadow);
  padding: 46px;
}

/* The form card is meant to straddle the seam between the hero photograph and
   the green band, so the page opens on the thing people came to do. */
.contact-section .tl-lift { margin-top: -170px; }
@media (max-width: 991.98px) { .contact-section .tl-lift { margin-top: -60px; } }
@media (max-width: 767.98px) { .contact-section .tl-form-card { padding: 28px 22px; } }

.contact-info p span.d-block {
  color: var(--tl-gold-light);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.contact-section .contact-info p span:not(.d-block) { color: #fff; }
.contact-section .contact-info a { color: #fff; text-decoration: underline; }
.contact-section .contact-info a:hover { color: var(--tl-gold-light); }

.tl-map {
  border: 0;
  width: 100%;
  height: 420px;
  display: block;
  filter: saturate(0.85);
}
@media (max-width: 767.98px) { .tl-map { height: 300px; } }

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */

.tl-quiet { color: var(--tl-muted); }
.tl-prose p { line-height: 1.85; color: #43493f; }
.tl-prose p + p { margin-top: 18px; }
.tl-signature {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 20px;
  color: var(--tl-green);
}

/* A landscape phone is shorter than the hero floor above. Let the hero shrink
   to the screen rather than pushing the first section out of reach. */
@media (max-height: 560px) {
  .site-hero, .site-hero-inner { min-height: 380px; }
  .page-inside, .page-inside .site-hero-inner { min-height: 300px; }
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.tl-cta-band,
.tl-cta-band .site-hero-inner {
  height: 52vh;
  min-height: 380px;
}
.tl-cta-band.overlay:before { height: 100%; min-height: 0; }
.tl-cta-band .heading { font-size: 46px; color: #fff; }
@media (max-width: 991.98px) {
  .tl-cta-band, .tl-cta-band .site-hero-inner { height: auto; min-height: 0; padding: 70px 0; }
  .tl-cta-band .heading { font-size: 30px; }
}

/* A framed photograph, used wherever an image sits on its own in prose. */
.tl-framed {
  border-radius: var(--tl-radius);
  box-shadow: var(--tl-shadow);
}

/* --------------------------------------------------------------------------
   Journal
   -------------------------------------------------------------------------- */

.tl-empty {
  padding: 60px 20px;
  color: var(--tl-muted);
}
.tl-empty span[class^="ion"] {
  display: block;
  font-size: 44px;
  color: var(--tl-gold);
  margin-bottom: 16px;
}
.tl-empty p { margin: 0; font-size: 16px; }

/* Posts without a cover image still need a block of colour so the card keeps
   its rhythm in the grid. */
.tl-post-noimage {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--tl-radius);
  background:
    radial-gradient(circle at 30% 30%, rgba(201, 169, 97, .30), transparent 60%),
    var(--tl-green);
}

.tl-post-page { padding-top: 150px; }
@media (max-width: 991.98px) { .tl-post-page { padding-top: 120px; } }

.tl-back {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--tl-gold-dim);
}
.tl-back:hover { color: var(--tl-green); }

.tl-post-title {
  font-size: 46px;
  line-height: 1.15;
  margin: 0;
}
@media (max-width: 767.98px) { .tl-post-title { font-size: 32px; } }

.tl-post-cover {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--tl-radius);
  box-shadow: var(--tl-shadow);
  margin-bottom: 38px;
  cursor: zoom-in;
}

.tl-post-body p { font-size: 17px; }
.tl-post-body p:first-of-type {
  font-size: 20px;
  color: #33382f;
  line-height: 1.75;
}

.tl-post-more {
  margin-top: 48px;
  padding: 28px 30px;
  background: var(--tl-cream);
  border-left: 3px solid var(--tl-gold);
  border-radius: 2px;
}
.tl-post-more h4 {
  font-family: "Mukta Mahee", sans-serif;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--tl-gold-dim);
  margin: 0 0 14px;
}
.tl-post-more li + li { margin-top: 10px; }
.tl-post-more a {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 18px;
  color: var(--tl-green-dark);
}
.tl-post-more a:hover { color: var(--tl-gold-dim); }