/* Ekhaya: charcoal first, signature orange second. 11 October 2026.
   Loaded after styles.css so the original layout stays independently editable. */
:root {
  --ink: #0c0b0a;
  --surface: #141211;
  --raised: #201915;
  --orange: #ff7426;
  --accent: #ff9556;
  --gold: var(--accent); /* Existing component accents inherit the orange palette. */
  --orange-edge: #ff742650;
  --orange-faint: #ff74261c;
}

/* Fine orange edges give the dark surfaces a consistent brand signature. */
.topline {
  height: 37px;
  border-top: 3px solid var(--orange);
  background: #15110f;
}
.site-header {
  border-bottom-color: #ff742638;
  box-shadow: 0 4px 30px #0003;
}
.site-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #ff792bb0 23%, #ff792b33 75%, transparent);
}
.brand-name { color: var(--accent); }
.more-nav > div { border-color: var(--orange-edge); }
.main-nav [aria-current=page] { text-decoration-thickness: 2px; }
.main-nav > a, .account-links a { text-underline-offset: 7px; }
.main-nav > a:hover, .account-links a:hover { text-decoration: underline; }
.eyebrow { color: var(--accent); }
.hero-kicker > span { height: 2px; background: var(--orange); }
.hero h1 em { color: var(--accent); }
.film-title em, .contact-photo-label em { color: var(--accent); }
.note-line { width: 2px; background: var(--orange); }

