html { scroll-behavior: smooth; }

/* ESPA Banner */
#espa_banner img {
max-width: 7.5rem;
height: auto;
}

:root {
--primary: #8d6c58;
--primary-strong: #6d5444;
--background: #f5f3f1;
--text: #100c0a;
--muted: #81756e;
--card: #ffffff;
--border: #eae4e0;
--shadow: 0 1rem 3.75rem rgba(141, 108, 88, 0.08);
--radius: 1rem;
--header-height: 5.5rem;
}

* {
box-sizing: border-box;
}

html, body {
overflow-x: hidden;
max-width: 100vw;
}

body {
margin: 0;
font-family: 'Manrope', system-ui, -apple-system, sans-serif;
background: var(--background);
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
word-wrap: break-word;
overflow-wrap: break-word;
padding-top: var(--header-height);
}

h1, h2, h3, h4 {
font-family: 'Playfair Display', 'Times New Roman', serif;
margin: 0 0 0.75rem;
color: var(--text);
letter-spacing: -0.02em;
}

p {
margin: 0 0 0.875rem;
}

a {
color: var(--text);
text-decoration: none;
}

a:hover {
color: var(--primary-strong);
}

img {
max-width: 100%;
display: block;
}

.container {
width: min(68.75rem, 92%);
margin: 0 auto;
overflow-x: hidden;
}

.section {
padding: 6rem 0;
overflow-x: hidden;
}

.section.alt {
background: var(--card);
}

.section-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.125rem;
margin-bottom: 2.25rem;
}

.section-header .helper {
color: var(--muted);
margin: 0;
}

.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2000;
background: color-mix(in srgb, var(--background) 90%, transparent);
backdrop-filter: blur(0.625rem);
border-bottom: 1px solid var(--border);
overflow: visible;
}

.nav-bar {
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
padding: 1.25rem 0;
position: relative;
z-index: 2001;
overflow: visible;
}

.brand {
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--primary-strong);
}

.nav-links {
display: flex;
gap: 1.125rem;
justify-content: center;
align-items: center;
font-weight: 600;
font-size: 0.75rem;
}

.nav-links a {
padding: 0.625rem 0.75rem;
border-radius: 999px;
transition: color 0.2s ease, background 0.2s ease;
}

.nav-links a:hover {
background: color-mix(in srgb, var(--primary) 15%, white);
}

.nav-links a.active {
background: var(--primary);
color: #fff;
box-shadow: 0 0.625rem 1.5rem color-mix(in srgb, var(--primary) 25%, transparent);
}

.nav-actions {
display: flex;
align-items: center;
gap: 0.75rem;
position: relative;
z-index: 2002;
overflow: visible;
}

.lang-switch {
position: relative;
z-index: 2003;
}

.lang-toggle {
width: 2.625rem;
height: 2.625rem;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--card);
color: var(--text);
font-weight: 700;
cursor: pointer;
box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.08);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.lang-toggle:hover {
transform: translateY(-1px);
box-shadow: 0 0.625rem 1.5rem rgba(0, 0, 0, 0.12);
}

.lang-menu {
position: absolute;
top: 3.125rem;
right: 0;
min-width: 7.5rem;
background: var(--card);
border: 1px solid var(--border);
border-radius: 0.75rem;
box-shadow: 0 1.125rem 2.5rem rgba(0, 0, 0, 0.1);
padding: 0.5rem;
display: none;
z-index: 2004;
}

.lang-switch.open .lang-menu {
display: flex;
flex-direction: column;
gap: 0.375rem;
}

.lang-menu a {
padding: 0.5rem 0.625rem;
border-radius: 0.625rem;
text-decoration: none;
color: var(--text);
font-weight: 600;
font-size: 0.95rem;
}

.lang-menu a:hover,
.lang-menu a.active {
background: var(--primary);
color: #fff;
}

.nav-toggle {
display: none;
background: none;
border: 1px solid var(--border);
border-radius: 0.625rem;
padding: 0.5rem;
cursor: pointer;
width: 2.75rem;
height: 2.75rem;
}

.nav-toggle span {
display: block;
width: 100%;
height: 2px;
background: var(--text);
margin: 0.375rem 0;
}

.hero {
padding: 5.625rem 0 4rem;
position: relative;
overflow: hidden;
background: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 38%),
radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 36%),
linear-gradient(180deg, var(--background) 0%, color-mix(in srgb, var(--primary) 10%, white) 100%);
}

