/* =========================
   DESIGN TOKENS  (old palette)
   ========================= */
:root{
  --primary-white:#FFFFFF;
  --beige:#F8F5F0;
  --charcoal:#2A2A2A;

  /* Champagne gold family */
  --champagne-gold:#C6A971;
  --gold-light:#D9C79A;
  --gold-dark:#9F8456;

  /* Text & borders */
  --text-primary:#2A2A2A;
  --text-secondary:#5A5A5A;
  --text-light:#8A8A8A;
  --border-light:#E8E8E8;

  --container-max:1200px;
  --section-padding:100px;

  --transition-smooth:all .4s cubic-bezier(.4,0,.2,1);
  --transition-fast:all .2s ease;
}

/* Dark Mode (old palette) */
body.theme-dark{
  --primary-white:#1A1A1A;
  --beige:#242424;
  --text-primary:#E8E8E8;
  --text-secondary:#B8B8B8;
  --text-light:#8A8A8A;
  --border-light:#3A3A3A;
  --charcoal:#E8E8E8;
}

/* =========================
   RESET & BASE
   ========================= */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;line-height:1.7;
  color:var(--text-primary);
  background-color:var(--primary-white);
  transition:background-color .3s ease,color .3s ease;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:700;line-height:1.2;margin-bottom:1rem;
}
a{text-decoration:none;color:inherit;transition:var(--transition-fast)}
button{font:inherit;cursor:pointer;border:none;background:none}
img{max-width:100%;height:auto;display:block}

/* A11y */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{
  position:absolute;top:-100px;left:0;z-index:10000;
  background:var(--charcoal);color:var(--primary-white);
  padding:1rem 2rem;transition:top .3s;
}
.skip-link:focus{top:0}
:focus-visible{outline:2px solid var(--champagne-gold);outline-offset:4px}

/* Layout */
.container{max-width:var(--container-max);margin:0 auto;padding:0 2rem}
.section{padding:var(--section-padding) 0}
.section-title{font-size:clamp(2rem,5vw,3rem);text-align:center;margin-bottom:1rem;color:var(--text-primary)}
.section-subtitle{font-size:clamp(1.25rem,3vw,1.75rem);text-align:center;margin-bottom:3rem;color:var(--champagne-gold);font-family:'Playfair Display',serif;font-style:italic}
.section-intro{max-width:800px;margin:0 auto 3rem;text-align:center;font-size:1.125rem;line-height:1.8;color:var(--text-secondary)}

/* Reveal */
.reveal{opacity:1;transform:none}
.js-ready .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.js-ready .reveal.revealed{opacity:1;transform:translateY(0)}
[data-aos].reveal{opacity:1;transform:none}

/* =========================
   NAVBAR
   ========================= */
.navbar{position:fixed;inset:0 auto auto 0;right:0;z-index:1000;background:var(--primary-white);padding:1.5rem 0;transition:background-color .3s ease,box-shadow .3s ease}
.navbar.scrolled{background:rgba(255,255,255,.95);box-shadow:0 2px 20px rgba(0,0,0,.05)}
body.theme-dark .navbar.scrolled{background:rgba(26,26,26,.95);box-shadow:0 2px 20px rgba(0,0,0,.3)}
.nav-container{display:flex;align-items:center;justify-content:space-between}

/* ✅ Brand: TEXT ONLY */
.nav-brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.brand-fallback{
  font-family:'Playfair Display',serif;
  font-size:1.25rem;
  letter-spacing:.12em;
  color:var(--charcoal);
  text-transform:uppercase;
  font-weight:700;
}
body.theme-dark .brand-fallback{ color:var(--text-primary); }

/* Links */
.nav-menu{display:flex;list-style:none;gap:2.5rem;margin-right:auto;margin-left:2rem}
.nav-menu a{color:var(--text-secondary);font-weight:500;font-size:.95rem;letter-spacing:.5px;position:relative}
.nav-menu a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--champagne-gold);transition:width .3s ease}
.nav-menu a:hover::after,.nav-menu a:focus::after{width:100%}

/* =========================
   HAMBURGER
   ========================= */
