/* == CSS RESET & NORMALIZATION == */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
 margin:0;
 padding:0;
 border:0;
 font-size:100%;
 font:inherit;
 vertical-align:baseline;
 box-sizing:border-box;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
 display:block;
}
body{
 line-height:1.5;
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 background:#fff;
 color:#171717;
 min-height:100vh;
}
img,svg{
 display:block;
 max-width:100%;
 height:auto;
}
a{text-decoration:none;color:inherit;}
button,input,select,textarea{
 font-family:inherit;
 font-size:inherit;
 color:inherit;
 background:none;
 border:none;
 outline:none;
}
ul,ol{
 list-style:none;
}

/* =============== VARIABLES & FONTS =============== */
:root {
  --color-bg: #fff;
  --color-bg-dark: #181818;
  --color-text: #171717;
  --color-title: #111;
  --color-primary: #2D3E50;
  --color-secondary: #E6E6E6;
  --color-accent: #D14C73;
  --color-muted: #A0A0A0;
  --color-card: #fff;
  --color-border: #ECECEC;
  --color-shadow: rgba(40,40,50,0.08);
  --color-link: #171717;
  --color-link-hover: var(--color-accent);
  --color-footer: #222;
  --color-footer-text: #FAFAFA;
  --color-contrast: #fff;

  --font-title: 'Montserrat', Arial,sans-serif;
  --font-body: 'Roboto', Arial,sans-serif;

  --radius: 12px;
  --shadow-1: 0 2px 12px 0 rgba(0,0,0,0.09);
  --transition: all 0.23s cubic-bezier(.37,.36,.22,.95);

  --header-height: 76px;
  --container-pad: 18px;
}

@media (max-width: 600px) {
 :root {
   --container-pad: 12px;
   --header-height: 58px;
 }
}

body{
 font-family: var(--font-body);
 font-size: 16px;
 background: var(--color-bg);
 color: var(--color-text);
 letter-spacing: 0.01em;
}

/* === TYPOGRAPHY HIERARCHY === */
h1, .h1 {
 font-family: var(--font-title);
 font-size: 2.7rem;
 line-height: 1.1;
 font-weight: 700;
 color: var(--color-title);
 margin-bottom: 24px;
 letter-spacing:-0.02em;
}
@media (max-width:600px){
 h1, .h1{font-size:2rem;}
}
h2, .h2 {
 font-family: var(--font-title);
 font-size: 2rem;
 line-height:1.15;
 font-weight: 600;
 color: var(--color-title);
 margin-bottom: 20px;
}
h3, .h3 {
 font-family: var(--font-title);
 font-size: 1.28rem;
 font-weight: 500;
 color: var(--color-title);
 margin-bottom: 12px;
 margin-top: 0;
}
h4, .h4 {
 font-family: var(--font-body);
 font-size: 1.08rem;
 font-weight: 600;
 color: var(--color-title);
 margin-bottom: 8px;
}
.subheadline {
 font-family: var(--font-body);
 font-size: 1.2rem;
 color: var(--color-primary);
 line-height: 1.4;
 margin-bottom: 22px;
}
small, .small {
 font-size: 0.92rem;
 color: var(--color-muted);
}

p {
 margin-bottom:16px;
}
strong {font-weight:600;color:var(--color-title);}

address {
 font-style:normal;
 font-family:var(--font-body);
 color:var(--color-title);
 margin-bottom:8px;
}

/* =============== LAYOUT CONTAINERS =============== */
.container {
 width: 100%;
 max-width: 1100px;
 margin: 0 auto;
 padding-left: var(--container-pad);
 padding-right: var(--container-pad);
}
.header-wrapper, .footer-wrapper {
 display: flex;
 align-items: center;
 justify-content: space-between;
 height: var(--header-height);
 gap: 20px;
}

.footer-wrapper {
 flex-direction: column;
 align-items: center;
 gap: 20px;
 background: var(--color-footer);
 color: var(--color-footer-text);
 padding-top: 36px;
 padding-bottom: 32px;
 margin-top:60px;
}

.footer-nav {
 display: flex;
 gap: 24px;
 flex-wrap: wrap;
 justify-content: center;
 margin-bottom:12px;
}
.footer-nav a {
 color: var(--color-footer-text);
 font-size: 1rem;
 opacity:0.89;
 transition:color .18s, opacity .18s;
}
.footer-nav a:hover {
 color: var(--color-accent);
 opacity:1;
}
.copyright {
 color: var(--color-footer-text);
 font-size: 0.95rem;
 opacity:0.73;
}

