/*
Theme Name: VillaluX
Theme URI: https://villalux.be
Description: Custom luxury theme for VillaluX sex rooms Kortessem & Genk.
Version: 1.0.0
Author: Mentall Studio
Text Domain: villalux
*/

/* ============================================================
   CSS CUSTOM PROPERTIES — VillaluX Design Tokens
============================================================ */
:root {
    /* Backgrounds */
    --clr-bg:          #08070a;
    --clr-surface:     #0d0c10;
    --clr-card:        #131218;
    --clr-border:      rgba(230,223,217,0.08);
    --clr-hairline:    rgba(198,154,77,0.14);
    --clr-hairline-strong: rgba(198,154,77,0.32);

    /* Text */
    --clr-cream:       #f4ede2;  /* ivory-100 */
    --clr-text:        #e6dfd9;  /* pearl-200 */
    --clr-text-muted:  #c9bfc4;  /* pearl-300 - brighter */
    --clr-white:       #ffffff;

    /* Gold accent */
    --clr-gold:        #c69a4d;  /* gold-400 - unified brand gold */
    --clr-gold-light:  #d8b56a;  /* gold-300 - hover/light variant */
    --clr-gold-soft:   #f7e7b8;  /* gold-100 */
    --clr-gold-deep:   #c69a4d;  /* gold-400 - buttons (logo match) */

    /* Oxblood */
    --clr-oxblood:     #8a3a3a;

    /* Typography */
    --font-display:    "Bodoni Moda", "Didot", serif;
    --font-serif:      "Cormorant Garamond", Georgia, serif;
    --font-body:       "Cormorant Garamond", Georgia, serif;

    /* Spacing */
    --space-xs:  0.5rem;
    --space-sm:  1rem;
    --space-md:  2rem;
    --space-lg:  4rem;
    --space-xl:  8rem;

    /* Layout */
    --max-width:      1280px;
    --border-radius:  2px;
    --transition:     320ms cubic-bezier(0.22,1,0.36,1);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 12px 32px -12px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.3);
    --shadow-lg: 0 32px 64px -24px rgba(0,0,0,0.7), 0 8px 24px -8px rgba(0,0,0,0.45);
    --shadow-glow: 0 0 48px -8px rgba(198,154,77,0.28);
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    background-color: var(--clr-bg);
    color: var(--clr-text);
    font-family: var(--font-serif);
    font-size: 1.25rem;  /* 20px base - readable */
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ============================================================
   TYPOGRAPHY
============================================================ */
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    line-height: 1.05;
    color: var(--clr-cream);
    letter-spacing: -0.02em;
}
h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    line-height: 1.3;
    color: var(--clr-cream);
    letter-spacing: 0.02em;
}

h1 { font-size: clamp(3.5rem, 7vw, 7rem); }
h2 { font-size: clamp(2.25rem, 4vw, 4rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h4 { font-size: 1.25rem; font-weight: 400; }



/* ============================================================
   LAYOUT UTILITIES
============================================================ */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

.section { padding-block: var(--space-xl); }
.section--sm { padding-block: var(--space-lg); }

/* Locations sits right below hero - no extra top gap */
.locations { padding-block: 0; }

/* ============================================================
   BUTTONS
============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    font-family: var(--font-serif);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid var(--clr-gold);
    background: transparent;
    color: var(--clr-gold);
    cursor: pointer;
    transition: var(--transition);
    border-radius: var(--border-radius);
}

.btn:hover {
    background: var(--clr-gold-light);
    color: var(--clr-bg);
}

.btn--filled {
    background: var(--clr-gold-light);
    color: var(--clr-bg);
}

.btn--filled:hover {
    background: var(--clr-gold-light);
    border-color: var(--clr-gold-light);
}

/* ============================================================
   GOLD DIVIDER
============================================================ */
.gold-line {
    width: 60px;
    height: 1px;
    background: var(--clr-gold-light);
    margin-block: var(--space-sm);
}

.gold-line--center { margin-inline: auto; }

/* ============================================================
   HEADER
============================================================ */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 1.5rem 0;
    transition: background var(--transition), padding var(--transition);
}

.site-header.scrolled {
    background: rgba(14,12,10,0.95);
    backdrop-filter: blur(10px);
    padding: 1rem 0;
    border-bottom: 1px solid var(--clr-hairline);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.site-header__wordmark {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: var(--clr-cream);
}

.site-header__logo img { height: 40px; width: auto; }

.site-nav__list {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.site-nav__list a {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #e6dfd9;  /* pearl-200 */
    transition: color var(--transition);
}

.site-nav__list a:hover { color: var(--clr-gold); }

.site-header__actions { display: flex; align-items: center; gap: 1rem; }

.btn--sm { padding: 0.6rem 1.25rem; font-size: 0.7rem; }

.site-header__burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.site-header__burger span {
    display: block;
    width: 24px;
    height: 1px;
    background: var(--clr-cream);
    transition: var(--transition);
}

/* Mobile nav */
.mobile-nav {
    position: fixed;
    inset: 0;
    background: var(--clr-bg);
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.76,0,0.24,1);
}

.mobile-nav.open { transform: translateX(0); }

.mobile-nav__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
}

.mobile-nav__list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mobile-nav__list a {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 300;
    color: var(--clr-cream);
    letter-spacing: 0.05em;
    transition: color var(--transition);
}

.mobile-nav__list a:hover { color: var(--clr-gold); }

/* ============================================================
   HERO
============================================================ */
.hero {
    position: relative;
    height: 100dvh;
    min-height: 600px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.05);
    animation: heroZoom 8s ease forwards;
}

