/* ================================================
   TANGOACT.RO — Static Rebuild
   Asociatia pentru Cultura si Tango
   ================================================ */

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

:root {
  --clr-dark:        #0d0d0d;
  --clr-dark-2:      #1a1a1a;
  --clr-dark-3:      #272727;
  --clr-gold:        #c9a84c;
  --clr-gold-dim:    rgba(201,168,76,0.12);
  --clr-crimson:     #8b1717;
  --clr-light:       #f5f2ed;
  --clr-light-2:     #fdfaf6;
  --clr-text:        #1c1c1c;
  --clr-text-mid:    #4a4a4a;
  --clr-text-light:  #888;
  --clr-white:       #ffffff;
  --clr-border:      #e5e0d8;
  --clr-hero-text:   #1a1a2e;

  --ff-display: 'Playfair Display', Georgia, serif;
  --ff-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  --nav-h:     70px;
  --max-w:     1140px;
  --gap:       2rem;
  --radius:    8px;
  --shadow:    0 4px 24px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 48px rgba(0,0,0,.15);
  --ease:      cubic-bezier(.4,0,.2,1);
  --t:         .3s var(--ease);
}

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

/* ===== TYPOGRAPHY ===== */
h1,h2,h3,h4,h5,h6 { font-family:var(--ff-display); line-height:1.2; }
h1 { font-size:clamp(2.4rem,5.5vw,4.2rem); }
h2 { font-size:clamp(1.9rem,3.8vw,2.8rem); }
h3 { font-size:clamp(1.2rem,2.4vw,1.65rem); }
h4 { font-size:1.15rem; }
p  { margin-bottom:1rem; }
p:last-child { margin-bottom:0; }

/* ===== LAYOUT ===== */
.container { max-width:var(--max-w); margin:0 auto; padding:0 var(--gap); }
.section    { padding:5rem 0; }
.section--dark  { background:var(--clr-dark);   color:var(--clr-light); }
.section--mid   { background:var(--clr-dark-2); color:var(--clr-light); }
.section--light { background:var(--clr-light); }
.section--white { background:var(--clr-light-2); }
/* one-pager: anchored sections clear the fixed menu when navigated to */
[id] { scroll-margin-top:84px; }

.section-title      { text-align:center; margin-bottom:.6rem; }
.section--dark  .section-title,
.section--mid   .section-title  { color:var(--clr-light); }
.section-subtitle   { text-align:center; color:var(--clr-text-light); font-size:1.05rem; margin-bottom:3rem; }
.section--dark  .section-subtitle,
.section--mid   .section-subtitle { color:rgba(245,242,237,.55); }
.section-divider    { width:54px; height:3px; background:var(--clr-gold); margin:1rem auto 2.5rem; border-radius:2px; }
.section-permalink  { display:inline-block; margin-left:.45rem; color:var(--clr-gold); opacity:0; font-size:.62em; font-weight:400; text-decoration:none; vertical-align:middle; transition:opacity .18s; line-height:1; }
h2:hover .section-permalink { opacity:.7; }
h2:hover .section-permalink:hover { opacity:1; }

.grid      { display:grid; gap:var(--gap); }
.grid-2    { grid-template-columns:repeat(2,1fr); }
.grid-3    { grid-template-columns:repeat(3,1fr); }
.grid-auto { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.two-col   { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }

/* ===== HERO (homepage only — position:fixed, shrinks on scroll) ===== */
.hero {
  position:fixed; top:0; left:0; right:0;
  height:100vh; z-index:500; overflow:hidden;
  background:var(--clr-dark);
}
.hero-bg {
  position:absolute; inset:0;
  background-image:url('/assets/images/hero-clouds.jpg');
  background-size:cover;
  background-position:50% center;
  background-repeat:no-repeat;
  animation:skyDrift 75s ease-in-out infinite alternate;
  transition:opacity .35s ease;
}
.hero-bg::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.62) 0%,
    rgba(255,255,255,.38) 55%,
    rgba(10,10,20,.52) 100%
  );
}
/* When the homepage hero shrinks into the 70px menu bar, the clouds simply
   remain (no overlay, no border) — the transparent menu floats over them. */

