/* ==========================================================================
   Imperial Salon & Spa — site styles
   Palette: Tiffany #7FA9A5 · Aqua #91B5B0 · Ivory #F7F3EB · Cream #EDE5D8 · Beige #D3C5B2 · Taupe #A99B8A · Champagne #B99A5E · Charcoal #3F403D
   Fonts:   Lato (body) · Playfair Display (headings) · Allura (script accents)
   ========================================================================== */
:root {
  /* Brand palette (client-supplied) */
  --tiffany: #7FA9A5;      /* Grayish Tiffany Blue */
  --aqua: #91B5B0;         /* Dusty Aqua */
  --ivory: #F7F3EB;        /* Warm Ivory */
  --cream: #EDE5D8;        /* Cream */
  --beige: #D3C5B2;        /* Natural Beige */
  --taupe: #A99B8A;        /* Warm Taupe */
  --champagne: #B99A5E;    /* Champagne Gold */
  --charcoal: #3F403D;     /* Deep Charcoal */
  /* Role tokens used throughout the stylesheet */
  --gold: var(--champagne);
  --gold-light: var(--tiffany);
  --gold-pale: var(--aqua);
  --ink: var(--charcoal);
  --grey: var(--taupe);
  --paper: var(--ivory);
  --font-body: "Lato", Arial, sans-serif;
  --font-head: "Playfair Display", Georgia, serif;
  --font-script: "Allura", cursive;
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--charcoal);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--charcoal); text-decoration: underline; text-decoration-color: var(--tiffany); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--charcoal); text-decoration-color: var(--charcoal); }
img { max-width: 100%; height: auto; }
hr { margin: 36px 0; border: 0; border-top: 1px solid var(--beige); opacity: 1; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 14px; font-weight: 400; line-height: 1.25; }
h1 { font-family: var(--font-head); font-size: 34px; color: var(--charcoal); }
h2 { font-family: var(--font-head); font-size: 2em; color: var(--charcoal); font-weight: 500; letter-spacing: 0; }
h2 strong { font-weight: 400; }
h3 { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--charcoal); margin-top: 34px; padding-left: 14px; border-left: 2px solid var(--tiffany); }
h3 strong, h3 a { font-weight: 700; color: var(--charcoal); text-decoration: none; }
h4 { font-family: var(--font-head); font-size: 1.15em; }
p  { margin: 0 0 18px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--charcoal); margin-bottom: 16px; }
.script { font-family: var(--font-script); font-weight: 400; text-transform: none; letter-spacing: 0; }
.nobr { white-space: nowrap; }
address { font-style: normal; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Header ---------- */
#header-wrapper { background: var(--ivory); color: var(--charcoal); }
#header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 30px 10px 22px; }
#main-logo { display: block; width: 250px; max-width: 100%; }
#header .tagline { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 3.5px; text-transform: uppercase; color: var(--charcoal); margin: 10px 0 0 4px; line-height: 1; }
#header-contact { text-align: right; }
#header-contact .header-phone { font-size: 17px; font-weight: 700; margin: 0; line-height: 1.9; letter-spacing: .3px; }
#header-contact .header-phone a { color: var(--charcoal); text-decoration: none; }
#header-contact .header-phone small { font-size: 11px; font-weight: 400; letter-spacing: 2.5px; text-transform: uppercase; color: var(--charcoal); margin-right: 6px; }
.social-links { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 10px; }
.social-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--charcoal); border-radius: 50%; color: var(--charcoal); font-size: 14px; text-decoration: none; transition: all .25s; }
.social-btn:hover { background: var(--charcoal); color: var(--ivory); text-decoration: none; }