.nav-toggle{display:none;width:30px;height:24px;align-items:center;justify-content:center;cursor:pointer;z-index:1001}
.hamburger{position:relative;width:100%;height:2px;background:var(--charcoal);transition:var(--transition-fast)}
.hamburger::before,.hamburger::after{content:'';position:absolute;left:0;right:0;height:2px;background:var(--charcoal);transition:var(--transition-fast)}
.hamburger::before{top:-8px}
.hamburger::after{top:8px}
.nav-toggle[aria-expanded="true"] .hamburger{background:transparent}
.nav-toggle[aria-expanded="true"] .hamburger::before{transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .hamburger::after{transform:translateY(-8px) rotate(-45deg)}

/* Theme toggle */
.theme-toggle{width:40px;height:40px;border-radius:50%;background:var(--beige);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;transition:var(--transition-fast)}
.theme-toggle:hover{background:var(--champagne-gold);transform:scale(1.1)}
.theme-icon{position:absolute;transition:opacity .3s ease,transform .3s ease;color:var(--charcoal)}
.theme-icon.sun{opacity:1;transform:rotate(0deg)}
.theme-icon.moon{opacity:0;transform:rotate(180deg)}
body.theme-dark .theme-icon.sun{opacity:0;transform:rotate(-180deg)}
body.theme-dark .theme-icon.moon{opacity:1;transform:rotate(0deg)}

/* =========================
   HERO
   ========================= */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--beige) 0%,var(--primary-white) 100%);overflow:hidden;padding-top:80px}
#particles-container{position:absolute;inset:0;z-index:1}
.hero-content{position:relative;z-index:2;text-align:center;max-width:900px}
.hero-title{font-size:clamp(2.5rem,6vw,4.5rem);color:var(--charcoal);margin-bottom:1.5rem;line-height:1.1}
.hero-subtitle{font-size:clamp(1.125rem,2.5vw,1.5rem);color:var(--text-secondary);margin-bottom:3rem;font-weight:300}
.scroll-arrow{display:inline-flex;width:50px;height:50px;border-radius:50%;background:var(--champagne-gold);color:var(--primary-white);align-items:center;justify-content:center;transition:var(--transition-smooth);animation:bounce 2s infinite}
.scroll-arrow:hover{background:var(--gold-dark);transform:scale(1.1)}
@keyframes bounce{
  0%,20%,50%,80%,100%{transform:translateY(0)}
  40%{transform:translateY(-10px)}
  60%{transform:translateY(-5px)}
}

/* =========================
   CARDS / VALUES / SECTORS
   ========================= */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:3rem}
.card{background:var(--beige);padding:2.5rem;border-radius:12px;transition:var(--transition-smooth);border:1px solid var(--border-light);position:relative;overflow:hidden}
.card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.06)}
.card-icon{width:60px;height:60px;border-radius:50%;background:var(--champagne-gold);color:var(--primary-white);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:1.5rem}
.card-title{font-size:1.5rem;margin-bottom:1rem;color:var(--text-primary)}
.card-text{color:var(--text-secondary);line-height:1.8}

.ethos-section{background:var(--beige)}
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:3rem}
.value-card{background:var(--primary-white);padding:2rem;border-radius:12px;text-align:center;transition:var(--transition-smooth);border:1px solid var(--border-light);position:relative;overflow:hidden}
.value-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.06);border-color:var(--champagne-gold)}
.value-icon{width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,var(--champagne-gold),var(--gold-light));color:var(--primary-white);display:flex;align-items:center;justify-content:center;font-size:1.75rem;margin:0 auto 1.5rem;transition:var(--transition-smooth)}
.value-card:hover .value-icon{transform:scale(1.1) rotate(5deg)}
.value-title{font-size:1.25rem;margin-bottom:1rem;color:var(--text-primary)}
.value-text{color:var(--text-secondary);line-height:1.7;font-size:.95rem}

.sectors-section{background:var(--primary-white)}
.sectors-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-top:3rem}
.sector-card{background:var(--beige);padding:2.5rem;border-radius:12px;transition:var(--transition-smooth);border:1px solid var(--border-light);position:relative;overflow:hidden}
.sector-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.06)}
.sector-icon{width:70px;height:70px;border-radius:12px;background:var(--champagne-gold);color:var(--primary-white);display:flex;align-items:center;justify-content:center;font-size:1.75rem;margin-bottom:1.5rem;transition:var(--transition-smooth)}
.sector-card:hover .sector-icon{transform:scale(1.1);background:var(--gold-dark)}
.sector-title{font-size:1.5rem;margin-bottom:1rem;color:var(--text-primary)}
.sector-text{color:var(--text-secondary);line-height:1.8;font-size:.95rem}

/* =========================
   PORTFOLIO
   ========================= */
