/*
  Vila Magić static CSS
  Refactored from Tailwind prototype into a Base-css-master inspired model.
  Core idea: one rem-based system, reusable container widths, clamp-based spacing/typography.
*/

*, *::before, *::after { box-sizing: border-box; }
* { text-shadow: none; }

:root {
  --surface: #fcf9f8;
  --inverse-surface: #303030;
  --on-secondary-container: #64635a;
  --on-primary-fixed: #001e2f;
  --sand-light: #FAF8F2;
  --surface-tint: #39637f;
  --on-primary-container: #fcfcff;
  --on-tertiary-container: #fffbff;
  --background: #fcf9f8;
  --outline-variant: #c1c7ce;
  --on-surface-variant: #42474d;
  --secondary-container: #e3dfd5;
  --on-secondary-fixed: #1c1c15;
  --on-background: #1b1c1c;
  --on-error: #ffffff;
  --tertiary-fixed: #ffdad5;
  --secondary: #605e56;
  --coastal-white: #FFFFFF;
  --inverse-primary: #a2cbec;
  --surface-container-low: #f6f3f2;
  --primary: #36607d;
  --on-tertiary-fixed-variant: #930004;
  --surface-container-lowest: #ffffff;
  --on-tertiary: #ffffff;
  --sand-muted: #DED9C6;
  --on-primary-fixed-variant: #1e4b66;
  --on-primary: #ffffff;
  --sea-deep: #3D5A70;
  --primary-fixed: #c9e6ff;
  --on-secondary: #ffffff;
  --on-surface: #1b1c1c;
  --primary-fixed-dim: #a2cbec;
  --secondary-fixed-dim: #cac6bc;
  --primary-container: #507997;
  --surface-container-high: #eae7e7;
  --surface-dim: #dcd9d9;
  --tertiary-fixed-dim: #ffb4a9;
  --tertiary-container: #d8382c;
  --secondary-fixed: #e6e2d8;
  --tertiary: #b51c16;
  --outline: #72787e;
  --inverse-on-surface: #f3f0ef;
  --on-secondary-fixed-variant: #48473f;
  --surface-variant: #e5e2e1;
  --on-tertiary-fixed: #410001;
  --error-container: #ffdad6;
  --surface-container-highest: #e5e2e1;
  --on-error-container: #93000a;
  --surface-container: #f0eded;
  --error: #ba1a1a;
  --surface-bright: #fcf9f8;

  --container-max: 90%;
  --container-inline: clamp(1.25rem, -2.6844rem + 8.1967vw, 5rem);
  --spacing-xxs: clamp(0.25rem, -0.0123rem + 0.5464vw, 0.5rem);
  --spacing-xs: clamp(0.5rem, -0.0246rem + 1.0929vw, 1rem);
  --spacing-sm: clamp(1rem, -0.0492rem + 2.1858vw, 2rem);
  --spacing-md: clamp(2rem, -0.0984rem + 4.3716vw, 4rem);
  --spacing-lg: clamp(4rem, -0.1967rem + 8.7432vw, 8rem);
  --spacing-xl: clamp(8rem, 1.7049rem + 13.1148vw, 14rem);

  --font-body: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  --radius-sm: .25rem;
  --radius-md: .5rem;
  --radius-lg: .75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --shadow-sm: 0 .25rem 1rem rgba(61,90,112,.08);
  --shadow-md: 0 .75rem 2rem rgba(61,90,112,.12);
  --shadow-xl: 0 1.5rem 4rem rgba(61,90,112,.16);
  --shadow-2xl: 0 2rem 5rem rgba(61,90,112,.2);
}

@media (min-width: 2048px) { html { font-size: 0.78125vw; } }

@media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } }

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-size: 16px;
  line-height: 1.15;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  margin: 0;
  background: var(--background);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}
img { display:block; max-width:100%; height:auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border:0; background:transparent; cursor:pointer; color:inherit; }
ul { list-style:none; margin:0; padding:0; }
p, h1, h2, h3, h4, h5 { margin:0; }

/* Typography */
.font-body-md, .font-body-lg, .font-label-md, .font-label-sm { font-family: var(--font-body); }
.font-headline-md, .font-headline-lg, .font-display-lg { font-family: var(--font-heading); }
.font-display-lg { font-size: clamp(2.25rem, 1.4631rem + 1.6393vw, 3rem); line-height:1.1; letter-spacing:-.02em; font-weight:700; }
.font-headline-lg, .text-headline-lg { font-size: clamp(2rem, 1.4754rem + 1.0929vw, 2.5rem); line-height:1.3; font-weight:600; }
.font-headline-md { font-size: clamp(1.5rem, 1.2377rem + .5464vw, 1.75rem); line-height:1.4; font-weight:600; }
.font-body-lg { font-size: clamp(1rem, .8689rem + .2732vw, 1.125rem); line-height:1.6; font-weight:400; }
.font-body-md { font-size:1rem; line-height:1.6; font-weight:400; }
.font-label-md { font-size:.875rem; line-height:1.2; letter-spacing:.05em; font-weight:600; }
.font-label-sm { font-size:.75rem; line-height:1.2; letter-spacing:.03em; font-weight:500; }