/* ---------- Navigation ---------- */
#nav-wrapper { position: sticky; top: 0; z-index: 1001; background: var(--ivory); border-top: 1px solid var(--beige); border-bottom: 1px solid var(--beige); }
#nav-wrapper .nav-inner { display: flex; align-items: center; justify-content: center; padding: 0 10px; }
#nav-main { display: none; list-style: none; margin: 0; padding: 0; }
#nav-main > li { position: relative; }
#nav-main > li > a, #nav-main > li > button {
  display: flex; align-items: center; gap: 6px; padding: 20px 18px; margin: 0; border: 0; background: none;
  font: 700 12.5px/1 var(--font-body); letter-spacing: 2.5px; text-transform: uppercase; color: var(--charcoal); cursor: pointer; transition: color .25s; position: relative; text-decoration: none;
}
#nav-main > li > a::before, #nav-main > li > button::before { content: ""; position: absolute; left: 18px; right: 18px; bottom: 12px; height: 2px; background: var(--tiffany); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
#nav-main > li:hover > a::before, #nav-main > li:hover > button::before, #nav-main > li.open > button::before { transform: scaleX(1); }
#nav-main > li > a:hover, #nav-main > li > button:hover, #nav-main > li.open > button { background: none; color: var(--charcoal); text-decoration: none; }
#nav-main .book-now { color: var(--ivory) !important; background: var(--charcoal); margin: 10px 0 10px 12px; padding: 11px 22px; border-radius: 999px; }
#nav-main .book-now::before { display: none; }
#nav-main .book-now:hover { background: var(--tiffany); }
#nav-main .caret::after { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); margin-left: 6px; }
#nav-main ul.sub { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 250px; margin: 0; padding: 12px 0; list-style: none; background: var(--ivory); border: 1px solid var(--beige); box-shadow: 0 18px 40px rgba(63,64,61,.10); }
#nav-main li.open > ul.sub { display: block; }
#nav-main ul.sub a { display: block; padding: 10px 24px; color: var(--charcoal); font-size: 14px; font-weight: 400; letter-spacing: .5px; text-decoration: none; }
#nav-main ul.sub a:hover { background: var(--cream); color: var(--charcoal); }
#nav-sm-bar { display: flex; width: 100%; justify-content: space-between; align-items: center; }
#nav-sm-bar a, #nav-sm-bar button { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border: 0; background: none; color: var(--charcoal); font-size: 18px; cursor: pointer; }
#nav-sm-bar .sm-book { width: auto; padding: 0 18px; height: 40px; margin: 7px 0; border-radius: 999px; background: var(--charcoal); font: 700 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: 2.5px; color: var(--ivory) !important; text-decoration: none; }
@media (min-width: 1200px) {
  #nav-main { display: flex; }
  #nav-sm-bar { display: none; }
}

/* Off-canvas mobile menu */
#nav-overlay { position: fixed; inset: 0; background: rgba(63,64,61,.5); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 1100; }
#nav-sm { position: fixed; top: 0; left: 0; bottom: 0; width: min(400px, 86vw); background: var(--ivory); color: var(--charcoal); overflow: auto; transform: translateX(-105%); transition: transform .4s; z-index: 1101; border-right: 1px solid var(--beige); }
body.menu-open #nav-overlay { opacity: 1; pointer-events: auto; }
body.menu-open #nav-sm { transform: none; }
#nav-sm .close-menu { position: sticky; top: 0; display: flex; justify-content: flex-end; padding: 12px; background: var(--ivory); }
#nav-sm .close-menu button { border: 0; background: none; color: var(--charcoal); font-size: 26px; cursor: pointer; }
#nav-sm ul { list-style: none; margin: 0; padding: 0 0 40px; }
#nav-sm > ul > li > a, #nav-sm > ul > li > button { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 16px 28px; border: 0; border-bottom: 1px solid var(--cream); background: none; color: var(--charcoal); font: 700 13px/1 var(--font-body); text-transform: uppercase; letter-spacing: 2.5px; text-align: left; cursor: pointer; text-decoration: none; }
#nav-sm ul.sub { display: none; background: var(--cream); }
#nav-sm li.open > ul.sub { display: block; }
#nav-sm ul.sub a { display: block; padding: 12px 28px 12px 44px; color: var(--charcoal); font-size: 15px; border-bottom: 1px solid var(--ivory); text-decoration: none; }
#nav-sm .book-now { color: var(--charcoal); }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--charcoal); color: var(--ivory); overflow: hidden; }
.hero .hero-img { position: relative; height: clamp(360px, 60vw, 680px); }
.hero .hero-img img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.hero .hero-content { position: absolute; inset: 0; display: flex; align-items: center; background: linear-gradient(90deg, rgba(63,64,61,.72) 0%, rgba(63,64,61,.35) 55%, rgba(63,64,61,.1) 100%); }
.hero .hero-content .inner { max-width: 1320px; width: 100%; margin: 0 auto; padding: 0 48px; }
.hero .eyebrow { color: var(--ivory); }
.hero h2 em.script { display: block; font-style: normal; font-size: 1.3em; color: var(--ivory); margin-top: 2px; }
.hero h2 { font-family: var(--font-head); font-weight: 500; font-size: clamp(40px, 5.2vw, 72px); color: var(--ivory); margin-bottom: 28px; line-height: 1.05; letter-spacing: -.5px; max-width: 22ch; }
.btn-outline-white { display: inline-block; padding: 16px 38px; border: 1.5px solid var(--ivory); border-radius: 999px; color: var(--ivory); font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; text-decoration: none; transition: all .3s; }
.btn-outline-white:hover { background: var(--ivory); color: var(--charcoal); text-decoration: none; }
.hero-link { color: var(--ivory); font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; text-decoration: none; border-bottom: 1.5px solid var(--ivory); padding-bottom: 5px; }
.hero-link:hover { color: var(--ivory); border-color: var(--tiffany); }

