/* =============================================
   LUXBUILD — CHARCOAL × CRIMSON (About Page)
================================================ */
:root{
  --jet:#000000;            /* jet black */
  --charcoal:#0e1012;       /* deep charcoal */
  --grey-800:#131417;
  --grey-700:#16181c;
  --mist:#eceff3;           /* light text */
  --white:#ffffff;
  --crimson:#d3122c;        /* crimson red */
  --crimson-700:#a80e23;
  --glass:rgba(255,255,255,.06);
  --glass-2:rgba(255,255,255,.1);
  --blur:14px;
  --radius:22px;
  --shadow:0 18px 60px rgba(0,0,0,.45);
  --max:1200px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--mist);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 800px at 12% -10%, #121316 0%, transparent 55%),
    radial-gradient(1200px 800px at 88% 10%, #14161a 0%, transparent 55%),
    linear-gradient(180deg, #0a0b0d, var(--charcoal));
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin-inline:auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;font-weight:700;background:linear-gradient(180deg,var(--crimson),var(--crimson-700));box-shadow:0 10px 30px rgba(211,18,44,.35);transition:.2s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 50px rgba(211,18,44,.45)}
.muted{color:#a8b2c3}

/* NAV */
.nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(10px);background:linear-gradient(180deg,rgba(14,16,20,.85),rgba(14,16,20,.65));border-bottom:1px solid rgba(255,255,255,.06)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.6px}

.menu{display:flex;align-items:center;gap:18px}
.menu a{padding:10px 12px;border-radius:12px;opacity:.9;transition:.2s var(--ease)}
.menu a:hover{background:var(--glass);opacity:1}
.lang{display:flex;align-items:center;gap:8px}
.lang button{background:var(--glass);color:var(--mist);border:1px solid rgba(255,255,255,.08);padding:8px 10px;border-radius:12px;font-weight:700;cursor:pointer;opacity:.85;transition:.2s var(--ease)}
.lang button.active{background:var(--crimson);border-color:transparent;opacity:1}
.hamb{display:none;width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:var(--glass);align-items:center;justify-content:center;cursor:pointer}
.hamb span{width:20px;height:2px;background:#fff;position:relative;display:block;transition:.3s var(--ease)}
.hamb span::before,.hamb span::after{content:"";position:absolute;left:0;width:100%;height:2px;background:#fff;transition:.3s var(--ease)}
.hamb span::before{top:-6px}.hamb span::after{top:6px}
.hamb.active span{background:transparent}.hamb.active span::before{transform:translateY(6px) rotate(45deg)}.hamb.active span::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:980px){.hamb{display:flex}.menu{position:fixed;inset:72px 16px auto 16px;flex-direction:column;padding:16px;border-radius:16px;background:rgba(14,16,20,.96);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);display:none}.menu.open{display:flex}}

/* HERO */
.hero{position:relative;padding:108px 0 72px;overflow:hidden}
.grid-bg{position:absolute;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:64px 64px,64px 64px;mask:radial-gradient(1000px 600px at 50% 0%,#000 40%,transparent 85%)}
.parallax{position:absolute;inset:0;overflow:hidden}
.p-layer{position:absolute;inset:auto;filter:blur(18px);opacity:.35;border-radius:40%}
.p1{top:-8%;left:-8%;width:420px;height:420px;background:radial-gradient(circle,var(--crimson) 0%,transparent 60%)}
.p2{bottom:-10%;right:-6%;width:520px;height:520px;background:radial-gradient(circle,var(--crimson) 0%,transparent 60%)}
.hero-inner{display:grid;gap:28px;align-items:center;grid-template-columns:1.1fr .9fr}
@media(max-width:980px){.hero-inner{grid-template-columns:1fr}}
.badge{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);font-weight:700;color:#cfd6e3}
.badge .dot{width:8px;height:8px;border-radius:999px;background:var(--crimson);box-shadow:0 0 0 6px rgba(211,18,44,.18)}
.title{font-size:clamp(36px,5.6vw,72px);line-height:1.02;letter-spacing:.2px;margin:8px 0 12px;font-weight:800}
.title .accent{background:linear-gradient(90deg, var(--mist), #fff 55%, var(--crimson));-webkit-background-clip:text;background-clip:text;color:transparent}
.subtitle{font-size:clamp(15px,2vw,19px);color:#aab3c4;max-width:660px}
.hero-panel{border-radius:var(--radius);padding:24px;background:var(--glass);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);display:grid;gap:14px}
.hero-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:600px){.hero-kpi{grid-template-columns:1fr}}
.kpi{padding:16px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08)}
.kpi b{font-size:28px;display:block}
.kpi span{color:#9aa4b7;font-weight:600}

/* Blurred crimson circles */
.blurs{position:absolute;inset:0;overflow:hidden;z-index:0}
.blur-circle{position:absolute;border-radius:50%;filter:blur(120px);opacity:.28}
.blur-circle.red.a{width:500px;height:500px;background:radial-gradient(circle,rgba(211,18,44,.55),transparent 70%);top:-80px;left:-120px}
.blur-circle.red.b{width:460px;height:460px;background:radial-gradient(circle,rgba(211,18,44,.45),transparent 70%);bottom:-60px;left:38%}
.blur-circle.dark.c{width:620px;height:620px;background:radial-gradient(circle,rgba(0,0,0,.85),transparent 70%);bottom:-150px;right:-200px}

/* SUBNAV */
.subnav{position:sticky;top:72px;z-index:50;background:rgba(14,16,20,.85);backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.subnav .container{display:flex;gap:10px;overflow:auto;padding:10px 24px}
.chip{padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);white-space:nowrap;font-weight:700;opacity:.9;transition:.2s}
.chip.active,.chip:hover{background:var(--crimson);border-color:transparent;opacity:1}

/* SECTIONS */
section{padding:80px 0;position:relative}
.section-title{font-size:clamp(26px,3.6vw,40px);margin:0 0 12px;font-weight:800;background:linear-gradient(90deg,#fff, #e7e7e7 40%, #d2d2d2);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-desc{color:#aab3c4;max-width:760px}

/* ABOUT */
.about-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
@media(max-width:980px){.about-wrap{grid-template-columns:1fr}}
.card{background:var(--glass);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.check{display:flex;gap:12px;align-items:flex-start}
.check i{width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;background:linear-gradient(180deg,var(--crimson),var(--crimson-700));box-shadow:0 6px 18px rgba(211,18,44,.35)}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px}
@media(max-width:900px){.values{grid-template-columns:1fr}}
.value{padding:18px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}

/* WHY */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:980px){.why-grid{grid-template-columns:1fr}}
.why{padding:22px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.why .ico{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;color:#fff;background:linear-gradient(180deg, var(--glass), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.10)}
.why h4{margin:0}
.why p{grid-column:1 / -1;margin:.25rem 0 0}

/* METHOD */
.method{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:step}
@media(max-width:980px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding:24px;border-radius:18px;background:var(--glass);border:1px solid rgba(255,255,255,.08)}
.step::before{counter-increment:step;content:counters(step,"")".";position:absolute;top:16px;right:16px;font-weight:800;opacity:.4}
.rail{height:6px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin-top:14px}
.rail .progress{height:100%;width:0;background:linear-gradient(90deg,var(--crimson),#ff4d5e);transition:width .8s var(--ease)}

/* STORY — TIMELINE */
.timeline{position:relative}
.timeline::before{content:"";position:absolute;left:calc(50% - 1px);top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--crimson),transparent)}
.t-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
@media(max-width:900px){.timeline::before{left:18px}.t-grid{grid-template-columns:1fr;gap:18px}}
.t-item{position:relative}
.t-card{padding:22px;border-radius:16px;background:var(--glass);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow)}
.t-dot{position:absolute;top:10px;left:calc(50% - 6px);width:12px;height:12px;border-radius:50%;background:var(--crimson);box-shadow:0 0 0 8px rgba(211,18,44,.18)}
@media(max-width:900px){.t-dot{left:-6px}}

/* MARQUEE */
.marquee{overflow:hidden;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg, rgba(211,18,44,.05), rgba(255,255,255,.02))}
.marquee-track{display:flex;gap:48px;align-items:center;animation:scroll 22s linear infinite;padding:16px 0;opacity:.9}
.badge-pill{padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);font-weight:600;white-space:nowrap}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* LEADERSHIP */
.leaders{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:980px){.leaders{grid-template-columns:1fr}}
.leader{padding:22px;border-radius:18px;background:var(--glass);border:1px solid rgba(255,255,255,.08);transform-style:preserve-3d;transition:transform .3s var(--ease)}
.leader:hover{transform:translateY(-4px)}
.leader h4{margin:.2rem 0 0}
.leader small{color:#9aa4b7}

/* STATS */
.stats{background:radial-gradient(800px 400px at 15% 0%,rgba(211,18,44,.12),transparent 60%),radial-gradient(1200px 600px at 85% 20%,rgba(211,18,44,.12),transparent 60%);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
.stat{padding:28px;border-radius:18px;background:var(--glass);border:1px solid rgba(255,255,255,.08);text-align:center}
.stat b{font-size:clamp(28px,5vw,44px);display:block;letter-spacing:.5px}
.stat span{color:#9aa4b7;font-weight:600}

/* CTA */
.cta{text-align:center}
.cta .card{display:grid;gap:16px;justify-items:center}

/* FOOTER */
footer{padding:40px 0 70px;color:#9aa4b7;text-align:center}
.footer-brand{font-weight:800;letter-spacing:.6px;color:#cfd6e3}

/* ULTRA LUX — micro interactions */
.grain{pointer-events:none;position:fixed;inset:0;z-index:1;opacity:.08;mix-blend:overlay;background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22240%22 viewBox=%220 0 240 240%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%222%22 stitchTiles=%22stitch%22/></filter><rect width=%22240%22 height=%22240%22 filter=%22url(%23n)%22 opacity=%220.55%22/></svg>'); background-size:240px 240px}
.glass-border{position:relative;background:var(--glass);border-radius:var(--radius);}
.glass-border::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from 140deg, rgba(255,255,255,.35), rgba(255,255,255,.04), rgba(255,255,255,.35));-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;}
.sheen{position:relative;overflow:hidden}
.sheen::after{content:"";position:absolute;inset:-100% -30%;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);transform:translateX(-60%);}
.sheen:hover::after{transition:transform .9s var(--ease);transform:translateX(60%)}
.btn.magnetic{position:relative;will-change:transform}
.tilt{transform-style:preserve-3d;perspective:1000px;}
.tilt > *{transform:translateZ(18px)}
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);margin:26px 0}

/* SPINE */

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .reveal, .sheen::after, .btn, .leader, .why, .kpi, .stat { transition:none !important }
  #cursor{display:none}
  .marquee-track{animation:none}
}
.logo-img {
  height: 42px; /* adjust as needed */
  width: auto;
  display: block;
  filter: brightness(1.1);
  transition: transform .3s ease, filter .3s ease;
}
.logo-img:hover {
  transform: scale(1.05);
  filter: brightness(1.3);
}

/* Page wipe overlay */
.page-wipe{ position:fixed; inset:0; background:linear-gradient(135deg,var(--crimson),var(--crimson-700)); transform: translateX(-110%); z-index:1900; pointer-events:none }

/* Footer (from index) */
footer{ background:#151821; color:#cfd3db; border-top:1px solid rgba(255,255,255,.08); margin-top:60px; padding:0; text-align:left; }
.footer-topline{ height:3px; background: var(--crimson); width:100%; }
.footer-grid{ display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap:22px; padding: 40px 0; }
.stamp{ display:flex; align-items:center; gap:14px; }
.stamp .medal{ width:46px; height:46px; border-radius: 14px; background: linear-gradient(135deg, #22262e, #2c313b); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); position:relative; }
.stamp .medal:after{ content:""; position:absolute; inset:7px; border-radius: 10px; background: conic-gradient(from 45deg, var(--crimson), var(--crimson-700), var(--crimson)); opacity:.4 }
.f-links a{ display:block; color:inherit; text-decoration:none; padding:6px 0; opacity:.9 }
.map{ border-radius: 14px; overflow:hidden; box-shadow: var(--shadow); height: 220px; border:1px solid rgba(255,255,255,.08) }
.contact-info { font-size:14px; line-height:1.7; }
.contact-info strong { display:block; margin-bottom:6px; text-transform:uppercase; letter-spacing:.06em; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); text-align:center; padding:12px 0; font-size:12px; color:#9ca2ad; position:relative; overflow:hidden; }
.footer-bottom .sweep{ position:absolute; bottom:0; left:-100%; width:100%; height:2px; background: var(--crimson); animation: underlineSweep 6s linear infinite; }
@keyframes underlineSweep { 0%{ transform: translateX(0) } 100%{ transform: translateX(200%) } }

@media (max-width:768px){
  .container.footer-grid{ max-width:100%; padding: 24px 16px 96px; }
  .footer-grid{ grid-template-columns: 1fr; gap:18px; }
  .f-links{ display:grid; grid-template-columns: 1fr 1fr; gap:8px 14px; }
  .map{ height: 160px; }
}

/* --- Index-style Nav + Drawer --- */
.nav { position:fixed; inset:24px 24px auto 24px; height:72px; z-index:90; display:flex; align-items:center; justify-content:center; border-radius:999px; backdrop-filter: blur(12px) saturate(120%); background: var(--glass); border:1px solid rgba(255,255,255,.18); box-shadow: var(--shadow); transition: background .4s var(--ease), border-color .4s var(--ease), transform .3s var(--ease); }
.nav.scrolled { background:#0a0c10; border-color: rgba(255,255,255,.06); transform: translateY(-4px); }
.nav-inner{ width:min(96%,1300px); display:flex; align-items:center; gap:22px; }
.logo{ display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit; padding:10px 16px; border-radius:999px; }
.brand { font-weight: 900; letter-spacing:.12em; font-size:14px; text-transform:uppercase; background: linear-gradient(180deg,#cfd2d8,#777e88); -webkit-background-clip:text; background-clip:text; color: transparent; text-shadow: 0 1px 0 rgba(255,255,255,.15); }
.spacer{ flex:1; }
.nav a.link{ position:relative; text-decoration:none; color:inherit; opacity:.9; }
.nav a.link:after{ content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px; background: var(--crimson); transform: scaleX(0); transform-origin:left; transition: transform .35s var(--ease); }
.nav a.link:hover:after{ transform: scaleX(1); }

/* Hamburger (mobile) */
.hamburger{ display:none; width:32px; height:32px; border-radius:0; border:0; background:transparent; cursor:pointer; align-items:center; justify-content:center; gap:5px; padding:0 }
.hamburger span{ display:block; width:18px; height:2px; background:#fff; border-radius:999px; transition:transform .25s var(--ease), opacity .25s var(--ease) }

/* Drawer */
.drawer{ position:fixed; inset:0 0 0 auto; width:min(84vw,380px); background:#0b0e14; color:#fff; transform:translateX(100%); transition:transform .35s var(--ease); z-index:250; border-left:1px solid rgba(255,255,255,.08); box-shadow: 0 30px 90px rgba(0,0,0,.6); display:flex; flex-direction:column }
.drawer.open{ transform:translateX(0) }
.drawer-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.08) }
.drawer-links{ display:flex; flex-direction:column; padding:14px 18px; gap:10px }
.drawer-links a{ color:#fff; text-decoration:none; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08) }
.drawer-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .25s var(--ease); z-index:200 }
.drawer-backdrop.show{ opacity:1; pointer-events:auto }

@media (max-width:980px){
  .nav-inner .link, .nav-inner .cta, .nav-inner .theme-toggle, .nav-inner .lang{ display:none }
  .hamburger{ display:flex; margin-left:8px }
}
:root{
  --charcoal-900:#0b0f16; --charcoal-800:#0a0d14; --ink:#fff; --steel:#8f96a3;
  --muted:#a1aabb; --crimson:#c8102e; --glass:rgba(255,255,255,.06);
  --e:cubic-bezier(.2,.7,.2,1); --radius:22px; --shadow:0 24px 70px rgba(0,0,0,.45);
}

#team-v2.lb-section{
  background:linear-gradient(180deg,var(--charcoal-900),var(--charcoal-800));
  color:var(--ink);
}
#team-v2 .lb-wrap{max-width:1100px;margin:0 auto;padding:72px 20px}
#team-v2 .head{text-align:center;margin-bottom:26px}
#team-v2 .title{font-weight:900;font-size:clamp(26px,4vw,40px);letter-spacing:.01em;margin:0}
#team-v2 .sub{color:var(--muted);margin:6px 0 0}

.teamv2-grid{
  display:grid; gap:22px; margin-top:22px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

.tcard{
  display:grid; grid-template-rows:auto 1fr; gap:14px;
  padding:16px; border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
  transition:transform .6s var(--e), box-shadow .6s var(--e), border-color .3s;
}
.tcard:hover{
  transform:translateY(-6px);
  border-color:rgba(200,16,46,.45);
  box-shadow:0 24px 80px rgba(200,16,46,.32);
}

/* Photo */
.photo{position:relative; overflow:hidden; border-radius:16px; aspect-ratio: 4/3;
  border:1px solid rgba(255,255,255,.12)}
.photo img{width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.05) brightness(.92);
  transform:scale(1.03); transition:transform .7s var(--e), filter .6s var(--e)}
.tcard:hover .photo img{transform:scale(1.08); filter:saturate(1.2) contrast(1.1) brightness(.98)}
.photo img.face-left{transform:scaleX(-1) scale(1.03)}
.tcard:hover .photo img.face-left{transform:scaleX(-1) scale(1.08)}
.photo img.bw{filter:grayscale(1) contrast(1.05) brightness(.95)}
.tcard:hover .photo img.bw{filter:grayscale(1) contrast(1.1) brightness(1)}
.photo .shine{position:absolute; inset:0; background:radial-gradient(60% 40% at 70% 20%, rgba(200,16,46,.25), transparent 60%); mix-blend-mode:screen; pointer-events:none}

/* Copy */
.name{font-weight:900;font-size:clamp(18px,2vw,22px);margin:2px 0 2px;letter-spacing:.01em}
.name::after{content:""; display:block; width:56px; height:2px; margin:8px 0 0; border-radius:2px; background:var(--crimson); transition:width .4s var(--e)}
.tcard:hover .name::after{width:84px}
.role{color:var(--muted); margin:0 0 8px}
.blurb{color:var(--steel); margin:0}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.chip{
  display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px;
  background:linear-gradient(180deg, rgba(200,16,46,.18), rgba(200,16,46,.10));
  border:1px solid rgba(200,16,46,.45);
  font-size:12px; letter-spacing:.02em;
}

/* Quote ribbon */
.ribbon{
  margin-top:26px; border-radius:16px; padding:12px 16px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  display:flex; justify-content:center;
}
.ribbon .rtext{margin:0; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:#fff}
/* =========================
   LUX THEME PRIMITIVES
   (safe to paste anywhere once)
========================= */
:root{
  --charcoal-900:#0b0f16;
  --charcoal-800:#0a0d14;
  --ink:#ffffff;
  --steel:#8f96a3;
  --muted:#a1aabb;
  --crimson:#c8102e;
  --glass:rgba(255,255,255,.06);
  --radius:22px;
  --shadow:0 24px 70px rgba(0,0,0,.45);
  --e:cubic-bezier(.2,.7,.2,1);
}

/* Generic wrappers (used across sections) */
.lb-section{
  position: relative;
  color: var(--ink);
  background: linear-gradient(180deg, var(--charcoal-900), var(--charcoal-800));
  overflow: hidden;
}
.lb-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px 20px;
}
.lb-section .title{
  font-weight: 900;
  font-size: clamp(26px, 4vw, 40px);
  letter-spacing: .01em;
  margin: 0 0 6px 0;
}
.lb-section .sub{
  color: var(--muted);
  margin: 6px 0 0 0;
}

/* =========================
   VALUES SECTION
   Markup reference:
   <section id="values" class="lb-section"> ... </section>
========================= */
#values .values-grid{
  display: grid;
  gap: 18px;
  margin-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
#values .value{
  padding: 18px 18px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  transition: transform .5s var(--e), box-shadow .5s var(--e), border-color .3s var(--e);
  position: relative;
}
#values .value::after{
  /* subtle crimson underline that expands on hover */
  content: "";
  position: absolute;
  left: 18px;
  right: calc(100% - 96px);
  bottom: 14px;
  height: 2px;
  background: var(--crimson);
  border-radius: 2px;
  transition: right .4s var(--e);
  opacity: .8;
}
#values .value:hover{
  transform: translateY(-6px);
  border-color: rgba(200,16,46,.45);
  box-shadow: 0 24px 80px rgba(200,16,46,.32);
}
#values .value:hover::after{
  right: 18px; /* grows the underline */
}
#values h3{
  margin: 2px 0 6px 0;
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: .01em;
}
#values p{
  margin: 0;
  color: var(--steel);
  line-height: 1.6;
}

/* =========================
   MISSION SECTION
   Suggested markup:
   <section id="mission" class="lb-section">
     <div class="lb-wrap center">
       <h2 class="title">Our Mission</h2>
       <p class="sub">Short, human statement…</p>
     </div>
   </section>
========================= */
#mission{
  /* add a gentle crimson glow & faint grid */
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(200,16,46,.16), transparent 60%),
    linear-gradient(180deg, var(--charcoal-900), var(--charcoal-800));
}
#mission .lb-wrap.center{
  text-align: center;
  max-width: 900px;
}
#mission .title{
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}
#mission .title::after{
  /* elegant crimson underline */
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -2px;
  width: 84px;
  height: 3px;
  border-radius: 6px;
  background: var(--crimson);
  box-shadow: 0 6px 20px rgba(200,16,46,.42);
}
#mission .sub{
  margin-top: 14px;
  font-size: clamp(14px, 2.2vw, 18px);
  color: var(--muted);
  line-height: 1.75;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

