/* ============================================================
   TANJA PICHLER  — English Website
   Dark Elegant Music Theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Raleway:wght@300;400;500;600;700;800&family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap');

/* ========================  VARIABLES  ======================== */
:root {
  --bg:           #07070f;
  --bg-2:         #0d0d1a;
  --bg-card:      rgba(255,255,255,0.035);
  --bg-card-h:    rgba(255,255,255,0.07);

  --gold:         #c9a84c;
  --gold-lt:      #e2c76b;
  --gold-glow:    rgba(201,168,76,0.22);

  --violet:       #7c3aed;
  --violet-lt:    #a78bfa;
  --violet-glow:  rgba(124,58,237,0.22);

  --text:         #f0ece0;
  --text-2:       #a89e8e;
  --text-muted:   #4e4e5a;

  --border-gold:  rgba(201,168,76,0.18);
  --border:       rgba(255,255,255,0.055);

  --ff-display:   'Cormorant Garamond', Georgia, serif;
  --ff-ui:        'Raleway', system-ui, sans-serif;
  --ff-body:      'Lato', system-ui, sans-serif;

  --nav-h:        76px;
  --t:            0.3s cubic-bezier(.4,0,.2,1);
  --t-slow:       0.7s cubic-bezier(.4,0,.2,1);
  --max-w:        1180px;
}

/* ========================  RESET  ======================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html  { scroll-behavior:smooth; font-size:16px; }
body  {
  background:var(--bg);
  color:var(--text);
  font-family:var(--ff-body);
  line-height:1.8;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a    { color:inherit; text-decoration:none; transition:var(--t); }
img  { max-width:100%; display:block; }
ul   { list-style:none; }

/* Subtle grain overlay */
body::after {
  content:'';
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:0.025;
  pointer-events:none;
  z-index:9000;
}

/* ========================  TYPOGRAPHY  ======================== */
.overline {
  font-family:var(--ff-ui);
  font-size:0.67rem;
  font-weight:600;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--gold);
}

.gold-text {
  background:linear-gradient(135deg, var(--gold), var(--gold-lt), var(--gold));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ========================  LAYOUT  ======================== */
.container {
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 40px;
}

/* ========================  NAVBAR  ======================== */
.navbar {
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  padding:0 40px;
  transition:var(--t-slow);
}

.navbar.scrolled {
  /* backdrop-filter intentionally NOT applied to the navbar element itself.
     If it were, the navbar would become the containing block for any
     position:fixed child (e.g. the mobile menu overlay), shrinking it
     to the navbar's own 60 px height and making it invisible.
     The blur is applied via ::before (a non-ancestor of the overlay)
     so the overlay keeps the viewport as its containing block. */
  border-bottom:1px solid var(--border-gold);
}
.navbar.scrolled::before {
  content:'';
  position:absolute;
  inset:0;
  background:rgba(7,7,15,0.92);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  z-index:-1;
  pointer-events:none;
}

.nav-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  max-width:var(--max-w);
  margin:0 auto;
}

.nav-logo { display:flex; flex-direction:column; line-height:1.2; }
.nav-logo-name {
  font-family:var(--ff-display);
  font-size:1.35rem;
  font-weight:500;
  letter-spacing:0.07em;
}
.nav-logo-sub {
  font-family:var(--ff-ui);
  font-size:0.58rem;
  font-weight:500;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--gold);
}

.nav-links {
  display:flex;
  align-items:center;
  gap:34px;
}
.nav-links a {
  font-family:var(--ff-ui);
  font-size:0.75rem;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-2);
  position:relative;
}
.nav-links a::after {
  content:'';
  position:absolute;
  bottom:-4px; left:0;
  width:0; height:1px;
  background:var(--gold);
  transition:var(--t);
}
.nav-links a:hover { color:var(--gold-lt); }
.nav-links a:hover::after { width:100%; }