/* A liquid highlight moves across each button only on hover or focus. */
.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: #ff883c;
  border-radius: 3px;
  background: linear-gradient(115deg, #ff7426, #ff9750);
  color: #211107;
  box-shadow: 0 5px 24px #ff651c15, inset 0 1px 0 #ffc09166;
  transition: background .25s, border-color .25s, box-shadow .25s, transform .25s;
}
.button::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -100%;
  left: -75%;
  width: 70%;
  height: 300%;
  border-radius: 43% 57% 68% 32% / 52% 38% 62% 48%;
  background: linear-gradient(100deg, transparent, #ffdfac80, transparent);
  transform: rotate(24deg) translateX(-30%);
  transition: transform .9s cubic-bezier(.18,.7,.22,1);
  pointer-events: none;
}
.button:hover, .button:focus-visible {
  background: linear-gradient(115deg, #ff853a, #ffad70);
  border-color: #ffb075;
  box-shadow: 0 7px 28px #ff651c30, inset 0 1px 0 #ffcd9766;
}
.button:hover::before, .button:focus-visible::before { transform: rotate(24deg) translateX(370%); }
.button.outline {
  border-color: #ff8e506b;
  background: #15100c45;
  color: var(--text);
  box-shadow: inset 0 0 0 1px #ff742609;
}
.button.outline:hover, .button.outline:focus-visible {
  border-color: var(--accent);
  background: #ff742614;
  box-shadow: 0 5px 22px #ff651c12;
}
.text-link {
  border-bottom-color: var(--orange);
  transition: color .2s, border-color .2s;
}
.text-link:hover { color: var(--accent); border-bottom-color: #ffc095; }

/* Liquid ribbons are confined to section edges, behind the readable content. */
.motion-scene { position: relative; isolation: isolate; overflow: hidden; }
.page-intro > .wrap, .booking-band > .wrap { position: relative; z-index: 1; }
.liquid-ribbon {
  position: absolute;
  z-index: 0;
  inset: auto -3% -2px;
  height: 130px;
  overflow: hidden;
  pointer-events: none;
}
.liquid-ribbon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero .liquid-ribbon { z-index: -1; height: 120px; }
.liquid-layer {
  transform-box: view-box;
  transform-origin: 50% 100%;
  animation: liquid-drift 15s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.liquid-layer-front { animation-name: liquid-return; animation-duration: 20s; }
.liquid-layer-back { opacity: .72; }
.liquid-orbit {
  position: absolute;
  z-index: -1;
  top: 60px;
  right: -270px;
  width: 460px;
  height: 510px;
  border: 1px solid #ff9a5240;
  border-radius: 43% 57% 62% 38% / 38% 46% 54% 62%;
  box-shadow: inset 12px 0 42px #ff6a1810, -12px 0 40px #ff6a1809;
  pointer-events: none;
  animation: liquid-orbit 24s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.motion-scene.is-motion-visible .liquid-layer,
.motion-scene.is-motion-visible .liquid-orbit { animation-play-state: running; }
.hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 5% 100%, #ff631c13, transparent 52%);
}
.page-intro { border-bottom: 1px solid #ff74261c; margin-bottom: 16px; }
.page-intro .liquid-ribbon { opacity: .55; height: 90px; }
.booking-band {
  border-block-color: #ff742649;
  background: radial-gradient(ellipse at 88% 14%, #9a3f161f, transparent 60%), #191411;
}
.booking-band .liquid-ribbon { height: 180px; opacity: .8; }
.promise-strip {
  border-block: 1px solid #ff742637;
  background: #15120f;
}
.promise-strip i { color: var(--orange); }

/* Orange framing across the existing photographs, cards and content pages. */
.story-photo { outline: 1px solid #ff813960; outline-offset: 9px; }
.story-images { padding-left: 10px; padding-top: 10px; }
.story-caption {
  border-color: #ff813955;
  border-left: 3px solid var(--orange);
  background: #201710;
  box-shadow: 0 12px 35px #0005;
}
.treatments-section { border-block-color: #ff742628; }
.card-image, .gallery-item, .journal-image, .product-image {
  border: 1px solid #ff813930;
  border-radius: 3px;
  transition: border-color .3s, box-shadow .3s;
}
.card-image:hover, .gallery-item:hover, .journal-image:hover, .product-image:hover {
  border-color: #ff8139a6;
  box-shadow: 0 10px 35px #ff5d100e;
}
.card-image::after, .journal-image::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), #ffb37b88 65%, transparent);
  pointer-events: none;
}
.journal-image { position: relative; }
.image-label {
  color: #ffc59e;
  background: #21120cd9;
  border-left: 2px solid var(--orange);
}
.treatment-card { border-bottom: 1px solid #ff742637; padding-bottom: 24px; }
.gallery-item b { color: var(--accent); }
.film-play svg {
  color: var(--accent);
  border-color: #ff944daa;
  background: #21120855;
  box-shadow: 0 0 0 9px #ff742610;
  transition: box-shadow .3s, background .3s;
}
.film-link:hover .film-play svg { background: #3a1c0dcc; box-shadow: 0 0 0 14px #ff742615; }
.packages-section { background: #151211; border-block-color: #ff742627; }
.package-card {
  position: relative;
  border-color: #ff81393b;
  border-top: 2px solid #ff81397a;
  background: linear-gradient(145deg, #38221725, #151211);
  transition: border-color .3s, box-shadow .3s;
}
.package-card:nth-child(2) {
  border-color: #ff81397a;
  border-top-color: var(--orange);
  background: radial-gradient(ellipse at 100% 0%, #ff681915, transparent 60%), #1c1511;
}
.package-card:hover, .package-card:focus-within { border-color: #ff944daa; box-shadow: 0 10px 36px #ff63100c; }
.package-card li::before { color: var(--orange); }
.about-portrait, .team-portrait, .detail-photo { border-bottom: 3px solid var(--orange); }
.about-portrait, .team-portrait { border-radius: 3px; }
.signature { border-top-color: #ff742644; }
.values-section, .booking-note { border-block-color: #ff742644; }
.service-list > div { border-top-color: #ff74263b; }
.filter-button { border-color: #ff742642; border-radius: 3px; transition: background .2s, border-color .2s; }
.filter-button[aria-pressed=true] { background: var(--orange); border-color: var(--orange); color: #211107; }
.contact-photo { border-bottom: 3px solid var(--orange); }
.contact-details > div, .faqs details { border-bottom-color: #ff742634; }
.faqs details:first-child { border-top-color: #ff742634; }
.faqs details[open] summary { color: var(--accent); }
.site-footer { border-top: 1px solid #ff74263a; background: #0a0908; }
.footer-bottom { border-top-color: #ff742633; }
.footer-settings { align-items: center; }
.motion-toggle {
  padding: 7px 10px;
  min-height: 40px;
  border: 1px solid #ff742643;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  font-size: .75rem;
}
.motion-toggle:hover, .motion-toggle[aria-pressed=true] { color: var(--accent); border-color: var(--accent); }
.motion-toggle[hidden] { display: none; }
.lightbox { border-color: #ff813970; }

@keyframes liquid-drift {
  from { transform: translate(-1.5%, 10px) scale(1.04, .9); }
  to { transform: translate(1.8%, -13px) scale(1.08, 1.12); }
}
@keyframes liquid-return {
  from { transform: translate(2%, -9px) scale(1.06, 1.08); }
  to { transform: translate(-2%, 12px) scale(1.02, .86); }
}
@keyframes liquid-orbit {
  from { transform: rotate(-10deg) translateY(0); border-radius: 43% 57% 62% 38% / 38% 46% 54% 62%; }
  to { transform: rotate(9deg) translateY(20px); border-radius: 61% 39% 42% 58% / 56% 63% 37% 44%; }
}
.motion-paused .liquid-layer, .motion-paused .liquid-orbit { animation-play-state: paused !important; }
.motion-paused { scroll-behavior: auto; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { transition: none !important; }
.motion-paused .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

@media (max-width: 1000px) {
  .main-nav { border-bottom-color: var(--orange-edge); }
}
@media (max-width: 700px) {
  .topline { height: 33px; }
  .hero .liquid-ribbon { height: 70px; }
  .liquid-orbit { display: none; }
  .page-intro .liquid-ribbon { height: 60px; }
  .booking-band .liquid-ribbon { height: 135px; }
  .story-images { padding-left: 10px; padding-top: 10px; }
  .story-photo { outline-offset: 6px; }
  .footer-bottom .footer-settings { width: 100%; justify-content: space-between; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .liquid-layer, .liquid-orbit { animation: none !important; }
  .motion-ready .reveal { opacity: 1 !important; transform: none !important; }
  .button::before { display: none; }
  .motion-toggle { display: none; }
}