.portfolio-section{background:var(--beige)}
.portfolio-filters{display:flex;justify-content:center;gap:1rem;margin:3rem 0 2rem;flex-wrap:wrap}
.filter-btn{padding:.75rem 2rem;border-radius:30px;font-weight:500;font-size:.95rem;color:var(--text-secondary);background:var(--primary-white);border:2px solid var(--border-light);transition:var(--transition-fast);letter-spacing:.5px}
.filter-btn:hover,.filter-btn:focus{color:var(--primary-white);background:var(--champagne-gold);border-color:var(--champagne-gold);transform:translateY(-2px)}
.filter-btn.active{color:var(--primary-white);background:var(--gold-dark);border-color:var(--gold-dark)}
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem;margin-top:2rem;transition:height .4s ease}
.portfolio-tile{aspect-ratio:1;background:linear-gradient(135deg,var(--champagne-gold),var(--gold-dark));border-radius:12px;overflow:hidden;transition:var(--transition-smooth);position:relative;cursor:pointer}
.portfolio-tile.hidden{display:none}
.portfolio-tile:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 40px rgba(0,0,0,.12)}
.tile-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;background:rgba(0,0,0,.08);transition:var(--transition-smooth);z-index:2}
.portfolio-tile:hover .tile-content{background:rgba(0,0,0,.14)}
.tile-title{font-size:2rem;color:var(--primary-white);margin-bottom:.5rem;text-shadow:0 2px 10px rgba(0,0,0,.18)}
.tile-category{font-size:.875rem;color:rgba(255,255,255,.92);text-transform:uppercase;letter-spacing:1px;font-weight:500}

/* Logos inside tiles */
.tile-link { text-decoration:none; }
.tile-logo{
  display:block;
  width:min(220px,70%);
  height:auto;
  margin:0 auto 1rem;
  background:transparent;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

/* =========================
   FOOTER
   ========================= */
.footer{background:var(--charcoal);color:var(--primary-white);padding:2rem 0;text-align:center}
.footer p{color:rgba(255,255,255,.8);font-size:.95rem}
body.theme-dark .footer{background:var(--beige);color:var(--text-primary)}
body.theme-dark .footer p{color:var(--text-secondary)}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width:768px){
  .nav-menu{
    position:fixed;top:0;right:-100%;width:70%;height:100vh;background:var(--primary-white);
    flex-direction:column;align-items:center;justify-content:center;gap:2rem;margin:0;transition:right .3s ease;box-shadow:-5px 0 20px rgba(0,0,0,.1)
  }
  .nav-menu.active{right:0}
  .nav-toggle{display:flex}
  .section{padding:60px 0}
  .hero{min-height:80vh}
  .cards-grid,.values-grid,.sectors-grid{grid-template-columns:1fr}
  .portfolio-grid{grid-template-columns:1fr}
  body.theme-dark .nav-menu{background:var(--beige)}
}
@media (max-width:480px){
  .hero-title{font-size:2rem}
  .section-title{font-size:1.75rem}
  .container{padding:0 1rem}
}

/* =========================
   ACCENTS — optional CSS-only (kept but visually off)
   ========================= */
body.use-css-accents .portfolio-tile::after{
  content:"";
  position:absolute; top:10px; right:10px;
  width:46px; aspect-ratio:1; border-radius:10px;
  background:
    radial-gradient(closest-side, transparent 70%, rgba(198,169,113,.28) 72% 74%, transparent 76%),
    conic-gradient(from 0deg, rgba(198,169,113,.45) 0 40%, transparent 40% 100%);
  filter: blur(.2px);
  opacity:.0; animation: accent-float 6s ease-in-out infinite; pointer-events: none;
}
body.use-css-accents .card::after{
  content:"";
  position:absolute; top:18px; right:18px;
  width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle, rgba(198,169,113,.9) 0 40%, rgba(198,169,113,0) 60%);
  box-shadow: 0 0 18px rgba(198,169,113,.45), 0 0 42px rgba(198,169,113,.25);
  opacity:0; animation: accent-float 7s ease-in-out infinite; pointer-events: none;
}
@keyframes accent-float {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-6px) rotate(6deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* =========================
   tsParticles CORNER OVERLAY
   ========================= */
.tsp-corner {
  position:absolute; top:10px; right:10px;
  width:var(--tsp-size,56px); height:var(--tsp-size,56px);
  pointer-events:none; z-index:6; mix-blend-mode:normal;
}
.tsp-corner canvas{
  display:block!important; background:transparent!important; border:0!important; box-shadow:none!important;
}
.card, .value-card, .sector-card, .portfolio-tile { position:relative; overflow:hidden; border-radius:12px; }