.main-nav {
 display: flex;
 gap: 24px;
 flex-wrap: wrap;
 align-items: center;
}
.main-nav a {
 font-family: var(--font-body);
 font-weight: 500;
 color: var(--color-primary);
 opacity:0.92;
 font-size:1.07rem;
 padding: 4px 0;
 border-bottom:2px solid transparent;
 transition:color .18s, border-color .18s;
}
.main-nav a:hover, .main-nav a:focus {
 color:var(--color-accent);
 border-bottom:2px solid var(--color-accent);
}

/* === HEADER / LOGO === */
header {
 width: 100%;
 background: var(--color-bg);
 border-bottom:1.5px solid var(--color-secondary);
 position: sticky;
 top: 0;
 z-index: 50;
 box-shadow: 0 2px 16px rgba(20,20,28,0.03);
}
.header-wrapper>img, .footer-wrapper>img {
 height: 48px;
 width: auto;
}
@media(max-width:700px){
 .header-wrapper>img, .footer-wrapper>img{ height:36px; }
}

/* ===== MAIN RESPONSIVE SECTIONS ===== */
.section {
 width: 100%;
 margin-bottom:60px;
 padding: 40px 20px;
 background: transparent;
}
.content-wrapper {
 display: flex;
 flex-direction: column;
 gap: 18px;
 justify-content: flex-start;
 max-width:860px;
 margin:0 auto;
}
.content-wrapper.center {
 align-items: center;
 justify-content: center;
 text-align: center;
}

.card-container {
 display: flex;
 flex-wrap: wrap;
 gap: 24px;
 align-items: stretch;
}
.card {
 background: var(--color-card);
 border: 1px solid var(--color-border);
 border-radius: var(--radius);
 box-shadow: var(--shadow-1);
 margin-bottom:20px;
 position:relative;
 display: flex;
 flex-direction:column;
 transition: box-shadow .21s;
}
.card:hover {
 box-shadow:0 4px 24px 0 rgba(30,30,40,0.10);
 z-index:2;
}

.content-grid, .features {
 display: flex;
 flex-wrap: wrap;
 gap: 20px;
 justify-content: space-between;
}
/* For demo, .features omitted. */

.text-image-section {
 display: flex;
 align-items: center;
 gap: 30px;
 flex-wrap: wrap;
}

.testimonial-card {
 display: flex;
 align-items: center;
 gap: 20px;
 padding: 20px;
 background: #F8F8F8;
 border-radius: var(--radius);
 box-shadow: 0 2px 8px rgba(40,40,50,0.04);
 margin-bottom: 20px;
 flex-direction: column;
 border: 1.5px solid #ededed;
}
.testimonial-card p {
 margin-bottom:0;
 color: #212121;
}
.testimonial-author {
 font-size:1em;
 color: #676767;
 margin-top: 10px;
 font-style:italic;
}

.feature-item {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 15px;
 padding: 18px;
 border-radius:var(--radius);
 box-shadow: var(--shadow-1);
 background:var(--color-card);
 transition:box-shadow .21s;
 margin-bottom:20px;
}
.feature-item:hover {
 box-shadow:0 4px 18px 0 rgba(20,20,30,0.09);
}

/* =============== LIST STYLES =============== */
.feature-grid, .service-list, .tips-list, .team-list, .reservation-details, .benefits-list, .contact-details-list {
 display: flex;
 flex-wrap: wrap;
 gap: 24px;
 margin:0 0 24px 0;
}
.feature-grid li, .service-list li, .team-list li {
 flex:1 1 265px;
 min-width:220px;
 background:var(--color-card);
 border-radius:var(--radius);
 box-shadow:var(--shadow-1);
 border:1px solid var(--color-border);
 padding:24px 20px;
 display:flex;
 flex-direction:column;
 align-items:flex-start;
 gap:14px;
 transition: box-shadow .18s, border-color .18s;
 margin-bottom:20px;
}
.feature-grid li:hover, .service-list li:hover {
 box-shadow: 0 6px 32px rgba(20,20,30,0.10);
 border-color:var(--color-primary);
 z-index:1;
}
.feature-grid img, .service-list img {
 height:38px; margin-bottom:4px; opacity:0.96;
}
.tips-list, .benefits-list, .contact-details-list {
 flex-direction:column;
 gap:12px;
}
.service-list li>div{display:flex; flex-direction:column; gap:5px;}
.price{font-weight:700;color:var(--color-accent);font-size:1.09em;}

