:root {
  /* Main Brand Colors */
  --color-primary:        #C8340C;   /* Palm-fruit red — bold signature color */
  --color-primary-dark:   #9E2808;   /* Hover / pressed state */
  --color-primary-light:  #F4522A;   /* Accent red */

  --color-secondary:      #F59B1A;   /* Palm-nut amber-gold */
  --color-secondary-dark: #D4841A;   /* Deeper amber */

  --color-accent:         #2D6E4F;   /* Kontomire forest green */
  --color-accent-light:   #3E9B6D;   /* Lighter green */

  --color-gold:           #E8C03A;   /* Kente gold */

  /* Neutrals */
  --color-dark:    #1A0A00;          /* Warm near-black */
  --color-dark-2:  #3D2010;          /* Deep warm brown */
  --color-medium:  #8B6347;          /* Warm mid-brown */
  --color-cream:   #FFF8EF;          /* Main light background */
  --color-surface: #FFF0D6;          /* Warm amber surface */
  --color-border:  #E8D5B5;          /* Warm border */
  --color-white:   #FFFFFF;

  /* Text */
  --text-dark:  #1A0A00;
  --text-body:  #5C3D2E;
  --text-muted: #8B6347;
  --text-light: #FFF8EF;

  /* Legacy aliases — keeps old selectors working */
  --brand-color: #C8340C;
  --text-main:   #1A0A00;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-heading: 'Montserrat', sans-serif;
  --font-body:    'Lato', sans-serif;

  /* Effects */
  --shadow-sm: 0 2px 8px  rgba(26, 10, 0, 0.08);
  --shadow-md: 0 4px 20px rgba(26, 10, 0, 0.13);
  --shadow-lg: 0 8px 40px rgba(26, 10, 0, 0.20);
  --radius:    8px;
  --radius-lg: 16px;
  --ease:      0.28s ease;
  /* Pure timing functions (--ease above bundles a duration, so it can't be reused here) */
  --ease-exit:  cubic-bezier(0.4, 0, 1, 1);   /* accelerate away */
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);   /* decelerate into place */
}

/* ===========================
   BASE / TYPOGRAPHY
   =========================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-body);
  background-color: var(--color-cream);
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }

h2 {
  font-size: 28px;
  text-transform: uppercase;
  color: var(--text-dark);
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 2px;
}

h4 {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-dark);
  font-weight: 400;
  margin-bottom: 20px;
}

p { color: var(--text-body); }

/* Decorative overline above section headings */
.section-label {
  display: block;
  font-size: 10px;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 5px;
  color: var(--color-secondary);
  margin-bottom: 10px;
  font-weight: 700;
}

/* Gradient underline bar */
.section-divider {
  width: 52px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  border-radius: 2px;
  margin: 0 0 36px;
}
.text-center .section-divider { margin-left: auto; margin-right: auto; }

/* ===========================
   PAGE LOADER
   =========================== */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#page-loader.loaded {
  opacity: 0;
  visibility: hidden;
}

.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.loader-ring {
  width: 60px;
  height: 60px;
  animation: loader-spin 1.4s linear infinite;
}

.loader-ring__track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 4;
}

.loader-ring__fill {
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 70;
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

.loader-wordmark {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 3px;
  color: var(--color-gold);
  text-transform: uppercase;
  opacity: 0.9;
}

/* ===========================
   NAVBAR
   =========================== */
.navbar {
  margin-bottom: 0;
  background-color: var(--color-dark);
  z-index: 9999;
  border: 0;
  border-bottom: 2px solid var(--color-primary);
  font-size: 11px;
  line-height: 1.42857143;
  letter-spacing: 3px;
  border-radius: 0;
  font-family: var(--font-heading);
  box-shadow: 0 2px 16px rgba(0,0,0,0.35);
}

.navbar li a,
.navbar .navbar-brand {
  color: var(--color-cream) !important;
  transition: color var(--ease), background-color var(--ease);
}

.navbar-brand {
  display: flex !important;
  align-items: center;
  height: 50px;
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 700;
}

.navbar-brand img {
  width: 38px;
  margin-right: 10px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.navbar-nav li a:hover,
.navbar-nav li.active a {
  color: var(--color-dark) !important;
  background-color: var(--color-secondary) !important;
}

.navbar-default .navbar-toggle {
  border-color: var(--color-secondary);
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: var(--color-secondary);
}

/* ===========================
   ANNOUNCEMENT BANNER
   =========================== */
/* Topmost strip, above the navbar. Announcements crossfade in place so
   the bar's height stays fixed and nothing below it shifts. */
.site-announcement-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  height: 34px;
  /* Opaque backing so a fading slide never lets the hero image show through. */
  background-color: var(--color-dark);
  border-bottom: 1px solid var(--color-primary);
}

.site-announcement {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--color-cream);
  background-color: var(--color-dark);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-announcement.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0s linear 0s;
}
.site-announcement--warning {
  background-color: var(--color-primary);
}