.hero::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 40%);
pointer-events: none;
}

.hero-grid {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
gap: 2rem;
z-index: 1;
}

.hero-copy h1 {
font-size: clamp(2rem, 5vw, 2.875rem);
}

.hero-media {
position: relative;
border-radius: 1.5rem;
overflow: hidden;
box-shadow: var(--shadow);
border: 1px solid var(--border);
}

.hero-media img {
width: 100%;
max-width: 800px;
max-height: 600px;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
}

.hero-badge {
position: absolute;
bottom: 1rem;
left: 1rem;
background: rgba(0, 0, 0, 0.55);
color: #fff;
padding: 0.625rem 0.875rem;
border-radius: 999px;
font-weight: 700;
font-size: 0.8125rem;
letter-spacing: 0.02em;
}

.lede {
font-size: 1.125rem;
color: var(--muted);
}

.eyebrow {
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 700;
font-size: 0.75rem;
color: var(--muted);
margin: 0 0 0.625rem;
}

.cta-row {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin: 1.125rem 0 0.875rem;
}

.primary-btn,
.ghost-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.125rem;
border-radius: 999px;
font-weight: 700;
font-size: 0.875rem;
border: 1px solid transparent;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.primary-btn {
background: var(--primary);
color: #fff;
box-shadow: 0 0.625rem 1.875rem color-mix(in srgb, var(--primary) 35%, transparent);
}

.primary-btn:hover {
transform: translateY(-2px);
background: var(--primary-strong);
color: #fff;
}

.ghost-btn {
background: transparent;
border-color: var(--border);
color: var(--text);
}

.ghost-btn:hover {
background: color-mix(in srgb, var(--primary) 15%, white);
border-color: var(--border);
}

.hero-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.375rem;
}

.pill {
display: inline-block;
padding: 0.5rem 0.75rem;
border-radius: 999px;
background: color-mix(in srgb, var(--primary) 12%, white);
color: var(--text);
font-weight: 600;
font-size: 0.75rem;
border: 1px solid var(--border);
}

.hero-panel .panel {
background: rgba(255, 255, 255, 0.9);
border-radius: 1.375rem;
padding: 1.625rem;
box-shadow: var(--shadow);
border: 1px solid var(--border);
}

.panel.soft {
background: color-mix(in srgb, var(--primary) 3%, white);
}

.panel.highlight {
background: color-mix(in srgb, var(--primary) 8%, white);
border-color: var(--border);
}

.panel .divider {
height: 1px;
background: var(--border);
margin: 0.75rem 0;
}

.meta-list {
list-style: none;
padding: 0;
margin: 0;
color: var(--muted);
}

.meta-list li {
margin-bottom: 0.625rem;
}

.stat-line {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
}

.stat-value {
display: block;
font-size: 1.625rem;
font-weight: 800;
color: var(--primary-strong);
}

.stat-label {
display: block;
color: var(--muted);
font-size: 0.8125rem;
}

.small-note {
color: var(--muted);
font-size: 0.8125rem;
margin: 0.375rem 0 0;
}

.split {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
gap: 2rem;
align-items: start;
}

.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
gap: 0.875rem;
}

.stat-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.125rem 1rem;
text-align: center;
box-shadow: 0 0.5rem 1.625rem rgba(0, 0, 0, 0.05);
}

.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr));
gap: 1.125rem;
}

.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.25rem;
box-shadow: 0 0.625rem 2rem rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
gap: 0.75rem;
}

.card-media {
margin: -0.5rem -0.5rem 0.5rem;
border-radius: 0.75rem;
overflow: hidden;
background: color-mix(in srgb, var(--primary) 8%, white);
}

.card-media picture,
.card-media img {
display: block;
width: 100%;
height: 12.5rem;
object-fit: cover;
}

.card-top p {
color: var(--muted);
}

.card .pill-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

.card .text-link {
margin-top: auto;
font-weight: 700;
color: var(--primary-strong);
}

.highlight-card {
background: color-mix(in srgb, var(--primary) 12%, white);
border: 2px solid var(--primary);
box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.10), 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

.info-grid,
.amenity-grid,
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 1.25rem;
}

.simple-list {
list-style: none;
padding: 0;
margin: 0;
color: var(--muted);
}

.simple-list li {
margin-bottom: 0.625rem;
padding-left: 0;
}