/* Optional: subtle texture over mission */
#mission::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(80% 80% at 60% 60%, black, transparent 90%);
}

/* =========================
   SMALL DEVICES
========================= */
@media (max-width: 860px){
  .lb-wrap{ padding: 56px 18px; }
  #values .value{ padding: 16px; }
  #mission .title::after{ width: 64px; }
}

/* Hover motion accents */
.card, .why, .value, .step, .t-card, .stat, .ribbon{transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);}
.card:hover, .why:hover, .value:hover, .step:hover, .t-card:hover, .stat:hover, .ribbon:hover{transform:translateY(-4px); border-color:rgba(211,18,44,.35); box-shadow:0 20px 60px rgba(0,0,0,.45);}
.step:hover .rail .progress{width:100%;}
.why:hover .ico, .value:hover h4, .card:hover h3{color:#fff;}
.stat:hover b{color:#fff; text-shadow:0 0 22px rgba(211,18,44,.35);}
.chip{transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);}
.chip:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(211,18,44,.25);}
.btn:focus-visible, .chip:focus-visible, .why:focus-visible, .card:focus-visible, .step:focus-visible{outline:3px solid rgba(211,18,44,.45); outline-offset:3px;}

.check-icon{width:18px;height:18px;display:inline-block;position:relative;transform:rotate(45deg);background:linear-gradient(135deg,var(--crimson),var(--crimson-700));box-shadow:0 6px 18px rgba(211,18,44,.35);}
.check-icon::before{content:"";position:absolute;inset:2px;border:1px solid rgba(255,255,255,.35);}
.check-icon::after{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.8);}

