/* Soulwaves motion and layout refinement — editorial, calm, responsive. */
:root {
  --sw-motion-ease:cubic-bezier(.16,1,.3,1);
  --sw-motion-deep:#382c2a;
  --sw-motion-glow:#f8e2cf;
  --sw-motion-panel:#fffaf6;
  --sw-motion-shadow:#382c2a30;
  --sw-motion-radius:22px;
}

/* The old minimum height forced the photo beyond its grid track. */
#about .about-grid {width:min(100%,1320px);margin-inline:auto;align-items:start;gap:clamp(40px,5vw,84px)}
#about .about-grid > * {min-width:0;max-width:100%}
#about .about-art.discover-slideshow[data-photo-carousel] {box-sizing:border-box;width:100%;min-height:0;aspect-ratio:4/4.35;border-radius:var(--sw-motion-radius);box-shadow:18px 18px 0 #ead4c8}
#about .about-art.discover-slideshow[data-photo-carousel] img {border-radius:inherit}
#about .about-copy {width:100%;padding-block:clamp(8px,2vw,30px)}
#about .about-copy h2 {margin-block:12px 24px;max-width:18ch}
#about .about-copy p {max-width:60ch}
#about .about-values {gap:0}

/* Horizontal photo story: arrows, dots and a gentle back-and-forth rhythm. */
.brand-choices {overflow:hidden}
.brand-choices-heading {margin-bottom:30px}
.brand-choices-viewport {width:100%;overflow:hidden;border-radius:var(--sw-motion-radius)}
.brand-choices-grid {display:flex;gap:18px;align-items:stretch;width:100%;will-change:transform;transition:transform 850ms var(--sw-motion-ease)}
.brand-choice {flex:0 0 calc((100% - 18px)/2);min-width:0;min-height:clamp(380px,39vw,525px);border-radius:var(--sw-motion-radius);box-shadow:0 10px 28px var(--sw-motion-shadow);transition:box-shadow .45s ease,transform .45s var(--sw-motion-ease)}
.brand-choice::before {transform:scale(1.035);animation:sw-photo-breathe 8s ease-in-out infinite alternate}
.brand-choice::after {background:linear-gradient(0deg,#211717eb 0%,#33242180 48%,#2d211d16 100%)}
.brand-choice:hover,.brand-choice:focus-visible {box-shadow:0 22px 40px #382c2a50;transform:translateY(-5px)}
.brand-choice:hover::before,.brand-choice:focus-visible::before {animation-play-state:paused;transform:scale(1.11);filter:saturate(1.14)}
.brand-choice .choice-index {width:48px;height:48px;border-color:#fff9;background:#fff2;backdrop-filter:blur(9px);font-size:13px;animation:sw-number-breathe 3.8s ease-in-out infinite}
.brand-choice:nth-child(2) .choice-index {animation-delay:-1.2s}
.brand-choice:nth-child(3) .choice-index {animation-delay:-2.4s}
.brand-choice:hover .choice-index {animation:none;transform:scale(1.2) rotateY(12deg);box-shadow:0 0 0 8px #fff2}
.brand-choice .choice-index,.brand-choice .choice-arrow {transition:transform .32s var(--sw-motion-ease),box-shadow .32s ease,background-color .32s ease}
.brand-choices-controls {display:flex;align-items:center;justify-content:flex-end;gap:15px;margin-top:22px}
.brand-choices-nav {display:grid;place-items:center;width:48px;height:48px;border:1px solid #bca79c;border-radius:50%;background:var(--sw-motion-panel);color:var(--sw-motion-deep);font-size:23px;line-height:1;box-shadow:0 7px 20px #382c2a10}
.brand-choices-dots {display:flex;gap:10px;align-items:center;margin-inline:5px}
.brand-choices-dots button {width:10px;height:10px;padding:0;border:0;border-radius:99px;background:#c9b8ae;transition:width .35s var(--sw-motion-ease),background-color .35s ease,transform .35s ease}
.brand-choices-dots button[aria-current="true"] {width:32px;background:var(--sw-rose-deep)}

/* Number markers repeat the same refined rhythm throughout the public site. */
#booking .booking-step-number,#about .about-values>div>span {animation:sw-number-breathe 4.5s ease-in-out infinite;transform-origin:center}
#booking .booking-step-head:nth-of-type(2) .booking-step-number,#about .about-values>div:nth-child(2)>span {animation-delay:-1.5s}
#booking .booking-step-head:nth-of-type(3) .booking-step-number,#about .about-values>div:nth-child(3)>span {animation-delay:-3s}
#booking .booking-step-number:hover,#about .about-values>div:hover>span {animation:none;transform:scale(1.12) rotateY(14deg)}

/* Moving light reads as depth while the brand remains warm and calm. */
.topbar .brand {position:relative;isolation:isolate}
.topbar .brand-mark {position:relative;animation:sw-gem-float 5.5s ease-in-out infinite;filter:drop-shadow(0 0 4px #d5a18e50)}
.topbar .brand::after {content:"✦";position:absolute;left:34px;top:3px;color:var(--sw-rose);font-size:13px;opacity:0;pointer-events:none;animation:sw-sparkle 4.8s ease-in-out infinite}
.topbar .brand-name {display:inline-block;color:var(--sw-motion-deep);background:linear-gradient(105deg,var(--sw-motion-deep) 0%,var(--sw-motion-deep) 37%,#c17862 49%,var(--sw-motion-deep) 61%,var(--sw-motion-deep) 100%);background-size:250% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:sw-word-light 8s ease-in-out infinite}
.topbar .brand:hover .brand-mark {animation-duration:2.4s;filter:drop-shadow(0 0 9px #d5a18eaa)}
.topbar .brand:hover .brand-name {animation-duration:2.8s}

/* Controls share one light response; stronger motion belongs to key calls to action. */
body button,body a.btn,body .contact-quick-btn,body .venue-highlight-link {transition-property:transform,filter,box-shadow,background-color,border-color;transition-duration:.28s;transition-timing-function:var(--sw-motion-ease)}
body .btn,body .photo-carousel-controls button,body .brand-choices-nav,body .gallery-more,body .contact-quick-btn {animation:sw-control-float 6.8s ease-in-out infinite}
body .btn:nth-child(2n),body .photo-carousel-controls button:nth-child(2n),body .brand-choices-nav:nth-child(2n) {animation-delay:-2.3s}
@media (hover:hover) {
  body button:not(:disabled):hover,body a.btn:hover,body .contact-quick-btn:hover {filter:brightness(1.06) saturate(1.08)}
  body button:not(:disabled):active,body a.btn:active,body .contact-quick-btn:active {transform:translateY(1px) scale(.975);transition-duration:.13s}
}
.sw-luminous {position:relative;isolation:isolate;overflow:hidden;--sw-pointer-x:50%;--sw-pointer-y:50%}
.sw-luminous::after {content:"";position:absolute;inset:-55% -70%;z-index:3;pointer-events:none;background:linear-gradient(107deg,transparent 38%,#fff0 44%,#fff9 50%,#fff0 56%,transparent 62%);transform:translateX(-70%) rotate(8deg);opacity:.62;animation:sw-sheen 8s ease-in-out infinite}
.sw-luminous::before {content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at var(--sw-pointer-x) var(--sw-pointer-y),#fff5 0,transparent 53%);opacity:0;transition:opacity .22s ease}
.sw-luminous:hover::before,.sw-luminous:focus-visible::before {opacity:1}
.sw-luminous:hover::after,.sw-luminous:focus-visible::after {animation-duration:1.65s;opacity:.85}
.sw-luminous>* {position:relative;z-index:4}
@media (hover:hover) {
  .sw-luminous.sw-tilt:hover {transform:perspective(800px) translateY(-3px) rotateX(var(--sw-tilt-y,0deg)) rotateY(var(--sw-tilt-x,0deg));box-shadow:0 16px 32px #382c2a3c}
}

/* Training and event panels gain motion without sacrificing text contrast. */
#services #trainingCoursesToggle {position:relative;overflow:hidden;border-radius:var(--sw-motion-radius);background:linear-gradient(120deg,#e5eee7,#f5efe7 52%,#e5eee7);background-size:240% 100%;box-shadow:0 10px 26px #382c2a14;animation:sw-panel-light 10s ease-in-out infinite}
#services #trainingCoursesToggle:hover {transform:translateY(-5px);box-shadow:0 18px 35px #382c2a28}
#services #trainingCoursesToggle .training-courses-toggle-icon {transition:transform .55s var(--sw-motion-ease),filter .55s ease}
#services #trainingCoursesToggle:hover .training-courses-toggle-icon {transform:rotate(14deg) scale(1.12);filter:drop-shadow(0 4px 8px #d5a18e99)}
#services #trainingCoursesToggle .training-courses-toggle-label {display:inline-block;transition:transform .35s var(--sw-motion-ease)}
#services #trainingCoursesToggle:hover .training-courses-toggle-label {transform:translateX(5px)}
#services .venue-highlight {position:relative;isolation:isolate;overflow:hidden;border-radius:var(--sw-motion-radius);box-shadow:0 12px 29px #382c2a22;transition:transform .4s var(--sw-motion-ease),box-shadow .4s ease,background-position 1s ease}
#services .venue-highlight::before {content:"";position:absolute;z-index:-1;inset:-40%;border-radius:50%;background:radial-gradient(circle at 70% 30%,#fff2,transparent 48%);transform:translateX(-10%);animation:sw-panel-float 9s ease-in-out infinite alternate;pointer-events:none}
#services .venue-highlight:hover,#services .venue-highlight:focus-visible {transform:translateY(-7px);box-shadow:0 25px 47px #382c2a3a}
#services .venue-highlight-copy h3,#services .venue-highlight-copy p {color:#fffaf6}
#services .venue-highlight-icon svg {transition:transform .5s var(--sw-motion-ease),filter .5s ease}
#services .venue-highlight:hover .venue-highlight-icon svg {transform:rotate(-9deg) scale(1.17);filter:drop-shadow(0 0 8px #ffdbc3aa)}
#services .venue-highlight-button {transition:transform .35s var(--sw-motion-ease),box-shadow .35s ease,background-color .35s ease}
#services .venue-highlight:hover .venue-highlight-button {transform:translateX(5px);box-shadow:0 13px 24px #1a272344}

@keyframes sw-photo-breathe {from {transform:scale(1.035)}to {transform:scale(1.085)}}
@keyframes sw-number-breathe {0%,100% {transform:scale(1);box-shadow:0 0 0 0 #fff0}50% {transform:scale(1.075);box-shadow:0 0 0 5px #fff3}}
@keyframes sw-gem-float {0%,100% {transform:translateY(0) rotate(-2deg)}50% {transform:translateY(-3px) rotate(3deg)}}
@keyframes sw-sparkle {0%,32%,75%,100% {opacity:0;transform:scale(.35) rotate(0)}44% {opacity:1;transform:scale(1.25) rotate(30deg)}56% {opacity:.6;transform:scale(.8) rotate(65deg)}}
@keyframes sw-word-light {0%,20% {background-position:100% 50%}53%,100% {background-position:0% 50%}}
@keyframes sw-sheen {0%,54%,100% {transform:translateX(-70%) rotate(8deg)}68% {transform:translateX(75%) rotate(8deg)}}
@keyframes sw-panel-light {from {background-position:100% 50%}to {background-position:0% 50%}}
@keyframes sw-panel-float {from {transform:translateX(-10%) translateY(-3%)}to {transform:translateX(10%) translateY(3%)}}
@keyframes sw-control-float {0%,100% {translate:0 0}50% {translate:0 -1.5px}}

@media (max-width:1100px) {
  #about .about-grid {grid-template-columns:minmax(0,1fr);gap:54px}
  #about .about-art.discover-slideshow[data-photo-carousel] {max-width:760px;min-height:0;aspect-ratio:16/10;justify-self:center;box-shadow:13px 13px 0 #ead4c8}
  #about .about-copy {max-width:760px;justify-self:center;padding:0}
  #about .about-copy h2 {max-width:24ch}
}
@media (max-width:760px) {
  #about .about-grid {gap:34px}
  #about .about-art.discover-slideshow[data-photo-carousel] {aspect-ratio:4/3;box-shadow:8px 8px 0 #ead4c8}
  #about .about-copy h2 {margin-bottom:18px}
  .brand-choices {padding-block:65px 72px}
  .brand-choices-heading {margin-bottom:21px}
  .brand-choices-grid {display:flex;gap:12px}
  .brand-choice {flex-basis:88%;min-height:400px}
  .brand-choices-controls {justify-content:center}
  #services .venue-highlight {border-radius:18px}
}
@media (min-width:761px) and (max-width:1100px) {
  .brand-choice {flex-basis:64%}
}
@media (prefers-reduced-motion:reduce) {
  .topbar .brand-mark,.topbar .brand-name,.topbar .brand::after,.brand-choice::before,.brand-choice .choice-index,#booking .booking-step-number,#about .about-values>div>span,#services #trainingCoursesToggle,#services .venue-highlight::before,.sw-luminous::after,body .btn,body .photo-carousel-controls button,body .brand-choices-nav,body .gallery-more,body .contact-quick-btn {animation:none!important}
  .brand-choices-grid,.brand-choice,.brand-choice::before,.sw-luminous,.sw-luminous::before,body button,body a.btn,#services .venue-highlight {transition-duration:.01ms!important;scroll-behavior:auto!important}
  .sw-luminous.sw-tilt:hover,.brand-choice:hover,#services .venue-highlight:hover {transform:none!important}
}