/* ===== HERO NAV (fixed independently — outside .hero so overflow:hidden never clips dropdowns) ===== */
.hero-nav {
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h); display:flex; align-items:center;
  padding:0 2rem; z-index:600; gap:1.5rem;
}
.hero-nav-logo {
  opacity:0; transition:opacity .5s var(--ease);
  flex-shrink:0;
}
.hero-nav-logo img {
  height:42px; width:auto;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.5));
  transition:filter var(--t), transform var(--t);
}
.hero-nav-logo:hover img {
  filter:drop-shadow(0 0 14px rgba(201,168,76,.6));
  transform:scale(1.04);
}
.hero.compact .hero-nav-logo { opacity:1; }

.hero-nav-menu {
  display:flex; align-items:center; gap:0; margin-left:auto;
  flex-wrap:nowrap;
}
.hero-nav-menu > li > a {
  color:rgba(26,26,46,.82); font-size:.78rem; font-weight:500;
  letter-spacing:.025em; padding:.35rem .6rem; border-radius:4px;
  transition:var(--t); white-space:nowrap; display:block;
}
.hero-nav-menu > li > a:hover { color:var(--clr-crimson); background:rgba(255,255,255,.22); }
.hero-nav-menu .dropdown { position:relative; }
.hero-nav-menu .dropdown > a::after { content:' ▾'; font-size:.65em; opacity:.6; }
.dropdown-menu {
  position:absolute; top:calc(100% + 4px); left:0;
  background:rgba(232,244,255,.96); backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.7); border-radius:var(--radius);
  box-shadow:0 8px 32px rgba(0,20,60,.18);
  padding:.4rem 0; min-width:175px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:all .22s var(--ease); z-index:200;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-menu a {
  display:block; padding:.42rem 1rem; font-size:.8rem;
  color:rgba(15,30,70,.8); transition:var(--t);
}
.dropdown-menu a:hover { color:var(--clr-gold); padding-left:1.25rem; background:rgba(201,168,76,.1); }

/* Hamburger button */
.hamburger {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  background:none; border:none; cursor:pointer; padding:.5rem; margin-left:auto;
}
.hamburger span {
  display:block; width:24px; height:2px; background:rgba(26,26,46,.75);
  border-radius:2px; transition:var(--t);
}
.site-header .hamburger span { background:rgba(245,242,237,.9); }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ===== MOBILE MENU OVERLAY ===== */
.mobile-menu {
  position:fixed; inset:0; background:var(--clr-dark); z-index:1000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:all .3s var(--ease);
  padding:2rem;
}
.mobile-menu.open { opacity:1; visibility:visible; }
.mobile-menu-close {
  position:absolute; top:1.25rem; right:1.25rem;
  background:none; border:none; color:rgba(245,242,237,.6);
  font-size:2rem; cursor:pointer; line-height:1;
  transition:color var(--t);
}
.mobile-menu-close:hover { color:var(--clr-gold); }
.mobile-menu-inner { text-align:center; overflow-y:auto; max-height:90vh; width:100%; }
.mobile-menu a {
  display:block; color:var(--clr-light); font-family:var(--ff-display);
  font-size:1.7rem; padding:.55rem 0; transition:color var(--t);
}
.mobile-menu a:hover { color:var(--clr-gold); }
.mobile-sub-label {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  cursor:pointer; user-select:none;
}
.mobile-sub-label svg { width:16px; height:16px; transition:transform .3s; }
.mobile-sub-label.open svg { transform:rotate(180deg); }
.mobile-sub-links {
  display:none; flex-direction:column; gap:0;
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
  padding:.25rem 0; margin-bottom:.25rem;
}
.mobile-sub-links.open { display:flex; }
.mobile-sub-links a {
  font-family:var(--ff-body); font-size:1rem;
  color:rgba(245,242,237,.55); padding:.35rem 0;
}
.mobile-sub-links a:hover { color:var(--clr-gold); }