.navbar-with-announcement {
  top: 34px;
}

/* ===========================
   HERO / JUMBOTRON
   =========================== */
.jumbotron {
  /* Overridden inline when a hero image is uploaded in the admin. */
  --hero-image: url("../images/header-img-2.dd9c78712b7e.png");
  position: relative;
  overflow: hidden;
  background-color: var(--color-dark);
  background-image:
    linear-gradient(to bottom, rgba(26,10,0,0.55) 0%, rgba(26,10,0,0.70) 100%),
    var(--hero-image);
  background-size: cover;
  background-position: center;
  color: var(--color-cream);
  padding: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  margin-bottom: 0;
  font-family: var(--font-heading);
}

/* Video — hidden on desktop, shown on mobile */
.hero-video {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(26,10,0,0.58) 0%, rgba(26,10,0,0.74) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 130px 25px 90px;
  text-align: center;
  width: 100%;
}

/* Supporting hero text that steps aside while the video plays uninterrupted,
   leaving just the Twi wordmark. .hero-content--faded is a state hook only —
   the rules that actually hide these live in the mobile media query below,
   since the effect is mobile-only. This is the visible/entering state:
   quick and decelerating, because it answers a tap and must feel immediate. */
.hero-chrome {
  transition:
    opacity    320ms var(--ease-enter) var(--enter-delay, 0ms),
    transform  320ms var(--ease-enter) var(--enter-delay, 0ms),
    visibility 0s    linear            var(--enter-delay, 0ms);
}

/* Exit peels outside-in, so the small gold label is the last thing to
   dissolve above the title; entrance rebuilds top-down. */
.hero-badge   { --exit-delay: 140ms; --enter-delay:   0ms; }
.h1-en        { --exit-delay: 210ms; --enter-delay:  50ms; }
.hero-tagline { --exit-delay:  70ms; --enter-delay: 100ms; }
.hero-socials { --exit-delay:   0ms; --enter-delay: 150ms; }

.hero-badge {
  display: inline-block;
  background-color: var(--color-secondary);
  color: var(--color-dark);
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  padding: 6px 20px;
  border-radius: 30px;
  margin-bottom: 22px;
}

.hero-content h1 {
  font-family: var(--font-display);
  font-size: 78px;
  font-weight: 700;
  color: var(--color-cream);
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
  margin-bottom: 18px;
  line-height: 1.1;
}

.hero-tagline {
  font-family: var(--font-body);
  font-size: 18px;
  color: rgba(255,248,239,0.88);
  max-width: 520px;
  margin: 0 auto 42px;
  line-height: 1.75;
}

/* Subscribe bar */
.search-bar {
  margin: 0 auto;
  max-width: 460px;
}

.search-bar .form-control {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.28);
  color: white;
  height: 50px;
  font-size: 14px;
  border-radius: var(--radius) 0 0 var(--radius);
  backdrop-filter: blur(6px);
}

.search-bar .form-control::placeholder { color: rgba(255,255,255,0.55); }

.search-bar .btn-danger {
  background-color: var(--color-primary);
  border-color: var(--color-primary-dark);
  border-radius: 0 var(--radius) var(--radius) 0;
  height: 50px;
  padding: 0 26px;
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  transition: background-color var(--ease);
}

.search-bar .btn-danger:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* Scroll cue */
.hero-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255,255,255,0.48);
  font-size: 9px;
  letter-spacing: 4px;
  font-family: var(--font-heading);
  text-transform: uppercase;
  text-align: center;
}

.hero-scroll-hint .scroll-line {
  display: block;
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.35);
  margin: 8px auto 0;
  animation: scroll-pulse 1.8s ease-in-out infinite;
}

@keyframes scroll-pulse {
  0%, 100% { opacity: 0.22; transform: scaleY(0.65); }
  50%       { opacity: 1;    transform: scaleY(1); }
}

/* ===========================
   COMMON SECTION LAYOUT
   =========================== */