@keyframes heroZoom {
    to { transform: scale(1); }
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(14,12,10,0.3) 0%,
        rgba(14,12,10,0.55) 50%,
        rgba(14,12,10,0.85) 100%
    );
    z-index: 1;
}

.hero__content {
    position: relative;
    z-index: 2;
    padding-top: 6rem;
    width: 100%;
}

.hero__eyebrow { margin-bottom: 1rem; }

.hero__title {
    color: var(--clr-cream);
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 40px rgba(0,0,0,0.5);
}

.hero__sub {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.35rem;
    color: #c9bfc4;
    margin-top: 1.5rem;
    margin-bottom: 2.5rem;
    max-width: 520px;
    line-height: 1.6;
}

.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero__scroll {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero__scroll-line {
    display: block;
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, var(--clr-gold), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 1; transform: scaleY(1); }
    50% { opacity: 0.4; transform: scaleY(0.7); }
}

/* ============================================================
   LOCATION CARDS
============================================================ */
.locations { background: var(--clr-surface); border-top: 1px solid var(--clr-hairline); border-bottom: 1px solid var(--clr-hairline); }

.locations__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--clr-border);
}

.location-card {
    padding: 3rem 2.5rem;
    border-right: 1px solid var(--clr-border);
    transition: background var(--transition);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.location-card:last-child { border-right: none; }
.location-card:hover { background: var(--clr-card); }

.location-card__title {
    font-size: 1.75rem;
    color: var(--clr-cream);
    margin-top: 0.25rem;
}

.location-card__address { color: var(--clr-text-muted); font-size: 0.9rem; }
.location-card__hours { color: var(--clr-text-muted); font-size: 0.85rem; }

.location-card__cta {
    margin-top: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-gold);
    transition: gap var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.location-card:hover .location-card__cta { gap: 1rem; }

/* ============================================================
   SECTION HEADER
============================================================ */
.section-header {
    text-align: center;
    max-width: 600px;
    margin-inline: auto;
    margin-bottom: 4rem;
}

.section-header__sub {
    color: #c9bfc4;
    margin-top: 1.5rem;
    font-size: 1.1rem;
    font-style: italic;
}

/* ============================================================
   ROOMS GRID
============================================================ */
.rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.room-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    overflow: hidden;
    transition: border-color var(--transition), transform var(--transition);
}

.room-card:hover {
    border-color: var(--clr-gold);
    transform: translateY(-4px);
}

.room-card__img-wrap {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.room-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.room-card:hover .room-card__img { transform: scale(1.05); }

.room-card__location-badge {
    position: absolute;
    top: 1rem; left: 1rem;
    background: rgba(14,12,10,0.8);
    color: var(--clr-gold);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--clr-gold);
}

.room-card__body { padding: 1.5rem; }

.room-card__title {
    font-size: 1.35rem;
    color: var(--clr-cream);
    margin: 0.5rem 0;
}

.room-card__desc {
    font-size: 0.9rem;
    color: var(--clr-text-muted);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.room-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--clr-hairline);
}

.room-card__price {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--clr-gold-light);
}

/* ============================================================
   ATMOSPHERE SPLIT
============================================================ */
.atmosphere__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 600px;
}

.atmosphere__media {
    position: relative;
    overflow: hidden;
}

.atmosphere__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.atmosphere__content {
    background: var(--clr-surface);
    padding: 6rem 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

.atmosphere__content h2 { font-size: clamp(2rem, 3vw, 3rem); }

.atmosphere__content p {
    color: var(--clr-text);
    max-width: 420px;
    margin-top: 0.5rem;
}

.atmosphere__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.atmosphere__list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--clr-text);
}

.atmosphere__icon { color: var(--clr-gold); }

/* ============================================================
   NOTICE BANNER
============================================================ */
.notice-banner {
    background: var(--clr-card);
    border-top: 1px solid var(--clr-gold);
    border-bottom: 1px solid var(--clr-hairline);
    padding: 1rem 0;
    text-align: center;
}

.notice-banner p {
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: var(--clr-text);
}

/* ============================================================
   CTA SECTION
============================================================ */
.cta-section { background: var(--clr-surface); }

.cta-section__inner {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.cta-section__inner p {
    color: var(--clr-text-muted);
    margin-top: 0.5rem;
}

.cta-section__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1rem;
}

/* ============================================================
   FOOTER
============================================================ */
.site-footer {
    background: var(--clr-surface);
    border-top: 1px solid var(--clr-hairline);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 4rem;
    padding-block: 4rem;
}

.site-footer__wordmark {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: var(--clr-cream);
    display: block;
    margin-bottom: 0.75rem;
}

.site-footer__tagline {
    color: var(--clr-text-muted);
    font-size: 0.9rem;
    font-style: italic;
}

.site-footer__location { margin-bottom: 1.5rem; }
.site-footer__location p { font-size: 0.85rem; color: var(--clr-text-muted); margin-top: 0.25rem; }

.site-footer__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.site-footer__list a {
    font-size: 0.85rem;
    color: var(--clr-text-muted);
    transition: color var(--transition);
}

.site-footer__list a:hover { color: var(--clr-gold); }

.site-footer__bottom {
    border-top: 1px solid var(--clr-hairline);
    padding: 1.5rem 0;
}