.team-list {
 display: flex;
 flex-wrap: wrap;
 gap: 24px;
}
.team-list li {
 flex: 1 1 240px;
 background:var(--color-card);
 border: 1px solid var(--color-border);
 border-radius: var(--radius);
 padding: 24px 20px;
 box-shadow: var(--shadow-1);
 margin-bottom:20px;
}

.filters-list {
 display:flex;
 flex-wrap:wrap;
 gap:20px;
 margin-bottom:16px;
}
.filters-list li {
 color:var(--color-text);
 font-size:1em;
 line-height:1.4;
}

.reservation-details, .benefits-list {
 font-size:1.04em;
}

.faq-list dt {
 font-weight:600;
 margin-top:16px;
 color:var(--color-title);
}
.faq-list dd {
 margin-left:0; color:var(--color-text); margin-bottom: 12px;
}

/* =============== BUTTONS =============== */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 border-radius: var(--radius);
 font-family: var(--font-title);
 font-weight: 600;
 letter-spacing: 0.04em;
 font-size: 1.08rem;
 padding: 12px 32px;
 cursor: pointer;
 box-shadow: none;
 border: none;
 background: #fff;
 color: var(--color-primary);
 border: 2px solid var(--color-primary);
 transition: var(--transition);
 outline: none;
 gap: 6px;
 margin-top: 4px;
 margin-bottom: 4px;
}
.btn-primary {
 background: var(--color-primary);
 color: #fff;
 border: 2px solid var(--color-primary);
}
.btn-primary:hover, .btn-primary:focus {
 background: #181C22;
 color: #fff;
 border-color: #181C22;
 box-shadow:0 2px 12px rgba(20,20,24,.13);
}
.btn-secondary {
 background: #fff;
 color: var(--color-primary);
 border: 2px solid var(--color-primary);
}
.btn-secondary:hover, .btn-secondary:focus {
 background: var(--color-primary);
 color: #fff;
}
.btn-accent {
 background: var(--color-accent);
 color: #fff;
 border:2px solid var(--color-accent);
}
.btn-accent:hover, .btn-accent:focus {
 background: #ce215d;
 border-color:#ce215d;
 color: #fff;
}
@media(max-width:500px){
 .btn{
   font-size:1rem;
   padding:11px 18px;
 }
}