/* ---------- Photo tiles ---------- */
.photo-title-boxes { position: relative; z-index: 4; padding: 10px 0 0; }
.photo-title-boxes .row { --bs-gutter-x: 2rem; --bs-gutter-y: 2.25rem; }
.photo-title-boxes .btn-wrap { position: relative; display: block; overflow: hidden; background: transparent; }
.photo-title-boxes .btn-wrap img { display: block; width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: 14px; transition: transform .8s ease, opacity .4s; }
.photo-title-boxes .btn-wrap:hover img { transform: scale(1.03); opacity: .92; }
.photo-title-boxes .btn-title { position: static; margin: 14px 0 0; padding: 0; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--charcoal); background: none; border: 0; }
.photo-title-boxes .btn-wrap:hover .btn-title { color: var(--charcoal); text-decoration: underline; text-decoration-color: var(--tiffany); text-underline-offset: 6px; }
.photo-title-boxes .btn-wrap { text-decoration: none; }

/* ---------- Main content ---------- */
#content-area { background: var(--ivory); }
#content-area .main-content { padding: 64px 0; background: var(--ivory); color: var(--charcoal); }
#content-area .main-content + .main-content { border-top: 1px solid var(--beige); }
#content-area .main-content .container { max-width: 1140px; }
.title-underlined { display: block; margin: 0 0 34px; padding-bottom: 18px; border-bottom: 1px solid var(--beige); font-family: var(--font-head); font-weight: 500; color: var(--charcoal); }
h1.title-underlined { font-size: 2em; }
.main-content h2 a { color: var(--charcoal); text-decoration: none; }
.main-content .lightbox a, .main-content a:has(> img), .swiper a { text-decoration: none; }
.main-content h4 a, .main-content h4 span { color: var(--charcoal) !important; }

.inset, .lightbox a.right, .lightbox a.left { display: block; margin: 0 0 24px; }
a.right, img.right, .inset.right { float: right; margin-left: 40px; max-width: 44%; }
a.left, img.left, .inset.left { float: left; margin-right: 40px; max-width: 44%; }
.inset-center, img.inset-center { display: block; margin: 0 auto 24px; max-width: 100%; }
.border { border: 0 !important; padding: 0; background: none; border-radius: 0; }
@media (max-width: 767px) {
  a.right, img.right, .inset.right, a.left, img.left, .inset.left { float: none; margin: 0 auto 24px; max-width: 100%; }
}
.clear, .clearfix::after { clear: both; display: block; content: ""; }
.main-content hr.clear { clear: both; }
.main-content table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.main-content td, .main-content th { padding: 10px 12px; border-bottom: 1px solid var(--cream); vertical-align: top; }