.site-footer__bottom .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.site-footer__bottom p {
    font-size: 0.8rem;
    color: var(--clr-text-muted);
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media ( max-width: 1024px ) {
    .atmosphere__content { padding: 4rem 3rem; }
    .site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media ( max-width: 768px ) {
    .site-nav { display: none; }
    .site-header__burger { display: flex; }
    .site-header__actions .btn { display: none; }  /* hide CTA on mobile */
    .locations__inner { grid-template-columns: 1fr; }
    .location-card { border-right: none; border-bottom: 1px solid var(--clr-hairline); }
    .location-card:last-child { border-bottom: none; }
    .atmosphere__split { grid-template-columns: 1fr; }
    .atmosphere__media { aspect-ratio: 16/9; }
    .atmosphere__content { padding: 3rem 1.5rem; }
    .site-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
    .hero__actions { flex-direction: column; }
    .site-footer__bottom .container { flex-direction: column; text-align: center; }
}

@media ( max-width: 480px ) {
    .rooms-grid { grid-template-columns: 1fr; }
}

.featured-rooms { background: var(--clr-bg); }

/* ============================================================
   PAGE HERO (short version for inner pages)
============================================================ */
.page-main { padding-top: 80px; }

.page-hero {
    padding: 5rem 0 3rem;
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-hairline);
    text-align: center;
}

.page-hero h1 {
    font-size: clamp( 2.5rem, 4vw, 4rem );
    margin: 0.5rem 0 1rem;
}

.page-hero__intro {
    max-width: 600px;
    margin: 1.5rem auto 0;
    color: #c9bfc4;  /* pearl-300 */
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.3rem;
    line-height: 1.6;
}

/* ============================================================
   LOCATION FILTER
============================================================ */
.location-filter {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 0.6rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--clr-border);
    background: transparent;
    color: var(--clr-text-muted);
    cursor: pointer;
    transition: var(--transition);
    border-radius: var(--border-radius);
    font-family: var(--font-serif);
}

.filter-btn:hover,
.filter-btn.active {
    border-color: var(--clr-gold);
    color: var(--clr-gold);
    background: rgba(201,146,42,0.08);
}

/* ============================================================
   KAMERS GRID
============================================================ */
.kamers-grid {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 320px, 1fr ) );
    gap: 2rem;
}

.kamer-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    display: flex;
    flex-direction: column;
    transition: border-color var(--transition), transform var(--transition);
}

.kamer-card:hover {
    border-color: var(--clr-gold);
    transform: translateY(-4px);
}

.kamer-card__img-wrap {
    position: relative;
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.kamer-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.kamer-card:hover .kamer-card__img-wrap img {
    transform: scale(1.05);
}

.kamer-card__badges {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.badge {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.75rem;
    border: 1px solid;
}

.badge--type {
    background: rgba(14,12,10,0.85);
    color: var(--clr-gold);
    border-color: var(--clr-gold);
}

.badge--location {
    background: rgba(14,12,10,0.85);
    color: var(--clr-cream);
    border-color: var(--clr-border);
}

.kamer-card__body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.75rem;
}

.kamer-card__title {
    font-size: 1.4rem;
    color: var(--clr-cream);
    margin: 0;
}

.kamer-card__desc {
    font-size: 0.9rem;
    color: var(--clr-text-muted);
    line-height: 1.6;
    flex: 1;
}

.kamer-card__amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.amenity-tag {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--clr-border);
    color: var(--clr-text-muted);
    border-radius: 2px;
}

.kamer-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.25rem;
    border-top: 1px solid var(--clr-hairline);
    gap: 1rem;
}

.kamer-card__price {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.price-from {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
}

.price-amount {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 300;
    color: var(--clr-gold-light);
}

.price-unit {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
}

/* hidden by filter */
.kamer-card.hidden { display: none; }

@media ( max-width: 768px ) {
    .kamers-grid { grid-template-columns: 1fr; }
    .location-filter { justify-content: center; }
}

/* ============================================================
   TARIEVEN
============================================================ */
.tarieven-location { margin-bottom: var(--space-xl); }
.tarieven-location__head { margin-bottom: 2rem; }
.tarieven-location__head h2 { font-size: clamp(2rem,3vw,3rem); margin: 0.5rem 0; }
.tarieven-location__addr { color: var(--clr-text-muted); font-size: 0.9rem; }
.tarieven-table-wrap { overflow-x: auto; }
.tarieven-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); }
.tarieven-table th { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-gold); padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--clr-hairline-strong); text-align: left; }
.tarieven-table td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--clr-hairline); color: var(--clr-text); font-size: 0.95rem; }
.tarieven-table tbody tr:hover td { background: var(--clr-card); }
.tarieven-table__name { color: var(--clr-cream); font-weight: 500; white-space: nowrap; }
.tarieven-table__link { margin-left: 0.5rem; color: var(--clr-gold); font-size: 0.8rem; text-decoration: none; opacity: 0.6; transition: opacity var(--transition); }
.tarieven-table__link:hover { opacity: 1; }
.tarieven-note { margin-top: 2rem; font-size: 0.85rem; color: var(--clr-text-muted); border-top: 1px solid var(--clr-hairline); padding-top: 1.5rem; }