/* Colors */
.bg-background{background:var(--background)} .bg-sand-light{background:var(--sand-light)} .bg-coastal-white{background:var(--coastal-white)}
.bg-surface-container{background:var(--surface-container)} .bg-sea-deep{background:var(--sea-deep)} .bg-primary{background:var(--primary)}
.bg-primary-container{background:var(--primary-container)} .bg-tertiary{background:var(--tertiary)} .bg-tertiary\/10{background:rgba(181,28,22,.10)}
.bg-primary\/10{background:rgba(54,96,125,.10)} .bg-primary\/5{background:rgba(54,96,125,.05)} .bg-primary\/80{background:rgba(54,96,125,.80)}
.bg-primary-container\/10{background:rgba(80,121,151,.10)} .bg-black\/20{background:rgba(0,0,0,.20)} .bg-black\/90{background:rgba(0,0,0,.90)}
.bg-coastal-white\/20{background:rgba(255,255,255,.20)} .bg-coastal-white\/30{background:rgba(255,255,255,.30)}
.bg-coastal-white\/90{background:rgba(255,255,255,.90)} .bg-coastal-white\/95{background:rgba(255,255,255,.95)}
.text-primary{color:var(--primary)} .text-secondary{color:var(--secondary)} .text-on-surface{color:var(--on-surface)} .text-on-surface-variant{color:var(--on-surface-variant)}
.text-coastal-white{color:var(--coastal-white)} .text-on-primary{color:var(--on-primary)} .text-on-tertiary{color:var(--on-tertiary)} .text-tertiary{color:var(--tertiary)}
.text-primary-fixed{color:var(--primary-fixed)} .text-sand-muted{color:var(--sand-muted)}
.hover\:text-primary:hover{color:var(--primary)} .hover\:text-primary-fixed:hover{color:var(--primary-fixed)} .hover\:text-on-primary:hover{color:var(--on-primary)}
.hover\:bg-primary:hover{background:var(--primary)} .hover\:bg-primary-container:hover{background:var(--primary-container)} .hover\:bg-sand-light:hover{background:var(--sand-light)} .hover\:bg-coastal-white\/30:hover{background:rgba(255,255,255,.30)}
.group:hover .group-hover\:text-on-primary{color:var(--on-primary)} .group:hover .group-hover\:text-primary{color:var(--primary)} .group:hover .group-hover\:bg-primary{background:var(--primary)} .group:hover .group-hover\:bg-transparent{background:transparent}

/* Layout utilities */
.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.top-0{top:0}.top-6{top:1.5rem}.right-6{right:1.5rem}.left-4{left:1rem}.right-4{right:1rem}.top-1\/2{top:50%}.bottom-0{bottom:0}.bottom-4{bottom:1rem}.bottom-6{bottom:1.5rem}.bottom-10{bottom:2.5rem}.left-0{left:0}.left-6{left:1.5rem}.left-1\/2{left:50%}.right-0{right:0}
.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-\[100\]{z-index:100}.z-\[110\]{z-index:110}
.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.block{display:block}.inline-block{display:inline-block}.hidden{display:none!important}
.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-left{text-align:left}.text-center{text-align:center}.shrink-0{flex-shrink:0}.flex-1{flex:1 1 0%}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.w-full{width:100%}.h-full{height:100%}.h-screen{height:100vh}.h-auto{height:auto}.h-12{height:3rem}.w-12{width:3rem}.w-\[80\%\]{width:80%}.w-\[60\%\]{width:60%}
.h-40{height:10rem}.h-48{height:12rem}.h-64{height:16rem}.h-\[400px\]{height:25rem}.h-\[450px\]{height:28.125rem}.max-h-\[90vh\]{max-height:90vh}.max-h-\[80vh\]{max-height:80vh}.max-w-\[95vw\]{max-width:95vw}.max-w-full{max-width:100%}





@media (min-width: 1280px){
.max-w-max-width{max-width:var(--container-max)}
}