/* ===== HERO MAIN CONTENT ===== */
.hero-main {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:2rem; padding-top:var(--nav-h);
  transition:opacity .25s ease;
}
.hero-logo-wrap {
  animation:heroReveal 1.3s var(--ease) both;
}
.hero-logo {
  width:auto; height:auto; max-width:85vw; max-height:88vh;
  filter:drop-shadow(0 2px 18px rgba(0,0,0,.22));
  transition:filter var(--t), transform var(--t);
}
.hero-logo:hover {
  filter:drop-shadow(0 4px 28px rgba(139,23,23,.35));
  transform:scale(1.025);
}
@keyframes heroReveal {
  from { opacity:0; transform:scale(.93) translateY(18px); filter:blur(6px); }
  to   { opacity:1; transform:scale(1) translateY(0);      filter:drop-shadow(0 2px 18px rgba(0,0,0,.22)); }
}
.hero-tagline {
  font-family:var(--ff-display); font-style:italic;
  font-size:clamp(.95rem,2.2vw,1.3rem);
  color:rgba(26,26,46,.65); letter-spacing:.07em;
  margin-top:1.25rem;
  animation:fadeUp 1.2s .45s var(--ease) both;
}
.hero-divider {
  width:44px; height:1px; background:var(--clr-gold);
  margin:1.4rem auto 0; opacity:.7;
  animation:fadeUp 1.2s .6s var(--ease) both;
}
.hero-cta-row {
  display:flex; gap:1rem; margin-top:2.5rem; flex-wrap:wrap; justify-content:center;
  animation:fadeUp 1.2s .75s var(--ease) both;
}
.hero-main .btn-ghost {
  color:var(--clr-hero-text); border-color:rgba(26,26,46,.3);
  background:rgba(255,255,255,.35);
}
.hero-main .btn-ghost:hover {
  background:rgba(255,255,255,.62); border-color:rgba(26,26,46,.5);
}
.hero-scroll-hint {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:rgba(26,26,46,.38); font-size:.7rem; letter-spacing:.15em;
  text-transform:uppercase;
  animation:fadeUp 1.2s 1s var(--ease) both;
}
.scroll-chevron {
  width:20px; height:20px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); animation:bounce 2.2s ease infinite;
}
@keyframes bounce { 0%,100%{transform:rotate(45deg) translateY(0)} 50%{transform:rotate(45deg) translateY(5px)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ===== PAGE WRAPPER ===== */
.page-with-hero    { margin-top:100vh; }
/* No top padding: the page banner (.page-hero / copy heroes) extends up BEHIND
   the transparent menu so the menu floats over the page's own clouds. Each
   banner adds its own top padding to clear the fixed menu. */
.page-without-hero { padding-top:0; }

/* ===== UNIFIED CLOUD SKY (one mechanism for every page) =====
   The cloud photo (background-size:cover) drifts slowly via a DIAGONAL pan so
   the motion is visible regardless of element shape: on the tall homepage hero
   the horizontal component shows, while on the wide/short menu, banners and
   footer the vertical component shows. skyDriftHeader has 2 layers (dark overlay
   + photo); skyDrift has 1 (photo). Same range/timing so they read as one sky. */
@keyframes skyDriftHeader {
  0%   { background-position:center top, 20% 28%; }
  100% { background-position:center top, 80% 72%; }
}
@keyframes skyDrift {
  0%   { background-position:20% 28%; }
  100% { background-position:80% 72%; }
}
.site-header {
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:500;
  background:transparent;
  display:flex; align-items:center; padding:0 2rem; gap:1.5rem;
}
.site-header .header-logo img {
  height:42px; width:auto; filter:drop-shadow(0 2px 10px rgba(0,0,12,.85));
  transition:filter var(--t), transform var(--t);
}
.site-header .header-logo:hover img {
  filter:drop-shadow(0 0 14px rgba(201,168,76,.6));
  transform:scale(1.04);
}
.header-nav { display:flex; align-items:center; gap:0; margin-left:auto; flex-wrap:nowrap; }
.header-nav > li > a {
  color:rgba(245,242,237,.9); font-size:.78rem; font-weight:500;
  padding:.35rem .6rem; border-radius:4px; transition:var(--t); white-space:nowrap; display:block;
}
.header-nav > li > a:hover,
.header-nav > li > a.active { color:var(--clr-gold); background:rgba(201,168,76,.07); }
.header-nav .dropdown { position:relative; }
.header-nav .dropdown > a::after { content:' ▾'; font-size:.65em; opacity:.6; }
.header-nav .dropdown:hover .dropdown-menu,
.header-nav .dropdown:focus-within .dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }

/* ===== PAGE HERO (inner-page banner — the page's ONE cloud image) =====
   It extends up behind the transparent menu (top padding clears the fixed bar)
   so the menu floats over these clouds. As you scroll, the banner scrolls up
   and the menu floats over the remaining clouds, then over the page. No second
   cloud picture is used anywhere. */
.page-hero {
  background-color:var(--clr-dark);
  background-image:url('/assets/images/hero-clouds.jpg');
  background-size:cover;
  background-position:50% center;
  background-repeat:no-repeat;
  animation:skyDrift 75s ease-in-out infinite alternate;
  padding:calc(var(--nav-h) + 2.75rem) 0 3rem; text-align:center;
  position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(8,8,20,.42) 0%,rgba(8,8,20,.46) 50%,rgba(8,8,20,.66) 100%);
}
.page-hero .container { position:relative; }
.page-hero h1 { color:var(--clr-light); margin-bottom:.6rem; text-shadow:0 2px 20px rgba(0,0,12,.75); }
.page-hero p  { color:rgba(245,242,237,.88); font-style:italic; font-size:1.05rem; margin:0; text-shadow:0 1px 10px rgba(0,0,12,.55); }
.page-hero .breadcrumb { margin-bottom:1.5rem; }