/* Cards */
.image-card-article { margin-top: 10px; }
.image-card-article .row { --bs-gutter-x: 2rem; }
.image-card-article .trim { height: calc(100% - 32px); margin: 0 0 32px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--charcoal); overflow: hidden; box-shadow: none; transition: none; }
.image-card-article .trim:hover { transform: none; box-shadow: none; }
.image-card-article .trim > a img, .image-card-article .article-img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 14px; transition: opacity .3s; }
.image-card-article .trim > a:hover img { opacity: .9; }
.image-card-article .article-content { padding: 18px 0 8px; }
.image-card-article .article-title { font-family: var(--font-head); font-size: 1.25em !important; font-weight: 500; margin: 0 0 8px; color: var(--charcoal); }
.image-card-article .article-title a { color: var(--charcoal); text-decoration: none; }
.image-card-article .article-title a:hover { text-decoration: underline; text-decoration-color: var(--tiffany); }
.image-card-article .article-content p { font-size: .93em; margin-bottom: 12px; color: var(--charcoal); }
.image-card-article .article-details { background: none; color: var(--charcoal); padding: 0 0 10px; font-size: .85em; }
.image-card-article .article-details * { color: var(--charcoal); }
.image-card-article .read-more, .image-card-article .article-content > a:last-child { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--charcoal); text-decoration: none; border-bottom: 1.5px solid var(--tiffany); padding-bottom: 3px; }
.image-card-article .read-more:hover, .image-card-article .article-content > a:last-child:hover { border-color: var(--charcoal); }

.trim { margin: 30px 0; padding: 32px; border: 1px solid var(--beige); border-radius: 14px; background: var(--ivory); }
.title-bar-trim-combo .title-bar { display: flex; align-items: center; gap: 10px; padding: 14px 24px; background: var(--cream); color: var(--charcoal); border-radius: 14px 14px 0 0; }
.title-bar-trim-combo .title-bar i { display: none; }
.title-bar-trim-combo .title-bar h2 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; font-family: var(--font-body); color: var(--charcoal) !important; background: none !important; }
.title-bar-trim-combo .trim { margin-top: 0; border-radius: 0 0 14px 14px; }

/* Staff */
.staff-member { display: flex; gap: 40px; align-items: flex-start; padding: 40px 0; border-bottom: 1px solid var(--cream); }
.staff-member img { width: 180px; flex: 0 0 180px; border-radius: 14px; object-fit: cover; aspect-ratio: 3/4; }
.staff-member h3 { font-family: var(--font-head); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 1.35em; color: var(--charcoal); margin-top: 0; padding-left: 0; border-left: 0; }
@media (max-width: 575px) { .staff-member { flex-direction: column; align-items: center; text-align: center; } }

/* Galleries */
.gallery-carousel-wrap { margin: 0 0 30px; }
.gallery-carousel-wrap.right { float: right; width: 46%; margin-left: 40px; }
.gallery-carousel-wrap.left { float: left; width: 46%; margin-right: 40px; }
@media (max-width: 767px) { .gallery-carousel-wrap.right, .gallery-carousel-wrap.left { float: none; width: 100%; margin: 0 0 30px; } }
.gallery-top { border-radius: 14px; overflow: hidden; background: var(--cream); }
.gallery-top .swiper-slide img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.gallery-thumbs { margin-top: 8px; }
.gallery-thumbs .swiper-slide { opacity: .45; cursor: pointer; }
.gallery-thumbs .swiper-slide-thumb-active { opacity: 1; }
.gallery-thumbs .swiper-slide img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 6px; }
.swiper-button-prev, .swiper-button-next { color: var(--ivory); }
.swiper-button-prev::after, .swiper-button-next::after { font-size: 18px; }
.swiper-pagination-bullet-active { background: var(--tiffany); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 24px 0; }
.photo-grid a { display: block; overflow: hidden; background: var(--cream); border-radius: 12px; }
.photo-grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: opacity .3s; }
.photo-grid a:hover img { opacity: .9; }