.max-w-4xl{max-width:56rem}.max-w-2xl{max-width:42rem}.max-w-sm{max-width:24rem}.max-w-xs{max-width:20rem}.min-w-\[500px\]{min-width:31.25rem}
.mx-auto{margin-inline:auto}.mt-1{margin-top:.25rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-12{margin-bottom:3rem}.mb-24{margin-bottom:6rem}
.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-3{padding-inline:.75rem}.px-4{padding-inline:1rem}.px-6{padding-inline:1.5rem}.px-10{padding-inline:2.5rem}.py-1{padding-block:.25rem}.py-1\.5{padding-block:.375rem}.py-2{padding-block:.5rem}.py-4{padding-block:1rem}.py-5{padding-block:1.25rem}.py-6{padding-block:1.5rem}.py-16{padding-block:var(--spacing-lg)}.py-24{padding-block:6rem}.pt-4{padding-top:1rem}.pt-8{padding-top:2rem}.pt-12{padding-top:3rem}.pr-4{padding-right:1rem}.pb-1{padding-bottom:.25rem}.px-margin-mobile{padding-inline:var(--container-inline)}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-12{gap:3rem}.gap-16{gap:4rem}.gap-x-4{column-gap:1rem}.gap-y-3{row-gap:.75rem}.space-y-2>*+*{margin-top:.5rem}.space-y-3>*+*{margin-top:.75rem}.space-y-4>*+*{margin-top:1rem}.space-y-6>*+*{margin-top:1.5rem}
.border{border:1px solid}.border-2{border-width:2px}.border-4{border-width:4px}.border-t{border-top:1px solid}.border-b{border-bottom:1px solid}.border-b-2{border-bottom:2px solid}.border-r{border-right:1px solid}.border-sand-muted{border-color:var(--sand-muted)}.border-primary{border-color:var(--primary)}.border-tertiary{border-color:var(--tertiary)}.border-coastal-white{border-color:var(--coastal-white)}.border-coastal-white\/20{border-color:rgba(255,255,255,.20)}.border-coastal-white\/30{border-color:rgba(255,255,255,.30)}
.rounded{border-radius:var(--radius-sm)}.rounded-lg{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-lg)}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-full{border-radius:9999px}.rounded-\[2rem\]{border-radius:2rem}
.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-md)}.shadow-xl{box-shadow:var(--shadow-xl)}.shadow-2xl{box-shadow:var(--shadow-2xl)}
.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.object-cover{object-fit:cover}.object-contain{object-fit:contain}.select-none{user-select:none}.pointer-events-none{pointer-events:none}
.opacity-0{opacity:0}.opacity-20{opacity:.2}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-90{opacity:.9}
.backdrop-blur{backdrop-filter:blur(.5rem)}.backdrop-blur-md{backdrop-filter:blur(.75rem)}
.transform{transform:translateZ(0)}.-translate-y-1\/2{transform:translateY(-50%)}.-translate-x-1\/2{transform:translateX(-50%)}.rotate-2{transform:rotate(2deg)}.-rotate-3{transform:rotate(-3deg)}
.transition-all{transition:all .3s ease}.transition-colors{transition:color .3s ease, background-color .3s ease, border-color .3s ease}.transition-transform{transition:transform .5s ease}.transition-opacity{transition:opacity .3s ease}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}
.uppercase{text-transform:uppercase}.italic{font-style:italic}.font-bold{font-weight:700}.font-medium{font-weight:500}.leading-tight{line-height:1.1}.leading-relaxed{line-height:1.7}.tracking-tight{letter-spacing:-.02em}.tracking-widest{letter-spacing:.14em}
.text-\[10px\]{font-size:.625rem}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.text-5xl{font-size:3rem}.text-display-lg-mobile{font-size:clamp(2.25rem,1.55rem + 3vw,3rem)}
.divide-y>*+*{border-top:1px solid}.divide-sand-muted>*+*{border-color:var(--sand-muted)}
.aspect-\[4\/3\]{aspect-ratio:4/3}.active\:scale-95:active{transform:scale(.95)}.hover\:scale-105:hover{transform:scale(1.05)}.hover\:translate-x-1:hover{transform:translateX(.25rem)}.hover\:underline:hover{text-decoration:underline}.hover\:opacity-70:hover{opacity:.7}.focus\:outline-none:focus{outline:none}
.group:hover .group-hover\:scale-105{transform:scale(1.05)}.group:hover .group-hover\:bg-black\/10{background:rgba(0,0,0,.10)}
.order-1{order:1}.order-2{order:2}

/* Components */
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; line-height:1; vertical-align:middle;}
.hero-gradient{background:linear-gradient(0deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.05) 58%,rgba(0,0,0,.15) 100%)}
.gallery-img-trigger{cursor:pointer; transition:transform .35s ease, box-shadow .35s ease, opacity .35s ease;}
.gallery-img-trigger:hover{transform:scale(1.018); z-index:10;}
#main-nav{transition:box-shadow .3s ease, background-color .3s ease;}
#nav-container{transition:padding .3s ease;}
.nav-item{padding-bottom:.25rem; border-bottom:2px solid transparent;}
.nav-item.is-active{border-color:var(--primary); font-weight:700; color:var(--primary);}
.mobile-menu-open{overflow:hidden;}
#mobile-menu{flex-direction:column;}