.container-fluid { padding: 80px 56px; }
.bg-grey         { background-color: var(--color-surface); }

/* ===========================
   ABOUT SECTION
   =========================== */
#about { background-color: var(--color-cream); }
#about h2 { color: var(--color-primary); }

.founder-img {
  max-width: 460px;
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Clean anchor-button (replaces invalid <button><a> pattern) */
.cta-btn {
  display: inline-block;
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 3px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 13px 30px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background-color var(--ease), color var(--ease);
  cursor: pointer;
}

.cta-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-cream);
  text-decoration: none;
}

.cta-btn--filled {
  background-color: var(--color-primary);
  color: var(--color-cream);
}

.cta-btn--filled:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-cream);
}

.gallery-ctas {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 12px 0 52px;
  flex-wrap: wrap;
}

/* ===========================
   VALUES SECTION
   =========================== */
.values-section {
  background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-2) 100%);
}

.values-section h2          { color: var(--color-gold); }
.values-section h4          { color: var(--color-cream); }
.values-section p           { color: rgba(255,248,239,0.78); }
.values-section .section-label { color: var(--color-secondary); }

.logo-small {
  color: var(--color-secondary);
  font-size: 56px;
  display: block;
  text-align: center;
  margin-bottom: 8px;
}

.logo {
  color: var(--color-secondary);
  font-size: 200px;
}

/* ===========================
   MENU SECTION
   =========================== */
#services {
  background-color: var(--color-dark);
  background-image: url("../images/label-on-chair.66f59983a00c.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
}

/* Very dark gradient so headings above cards are legible in white */
#services::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 5, 0, 0.97) 0%,
    rgba(10, 5, 0, 0.93) 28%,
    rgba(10, 5, 0, 0.80) 50%,
    rgba(10, 5, 0, 0.93) 100%
  );
}

#services::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 38%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.90) 0%, transparent 100%);
  pointer-events: none;
}

#services > * { position: relative; }

/* Section headings — white against the dark overlay */
#services h2           { color: #ffffff; -webkit-text-stroke: 1px var(--color-secondary); font-weight: 800; }
#services > .section-label { color: #ffffff; letter-spacing: 4px; font-weight: 700; }
#services > h4         { color: #ffffff; font-weight: 600; }
#services .section-divider { background-color: var(--color-secondary); opacity: 0.7; }

/* Sections flow into as many columns as fit: three at tablet width, five at
   the widest the grid is allowed to get, so a sixth section wraps to a second
   row. auto-fit collapses the spare tracks, so today's three cards still span
   the full row instead of huddling at the left. */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 24px;
  max-width: 1340px;
  margin: 0 auto;
}

/* Light frosted-glass cards — warm cream tint, dark text inside */
.menu-card {
  background: rgba(255, 248, 235, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-lg);
  padding: 36px 28px 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  height: 100%;
  text-align: center;
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease);
}

.menu-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 248, 235, 0.92);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45);
}

.menu-card--swallows { border-top: 4px solid var(--color-primary); }
.menu-card--soups    { border-top: 4px solid var(--color-secondary); }
.menu-card--proteins { border-top: 4px solid var(--color-accent); }

.menu-card ul li { border-bottom-color: rgba(26, 10, 0, 0.12); }

.menu-icon-lg {
  font-size: 38px;
  display: block;
  margin-bottom: 14px;
}

.menu-card h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 22px;
}

/* Card headings use brand accent colors — readable on light card bg */
.menu-card--swallows h4 { color: var(--color-primary-dark); }
.menu-card--soups    h4 { color: var(--color-secondary-dark); }
.menu-card--proteins h4 { color: var(--color-accent); }

.menu-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  /* Flex only so off-today items can sink below the served ones without
     reordering the DOM, which crawlers and screen readers still read in
     the menu's own display order. */
  display: flex;
  flex-direction: column;
}

.menu-card ul li {
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--text-body);
  font-size: 14px;
}

/* No divider under whichever item ends the list as rendered. Off-today items
   sort last (see the `order` rule below), so that is the last off item when
   the card has any, and the last item outright when it doesn't. */
.menu-card ul li.menu-item--off:not(:has(~ li.menu-item--off)),
.menu-card ul:not(:has(li.menu-item--off)) li:last-child {
  border-bottom: none;
}

/* The bullet hangs off the name, not the row. As a flex item of its own it
   got stranded on an empty line as soon as a narrow card made the name wrap. */
