/* =========================================================
Hafenklang Musik — Stylesheet
Mobile-first, modern, dark/light rhythm
========================================================= */

:root{
--navy-deep: #0b0a08;
--navy: #12100c;
--navy-mid: #8a6a35;
--navy-soft: #1a160d;
--ink: #0a0906;
--light: #f6f8fb;
--light-2: #eef2f7;
--white: #ffffff;
--paper: #ffffff;

--text-dark: #101828;
--text-muted: #56606f;
--text-on-dark: #eef2f8;
--text-on-dark-muted: #a9b8c9;

--cyan: #e7cf9c;
--blue: #c9a35e;
--purple: #8a6a35;

--grad: linear-gradient(120deg, var(--cyan), var(--blue) 55%, var(--purple));
--grad-text: linear-gradient(120deg, #f3e6c4, #d9b876 45%, #a9803f);

--radius-s: 10px;
--radius-m: 18px;
--radius-l: 28px;
--radius-pill: 999px;

--shadow-soft: 0 20px 50px -20px rgba(8,20,35,0.35);
--shadow-card: 0 12px 30px -14px rgba(8,20,35,0.25);

--container: 1180px;

--font-head: 'Poppins', 'Segoe UI', sans-serif;
--font-body: 'Inter', 'Segoe UI', sans-serif;
--font-accent: 'Lora', Georgia, serif;

--header-h: 78px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
margin:0;
font-family:var(--font-body);
color:var(--text-dark);
background:var(--white);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-head); margin:0 0 .5em; line-height:1.15; color:var(--text-dark); }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
em{ font-style:italic; }

.skip-link{
position:absolute; left:-999px; top:0; background:#fff; color:#000; padding:10px 16px; z-index:999;
}
.skip-link:focus{ left:10px; top:10px; }

.wrap{
max-width:var(--container);
margin:0 auto;
padding:0 24px;
}

/* ---------- Reveal-on-scroll ---------- */
.reveal{
opacity:0;
transform:translateY(18px);
transition:opacity .7s ease, transform .7s ease;
transition-delay:calc(var(--d, 0) * 90ms);
}
.reveal.in{ opacity:1; transform:translateY(0); }

/* ================= BUTTONS ================= */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.5em;
padding:16px 30px;
border-radius:var(--radius-pill);
font-weight:600;
font-size:15px;
letter-spacing:.2px;
border:1px solid transparent;
transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
white-space:nowrap;
}
.btn-primary{
background:var(--grad);
color:#241a08;
box-shadow:0 14px 34px -12px rgba(138,106,53,.45);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -12px rgba(138,106,53,.55); }
.btn-ghost{
background:rgba(255,255,255,.06);
color:var(--text-on-dark);
border-color:rgba(255,255,255,.35);
backdrop-filter:blur(6px);
}
.btn-ghost:hover{ background:rgba(255,255,255,.14); transform:translateY(-2px); }
.btn-outline-dark{
background:transparent;
color:var(--text-dark);
border-color:rgba(16,24,40,.25);
padding:14px 26px;
}
.btn-outline-dark:hover{ border-color:var(--navy-mid); background:rgba(138,106,53,.08); }
.btn-small{ padding:11px 22px; font-size:14px; }
.btn-block{ width:100%; }