.hero {
    height: auto;
    padding-top: 12rem;
    padding-bottom: 8rem;
}

.accordion-content{max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.4,0,.2,1), padding .3s ease;}
.accordion-item.active .accordion-content{max-height:31.25rem; padding-bottom:1.5rem;}
.accordion-item.active .accordion-icon{transform:rotate(180deg);}
@keyframes subtle-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.95}}
.animate-subtle-pulse{animation:subtle-pulse 2s infinite ease-in-out;}
@keyframes bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}
.animate-bounce{animation:bounce 1s infinite;}
#lightbox{display:flex; opacity:0; pointer-events:none; transition:opacity .25s ease;}
#lightbox.hidden{display:none!important;}
#lightbox.visible{opacity:1; pointer-events:auto;}
#lightbox-img{transition:opacity .18s ease;}


.pricing-table-desktop {
  display: block;
}

.pricing-card-mobile {
  display: none;
}

.pricing-table-wrap,
.pricing-card {
  overflow: hidden;
  border: 1px solid var(--sand-muted);
  border-radius: 1rem;
  background: var(--coastal-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.pricing-table thead {
  background: var(--surface-container);
}

.pricing-table th {
  padding: 1rem 1.5rem;
  font-weight: 600;
  color: var(--on-surface);
}

.pricing-table td {
  padding: 1.5rem;
  border-top: 1px solid var(--sand-muted);
}

.pricing-period {
  color: var(--primary);
  font-weight: 700;
}

.pricing-price {
  color: var(--tertiary);
  font-weight: 700;
  white-space: nowrap;
}

.pricing-price s {
  margin-left: 0.5rem;
  opacity: 0.4;
}

.pricing-card-header {
  padding: 1.25rem;
  background: var(--surface-container);
  border-bottom: 1px solid var(--sand-muted);
}

.pricing-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--sand-muted);
}

.pricing-card-row:last-child {
  border-bottom: 0;
}

.pricing-card-row span {
  color: var(--on-surface);
  opacity: 0.7;
  font-weight: 600;
}

.pricing-card-row strong {
  text-align: right;
}

/* MOBILE */
@media (max-width: 767px) {
  .pricing-table-desktop {
    display: none;
  }

  .pricing-card-mobile {
    display: block;
  }
}

/* Practical section polish */
section{scroll-margin-top:6rem;}
table{border-collapse:collapse; width:100%;}
th,td{padding:1rem; text-align:left;}

@media (min-width: 640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}}
@media (min-width: 768px){
  .md\:hidden{display:none!important}.md\:flex{display:flex!important}.md\:flex-row{flex-direction:row}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:col-span-2{grid-column:span 2 / span 2}.md\:row-span-2{grid-row:span 2 / span 2}
  .md\:px-margin-desktop{padding-inline:var(--container-inline)}.md\:py-24{padding-block:var(--spacing-lg)}.md\:p-8{padding:2rem}.md\:p-10{padding:2.5rem}.md\:mb-6{margin-bottom:1.5rem}.md\:mb-12{margin-bottom:3rem}.md\:gap-8{gap:2rem}.md\:gap-20{gap:5rem}.md\:gap-24{gap:6rem}
  .md\:h-full{height:100%}.md\:h-56{height:14rem}.md\:h-64{height:16rem}.md\:h-\[500px\]{height:31.25rem}.md\:h-\[600px\]{height:37.5rem}.md\:left-8{left:2rem}.md\:right-8{right:2rem}.md\:bottom-10{bottom:2.5rem}.md\:left-10{left:2.5rem}
  .md\:order-1{order:1}.md\:order-2{order:2}.md\:text-left{text-align:left}.md\:text-sm{font-size:.875rem}.md\:text-base{font-size:1rem}.md\:text-2xl{font-size:1.5rem}.md\:text-xs{font-size:.75rem}.md\:text-display-lg{font-size:clamp(3rem, 2.2rem + 1.7vw, 4rem)}
}
@media (min-width: 1024px){.lg\:flex-row{flex-direction:row}.lg\:gap-16{gap:4rem}.lg\:w-3\/5{width:60%}.lg\:w-2\/5{width:40%}}
@media (max-width: 767px){.md\:hidden{display:flex}.md\:flex{display:none!important}.min-w-\[500px\]{min-width:31.25rem}}