/* Buttons / forms */
.btn-primary { --bs-btn-bg: var(--charcoal); --bs-btn-border-color: var(--charcoal); --bs-btn-color: var(--ivory); --bs-btn-hover-bg: var(--tiffany); --bs-btn-hover-border-color: var(--tiffany); --bs-btn-hover-color: var(--ivory); --bs-btn-active-bg: var(--tiffany); --bs-btn-active-border-color: var(--tiffany); --bs-btn-border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; padding: 14px 30px; }
.btn-gold { display: inline-block; padding: 15px 36px; border: 1.5px solid var(--charcoal); border-radius: 999px; background: var(--charcoal); color: var(--ivory); font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; text-decoration: none; transition: all .3s; }
.btn-gold:hover { background: var(--tiffany); border-color: var(--tiffany); color: var(--ivory); }
.text-link { font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--charcoal); text-decoration: none; border-bottom: 1.5px solid var(--tiffany); padding-bottom: 5px; }
.text-link:hover { border-color: var(--charcoal); }
.btn-info { --bs-btn-bg: transparent; --bs-btn-border-color: var(--charcoal); --bs-btn-color: var(--charcoal); --bs-btn-hover-bg: var(--charcoal); --bs-btn-hover-border-color: var(--charcoal); --bs-btn-hover-color: var(--ivory); --bs-btn-border-radius: 999px; letter-spacing: 2px; text-transform: uppercase; font-size: 11px; font-weight: 700; }
.btn-link { color: var(--charcoal) !important; letter-spacing: 1px; text-decoration: none; }
.form-control { color: var(--charcoal); border-color: var(--beige); border-radius: 10px; background: var(--ivory); }
.form-control:focus { border-color: var(--tiffany); box-shadow: none; background: var(--ivory); }
.form-floating > label { color: var(--charcoal); opacity: .75; }

/* Location chooser cards */
.location-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; margin: 24px 0; }
.location-card { border: 1px solid var(--beige); border-radius: 16px; padding: 34px 26px; text-align: center; background: var(--ivory); box-shadow: none; }
.location-card > i { display: none; }
.location-card h3 { font-family: var(--font-head); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 1.35em; color: var(--charcoal); margin: 0 0 10px; padding-left: 0; border-left: 0; }
.location-card p { color: var(--charcoal); font-size: .92em; }
.location-card .btn-gold { margin-top: 10px; }