.menu-item__name::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
}

.menu-card--swallows .menu-item__name::before { background-color: var(--color-primary); }
.menu-card--soups    .menu-item__name::before { background-color: var(--color-secondary); }
.menu-card--proteins .menu-item__name::before { background-color: var(--color-accent); }

/* Not served today — still listed, dimmed and tagged with its return day. */
.menu-card ul li.menu-item--off .menu-item__name {
  color: var(--text-muted);
  opacity: 0.7;
}

.menu-card ul li.menu-item--off .menu-item__name::before {
  background-color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--text-muted);
  opacity: 0.8;
}

.menu-item__name {
  display: block;
  /* Hanging indent, so wrapped lines line up under the text not the bullet. */
  padding-left: 17px;
  text-indent: -17px;
}

/* Sits on its own line under the name, aligned to the text rather than the
   bullet. Left-aligned so a column of pills reads down the card cleanly. */
.menu-item__tag {
  display: inline-block;
  margin: 5px 0 1px 17px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(139, 99, 71, 0.15);
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.menu-card ul li.menu-item--off { order: 1; }

/* ===========================
   GALLERY / FOOD SECTION
   =========================== */
#portfolio { background-color: var(--color-surface); }
#portfolio h2 { color: var(--color-primary); }

/* Filmstrip gallery */
.gallery-strip {
  margin: 32px -56px 48px;
  overflow: hidden;
  position: relative;
}

.gallery-strip::before,
.gallery-strip::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}

.gallery-strip::before {
  left: 0;
  background: linear-gradient(to right, var(--color-surface) 0%, transparent 100%);
}

.gallery-strip::after {
  right: 0;
  background: linear-gradient(to left, var(--color-surface) 0%, transparent 100%);
}

.gallery-track {
  display: flex;
  gap: 18px;
  width: max-content;
  padding: 8px 0 12px;
  animation: gallery-scroll 36s linear infinite;
  will-change: transform;
}

.gallery-track:hover { animation-play-state: paused; }

@keyframes gallery-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.gallery-item {
  position: relative;
  width: 290px;
  height: 340px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.gallery-item:hover img { transform: scale(1.07); }

.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 48px 20px 22px;
  background: linear-gradient(to top, rgba(26,10,0,0.88) 0%, transparent 100%);
  transform: translateY(100%);
  transition: transform 0.32s ease;
}

.gallery-item:hover .gallery-caption { transform: translateY(0); }

.gallery-caption strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 5px;
}

.gallery-caption p {
  font-size: 13px;
  color: rgba(255,248,239,0.85);
  margin: 0;
  line-height: 1.5;
}

/* ===========================
   TESTIMONIALS
   =========================== */
#myCarousel {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 0 60px;
}

/* Stack all items in the same grid cell so the container's height is
   intrinsically the height of the tallest item — eliminates the layout
   shift that occurs when switching between testimonials of different lengths. */
#myCarousel .carousel-inner {
  display: grid;
}

#myCarousel .carousel-inner > .item {
  grid-column: 1;
  grid-row: 1;
  display: block !important;
  position: relative !important;
  left: 0 !important;
  width: auto !important;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.45s ease-in-out !important;
}

#myCarousel .carousel-inner > .item.active {
  visibility: visible;
  opacity: 1;
}

.item h4 {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.75;
  font-weight: 400;
  font-style: italic;
  color: var(--text-dark);
  margin: 20px 70px 20px 60px;
  position: relative;
}

.item h4::before {
  content: '\201C';
  font-size: 88px;
  color: var(--color-secondary);
  position: absolute;
  top: -16px;
  left: -44px;
  line-height: 1;
  font-family: Georgia, serif;
  opacity: 0.9;
}

.item span {
  font-style: normal;
  display: block;
  margin-top: 18px;
  font-size: 11px;
  font-family: var(--font-heading);
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 700;
}

.carousel-control.right,
.carousel-control.left {
  background-image: none;
  color: var(--color-primary);
  width: 44px;
}

.carousel-indicators li       { border-color: var(--color-primary); }
.carousel-indicators li.active { background-color: var(--color-primary); }

/* ===========================
   CATERING / PRICING SECTION
   =========================== */
#pricing { background-color: var(--color-cream); }
#pricing h2 { color: var(--color-primary); }

.package-col { position: relative; }

.panel {
  position: relative;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--ease), box-shadow var(--ease);
}

.panel:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

