*, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0;} :root{ --crimson: #A31645; --white: #FFFFFF; --off-white: #FAF7F5; --gold: #B8924A; --dark-text: #1A0A0F; --mid-text: #5A2A38;} html{ scroll-behavior: smooth;} body{ background: var(--white); color: var(--dark-text); font-family: 'Montserrat', sans-serif; overflow-x: hidden;} .hero{ min-height: 100vh; display: flex; flex-direction: column; background: var(--white); position: relative;} .hero::before{ content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(163,22,69,0.05) 0%, transparent 65%); pointer-events: none;} .corner{ position: absolute; width: 80px; height: 80px; pointer-events: none;} .corner.tl{ top: 20px; left: 20px; border-top: 1px solid rgba(163,22,69,0.18); border-left: 1px solid rgba(163,22,69,0.18);} .corner.tr{ top: 20px; right: 20px; border-top: 1px solid rgba(163,22,69,0.18); border-right: 1px solid rgba(163,22,69,0.18);} .corner.bl{ bottom: 20px; left: 20px; border-bottom: 1px solid rgba(163,22,69,0.18); border-left: 1px solid rgba(163,22,69,0.18);} .corner.br{ bottom: 20px; right: 20px; border-bottom: 1px solid rgba(163,22,69,0.18); border-right: 1px solid rgba(163,22,69,0.18);} nav{ position: relative; z-index: 20; padding: 1.6rem 3rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(163,22,69,0.1); animation: fadeDown 1s ease both;} .nav-label{ font-size: 0.58rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold);} .hero-header{ position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3.5rem 2rem 2rem; animation: fadeUp 1s 0.2s ease both;} .logo-wrap{ width: 140px; height: 140px; margin-bottom: 2rem; filter: drop-shadow(0 6px 24px rgba(163,22,69,0.22)); animation: scaleIn 1.2s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;} .logo-wrap img{ width: 100%; height: 100%; object-fit: contain;} .gold-rule{ display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; animation: fadeUp 1s 0.4s ease both;} .gold-rule::before, .gold-rule::after{ content: ''; width: 44px; height: 1px; background: linear-gradient(to right, transparent, var(--gold));} .gold-rule::after{ background: linear-gradient(to left, transparent, var(--gold));} .gold-rule-text{ font-size: 0.55rem; letter-spacing: 0.36em; text-transform: uppercase; color: var(--gold);} .hero-headline{ font-family: 'Bodoni Moda', serif; font-size: clamp(2.4rem, 6.5vw, 5rem); font-weight: 400; line-height: 1.1; color: var(--dark-text); animation: fadeUp 1s 0.6s ease both;} .hero-headline em{ font-style: italic; color: var(--crimson);} .hero-sub{ margin-top: 1rem; font-size: 0.68rem; font-weight: 300; letter-spacing: 0.24em; text-transform: uppercase; color: var(--mid-text); opacity: 0.65; animation: fadeUp 1s 0.8s ease both;} .coming-strip{ margin-top: 1.8rem; animation: fadeUp 1s 1s ease both;} .coming-strip-inner{ display: inline-flex; align-items: center; gap: 1rem; border: 1px solid rgba(163,22,69,0.2); padding: 0.7rem 2rem; background: rgba(163,22,69,0.03); position: relative; overflow: hidden;} .coming-strip-inner::before{ content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(163,22,69,0.05), transparent); transform: translateX(-100%); animation: shimmer 3.5s 2s infinite;} @keyframes shimmer{ to{ transform: translateX(100%);}} .strip-dot{ width: 6px; height: 6px; background: var(--crimson); border-radius: 50%; animation: blink 2s infinite;} @keyframes blink{ 0%,100%{opacity:1}50%{opacity:0.2}} .strip-text{ font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--crimson); font-weight: 500;} .slider-wrap{ position: relative; z-index: 10; padding: 2rem 0 0; animation: fadeUp 1s 1.1s ease both;} .slider-container{ position: relative; overflow: hidden;} .slider-inner{ position: relative; width: 100%; height: 400px; background: var(--dark-text);} .slide{ position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease;} .slide.active{ opacity: 1; z-index: 2;} .slide img{ width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform 7s ease;} .slide.active img{ transform: scale(1);} .slide::after{ content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(26,10,15,0.05) 0%, transparent 40%, rgba(26,10,15,0.55) 100% ); z-index: 1;} .slide-caption{ position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%); z-index: 3; text-align: center; opacity: 0; transition: opacity 0.7s 0.6s ease; width: 90%; pointer-events: none;} .slide.active .slide-caption{ opacity: 1;} .slide-caption-text{ font-family: 'Bodoni Moda', serif; font-size: clamp(0.95rem, 2vw, 1.3rem); font-style: italic; color: #fff; letter-spacing: 0.05em; text-shadow: 0 2px 12px rgba(0,0,0,0.45);} .slide-caption-rule{ width: 36px; height: 1px; background: rgba(200,169,110,0.7); margin: 0.5rem auto 0;} .slider-arrow{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,0.35); background: rgba(26,10,15,0.28); backdrop-filter: blur(10px); color: #fff; font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s, border-color 0.3s; outline: none; user-select: none; border-radius: 4px;} .slider-arrow:hover{ background: rgba(163,22,69,0.7); border-color: rgba(163,22,69,0.9);} .slider-arrow.prev{ left: 1rem;} .slider-arrow.next{ right: 1rem;} .slider-dots{ position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 0.5rem;} .slider-dot{ width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.35); cursor: pointer; transition: background 0.3s, transform 0.3s; border: none; outline: none; padding: 0;} .slider-dot.active{ background: var(--crimson); transform: scale(1.5);} .slider-credit{ text-align: right; margin-top: 0.4rem; font-size: 0.47rem; color: rgba(26,10,15,0.3); letter-spacing: 0.08em;} .slider-credit a{ color: rgba(26,10,15,0.35); text-decoration: none;} .hero-contact{ position: relative; z-index: 10; margin-top: auto; padding: 2rem 3rem; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; border-top: 1px solid rgba(163,22,69,0.1); animation: fadeUp 1s 1.3s ease both;} .contact-entry{ display: flex; align-items: center; gap: 1rem; padding: 0 2.2rem; text-decoration: none; transition: opacity 0.3s;} .contact-entry:hover{ opacity: 0.65;} .contact-entry + .contact-entry{ border-left: 1px solid rgba(163,22,69,0.15);} .contact-entry-icon{ width: 34px; height: 34px; border: 1px solid rgba(163,22,69,0.2); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; background: rgba(163,22,69,0.04);} .contact-entry-label{ font-size: 0.52rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 0.12rem;} .contact-entry-value{ font-size: 0.83rem; font-weight: 400; color: var(--dark-text); letter-spacing: 0.04em;} .bottom-section{ background: var(--off-white); border-top: 1px solid rgba(163,22,69,0.1); padding: 5rem 2rem; text-align: center; position: relative;} .bottom-section::before{ content: ''; position: absolute; top: 0; left: 50%; width: 280px; height: 1px; background: linear-gradient(to right, transparent, rgba(163,22,69,0.3), transparent); transform: translateX(-50%);} .bottom-inner{ max-width: 580px; margin: 0 auto;} .bottom-eyebrow{ font-size: 0.57rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.6rem;} .bottom-title{ font-family: 'Bodoni Moda', serif; font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 400; color: var(--dark-text); line-height: 1.2; margin-bottom: 1rem;} .bottom-title em{ font-style: italic; color: var(--crimson);} .bottom-body{ font-size: 0.8rem; font-weight: 300; color: rgba(26,10,15,0.5); line-height: 1.9; letter-spacing: 0.05em; margin-bottom: 3rem;} .cards{ display: flex; gap: 1px; justify-content: center; background: rgba(163,22,69,0.1); flex-wrap: wrap;} .card{ background: var(--white); padding: 2rem 2rem; flex: 1; min-width: 180px; max-width: 240px; transition: background 0.3s; cursor: default;} .card:hover{ background: rgba(163,22,69,0.04);} .card-icon-wrap{ width: 38px; height: 38px; border: 1px solid rgba(163,22,69,0.2); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.1rem; font-size: 1rem; background: rgba(163,22,69,0.04);} .card-lbl{ font-size: 0.54rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.4rem;} .card-val{ font-size: 0.86rem; color: var(--dark-text); font-weight: 400; line-height: 1.6; letter-spacing: 0.03em;} footer{ background: var(--crimson); padding: 1.5rem 2rem; text-align: center;} footer p{ font-size: 0.58rem; letter-spacing: 0.2em; color: rgba(255,255,255,0.7); text-transform: uppercase;} @keyframes fadeUp{ from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)}} @keyframes fadeDown{ from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)}} @keyframes scaleIn{ from{opacity:0;transform:scale(0.82)} to{opacity:1;transform:scale(1)}} @media (max-width: 640px){ .corner{ display: none;} nav{ padding: 1.1rem 1.2rem;} .nav-label{ font-size: 0.5rem; letter-spacing: 0.2em;} .hero-header{ padding: 2rem 1.2rem 1.2rem;} .logo-wrap{ width: 110px; height: 110px; margin-bottom: 1.4rem;} .gold-rule{ margin-bottom: 1rem;} .gold-rule::before, .gold-rule::after{ width: 28px;} .hero-headline{ font-size: clamp(1.9rem, 8.5vw, 2.8rem); line-height: 1.15;} .hero-sub{ font-size: 0.58rem; letter-spacing: 0.16em; margin-top: 0.8rem;} .coming-strip{ margin-top: 1.2rem;} .coming-strip-inner{ padding: 0.6rem 1.2rem; gap: 0.7rem;} .strip-text{ font-size: 0.52rem; letter-spacing: 0.18em;} .slider-wrap{ padding: 1.4rem 0 0;} .slider-inner{ height: 240px;} .slide-caption{ bottom: 1rem;} .slide-caption-text{ font-size: 0.9rem;} .slider-arrow{ display: none;} .slider-dots{ bottom: 0.6rem;} .slider-dot{ width: 6px; height: 6px;} .slider-credit{ padding-right: 0.6rem; font-size: 0.44rem;} .hero-contact{ flex-direction: column; gap: 0; padding: 0; margin-top: 1.4rem;} .contact-entry{ padding: 1rem 1.2rem; width: 100%; justify-content: flex-start;} .contact-entry + .contact-entry{ border-left: none; border-top: 1px solid rgba(163,22,69,0.12);} .contact-entry-value{ font-size: 0.85rem;} .bottom-section{ padding: 3rem 1.4rem;} .bottom-title{ font-size: clamp(1.5rem, 6vw, 2rem);} .bottom-body{ font-size: 0.78rem;} .cards{ flex-direction: column;} .card{ max-width: 100%; min-width: unset; padding: 1.5rem 1.4rem;} footer{ padding: 1.2rem 1rem;} footer p{ font-size: 0.52rem; letter-spacing: 0.12em;}} @media (min-width: 641px) and (max-width: 1024px){ nav{ padding: 1.4rem 2rem;} .hero-header{ padding: 2.5rem 2rem 1.8rem;} .logo-wrap{ width: 120px; height: 120px;} .hero-headline{ font-size: clamp(2.2rem, 5vw, 3.5rem);} .slider-inner{ height: 320px;} .slider-arrow{ width: 38px; height: 38px;} .hero-contact{ padding: 1.6rem 2rem;} .contact-entry{ padding: 0 1.5rem;} .bottom-section{ padding: 3.5rem 2rem;}} .lang-switcher{ display: flex; align-items: center; gap: 0; border: 1px solid rgba(163,22,69,0.2); overflow: hidden; flex-shrink: 0;} .lang-btn{ background: none; border: none; padding: 0.35rem 0.7rem; font-size: 0.55rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(184,146,74,0.5); cursor: pointer; font-family: 'Montserrat', sans-serif; transition: background 0.2s, color 0.2s; line-height: 1;} .lang-btn.active{ background: var(--crimson); color: #fff;} .lang-btn:hover:not(.active){ color: var(--gold); background: rgba(163,22,69,0.05);} .lang-divider{ width: 1px; height: 16px; background: rgba(163,22,69,0.2); flex-shrink: 0;} @media (max-width: 640px){ .lang-btn{ padding: 0.3rem 0.55rem; font-size: 0.5rem;}}