/* ===== BREADCRUMB ===== */
.breadcrumb { color:rgba(245,242,237,.4); font-size:.82rem; }
.breadcrumb a { color:var(--clr-gold); transition:opacity var(--t); }
.breadcrumb a:hover { opacity:.75; }
.breadcrumb span { margin:0 .45rem; opacity:.4; }

/* ===== BUTTONS ===== */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.72rem 1.75rem; border-radius:4px; font-weight:600;
  font-size:.87rem; letter-spacing:.05em; transition:var(--t);
  cursor:pointer; border:2px solid transparent; text-transform:uppercase;
  font-family:var(--ff-body); white-space:nowrap;
}
.btn-gold    { background:var(--clr-gold); color:var(--clr-dark);  border-color:var(--clr-gold); }
.btn-gold:hover { background:transparent; color:var(--clr-gold); }
.btn-outline { background:transparent; color:var(--clr-gold); border-color:var(--clr-gold); }
.btn-outline:hover { background:var(--clr-gold); color:var(--clr-dark); }
.btn-white  { background:var(--clr-white); color:var(--clr-dark); border-color:var(--clr-white); }
.btn-white:hover { background:transparent; color:var(--clr-white); }
.btn-ghost  { background:rgba(255,255,255,.06); color:var(--clr-light); border-color:rgba(255,255,255,.15); }
.btn-ghost:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); }

/* ===== CARDS ===== */
.card { background:var(--clr-white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform var(--t), box-shadow var(--t); }
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.card-body { padding:1.75rem; }
.card-title { font-family:var(--ff-display); font-size:1.2rem; margin-bottom:.5rem; }
.card-text  { color:var(--clr-text-mid); font-size:.95rem; line-height:1.68; }
.card-tag   {
  display:inline-block; font-size:.72rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; padding:.22rem .7rem; border-radius:20px;
  background:var(--clr-gold-dim); color:var(--clr-gold);
  border:1px solid rgba(201,168,76,.25); margin-bottom:.75rem;
}

/* ===== FEATURE ICONS ===== */
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:2rem; }
.feature { text-align:center; padding:2rem 1.5rem; }
.feature-icon {
  width:3.2rem; height:3.2rem; margin:0 auto 1.25rem;
  display:flex; align-items:center; justify-content:center;
  color:var(--clr-gold); border-radius:50%;
  background:rgba(201,168,76,.09); border:1px solid rgba(201,168,76,.20);
}
.feature-icon svg { width:1.5rem; height:1.5rem; stroke:currentColor; fill:none;
  stroke-linecap:round; stroke-linejoin:round; stroke-width:1.6; }