/* ============================================================
   WERKWIJZE
============================================================ */
.werkwijze-steps { list-style: none; display: flex; flex-direction: column; gap: 0; max-width: 760px; margin: 0 auto; }
.werkwijze-step { display: flex; gap: 2rem; align-items: flex-start; padding: 2.5rem 0; border-bottom: 1px solid var(--clr-hairline); }
.werkwijze-step:last-child { border-bottom: none; }
.werkwijze-step__num { font-family: var(--font-display); font-style: italic; font-size: 4rem; font-weight: 400; line-height: 1; color: var(--clr-gold); opacity: 0.4; min-width: 60px; text-align: center; }
.werkwijze-step__body h3 { font-size: 1.4rem; margin: 0 0 0.5rem; font-style: italic; }
.werkwijze-step__body p { color: var(--clr-text-muted); line-height: 1.7; margin: 0; }
.werkwijze-extra { max-width: 600px; margin: 3rem auto 0; text-align: center; color: var(--clr-text-muted); font-style: italic; }

/* ============================================================
   BESCHIKBAARHEID
============================================================ */
.beschik-updated { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-text-muted); margin-top: 1rem; }
.beschik-location { margin-bottom: 4rem; }
.beschik-location h2 { font-size: clamp(1.75rem,2.5vw,2.5rem); margin: 0.5rem 0 2rem; }
.beschik-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 1rem; }
.beschik-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; border: 1px solid var(--clr-hairline); background: var(--clr-card); }
.beschik-card__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.beschik-card--available .beschik-card__dot { background: #4caf50; box-shadow: 0 0 8px rgba(76,175,80,0.5); }
.beschik-card--full .beschik-card__dot { background: var(--clr-oxblood); }
.beschik-card--unknown .beschik-card__dot { background: var(--clr-text-muted); }
.beschik-card__type { font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-gold); margin: 0 0 0.25rem; }
.beschik-card__count { font-family: var(--font-serif); font-size: 1.1rem; color: var(--clr-cream); margin: 0; }
.beschik-card--full .beschik-card__count { color: var(--clr-text-muted); }

/* ============================================================
   FAQ
============================================================ */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--clr-hairline); }
.faq-item__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.5rem 0; background: none; border: none; cursor: pointer; font-family: var(--font-serif); font-size: 1.15rem; color: var(--clr-cream); text-align: left; transition: color var(--transition); }
.faq-item__q:hover { color: var(--clr-gold); }
.faq-item__icon { font-family: var(--font-body); font-size: 1.5rem; font-weight: 300; color: var(--clr-gold); flex-shrink: 0; transition: transform var(--transition); }
.faq-item__q[aria-expanded="true"] .faq-item__icon { transform: rotate(45deg); }
.faq-item__a { padding: 0 0 1.5rem; color: var(--clr-text-muted); line-height: 1.7; font-size: 0.95rem; }
.faq-item__a p { margin: 0; }

/* ============================================================
   CONTACT
============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; align-items: start; }
.contact-info__block { margin-bottom: 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--clr-hairline); }
.contact-info__block:last-child { border-bottom: none; margin-bottom: 0; }
.contact-info__block h3 { font-size: 1.5rem; margin: 0.5rem 0 1rem; font-style: italic; }
.contact-info__block p { color: var(--clr-text-muted); font-size: 0.9rem; margin: 0.25rem 0; }
.contact-info__block a { color: var(--clr-gold); text-decoration: none; }
.contact-hours { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.75rem; }
.contact-hours li { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--clr-text-muted); }
.contact-form__placeholder { color: var(--clr-text-muted); font-style: italic; padding: 2rem; border: 1px dashed var(--clr-hairline); text-align: center; }
@media(max-width:768px){ .contact-grid { grid-template-columns: 1fr; } }

/* ============================================================
   LIGGING
============================================================ */
.ligging-block { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; align-items: start; margin-bottom: 5rem; padding-bottom: 5rem; border-bottom: 1px solid var(--clr-hairline); }
.ligging-block:last-child { border-bottom: none; margin-bottom: 0; }
.ligging-block__info h2 { font-size: clamp(1.75rem,2.5vw,2.5rem); margin: 0.5rem 0 1rem; }
.ligging-block__info p { color: var(--clr-text-muted); font-size: 0.9rem; margin: 0.5rem 0; line-height: 1.6; }
.ligging-block__map { border: 1px solid var(--clr-hairline); overflow: hidden; }
@media(max-width:768px){ .ligging-block { grid-template-columns: 1fr; } }

/* ============================================================
   FAQ JS toggle
============================================================ */

/* Header CTA button - force gold background */
.site-header__actions .btn--filled,
.site-header__actions .btn--filled:link,
.site-header__actions .btn--filled:visited {
    background: var(--clr-gold) !important;
    border-color: var(--clr-gold) !important;
    color: #08070a !important;
}
.site-header__actions .btn--filled:hover {
    background: var(--clr-gold-light) !important;
    border-color: var(--clr-gold-light) !important;
}

/* ============================================================
   GLOBAL BUTTON OVERRIDE — unified gold #c69a4d
============================================================ */
.btn--filled {
    background: #c69a4d !important;
    border-color: #c69a4d !important;
    color: #08070a !important;
}
.btn--filled:hover {
    background: #d8b56a !important;
    border-color: #d8b56a !important;
    color: #08070a !important;
}
.btn:not(.btn--filled) {
    background: transparent !important;
    border-color: #c69a4d !important;
    color: #c69a4d !important;
}
.btn:not(.btn--filled):hover {
    background: #c69a4d !important;
    color: #08070a !important;
}

/* Footer logo */
.site-footer__logo-link { display: inline-block; margin-bottom: 0.75rem; }
.site-footer__logo { height: 48px; width: auto; }