.pill-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

.stack {
display: flex;
flex-direction: column;
gap: 0.625rem;
}

.helper {
color: var(--muted);
}

.full-width {
width: 100%;
}

.cta {
background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, white) 0%, var(--background) 40%, color-mix(in srgb, var(--primary) 3%, white) 100%);
}

.cta-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
gap: 1.25rem;
align-items: center;
}

.contact-label {
font-weight: 700;
margin: 0 0 0.375rem;
color: var(--primary-strong);
}

.text-link {
font-weight: 700;
color: var(--primary-strong);
}

.text-link:hover {
text-decoration: underline;
}

/* Contact Form */
.contact-form {
display: flex;
flex-direction: column;
gap: 1rem;
}

.form-group {
display: flex;
flex-direction: column;
gap: 0.375rem;
}

.form-group label {
font-weight: 600;
font-size: 0.875rem;
color: var(--primary-strong);
}

.form-group input,
.form-group textarea {
padding: 0.75rem 1rem;
border: 1px solid var(--border);
border-radius: 0.5rem;
font-family: inherit;
font-size: 1rem;
background: var(--card);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

.form-group textarea {
resize: vertical;
min-height: 100px;
}

.contact-form .primary-btn {
align-self: flex-start;
margin-top: 0.5rem;
}

/* Contact Page */
.contact-page-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: start;
}

@media (max-width: 768px) {
.contact-page-grid {
grid-template-columns: 1fr;
}
}

.contact-form-wrapper {
background: var(--card);
padding: 2rem;
border-radius: 0.75rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.contact-methods {
display: flex;
flex-direction: column;
gap: 1.25rem;
margin-top: 1rem;
}

.gallery-filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}

.gallery-filter {
padding: 0.5rem 1rem;
border: 1px solid var(--border);
border-radius: 1.25rem;
background: var(--card);
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
color: var(--muted);
transition: all 0.2s ease;
}

.gallery-filter:hover {
border-color: var(--primary);
color: var(--primary);
}

.gallery-filter.active {
background: var(--primary);
border-color: var(--primary);
color: #fff;
}

/* Gallery Unit Sections */
.gallery-unit-section { padding: 48px 0; border-bottom: 1px solid var(--border); }
.gallery-unit-section:last-child { border-bottom: none; }
.gallery-unit-title { font-family: 'Playfair Display', 'Times New Roman', serif; font-size: 28px; font-weight: 700; margin-bottom: 24px; text-align: center; color: var(--text); }
.gallery-unit-link { text-align: center; margin-top: 24px; }
.gallery-unit-link a { font-size: 15px; font-weight: 600; color: var(--primary); transition: color 0.3s ease; }
.gallery-unit-link a:hover { color: var(--primary-strong); }

.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
gap: 0.875rem;
}

.gallery-card[data-category] {
transition: opacity 0.3s ease, transform 0.3s ease;
}

.gallery-card.hidden {
display: none;
}

.gallery-card {
margin: 0;
border-radius: 1.125rem;
overflow: hidden;
box-shadow: 0 0.75rem 2.25rem rgba(0, 0, 0, 0.08);
border: 1px solid var(--border);
background: var(--card);
}

.gallery-card picture,
.gallery-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

figure {
margin: 0;
}

figcaption {
padding: 0.625rem 0.75rem;
font-size: 0.8125rem;
color: var(--muted);
background: rgba(0, 0, 0, 0.02);
}

.site-footer {
background: color-mix(in srgb, var(--text) 95%, var(--primary));
color: var(--background);
padding: 2.25rem 0 1.625rem;
}

.site-footer .brand,
.site-footer a {
color: var(--background);
}

.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
gap: 1.125rem;
align-items: start;
}

.footer-note {
text-align: center;
margin-top: 1.125rem;
font-size: 0.8125rem;
color: var(--muted);
}

.hero-panel,
.panel,
.card,
.stat-card {
position: relative;
overflow: hidden;
}

.hero-panel .panel::after,
.card::after,
.panel::after {
content: "";
position: absolute;
inset: auto -3.75rem -5rem auto;
width: 8.75rem;
height: 8.75rem;
background: radial-gradient(circle, color-mix(in srgb, var(--primary) 12%, transparent) 0%, transparent 60%);
pointer-events: none;
}

.card::after,
.panel::after {
inset: auto -3.125rem -4.375rem auto;
}