/* Modal */
.imp-modal { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(63,64,61,.72); }
.imp-modal.open { display: flex; }
.imp-modal .dialog { position: relative; width: 100%; max-width: 660px; background: var(--ivory); color: var(--charcoal); border-radius: 20px; border-top: 0; padding: 44px 40px 36px; box-shadow: 0 30px 80px rgba(63,64,61,.4); animation: pop .3s ease-out; }
@keyframes pop { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.imp-modal .dialog h2 { margin-bottom: 6px; text-align: center; }
.imp-modal .dialog .sub { color: var(--charcoal); margin-bottom: 18px; text-align: center; font-size: .95em; }
.imp-modal .close { position: absolute; top: 10px; right: 16px; border: 0; background: none; font-size: 28px; line-height: 1; color: var(--charcoal); cursor: pointer; }
.imp-modal .close:hover { color: var(--charcoal); }
.imp-modal .location-cards { margin: 10px 0 0; }
.imp-modal .note { font-size: .85em; color: var(--charcoal); margin: 22px 0 0; text-align: center; }

/* ---------- Footer ---------- */
#footer-wrapper { background: var(--cream); color: var(--charcoal); border-top: 1px solid var(--beige); padding: 56px 0 80px; }
#footer-wrapper .photo-title-boxes { display: none; }
#footer-wrapper > .container > hr:first-of-type, #footer-wrapper > .container > br { display: none; }
#footer-wrapper a { color: var(--charcoal); text-decoration: none; }
#footer-wrapper a:hover { text-decoration: underline; text-decoration-color: var(--tiffany); text-underline-offset: 4px; }
#footer-wrapper hr { margin: 34px 0; border-top: 1px solid var(--beige); }
#footer-wrapper ul { list-style: none; padding: 0; margin: 0 0 20px; }
#footer-wrapper li { padding: 5px 0; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
#footer-wrapper .footer-logo img { width: 100%; max-width: 240px; }
#footer-wrapper .share { text-align: center; }
#footer-wrapper .social-links { justify-content: center; }
#footer-wrapper .social-btn { color: var(--charcoal); border-color: var(--charcoal); }
#footer-wrapper .contact-lines p { margin-bottom: 8px; font-size: 15px; letter-spacing: .3px; }
#footer-wrapper .legal { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--charcoal); }
#footer-wrapper .legal a { color: var(--charcoal); }

/* Floating Book Now (mobile) */
#float-book { position: fixed; right: 16px; bottom: 16px; z-index: 900; display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 999px; font-weight: 700; text-decoration: none; background: var(--charcoal); color: var(--ivory); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; box-shadow: 0 10px 30px rgba(63,64,61,.3); }
#float-book i { display: none; }
#float-book:hover { background: var(--tiffany); text-decoration: none; }
@media (min-width: 1200px) { #float-book { display: none; } }

/* Font Awesome pro aliases used in the original markup */
.fa-light, .fa-duotone, .fa-thin, .fa-sharp { font-family: "Font Awesome 6 Free"; font-weight: 900; }
.fa-regular.fa-sparkles, .fa-regular.fa-hand-sparkles, .fa-regular.fa-id-card, .fa-regular.fa-calendar { font-weight: 900; }
.fa-sparkles::before { content: "\f890"; }
.fa-hand-sparkles::before { content: "\e05d"; }
.fa-spray-can-sparkles::before { content: "\f5d0"; }
.fa-people-group::before { content: "\e533"; }
.fa-id-card::before { content: "\f2c2"; }
.fa-bag-shopping::before { content: "\f290"; }
.fa-clipboard-list-check::before { content: "\f46d"; }
.fa-arrow-circle-left::before { content: "\f0a8"; }
.fa-chevron-left::before { content: "\f053"; }
.fa-chevron-right::before { content: "\f054"; }
.fa-map-marker::before { content: "\f3c5"; }

@media print { #nav-wrapper, #float-book, .imp-modal { display: none !important; } }

/* readability: keep the muted palette colours out of running text */
.text-muted, .fw-light, .text-body-secondary, small, .small { color: var(--charcoal) !important; opacity: 1; }
.btn-link { text-decoration: none; font-weight: 700; }
.btn-link:hover { text-decoration: underline; }
#content-area img { border-radius: 14px; }

/* ---------- Home accordion ---------- */
.accordion-list { margin: 28px 0 10px; border-top: 1px solid var(--beige); }
.acc { border-bottom: 1px solid var(--beige); }
.acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px; font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--charcoal); transition: color .2s; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-right: 1.5px solid var(--charcoal); border-bottom: 1.5px solid var(--charcoal); transform: rotate(45deg); margin-right: 6px; transition: transform .25s; }
.acc[open] summary::after { transform: rotate(-135deg); }
.acc summary:hover { color: var(--tiffany); }
.acc[open] summary { color: var(--charcoal); }
.acc-body { padding: 0 4px 22px; max-width: 70ch; }
.acc-body p:last-child { margin-bottom: 0; }
.acc-body h4 { font-family: var(--font-body); font-size: 1em; font-weight: 700; margin: 0 0 6px; }
.acc-body h4 a { text-decoration: none; }

.brand-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 24px; }
.brand-list li { padding: 14px 18px; border: 1px solid var(--beige); border-radius: 12px; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-align: center; color: var(--charcoal); }
.lightbox a.right img, .lightbox a.left img { width: 100%; max-height: 460px; object-fit: cover; }