/* Social links */
.social-links { display: flex; gap: 1rem; align-items: center; }
.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--clr-hairline);
    color: var(--clr-text-muted);
    transition: var(--transition);
}
.social-link:hover {
    border-color: var(--clr-gold);
    color: var(--clr-gold);
}
/* Update footer grid to 4 columns */
.site-footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr; }
@media(max-width:1024px){ .site-footer__inner { grid-template-columns: 1fr 1fr; } }
@media(max-width:768px){ .site-footer__inner { grid-template-columns: 1fr; } }

/* ============================================================
   SINGLE ROOM
============================================================ */
.suite-hero {
    position: relative;
    height: 60vh;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding-top: 80px;
}
.suite-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8,7,10,0.95) 0%, rgba(8,7,10,0.3) 100%);
}
.suite-hero__content {
    position: relative;
    z-index: 2;
    padding-bottom: 3rem;
}
.suite-hero__content h1 { font-size: clamp(3rem,5vw,5rem); margin: 0.5rem 0; }
.suite-hero__price {
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--clr-gold);
    margin-top: 1rem;
}
.suite-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 4rem;
    align-items: start;
}
.suite-gallery {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 0.5rem;
    margin-bottom: 2.5rem;
}
.suite-gallery__item { display: block; aspect-ratio: 4/3; overflow: hidden; }
.suite-gallery__item img { width:100%; height:100%; object-fit:cover; transition: transform 0.5s ease; }
.suite-gallery__item:hover img { transform: scale(1.04); }
.suite-desc { margin-top: 1rem; }
.suite-desc p { font-size: 1.15rem; line-height: 1.75; color: var(--clr-text); }
.suite-aside { position: sticky; top: 100px; }
.suite-aside__block {
    padding: 1.5rem;
    background: var(--clr-card);
    border: 1px solid var(--clr-hairline);
    margin-bottom: 1rem;
}
.suite-aside__block h4 {
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--clr-gold);
    margin: 0 0 1rem;
}
.suite-feats { display: flex; flex-direction: column; gap: 0.5rem; }
.suite-feats li {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--clr-text);
    padding-left: 1rem;
    position: relative;
}
.suite-feats li::before { content: "\2014"; position: absolute; left: 0; color: var(--clr-gold); }
.suite-pricing { width: 100%; border-collapse: collapse; }
.suite-pricing td { padding: 0.5rem 0; border-bottom: 1px solid var(--clr-hairline); font-size: 0.95rem; color: var(--clr-text); }
.suite-pricing td:last-child { text-align: right; color: var(--clr-gold-light); font-family: var(--font-display); font-style: italic; font-size: 1.2rem; }
@media(max-width:900px){ .suite-grid { grid-template-columns: 1fr; } .suite-aside { position: static; } }
@media(max-width:600px){ .suite-gallery { grid-template-columns: repeat(2,1fr); } }

/* ============================================================
   GALLERY PAGE
============================================================ */
.galerij-location { margin-bottom: 5rem; }
.galerij-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
    gap: 0.5rem;
}
.galerij-item { display: block; aspect-ratio: 4/3; overflow: hidden; }
.galerij-item img { width:100%; height:100%; object-fit:cover; transition: transform 0.5s ease; }
.galerij-item:hover img { transform: scale(1.05); }
.galerij-item.hidden { display: none; }
@media(max-width:600px){ .galerij-grid { grid-template-columns: repeat(2,1fr); } }

/* ============================================================
   FLOATING WHATSAPP
============================================================ */
.float-wa {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 200;
    width: 54px;
    height: 54px;
    background: #25d366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    transition: transform var(--transition), box-shadow var(--transition);
}
.float-wa:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(37,211,102,0.4);
    color: #fff;
}
@media(max-width:768px){
    .float-wa { bottom: 1.25rem; right: 1.25rem; width: 48px; height: 48px; }
}

/* ============================================================
   WHATSAPP CTA IN CONTACT
============================================================ */
.contact-whatsapp {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--clr-hairline);
}
.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 14px 24px;
    background: #25d366;
    color: #fff;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    transition: var(--transition);
}
.whatsapp-btn:hover { background: #1db954; color: #fff; }

/* ============================================================
   CONTACT FORM PLACEHOLDER
============================================================ */
.contact-form__placeholder {
    padding: 2rem;
    border: 1px dashed var(--clr-hairline);
    color: var(--clr-text-muted);
    font-style: italic;
    line-height: 1.7;
}
.contact-form__placeholder strong { color: var(--clr-gold); font-style: normal; }

/* Formidable Forms styling override */
.frm_forms input[type=text],
.frm_forms input[type=email],
.frm_forms textarea,
.frm_forms select {
    background: var(--clr-card) !important;
    border: 1px solid var(--clr-hairline) !important;
    color: var(--clr-text) !important;
    padding: 12px 16px !important;
    font-family: var(--font-serif) !important;
    font-size: 1rem !important;
    width: 100% !important;
    border-radius: 0 !important;
    outline: none !important;
}
.frm_forms input:focus,
.frm_forms textarea:focus {
    border-color: var(--clr-gold) !important;
}
.frm_forms label {
    font-family: var(--font-body) !important;
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--clr-text-muted) !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
}
.frm_forms .frm_submit button,
.frm_forms .frm_submit input[type=submit] {
    background: var(--clr-gold) !important;
    border: none !important;
    color: #08070a !important;
    padding: 14px 28px !important;
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    transition: var(--transition) !important;
}
.frm_forms .frm_submit button:hover { background: var(--clr-gold-light) !important; }

/* Atmosphere section button - inline width only */
.atmosphere__content .btn { width: auto !important; display: inline-flex !important; }