.hero-panel .panel::after {
inset: auto -2.5rem -3.75rem auto;
}

.site-header .brand,
.site-footer .brand {
font-size: 1rem;
}

.hero-copy .hero-tags .pill {
background: color-mix(in srgb, var(--primary) 12%, white);
}

.nav-open .nav-links {
display: flex;
}

@media (max-width: 56.25rem) {
:root {
--header-height: 7rem;
}

.site-header {
position: fixed;
top: 0;
background: var(--background);
z-index: 2000;
overflow: visible;
}

/* Use CSS Grid with named areas to reorder elements */
.nav-bar {
display: grid;
grid-template-areas:
"booknow booknow booknow booknow"
"brand . lang toggle";
grid-template-columns: auto 1fr auto auto;
grid-template-rows: auto auto;
gap: 0;
padding: 0;
align-items: center;
}

/* Make nav-actions children participate directly in parent grid */
.nav-actions {
display: contents;
}

/* Book Now button - full width first row */
.nav-actions .primary-btn {
grid-area: booknow;
width: 100%;
border-radius: 0;
padding: 0.75rem 1rem;
font-size: 0.875rem;
display: flex;
justify-content: center;
}

.nav-actions .ghost-btn {
display: none;
}

/* Language switch in second row */
.nav-actions .lang-switch {
grid-area: lang;
padding: 0.5rem 0;
}

/* Second row items */
.brand {
grid-area: brand;
padding: 0.75rem 1rem;
}

.nav-toggle {
grid-area: toggle;
display: inline-flex;
margin-right: 1rem;
}

/* Nav links - dropdown menu */
.nav-links {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--card);
flex-direction: column;
padding: 1.125rem;
border-bottom: 1px solid var(--border);
transform: translateY(-120%);
opacity: 0;
visibility: hidden;
transition: transform 0.25s ease, opacity 0.25s ease;
box-shadow: 0 0.75rem 1.875rem rgba(0, 0, 0, 0.08);
z-index: 99;
}

body.nav-open .nav-links {
transform: translateY(0);
opacity: 1;
visibility: visible;
}

.section {
padding: 4.5rem 0;
}

/* Single column layouts for mobile */
.hero-grid,
.split,
.card-grid,
.stat-grid,
.info-grid,
.amenity-grid,
.contact-grid,
.cta-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}

.gallery-grid {
grid-template-columns: 1fr;
gap: 1rem;
}

.stat-line {
grid-template-columns: 1fr;
gap: 0.75rem;
text-align: center;
}

.hero-copy {
text-align: center;
}

.hero-tags {
justify-content: center;
}

.cta-row {
flex-direction: column;
align-items: stretch;
}

.cta-row .primary-btn,
.cta-row .ghost-btn {
width: 100%;
text-align: center;
justify-content: center;
}

.section-header {
flex-direction: column;
text-align: center;
}

/* Hide decorative elements that cause overflow */
.hero-panel .panel::after,
.card::after,
.panel::after {
display: none;
}
}

/* Tablet breakpoint */
@media (max-width: 48rem) {
.container {
padding: 0 1rem;
}

.section {
padding: 3.5rem 0;
}

.split {
grid-template-columns: 1fr;
gap: 1.5rem;
}

.card-grid {
grid-template-columns: 1fr;
gap: 1rem;
}

.gallery-grid {
grid-template-columns: 1fr;
gap: 1rem;
}

.stat-line {
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}

.stat-value {
font-size: 1.375rem;
}

.info-grid,
.amenity-grid,
.contact-grid {
grid-template-columns: 1fr;
gap: 1rem;
}

.cta-grid {
grid-template-columns: 1fr;
gap: 1rem;
}

h1 {
font-size: 1.75rem;
}

h2 {
font-size: 1.5rem;
}

h3 {
font-size: 1.25rem;
}
}

@media (max-width: 37.5rem) {
.hero-copy h1 {
font-size: 1.625rem;
}

.cta-row {
flex-direction: column;
align-items: stretch;
}

.cta-row .primary-btn,
.cta-row .ghost-btn {
width: 100%;
}

.brand {
font-size: 0.875rem;
}

.lang-toggle {
width: 2.25rem;
height: 2.25rem;
font-size: 0.625rem;
}

.section {
padding: 2.5rem 0;
}

.gallery-grid {
grid-template-columns: 1fr;
gap: 1rem;
}

.gallery-card {
border-radius: 0.75rem;
}

.card {
padding: 1rem;
}

.panel {
padding: 1rem;
}

.stat-line {
grid-template-columns: 1fr;
gap: 0.75rem;
text-align: center;
}

.gallery-filters {
gap: 0.375rem;
}

.gallery-filter {
padding: 0.375rem 0.75rem;
font-size: 0.75rem;
}
}