.value-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10);color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.35);margin-bottom:10px;}
.value-ico svg{filter:drop-shadow(0 6px 18px rgba(211,18,44,.35));}

.value{position:relative;overflow:hidden;}
.value::before{content:"";position:absolute;inset:-30% -10%;background:radial-gradient(220px 140px at 80% 0%, rgba(211,18,44,.20), transparent 65%);opacity:.0;transition:opacity .5s var(--ease);}
.value:hover::before{opacity:.9;}
.value h4{transition:letter-spacing .4s var(--ease), transform .4s var(--ease);}
.value:hover h4{letter-spacing:.02em;transform:translateY(-2px);}
.value p{transition:color .4s var(--ease);}
.value:hover p{color:#cfd6e3;}


/* Refined WOW: metallic sweep + soft lift */
.value{position:relative; overflow:hidden;}
.value::before{
  content:"";
  position:absolute; inset:-40% -20% auto -20%;
  height:140%;
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
  transform:translateX(-120%);
  opacity:.0;
  transition:opacity .4s var(--ease);
  pointer-events:none;
}
.value:hover::before{
  opacity:.9;
  animation:sweep 1.4s var(--ease) forwards;
}
.value:hover{transform:translateY(-6px); box-shadow:0 22px 70px rgba(0,0,0,.45); border-color:rgba(211,18,44,.35);}
.value h4{transition:letter-spacing .35s var(--ease), transform .35s var(--ease);}
.value:hover h4{letter-spacing:.02em; transform:translateY(-2px);}
.value p{transition:color .35s var(--ease);}
.value:hover p{color:#d5dbe6;}
@keyframes sweep{to{transform:translateX(120%);}}

.value-ico{transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);}
.value-ico svg{transition:transform .6s var(--ease), filter .6s var(--ease);}
.value-ico::after{content:"";position:absolute;inset:-6px;border-radius:14px;opacity:0;transform:scale(.9);
  background:radial-gradient(70% 70% at 50% 50%, rgba(211,18,44,.35), transparent 70%);
  transition:opacity .45s var(--ease), transform .45s var(--ease);}
.value:hover .value-ico{transform:translateY(-6px) rotate(-4deg);box-shadow:0 18px 42px rgba(0,0,0,.45);border-color:rgba(211,18,44,.45);}
.value:hover .value-ico::after{opacity:1;transform:scale(1.05);}
.value:hover .value-ico svg{transform:rotate(12deg) scale(1.08);filter:drop-shadow(0 10px 24px rgba(211,18,44,.35));}

/* Swirl dance icon motion */
.value-ico{position:relative; overflow:visible;}
.value-ico::before{
  content:"";
  position:absolute; inset:-10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  opacity:0;
  transform:scale(.85) rotate(0deg);
  transition:opacity .3s var(--ease);
}
.value:hover .value-ico::before{
  opacity:.9;
  animation: swirlRing 1.3s var(--ease) both;
}
.value:hover .value-ico svg{
  animation: swirlIcon 1.1s var(--ease) both;
}
@keyframes swirlRing{
  0%{transform:scale(.85) rotate(0deg)}
  60%{transform:scale(1.08) rotate(140deg)}
  100%{transform:scale(1.02) rotate(220deg)}
}
@keyframes swirlIcon{
  0%{transform:rotate(0deg) scale(1)}
  60%{transform:rotate(-22deg) scale(1.12)}
  100%{transform:rotate(0deg) scale(1.04)}
}

/* Why section: kinetic underline + spotlight */
#why{position:relative; overflow:hidden;}
#why::before{
  content:"";
  position:absolute; inset:-20% -10% auto -10%;
  height:140%;
  background:radial-gradient(520px 280px at 15% 10%, rgba(211,18,44,.22), transparent 65%);
  opacity:.7;
  pointer-events:none;
}
#why .section-title{position:relative; display:inline-block;}
#why .section-title::after{
  content:"";
  position:absolute; left:0; bottom:-8px;
  width:76px; height:3px; border-radius:999px;
  background:linear-gradient(90deg,var(--crimson),rgba(255,255,255,.35));
  box-shadow:0 8px 22px rgba(211,18,44,.35);
  transform-origin:left;
  transform:scaleX(.3);
  transition:transform .6s var(--ease);
}
#why:hover .section-title::after{transform:scaleX(1)}
#why .section-desc{transition:color .4s var(--ease), transform .4s var(--ease);}
#why:hover .section-desc{color:#d3d9e4; transform:translateY(-2px)}