.section--dark .feature-icon { background:rgba(201,168,76,.06); border-color:rgba(201,168,76,.18); }
.feature-title { font-family:var(--ff-display); font-size:1.15rem; margin-bottom:.6rem; }
.feature-text  { color:var(--clr-text-light); font-size:.93rem; line-height:1.68; }
.section--dark .feature-title { color:var(--clr-light); }
.section--dark .feature-text  { color:rgba(245,242,237,.55); }

/* ===== EQUAL-HEIGHT FEATURE TILES (homepage Activități) ===== */
.feature-grid--cards .feature {
  display:flex; flex-direction:column; height:100%;
  background:var(--clr-white); border:1px solid var(--clr-border);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.feature-grid--cards .feature .feature-text { flex:1 1 auto; }
.feature-grid--cards .feature .btn { align-self:center; margin-top:1.25rem; }

/* ===== DONATE / SUPPORT ICONS (larger gold badge, tango-warm) ===== */
.donate-icon {
  width:3.6rem; height:3.6rem; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--clr-gold); border-radius:50%;
  background:rgba(201,168,76,.10); border:1px solid rgba(201,168,76,.28);
}
.donate-icon svg { width:1.7rem; height:1.7rem; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* ===== PROJECTS ===== */
.project-list { display:flex; flex-direction:column; gap:1.5rem; }
.project-card {
  display:grid; grid-template-columns:100px 1fr; gap:1.75rem;
  align-items:start; background:var(--clr-white); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1.75rem;
  border-left:4px solid var(--clr-gold);
  transition:transform var(--t), box-shadow var(--t);
}
.project-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.project-year-col { text-align:center; }
.project-year    { font-family:var(--ff-display); font-size:2.2rem; color:var(--clr-gold); opacity:.45; font-weight:700; line-height:1; }
.project-period  { font-size:.72rem; color:var(--clr-text-light); text-transform:uppercase; letter-spacing:.09em; margin-top:.3rem; }
.project-info h3 { font-size:1.2rem; margin-bottom:.4rem; color:var(--clr-dark); }
.project-info p  { color:var(--clr-text-mid); font-size:.93rem; line-height:1.65; }
.project-badge   { display:inline-block; font-size:.72rem; background:var(--clr-gold-dim); color:var(--clr-gold); border:1px solid rgba(201,168,76,.25); padding:.18rem .65rem; border-radius:20px; margin-bottom:.6rem; font-weight:500; }

/* ===== TEAM ===== */
.team-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:2rem; }
.team-card { text-align:center; }
.team-avatar {
  width:88px; height:88px; border-radius:50%;
  background:var(--clr-gold-dim); border:2px solid rgba(201,168,76,.25);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1rem; font-family:var(--ff-display);
  font-size:1.8rem; color:var(--clr-gold);
}
.team-photo {
  width:88px; height:88px; border-radius:50%; object-fit:cover;
  border:3px solid rgba(201,168,76,.35);
  margin:0 auto 1rem; display:block;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
}
.team-name { font-family:var(--ff-display); font-size:1rem; margin-bottom:.2rem; }
.team-role { font-size:.82rem; color:var(--clr-gold); font-weight:500; }

/* ===== PROJECT THUMBNAILS ===== */
.project-thumb {
  width:80px; height:80px; object-fit:cover; border-radius:6px;
  box-shadow:var(--shadow); flex-shrink:0;
}
.project-card-inner { display:flex; gap:1.25rem; align-items:flex-start; }
/* Project LOGOS (original per-project logos) shown whole, not cropped */
.project-logo {
  width:104px; height:104px; flex-shrink:0; object-fit:contain;
  background:var(--clr-white); border:1px solid var(--clr-border);
  border-radius:6px; padding:7px; box-shadow:var(--shadow);
}
@media(max-width:640px){ .project-logo{ width:84px; height:84px; } }

/* ===== PHOTO STRIP ===== */
.photo-strip {
  display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem;
  overflow:hidden; border-radius:var(--radius);
}
.photo-strip img {
  aspect-ratio:4/3; object-fit:cover; width:100%;
  transition:transform .5s var(--ease); display:block;
}
.photo-strip img:hover { transform:scale(1.04); }
@media(max-width:640px){ .photo-strip{ grid-template-columns:repeat(2,1fr); } }