/* Lightbox */
.lightbox-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.78);
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
z-index: 100;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}

.lightbox-overlay.active {
opacity: 1;
pointer-events: auto;
}

.lightbox-content {
position: relative;
max-width: min(68.75rem, 90vw);
max-height: 90vh;
background: var(--text);
border-radius: 1.125rem;
overflow: hidden;
box-shadow: 0 1.25rem 4.375rem rgba(0, 0, 0, 0.6);
}

.lightbox-content img {
display: block;
width: 100%;
height: auto;
max-height: 75vh;
object-fit: contain;
background: var(--text);
}

.lightbox-caption {
padding: 0.875rem 1rem;
color: var(--background);
font-weight: 700;
font-size: 0.875rem;
background: rgba(0, 0, 0, 0.3);
}

.lightbox-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background: rgba(0, 0, 0, 0.6);
color: var(--background);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
width: 2.25rem;
height: 2.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-weight: 800;
font-size: 1rem;
}

.lightbox-close:hover {
background: rgba(0, 0, 0, 0.8);
}

.lightbox-nav {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
pointer-events: none;
}

.lightbox-btn {
pointer-events: auto;
background: rgba(0, 0, 0, 0.6);
color: var(--background);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.75rem;
width: 2.5rem;
height: 3rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-weight: 800;
font-size: 1.125rem;
}

.lightbox-btn:hover {
background: rgba(0, 0, 0, 0.8);
}

body.lightbox-open {
overflow: hidden;
}

.detail-hero {
padding-top: 5rem;
padding-bottom: 4rem;
}

.simple-list li::before {
content: "-";
color: var(--primary-strong);
margin-right: 0.5rem;
}

.page-detail .hero {
background: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 38%),
radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 36%),
linear-gradient(180deg, var(--background) 0%, color-mix(in srgb, var(--primary) 8%, white) 100%);
}

.panel h3,
.panel h4 {
margin-top: 0;
}

.panel ul {
padding-left: 0;
}

/* FAQ Styles */
.faq-container {
max-width: 50rem;
}

.faq-category {
margin-bottom: 3rem;
}

.faq-category h2 {
font-size: 1.5rem;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border);
}

.faq-item {
margin-bottom: 0.75rem;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}

.faq-question {
padding: 1.25rem 1.5rem;
cursor: pointer;
font-weight: 600;
font-size: 1rem;
color: var(--text);
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.2s ease;
}

.faq-question::-webkit-details-marker {
display: none;
}

.faq-question::after {
content: "+";
font-size: 1.5rem;
font-weight: 400;
color: var(--primary);
transition: transform 0.2s ease;
}

.faq-item[open] .faq-question::after {
content: "−";
}

.faq-question:hover {
background: var(--background);
}

.faq-answer {
padding: 0 1.5rem 1.25rem;
color: var(--muted);
line-height: 1.7;
}

.faq-answer p {
margin: 0 0 0.75rem;
}

.faq-answer p:last-child {
margin-bottom: 0;
}

.faq-answer a {
color: var(--primary-strong);
text-decoration: underline;
}

.faq-answer a:hover {
color: var(--primary);
}

@media (max-width: 48rem) {
.faq-question {
padding: 1rem 1.25rem;
font-size: 0.95rem;
}

.faq-answer {
padding: 0 1.25rem 1rem;
}

.faq-category h2 {
font-size: 1.25rem;
}
}