/* Why cards: neon edge sweep + tilt pulse */
.why{position:relative; overflow:hidden;}
.why::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius:18px;
  background:linear-gradient(120deg, rgba(211,18,44,0), rgba(211,18,44,.35), rgba(255,255,255,.12), rgba(211,18,44,0));
  opacity:0;
  filter:blur(10px);
  transform:translateX(-120%);
  transition:opacity .4s var(--ease);
  pointer-events:none;
}
.why:hover::after{
  opacity:1;
  animation:whySweep 1.4s var(--ease) forwards;
}
.why:hover{transform:translateY(-6px) rotate(-.2deg); box-shadow:0 24px 70px rgba(0,0,0,.5);}
.why .ico{transition:transform .45s var(--ease), box-shadow .45s var(--ease);}
.why:hover .ico{transform:rotate(8deg) scale(1.06); box-shadow:0 12px 28px rgba(211,18,44,.35);}
@keyframes whySweep{to{transform:translateX(120%)}}


/* Mission: cinematic spotlight + split lines */
#mission{position:relative; overflow:hidden;}
#mission::before{
  content:"";
  position:absolute; inset:-10% -10% auto -10%; height:140%;
  background:
    radial-gradient(520px 260px at 30% 10%, rgba(211,18,44,.25), transparent 65%),
    radial-gradient(380px 240px at 80% 0%, rgba(255,255,255,.08), transparent 60%);
  opacity:.9; pointer-events:none;
}
#mission .lb-wrap.center{
  position:relative;
  padding:72px 24px;
}
#mission .title{
  letter-spacing:.04em;
  text-transform:uppercase;
}
#mission .sub{
  position:relative;
  font-size:clamp(16px,2.2vw,20px);
  line-height:1.75;
  max-width:820px;
  margin:16px auto 0;
}
#mission .sub::before,
#mission .sub::after{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  width:180px; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}
#mission .sub::before{top:-16px}
#mission .sub::after{bottom:-18px}
#mission:hover .sub::after{width:260px; transition:width .6s var(--ease);}