/* ---------------------------
   Featured package
   Driven by is_featured in the admin, not by position, so moving the badge
   in the admin moves the whole treatment with it.
   --------------------------- */
.panel--featured {
  transform: scale(1.045);
  box-shadow: var(--shadow-lg), 0 0 0 2px var(--color-gold);
  z-index: 2;
}
.panel--featured:hover {
  transform: scale(1.045) translateY(-8px);
}

/* The breathing halo is its own layer behind the card, so the animation runs
   on opacity alone — animating box-shadow would repaint every frame. */
.package-col--featured::before {
  content: "";
  position: absolute;
  inset: 12px 18px;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 44px rgba(232, 192, 58, 0.55);
  opacity: 0;
  animation: featured-glow 3.6s var(--ease-enter) infinite;
  pointer-events: none;
}
.package-col--featured:hover::before {
  animation-play-state: paused;
  opacity: 1;
}

@keyframes featured-glow {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

/* Corner ribbon. The panel already clips its overflow, so a rotated bar
   positioned past the corner reads as a folded band. */
.package-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  /* The panel clips this, not the box above — clipping it here would cut the
     band mid-air and leave a notch instead of a clean edge at the card side. */
  pointer-events: none;
  z-index: 3;
}
.package-ribbon span {
  position: absolute;
  top: 26px;
  right: -46px;
  width: 190px;
  overflow: hidden;
  padding: 7px 0;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-secondary) 100%);
  color: var(--color-dark);
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 2px 8px rgba(26, 10, 0, 0.35);
}
/* A highlight travels the length of the band every few seconds. */
.package-ribbon span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 20%, rgba(255, 255, 255, 0.75) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: ribbon-sheen 4.5s var(--ease-enter) 1.2s infinite;
}

@keyframes ribbon-sheen {
  0%        { transform: translateX(-100%); }
  35%, 100% { transform: translateX(100%); }
}

.panel--featured .panel-heading {
  background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-2) 100%) !important;
  position: relative;
  overflow: hidden;
}

/* Gold ticks, and the list settles in one row at a time. */
.panel--featured .panel-body p strong { color: var(--color-secondary-dark); }
.panel--featured .panel-body p {
  animation: feature-settle 0.5s var(--ease-enter) backwards;
  animation-delay: calc(var(--feature-index, 0) * 90ms + 200ms);
}

@keyframes feature-settle {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}

.panel--featured .panel-footer .btn {
  background: linear-gradient(135deg, var(--color-secondary-dark) 0%, var(--color-gold) 100%);
  color: var(--color-dark);
}
.panel--featured .panel-footer .btn:hover {
  background: linear-gradient(135deg, var(--color-secondary-dark) 0%, var(--color-gold) 100%);
}

.panel-heading {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%) !important;
  color: var(--color-cream) !important;
  padding: 28px 25px;
  border: none;
  border-top-left-radius:     0 !important;
  border-top-right-radius:    0 !important;
  border-bottom-left-radius:  0 !important;
  border-bottom-right-radius: 0 !important;
}

.panel-heading h1 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  margin: 0;
  color: var(--color-cream);
}

.panel-body {
  background: var(--color-white);
  padding: 24px 28px;
}

.panel-body p {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--text-body);
  margin: 0;
  font-size: 14px;
}

.panel-body p:last-child { border-bottom: none; }

.panel-footer {
  background-color: var(--color-white) !important;
  border-top: 1px solid var(--color-border) !important;
  padding: 22px 24px 28px;
}

.panel-footer h3 {
  font-size: 26px;
  color: var(--text-dark);
  font-family: var(--font-display);
  margin-bottom: 4px;
}

.panel-footer h4 {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 0;
}

.panel-footer .btn {
  margin: 18px 0 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: var(--color-cream);
  border: none;
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 3px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: var(--radius);
  width: 100%;
  transition: opacity var(--ease);
}

.panel-footer .btn:hover {
  opacity: 0.84;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: var(--color-cream);
  border: none;
}

/* ===========================
   REACH OUT / REVIEWS SECTIONS
   =========================== */

/* Shared split layout */
.contact-split {
  display: flex;
  gap: 72px;
  align-items: flex-start;
  max-width: 1060px;
  margin: 0 auto;
}

.contact-info-col { flex: 0 0 320px; }
.contact-form-col { flex: 1; }

.contact-intro {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 32px;
}

.contact-details { display: flex; flex-direction: column; gap: 14px; }