.nav-cta {
  color:var(--gold) !important;
  border:1px solid var(--border-gold);
  padding:7px 18px;
  border-radius:1px;
}
.nav-cta::after { display:none !important; }
.nav-cta:hover {
  background:var(--gold) !important;
  color:var(--bg) !important;
}

/* Hamburger */
.hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  background:none;
  border:none;
  padding:4px;
}
.hamburger span {
  display:block;
  width:24px; height:1.5px;
  background:var(--text);
  transition:var(--t);
}

/* ========================  HERO  ======================== */
.hero {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.hero-photo {
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(120deg, rgba(7,7,15,0.86) 5%, rgba(7,7,15,0.72) 40%, rgba(7,7,15,0.9) 100%),
    url('images/tanja-hero.jpg');
  background-size:cover;
  background-position:center 22%;
  transform:scale(1.04);
  opacity:0.72;
}

.hero-bg {
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 18% 28%, rgba(124,58,237,0.16) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 82% 68%, rgba(201,168,76,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 50% 70% at 50% 100%, rgba(124,58,237,0.07) 0%, transparent 60%);
  animation:bgPulse 9s ease-in-out infinite alternate;
  z-index:1;
}

@keyframes bgPulse {
  from {
    background:
      radial-gradient(ellipse 80% 60% at 18% 28%, rgba(124,58,237,0.16) 0%, transparent 60%),
      radial-gradient(ellipse 55% 45% at 82% 68%, rgba(201,168,76,0.09) 0%, transparent 55%),
      radial-gradient(ellipse 50% 70% at 50% 100%, rgba(124,58,237,0.07) 0%, transparent 60%);
  }
  to {
    background:
      radial-gradient(ellipse 70% 55% at 28% 38%, rgba(124,58,237,0.22) 0%, transparent 60%),
      radial-gradient(ellipse 65% 55% at 72% 58%, rgba(201,168,76,0.13) 0%, transparent 55%),
      radial-gradient(ellipse 55% 65% at 50% 90%, rgba(124,58,237,0.1) 0%, transparent 60%);
  }
}

.hero-grid {
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(201,168,76,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.025) 1px, transparent 1px);
  background-size:80px 80px;
  z-index:2;
}

#particles-canvas {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
}

.hero-content {
  position:relative;
  z-index:10;
  text-align:center;
  padding:0 24px;
}

.hero-overline {
  display:block;
  font-family:var(--ff-ui);
  font-size:0.63rem;
  font-weight:600;
  letter-spacing:0.55em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:22px;
  opacity:0;
  animation:fadeUp 1s ease forwards 0.3s;
}

.hero-name {
  font-family:var(--ff-display);
  font-size:clamp(4rem, 10.5vw, 9.5rem);
  font-weight:300;
  letter-spacing:0.03em;
  line-height:0.95;
  margin-bottom:28px;
  opacity:0;
  animation:fadeUp 1s ease forwards 0.65s;
}
.hero-name em {
  display:block;
  font-style:italic;
  font-size:0.52em;
  font-weight:300;
  color:var(--text-2);
  margin-top:6px;
}

.hero-tagline {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-bottom:50px;
  opacity:0;
  animation:fadeUp 1s ease forwards 1s;
}
.hero-tagline span {
  font-family:var(--ff-ui);
  font-size:0.72rem;
  font-weight:400;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--text-2);
}
.hero-tagline .dot {
  width:3px; height:3px;
  border-radius:50%;
  background:var(--gold);
  flex-shrink:0;
}

.hero-line {
  width:1px; height:56px;
  background:linear-gradient(to bottom, var(--gold), transparent);
  margin:0 auto 32px;
  opacity:0;
  animation:fadeIn 1s ease forwards 1.3s;
}