.page-hero .gold-line { margin-inline: auto; }

/* Tarieven table mobile fixes */
.tarieven-table th,
.tarieven-table td { padding: 1rem 1.5rem; font-size: 1rem; }
.tarieven-table th:first-child,
.tarieven-table td:first-child { min-width: 180px; }
.tarieven-table th:not(:first-child),
.tarieven-table td:not(:first-child) {
    text-align: right;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--clr-gold-light);
}
.tarieven-table th:not(:first-child) {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 0.7rem;
    color: var(--clr-gold);
}
.tarieven-table__link {
    margin-left: 0.75rem;
    color: var(--clr-gold);
    font-size: 0.9rem;
    opacity: 0.7;
    transition: opacity var(--transition);
    font-style: normal;
    font-family: var(--font-body);
}
.tarieven-table__link:hover { opacity: 1; }

@media(max-width: 768px) {
    .tarieven-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tarieven-table { min-width: 480px; }
    .tarieven-table th, .tarieven-table td { padding: 0.875rem 1rem; font-size: 0.9rem; }
}

/* Contact info rows */
.contact-info__address { color: var(--clr-text-muted); font-size: 0.9rem; margin-bottom: 1rem; }
.contact-info__row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--clr-text);
    text-decoration: none;
    margin-bottom: 0.6rem;
    transition: color var(--transition);
}
.contact-info__row:hover { color: var(--clr-gold); }
.contact-info__icon {
    display: flex;
    align-items: center;
    color: var(--clr-gold);
    flex-shrink: 0;
}

/* Footer contact rows */
.site-footer__address { color: var(--clr-text-muted); font-size: 0.85rem; margin-bottom: 0.5rem; }
.site-footer__contact-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--clr-text-muted);
    text-decoration: none;
    margin-top: 0.4rem;
    transition: color var(--transition);
}
.site-footer__contact-row:hover { color: var(--clr-gold); }
.footer-icon {
    display: flex;
    align-items: center;
    color: var(--clr-gold);
    opacity: 0.7;
    flex-shrink: 0;
}

/* Atmosphere button fix - prevent stretching */
.atmosphere__content .btn,
.atmosphere__content a.btn {
    display: inline-flex !important;
    width: auto !important;
    align-self: flex-start !important;
}

/* Nav menu size increase */
.site-nav__list a {
    font-size: 13px !important;
    letter-spacing: 0.15em !important;
}

.site-nav__list a { font-size: 16px !important; letter-spacing: 0.1em !important; }

.site-nav__list a { font-size: 15px !important; }

.site-nav__list a { font-size: 14px !important; }

/* ============================================================
   SEO LANDING PAGES
============================================================ */
.seo-hero { border-bottom: 1px solid var(--clr-hairline); }
.seo-hero__actions { display: flex; gap: 1rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }

.seo-distance-strip {
    background: var(--clr-card);
    border-bottom: 1px solid var(--clr-hairline);
    padding: 0.875rem 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.seo-intro__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
}
.seo-intro__text h2 { font-size: clamp(2rem,3vw,3rem); margin: 0.75rem 0; }
.seo-intro__text p { color: var(--clr-text); line-height: 1.8; margin-top: 1rem; }

.seo-intro__usps { display: flex; flex-direction: column; gap: 1.5rem; }
.seo-usp {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--clr-hairline);
}
.seo-usp:last-child { border-bottom: none; padding-bottom: 0; }
.seo-usp__icon { color: var(--clr-gold); font-size: 1.1rem; margin-top: 0.1rem; flex-shrink: 0; }
.seo-usp strong { display: block; color: var(--clr-cream); font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
.seo-usp p { color: var(--clr-text-muted); font-size: 0.875rem; margin: 0; }

.seo-pricing__grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem;
}
.seo-price-card {
    background: var(--clr-card);
    border: 1px solid var(--clr-hairline);
    padding: 1.5rem;
    text-align: center;
}
.seo-price-card 
.seo-price-card__amount {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 2rem;
    color: var(--clr-gold-light);
    margin: 0.5rem 0;
}
.seo-price-card p:last-child {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--clr-text-muted);
    letter-spacing: 0.05em;
    margin: 0;
}

@media(max-width:900px){
    .seo-intro__inner { grid-template-columns: 1fr; gap: 3rem; }
    .seo-pricing__grid { grid-template-columns: repeat(2,1fr); }
}
@media(max-width:480px){
    .seo-pricing__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   THANK YOU PAGE
============================================================ */
.thankyou-section {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    padding: 6rem 0;
}
.thankyou-inner {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}
.thankyou-icon {
    width: 80px;
    height: 80px;
    border: 1px solid var(--clr-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-gold);
    margin-bottom: 0.5rem;
}
.thankyou-inner h1 {
    font-size: clamp(3rem, 5vw, 5rem);
    line-height: 1.05;
    margin: 0;
}
.thankyou-sub {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--clr-text-muted);
    line-height: 1.7;
    max-width: 480px;
}
.thankyou-sub strong { color: var(--clr-gold); font-style: normal; }
.thankyou-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.5rem;
}
.thankyou-locations {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: 100%;
    margin-top: 2rem;
    border-top: 1px solid var(--clr-hairline);
    padding-top: 2rem;
}
.thankyou-location {
    padding: 1.25rem;
    border: 1px solid var(--clr-hairline);
    text-align: center;
}
.thankyou-location p {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--clr-text-muted);
    margin: 0.25rem 0 0;
}
@media(max-width:480px){
    .thankyou-locations { grid-template-columns: 1fr; }
    .thankyou-actions { flex-direction: column; width: 100%; }
    .thankyou-actions .btn { justify-content: center; }
}