.contact-detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.contact-detail-item i {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.contact-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  gap: 12px;
}

.form-status-msg {
  font-size: 13px;
  font-family: var(--font-heading);
}

.contact-submit-btn {
  background-color: var(--color-secondary);
  border: none;
  color: var(--color-dark);
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 3px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}

.contact-submit-btn:hover {
  background-color: var(--color-secondary-dark);
}

/* Reach Out section — dark */
.contact-section {
  background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-2) 100%);
}

.contact-section h2       { color: var(--color-gold); }
.contact-section .contact-intro,
.contact-section .contact-detail-item { color: var(--color-cream); }
.contact-section .contact-detail-item i { color: var(--color-secondary); }
.contact-section .section-label { color: var(--color-secondary); }

/* Reviews section — warm surface */
.reviews-section {
  background-color: var(--color-surface);
}

.reviews-section h2          { color: var(--color-primary); }
.reviews-section .section-label { color: var(--color-secondary); }
.reviews-section .contact-intro { color: var(--text-body); }

.review-quote {
  border-left: 3px solid var(--color-secondary);
  padding: 12px 20px;
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
  background: rgba(245,155,26,0.07);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Shared form controls */
.form-control {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  height: 46px;
  font-size: 14px;
  color: var(--text-dark);
  background-color: rgba(255,255,255,0.96);
  transition: border-color var(--ease), box-shadow var(--ease);
}

.form-control:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(245,155,26,0.18);
  outline: none;
}

textarea.form-control {
  height: auto;
  resize: vertical;
}

/* Form intro label (legacy — kept for any remaining uses) */
.form-intro-label {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-secondary);
  font-weight: 700;
  margin-bottom: 18px;
}

/* Star rating */
.star-rating-wrap {
  margin-bottom: 16px;
}

.star-rating-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,248,239,0.55);
  font-weight: 700;
  margin-bottom: 8px;
}

.star-optional {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,248,239,0.35);
  font-size: 10px;
}

.star-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
}

.star-rating input[type="radio"] { display: none; }

.star-rating label {
  font-size: 30px;
  color: rgba(255,248,239,0.20);
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
  line-height: 1;
  user-select: none;
}

/* Hover preview — reset checked highlight, apply hover fill */
.star-rating:not(.is-selected):hover input:checked ~ label { color: rgba(255,248,239,0.20); }
.star-rating:not(.is-selected) label:hover,
.star-rating:not(.is-selected) label:hover ~ label         { color: var(--color-secondary); }

/* Checked state */
.star-rating input:checked ~ label              { color: var(--color-secondary); }

/* Scale the star under cursor — always active */
.star-rating label:hover                        { transform: scale(1.18); }

/* Reviews section — override star colours for light background */
.reviews-section .star-rating-label            { color: var(--text-muted); }
.reviews-section .star-optional                { color: var(--color-border); }
.reviews-section .star-rating label            { color: var(--color-border); }
.reviews-section .star-rating:not(.is-selected):hover input:checked ~ label { color: var(--color-border); }

/* ===========================
   LOCATIONS / MAP SECTION
   =========================== */
.locations-section {
  background-color: var(--color-dark);
  background-image: url("../images/label-on-chair.66f59983a00c.jpg");
  background-size: cover;
  background-position: center 50%;
  background-attachment: fixed;
  position: relative;
}

.locations-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 5, 0, 0.97) 0%,
    rgba(10, 5, 0, 0.93) 28%,
    rgba(10, 5, 0, 0.80) 50%,
    rgba(10, 5, 0, 0.93) 100%
  );
}

.locations-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 38%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.90) 0%, transparent 100%);
  pointer-events: none;
}

.locations-section > * { position: relative; }

.locations-section h2              { color: #ffffff; -webkit-text-stroke: 1px var(--color-gold); font-weight: 800; }
.locations-section .section-label  { color: #ffffff; font-weight: 700; }
.locations-section .section-divider { background-color: var(--color-secondary); opacity: 0.7; }

.locations-subtitle {
  color: #ffffff;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 48px;
  margin-top: -16px;
}

.locations-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.location-col {
  padding: 0 12px;
  margin-bottom: 32px;
}

.location-card {
  background: rgba(255, 248, 235, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.location-card-header {
  padding: 22px 24px 18px;
  background: rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(26, 10, 0, 0.10);
}

.location-card-header h3 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--color-dark);
  margin: 6px 0 4px;
}

.location-card-header p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  font-family: var(--font-heading);
  letter-spacing: 1px;
}

.location-badge {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-cream);
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
}