/* ===== TIMELINE (History) ===== */
.timeline { position:relative; padding-left:2.5rem; }
.timeline::before { content:''; position:absolute; left:0; top:.4rem; bottom:0; width:2px; background:linear-gradient(to bottom,var(--clr-gold),transparent); }
.timeline-item { position:relative; padding-bottom:2.5rem; }
.timeline-item:last-child { padding-bottom:0; }
.timeline-item::before { content:''; position:absolute; left:-2.5rem; top:.35rem; width:11px; height:11px; border-radius:50%; background:var(--clr-gold); border:2px solid var(--clr-light); box-shadow:0 0 0 3px rgba(201,168,76,.2); }
.timeline-year  { font-family:var(--ff-display); font-weight:700; font-size:1.5rem; color:var(--clr-gold); margin-bottom:.15rem; }
.timeline-title { font-family:var(--ff-display); font-size:1.05rem; color:var(--clr-dark); margin-bottom:.5rem; }
.timeline-text  { color:var(--clr-text-mid); font-size:.93rem; line-height:1.68; }

/* ===== STATS ===== */
.stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:2rem; text-align:center; }
.stat-num   { font-family:var(--ff-display); font-size:3rem; font-weight:700; color:var(--clr-gold); line-height:1; }
.stat-label { font-size:.88rem; color:rgba(245,242,237,.55); margin-top:.4rem; font-style:italic; }

/* ===== VALUES (dark section) ===== */
.values-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.5rem; }
.value-item {
  text-align:center; padding:2rem 1.25rem;
  border:1px solid rgba(201,168,76,.18); border-radius:var(--radius);
  transition:border-color var(--t), background var(--t);
}
.value-item:hover { border-color:rgba(201,168,76,.5); background:rgba(201,168,76,.04); }
.value-num   { font-family:var(--ff-display); font-size:2.8rem; color:var(--clr-gold); opacity:.35; line-height:1; margin-bottom:.35rem; }
.value-title { font-family:var(--ff-display); font-size:1.1rem; color:var(--clr-light); margin-bottom:.4rem; }
.value-text  { font-size:.88rem; color:rgba(245,242,237,.5); line-height:1.62; }

/* ===== CTA SECTION ===== */
.cta-section {
  background:var(--clr-dark); text-align:center; padding:5.5rem 0;
  position:relative; overflow:hidden;
}
.cta-section::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(201,168,76,.07) 0%,transparent 65%);
}
.cta-section .container { position:relative; }
.cta-section h2 { color:var(--clr-light); margin-bottom:1rem; }
.cta-section p  { color:rgba(245,242,237,.58); font-size:1.05rem; margin-bottom:2.2rem; max-width:480px; margin-left:auto; margin-right:auto; }
.cta-buttons    { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ===== CONTACT ===== */
.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:4rem; align-items:start; }
.contact-item { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.75rem; }
.c-icon       { flex-shrink:0; margin-top:.05rem; width:1.15rem; height:1.15rem; stroke:var(--clr-gold); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.c-label      { font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--clr-gold); margin-bottom:.2rem; }
.c-value      { color:var(--clr-text-mid); font-size:.93rem; line-height:1.6; }
.c-value a    { color:var(--clr-text-mid); transition:color var(--t); }
.c-value a:hover { color:var(--clr-gold); }
.contact-form { display:flex; flex-direction:column; gap:1.1rem; }
.form-group   { display:flex; flex-direction:column; gap:.3rem; }
.form-label   { font-size:.83rem; font-weight:500; color:var(--clr-text-mid); }
.form-control {
  padding:.7rem 1rem; border:2px solid var(--clr-border); border-radius:var(--radius);
  font-family:var(--ff-body); font-size:.95rem; color:var(--clr-text);
  background:var(--clr-white); transition:border-color var(--t); outline:none;
}
.form-control:focus  { border-color:var(--clr-gold); }
textarea.form-control { min-height:130px; resize:vertical; }
.form-status { font-size:.86rem; color:var(--clr-gold); margin:0 0 .25rem; min-height:1.1em; }

