:root {
--color-primary: #2e5a7d;
--color-primary-dark: #203f58;
--color-dark: #212529;
--color-text: #212529;
--color-text-light: #6c757d;
--color-text-on-dark: #e8e8e8;
--color-white: #fff;
--color-light: #f8f9fa;
--color-border: #dee2e6;
--font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-body: 'Roboto Slab', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-subtitle: 'Droid Serif', Georgia, 'Times New Roman', serif;
--marker: 'Marker Felt', 'Bradley Hand', 'Segoe Print', 'Comic Sans MS', cursive;
--radius: 8px;
--radius-lg: 16px;
--shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
--shadow-float: 0 2px 4px rgba(32, 63, 88, 0.04), 0 12px 28px rgba(32, 63, 88, 0.07), 0 28px 56px rgba(32, 63, 88, 0.06);
--shadow-float-lg: 0 4px 8px rgba(32, 63, 88, 0.05), 0 18px 40px rgba(32, 63, 88, 0.10), 0 40px 72px rgba(32, 63, 88, 0.08);
--transition: 0.3s ease;
--ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
--ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
--max-width: 1200px;
--nav-height: 90px;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
scroll-padding-top: var(--nav-height);
overflow-x: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
}
html::-webkit-scrollbar {
width: 0;
height: 0;
}
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
color: var(--color-text);
background: var(--color-white);
-webkit-font-smoothing: antialiased;
}
picture { display: contents; }
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--color-primary-dark);
text-decoration: none;
transition: color var(--transition);
}
a:hover {
color: var(--color-primary);
}
ul {
list-style: none;
}
address {
font-style: normal;
}
.skip-link {
position: absolute;
top: -100%;
left: 50%;
transform: translateX(-50%);
background: var(--color-primary);
color: var(--color-white);
padding: 0.75rem 1.5rem;
border-radius: 0 0 var(--radius) var(--radius);
z-index: 9999;
font-weight: 600;
}
.skip-link:focus {
top: 0;
}
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 1.5rem;
}
.text-center {
text-align: center;
}
.btn {
display: inline-block;
padding: 0.875rem 2rem;
border-radius: var(--radius);
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
transition: all var(--transition);
border: 2px solid transparent;
text-align: center;
}
.btn-primary {
background: var(--color-primary);
color: var(--color-white);
border-color: var(--color-primary);
}
.btn-primary:hover {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
color: var(--color-white);
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(46, 90, 125, 0.3);
}
.btn-outline {
background: transparent;
color: var(--color-white);
border-color: var(--color-white);
}
.btn-outline:hover {
background: var(--color-white);
color: var(--color-dark);
}
.btn-outline-dark {
background: transparent;
color: var(--color-dark);
border-color: var(--color-dark);
}
.btn-outline-dark:hover {
background: var(--color-dark);
color: var(--color-white);
}
.btn-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
}
.btn-arrow-icon {
flex: 0 0 auto;
transition: transform 0.3s var(--ease-out-soft);
}
.btn-arrow:hover .btn-arrow-icon,
.btn-arrow:focus-visible .btn-arrow-icon {
transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
.btn-arrow-icon {
transition: none;
}
.btn-arrow:hover .btn-arrow-icon,
.btn-arrow:focus-visible .btn-arrow-icon {
transform: none;
}
}
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--nav-height);
background: #ffffff;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
z-index: 1000;
transition: background var(--transition), box-shadow var(--transition);
}
.navbar.scrolled {
box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
.nav-logo img {
height: 56px;
width: auto;
}
.nav-menu {
display: flex;
align-items: center;
gap: 0.25rem;
}
.nav-menu-heading {
display: none;
}
.nav-link {
position: relative;
color: var(--color-dark);
font-family: var(--font-heading);
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 0.5rem 1rem;
border-radius: var(--radius);
transition: color var(--transition), background var(--transition);
}
.nav-link:not(.btn-book)::after {
content: '';
position: absolute;
left: 50%;
bottom: 0.15rem;
width: 0;
height: 2px;
border-radius: 2px;
background: var(--color-primary);
transform: translateX(-50%);
transition: width 0.35s var(--ease-out-soft);
}
.nav-link:not(.btn-book):hover::after,
.nav-link:not(.btn-book).active::after {
width: calc(100% - 2rem);
}
.nav-link:hover,
.nav-link.active {
color: var(--color-primary);
}
.btn-book {
background: var(--color-primary);
color: var(--color-white) !important;
margin-left: 0.5rem;
transition: background var(--transition), transform 0.35s var(--ease-out-soft);
}
.btn-book:hover {
background: var(--color-primary-dark);
color: var(--color-white) !important;
transform: translateY(-2px);
}
.btn-book:active {
transform: translateY(0);
}
.nav-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
z-index: 1001;
}
.hamburger {
display: block;
width: 24px;
height: 2px;
background: var(--color-dark);
position: relative;
transition: background var(--transition);
}
.hamburger::before,
.hamburger::after {
content: '';
position: absolute;
width: 24px;
height: 2px;
background: var(--color-dark);
left: 0;
transition: transform var(--transition);
}
.hamburger::before { top: -7px; }
.hamburger::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .hamburger {
background: transparent;
}
.nav-toggle[aria-expanded="true"] .hamburger::before {
transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle[aria-expanded="true"] .hamburger::after {
transform: rotate(-45deg) translate(5px, -5px);
}
.hero {
position: relative;
height: calc(100vh - var(--nav-height));
min-height: 480px;
max-height: 900px;
overflow: hidden;
margin-top: var(--nav-height);
}
.hero-carousel {
position: absolute;
inset: 0;
}
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1s ease;
}
.hero-slide.active {
opacity: 1;
}
.hero-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-overlay {
position: absolute;
inset: 0;
background: rgba(33, 37, 41, 0.35);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.hero-title {
font-family: var(--font-heading);
font-size: clamp(2rem, 5vw, 3.5rem);
color: var(--color-white);
font-weight: 700;
margin-bottom: 1rem;
line-height: 1.2;
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.hero-title span {
display: block;
color: var(--color-white);
font-size: 0.85em;
}
.hero-subtitle {
font-family: var(--font-subtitle);
font-style: italic;
font-size: clamp(1rem, 2.5vw, 1.35rem);
color: rgba(255, 255, 255, 0.9);
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.hero-cta {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
align-items: stretch;
}
.hero-cta .btn,
.hero-cta .hero-services-btn {
width: 220px;
height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
box-sizing: border-box;
padding: 0;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 1px;
}
.hero:has(.hero-dropdown-wrap) .hero-overlay {
align-items: center;
padding-bottom: 140px;
}
.hero-dropdown-wrap {
position: relative;
height: 50px;
}
.hero-dropdown-wrap::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -14px;
height: 14px;
}
.hero-services-btn {
gap: 0.5rem;
cursor: pointer;
}
.hero-services-btn .dropdown-arrow {
transition: transform 0.3s var(--ease-out-soft);
}
.hero-services-dropdown {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, auto);
grid-auto-flow: column;
gap: 0.1rem 1.4rem;
position: absolute;
top: calc(100% + 12px);
left: 50%;
transform: translateX(-50%) translateY(-8px) scale(0.96);
transform-origin: top center;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 18px;
box-shadow: 0 28px 64px rgba(16, 32, 48, 0.30),
0 6px 16px rgba(16, 32, 48, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.85);
min-width: 470px;
padding: 0.7rem;
list-style: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.28s var(--ease-out-soft),
transform 0.34s var(--ease-out-soft),
visibility 0.28s;
z-index: 50;
}
.hero-services-dropdown::after {
content: "";
position: absolute;
top: 1.1rem;
bottom: 1.1rem;
left: 50%;
width: 1px;
background: linear-gradient(to bottom,
rgba(46, 90, 125, 0),
rgba(46, 90, 125, 0.16),
rgba(46, 90, 125, 0));
}
.hero-services-dropdown.open,
.hero-dropdown-wrap:focus-within .hero-services-dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0) scale(1);
}
@media (hover: hover) and (pointer: fine) {
.hero-dropdown-wrap:hover .hero-services-dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0) scale(1);
}
.hero-dropdown-wrap:hover .hero-services-btn .dropdown-arrow {
transform: rotate(180deg);
}
}
.hero-dropdown-wrap:has(.hero-services-dropdown.open) .dropdown-arrow {
transform: rotate(180deg);
}
.hero-services-dropdown li a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
padding: 0.6rem 0.75rem 0.6rem 0.85rem;
font-family: var(--font-heading);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.7px;
text-transform: uppercase;
white-space: nowrap;
color: #3a4b5c;
border-radius: 11px;
transition: background-color 0.28s ease, color 0.28s ease;
}
.hero-services-dropdown li a::after {
content: "";
flex: 0 0 auto;
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg) translate(-3px, -3px);
opacity: 0;
transition: opacity 0.28s ease, transform 0.28s var(--ease-out-soft);
}
.hero-services-dropdown li a:hover,
.hero-services-dropdown li a:focus-visible {
background-color: rgba(46, 90, 125, 0.10);
color: var(--color-primary-dark);
}
.hero-services-dropdown li a:hover::after,
.hero-services-dropdown li a:focus-visible::after {
opacity: 0.75;
transform: rotate(-45deg) translate(0, 0);
}
@media (max-width: 560px) {
.hero-services-dropdown {
grid-template-columns: 1fr;
grid-template-rows: none;
grid-auto-flow: row;
min-width: 250px;
}
.hero-services-dropdown::after {
display: none;
}
.hero-services-dropdown li a {
white-space: normal;
}
}.section {
padding: 5rem 0;
}
.section-light {
background: var(--color-light);
}
.section-header {
text-align: center;
margin-bottom: 3.5rem;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.section-title {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 0.75rem;
color: inherit;
}
.section-title em {
font-style: normal;
color: var(--color-primary);
}
.section-header.fade-el {
opacity: 1;
transform: none;
transition: none;
}
.section-header.fade-el .section-title,
.section-header.fade-el .section-subtitle,
.section-header.fade-el .rev-eyebrow,
.section-header.fade-el .rev-rating {
opacity: 0;
}
.section-header.fade-el.in .section-title {
animation: heading-focus 0.9s var(--ease-out-soft) both;
}
.section-header.fade-el.in .section-subtitle,
.section-header.fade-el.in .rev-eyebrow,
.section-header.fade-el.in .rev-rating {
animation: heading-fade 0.7s ease 0.55s both;
}
@keyframes heading-focus {
from { opacity: 0; transform: scale(1.08); filter: blur(7px); }
to   { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes heading-fade {
from { opacity: 0; }
to   { opacity: 1; }
}
.section-subtitle {
font-family: var(--font-subtitle);
font-style: italic;
font-size: 1.125rem;
color: var(--color-text-light);
max-width: 600px;
margin: 0 auto;
}
.about-content {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
}
.about-text {
background: #fff;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-float);
padding: 2.5rem;
max-width: 900px;
margin: 0 auto;
}
.about-text p {
margin-bottom: 1.5rem;
font-size: 1.25rem;
line-height: 1.75;
color: #495057;
}
.about-text p:last-child {
margin-bottom: 0;
}
.about-text strong {
color: var(--color-text);
}
.about-image img {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.office-scene { margin: 0; }
.office-stage {
background: #E7EBEE;
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.office-stage canvas { display: block; width: 100%; height: auto; }
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.service-card {
position: relative;
background: #fff;
border: 1px solid var(--color-border);
padding: 2rem 1.5rem;
border-radius: var(--radius-lg);
text-align: center;
box-shadow: 0 1px 2px rgba(32, 63, 88, 0.04);
transform: translateY(0);
transition: transform 0.35s var(--ease-out-soft),
box-shadow 0.35s var(--ease-out-soft),
border-color 0.25s ease,
opacity 0.6s ease;
}
.service-card:hover,
.service-card:focus-within {
transform: translateY(-6px);
border-color: rgba(46, 90, 125, 0.35);
box-shadow: 0 12px 26px rgba(32,63,88,0.10);
}
.service-icon {
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--color-primary);
color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.25rem;
transition: background-color 0.3s ease;
}
.service-card:hover .service-icon,
.service-card:focus-within .service-icon {
background-color: var(--color-primary-dark);
}
.service-card h3 {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
color: var(--color-dark);
margin-bottom: 0.5rem;
transition: color 0.4s ease;
}
.service-card:hover h3,
.service-card:focus-within h3 {
color: var(--color-primary);
}
.service-card p {
font-size: 0.875rem;
color: var(--color-text-light);
line-height: 1.6;
}
a.service-card {
display: block;
text-decoration: none;
}
.price-line {
font-family: var(--font-heading);
font-size: 0.8rem;
font-weight: 600;
color: var(--color-primary);
margin-bottom: 0.6rem;
letter-spacing: 0.3px;
}
.service-card p.desc {
font-size: 0.875rem;
color: var(--color-text-light);
line-height: 1.6;
margin-bottom: 1rem;
}
.card-cta {
font-family: var(--font-heading);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--color-primary);
}
.card-cta::after {
content: ' \2192';
}
.facility-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
}
.facility {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 1.5rem 1.25rem;
text-align: center;
transition: transform 0.35s var(--ease-out-soft),
box-shadow 0.35s var(--ease-out-soft),
border-color 0.25s ease;
}
.facility:hover {
transform: translateY(-6px);
border-color: rgba(46, 90, 125, 0.35);
box-shadow: 0 12px 26px rgba(32, 63, 88, 0.10);
}
.facility-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--color-primary);
color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
}
.facility h3 {
font-family: var(--font-heading);
font-size: 0.9rem;
font-weight: 700;
color: var(--color-dark);
margin-bottom: 0.3rem;
}
.facility p {
font-size: 0.8rem;
color: var(--color-text-light);
line-height: 1.55;
}
.facility-note {
text-align: center;
font-family: var(--font-subtitle);
font-style: italic;
font-size: 0.95rem;
color: var(--color-text-light);
margin: 2rem auto 0;
max-width: 60ch;
}
.reviews-section {
background: var(--color-light);
overflow: hidden;
}
.rev-eyebrow {
font-family: var(--font-heading);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 0.6rem;
}
.rev-rating {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin: 0 auto;
}
.rev-rating .stars {
display: inline-flex;
align-items: center;
gap: 3px;
}
.rev-rating .stars svg,
.rev-card .stars svg {
display: block;
}
.rev-rating-text {
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 600;
color: var(--color-text-light);
letter-spacing: 0.3px;
line-height: 1.2;
}
.rev-rating-text strong {
color: var(--color-dark);
font-weight: 700;
}
.rev-track-wrap {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.rev-track {
display: flex;
gap: 1.5rem;
width: max-content;
animation: rev-scroll 95s linear infinite;
padding: 1.5rem 0 2.5rem;
}
.rev-track-wrap:hover .rev-track,
.rev-track-wrap:focus-within .rev-track {
animation-play-state: paused;
}
@keyframes rev-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.rev-card {
position: relative;
width: 420px;
flex-shrink: 0;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 2.25rem 2rem 1.75rem;
margin: 0;
box-shadow: 0 1px 2px rgba(32, 63, 88, 0.04);
display: flex;
flex-direction: column;
transform: translateY(0);
transition: transform 0.35s var(--ease-out-soft),
box-shadow 0.35s var(--ease-out-soft),
border-color 0.25s ease;
}
.rev-card:hover {
transform: translateY(-6px);
border-color: rgba(46, 90, 125, 0.35);
box-shadow: 0 12px 26px rgba(32, 63, 88, 0.10);
}
.rev-card::before {
content: '\201C';
position: absolute;
top: 0.25rem;
left: 1.25rem;
font-family: var(--font-subtitle);
font-size: 4.5rem;
line-height: 1;
color: rgba(46, 90, 125, 0.14);
pointer-events: none;
transition: color 0.4s var(--ease-out-soft);
}
.rev-card:hover::before {
color: #e8a723;
}
@media (prefers-reduced-motion: reduce) {
.rev-card::before {
transition: none;
}
}
.rev-card blockquote {
margin: 0 0 1.5rem;
font-size: 0.975rem;
line-height: 1.7;
color: var(--color-text);
flex: 1;
}
.rev-card figcaption {
display: flex;
align-items: center;
gap: 0.85rem;
border-top: 1px solid var(--color-light);
padding-top: 1.1rem;
}
.rev-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--color-primary);
color: var(--color-white);
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.5px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.rev-track .rev-card:nth-child(4n+2) .rev-avatar { background: #3f6f63; }
.rev-track .rev-card:nth-child(4n+3) .rev-avatar { background: #566073; }
.rev-track .rev-card:nth-child(4n) .rev-avatar { background: #8a5a44; }
.rev-meta {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.rev-name {
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 700;
color: var(--color-dark);
}
.stars {
display: inline-flex;
gap: 2px;
}@media (max-width: 480px) {
.rev-card {
width: 320px;
padding: 1.75rem 1.5rem 1.5rem;
}
}
@media (prefers-reduced-motion: reduce) {
.rev-track {
animation: none;
width: auto;
flex-wrap: wrap;
justify-content: center;
padding: 0.5rem 1.5rem 1rem;
}
.rev-track figure:nth-child(n+10) {
display: none;
}
}
.service-card.will-reveal {
opacity: 0;
}
.fade-el {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.55s ease, transform 0.7s var(--ease-out-soft);
transition-delay: 0s;
}
.fade-el.in {
opacity: 1;
transform: none;
transition-delay: var(--reveal-delay, 0s);
}
.service-card.will-reveal.is-revealed {
opacity: 1;
animation: card-rise 0.6s var(--ease-out-soft);
}
.service-card.will-reveal.is-revealed.reveal-left,
.service-card.will-reveal.is-revealed.reveal-right {
animation: card-rise-soft 0.55s var(--ease-out-soft) var(--reveal-delay, 0s) backwards;
}
@keyframes card-rise {
from { opacity: 0; transform: translateY(24px) scale(1); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes card-rise-soft {
from { opacity: 0; transform: translateY(26px); }
to   { opacity: 1; transform: translateY(0); }
}
.service-card.will-reveal.reveal-done,
.service-card.will-reveal.is-revealed.reveal-done,
.service-card.will-reveal.is-revealed.reveal-left.reveal-done,
.service-card.will-reveal.is-revealed.reveal-right.reveal-done,
.gallery-item.will-reveal.reveal-done {
opacity: 1;
animation: none;
}
.gallery-item.will-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s var(--ease-out-soft);
}
.gallery-item.will-reveal.is-revealed {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.service-card,
.service-icon,
.service-card h3 {
transition-duration: 0.01ms;
}
.service-card:hover,
.service-card:focus-within {
transform: none;
}
.service-card:hover .service-icon,
.service-card:focus-within .service-icon {
transform: none;
}
.service-card.will-reveal.is-revealed,
.service-card.will-reveal.is-revealed.reveal-left,
.service-card.will-reveal.is-revealed.reveal-right {
animation: none;
}
.service-card.will-reveal {
opacity: 1;
transition: none;
}
.fade-el {
opacity: 1;
transform: none;
transition: none;
}
.section-header.fade-el .section-title,
.section-header.fade-el .section-subtitle,
.section-header.fade-el .rev-eyebrow,
.section-header.fade-el .rev-rating,
.wb-head.fade-el .wb-title,
.wb-head.fade-el .wb-sub {
opacity: 1;
animation: none;
}
.service-icon svg *, .facility-icon svg * {
animation: none !important;
}
.nav-drawer.is-open .drawer-body,
.nav-drawer.is-closing .drawer-body,
.nav-drawer.is-open .cabinet-lip,
.nav-drawer.is-open .drawer-runners,
.has-dropdown > .nav-link.is-jolt {
animation: none !important;
}
.nav-drawer.is-open .drawer-body {
transform: none !important;
}
.fd-screen { opacity: .4; }
.kc-liquid, .pr-sheet, .br-fill, .ev-beam, .ev-podium { transform: none; opacity: 1; }
.lk-shackle { transform: rotate(0deg); }
.lk-hole { opacity: 1; }
.br-fill { opacity: .16; }
.br-base { opacity: .4; }
.br-s1 { opacity: 1; transform: none; }
.br-s2 { opacity: 0; }
.br-b1, .br-b2, .br-b3, .br-b4 { transform: none; }
.ev-beam { opacity: .2; }
.po-door { transform: scaleX(.2); }
.po-inside { opacity: 1; }
.po-glow { opacity: .12; }
.pw-charge { transform: scaleX(1); }
.fp-scan, .fp-trail, .kc-stream { opacity: 0; }
.fd-t1, .fd-t2, .fd-t3, .wf-t1, .wf-t2, .wf-t3,
.vw1, .vw2, .vw3, .vw4, .vw5, .vw6, .vw7, .vw8 { opacity: 1; }
}
.coffee-scroll {
position: fixed;
right: 26px;
top: 50%;
width: 96px;
height: 190px;
margin-top: -95px;
z-index: 40;
cursor: grab;
touch-action: none;
-webkit-user-select: none;
user-select: none;
}
.coffee-scroll:active {
cursor: grabbing;
}
@keyframes cs-idle-bob {
0%, 100% { transform: translateY(0); }
50%      { transform: translateY(-3px); }
}
.cs-dragging {
scroll-behavior: auto !important;
}
.coffee-scroll svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
animation: cs-idle-bob 6.5s ease-in-out infinite;
}
.cs-pour {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s;
}
.coffee-scroll.is-pouring .cs-pour {
opacity: 1;
visibility: visible;
}
.cs-glint {
opacity: 0;
}
.coffee-scroll.is-pouring .cs-glint-a {
animation: cs-glint-a 0.85s linear infinite;
}
.coffee-scroll.is-pouring .cs-glint-b {
animation: cs-glint-b 0.62s linear infinite 0.3s;
}
@keyframes cs-glint-a {
0%   { transform: translateY(-6px);  opacity: 0; }
20%  { opacity: 0.55; }
75%  { opacity: 0.4; }
100% { transform: translateY(58px);  opacity: 0; }
}
@keyframes cs-glint-b {
0%   { transform: translateY(-4px);  opacity: 0; }
25%  { opacity: 0.45; }
100% { transform: translateY(54px);  opacity: 0; }
}
.cs-mug-wobble {
transform-origin: 34px 159px;
}
.coffee-scroll.is-pouring .cs-mug-wobble {
animation: cs-wobble 1.7s ease-in-out infinite;
}
@keyframes cs-wobble {
0%, 100% { transform: rotate(-1.2deg); }
50%      { transform: rotate(1.2deg); }
}
.cs-steam {
opacity: 0;
transition: opacity 0.7s ease;
}
.cs-wisp {
transform-origin: 34px 116px;
}
.cs-wisp-1 { animation: cs-wisp-1 4.2s ease-in-out infinite; }
.cs-wisp-2 { animation: cs-wisp-2 5.1s ease-in-out infinite 1.1s; }
.cs-wisp-3 { animation: cs-wisp-3 3.6s ease-in-out infinite 2.3s; }
@keyframes cs-wisp-1 {
0%   { transform: translate(0, 4px) scale(0.7, 0.6);      opacity: 0; }
22%  { opacity: 0.85; }
60%  { opacity: 0.55; }
100% { transform: translate(6px, -16px) scale(1.5, 1.35); opacity: 0; }
}
@keyframes cs-wisp-2 {
0%   { transform: translate(0, 4px) scale(0.65, 0.6);      opacity: 0; }
26%  { opacity: 0.7; }
100% { transform: translate(-5px, -19px) scale(1.6, 1.4);  opacity: 0; }
}
@keyframes cs-wisp-3 {
0%   { transform: translate(0, 3px) scale(0.7, 0.6);      opacity: 0; }
30%  { opacity: 0.6; }
100% { transform: translate(8px, -14px) scale(1.4, 1.3);  opacity: 0; }
}
.cs-kettle-steam {
opacity: 0;
transition: opacity 0.7s ease;
}
.cs-kwisp {
transform-origin: 29px 27px;
}
.cs-kwisp-1 { animation: cs-kwisp-1 5.2s ease-in-out infinite; }
.cs-kwisp-2 { animation: cs-kwisp-2 6.1s ease-in-out infinite 1.6s; }
.cs-kwisp-3 { animation: cs-kwisp-3 4.5s ease-in-out infinite 3s; }
@keyframes cs-kwisp-1 {
0%   { transform: translate(0, 3px) scale(0.7, 0.6);       opacity: 0; }
24%  { opacity: 0.8; }
62%  { opacity: 0.5; }
100% { transform: translate(-5px, -15px) scale(1.45, 1.3); opacity: 0; }
}
@keyframes cs-kwisp-2 {
0%   { transform: translate(0, 3px) scale(0.65, 0.6);      opacity: 0; }
28%  { opacity: 0.65; }
100% { transform: translate(4px, -18px) scale(1.55, 1.35); opacity: 0; }
}
@keyframes cs-kwisp-3 {
0%   { transform: translate(0, 2px) scale(0.7, 0.6);       opacity: 0; }
32%  { opacity: 0.55; }
100% { transform: translate(-7px, -13px) scale(1.35, 1.25); opacity: 0; }
}
@media (max-width: 1150px) {
.coffee-scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.coffee-scroll,
.coffee-scroll.is-pouring .cs-pour,
.coffee-scroll.is-pouring .cs-glint-a,
.coffee-scroll.is-pouring .cs-glint-b,
.coffee-scroll.is-pouring .cs-mug-wobble,
.cs-wisp,
.cs-kwisp {
animation: none;
}
}
@media print {
.coffee-scroll { display: none; }
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.gallery-item {
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 4/3;
display: block;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition);
}
.gallery-item:hover img {
transform: scale(1.05);
}
.features-list {
margin-bottom: 1.5rem;
}
.features-list li {
padding: 0.375rem 0;
padding-left: 1.75rem;
position: relative;
font-size: 0.9375rem;
color: var(--color-text-light);
}
.features-list li::before {
content: '\2713';
position: absolute;
left: 0;
top: 0.25rem;
font-size: 1.1rem;
font-weight: 700;
color: var(--color-dark);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0.5rem;
color: rgba(255,255,255,0.7);
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid rgba(255,255,255,0.15);
border-radius: var(--radius);
background: rgba(255,255,255,0.05);
color: var(--color-white);
font-family: var(--font-body);
font-size: 0.9375rem;
transition: border-color var(--transition);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: var(--color-primary);
}
.form-group select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.5rem;
}
.form-group select option {
background: var(--color-dark);
color: var(--color-white);
}
.form-status {
margin-top: 1rem;
text-align: center;
font-size: 0.9375rem;
}
.form-status.success {
color: #15803d;
}
.form-status.error {
color: #b91c1c;
}
.map-section {
line-height: 0;
}
.map-section iframe {
width: 100%;
filter: grayscale(0.5) contrast(1.1);
}
.footer-spaced {
margin-top: 4rem;
}
.footer {
background: #fff;
color: rgba(0,0,0,0.6);
padding: 3rem 0 0;
font-size: 0.8125rem;
}
.footer-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2rem;
padding-bottom: 2.5rem;
}
.footer-links h3 {
font-family: var(--font-heading);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--color-dark);
margin-bottom: 0.75rem;
}
.footer-links li {
margin-bottom: 0.35rem;
}
.footer-links a {
color: rgba(0,0,0,0.5);
font-size: 0.8125rem;
transition: color var(--transition);
}
.footer-links a:hover {
color: var(--color-dark);
}
.footer-bottom {
border-top: 1px solid rgba(0,0,0,0.1);
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 0;
font-size: 0.75rem;
color: rgba(0,0,0,0.4);
}
.footer-social {
display: flex;
gap: 0.75rem;
align-items: center;
}
.footer-social a {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,0.2);
color: rgba(0,0,0,0.5);
transition: all 0.2s ease;
}
.footer-social a:hover {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
.footer-legal {
display: flex;
gap: 1.5rem;
}
.footer-legal a {
color: rgba(0,0,0,0.4);
font-size: 0.75rem;
}
.footer-legal a:hover {
color: var(--color-dark);
}
.lightbox {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.lightbox.active {
opacity: 1;
visibility: visible;
}
.lightbox-close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
background: none;
border: none;
color: var(--color-white);
font-size: 2.5rem;
cursor: pointer;
line-height: 1;
padding: 0.5rem;
}
.lightbox-img {
max-width: 90%;
max-height: 85vh;
border-radius: var(--radius);
}
@media (max-width: 1024px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
.facility-grid {
grid-template-columns: repeat(2, 1fr);
}
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.about-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.about-text,
.service-intro-text {
padding: 1.75rem 1.5rem;
}
.about-image {
max-width: 500px;
margin: 0 auto;
}
}
@media (max-width: 768px) {
:root {
--nav-height: 64px;
}
.nav-toggle {
display: block;
}
.nav-menu {
position: fixed;
top: 0;
right: -100%;
width: 280px;
height: 100vh;
height: 100dvh;
background: var(--color-white);
flex-direction: column;
align-items: stretch;
padding: calc(var(--nav-height) + 0.25rem) 0 2rem;
gap: 0;
transition: right var(--transition);
box-shadow: -4px 0 24px rgba(0,0,0,0.15);
overflow-y: auto;
}
.nav-menu.open {
right: 0;
}
.nav-menu-heading {
display: block;
padding: 1rem 1.5rem;
font-size: 1.1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--color-dark);
border-bottom: 2px solid #e8e8e8;
margin-bottom: 0.5rem;
list-style: none;
}
.nav-menu > li {
list-style: none;
}
.nav-link {
display: block;
padding: 0.85rem 1.5rem;
font-size: 0.95rem;
font-weight: 500;
width: 100%;
color: var(--color-dark);
letter-spacing: 0.2px;
white-space: nowrap;
border-bottom: 1px solid #f0f0f0;
box-sizing: border-box;
}
.nav-link:hover {
background: #f5f5f5;
color: var(--color-primary);
}
.has-dropdown > .nav-link {
display: flex;
justify-content: space-between;
align-items: center;
}
.btn-book {
margin: 1.25rem 1.5rem 0;
text-align: center;
display: block;
border-radius: 6px;
padding: 0.75rem 1rem;
border-bottom: none;
font-size: 0.85rem;
font-weight: 600;
box-sizing: border-box;
width: calc(100% - 3rem);
}
.btn-book:hover {
background: var(--color-primary-dark);
}
.nav-logo img {
height: 44px;
}
.hero {
min-height: 400px;
max-height: 600px;
height: 70vh;
height: 70dvh;
}.section {
padding: 3.5rem 0;
}
.section-header {
margin-bottom: 2.5rem;
}
.form-row {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr;
}
.footer-bottom {
flex-direction: column;
gap: 0.75rem;
text-align: center;
}
.footer-bottom > p {
order: 3;
}
.footer-social {
order: 1;
}
.footer-legal {
order: 2;
justify-content: center;
}
.map-section iframe {
height: 280px;
}
.form-group input,
.form-group textarea,
.form-group select {
font-size: 16px;
}
.lightbox-close {
top: 0.75rem;
right: 0.75rem;
font-size: 2rem;
padding: 0.75rem;
}
.lightbox-img {
max-width: 95%;
max-height: 80vh;
}
}
@media (max-width: 480px) {
.container {
padding: 0 1rem;
}
.services-grid {
grid-template-columns: 1fr;
}
.facility-grid {
grid-template-columns: 1fr;
}
.gallery-grid {
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.hero {
min-height: 320px;
max-height: 500px;
}
.hero-title {
padding: 0 0.5rem;
}
.hero-subtitle {
padding: 0 1rem;
}
.hero-cta {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
}
.hero-cta .btn,
.hero-cta .hero-services-btn {
width: 150px;
height: 40px;
padding: 0 0.75rem;
font-size: 0.7rem;
letter-spacing: 0.5px;
}
.hero-dropdown-wrap {
height: 40px;
}
.hero-services-btn .dropdown-arrow {
display: none;
}
.hero-services-btn {
gap: 0;
}
.hero-services-dropdown {
min-width: 180px;
}
.section {
padding: 2.5rem 0;
}
.section-header {
margin-bottom: 2rem;
}
.service-card {
padding: 1.5rem 1rem;
}
.service-icon {
width: 60px;
height: 60px;
}
.map-section iframe {
height: 220px;
}
.footer {
padding: 2rem 0 0;
}
}
.service-hero {
position: relative;
height: 320px;
margin-top: var(--nav-height);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.service-hero-overlay {
position: absolute;
inset: 0;
background: rgba(33, 37, 41, 0.55);
display: flex;
align-items: center;
}
.service-hero h1 {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 4vw, 2.75rem);
color: var(--color-white);
font-weight: 700;
margin-bottom: 0.5rem;
text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.service-hero-sub {
font-family: var(--font-subtitle);
font-style: italic;
font-size: 1.125rem;
color: rgba(255,255,255,0.85);
text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.breadcrumb {
margin-bottom: 1rem;
font-size: 0.875rem;
}
.breadcrumb a {
color: rgba(255,255,255,0.7);
}
.breadcrumb a:hover {
color: var(--color-white);
}
.breadcrumb span {
color: rgba(255,255,255,0.5);
margin: 0 0.25rem;
}
.breadcrumb span:last-child {
color: var(--color-white);
}
.service-intro {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.service-intro-text {
background: #fff;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-float);
padding: 2.5rem;
}
.service-intro-text p:last-child {
margin-bottom: 0;
}
.service-intro-text h2 {
font-family: var(--font-heading);
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 1.25rem;
}
.service-intro-text h2 em {
font-style: normal;
color: var(--color-primary);
}
.service-intro-text p {
margin-bottom: 1rem;
font-size: 1.0625rem;
color: var(--color-text-light);
line-height: 1.7;
}
.service-intro-text strong {
color: var(--color-text);
}
.service-intro-image img {
border-radius: var(--radius-lg);
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
}
.pricing-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
max-width: 720px;
margin: 0 auto;
}
.pricing-card {
background: var(--color-white);
box-shadow: var(--shadow-float);
border-radius: var(--radius-lg);
padding: 2rem 1.5rem;
text-align: center;
transition: transform var(--transition), box-shadow var(--transition);
display: flex;
flex-direction: column;
}
.pricing-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-float-lg);
}
.pricing-card h3 {
font-family: var(--font-heading);
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-text-light);
margin-bottom: 0.75rem;
}
.pricing-amount {
font-family: var(--font-heading);
font-size: 2.25rem;
font-weight: 700;
color: var(--color-dark);
margin-bottom: 1.5rem;
}
.pricing-amount span {
font-size: 1rem;
font-weight: 400;
}
.pricing-card:hover .pricing-amount {
color: var(--color-primary);
}
.pricing-card .features-list {
text-align: left;
margin-bottom: 1.5rem;
flex: 1;
}
.pricing-card .btn {
width: 100%;
margin-top: auto;
}
.included-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.included-item {
padding: 1.5rem;
background: var(--color-white);
border-radius: var(--radius);
box-shadow: var(--shadow-float);
}
.included-item h3 {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.included-item p {
font-size: 0.9375rem;
color: var(--color-text-light);
line-height: 1.6;
}
.faq-list {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
border: 1px solid var(--color-border);
border-radius: var(--radius);
margin-bottom: 0.75rem;
overflow: hidden;
}
.faq-item summary {
padding: 1.25rem 1.5rem;
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::after {
content: '+';
font-size: 1.25rem;
font-weight: 700;
color: var(--color-primary);
flex-shrink: 0;
margin-left: 1rem;
}
.faq-item[open] summary::after {
content: '\2212';
}
.faq-item p {
padding: 0 1.5rem 1.25rem;
color: var(--color-text-light);
line-height: 1.7;
}
.related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.related-card {
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-white);
box-shadow: var(--shadow-float);
transition: transform var(--transition), box-shadow var(--transition);
display: block;
color: var(--color-text);
}
.related-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-float-lg);
color: var(--color-text);
}
.related-card img {
width: 100%;
aspect-ratio: 16/10;
object-fit: cover;
}
.related-card h3 {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
padding: 1rem 1.25rem 0.25rem;
}
.related-card p {
padding: 0 1.25rem 1rem;
font-size: 0.875rem;
color: var(--color-primary);
font-weight: 600;
}
.section-cta-spaced {
margin-top: 3rem;
}
.section-cta {
background: var(--color-primary);
color: var(--color-white);
}
.section-cta h2 {
font-family: var(--font-heading);
font-size: 2rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.section-cta p {
font-size: 1.125rem;
margin-bottom: 1.5rem;
opacity: 0.9;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.section-cta .btn {
min-width: 200px;
text-align: center;
}
.section-cta .btn-primary {
background: var(--color-white);
color: var(--color-primary);
border-color: var(--color-white);
}
.section-cta .btn-primary:hover {
background: transparent;
color: var(--color-white);
border-color: var(--color-white);
}
.section-cta .btn-outline {
background: transparent;
border-color: var(--color-white);
color: var(--color-white);
}
.section-cta .btn-outline:hover {
background: var(--color-white);
color: var(--color-primary);
}
.has-dropdown {
position: relative;
}
.has-dropdown > .nav-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.dropdown-arrow {
transition: transform 0.3s ease;
opacity: 0.7;
}
.has-dropdown.open .dropdown-arrow {
transform: rotate(180deg);
opacity: 1;
}
.dropdown {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) scale(0.95);
transform-origin: top center;
background: var(--color-white);
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.08);
min-width: 230px;
padding: 0.5rem;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
z-index: 100;
}
.has-dropdown.open .dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) scale(1);
}
.dropdown li {
list-style: none;
}
.dropdown a {
display: block;
padding: 0.65rem 1rem;
font-family: var(--font-heading);
font-size: 0.8rem;
font-weight: 600;
color: var(--color-text-light);
border-radius: 8px;
transition: background 0.15s ease, color 0.15s ease;
letter-spacing: 0.3px;
}
.dropdown a:hover {
background: var(--color-primary);
color: var(--color-white);
}
.contact-intro {
max-width: 780px;
margin: -2rem auto 2.75rem;
text-align: center;
color: var(--color-text-light);
font-size: 1.0625rem;
line-height: 1.75;
}
.contact-intro a,
.contact-directions {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.contact-intro a:hover,
.contact-directions:hover {
color: var(--color-primary-dark);
}
.contact-directions {
display: inline-block;
margin-top: 0.5rem;
font-style: normal;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: 1.5rem;
align-items: start;
}
.contact-card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 2.25rem 2rem;
box-shadow: 0 1px 2px rgba(32, 63, 88, 0.04);
}
.contact-card h3 {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.25rem;
margin: 0 0 1.5rem;
color: var(--color-dark);
}
.contact-hitem{margin-bottom:1rem}.contact-hitem:last-child{margin-bottom:0}.contact-hval{font-size:1rem;font-variant-numeric:tabular-nums}.contact-hval.is-closed{color:var(--color-text-light)}.contact-card h4 {
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.8125rem;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--color-text-light);
margin: 2rem 0 0.9rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-border);
}
.contact-row {
display: flex;
gap: 1rem;
align-items: flex-start;
margin-bottom: 1.25rem;
}
.contact-ico {
flex: 0 0 42px;
height: 42px;
border-radius: 50%;
background: var(--color-primary);
display: grid;
place-items: center;
}
.contact-ico svg {
width: 19px;
height: 19px;
display: block;
}
.contact-row p,
.contact-row address {
margin: 0;
font-style: normal;
line-height: 1.6;
}
.contact-lab {
display: block;
font-family: var(--font-heading);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--color-text-light);
margin-bottom: 2px;
}
.contact-row a {
color: var(--color-text);
text-decoration: none;
transition: color var(--transition);
}
.contact-row a:hover {
color: var(--color-primary);
}