/* =============== HERO SECTION =============== */
.hero-section {
 background: linear-gradient(to bottom, #f9f9f9 80%, #fff 100%);
 padding: 0 0 48px 0;
 display: flex;
 align-items: center;
}
.hero-section .container {
 padding-top:42px;
 padding-bottom:24px;
}
.hero-section .content-wrapper {
 text-align: center;
 align-items: center;
 justify-content: center;
 gap: 20px;
}

/* =============== MAP PLACEHOLDER =============== */
.map-placeholder {
 min-height: 80px;
 background: #EFEFEF;
 color: #AAA;
 font-style: italic;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 border-radius: var(--radius);
 font-size: 1.11em;
 padding: 20px;
 margin: 16px 0 22px 0;
}

/* =============== SOCIAL ICONS =============== */
.social-links {
 display:flex;
 gap:20px;
 margin-top:16px;
}
.social-links a img { height:32px; opacity:0.88; transition:opacity .17s; }
.social-links a:hover img{opacity:1; filter:contrast(1.1);}

/* =============== LEGAL SECTION =============== */
.legal {
 background: #FAFAFA;
 border-radius: var(--radius);
 border:1.5px solid var(--color-border);
 box-shadow: var(--shadow-1);
 padding: 32px 20px 32px 20px;
 margin-bottom:36px;
}
.legal-text ul {
 margin: 14px 0 0 18px;
}
.legal-text li {
 margin-bottom:4px;
 font-size:1em;
}

/* =============== MOBILE MENU =============== */
.mobile-menu-toggle {
 display: none;
 position: fixed;
 top: 18px;
 right: 18px;
 z-index: 120;
 width: 48px;
 height: 48px;
 background: #2D3E50;
 color: #fff;
 border-radius: 50%;
 font-size: 2rem;
 justify-content: center;
 align-items: center;
 border: none;
 box-shadow: 0 2px 12px rgba(30,30,45,0.10);
 cursor:pointer;
 transition: background .16s;
}
.mobile-menu-toggle:active, .mobile-menu-toggle:focus{
 background: var(--color-accent);
}
@media (max-width: 900px) {
  .mobile-menu-toggle {
    display: flex;
  }
  .main-nav, .header-wrapper .btn-primary {
    display: none;
  }
  .header-wrapper {
    justify-content:space-between;
  }
}
.mobile-menu {
 position: fixed;
 top:0; left:0;
 width: 100vw;
 height: 100vh;
 background:rgba(16,18,24,0.93);
 color:#fff;
 z-index:3000;
 transform: translateX(-100vw);
 transition: transform .36s cubic-bezier(.88,0,.18,1);
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
 align-items: flex-start;
 overscroll-behavior: none;
 box-shadow: 0 3px 48px rgba(0,0,0,0.21);
 padding-top:24px;
}
.mobile-menu.open {
 transform: translateX(0);
 transition: transform .36s cubic-bezier(.45,.98,.21,1.15);
}
.mobile-menu-close{
 align-self:flex-end;
 margin: 12px 24px 0 0;
 background: transparent;
 color: #fff;
 font-size: 2.3rem;
 cursor:pointer;
 border:none;
 padding:0 2px;
 z-index:10;
 transition: color .18s;
}
.mobile-menu-close:hover,
.mobile-menu-close:focus {
 color:var(--color-accent);
}
.mobile-nav {
 display:flex;
 flex-direction: column;
 gap: 24px;
 font-size:1.34rem;
 align-items:flex-start;
 margin:30px 32px 0 32px;
}
.mobile-nav a {
 color: #fff;
 font-family:var(--font-title);
 font-weight:500;
 opacity:.98;
 padding: 8px 0;
 border-bottom:2px solid transparent;
 transition: color .21s, border-color .21s;
}
.mobile-nav a:hover,
.mobile-nav a:focus {
 color:var(--color-accent);
 border-bottom:2px solid var(--color-accent);
}
@media (max-width: 405px){
 .mobile-nav{margin-left:12px;margin-right:10px; font-size:1.08rem;}
 .mobile-menu-close{font-size:1.7rem; margin-right:9px;}
}

/* =============== COOKIE CONSENT BANNER =============== */
.cookie-banner {
 position: fixed;
 left: 0; right: 0; bottom: 0;
 width: 100vw;
 background: #242424;
 color: #fff;
 z-index: 4000;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
 padding: 24px 5vw 20px 5vw;
 font-size:1.05em;
 box-shadow: 0 -4px 24px 0 rgba(0,0,0,0.11);
 opacity:1;
 transform: translateY(0);
 transition: transform .33s, opacity .33s;
}
.cookie-banner.hide {
 opacity:0;
 pointer-events:none;
 transform:translateY(100%);
}
.cookie-banner .banner-text{
 flex: 1;
 color: #fff;
}
.cookie-banner .cookie-banner-btns {
 display: flex;
 gap:14px;
 flex-wrap: wrap;
}
.cookie-banner .btn {
 font-size:1em;
 padding:9px 22px;
 border-radius:8px;
 border-width:2px;
}
.cookie-banner .btn-cookie-settings {
 background: #EFEFEF;
 color: #222;
 border: 2px solid #d6d6d6;
}
.cookie-banner .btn-cookie-settings:hover {
 background: #dedede;
 color: #222;
}
@media(max-width:650px){
 .cookie-banner {flex-direction:column;gap:18px;padding:16px 8px 10px 8px;font-size:1em;}
 .cookie-banner .cookie-banner-btns {justify-content:flex-end;}
}

/* =============== COOKIE MODAL =============== */
.cookie-modal-overlay {
 position: fixed;
 left: 0; right: 0; top: 0; bottom: 0;
 background: rgba(0,0,0,0.42);
 z-index: 4101;
 display: flex;
 justify-content: center;
 align-items: center;
 opacity:1;
 pointer-events: all;
 transition:opacity .31s;
}
.cookie-modal-overlay.hide {
 opacity: 0;
 pointer-events:none;
}
.cookie-modal {
 background: #fff;
 color: #222;
 border-radius: 16px;
 box-shadow: 0 3px 32px rgba(0,0,0,.13);
 min-width:300px;
 max-width:90vw;
 padding: 42px 30px 30px 30px;
 position: relative;
 z-index:4202;
 display:flex;
 flex-direction:column;
 gap:20px;
 font-size: 1.10em;
}
.cookie-modal .close-btn {
 position: absolute;
 right: 24px;
 top: 16px;
 background: none;
 border:none;
 color: #171717;
 font-size:2.0rem;
 cursor: pointer;
}
.cookie-modal .close-btn:hover{color:var(--color-accent);}
.cookie-modal h2 {
 margin: 0 0 20px 0;
 font-size: 1.30rem;
 font-family:var(--font-title);
 letter-spacing: -0.01em;
 font-weight: 600;
}
.cookie-categories {
 display: flex;
 flex-direction:column;
 gap: 14px;
}
.cookie-category {
 display: flex;
 align-items: center;
 gap: 12px;
}
.cookie-category input[type=checkbox] {
 width: 18px; height:18px;
 accent-color: var(--color-primary);
}
.cookie-category label {
 font-size:1em;
}
.cookie-modal .btn-group {
 display: flex;
 gap:14px;
 margin-top:13px;
 justify-content:flex-end;
}
@media(max-width:500px){
 .cookie-modal {padding: 26px 7vw 18px 7vw;min-width:0;}
 .cookie-modal .close-btn{right:10px;top:10px;font-size:1.3rem;}
}

/* ====== DIALOG ANIMATIONS ====== */
.cookie-modal-overlay {
 animation: cookieFadeIn .37s;
}
@keyframes cookieFadeIn{
 from{ opacity:0; }to{opacity:1;}
}

/* =============== RESPONSIVE MEDIA QUERIES =============== */
@media(max-width:980px){
 .container{max-width:95vw;}
 .content-wrapper{max-width:95vw;}
}
@media(max-width:800px){
 .feature-grid li, .service-list li, .team-list li{
   flex: 1 1 97vw;
   max-width: 99vw;
   min-width:180px;
 }
}
@media (max-width: 768px) {
 .section{padding: 24px 6px;}
 .content-grid, .features {flex-direction: column;gap:22px;}
 .text-image-section {flex-direction:column; gap: 20px;}
 .feature-grid,.service-list,.team-list{flex-direction:column;gap:24px;}
 .feature-grid li, .service-list li, .team-list li{padding: 16px 10px;}
 .footer-wrapper{padding-left:0; padding-right:0;}
 .hero-section .container{padding-top:20px;padding-bottom:12px;}
}

@media (max-width:520px) {
 h1{font-size:1.46rem;}
 h2{font-size:1.13rem;}
 .container{padding-left:5px;padding-right:5px;}
 .content-wrapper,.footer-wrapper{padding-left:0;padding-right:0;}
}

/* =============== GENERAL STYLES =============== */
a{
 color: var(--color-link);
 transition:color .18s;
 cursor:pointer;
}
a:hover, a:focus{
 color: var(--color-link-hover);
}

hr{border:0; border-top:1.2px solid #ececec;margin:32px 0;}

::-webkit-scrollbar {
 width: 13px;
 background: #ececec;
 border-radius: 11px;
}
::-webkit-scrollbar-thumb {
 background: #bfc3c8;
 border-radius: 10px;
}

/* ========== INTERACTIVE STATES & MICRO-INTERACTIONS ========== */
input, textarea, select{
 border-radius:7px;
 border:1.4px solid var(--color-border);
 background: #f9f9f9;
 padding: 10px 11px;
 transition: border-color .17s;
 margin-bottom:16px;
 font-size:1rem;
}
input:focus, textarea:focus, select:focus{
 border-color:var(--color-accent);
 background: #fff;
}

/* ===== CONFIRMATION MESSAGE ===== */
.confirmation-message{ color:var(--color-primary);font-size:1.13em;margin-top:12px;margin-bottom:18px;}

/* =============== MONOCHROME DRAMA EFFECTS =============== */
.card,.testimonial-card,.feature-grid li,.service-list li,.team-list li {
 background: linear-gradient(180deg, #fcfcfc 88%, #F4F4F7 100%);
 box-shadow: 0 2px 20px 0 rgba(40,40,48,0.06);
 border: 1.5px solid #ececec;
 transition: box-shadow 0.2s, border-color 0.2s;
}
.card:hover,.feature-grid li:hover,.service-list li:hover,.team-list li:hover{
 box-shadow:0 6px 32px 0 rgba(34,34,40,0.11);
 border-color:var(--color-primary);
}

/* =============== Z-INDEX FIXES FOR BANNERS & MENUS =============== */
header, .cookie-banner, .cookie-modal-overlay, .mobile-menu {
  z-index: 2000;
}

/* =============== MISC =============== */
.center {
  text-align: center;
  justify-content: center;
  align-items: center;
}

/* Focus accessibility */
:focus-visible{ outline:2.2px solid var(--color-accent); outline-offset:2.5px; }

/* Remove outline for mouse users */
:focus:not(:focus-visible){ outline: none; }