/* ================= HEADER ================= */
.site-header{
position:fixed; top:0; left:0; right:0; z-index:200;
height:var(--header-h);
display:flex; align-items:center;
background:transparent;
transition:background .35s ease, box-shadow .35s ease, height .3s ease;
}
.site-header.scrolled{
background:rgba(8,7,5,.86);
backdrop-filter:blur(14px);
box-shadow:0 8px 30px -14px rgba(0,0,0,.5);
height:66px;
}
.header-inner{
width:100%;
display:flex; align-items:center; justify-content:space-between;
gap:20px;
}
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-mark{ width:34px; height:34px; }
.brand-word{
font-family:var(--font-head); font-weight:700; letter-spacing:.3px;
font-size:16.5px; color:var(--text-on-dark); white-space:nowrap;
}
.brand-word em{
font-style:normal; font-family:var(--font-head); font-weight:700;
letter-spacing:.3px; color:#d9b876;
}
.main-nav{
display:none;
gap:34px;
font-size:14.5px; font-weight:500; color:var(--text-on-dark);
}
.main-nav a{ position:relative; opacity:.88; transition:opacity .2s; }
.main-nav a:hover{ opacity:1; }
.main-nav a::after{
content:''; position:absolute; left:0; right:0; bottom:-8px; height:2px;
background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.main-nav a:hover::after{ transform:scaleX(1); }
.header-cta{ display:none; }

.nav-toggle{
width:42px; height:42px; border-radius:50%;
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
flex-shrink:0;
}
.nav-toggle span{ width:18px; height:2px; background:#fff; border-radius:2px; transition:transform .3s ease, opacity .3s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-scrim{
position:fixed; inset:0; background:rgba(4,10,18,.55); backdrop-filter:blur(2px);
z-index:150; opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.nav-scrim.open{ opacity:1; pointer-events:auto; }

@media (max-width:899px){
.main-nav{
position:fixed; top:0; right:0; height:100%; width:min(320px, 82vw);
background:linear-gradient(175deg, var(--navy-deep), #1c170d);
flex-direction:column; align-items:flex-start; justify-content:center;
padding:40px 36px; gap:26px; z-index:190;
transform:translateX(100%); transition:transform .4s cubic-bezier(.65,0,.35,1);
font-size:19px;
box-shadow:-20px 0 50px rgba(0,0,0,.35);
}
.main-nav.open{ transform:translateX(0); display:flex; }
.main-nav a{ opacity:1; }
.main-nav::before{
content:'Menü'; text-transform:uppercase; letter-spacing:2px; font-size:12px; color:#cdae74; margin-bottom:-10px;
}
}
@media (min-width:900px){
.main-nav{ display:flex; }
.header-cta{ display:inline-flex; }
.nav-toggle{ display:none; }
}

/* ================= HERO ================= */
.hero{
position:relative;
min-height:100svh;
display:flex; align-items:center;
padding-top:calc(var(--header-h) + 20px);
padding-bottom:60px;
overflow:hidden;
isolation:isolate;
}
.hero-bg{
position:absolute; inset:0; z-index:-3;
background-size:cover; background-position:center 32%;
transform:scale(1.06);
filter:grayscale(1) blur(3px) contrast(1.08) brightness(0.92);
}
.hero-overlay{
position:absolute; inset:0; z-index:-2;
background:
linear-gradient(180deg, rgba(6,6,6,.55) 0%, rgba(8,8,8,.72) 45%, rgba(8,8,8,.94) 100%),
linear-gradient(100deg, rgba(10,9,7,.4), rgba(10,9,7,.22) 55%, rgba(6,5,4,.5));
}
.hero-glow{
position:absolute; z-index:-1; width:70vw; height:70vw; max-width:800px; max-height:800px;
left:50%; top:20%; transform:translate(-50%,-50%);
background:radial-gradient(circle, rgba(201,163,94,.20), transparent 65%);
filter:blur(10px);
pointer-events:none;
}
.hero-inner{ text-align:center; }
.eyebrow{
display:flex; align-items:center; justify-content:center; gap:16px;
font-family:var(--font-head); font-weight:600; letter-spacing:5px; font-size:14px;
color:var(--text-on-dark); margin:0 0 6px;
}
.eyebrow .rule{ width:34px; height:1px; background:rgba(255,255,255,.4); }
.hero-logo{
display:block; width:clamp(230px, 30vw, 340px); aspect-ratio:1585/759;
margin:0 auto 22px;
background-color:#d9b876;
-webkit-mask-image:url('logo-hafenklang.png'); mask-image:url('logo-hafenklang.png');
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:center; mask-position:center;
-webkit-mask-size:contain; mask-size:contain;
filter:drop-shadow(0 4px 20px rgba(201,163,94,.35));
}
.hero-name{
font-size:clamp(58px, 17vw, 148px);
font-weight:800;
letter-spacing:1px;
background:var(--grad-text);
-webkit-background-clip:text; background-clip:text; color:transparent;
margin:0;
line-height:1;
filter:drop-shadow(0 10px 40px rgba(201,163,94,.35));
}
.hero-brand{
display:flex; align-items:center; justify-content:center; gap:16px;
color:var(--text-on-dark); font-weight:600; letter-spacing:5px; font-size:14px;
margin:18px 0 22px;
}
.hero-brand .rule{ width:34px; height:1px; background:rgba(255,255,255,.4); }
.badge{
display:inline-flex; align-items:center; gap:10px;
border:1px solid rgba(255,255,255,.4);
background:rgba(255,255,255,.06);
backdrop-filter:blur(8px);
padding:12px 24px; border-radius:var(--radius-pill);
font-weight:600; font-size:14.5px; color:#fff;
box-shadow:0 0 30px rgba(201,163,94,.25);
margin:24px 0 0;
}
.badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--grad); box-shadow:0 0 12px 2px rgba(212,177,102,.85); }
.hero-tagline{
font-family:var(--font-accent); font-style:italic; font-weight:500;
font-size:clamp(20px,3.4vw,28px); color:#e9eefc;
margin:26px 0 30px;
}
.hero-tagline em{ color:#e3c98a; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-bottom:44px; }
.hero-stats{
display:flex; flex-wrap:wrap; justify-content:center; gap:14px 34px;
color:var(--text-on-dark-muted); font-size:13.5px; font-weight:500; letter-spacing:.3px;
}
.hero-stats strong{ color:#fff; font-weight:700; }
.hero-stats li{ display:flex; align-items:center; gap:8px; }
.hero-stats li:not(:last-child)::after{
content:''; width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.35);
margin-left:26px; display:none;
}
@media(min-width:640px){ .hero-stats li:not(:last-child)::after{ display:block; } }

.scroll-cue{
position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
width:30px; height:46px; border:2px solid rgba(255,255,255,.5); border-radius:20px;
display:flex; justify-content:center; padding-top:8px;
}
.scroll-cue span{ width:4px; height:8px; background:#fff; border-radius:2px; animation:scrollcue 1.8s infinite; }
@keyframes scrollcue{ 0%{ opacity:1; transform:translateY(0);} 70%{opacity:0; transform:translateY(14px);} 100%{opacity:0;} }

@media (max-width:899px){
.hero-logo{
width:clamp(130px, 42vw, 180px);
mask-image:url('logo-hafenklang-outline.png');
-webkit-mask-image:url('logo-hafenklang-outline.png');
}
.scroll-cue{ display:none; }
}
@media(max-width:719px){
.footer-inner{ align-items:center; text-align:center; }
.footer-nav{ justify-content:center; }
.footer-contact{ align-items:center; }
.footer-bottom{ align-items:center; text-align:center; }
.footer-legal{ justify-content:center; }
}

/* ================= TRUST STRIP ================= */
.trust-strip{
background:var(--ink);
padding:22px 0;
border-top:1px solid rgba(255,255,255,.06);
}
.trust-inner{ display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center; }
.trust-line{
margin:0; color:#dfe6f0; font-size:13.5px; font-weight:500; letter-spacing:.3px;
}
.trust-line span{ color:#cdae74; font-weight:600; margin-right:8px; }
.trust-line-muted{ color:#9aa8ba; }
.trust-line-muted span{ color:#8f7b52; }

/* ================= SECTIONS (generic) ================= */
.section{ padding:96px 0; }
.section-light{ background:var(--light); }
.section-dark{
background:
radial-gradient(circle at 15% 10%, rgba(201,163,94,.10), transparent 45%),
radial-gradient(circle at 85% 90%, rgba(201,163,94,.07), transparent 45%),
var(--navy-deep);
color:var(--text-on-dark);
}
.kicker{
font-family:var(--font-head); font-weight:600; letter-spacing:3px; font-size:12.5px;
text-transform:uppercase; color:var(--navy-mid); margin-bottom:14px;
}
.kicker-light{ color:#d9b876; }
.section h2{ font-size:clamp(28px,4vw,42px); font-weight:700; max-width:720px; }
.section-title-light{ color:#fff; }
.lead{ font-size:17.5px; color:var(--text-dark); }
.section-light p:not(.lead):not(.kicker){ color:var(--text-muted); }

/* ================= ABOUT ================= */
.grid-about{
display:grid; gap:52px;
}
.about-facts{
display:grid; grid-template-columns:1fr 1fr; gap:16px;
align-content:start;
}
.fact-card{
background:var(--white); border:1px solid #e7ecf3; border-radius:var(--radius-m);
padding:22px 20px; box-shadow:var(--shadow-card);
display:flex; flex-direction:column; gap:6px;
}
.fact-num{ font-family:var(--font-head); font-weight:700; font-size:21px; color:var(--navy-mid); }
.fact-label{ font-size:13.5px; color:var(--text-muted); line-height:1.4; }

@media(min-width:960px){
.grid-about{ grid-template-columns:1.15fr 1fr; align-items:center; }
}

/* ================= SERVICES ================= */
.services-grid{
display:grid; gap:20px; margin-top:44px;
grid-template-columns:1fr;
}
@media(min-width:640px){ .services-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:1100px){ .services-grid{ grid-template-columns:repeat(4,1fr); } }

.service-card{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.09);
border-radius:var(--radius-m);
padding:30px 26px;
transition:transform .3s ease, background .3s ease, border-color .3s ease;
}
.service-card:hover{ transform:translateY(-6px); background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.2); }
.service-icon{
width:52px; height:52px; border-radius:14px;
background:linear-gradient(135deg, rgba(201,163,94,.20), rgba(138,106,53,.20));
display:flex; align-items:center; justify-content:center;
color:#e3c98a; margin-bottom:18px;
}
.service-icon svg{ width:26px; height:26px; }
.service-card h3{ color:#fff; font-size:19px; margin-bottom:8px; }
.service-card p{ color:var(--text-on-dark-muted); font-size:14.5px; margin:0; }

.genres{ margin-top:60px; text-align:center; }
.genres-label{
font-size:12.5px; letter-spacing:3px; text-transform:uppercase; color:#cdae74; margin-bottom:16px; font-weight:600;
}
.genre-chips{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.genre-chips span{
border:1px solid rgba(255,255,255,.22); border-radius:var(--radius-pill);
padding:9px 20px; font-size:13.5px; font-weight:500; color:#e8edf6;
background:rgba(255,255,255,.04);
}
.genres-note{
margin:16px 0 0; font-size:13.5px; color:var(--text-on-dark-muted);
}

/* ================= GALLERY ================= */
.gallery-grid{
display:grid; gap:16px; margin-top:40px;
grid-template-columns:1fr;
}
@media(min-width:640px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); } }
.gallery-item{
position:relative; border:none; padding:0; border-radius:var(--radius-m); overflow:hidden;
aspect-ratio:1/1; background:#14120d;
box-shadow:var(--shadow-card);
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; filter:grayscale(1) contrast(1.08) brightness(0.97); }
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-label{
position:absolute; left:0; right:0; bottom:0; padding:16px 18px;
background:linear-gradient(0deg, rgba(5,10,18,.82), transparent);
color:#fff; font-weight:600; font-size:14px; letter-spacing:.3px; text-align:left;
}
.gallery-item-placeholder{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
background:repeating-linear-gradient(135deg, #eef2f7, #eef2f7 10px, #e5eaf1 10px, #e5eaf1 20px);
color:#8b98aa; cursor:default;
}
.ph-icon svg{ width:36px; height:36px; }
.gallery-item-placeholder .gallery-label{ position:static; background:none; color:#7c8797; text-align:center; padding:0 20px; }

.career-collages{
display:grid; gap:32px; margin-top:36px;
grid-template-columns:1fr;
max-width:880px; margin-left:auto; margin-right:auto;
}
@media(min-width:640px){ .career-collages{ grid-template-columns:1fr 1fr; } }
.career-panel-label{
font-size:12.5px; letter-spacing:2.5px; text-transform:uppercase; color:#cdae74;
font-weight:600; text-align:center; margin:0 0 14px;
}
.career-grid{
display:grid; grid-template-columns:1fr 1fr; gap:3px;
border-radius:var(--radius-m); overflow:hidden; box-shadow:var(--shadow-card); background:#14120d;
}
.career-collage-item{
position:relative; display:block; width:100%; border:none; padding:0; margin:0;
overflow:hidden; background:#14120d; cursor:pointer; aspect-ratio:500/592;
}
.career-collage-item img{
width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease;
filter:grayscale(1) contrast(1.08) brightness(0.97);
}
.career-collage-item:hover img, .career-collage-item:focus-visible img{ transform:scale(1.12); }
.career-photo-caption{
position:absolute; left:0; right:0; bottom:0; padding:10px 12px 9px;
background:linear-gradient(0deg, rgba(5,10,18,.88), transparent 85%);
color:#fff; font-size:11px; font-weight:600; letter-spacing:.2px; line-height:1.25; text-align:left;
opacity:0; transform:translateY(6px);
transition:opacity .35s ease, transform .35s ease; pointer-events:none;
}
.career-collage-item:hover .career-photo-caption, .career-collage-item:focus-visible .career-photo-caption{
opacity:1; transform:translateY(0);
}

/* ================= ABLAUF / STEPS ================= */
.steps{
display:grid; gap:34px; margin-top:52px;
grid-template-columns:1fr;
counter-reset:step;
}
@media(min-width:800px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{ position:relative; padding-left:0; }
.step-num{
display:block; font-family:var(--font-head); font-weight:800; font-size:15px;
color:transparent; -webkit-text-stroke:1.4px rgba(255,255,255,.45);
letter-spacing:1px; margin-bottom:16px;
}
.step h3{ color:#fff; font-size:20px; margin-bottom:10px; }
.step p{ color:var(--text-on-dark-muted); font-size:14.5px; }
@media(min-width:800px){
.step:not(:last-child)::after{
content:''; position:absolute; top:9px; left:calc(100% + 17px); width:calc(100% - 34px); max-width:60px;
height:1px; background:linear-gradient(90deg, rgba(255,255,255,.35), transparent);
}
}

/* ================= CONTACT ================= */
.section-contact{
position:relative; padding:110px 0 90px; overflow:hidden; color:var(--text-on-dark);
}
.contact-bg{ background-position:center 60%; }
.section-contact .hero-overlay{ background:linear-gradient(180deg, rgba(6,6,6,.85), rgba(6,6,6,.93)); }
.contact-inner{
position:relative; display:grid; gap:52px;
}
.contact-copy{ color:var(--text-on-dark-muted); font-size:16px; max-width:440px; }
.contact-direct{ display:flex; flex-direction:column; gap:4px; margin-top:32px; }
.contact-link{
display:flex; align-items:baseline; gap:12px; padding:14px 0;
border-bottom:1px solid rgba(255,255,255,.12);
transition:opacity .2s ease;
}
.contact-link:hover{ opacity:.75; }
.contact-link-label{ width:100px; flex-shrink:0; font-size:12.5px; letter-spacing:1.5px; text-transform:uppercase; color:#cdae74; }
.contact-link-value{ font-weight:600; font-size:17px; color:#fff; }

.contact-form{
background:var(--white); border-radius:var(--radius-l); padding:34px 28px;
box-shadow:0 30px 70px -20px rgba(0,0,0,.5);
display:flex; flex-direction:column; gap:16px;
}
.form-row{ display:flex; flex-direction:column; gap:6px; }
.form-row label{ font-size:12.5px; font-weight:600; letter-spacing:.4px; color:var(--text-muted); }
.form-row input, .form-row select, .form-row textarea{
border:1.5px solid #e2e7ee; border-radius:var(--radius-s); padding:13px 14px;
font-family:var(--font-body); font-size:15px; color:var(--text-dark); background:#fbfcfe;
transition:border-color .2s ease, background .2s ease;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
outline:none; border-color:var(--blue); background:#fff;
}
.form-row textarea{ resize:vertical; min-height:96px; }
.form-row-split{ display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:480px){ .form-row-split{ grid-template-columns:1fr 1fr; flex-direction:row; } }
.hp-field{ position:absolute; left:-9999px; opacity:0; }
.form-note{ font-size:12.5px; color:var(--text-muted); text-align:center; margin:0; }
.form-success{
display:flex; flex-direction:column; align-items:center; text-align:center;
gap:14px; padding:10px 6px 26px;
}
.form-success-icon{
width:52px; height:52px; border-radius:50%; flex-shrink:0;
background:linear-gradient(135deg,#e9d19f,#c9a35e);
display:flex; align-items:center; justify-content:center;
box-shadow:0 10px 22px -8px rgba(201,163,94,.65);
}
.form-success-icon svg{ width:24px; height:24px; }
.form-success h3{ font-family:var(--font-head); color:var(--text-dark); font-size:19px; margin:0; }
.form-success p{ color:var(--text-muted); font-size:14.5px; line-height:1.55; margin:0; max-width:340px; }
.form-success-sign{ font-family:var(--font-accent); font-style:italic; color:#a9803f; font-size:16px; margin-top:2px; }

.sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ================= QUOTE TICKER ================= */
.quote-ticker{
background:var(--ink); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06);
overflow:hidden; padding:16px 0;
}
.quote-ticker-track{
display:flex; width:max-content; gap:48px; animation:ticker 42s linear infinite;
}
.quote-ticker-track span{
font-family:var(--font-accent); font-style:italic; font-size:14.5px; color:#d9b876; white-space:nowrap;
display:flex; align-items:center; gap:48px;
}
.quote-ticker-track span::after{ content:'•'; color:rgba(255,255,255,.25); font-style:normal; margin-left:48px; }
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion: reduce){
.quote-ticker-track{ animation:none; overflow-x:auto; }
}

/* ================= STIMMEN / TESTIMONIALS ================= */
.testimonial-grid{
display:grid; gap:20px; margin-top:44px;
grid-template-columns:1fr;
}
@media(min-width:760px){ .testimonial-grid{ grid-template-columns:1fr 1fr; } }
.testimonial-card{
background:var(--white); border:1px solid #e7ecf3; border-radius:var(--radius-m);
padding:30px 26px; box-shadow:var(--shadow-card);
display:flex; flex-direction:column; gap:14px;
}
.testimonial-quote-mark{ color:#d9b876; font-family:var(--font-head); font-weight:800; font-size:38px; line-height:1; }
.testimonial-card p.testimonial-text{
font-family:var(--font-accent); font-style:italic; color:var(--text-dark); font-size:15.5px; line-height:1.6; margin:0;
}
.testimonial-meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:4px; }
.testimonial-tag{
font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--navy-mid);
}
.testimonial-stars{ color:#d9b876; font-size:14px; letter-spacing:2px; }

/* ================= FAQ ================= */
.faq-list{ max-width:820px; margin:44px auto 0; display:flex; flex-direction:column; gap:14px; }
.faq-item{
background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:var(--radius-m);
padding:6px 26px;
}
.faq-item summary{
cursor:pointer; list-style:none; padding:18px 0; color:#fff; font-weight:600; font-size:15.5px;
display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
content:'+'; color:#d9b876; font-size:22px; font-weight:400; flex-shrink:0; transition:transform .25s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ color:var(--text-on-dark-muted); font-size:14.5px; line-height:1.6; margin:0 0 20px; }

@media(min-width:960px){
.contact-inner{ grid-template-columns:1fr 1fr; align-items:start; }
}

/* ================= FOOTER ================= */
.site-footer{ background:var(--ink); color:#c9d3e0; padding:56px 0 0; }
.footer-inner{
display:flex; flex-direction:column; gap:30px; padding-bottom:44px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-brand .brand-word{ color:#fff; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:22px; font-size:14px; }
.footer-nav a:hover{ color:#fff; }
.footer-contact{ display:flex; flex-direction:column; gap:6px; font-size:14px; }
.footer-contact a:hover{ color:#fff; }
.footer-bottom{
display:flex; flex-direction:column; gap:12px; padding:22px 0 28px;
font-size:12.5px; color:#7c879a;
}
.footer-legal{ display:flex; gap:18px; }
.footer-legal a:hover{ color:#fff; }

@media(min-width:720px){
.footer-inner{ flex-direction:row; align-items:center; justify-content:space-between; }
.footer-bottom{ flex-direction:row; align-items:center; justify-content:space-between; }
}

/* ================= LIGHTBOX ================= */
.lightbox{
position:fixed; inset:0; background:rgba(4,8,16,.94); z-index:500;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
opacity:0; pointer-events:none; transition:opacity .3s ease; padding:24px;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:min(90vw,720px); max-height:75vh; border-radius:var(--radius-m); box-shadow:0 30px 80px rgba(0,0,0,.6); filter:grayscale(1) contrast(1.08) brightness(0.97); }
.lightbox p{ color:#dfe6f0; font-size:14px; margin:0; }
.lightbox-close{
position:absolute; top:22px; right:24px; width:44px; height:44px; border-radius:50%;
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); color:#fff; font-size:26px; line-height:1;
}

/* ================= AMBIENT MUSIC TOGGLE ================= */
.music-toggle{
position:fixed; right:22px; bottom:22px; z-index:150;
width:52px; height:52px; border-radius:50%;
background:var(--ink); border:1px solid rgba(201,163,94,.45);
display:flex; align-items:center; justify-content:center;
box-shadow:var(--shadow-soft);
transition:transform .25s ease, border-color .25s ease;
}
.music-toggle:hover{ transform:translateY(-2px); border-color:rgba(201,163,94,.85); }
.music-toggle:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
.music-toggle .icon-note{ width:19px; height:19px; }
.music-toggle .icon-bars{ display:none; align-items:flex-end; gap:3px; height:17px; }
.music-toggle .icon-bars span{
display:block; width:3px; background:var(--cyan); border-radius:2px;
animation:eqBounce .9s ease-in-out infinite;
}
.music-toggle .icon-bars span:nth-child(1){ height:7px; animation-delay:-.6s; }
.music-toggle .icon-bars span:nth-child(2){ height:15px; animation-delay:-.3s; }
.music-toggle .icon-bars span:nth-child(3){ height:10px; animation-delay:0s; }
.music-toggle.is-playing{ border-color:rgba(201,163,94,.85); }
.music-toggle.is-playing .icon-note{ display:none; }
.music-toggle.is-playing .icon-bars{ display:flex; }
@keyframes eqBounce{ 0%,100%{ transform:scaleY(.4); } 50%{ transform:scaleY(1); } }
@media(max-width:640px){
.music-toggle{ right:16px; bottom:16px; width:46px; height:46px; }
}

/* ================= TRAILER OVERLAY ================= */
.trailer-overlay{
position:fixed; inset:0; z-index:600;
background:rgba(4,4,3,.96);
display:flex; align-items:center; justify-content:center;
opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.trailer-overlay.open{ opacity:1; pointer-events:auto; }
.trailer-overlay-inner{
position:relative;
width:min(92vw, 420px);
height:min(86vh, 746px);
border-radius:var(--radius-l);
overflow:hidden;
box-shadow:0 40px 90px rgba(0,0,0,.6);
background:#000;
}
.trailer-video{
width:100%; height:100%; object-fit:cover; display:block; background:#000;
}
.trailer-skip, .trailer-sound{
position:absolute; z-index:2;
border:1px solid rgba(255,255,255,.4);
background:rgba(8,8,8,.55);
backdrop-filter:blur(6px);
color:#fff; font-family:var(--font-body); font-weight:600; font-size:13px;
padding:10px 16px; border-radius:var(--radius-pill);
transition:background .2s ease, transform .2s ease;
}
.trailer-skip:hover, .trailer-sound:hover{ background:rgba(8,8,8,.8); transform:translateY(-1px); }
.trailer-skip{ top:16px; right:16px; }
.trailer-sound{ top:16px; left:16px; }
.trailer-sound.is-unmuted{ display:none; }

/* ================= UTIL / RESPONSIVE TWEAKS ================= */
@media(max-width:479px){
.wrap{ padding:0 18px; }
.btn{ padding:15px 24px; font-size:14.5px; }
.section{ padding:72px 0; }
.contact-form{ padding:26px 20px; }
}