/* Mission motion */
#mission .title{transition:letter-spacing .6s var(--ease), transform .6s var(--ease);}
#mission:hover .title{letter-spacing:.08em; transform:translateY(-2px);}
#mission .sub{transition:color .6s var(--ease), transform .6s var(--ease);}
#mission:hover .sub{color:#e3e8f2; transform:translateY(2px);}
#mission::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(420px 220px at 50% 0%, rgba(211,18,44,.18), transparent 70%); transition:opacity .6s var(--ease);} 
#mission:hover::after{opacity:1;}

/* Story timeline: glowing rail + card sweep */
.timeline{position:relative;}
.timeline::before{background:linear-gradient(180deg,var(--crimson),rgba(211,18,44,.1)); box-shadow:0 0 24px rgba(211,18,44,.35);}
.t-card{position:relative; overflow:hidden;}
.t-card::before{
  content:""; position:absolute; inset:-40% -20% auto -20%; height:140%;
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%);
  transform:translateX(-120%); opacity:.0; transition:opacity .4s var(--ease);
}
.t-item:hover .t-card::before{opacity:.9; animation:tSweep 1.2s var(--ease) forwards;}
.t-item:hover .t-card{transform:translateY(-6px); box-shadow:0 24px 70px rgba(0,0,0,.45); border-color:rgba(211,18,44,.35);}
.t-dot{transition:transform .4s var(--ease), box-shadow .4s var(--ease);} 
.t-item:hover .t-dot{transform:scale(1.2); box-shadow:0 0 0 10px rgba(211,18,44,.25), 0 0 20px rgba(211,18,44,.45);} 
@keyframes tSweep{to{transform:translateX(120%)}}