/* Services Section */
.services-section { padding: 5rem 0; }
.services-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 2.5rem; }
.services-col h3 { font-size: 1.25rem; margin: 0 0 0.25rem; }
.services-subtitle { color: var(--muted); font-size: 0.9rem; margin: 0 0 1.5rem; }
.services-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px; }
.services-list li { display: flex; align-items: flex-start; gap: 0.75rem; }
.services-list li svg { flex-shrink: 0; margin-top: 0.15rem; color: var(--primary); }
.service-desc { font-size: 0.85rem; color: var(--muted); }
.servicesSection { padding: 48px 0; background: var(--bg-alt, #f9fafb) }
.servicesSection h2 { margin: 0 0 28px; font-size: 26px; font-weight: 800; letter-spacing: -0.03em }
.servicesGrid { display: grid; grid-template-columns: 1fr; gap: 24px }
.servicesGroup { background: #fff; border: 1px solid var(--border); border-radius: var(--radius, 12px); padding: 28px }
.servicesGroup h3 { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; margin: 0 0 16px }
.servicesFree h3 { color: #16a34a }
.servicesPaid h3 { color: var(--accent2, var(--primary)) }
.serviceIcon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px }
.servicesList { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px }
.serviceItem { border-bottom: 1px solid var(--border) }
.serviceHeader { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 0; background: none; border: 0; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--fg); text-align: left; gap: 12px }
.serviceHeader:hover { color: var(--accent2) }
.serviceHeader span { display: flex; align-items: center; gap: 10px }
.serviceChevron { width: 16px; height: 16px; flex-shrink: 0; transition: transform .25s ease; color: var(--muted) }
.serviceHeader[aria-expanded="true"] .serviceChevron { transform: rotate(90deg); color: var(--accent2) }
.serviceAnswer { max-height: 0; overflow: hidden; transition: max-height .3s ease }
.serviceAnswerInner { padding: 0 0 14px; font-size: 13px; color: var(--muted); line-height: 1.6 }
.servicePrice { font-weight: 600; color: var(--accent2) }
@media (max-width: 768px) {
    .services-columns { grid-template-columns: 1fr; gap: 2rem; }
    .services-list { grid-template-columns: 1fr; }
    .servicesGrid { grid-template-columns: 1fr }
    .servicesList { grid-template-columns: 1fr }
}

/* Promo Modal */
/* Corner Banners */
.corner-banner {
    position: fixed;
    z-index: 9000;
    transition: opacity 0.3s, transform 0.3s;
}
.corner-banner--top-left { top: 1rem; left: 1rem; }
.corner-banner--top-right { top: 1rem; right: 1rem; }
.corner-banner--bottom-left { bottom: 1rem; left: 1rem; }
.corner-banner--bottom-right { bottom: 1rem; right: 1rem; }
.corner-banner img {
    display: block;
    max-width: 120px;
    max-height: 100px;
    object-fit: cover;
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s;
}
.corner-banner img:hover {
    transform: scale(1.05);
}
.corner-banner__close {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    z-index: 2;
    background: var(--card, #fff);
    border: 1px solid rgba(0, 0, 0, 0.1);
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text, #333);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: background 0.2s;
}
.corner-banner__close:hover {
    background: rgba(0, 0, 0, 0.08);
}
@media (max-width: 600px) {
    .corner-banner img { max-width: 84px; max-height: 70px; }
    .corner-banner--top-left, .corner-banner--bottom-left { left: 0.5rem; }
    .corner-banner--top-right, .corner-banner--bottom-right { right: 0.5rem; }
}

.promo-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    padding: 1rem;
}
.promo-overlay.active {
    opacity: 1;
    visibility: visible;
}
.promo-modal {
    background: var(--card, #fff);
    border-radius: var(--radius, 1rem);
    max-width: 640px;
    width: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.2);
    transform: translateY(20px) scale(0.97);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: row;
}
.promo-overlay.active .promo-modal {
    transform: translateY(0) scale(1);
}
.promo-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    background: rgba(0, 0, 0, 0.06);
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text, #1a1a1a);
    transition: background 0.2s;
}
.promo-close:hover { background: rgba(0, 0, 0, 0.12); }
.promo-image {
    flex: 0 0 45%;
    min-height: 100%;
}
.promo-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.promo-body {
    flex: 1;
    padding: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (max-width: 600px) {
    .promo-modal { flex-direction: column; max-width: 92vw; }
    .promo-image { flex: none; max-height: 200px; overflow: hidden; }
}
.promo-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--heading, var(--text, #1a1a1a));
}
.promo-subtitle {
    font-size: 1rem;
    color: var(--primary);
    font-weight: 600;
    margin: 0 0 1rem;
}
.promo-desc {
    font-size: 0.95rem;
    color: var(--muted, #666);
    line-height: 1.6;
    margin: 0 0 1.5rem;
}
.promo-cta {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: var(--primary);
    color: #fff;
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
}
.promo-cta:hover { opacity: 0.88; }