/* ===== BANKING INFO ===== */
.bank-box {
  background:var(--clr-light); border-radius:var(--radius);
  border:1px solid var(--clr-border); padding:1.5rem;
}
.bank-box h4 { font-family:var(--ff-display); margin-bottom:1rem; color:var(--clr-dark); }
.bank-row    { display:flex; justify-content:space-between; align-items:baseline; padding:.4rem 0; border-bottom:1px solid var(--clr-border); font-size:.9rem; }
.bank-row:last-child { border-bottom:none; }
.bank-key  { color:var(--clr-text-light); font-size:.8rem; }
.bank-val  { font-family:var(--ff-display); color:var(--clr-dark); }

/* ===== ACCORDION ===== */
.accordion { border:1px solid var(--clr-border); border-radius:var(--radius); overflow:hidden; }
.accordion-item { border-bottom:1px solid var(--clr-border); }
.accordion-item:last-child { border-bottom:none; }
.accordion-header {
  width:100%; text-align:left; padding:1.15rem 1.5rem; background:none; border:none;
  cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:var(--ff-display); font-size:1.02rem; color:var(--clr-text); transition:background var(--t);
}
.accordion-header:hover { background:var(--clr-light); }
.acc-icon { width:18px; height:18px; flex-shrink:0; position:relative; transition:transform .3s; }
.acc-icon::before,
.acc-icon::after { content:''; position:absolute; background:var(--clr-gold); border-radius:2px; transition:transform .3s; }
.acc-icon::before { width:2px; height:100%; left:50%; transform:translateX(-50%); }
.acc-icon::after  { width:100%; height:2px; top:50%; transform:translateY(-50%); }
.accordion-item.open .acc-icon::before { transform:translateX(-50%) scaleY(0); }
.accordion-body { padding:0 1.5rem; max-height:0; overflow:hidden; transition:max-height .4s var(--ease), padding .4s var(--ease); }
.accordion-item.open .accordion-body { max-height:800px; padding:0 1.5rem 1.5rem; }

/* ===== SCROLL ANIMATIONS ===== */
[data-anim] {
  opacity:0; transform:translateY(22px);
  transition:opacity .72s var(--ease), transform .72s var(--ease);
}
[data-anim].visible { opacity:1; transform:none; }
[data-anim][data-delay="1"] { transition-delay:.1s; }
[data-anim][data-delay="2"] { transition-delay:.2s; }
[data-anim][data-delay="3"] { transition-delay:.3s; }
[data-anim][data-delay="4"] { transition-delay:.4s; }
[data-anim][data-delay="5"] { transition-delay:.5s; }

/* ===== FOOTER (shares the cloud sky; heavier overlay keeps text legible) ===== */
.footer {
  background-image:linear-gradient(rgba(10,10,20,.82),rgba(12,12,24,.88)),url('/assets/images/hero-clouds.jpg');
  background-size:cover,cover;
  background-position:center top,50% center;
  background-repeat:no-repeat,no-repeat;
  animation:skyDriftHeader 75s ease-in-out infinite alternate;
  color:rgba(245,242,237,.68); padding:4rem 0 2rem;
  border-top:1px solid rgba(201,168,76,.18);
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer-logo img { height:52px; width:auto; filter:brightness(0) invert(1); opacity:.82; margin-bottom:.75rem; }
.footer-desc { font-size:.88rem; line-height:1.72; color:rgba(245,242,237,.5); margin-bottom:1.25rem; }
.footer-social { display:flex; gap:.65rem; }
.footer-social a {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  color:rgba(245,242,237,.68); font-size:.95rem; transition:var(--t);
}
.footer-social a:hover { background:var(--clr-gold); color:var(--clr-dark); border-color:var(--clr-gold); }
.footer-col-title { font-family:var(--ff-display); font-size:.98rem; color:var(--clr-light); margin-bottom:.85rem; }
.footer-links { display:flex; flex-direction:column; gap:.42rem; }
.footer-links a { font-size:.85rem; color:rgba(245,242,237,.5); transition:color var(--t); }
.footer-links a:hover { color:var(--clr-gold); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.07); padding-top:1.75rem;
  display:flex; align-items:center; justify-content:space-between;
  font-size:.78rem; color:rgba(245,242,237,.32);
}
.footer-bottom a { color:rgba(245,242,237,.32); transition:color var(--t); }
.footer-bottom a:hover { color:var(--clr-gold); }