.contact-note {
font-size: 0.9375rem;
line-height: 1.75;
color: var(--color-text-light);
margin: 0 0 1.25rem;
}
.contact-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.form-field {
margin-bottom: 1.25rem;
}
.form-field label {
display: block;
font-family: var(--font-heading);
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0.5rem;
color: #333;
}
.form-field .required {
color: #c0392b;
}
.form-field input,
.form-field textarea {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid #ddd;
border-radius: var(--radius);
background: var(--color-white);
color: #333;
font-family: var(--font-body);
font-size: 0.9375rem;
box-sizing: border-box;
transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field textarea {
resize: vertical;
min-height: 150px;
}
.form-field input:focus,
.form-field textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(46, 90, 125, 0.13);
}
.contact-submit {
width: 100%;
}
.contact-formnote {
font-size: 0.875rem;
color: var(--color-text-light);
margin: 1rem 0 0;
text-align: center;
}
@media (max-width: 768px) {
.contact-grid,
.contact-form-row {
grid-template-columns: 1fr;
}
}
.legal-section {
padding: 4rem 0;
background-color: var(--color-white);
color: var(--color-dark);
}
.legal-section h1 {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 2rem;
color: var(--color-dark);
}
.legal-section h2 {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
margin-top: 2rem;
margin-bottom: 0.75rem;
color: var(--color-primary);
}
.legal-section h3 {
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 600;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
color: var(--color-dark);
}
.legal-section p {
font-family: var(--font-body);
font-size: 0.9375rem;
line-height: 1.8;
margin-bottom: 1rem;
color: #444;
}
.legal-section ul {
list-style: disc;
padding-left: 1.5rem;
margin-bottom: 1rem;
}
.legal-section ul li {
font-family: var(--font-body);
font-size: 0.9375rem;
line-height: 1.8;
color: #444;
}
.legal-section a {
color: var(--color-primary);
text-decoration: underline;
}
.legal-section a:hover {
color: var(--color-dark);
}
.legal-updated {
margin-top: 2.5rem;
font-style: italic;
color: #888 !important;
font-size: 0.875rem !important;
}
@media (max-width: 768px) {
.service-hero {
height: 250px;
}
.service-intro {
grid-template-columns: 1fr;
gap: 2rem;
}
.pricing-cards {
grid-template-columns: 1fr;
max-width: 400px;
}
.included-grid {
grid-template-columns: 1fr;
}
.related-grid {
grid-template-columns: 1fr;
}
.nav-drawer {
display: none;
}
.dropdown {
position: static;
opacity: 0;
visibility: hidden;
max-height: 0;
overflow: hidden;
transform: none;
box-shadow: none;
background: #f8f8f8;
padding: 0;
margin: 0;
border-radius: 0;
transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}
.dropdown.mobile-open {
opacity: 1;
visibility: visible;
max-height: 300px;
}
.dropdown a {
color: var(--color-dark);
padding: 0.5rem 1.5rem 0.5rem 2.5rem;
border-radius: 0;
font-weight: 500;
font-size: 0.8125rem;
white-space: nowrap;
display: block;
border-bottom: 1px solid #ebebeb;
}
.dropdown a:hover {
background: #f0f0f0;
color: var(--color-primary);
color: var(--color-white);
}
}
@media print {
.navbar, .hero-carousel, .lightbox, .map-section, .service-hero {
display: none;
}
.hero {
height: auto;
min-height: 0;
max-height: none;
margin-top: 0;
}
.section {
padding: 1.5rem 0;
}
body {
color: #000;
}
}
.wb-sec {
background:
radial-gradient(120% 78% at 50% 30%, rgba(255,255,255,.11), rgba(255,255,255,0) 62%),
var(--color-primary);
padding: 5.5rem 0 6rem;
overflow: hidden;
}
.wb-head { max-width: 48ch; margin: 0 auto 3rem; text-align: center; }
.wb-head.fade-el { opacity: 1; transform: none; transition: none; }
.wb-head.fade-el .wb-title,
.wb-head.fade-el .wb-sub { opacity: 0; }
.wb-head.fade-el.in .wb-title { animation: heading-focus 0.9s var(--ease-out-soft) both; }
.wb-head.fade-el.in .wb-sub { animation: heading-fade 0.7s ease 0.55s both; }.wb-title {
font-family: var(--font-heading); font-weight: 300;
font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.06;
letter-spacing: -.03em; margin: 0 0 .9rem; color: #FFFFFF;
text-wrap: balance;
}
.wb-title b { font-weight: 700; }
.wb-title em { font-style: normal; color: #A9CBE4; }
.wb-sub { color: rgba(255,255,255,.78); font-size: 1rem; line-height: 1.7; margin: 0; }
.wb-stage { perspective: 1500px; perspective-origin: 50% 42%; }
.wb {
position: relative; max-width: 1140px; margin: 0 auto;
transform-style: flat;
transform: rotateY(-7deg) rotateX(2.4deg);
transition: transform .9s cubic-bezier(.22,1,.36,1);
will-change: transform;
}
.wb-frame {
position: relative; border-radius: 7px; padding: 15px;
background:
linear-gradient(148deg, #FDFDFE 0%, #D7DBDF 18%, #EDEFF2 38%,
#C3C8CE 62%, #E6E9EC 82%, #B8BEC5 100%);
box-shadow:
0 1px 0 #A8AEB5, 0 2px 0 #9EA4AB, 0 3px 0 #949AA1,
0 4px 0 #8C9299, 0 5px 0 #868C93, 0 6px 0 #81878E,
0 7px 0 #7C828A, 0 8px 0 #777D85, 0 9px 0 #727880,
0 10px 0 #6D737B, 0 11px 0 #696F77,
0 30px 42px -12px rgba(6,18,30,.46),
0 74px 96px -30px rgba(6,18,30,.42);
}
.wb-frame::before, .wb-frame::after {
content: ""; position: absolute; width: 30px; height: 30px;
background: linear-gradient(140deg, #6E747B, #40464D);
pointer-events: none;
}
.wb-frame::before { left: 0; top: 0; border-radius: 7px 0 26px 0; }
.wb-frame::after  { right: 0; bottom: 0; border-radius: 26px 0 7px 0; }
.wb-surface {
position: relative; border-radius: 2px; padding: 2.6rem 2.4rem 2.9rem;
background:
linear-gradient(118deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 26%),
linear-gradient(200deg, #FFFFFF 0%, #FAFBFC 55%, #F3F5F7 100%);
box-shadow: inset 0 1px 3px rgba(22,32,42,.16),
inset 0 -1px 0 rgba(255,255,255,.9);
overflow: hidden;
}
.wb-surface::before {
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
background:
radial-gradient(52% 26% at 18% 22%, rgba(120,140,160,.10), transparent 70%),
radial-gradient(40% 20% at 74% 62%, rgba(140,120,130,.09), transparent 70%),
radial-gradient(30% 34% at 47% 86%, rgba(120,150,140,.07), transparent 70%);
}
.wb-surface::after {
content: ""; position: absolute; top: -40%; left: -12%; width: 46%; height: 190%;
transform: rotate(17deg); pointer-events: none;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
opacity: .55;
}
.wb-cols {
position: relative; z-index: 2;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem 2rem;
align-items: start;
}
.wb-col h3 { margin: 0 0 .1rem; }
.wb-room {
display: inline-block; text-decoration: none;
font-family: var(--marker); font-weight: 400; font-size: 1.22rem;
letter-spacing: .015em; color: #2E5A7D;
text-transform: uppercase;
transition: color .25s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.wb-room:hover, .wb-room:focus-visible {
color: #16374F; transform: translateX(3px);
}
.wb-room:focus-visible,
.wb-more:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 3px;
border-radius: 3px;
}
.wb-col .cap {
font-family: var(--marker); font-size: .78rem; color: #7F91A1;
display: block; margin-bottom: .55rem;
}
.wb-rule { display: block; width: 100%; height: 7px; margin-bottom: .7rem; overflow: visible; }
.wb-rule path { fill: none; stroke: #2E5A7D; stroke-width: 2; stroke-linecap: round;
stroke-dasharray: 260; stroke-dashoffset: 0; }
.wb-list { list-style: none; margin: 0; padding: 0; }
.wb-list li { position: relative; }
.wb-item {
display: block; position: relative; text-decoration: none;
font-family: var(--marker); font-size: 1.02rem; line-height: 1.55;
color: #24384A; padding: .06rem 0 .06rem .95rem;
transition: color .25s ease;
}
.wb-item::before {
content: "-"; position: absolute; left: 0; color: #8FA3B4;
}
.wb-item:hover, .wb-item:focus-visible { color: #10293D; outline: none; }
.wb-more {
display: inline-block; margin-top: .5rem; margin-left: .95rem;
text-decoration: none; font-family: var(--marker); font-size: .92rem;
color: #7F91A1;
transition: color .25s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.wb-more:hover, .wb-more:focus-visible {
color: #2E5A7D; transform: translateX(3px);
}
.wb-ring {
position: absolute; left: -10px; top: 50%; width: calc(100% + 22px); height: 2.05em;
transform: translateY(-50%); pointer-events: none; overflow: visible;
}
.wb-ring ellipse {
fill: none; stroke: #2E5A7D; stroke-width: 2.1; stroke-linecap: round;
stroke-dasharray: 420; stroke-dashoffset: 420;
transition: stroke-dashoffset .55s cubic-bezier(.22,1,.36,1);
}
.wb-item:focus-visible ~ .wb-ring ellipse { stroke-dashoffset: 0; }
@media (hover: hover) and (pointer: fine) {
    .wb-list li:hover .wb-ring ellipse { stroke-dashoffset: 0; }
}
.wb-board-title { position: relative; z-index: 2; margin-bottom: 1.5rem; }
.wb-board-title span {
font-family: var(--marker); font-size: 1.5rem; color: #24384A;
letter-spacing: .01em;
}
.wb-rule--title { width: 240px; margin-top: .1rem; }
.wb-note {
grid-column: 3 / -1;
border: 2px solid #2E5A7D; border-radius: 3px;
padding: .6rem .9rem .7rem; margin-top: .9rem;
transform: rotate(-.35deg);
}
.wb-note-h {
display: block; font-family: var(--marker); font-size: .92rem;
color: #2E5A7D; text-transform: uppercase; letter-spacing: .02em;
margin-bottom: .1rem;
}
.wb-note p {
margin: 0; font-family: var(--marker); font-size: .82rem; line-height: 1.5;
color: #24384A;
}
.wb-tray {
position: relative; height: 20px; width: 74%; margin: 0 auto;
border-radius: 0 0 5px 5px;
background: linear-gradient(180deg, #C7CCD2 0%, #9AA1A9 46%, #7E858D 100%);
box-shadow: 0 1px 0 #767D85, 0 2px 0 #6E757D, 0 3px 0 #686F77,
0 14px 22px -8px rgba(22,32,42,.36);
}
.wb-pen {
position: absolute; top: 4px; height: 8px; border-radius: 4px;
box-shadow: 0 1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.5);
}
.wb-pen.blue  { left: 12%; width: 96px; background: linear-gradient(180deg,#4E86B8,#24486A); }
.wb-pen.green { left: 29%; width: 84px; background: linear-gradient(180deg,#48A578,#2C7350); }
.wb-pen.red   { left: 68%; width: 82px; background: linear-gradient(180deg,#E05B4B,#B3382A); }
.wb-sec.wb-armed .wb-item {
-webkit-mask-image: linear-gradient(90deg, #000 0 0);
mask-image: linear-gradient(90deg, #000 0 0);
-webkit-mask-size: 0% 100%;  mask-size: 0% 100%;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.wb-sec.wb-armed .wb-rule path { stroke-dashoffset: 260; }
.wb-sec.wb-armed.is-writing .wb-rule path { animation: wb-draw .55s cubic-bezier(.22,1,.36,1) forwards; }
.wb-sec.wb-armed.is-writing .wb-item      { animation: wb-write .42s cubic-bezier(.3,.9,.4,1) forwards; }
@keyframes wb-draw  { to { stroke-dashoffset: 0; } }
@keyframes wb-write { to { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } }
@media (max-width: 900px) {
.wb { transform: none; }
.wb-cols { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.wb-note { grid-column: 1 / -1; margin-top: .4rem; }
.wb-board-title span { font-size: 1.25rem; }
.wb-surface { padding: 1.8rem 1.4rem 2rem; }
}
@media (max-width: 560px) { .wb-cols { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
.wb { transform: none; transition: none; }
.wb-item { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; animation: none !important; }
.wb-rule path { stroke-dashoffset: 0; animation: none !important; }
.wb-ring ellipse { transition: none; }
}
.service-icon, .facility-icon { overflow: hidden; }
.anim-idle, .anim-idle * { animation-play-state: paused !important; }
.service-icon svg, .facility-icon svg { overflow: visible; }
.service-icon svg, .facility-icon svg { width: 70%; height: 70%; flex: 0 0 auto; }
.service-icon svg *, .facility-icon svg * { transform-box: view-box; }
.service-icon svg [stroke], .facility-icon svg [stroke] { stroke-linecap: round; stroke-linejoin: round; }
.fd-upper{transform-origin:14.2px 28.5px;animation:fdLean 4s ease-in-out infinite}
@keyframes fdLean{0%,8%{transform:rotate(0)}16%,62%{transform:rotate(2.4deg)}76%,100%{transform:rotate(0)}}
.fd-arm{transform-origin:15.8px 19.8px;animation:fdArm 4s linear infinite}
@keyframes fdArm{0%,17%{transform:rotate(0)}20%{transform:rotate(5deg)}23%{transform:rotate(0)}26%{transform:rotate(5deg)}29%{transform:rotate(0)}32%{transform:rotate(5deg)}35%{transform:rotate(0)}38%{transform:rotate(5deg)}41%{transform:rotate(0)}44%{transform:rotate(5deg)}47%{transform:rotate(0)}50%{transform:rotate(5deg)}53%{transform:rotate(0)}56%{transform:rotate(5deg)}59%,100%{transform:rotate(0)}}
.fd-head{animation:fdHead 4s linear infinite}
@keyframes fdHead{0%,19%{transform:translateY(0)}22%{transform:translateY(.5px)}25%,31%{transform:translateY(0)}34%{transform:translateY(.5px)}37%,43%{transform:translateY(0)}46%{transform:translateY(.5px)}49%,55%{transform:translateY(0)}58%{transform:translateY(.5px)}61%,100%{transform:translateY(0)}}
.fd-screen{animation:fdScreen 4s ease infinite}
@keyframes fdScreen{0%{opacity:.1}9%,86%{opacity:.5}96%,100%{opacity:.1}}
.fd-kb{animation:fdKb 4s ease infinite}
@keyframes fdKb{0%,17%{opacity:.28}20%,58%{opacity:.6}72%,100%{opacity:.28}}
.fd-t1{stroke-dasharray:7.6;animation:fdT1 4s linear infinite}
.fd-t2{stroke-dasharray:5.8;animation:fdT2 4s linear infinite}
.fd-t3{stroke-dasharray:7.6;animation:fdT3 4s linear infinite}
@keyframes fdT1{0%,19%{stroke-dashoffset:7.6;opacity:.92}31%,86%{stroke-dashoffset:0;opacity:.92}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes fdT2{0%,33%{stroke-dashoffset:5.8;opacity:.92}44%,86%{stroke-dashoffset:0;opacity:.92}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes fdT3{0%,46%{stroke-dashoffset:7.6;opacity:.92}58%,86%{stroke-dashoffset:0;opacity:.92}95%,100%{stroke-dashoffset:0;opacity:0}}
.cf-p1{animation:cfT1 3.6s var(--ease-out-soft) infinite}
.cf-p2{animation:cfT2 3.6s var(--ease-out-soft) infinite}
.cf-p3{animation:cfT3 3.6s var(--ease-out-soft) infinite}
@keyframes cfT1{0%,4%{transform:translateY(0)}10%{transform:translateY(-1.2px)}17%,100%{transform:translateY(0)}}
@keyframes cfT2{0%,26%{transform:translateY(0)}32%{transform:translateY(-1.2px)}39%,100%{transform:translateY(0)}}
@keyframes cfT3{0%,48%{transform:translateY(0)}54%{transform:translateY(-1.2px)}61%,100%{transform:translateY(0)}}
.cf-people{animation:cfDip 3.6s ease-in-out infinite}
@keyframes cfDip{0%,72%,86%,100%{transform:translateY(0)}79%{transform:translateY(1.6px)}}
.br-s1{animation:brS1 6s var(--ease-out-soft) infinite}
@keyframes brS1{0%,45%{transform:translateX(0)}50%,70%{transform:translateX(-30px)}70.1%,95%{transform:translateX(30px)}100%{transform:translateX(0)}}
.br-s2{animation:brS2 6s var(--ease-out-soft) infinite}
@keyframes brS2{0%,45%{transform:translateX(30px)}50%,95%{transform:translateX(0)}100%{transform:translateX(-30px)}}
.br-b1,.br-b2,.br-b3,.br-b4{transform-origin:24px 25.6px}
.br-b1{animation:brB1 6s var(--ease-out-soft) infinite}
.br-b2{animation:brB2 6s var(--ease-out-soft) infinite}
.br-b3{animation:brB3 6s var(--ease-out-soft) infinite}
.br-b4{animation:brB4 6s var(--ease-out-soft) infinite}
@keyframes brB1{0%,4%{transform:scaleY(0)}14%,50%{transform:scaleY(1)}60%,100%{transform:scaleY(0)}}
@keyframes brB2{0%,8%{transform:scaleY(0)}18%,50%{transform:scaleY(1)}60%,100%{transform:scaleY(0)}}
@keyframes brB3{0%,12%{transform:scaleY(0)}22%,50%{transform:scaleY(1)}60%,100%{transform:scaleY(0)}}
@keyframes brB4{0%,16%{transform:scaleY(0)}26%,50%{transform:scaleY(1)}60%,100%{transform:scaleY(0)}}
.br-p1{animation:brP1 6s ease infinite}
.br-p2{animation:brP2 6s ease infinite}
.br-p3{animation:brP3 6s ease infinite}
@keyframes brP1{0%,52%{opacity:0}58%,95%{opacity:1}96%,100%{opacity:0}}
@keyframes brP2{0%,58%{opacity:0}64%,95%{opacity:1}96%,100%{opacity:0}}
@keyframes brP3{0%,64%{opacity:0}70%,95%{opacity:1}96%,100%{opacity:0}}
.vo-keys{opacity:.35;animation:voKeys 4s ease infinite}
@keyframes voKeys{0%{opacity:.35}6%{opacity:.9}12%,88%{opacity:.7}98%,100%{opacity:.35}}
.vo-scr{animation:voScr 4s ease infinite}
@keyframes voScr{0%{opacity:.1}6%{opacity:.45}12%,88%{opacity:.25}98%,100%{opacity:.1}}
.vo-bld{transform-origin:17px 20px;animation:voBld 4s var(--ease-spring) infinite}
@keyframes voBld{0%,8%{opacity:0;transform:scale(.5)}12%{opacity:.7}19%{opacity:1;transform:scale(1.05)}24%,88%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.5)}}
.vw3{animation:vw3k 4s ease infinite}.vw6{animation:vw6k 4s ease infinite}
.vw1{animation:vw1k 4s ease infinite}.vw8{animation:vw8k 4s ease infinite}
.vw4{animation:vw4k 4s ease infinite}.vw2{animation:vw2k 4s ease infinite}
.vw7{animation:vw7k 4s ease infinite}.vw5{animation:vw5k 4s ease infinite}
@keyframes vw3k{0%,26%{opacity:0}30%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes vw6k{0%,30%{opacity:0}34%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes vw1k{0%,34%{opacity:0}38%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes vw8k{0%,38%{opacity:0}42%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes vw4k{0%,42%{opacity:0}46%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes vw2k{0%,46%{opacity:0}50%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes vw7k{0%,50%{opacity:0}54%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes vw5k{0%,54%{opacity:0}58%,88%{opacity:1}96%,100%{opacity:0}}
.po-door{transform-origin:14.2px 25.1px;animation:poDoor 4.4s var(--ease-out-soft) infinite}
@keyframes poDoor{0%,12%{transform:scaleX(1)}32%,80%{transform:scaleX(.2)}94%,100%{transform:scaleX(1)}}
.po-glow{animation:poGlow 4.4s ease infinite}
@keyframes poGlow{0%,16%{opacity:.04}34%,80%{opacity:.12}92%,100%{opacity:.04}}
.po-inside{animation:poInside 4.4s ease infinite}
@keyframes poInside{0%,18%{opacity:0}36%,80%{opacity:1}90%,100%{opacity:0}}
.ev-lamp{animation:evLamp 4s ease-in-out infinite}
@keyframes evLamp{0%,6%{opacity:.62}16%,80%{opacity:1}92%,100%{opacity:.62}}
.ev-beam{transform-origin:24px 14px;animation:evBeam 4s var(--ease-out-soft) infinite}
@keyframes evBeam{0%,6%{opacity:0;transform:scaleY(.12)}20%,80%{opacity:.22;transform:scaleY(1)}92%,100%{opacity:0;transform:scaleY(.12)}}
.wf-a1{animation:wfA1 3.4s ease-in-out infinite}
.wf-a2{animation:wfA2 3.4s ease-in-out infinite}
.wf-a3{animation:wfA3 3.4s ease-in-out infinite}
@keyframes wfA1{0%,100%{opacity:.4}14%,60%{opacity:1}82%{opacity:.4}}
@keyframes wfA2{0%,100%{opacity:.4}23%,60%{opacity:1}85%{opacity:.4}}
@keyframes wfA3{0%,100%{opacity:.4}32%,60%{opacity:1}88%{opacity:.4}}
.wf-all{transform-origin:24px 33px;animation:wfSwell 3.4s ease-in-out infinite}
@keyframes wfSwell{0%,100%{transform:scale(1)}42%{transform:scale(1.045)}}
.wf-t1{animation:wfT1 3.4s ease-in-out infinite}
.wf-t2{animation:wfT2 3.4s ease-in-out infinite}
.wf-t3{animation:wfT3 3.4s ease-in-out infinite}
@keyframes wfT1{0%,100%{opacity:0}24%,64%{opacity:1}86%{opacity:0}}
@keyframes wfT2{0%,100%{opacity:0}31%,64%{opacity:1}88%{opacity:0}}
@keyframes wfT3{0%,100%{opacity:0}38%,64%{opacity:1}90%{opacity:0}}
.pw-bolt{transform-origin:24px 18px;animation:pwBolt 3.4s var(--ease-out-soft) infinite}
@keyframes pwBolt{0%,4%{transform:scale(1)}8%{transform:scale(1.1)}12%{transform:scale(1.03)}16%{transform:scale(1.08)}22%,100%{transform:scale(1)}}
.pw-boltfill{animation:pwFillF 3.4s linear infinite}
@keyframes pwFillF{0%,4%{opacity:0}7%,15%{opacity:.55}10%,19%,26%,100%{opacity:.12}}
.pw-charge{transform-origin:15px 40px;animation:pwCharge 3.4s linear infinite}
@keyframes pwCharge{0%,24%{transform:scaleX(0)}56%,88%{transform:scaleX(1)}98%,100%{transform:scaleX(0)}}
.pw-bar{animation:pwTop 3.4s ease infinite}
@keyframes pwTop{0%,56%,66%,100%{opacity:1}60%{opacity:.45}}
.lk-case { fill: var(--color-primary); }
.lk-shackle{transform-origin:18px 22.5px;animation:lkShackle 2.4s ease-in-out infinite}
@keyframes lkShackle{0%,10%{transform:rotate(-40deg)}26%,64%{transform:rotate(0deg)}100%{transform:rotate(-40deg)}}
.lk-body{transform-origin:24px 31px;animation:lkBody 2.4s var(--ease-out-soft) infinite}
@keyframes lkBody{0%,23%{transform:scale(1)}28%{transform:scale(1.05)}37%,100%{transform:scale(1)}}
.lk-hole{animation:lkHole 2.4s ease-in-out infinite}
@keyframes lkHole{0%,20%{opacity:.38}29%,64%{opacity:1}100%{opacity:.38}}
.rc-btn{transform-origin:24px 14px;animation:rcBtn 2.8s var(--ease-out-soft) infinite}
@keyframes rcBtn{0%,8%{transform:translateY(0) scaleY(1)}16%{transform:translateY(2.6px) scaleY(.9)}24%{transform:translateY(-0.9px) scaleY(1.02)}32%,100%{transform:translateY(0) scaleY(1)}}
.rc-stem{transform-origin:24px 17.2px;animation:rcStem 2.8s var(--ease-out-soft) infinite}
@keyframes rcStem{0%,8%{transform:scaleY(1)}16%{transform:scaleY(.13)}24%{transform:scaleY(1.28)}32%,100%{transform:scaleY(1)}}
.rc-dome{transform-origin:24px 30px;animation:rcDome 2.8s var(--ease-out-soft) infinite}
@keyframes rcDome{
0%,12%{transform:translateX(0) scaleY(1)}
17%{transform:translateX(0) scaleY(.93)}
20%{transform:translateX(-0.85px) scaleY(1)}
23%{transform:translateX(0.68px) scaleY(1)}
26%{transform:translateX(-0.46px) scaleY(1)}
29%{transform:translateX(0.3px) scaleY(1)}
32%{transform:translateX(-0.16px) scaleY(1)}
36%,100%{transform:translateX(0) scaleY(1)}
}
.fp-scan{animation:fpScan 3.6s ease-in-out infinite}
.fp-trail{animation:fpTrail 3.6s ease-in-out infinite;filter:blur(1.2px)}
@keyframes fpScan{0%,5%{opacity:0;transform:translateY(0)}9%{opacity:1}36%{opacity:1;transform:translateY(38px)}42%,100%{opacity:0;transform:translateY(38px)}}
@keyframes fpTrail{0%,6%{opacity:0;transform:translateY(0)}10%{opacity:.3}37%{opacity:.3;transform:translateY(38px)}43%,100%{opacity:0;transform:translateY(38px)}}
.fp-g1,.fp-g2,.fp-g3,.fp-g4,.fp-g5,.fp-g6{animation:fpRidge 3.6s ease infinite}
@keyframes fpRidge{0%,14%{stroke:#fff}26%,74%{stroke:#7ddfa5}88%,100%{stroke:#fff}}
.kc-s1,.kc-s2,.kc-s3{stroke-dasharray:7 34;filter:blur(.65px);opacity:.8}
.kc-s1{animation:kcSteam 1.7s linear infinite}
.kc-s2{animation:kcSteam 1.7s linear .55s infinite}
.kc-s3{animation:kcSteam 1.7s linear 1.1s infinite}
@keyframes kcSteam{from{stroke-dashoffset:41}to{stroke-dashoffset:0}}
.kc-stream{transform-origin:22px 5px;animation:kcPour 5s ease-in-out infinite}
.kc-stream2{transform-origin:22px 19px;animation:kcPour 5s ease-in-out infinite;opacity:0}
@keyframes kcPour{0%,4%{opacity:0;transform:scaleY(0) scaleX(1)}8%{opacity:1;transform:scaleY(1)}26%{opacity:1;transform:scaleY(1) scaleX(1.1)}30%,100%{opacity:0;transform:scaleY(1)}}
.kc-liquid{animation:kcRise 5s var(--ease-out-soft) infinite}
@keyframes kcRise{0%,6%{transform:translateY(9px)}24%{transform:translateY(-2.2px)}30%{transform:translateY(.9px)}36%{transform:translateY(-.5px)}42%,88%{transform:translateY(0)}98%,100%{transform:translateY(9px)}}
.kc-surface{transform-origin:24px 24px;animation:kcSlosh 5s ease-in-out infinite}
@keyframes kcSlosh{0%,24%{transform:rotate(0)}28%{transform:rotate(3deg)}33%{transform:rotate(-2.6deg)}38%{transform:rotate(2.1deg)}43%{transform:rotate(-1.5deg)}48%{transform:rotate(.9deg)}53%,100%{transform:rotate(0)}}
.kc-b1{animation:kcB1 5s ease infinite}
.kc-b2{animation:kcB2 5s ease infinite}
.kc-b3{animation:kcB3 5s ease infinite}
.kc-b4{animation:kcB4 5s ease infinite}
@keyframes kcB1{0%,40%{opacity:0;transform:translateY(0)}44%{opacity:.9}52%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes kcB2{0%,45%{opacity:0;transform:translateY(0)}49%{opacity:.9}57%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes kcB3{0%,50%{opacity:0;transform:translateY(0)}54%{opacity:.9}62%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes kcB4{0%,55%{opacity:0;transform:translateY(0)}59%{opacity:.9}67%,100%{opacity:0;transform:translateY(-5px)}}
.kc-d1{animation:kcD1 5s ease-in-out infinite}
.kc-d2{animation:kcD2 5s ease-in-out infinite}
.kc-d3{animation:kcD3 5s ease-in-out infinite}
@keyframes kcD1{0%,22%{opacity:0;transform:translate(0,0)}24%{opacity:1}32%,100%{opacity:0;transform:translate(-6px,-9px)}}
@keyframes kcD2{0%,24%{opacity:0;transform:translate(0,0)}26%{opacity:1}34%,100%{opacity:0;transform:translate(2px,-9px)}}
@keyframes kcD3{0%,26%{opacity:0;transform:translate(0,0)}28%{opacity:1}36%,100%{opacity:0;transform:translate(7px,-9px)}}
.kc-glint{animation:kcGlint 5s ease infinite}
@keyframes kcGlint{0%,68%,80%,100%{opacity:0}73%{opacity:.95}}
.pr-sheet{animation:prSheet 4.4s var(--ease-out-soft) infinite}
@keyframes prSheet{0%,6%{transform:translateY(11px)}22%,86%{transform:translateY(0)}96%,100%{transform:translateY(11px)}}
.pr-led{animation:prLed 4.4s linear infinite}
@keyframes prLed{0%,5%,9%,13%,17%,21%,100%{opacity:1}7%,11%,15%,19%{opacity:.2}}
.pr-scan{animation:prScan 4.4s linear infinite}
@keyframes prScan{0%,30%{opacity:0;transform:translateY(0)}33%{opacity:1}46%{opacity:1}56%,100%{opacity:0;transform:translateY(9.5px)}}
.ac-louvre{transform-origin:24px 17.2px;animation:acLouvre 3.8s var(--ease-out-soft) infinite}
@keyframes acLouvre{0%,6%{transform:scaleY(1)}16%,86%{transform:scaleY(2.7)}96%,100%{transform:scaleY(1)}}
.ac-w1{stroke-dasharray:9 30;animation:acW1 3.8s linear infinite}
.ac-w2{stroke-dasharray:9 30;animation:acW2 3.8s linear infinite}
.ac-w3{stroke-dasharray:9 30;animation:acW3 3.8s linear infinite}
@keyframes acW1{0%,14%{stroke-dashoffset:39;opacity:.4}18%{opacity:1}86%{stroke-dashoffset:-117;opacity:1}92%,100%{stroke-dashoffset:-117;opacity:.4}}
@keyframes acW2{0%,18%{stroke-dashoffset:39;opacity:.4}22%{opacity:1}88%{stroke-dashoffset:-117;opacity:1}94%,100%{stroke-dashoffset:-117;opacity:.4}}
@keyframes acW3{0%,22%{stroke-dashoffset:39;opacity:.4}26%{opacity:1}90%{stroke-dashoffset:-117;opacity:1}96%,100%{stroke-dashoffset:-117;opacity:.4}}
.facility.fade-el.in:hover {
transform: translateY(-6px);
}
.pricing-card.fade-el.in:hover {
transform: translateY(-4px);
}
.related-card.fade-el.in:hover {
transform: translateY(-4px);
}
.facility.fade-el, .pricing-card.fade-el, .related-card.fade-el,
.service-card.will-reveal, .room-use.fade-el {
transition: opacity 0.55s ease, transform 0.6s var(--ease-out-soft),
box-shadow 0.5s var(--ease-out-soft), border-color 0.25s ease;
}
.facility.fade-el.in:hover,
.pricing-card.fade-el.in:hover,
.related-card.fade-el.in:hover {
transition-delay: 0s;
}
.nav-drawer{
position:absolute;
top:calc(100% + 23px);
left:50%;
margin-left:-150px;
width:300px;
z-index:300;
}
.nav-drawer .drawer-slot{
position:relative;
overflow:hidden;
height:0;
pointer-events:none;
}
.nav-drawer.is-open .drawer-slot,
.nav-drawer.is-closing .drawer-slot{
height:calc(var(--drawer-h, 0px) + 5px);
}
.nav-drawer.is-open .drawer-slot{ pointer-events:auto; }
.nav-drawer .drawer-runners{
position:absolute; left:0; right:0; top:0; bottom:5px;
z-index:4; pointer-events:none;
border-left:1px solid rgba(24,20,16,.13);
border-right:1px solid rgba(24,20,16,.13);
opacity:0; transition:opacity .2s ease;
}
.nav-drawer.is-open .drawer-runners{ opacity:1; }
.nav-drawer .cabinet-lip{
position:absolute; left:0; right:0; top:0; height:1px; z-index:6;
background:rgba(18,28,42,.42);
box-shadow:0 1px 2px rgba(12,20,32,.34),0 4px 7px -2px rgba(12,20,32,.30),0 12px 22px -8px rgba(12,20,32,.26);
opacity:0; transition:opacity .24s ease;
}
.nav-drawer.is-open .cabinet-lip{ opacity:1; }
.nav-drawer .cabinet-mouth{
position:absolute; left:-3px; right:-3px; top:-5px; height:6px; z-index:7;
pointer-events:none; border-radius:2px 2px 0 0;
background:linear-gradient(180deg, rgba(10,16,26,0) 0 1px, rgba(10,16,26,.30) 2.5px, rgba(12,20,32,.68) 100%);
box-shadow:0 2px 5px -1px rgba(10,16,26,.45);
opacity:0; transition:opacity .24s ease;
}
.nav-drawer.is-open .cabinet-mouth,
.nav-drawer.is-closing .cabinet-mouth{ opacity:1; }
.nav-drawer .cabinet-shadow{
position:absolute; left:0; right:0; top:0; height:26px; z-index:5;
pointer-events:none;
background:linear-gradient(180deg, rgba(6,10,18,.55), rgba(6,10,18,0));
opacity:0;
}
.nav-drawer.is-open .cabinet-shadow{ animation:cabinet-dark .62s cubic-bezier(.16,1,.3,1) both; }
@keyframes drawer-out{
0%   { transform:translateY(-100.5%) scale(.986);
box-shadow:0 1px 2px rgba(12,18,30,.12);
animation-timing-function:cubic-bezier(.32,0,.5,.30); }
9%   { transform:translateY(-98.3%) scale(.987);
animation-timing-function:cubic-bezier(.18,.62,.24,1); }
74%  { transform:translateY(-3.2%) scale(.9985); }
90%  { transform:translateY(.7%) scale(1.0012); }
100% { transform:none;
box-shadow:0 1px 2px rgba(12,18,30,.18); }
}
@keyframes drawer-in{
0%   { transform:none; animation-timing-function:cubic-bezier(.4,0,.85,.35); }
100% { transform:translateY(-100.5%) scale(.986); }
}
@keyframes cabinet-dark{ 0%,10%{opacity:1} 100%{opacity:.42} }
@keyframes cabinet-jolt{ 0%,84%{transform:none} 89%{transform:translateY(1px)} 95%{transform:translateY(-.3px)} 100%{transform:none} }
.nav-drawer .drawer-body{
position:relative; z-index:1;
background:#264765;
border-radius:0 0 12px 12px;
transform-origin:top center;
transform:translateY(-100.5%) scale(.986);
box-shadow:0 1px 2px rgba(12,18,30,.18);
}
.nav-drawer.is-open .drawer-body{ animation:drawer-out .62s linear both; }
.nav-drawer.is-closing .drawer-body{ animation:drawer-in .34s linear both; }
.nav-drawer.is-open .cabinet-lip,
.nav-drawer.is-open .drawer-runners{ animation:cabinet-jolt .62s linear both; }
.has-dropdown > .nav-link.is-jolt{ animation:cabinet-jolt .62s linear both; }
.nav-drawer .drawer-inner{
position:relative;
padding:13px 12px 10px;
background:
radial-gradient(70% 55% at 0% 0%,   rgba(6,12,20,.42), rgba(6,12,20,0) 62%),
radial-gradient(70% 55% at 100% 0%, rgba(6,12,20,.42), rgba(6,12,20,0) 62%),
radial-gradient(130% 60% at 50% 116%, rgba(6,12,20,.45), rgba(6,12,20,0) 64%),
radial-gradient(120% 90% at 30% 0%, rgba(77,123,163,.26), rgba(77,123,163,0) 70%),
linear-gradient(180deg, #1b3149, #203a54 60%, #264765 100%);
}
.nav-drawer .drawer-walls{
position:absolute; left:0; right:0; top:0; bottom:30px; z-index:3; pointer-events:none;
background:
linear-gradient(90deg, #4d7ba3 0 1px, #3a648a 1px 5px, #22405c 5px 6.5px, rgba(10,22,34,.45) 6.5px 9px, rgba(10,22,34,0) 15px),
linear-gradient(270deg, #4d7ba3 0 1px, #3a648a 1px 5px, #22405c 5px 6.5px, rgba(10,22,34,.45) 6.5px 9px, rgba(10,22,34,0) 15px),
linear-gradient(180deg, #4d7ba3 0 1px, #3a648a 1px 4.5px, #1f3b55 4.5px 6px, rgba(10,22,34,.50) 6px 9px, rgba(10,22,34,0) 16px);
}
.nav-drawer .drawer-front{
position:relative; z-index:4; height:32px;
border-radius:0 0 12px 12px;
background:
linear-gradient(180deg, #4d7ba3 0 1px, #3a648a 1px 6px, #1d3852 6px 7.5px, rgba(0,0,0,0) 7.5px),
linear-gradient(180deg, #2e5a7d 8px, #2b5070 58%, #1f3b56 100%);
box-shadow:0 -4px 8px -4px rgba(10,22,34,.55);
}
.nav-drawer .handle{
position:absolute; left:50%; bottom:3px;
width:122px; height:20px; margin-left:-61px;
}
.nav-drawer .pile{
position:absolute; left:50%; top:16px;
width:236px; margin-left:-118px;
aspect-ratio:1 / 1.414;
z-index:0; pointer-events:none;
}
.nav-drawer .pile span{
position:absolute; inset:0; border-radius:1px;
background:linear-gradient(172deg, #fdfcf9, #f4f1ea);
box-shadow:0 0 0 1px rgba(60,52,40,.16),0 2px 4px -1px rgba(6,10,18,.35);
}
.nav-drawer .pile span:nth-child(1){ transform:rotate(-2.1deg) translate(-4px, 3px); }
.nav-drawer .pile span:nth-child(2){ transform:rotate(1.4deg)  translate(5px, 1px); }
.nav-drawer .pile span:nth-child(3){ transform:rotate(-.6deg)  translate(1px, -2px); }
.nav-drawer .sheet{
position:relative; z-index:1;
width:236px; margin:0 auto;
aspect-ratio:1 / 1.414;
border-radius:1px; overflow:hidden;
background:#fdfdfc;
padding:15px 13px;
box-shadow:0 0 0 1px rgba(60,52,40,.20),0 2px 3px -1px rgba(6,10,18,.45),0 6px 10px -4px rgba(6,10,18,.40),0 16px 26px -12px rgba(6,10,18,.45);
}
.nav-drawer .sheet::after{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background:
linear-gradient(148deg, rgba(255,255,255,.55) 0 18%, rgba(120,110,92,0) 46%, rgba(120,110,92,.06) 78%, rgba(120,110,92,.13) 100%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23p)' opacity='.035'/%3E%3C/svg%3E");
}
.nav-drawer .dtable{
position:relative; z-index:1;
display:grid;
grid-template-rows:repeat(8, 1fr);
height:100%;
}
.nav-drawer .drow{ position:relative; box-shadow:inset 0 -1px 0 #dfe3e8; }
.nav-drawer .drow:last-child{ box-shadow:none; }
.nav-drawer .dcell{
position:relative; display:flex; align-items:center;
height:100%; padding:0 11px;
font-family:var(--font-heading);
font-size:13.5px; font-weight:600;
color:#26313f; text-decoration:none;
-webkit-tap-highlight-color:transparent;
}
.nav-drawer .dcell.dempty{ pointer-events:none; }
.nav-drawer a.dcell{ cursor:pointer; transition:background-color .2s ease, color .2s ease, transform .3s var(--ease-out-soft), box-shadow .3s var(--ease-out-soft); }
.nav-drawer a.dcell:hover,
.nav-drawer a.dcell:focus-visible{
background:rgba(50,89,123,.08);
color:#25455f;
transform:translateY(-2px);
box-shadow:0 3px 8px -2px rgba(20,32,48,.25);
}
.nav-drawer a.dcell::before{
content:""; position:absolute; inset:0;
border:1.5px solid #2e5a7d;
box-shadow:0 0 0 3px rgba(50,89,123,.09);
opacity:0; transition:opacity .18s ease;
pointer-events:none;
}
.nav-drawer a.dcell:hover::before, .nav-drawer a.dcell:focus-visible::before{ opacity:1; }
.has-dropdown > .nav-link[aria-expanded="true"] .dropdown-arrow{ transform:rotate(180deg); opacity:1; }

.room-uses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.room-use {
background: var(--color-white);
border-radius: var(--radius-lg); padding: 1.9rem 1.8rem;
display: flex; flex-direction: column; gap: 1.1rem;
box-shadow: var(--shadow-float);
transition: transform 0.35s var(--ease-out-soft),
box-shadow 0.35s var(--ease-out-soft);
}
.room-use:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-float-lg);
}
.room-use h3 {
font-family: var(--font-heading); font-size: 1.32rem; font-weight: 700;
letter-spacing: -.005em; text-wrap: balance;
}
.room-use .intro { font-size: .97rem; color: #495057; margin: 0; }
.room-list { display: flex; flex-direction: column; gap: .95rem; margin: 0; }
.room-list dt {
font-family: var(--font-heading); font-size: .95rem; font-weight: 700;
color: var(--color-primary); margin-bottom: .15rem;
}
.room-list dd { margin: 0; font-size: .93rem; color: #495057; line-height: 1.65; }
@media (max-width: 800px) { .room-uses { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
.room-use { transition: none; }
.room-use:hover { transform: none; }
}

@media (min-width: 769px) {
.pricing-cards > .pricing-card:nth-child(3):last-child {
grid-column: 1 / -1;
width: calc(50% - 0.75rem);
margin-inline: auto;
}
}

.room-uses > .room-use:nth-child(3):last-child {
    grid-column: 1 / -1;
    width: calc(50% - 0.75rem);
    margin-inline: auto;
}
@media (max-width: 800px) {
    .room-uses > .room-use:nth-child(3):last-child { grid-column: auto; width: auto; }
}