.hero-cta {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--ff-ui);
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.25em;
  text-transform:uppercase;
  color:var(--gold);
  border:1px solid var(--border-gold);
  padding:14px 30px;
  position:relative;
  overflow:hidden;
  opacity:0;
  animation:fadeUp 1s ease forwards 1.5s;
}
.hero-cta::before {
  content:'';
  position:absolute;
  inset:0;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:var(--t);
}
.hero-cta:hover::before { transform:scaleX(1); }
.hero-cta span,
.hero-cta svg { position:relative; z-index:1; }
.hero-cta:hover { color:var(--bg); }

.hero-scroll {
  position:absolute;
  bottom:36px; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  opacity:0;
  animation:fadeIn 1s ease forwards 2s;
}
.hero-scroll span {
  font-family:var(--ff-ui);
  font-size:0.58rem;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.scroll-bar {
  width:1px; height:38px;
  background:linear-gradient(to bottom, var(--gold), transparent);
  animation:scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { opacity:0.3; }
  50%      { opacity:1; }
}

/* ========================  PAGE HERO (subpages)  ======================== */
.page-hero {
  padding:calc(var(--nav-h) + 80px) 0 72px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.page-hero::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 60% 80% at 50% 0%, rgba(124,58,237,0.13) 0%, transparent 70%);
  pointer-events:none;
}
.page-hero-content { position:relative; z-index:1; }
.page-hero h1 {
  font-family:var(--ff-display);
  font-size:clamp(2.8rem, 7vw, 5.5rem);
  font-weight:300;
  letter-spacing:0.04em;
  margin-top:14px;
}
.page-hero h1 em { font-weight:300; }

.page-photo-banner {
  position:relative;
  border:1px solid var(--border-gold);
  background:var(--bg-card);
  padding:10px;
  margin-bottom:54px;
  overflow:hidden;
}

.page-photo-banner::before {
  content:'';
  position:absolute;
  inset:10px;
  border:1px solid rgba(201,168,76,0.2);
  pointer-events:none;
}

.page-photo-banner img {
  width:100%;
  height:auto;
  display:block;
  filter:contrast(1.08) saturate(1.04);
}

/* ========================  ABOUT  ======================== */
.about {
  padding:120px 0;
  position:relative;
}
.about::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,168,76,0.4), transparent);
}

.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
}

.about-text .overline { display:block; margin-bottom:18px; }
.about-text h2 {
  font-family:var(--ff-display);
  font-size:clamp(1.9rem, 3.2vw, 2.9rem);
  font-weight:300;
  line-height:1.25;
  margin-bottom:30px;
}
.about-text h2 em { font-weight:300; color:var(--gold-lt); }
.about-text p {
  font-size:0.98rem;
  color:var(--text-2);
  line-height:1.88;
  margin-bottom:18px;
}
.about-text p:last-child { margin-bottom:0; }
.about-text strong { color:var(--text); font-weight:700; }
.about-text em { font-style:italic; }

.about-visual { display:flex; flex-direction:column; gap:20px; }

.about-photo {
  border:1px solid var(--border-gold);
  background:var(--bg-card);
  padding:10px;
  position:relative;
  overflow:hidden;
}
.about-photo::after {
  content:'';
  position:absolute;
  inset:10px;
  border:1px solid rgba(201,168,76,0.22);
  pointer-events:none;
}
.about-photo img {
  width:100%;
  height:auto;
  display:block;
  filter:saturate(1.05) contrast(1.08);
}

.bio-quote {
  background:var(--bg-card);
  border:1px solid var(--border-gold);
  border-left:3px solid var(--gold);
  padding:32px 30px;
  position:relative;
}
.bio-quote::before {
  content:'"';
  position:absolute;
  top:-8px; left:22px;
  font-family:var(--ff-display);
  font-size:6rem;
  line-height:1;
  color:var(--gold);
  opacity:0.12;
}
.bio-quote p {
  font-family:var(--ff-display);
  font-size:1.25rem;
  font-style:italic;
  font-weight:300;
  line-height:1.6;
  color:var(--text);
}