/* ===== UTILITIES ===== */
.text-gold   { color:var(--clr-gold); }
.text-center { text-align:center; }
.text-muted  { color:var(--clr-text-light); }
.italic      { font-style:italic; }
.mt-2 { margin-top:1rem; }
.mt-3 { margin-top:1.5rem; }
.mt-4 { margin-top:2rem; }
.mb-2 { margin-bottom:1rem; }
.mb-3 { margin-bottom:1.5rem; }
.mb-4 { margin-bottom:2rem; }
.info-box {
  background:var(--clr-light); border-left:3px solid var(--clr-gold);
  border-radius:0 var(--radius) var(--radius) 0; padding:1.25rem 1.5rem;
  font-size:.95rem; color:var(--clr-text-mid);
}

/* ===== RESPONSIVE ===== */
@media (max-width:960px) {
  .hero-nav-menu { display:none; }
  .hamburger { display:flex; }
  .header-nav { display:none; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .contact-grid { grid-template-columns:1fr; gap:2.5rem; }
  .project-card { grid-template-columns:1fr; gap:.75rem; }
  .project-year-col { display:none; }
  .two-col { grid-template-columns:1fr; gap:2.5rem; }
}
@media (max-width:640px) {
  :root { --gap:1.25rem; }
  .section { padding:3.5rem 0; }
  .hero-cta-row { flex-direction:column; align-items:center; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .footer-bottom { flex-direction:column; gap:.4rem; text-align:center; }
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .cta-buttons { flex-direction:column; align-items:center; }
  .btn { width:100%; max-width:280px; justify-content:center; }
}

/* ===== COOKIE / GDPR CONSENT BANNER ===== */
.cookie-banner {
  position:fixed; bottom:0; left:0; right:0; z-index:9000;
  background:rgba(13,13,13,.97); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(201,168,76,.18);
  padding:1rem 2rem; display:flex; align-items:center;
  gap:1.5rem; flex-wrap:wrap; justify-content:space-between;
  transform:translateY(110%); transition:transform .45s var(--ease);
}
.cookie-banner.show   { transform:translateY(0); }
.cookie-banner.hidden { transform:translateY(110%); }
.cookie-banner p { color:rgba(245,242,237,.72); font-size:.83rem; margin:0; flex:1; min-width:220px; line-height:1.6; }
.cookie-banner a { color:var(--clr-gold); text-decoration:underline; text-underline-offset:2px; }
.cookie-banner-actions { display:flex; gap:.6rem; flex-shrink:0; }
.cookie-btn {
  border-radius:4px; padding:.55rem 1.5rem; font-size:.8rem; font-weight:600;
  cursor:pointer; white-space:nowrap; font-family:var(--ff-body);
  letter-spacing:.04em; text-transform:uppercase; transition:var(--t);
}
.cookie-btn-accept { background:var(--clr-gold); color:var(--clr-dark); border:2px solid var(--clr-gold); }
.cookie-btn-accept:hover { background:transparent; color:var(--clr-gold); }
.cookie-btn-refuse { background:transparent; color:rgba(245,242,237,.7); border:2px solid rgba(245,242,237,.22); }
.cookie-btn-refuse:hover { color:var(--clr-light); border-color:rgba(245,242,237,.45); }

/* ===== PRIVACY PAGE ===== */
.privacy-content { max-width:740px; margin:0 auto; }
.privacy-content h2 { font-size:1.5rem; margin:2.5rem 0 .75rem; color:var(--clr-dark); }
.privacy-content h2:first-child { margin-top:0; }
.privacy-content p, .privacy-content li { color:var(--clr-text-mid); font-size:.95rem; line-height:1.8; }
.privacy-content ul { padding-left:1.5rem; list-style:disc; display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.privacy-content .last-updated { font-size:.82rem; color:var(--clr-text-light); margin-bottom:2rem; }

/* ===== INLINE ICON (small decorative SVG in text rows) ===== */
.ico { display:inline-block; vertical-align:middle; width:14px; height:14px; stroke:var(--clr-gold); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; margin-right:5px; flex-shrink:0; }