.location-badge--alt {
  background: var(--color-accent);
}

.location-map-wrap {
  flex: 1;
  min-height: 320px;
}

.location-map-wrap iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
}

@media screen and (max-width: 768px) {
  .locations-row { margin: 0; }
  .location-col { padding: 0; width: 100%; }
  .location-card { border-radius: 12px; }
  .location-map-wrap,
  .location-map-wrap iframe { min-height: 220px; }
}

/* ===========================
   SOCIAL LINKS
   =========================== */

/* Hero socials */
.hero-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
}

.hero-socials-label {
  font-family: var(--font-heading);
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255,248,239,0.50);
  font-weight: 700;
}

.hero-socials-icons {
  display: flex;
  gap: 10px;
}

.hero-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,248,239,0.75);
  font-size: 15px;
  text-decoration: none;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(4px);
  transition: border-color var(--ease), color var(--ease), background-color var(--ease);
}

.hero-social-link:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
  background: rgba(245,155,26,0.14);
  text-decoration: none;
}

/* Footer socials */
.footer-socials {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(245,155,26,0.32);
  color: var(--color-secondary);
  font-size: 16px;
  text-decoration: none;
  transition: border-color var(--ease), color var(--ease), background-color var(--ease);
}

.footer-social-link:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  background: rgba(232,192,58,0.10);
  text-decoration: none;
}

/* ===========================
   FOOTER
   =========================== */
footer.container-fluid {
  background-color: var(--color-dark);
  padding: 36px 50px 28px;
  border-top: 3px solid var(--color-primary);
}

.footer-top-link {
  display: inline-block;
  margin-bottom: 10px;
}

footer .glyphicon {
  font-size: 20px;
  color: var(--color-secondary);
  display: block;
}

footer a {
  color: var(--color-secondary);
  text-decoration: none;
  transition: color var(--ease);
}

footer a:hover { color: var(--color-gold); }

footer p {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 6px;
}

/* ===========================
   ANIMATIONS
   =========================== */
.slideanim { visibility: hidden; }

.slide {
  animation-name: slide;
  -webkit-animation-name: slide;
  animation-duration: 0.75s;
  -webkit-animation-duration: 0.75s;
  animation-fill-mode: both;
  visibility: visible;
}

@keyframes slide {
  0%   { opacity: 0; transform: translateY(48px); }
  100% { opacity: 1; transform: translateY(0); }
}

@-webkit-keyframes slide {
  0%   { opacity: 0; -webkit-transform: translateY(48px); }
  100% { opacity: 1; -webkit-transform: translateY(0); }
}

/* ===========================
   RESPONSIVE
   =========================== */
@media screen and (max-width: 991px) {
  .container-fluid { padding: 60px 32px; }
  .hero-content h1 { font-size: 56px; }
  .founder-img { height: auto; max-width: 100%; }
  .gallery-strip { margin: 28px -32px 40px; }
  .contact-split { gap: 48px; }
  .contact-info-col { flex: 0 0 260px; }
}

@media screen and (max-width: 820px) {
  /* Grid: text rows span both columns, then icons + form share the last row */
  .contact-split {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 20px;
    row-gap: 0;
  }

  /* Dissolve info-col box so its children become direct grid items */
  .contact-info-col { display: contents; }

  /* Section label and divider are surplus on mobile */
  .contact-info-col .section-label   { display: none; }
  .contact-info-col .section-divider { display: none; }
  .contact-info-col .review-quote    { display: none; }

  /* Heading and intro span the full width above the icon/form row */
  .contact-info-col h2 {
    grid-column: 1 / -1;
    margin-bottom: 10px;
  }

  .contact-info-col .contact-intro {
    grid-column: 1 / -1;
    font-size: 14px;
    margin-bottom: 20px;
  }

  /* 40px icon strip — sits in the left column beside the form */
  .contact-info-col .contact-details {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-top: 4px;
  }

  .contact-detail-item      { justify-content: center; gap: 0; }
  .contact-detail-item span { display: none; }
  .contact-detail-item i    { font-size: 18px; width: auto; }

  /* Contact section: icons+text row above form, form full width */
  .contact-section .contact-info-col .contact-details {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 24px;
    padding-top: 0;
    margin-bottom: 20px;
    align-items: center;
  }

  .contact-section .contact-detail-item {
    justify-content: flex-start;
    gap: 8px;
  }

  .contact-section .contact-detail-item span { display: inline; }
  .contact-section .contact-detail-item i    { font-size: 16px; }

  .contact-section .contact-form-col { grid-column: 1 / -1; }

  /* Reviews section: no icon strip, form spans full width */
  .reviews-section .contact-form-col { grid-column: 1 / -1; }

  /* Full-width submit button on mobile */
  .contact-form-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .contact-submit-btn {
    align-self: stretch;
    text-align: center;
  }
}