.stat-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
}
.stat-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  padding:24px 20px;
  text-align:center;
  transition:var(--t);
  position:relative;
  overflow:hidden;
}
.stat-card::after {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, var(--gold), var(--violet));
  transform:scaleX(0);
  transition:var(--t);
}
.stat-card:hover { background:var(--bg-card-h); border-color:var(--border-gold); }
.stat-card:hover::after { transform:scaleX(1); }

.stat-val {
  display:block;
  font-family:var(--ff-display);
  font-size:2rem;
  font-weight:300;
  color:var(--gold);
  line-height:1;
  margin-bottom:6px;
}
.stat-lbl {
  font-family:var(--ff-ui);
  font-size:0.62rem;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--text-muted);
}

/* ========================  SERVICES  ======================== */
.services {
  padding:100px 0;
  background:linear-gradient(to bottom, transparent, rgba(13,13,26,0.7), transparent);
}
.services-header { text-align:center; margin-bottom:64px; }
.services-header .overline { display:block; margin-bottom:14px; }
.services-header h2 {
  font-family:var(--ff-display);
  font-size:clamp(2rem,4vw,3.2rem);
  font-weight:300;
}

.services-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
}

.svc-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  padding:52px 36px;
  position:relative;
  overflow:hidden;
  transition:var(--t);
  display:flex;
  flex-direction:column;
}
.svc-card::after {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transform:scaleX(0);
  transition:var(--t);
}
.svc-card:hover {
  background:var(--bg-card-h);
  border-color:var(--border-gold);
  transform:translateY(-5px);
}
.svc-card:hover::after { transform:scaleX(1); }

.svc-icon {
  width:52px; height:52px;
  border:1px solid var(--border-gold);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:26px;
  color:var(--gold);
  position:relative;
}
.svc-num {
  position:absolute;
  top:-10px; right:-10px;
  font-family:var(--ff-display);
  font-size:3rem;
  font-weight:300;
  color:rgba(201,168,76,0.07);
  line-height:1;
  pointer-events:none;
}
.svc-card h3 {
  font-family:var(--ff-display);
  font-size:1.6rem;
  font-weight:400;
  margin-bottom:14px;
}
.svc-card p {
  font-size:0.93rem;
  color:var(--text-2);
  line-height:1.82;
  flex:1;
}
.svc-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--ff-ui);
  font-size:0.68rem;
  font-weight:600;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin-top:26px;
  transition:var(--t);
}
.svc-link:hover { gap:14px; color:var(--gold-lt); }

/* ========================  CVT BLOCK  ======================== */
.cvt-section { padding:100px 0; }

.cvt-box {
  background:var(--bg-card);
  border:1px solid var(--border-gold);
  padding:72px;
  position:relative;
  overflow:hidden;
}
.cvt-box::before {
  content:'';
  position:absolute;
  top:-60px; right:-60px;
  width:320px; height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(201,168,76,0.06) 0%, transparent 70%);
  pointer-events:none;
}
.cvt-box::after {
  content:'';
  position:absolute;
  bottom:-60px; left:-60px;
  width:320px; height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(124,58,237,0.07) 0%, transparent 70%);
  pointer-events:none;
}

.cvt-grid {
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}

.cvt-text .overline { display:block; margin-bottom:18px; }
.cvt-text h2 {
  font-family:var(--ff-display);
  font-size:clamp(1.9rem,3.2vw,2.7rem);
  font-weight:300;
  margin-bottom:22px;
}
.cvt-text h2 em { font-weight:300; }
.cvt-text p {
  font-size:0.97rem;
  color:var(--text-2);
  line-height:1.85;
  margin-bottom:14px;
}
.cvt-text p:last-child { margin-bottom:0; }
.cvt-text a { color:var(--gold); }
.cvt-text a:hover { color:var(--gold-lt); }

.cvt-logo-wrap {
  margin:18px 0 22px;
  display:inline-flex;
  align-items:center;
  gap:14px;
  border:1px solid var(--border-gold);
  background:rgba(255,255,255,0.02);
  padding:10px 14px;
}