/* CTA: badge + glow transitions */
.cta .card{position:relative; overflow:hidden;}
.cta .card::before{
  content:""; position:absolute; inset:-30% -20% auto -20%; height:140%;
  background:radial-gradient(420px 220px at 50% 0%, rgba(211,18,44,.22), transparent 70%);
  opacity:.0; transition:opacity .6s var(--ease);
}
.cta .card:hover::before{opacity:1;}
.cta-badge{
  width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
  margin:0 auto 10px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  color:#fff;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.cta .card:hover .cta-badge{transform:translateY(-6px) rotate(-6deg); box-shadow:0 24px 60px rgba(211,18,44,.35); border-color:rgba(211,18,44,.35);} 
.cta .card:hover .section-title{letter-spacing:.02em; transform:translateY(-2px);} 
.cta .section-title{transition:letter-spacing .5s var(--ease), transform .5s var(--ease);} 
.cta .section-desc{transition:color .5s var(--ease), transform .5s var(--ease);} 
.cta .card:hover .section-desc{color:#d7dde8; transform:translateY(2px);} 

  35%{transform:skewY(-4deg) translateX(1px)}
  70%{transform:skewY(3deg) translateX(-1px)}
  100%{transform:skewY(0deg) translateX(0)}
}


/* CTA: Swiss flag only + wave on hover */
.cta-medallion{width:64px;height:64px;margin:0 auto 12px;display:grid;place-items:center;}
.cta-medallion .flag{
  position:relative; width:48px; height:48px; border-radius:10px;
  background:#d3122c; border:1px solid rgba(255,255,255,.22);
  display:grid; place-items:center;
  transform-origin:left center;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  box-shadow:0 14px 36px rgba(0,0,0,.35);
}
.cta-medallion .flag i{
  width:20px; height:20px; position:relative; display:block;
}
.cta-medallion .flag i::before,
.cta-medallion .flag i::after{
  content:""; position:absolute; background:#fff; border-radius:2px;
}
.cta-medallion .flag i::before{width:6px; height:20px; left:7px; top:0;}
.cta-medallion .flag i::after{width:20px; height:6px; left:0; top:7px;}
.cta .card:hover .cta-medallion .flag{animation:flagWave .9s ease-in-out both;}
@keyframes flagWave{
  0%{transform:skewY(0deg) translateX(0)}
  35%{transform:skewY(-4deg) translateX(1px)}
  70%{transform:skewY(3deg) translateX(-1px)}
  100%{transform:skewY(0deg) translateX(0)}
}

.stat{position:relative; overflow:hidden;}
.stat:hover .stat:hover::after{opacity:.9; animation:statSweep 1.2s var(--ease) forwards;}
@keyframes statSweep{to{transform:translateX(120%)}}

/* Stats: glow sweep + lift */
.stat{position:relative; overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);}
.stat:hover{transform:translateY(-6px); box-shadow:0 24px 70px rgba(0,0,0,.45); border-color:rgba(211,18,44,.35);}
.stat::after{content:""; position:absolute; inset:-40% -20% auto -20%; height:140%;
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%);
  transform:translateX(-120%); opacity:.0; transition:opacity .4s var(--ease);}
.stat:hover::after{opacity:.9; animation:statSweep 1.2s var(--ease) forwards;}
@keyframes statSweep{to{transform:translateX(120%)}}