@media screen and (max-width: 768px) {
  /* Swap static image for video on mobile */
  .hero-video { display: block; }
  .jumbotron  { background-image: none; background-color: var(--color-dark); }

  /* Hidden state for the supporting hero text — scoped to mobile so a phone
     rotated to landscape (>768px, where the video switches off) can never be
     left with an empty hero. Slow and accelerating, since it's ambient.
     visibility flips only after the fade finishes, which keeps the social
     links out of the tab order while they're invisible. */
  .hero-content--faded .hero-chrome {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
      opacity    600ms var(--ease-exit) var(--exit-delay, 0ms),
      transform  600ms var(--ease-exit) var(--exit-delay, 0ms),
      visibility 0s    linear           calc(600ms + var(--exit-delay, 0ms));
  }

  .container-fluid { padding: 52px 20px; }
  .hero-content    { padding: 110px 20px 70px; }
  .hero-content h1 { font-size: 42px; }
  .hero-tagline    { font-size: 15px; }

  .col-sm-4   { text-align: center; margin: 12px 0; }
  .menu-grid  { grid-template-columns: 1fr; }


  #services,
  .locations-section {
    background-image: url("../images/label-on-chair-full.36f46299969b.jpg");
    background-attachment: scroll;
  }
  .gallery-strip { margin: 24px -20px 32px; }
  .gallery-item  { width: 240px; height: 280px; }

  .panel--featured        { transform: none; }
  .panel--featured:hover  { transform: translateY(-8px); }
  .package-col--featured::before { animation: none; opacity: 0.5; }

  .btn-lg { width: 100%; margin-bottom: 28px; }

  .item h4        { margin: 20px 32px 20px 44px; font-size: 16px; }
  .item h4::before { left: -28px; font-size: 64px; top: -12px; }

  footer.container-fluid { padding: 28px 20px; }

  .founder-img { height: 360px; max-width: 100%; }
}

@media screen and (max-width: 480px) {
  .hero-content h1 { font-size: 34px; }
  .logo            { font-size: 100px; }
}

/* The hero fade runs on a timer rather than on request, so honour reduced
   motion: keep the crossfade (opacity alone is vestibular-safe) but drop the
   drift and the stagger. Must stay after the rules above to win on source order. */
@media (prefers-reduced-motion: reduce) {
  .hero-chrome,
  .hero-content--faded .hero-chrome {
    transform: none;
    --exit-delay: 0ms;
    --enter-delay: 0ms;
  }

  /* The featured card stays visually distinct — ribbon, gold ring, scale —
     but nothing on it loops. */
  .package-col--featured::before {
    animation: none;
    opacity: 0.55;
  }
  .package-ribbon span::after { animation: none; }
  .panel--featured .panel-body p {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ===========================
   H1 DUAL-NAME (hero)
   =========================== */
.h1-en {
  display: block;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 12px;
  line-height: 1;
}

/* ===========================
   FAQ SECTION
   =========================== */
.faq-section {
  background-color: var(--color-cream);
  border-top: 1px solid var(--color-border);
}

.faq-inner {
  max-width: 1060px;
  margin: 0 auto;
}

.faq-section h2 { color: var(--color-primary); }

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 48px;
  margin-top: 8px;
}

.faq-item {
  border-left: 3px solid var(--color-secondary);
  padding-left: 18px;
}

.faq-q {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dark);
  margin: 0 0 8px;
}

.faq-a {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.7;
  margin: 0;
}

.footer-copy {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 2px;
}

.footer-credit {
  font-size: 12px;
  color: var(--color-medium);
  margin: 0;
  opacity: 0.7;
}

@media screen and (max-width: 768px) {
  .faq-grid { grid-template-columns: 1fr; gap: 22px; }
  .h1-en { font-size: 11px; letter-spacing: 4px; }
}

.contact-form-hint {
    margin: -6px 0 14px;
    font-size: 13px;
    color: #8B6347;
}