.cvt-logo-wrap img {
  width:120px;
  height:auto;
  object-fit:contain;
}

.cvt-logo-wrap span {
  font-family:var(--ff-ui);
  font-size:0.62rem;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--text-2);
}

.timeline { display:flex; flex-direction:column; gap:22px; }
.tl-item  { display:flex; gap:22px; align-items:flex-start; }
.tl-year  {
  font-family:var(--ff-display);
  font-size:1.3rem;
  font-weight:300;
  color:var(--gold);
  min-width:72px;
  line-height:1.2;
  flex-shrink:0;
}
.tl-body {
  border-left:1px solid var(--border-gold);
  padding-left:18px;
}
.tl-body h4 {
  font-family:var(--ff-ui);
  font-size:0.77rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text);
  margin-bottom:4px;
}
.tl-body p {
  font-size:0.88rem;
  color:var(--text-2);
}

/* ========================  CONTACT  ======================== */
.contact {
  padding:100px 0;
  text-align:center;
  position:relative;
}
.contact::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--border-gold), transparent);
}

.contact-inner { max-width:720px; margin:0 auto; }
.contact-inner .overline { display:block; margin-bottom:18px; }
.contact-inner h2 {
  font-family:var(--ff-display);
  font-size:clamp(2rem,4vw,3.2rem);
  font-weight:300;
  margin-bottom:48px;
}

.contact-cards {
  display:flex;
  gap:2px;
}
.contact-card {
  flex:1;
  background:var(--bg-card);
  border:1px solid var(--border);
  padding:30px 22px;
  transition:var(--t);
}
.contact-card:hover {
  background:var(--bg-card-h);
  border-color:var(--border-gold);
}
.cc-icon { color:var(--gold); margin-bottom:10px; }
.cc-label {
  font-family:var(--ff-ui);
  font-size:0.62rem;
  font-weight:600;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:6px;
}
.cc-val {
  font-size:0.93rem;
  color:var(--text-2);
  line-height:1.6;
}
.cc-val a { color:var(--gold-lt); }
.cc-val a:hover { color:var(--gold); }

/* ========================  FOOTER  ======================== */
footer {
  background:var(--bg-2);
  border-top:1px solid var(--border);
  padding:36px 0;
}
.footer-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.footer-logo {
  font-family:var(--ff-display);
  font-size:1.1rem;
  font-weight:400;
  letter-spacing:0.07em;
}
.footer-nav { display:flex; gap:22px; }
.footer-nav a {
  font-family:var(--ff-ui);
  font-size:0.68rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.footer-nav a:hover { color:var(--gold); }
.footer-copy {
  font-family:var(--ff-ui);
  font-size:0.66rem;
  letter-spacing:0.08em;
  color:var(--text-muted);
}

/* ========================  BANDS PAGE  ======================== */
.bands-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(310px,1fr));
  gap:2px;
  padding-bottom:80px;
}
.band-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  padding:38px 34px;
  transition:var(--t);
  position:relative;
  overflow:hidden;
}
.band-card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transform:scaleX(0);
  transition:var(--t);
}
.band-card:hover { background:var(--bg-card-h); border-color:var(--border-gold); }
.band-card:hover::before { transform:scaleX(1); }

.band-num {
  font-family:var(--ff-display);
  font-size:4rem;
  font-weight:300;
  color:rgba(201,168,76,0.055);
  line-height:1;
  margin-bottom:-8px;
}
.band-name {
  font-family:var(--ff-display);
  font-size:1.5rem;
  font-weight:400;
  letter-spacing:0.04em;
  margin-bottom:10px;
}
.band-desc {
  font-size:0.88rem;
  color:var(--text-muted);
  font-family:var(--ff-body);
  margin-bottom:12px;
  line-height:1.6;
}
.band-link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--ff-ui);
  font-size:0.66rem;
  font-weight:500;
  letter-spacing:0.08em;
  color:var(--gold);
}
.band-link:hover { color:var(--gold-lt); gap:10px; }