/* Thank you page spacing fix */
.thankyou-section { padding: 8rem 0; }
.thankyou-inner { gap: 2rem; }
.thankyou-icon { margin-bottom: 1.5rem; }
.thankyou-inner h1 { margin-bottom: 0.5rem; }
.thankyou-sub { margin-bottom: 1rem; }
.thankyou-actions { margin-top: 1.5rem; margin-bottom: 1rem; }
.thankyou-locations { margin-top: 3rem; padding-top: 3rem; gap: 1.5rem; }
.thankyou-location { padding: 1.75rem; }
.thankyou-location p { margin: 0.5rem 0 0; line-height: 1.7; }

/* Fix display font on numbers - use serif not Bodoni */
.tarieven-table td:not(:first-child),
.suite-pricing td:last-child,
.room-card__price,
.price-amount,
.seo-price-card__amount {
    font-family: var(--font-serif) !important;
    font-style: normal !important;
}
/* Tarieven table location title - reduce size */
.tarieven-location__head h2 {
    font-family: var(--font-serif) !important;
    font-size: clamp(1.5rem, 2.5vw, 2.5rem) !important;
}

/* Mobile tarieven - stack cards instead of wide table */
@media(max-width: 640px) {
    .tarieven-table-wrap { overflow: visible; }
    .tarieven-table,
    .tarieven-table thead,
    .tarieven-table tbody,
    .tarieven-table tr,
    .tarieven-table th,
    .tarieven-table td { display: block; width: 100%; }
    .tarieven-table thead { display: none; }
    .tarieven-table tr {
        background: var(--clr-card);
        border: 1px solid var(--clr-hairline);
        margin-bottom: 1rem;
        padding: 1.25rem;
    }
    .tarieven-table td { 
        padding: 0.4rem 0;
        border-bottom: none;
        font-size: 0.95rem;
        text-align: left !important;
    }
    .tarieven-table td::before {
        content: attr(data-label)" ";
        font-family: var(--font-body);
        font-size: 0.7rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--clr-gold);
        display: block;
        margin-bottom: 0.15rem;
    }
    .tarieven-table__name { 
        color: var(--clr-cream);
        font-size: 1.1rem;
        font-family: var(--font-serif);
        margin-bottom: 0.5rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--clr-hairline) !important;
    }
    .tarieven-table td:not(:first-child) {
        display: inline-block;
        width: auto;
        margin-right: 1rem;
        font-family: var(--font-serif);
        font-size: 1.1rem;
        color: var(--clr-gold-light);
    }
}

/* Tarieven table - room names in serif */
.tarieven-table__name {
    font-family: var(--font-serif) !important;
    font-size: 1.1rem !important;
    font-style: italic !important;
    color: var(--clr-cream) !important;
}
/* Header row - keep body font */
.tarieven-table th {
    font-family: var(--font-body) !important;
    font-style: normal !important;
}

@media(max-width: 768px) {
    .site-header__actions .btn,
    .site-header__actions a.btn {
        display: none !important;
    }
}

/* Hide header CTA on mobile - specific class */
@media screen and (max-width: 768px) {
    a.header-cta {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }
}

@media(max-width: 768px) {
    .hero__actions { flex-direction: row; flex-wrap: wrap; }
    .hero__actions .btn { width: auto !important; flex: 0 0 auto; }
}

.contact-faq-cta { margin-bottom: 2rem; }
.contact-faq-link {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.5rem;
    border: 1px solid var(--clr-hairline-strong);
    background: var(--clr-card);
    text-decoration: none;
    transition: border-color var(--transition);
}
.contact-faq-link:hover { border-color: var(--clr-gold); }
.contact-faq-link__title {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--clr-cream);
}
.contact-faq-link__sub {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--clr-text-muted);
    line-height: 1.5;
}








.hero .hero__title,
.hero .hero__eyebrow,
.hero .hero__sub { text-align: left !important; }
.hero .gold-line { margin-left: 0 !important; margin-right: auto !important; }
.hero 

/* Hero - left aligned */
.hero__content {
    text-align: left;
}
.hero__content .gold-line {
    margin-left: 0;
    margin-right: auto;
}
.hero__actions {
    justify-content: flex-start;
}

.hero__title { max-width: 820px; }
.hero__sub    { max-width: 560px; }

/* Footer Waze link */
.site-footer__waze-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--clr-text-muted);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    transition: color var(--transition);
}
.site-footer__waze-link:hover {
    color: var(--clr-gold);
}


/* Werkwijze USP grid */
.werkwijze-usp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}
.werkwijze-usp-card {
    padding: 1.75rem;
    border: 1px solid var(--clr-hairline);
    background: var(--clr-card);
}


/* Blockquote */
.werkwijze-blockquote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: var(--clr-cream);
    line-height: 1.3;
    border: none;
    margin: 0;
    padding: 0;
}

}
@media(max-width: 480px) {
    .werkwijze-usp-grid { grid-template-columns: 1fr; }
}






/* Werkwijze USP cards */
.werkwijze-usp-card h4 {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--clr-gold);
    margin: 0 0 0.75rem;
}
.werkwijze-usp-card p {
    font-size: 1rem;
    color: var(--clr-text-muted);
    line-height: 1.6;
    margin: 0;
}


    .werkwijze-usp-card {
        display: block !important;
        padding: 1.25rem !important;
        border: 1px solid var(--clr-hairline) !important;
        background: var(--clr-card) !important;
    }
}