/* ========================  LINKS PAGE  ======================== */
.links-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(270px,1fr));
  gap:2px;
  padding-bottom:80px;
}
.link-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  padding:30px 28px;
  display:flex;
  align-items:center;
  gap:18px;
  transition:var(--t);
  cursor:pointer;
}
.link-card:hover {
  background:var(--bg-card-h);
  border-color:var(--border-gold);
  transform:translateX(5px);
}
.link-arrow {
  color:var(--gold);
  font-size:1rem;
  transition:var(--t);
  flex-shrink:0;
}
.link-card:hover .link-arrow { transform:translateX(4px); }
.link-name {
  font-family:var(--ff-ui);
  font-size:0.88rem;
  font-weight:500;
  color:var(--text);
  margin-bottom:3px;
}
.link-url {
  font-family:var(--ff-ui);
  font-size:0.68rem;
  color:var(--text-muted);
  letter-spacing:0.04em;
}

/* ========================  VOCAL COACHING PAGE  ======================== */
.coaching-intro {
  max-width:740px;
  padding:0 0 72px;
}
.coaching-intro p {
  font-size:1.05rem;
  color:var(--text-2);
  line-height:1.9;
  margin-bottom:18px;
}
.coaching-intro strong { color:var(--text); }
.coaching-intro em { font-style:italic; }

.offerings-header { margin-bottom:44px; }
.offerings-header .overline { display:block; margin-bottom:14px; }
.offerings-header h2 {
  font-family:var(--ff-display);
  font-size:clamp(2rem,4vw,3rem);
  font-weight:300;
}
.offerings-header h2 em { font-weight:300; }

.offerings-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2px;
  margin-bottom:80px;
}
.offering {
  background:var(--bg-card);
  border:1px solid var(--border);
  padding:38px 36px;
  display:flex;
  gap:22px;
  transition:var(--t);
}
.offering:hover { background:var(--bg-card-h); border-color:var(--border-gold); }
.offering-bar {
  width:2px;
  min-height:40px;
  background:linear-gradient(to bottom, var(--gold), var(--violet));
  flex-shrink:0;
}
.offering h3 {
  font-family:var(--ff-display);
  font-size:1.3rem;
  font-weight:400;
  margin-bottom:10px;
}
.offering p {
  font-size:0.92rem;
  color:var(--text-2);
  line-height:1.75;
}

/* ========================  REVEAL ANIMATIONS  ======================== */
.reveal {
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.8s cubic-bezier(.4,0,.2,1),
              transform 0.8s cubic-bezier(.4,0,.2,1);
}
.reveal.visible { opacity:1; transform:translateY(0); }
.d1 { transition-delay:0.1s; }
.d2 { transition-delay:0.2s; }
.d3 { transition-delay:0.3s; }
.d4 { transition-delay:0.4s; }

/* ========================  KEYFRAMES  ======================== */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}

/* ========================  RESPONSIVE  ======================== */
@media (max-width:1024px) {
  .about-grid    { grid-template-columns:1fr; gap:48px; }
  .cvt-grid      { grid-template-columns:1fr; gap:48px; }
  .cvt-box       { padding:48px 40px; }
  .services-grid { grid-template-columns:1fr 1fr; }
}

/* ── Tablet / Mobile  (≤ 768 px) ── */
@media (max-width:768px) {
  :root { --nav-h:60px; }

  .container { padding:0 20px; }
  .navbar    { padding:0 20px; }

  /* ─── Mobile overlay menu ──────────────────────────────────
     Strategy: always display:flex, animate with opacity +
     visibility + transform so CSS transitions work cleanly.
     Overlay starts at top:var(--nav-h) so the navbar bar
     (logo + hamburger) is never covered — no z-index juggling.
  ─────────────────────────────────────────────────────────── */
  .nav-links {
    position:fixed;
    top:var(--nav-h);
    left:0; right:0; bottom:0;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0;
    padding-bottom:env(safe-area-inset-bottom, 20px);
    background:rgba(7,7,15,0.97);
    backdrop-filter:blur(28px);
    -webkit-backdrop-filter:blur(28px);
    z-index:999;
    /* closed state */
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-10px);
    transition:
      opacity  0.35s ease,
      transform 0.35s ease,
      visibility 0s linear 0.35s;
  }

  .nav-links.open {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
    transition:
      opacity  0.35s ease,
      transform 0.35s ease,
      visibility 0s linear 0s;
  }

  /* Staggered entrance for each item */
  .nav-links li {
    width:100%;
    text-align:center;
    border-bottom:1px solid rgba(201,168,76,0.08);
    opacity:0;
    transform:translateY(10px);
    transition:opacity 0.28s ease, transform 0.28s ease;
  }
  .nav-links li:first-child {
    border-top:1px solid rgba(201,168,76,0.08);
  }

  .nav-links.open li             { opacity:1; transform:translateY(0); }
  .nav-links.open li:nth-child(1){ transition-delay:0.06s; }
  .nav-links.open li:nth-child(2){ transition-delay:0.12s; }
  .nav-links.open li:nth-child(3){ transition-delay:0.18s; }
  .nav-links.open li:nth-child(4){ transition-delay:0.24s; }
  .nav-links.open li:nth-child(5){ transition-delay:0.30s; }

  /* Link style inside open menu */
  .nav-links a {
    display:block;
    padding:17px 40px;
    font-size:0.75rem;
    letter-spacing:0.3em;
    color:var(--text-2);
  }
  .nav-links a:hover {
    color:var(--gold-lt);
    background:rgba(201,168,76,0.04);
  }
  /* Remove desktop underline pseudo-element */
  .nav-links a::after { display:none; }

  /* CTA link: no redundant border inside the menu */
  .nav-links .nav-cta {
    border:none !important;
    padding:17px 40px !important;
    background:none !important;
    color:var(--gold) !important;
  }

  /* Hamburger stays on top within the navbar stacking context */
  .hamburger {
    display:flex;
    position:relative;
    z-index:1001;
  }

  /* ─── Page sections ─────────────────────────────────────── */
  .about       { padding:72px 0; }
  .services    { padding:72px 0; }
  .cvt-section { padding:72px 0; }
  .contact     { padding:72px 0; }
  .page-hero   { padding:calc(var(--nav-h) + 48px) 0 52px; }

  .services-grid  { grid-template-columns:1fr; }
  .stat-grid      { grid-template-columns:1fr 1fr; }
  .offerings-grid { grid-template-columns:1fr; }
  .contact-cards  { flex-direction:column; }
  .cvt-box        { padding:30px 20px; }
  .footer-inner   { flex-direction:column; text-align:center; }
  .footer-nav     { flex-wrap:wrap; justify-content:center; }
  .bands-grid     { grid-template-columns:1fr; }
  .links-grid     { grid-template-columns:1fr; }
}

/* ── Small phones  (≤ 480 px) ── */
@media (max-width:480px) {
  .container   { padding:0 16px; }
  .navbar      { padding:0 16px; }

  .hero-name   { font-size:clamp(2.8rem, 15vw, 4.2rem); }
  .hero-tagline{ gap:10px; flex-wrap:wrap; justify-content:center; }
  .hero-cta    { padding:12px 22px; }

  .stat-grid   { grid-template-columns:1fr; }
  .svc-card    { padding:36px 22px; }
  .offering    { flex-direction:column; gap:14px; }
  .cvt-box     { padding:22px 14px; }
  .tl-year     { min-width:58px; font-size:1.1rem; }

  .about-photo img           { height:auto; }
  .page-photo-banner img     { height:auto; }

  .nav-links a { padding:16px 24px; font-size:0.72rem; }
}