/* ============================================================
   UNIFIED TYPE SCALE — appended last, single source of truth
   Display:  Bodoni Moda italic
   Serif:    Cormorant Garamond (body, editorial)
   Sans:     UI micro-labels only (eyebrows, nav, buttons)
   Base:     18px body, 1.7 line-height
============================================================ */

/* Base body */
body {
    font-size: 18px;
    line-height: 1.7;
}

/* Headings — Bodoni Moda italic */
h1 { font-size: clamp(3rem, 6vw, 6.5rem); }
h2 { font-size: clamp(2rem, 3.5vw, 3.5rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9rem; }

/* Eyebrow — UI micro label */


/* Body text — consistent */
p { font-size: 1.125rem; line-height: 1.75; }

/* Navigation */
.site-nav__list a { font-size: 14px; }

/* Buttons */
.btn { font-size: 12px; letter-spacing: 0.18em; }

/* Badges */
.badge { font-size: 10px; }
.amenity-tag { font-size: 10px; }

/* Card room price */
.price-amount { font-size: 1.75rem; }
.price-from, .price-unit { font-size: 0.8rem; }

/* Page hero intro */
.page-hero__intro { font-size: 1.2rem; line-height: 1.65; }

/* Hero subtitle */
.hero__sub { font-size: 1.25rem; line-height: 1.65; }

/* Footer */
.site-footer__contact-row,
.site-footer__address,
.site-footer__waze-link,
.site-footer__list a { font-size: 1rem; }
.site-footer__bottom p { font-size: 0.85rem; }

/* Room card */
.kamer-card__desc,
.room-card__desc { font-size: 1rem; line-height: 1.65; }
.kamer-card__title,
.room-card__title { font-size: 1.35rem; }

/* Tarieven table */
.tarieven-table th { font-size: 11px; }
.tarieven-table td { font-size: 1rem; }

/* FAQ */
.faq-item__q { font-size: 1.1rem; }
.faq-item__a { font-size: 1rem; line-height: 1.75; }

/* Werkwijze */
.werkwijze-step__body h3 { font-size: 1.5rem; }
.werkwijze-step__body p  { font-size: 1.1rem; }
.werkwijze-usp-card h4   { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
.werkwijze-usp-card p    { font-size: 1rem; }

/* Suite aside */
.suite-aside__block h4 { font-size: 11px; letter-spacing: 0.15em; }
.suite-feats li        { font-size: 0.95rem; }
.suite-pricing td      { font-size: 1rem; }

/* SEO pages */
.seo-price-card__amount { font-size: 1.75rem; }
.seo-price-card p:last-child { font-size: 0.85rem; }
.seo-usp strong { font-size: 0.9rem; }
.seo-usp p      { font-size: 0.9rem; }

/* Thank you */
.thankyou-sub { font-size: 1.1rem; }

/* Contact */
.contact-info__block p { font-size: 1rem; }
.contact-hours li      { font-size: 0.9rem; }

/* Section header sub */
.section-header__sub { font-size: 1.1rem; }

/* Notice banner */
.notice-banner p { font-size: 0.9rem; }

/* Werkwijze USP grid - base */
.werkwijze-usp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.werkwijze-usp-card {
    padding: 1.75rem;
    border: 1px solid var(--clr-hairline);
    background: var(--clr-card);
}
/* Werkwijze USP grid - tablet */
@media (max-width: 900px) {
    .werkwijze-usp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Werkwijze USP grid - mobile */
@media (max-width: 600px) {
    .werkwijze-usp-grid {
        grid-template-columns: 1fr;
    }
    .werkwijze-usp-card {
        padding: 1.25rem;
    }
}

/* Beschikbaarheid cards - type label */
.beschik-card__type {
    font-family: var(--font-body) !important;
    font-style: normal !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--clr-gold) !important;
}
/* Beschikbaarheid cards - count text */
.beschik-card__count {
    font-family: var(--font-serif) !important;
    font-style: normal !important;
    font-size: 1.1rem !important;
    color: var(--clr-cream) !important;
}

/* ============================================================
   FONT FAMILY - FINAL RULE
   Titles (h1-h6): Bodoni Moda italic
   Paragraphs & body: Cormorant Garamond
============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display) !important;
    font-style: italic !important;
}
p, li, td, th, blockquote, label {
    font-family: var(--font-serif) !important;
    font-style: normal !important;
}
/* Eyebrows and UI micro-labels stay as-is - no font override */


/* Eyebrow - single source of truth */
.eyebrow {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--clr-gold);
    margin-bottom: 0.75rem;
    display: block;
}

/* Werkwijze checkout section */
.werkwijze-checkout { background: var(--clr-surface); border-top: 1px solid var(--clr-hairline); border-bottom: 1px solid var(--clr-hairline); }
.werkwijze-checkout__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}
.werkwijze-checkout__img {
    overflow: hidden;
}
.werkwijze-checkout__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.werkwijze-checkout__img:hover img { transform: scale(1.03); }
.werkwijze-checkout__content .gold-line { margin-bottom: 1.5rem; }
.werkwijze-checkout__content h2 { margin: 0.5rem 0 1rem; }
.werkwijze-checkout__content p { font-size: 1.1rem; line-height: 1.75; color: var(--clr-text); }
@media(max-width: 768px) {
    .werkwijze-checkout__inner { grid-template-columns: 1fr; gap: 2rem; }
}