:root{
  --bg:#0b0f1a;--bg2:#0f172a;--card:rgba(255,255,255,.07);
  --b:rgba(255,255,255,.14);--t:rgba(255,255,255,.92);--m:rgba(255,255,255,.72);
  --a:#e03a3c;--a2:#ff6b6b;--ok:#22c55e;
  --w:1180px;--r:22px;--shadow:0 16px 40px rgba(0,0,0,.40);
  --h1:clamp(2.2rem,4.6vw,3.5rem);--h2:clamp(1.6rem,3.3vw,2.2rem);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{
  margin:0;line-height:1.55;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--t);
  background:
    radial-gradient(1100px 700px at 15% 10%, rgba(224,58,60,.20), transparent 58%),
    radial-gradient(1000px 700px at 85% 0%, rgba(255,107,107,.14), transparent 55%),
    radial-gradient(900px 600px at 50% 110%, rgba(59,130,246,.10), transparent 55%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
.container{width:min(var(--w),calc(100% - 42px));margin:0 auto}
.icon{width:18px;height:18px}
.skip{position:absolute;left:-9999px;top:8px;background:#fff;color:#111;padding:10px 12px;border-radius:10px}
.skip:focus{left:16px;z-index:9999}

/* preloader + toast */
.preloader{position:fixed;inset:0;display:grid;place-items:center;background:#060a12;z-index:9999;transition:.35s}
.preloader.hide{opacity:0;visibility:hidden}
.spinner{width:44px;height:44px;border-radius:999px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--a);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(18px);opacity:0;pointer-events:none;
  padding:12px 14px;border-radius:16px;background:rgba(10,14,22,.78);border:1px solid var(--b);box-shadow:0 10px 30px rgba(0,0,0,.35);
  font-weight:900;z-index:2000;transition:.2s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* topbar */
.topbar{padding:10px 0;color:rgba(255,255,255,.78);font-weight:750;font-size:13px}
.pills{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}

/* header + nav */
.header{position:sticky;top:0;z-index:1000;backdrop-filter:blur(12px);background:rgba(8,12,20,.55);border-bottom:1px solid rgba(255,255,255,.06)}
.header.scrolled{background:rgba(8,12,20,.72);border-bottom-color:rgba(255,255,255,.10)}
.header__inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:950}
.brand__dot{width:12px;height:12px;border-radius:999px;background:radial-gradient(circle at 30% 30%,var(--a2),var(--a));box-shadow:0 0 0 6px rgba(224,58,60,.15)}
.brand em{color:var(--a2);font-style:normal}

.nav{display:flex;align-items:center;gap:14px}
.nav__toggle{display:none;width:44px;height:44px;border-radius:14px;border:1px solid var(--b);background:rgba(255,255,255,.06);cursor:pointer}
.burger{width:18px;margin:auto;display:grid;gap:4px}
.burger span{height:2px;background:rgba(255,255,255,.86);border-radius:99px;display:block}
.nav__menu{display:flex;align-items:center;gap:6px}
.nav__link{padding:10px 12px;border-radius:14px;font-weight:850;color:rgba(255,255,255,.82)}
.nav__link:hover{background:rgba(255,255,255,.06)}
.nav__link.active{background:rgba(224,58,60,.18);color:rgba(255,255,255,.96)}

.dd{position:relative}
.dd>button{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;border:0;background:transparent;font-weight:850;color:rgba(255,255,255,.82);cursor:pointer}
.dd>button:hover{background:rgba(255,255,255,.06)}
.dd__panel{position:absolute;top:calc(100% + 10px);right:0;min-width:240px;background:rgba(10,14,22,.95);border:1px solid rgba(255,255,255,.12);
  border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.35);padding:10px;display:none}
.dd.open .dd__panel{display:block}
.dd__item{display:flex;justify-content:space-between;align-items:center;padding:10px 10px;border-radius:12px;font-weight:800;color:rgba(255,255,255,.86)}
.dd__item:hover{background:rgba(255,255,255,.06)}
.dd__deep{position:relative}
.dd__deep>button{width:100%;display:flex;justify-content:space-between;align-items:center;padding:10px 10px;border-radius:12px;border:0;background:transparent;color:rgba(255,255,255,.86);font-weight:850;cursor:pointer}
.dd__deep>button:hover{background:rgba(255,255,255,.06)}
.dd__panel2{position:absolute;top:0;left:calc(100% + 10px);min-width:220px;background:rgba(10,14,22,.95);border:1px solid rgba(255,255,255,.12);
  border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.35);padding:10px;display:none}
.dd__deep.open .dd__panel2{display:block}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:16px;border:1px solid var(--b);
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.92);font-weight:900;cursor:pointer;transition:.12s}
.btn:hover{background:rgba(255,255,255,.09);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--accent{background:linear-gradient(180deg,rgba(224,58,60,.95),rgba(224,58,60,.80));border-color:rgba(224,58,60,.45)}
.btn--accent:hover{background:linear-gradient(180deg,rgba(255,107,107,.95),rgba(224,58,60,.80))}
.btn--ghost{background:transparent}
.btn--sm{padding:10px 12px;border-radius:14px}

/* typography + sections */
.section{padding:72px 0}.section--tight{padding:58px 0}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.kicker{display:inline-flex;align-items:center;gap:10px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.82);font-weight:900;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
h1{font-size:var(--h1);margin:14px 0 12px;line-height:1.02;letter-spacing:-.02em}
h2{font-size:var(--h2);margin:0;line-height:1.12;letter-spacing:-.02em}
h3{font-size:1.25rem;margin:0}
p{margin:0;color:var(--m);font-weight:750}
.lead{font-size:1.05rem;color:rgba(255,255,255,.78);font-weight:760}

/* layouts */
.hero{padding:64px 0 26px}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.hero__media{border-radius:var(--r);overflow:hidden;border:1px solid var(--b);background:rgba(255,255,255,.06);box-shadow:var(--shadow);position:relative}
.hero__badge{position:absolute;left:16px;bottom:16px;background:rgba(10,14,22,.75);border:1px solid rgba(255,255,255,.16);padding:10px 12px;border-radius:16px;font-weight:900;display:flex;gap:10px;align-items:center}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center}
.card{background:var(--card);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);box-shadow:0 10px 24px rgba(0,0,0,.22)}
.card.pad{padding:18px}.card.pad-lg{padding:22px}
.checklist{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.checklist li{display:flex;gap:10px;align-items:flex-start;color:rgba(255,255,255,.82);font-weight:760}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{padding:16px 14px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);text-align:center}
.stat b{display:block;font-size:1.65rem;letter-spacing:-.02em}
.stat span{display:block;color:rgba(255,255,255,.70);font-weight:850;font-size:13px}

.featured{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fcard{overflow:hidden}
.fcard img{aspect-ratio:16/11;object-fit:cover}
.fcard .body{padding:16px}
.fcard .meta{color:rgba(255,255,255,.72);font-weight:760;margin-top:6px}

.tabs{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px;align-items:start}
.tablist{display:grid;gap:10px}
.tabbtn{width:100%;text-align:left;padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);cursor:pointer;font-weight:950}
.tabbtn small{display:block;margin-top:4px;color:rgba(255,255,255,.66);font-weight:850}
.tabbtn[aria-selected="true"]{background:rgba(224,58,60,.18);border-color:rgba(224,58,60,.35)}
.tabpanel{display:none}.tabpanel.active{display:block}
.tabpanel img{border-radius:20px;border:1px solid rgba(255,255,255,.12);margin-top:12px}

.icongrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ibox{padding:18px 16px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
.ibox .i{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background:rgba(224,58,60,.15);border:1px solid rgba(224,58,60,.22);margin-bottom:10px}
.ibox h3{font-size:1.05rem;margin-bottom:6px}
.ibox p{font-weight:740;color:rgba(255,255,255,.72)}

.slider{position:relative}
.slides{display:flex;gap:14px;overflow:hidden}
.slide{min-width:100%}
.tcard{padding:18px;display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:center}
.avatar{width:96px;height:96px;border-radius:999px;overflow:hidden;border:1px solid var(--b);background:rgba(255,255,255,.08)}
.quote{color:rgba(255,255,255,.82);font-weight:760}
.person{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-top:10px}
.person b{font-weight:950}
.person span{color:rgba(255,255,255,.66);font-weight:850;font-size:13px}
.dots{display:flex;gap:8px;justify-content:center;margin-top:14px}
.dot{width:10px;height:10px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.10);cursor:pointer}
.dot.active{background:rgba(224,58,60,.85);border-color:rgba(224,58,60,.5)}
.arrows{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.arrowbtn{pointer-events:auto;width:44px;height:44px;border-radius:16px;border:1px solid var(--b);background:rgba(10,14,22,.50);backdrop-filter:blur(10px);cursor:pointer;display:grid;place-items:center}

.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.fbtn{padding:9px 12px;border-radius:999px;border:1px solid var(--b);background:rgba(255,255,255,.06);font-weight:900;cursor:pointer}
.fbtn.active{background:rgba(224,58,60,.18);border-color:rgba(224,58,60,.35)}
.portfolio{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pitem{position:relative;overflow:hidden;border-radius:22px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06)}
.pitem img{aspect-ratio:4/3;object-fit:cover;transition:transform .35s ease}
.pitem:hover img{transform:scale(1.05)}
.pcap{position:absolute;left:10px;right:10px;bottom:10px;padding:12px;border-radius:18px;background:rgba(10,14,22,.70);border:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;align-items:center;gap:10px}
.pcap b{font-weight:950}
.pcap small{display:block;color:rgba(255,255,255,.70);font-weight:850}
.actions{display:flex;gap:8px}
.mini{width:38px;height:38px;border-radius:14px;border:1px solid var(--b);background:rgba(255,255,255,.06);display:grid;place-items:center;cursor:pointer}
.mini:hover{background:rgba(255,255,255,.10)}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tmember{overflow:hidden;position:relative}
.tmember img{aspect-ratio:1/1;object-fit:cover}
.tmember .info{padding:16px}
.tmember b{font-weight:950;display:block}
.tmember span{color:rgba(255,255,255,.70);font-weight:850;font-size:13px}
.tmember .social{position:absolute;inset:auto 14px 14px 14px;display:flex;gap:10px;opacity:0;transform:translateY(10px);transition:.25s}
.tmember:hover .social{opacity:1;transform:translateY(0)}
.sicon{width:40px;height:40px;border-radius:16px;border:1px solid var(--b);background:rgba(10,14,22,.55);display:grid;place-items:center}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cinfo{display:grid;gap:14px}
.crow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.infobox{padding:18px}
.infobox b{font-weight:950}
.infobox p{margin-top:6px;color:rgba(255,255,255,.72)}
.form{padding:18px}
.field{display:grid;gap:6px;margin-bottom:12px}
.field label{font-weight:900;font-size:13px;color:rgba(255,255,255,.84)}
.field input,.field textarea{padding:12px;border-radius:16px;border:1px solid var(--b);background:rgba(255,255,255,.06);outline:none}
.field input:focus,.field textarea:focus{border-color:rgba(224,58,60,.45);box-shadow:0 0 0 4px rgba(224,58,60,.14)}
.field textarea{min-height:140px;resize:vertical}
.note{font-size:13px;color:rgba(255,255,255,.68);font-weight:760}

.footer{padding:56px 0 22px;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.12)}
.footer__grid{display:grid;grid-template-columns:1.2fr .8fr .9fr 1.1fr;gap:16px;margin-bottom:18px}
.footer h3{font-size:1.05rem;margin:0 0 10px}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.footer li a{color:rgba(255,255,255,.78);font-weight:850}
.footer li a:hover{text-decoration:underline;text-decoration-color:rgba(255,255,255,.25)}
.footer__bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:rgba(255,255,255,.66);font-weight:850;font-size:13px}

.backtotop{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border-radius:18px;border:1px solid var(--b);background:rgba(10,14,22,.50);
  backdrop-filter:blur(10px);cursor:pointer;display:grid;place-items:center;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;z-index:1500}
.backtotop.show{opacity:1;transform:translateY(0);pointer-events:auto}

/* modals */
.modal{position:fixed;inset:0;display:none;z-index:3000;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);padding:18px}
.modal.open{display:grid;place-items:center}
.modal__panel{width:min(980px,100%);background:rgba(8,12,20,.92);border:1px solid var(--b);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.modal__bar{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.10)}
.modal__close{width:42px;height:42px;border-radius:16px;border:1px solid var(--b);background:rgba(255,255,255,.06);cursor:pointer;display:grid;place-items:center}
.modal__body iframe{width:100%;height:min(60vh,520px);border:0;display:block}
.lightbox__grid{display:grid;grid-template-columns:1.2fr .8fr}
.lightbox__grid img{width:100%;height:100%;object-fit:cover}
.lightbox__side{padding:16px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(224,58,60,.16);border:1px solid rgba(224,58,60,.26);font-weight:900;font-size:12px}
.hidden{display:none!important}

/* reveal */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* responsive */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .featured{grid-template-columns:1fr}
  .tabs{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .icongrid{grid-template-columns:repeat(2,1fr)}
  .portfolio{grid-template-columns:repeat(2,1fr)}
  .team{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .crow{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .dd__panel{right:auto;left:0}
  .dd__panel2{left:auto;right:calc(100% + 10px)}
}
@media (max-width:720px){
  .nav__toggle{display:inline-grid}
  .nav__menu{
    position:fixed;inset:0 0 0 auto;width:min(360px,92vw);
    background:rgba(8,12,20,.96);border-left:1px solid rgba(255,255,255,.12);
    box-shadow:-20px 0 50px rgba(0,0,0,.35);padding:16px;
    display:flex;flex-direction:column;align-items:stretch;gap:6px;
    transform:translateX(105%);transition:transform .25s ease;z-index:1200
  }
  body.nav-open .nav__menu{transform:translateX(0)}
  body.nav-open{overflow:hidden}
  .dd__panel,.dd__panel2{position:static;display:none;margin-top:8px;min-width:auto}
  .dd.open .dd__panel{display:block}
  .dd__deep.open .dd__panel2{display:block}
  .arrows{display:none}
  .lightbox__grid{grid-template-columns:1fr}
}

/* ===== multipage additions ===== */
.pagehero{padding:52px 0 18px}
.breadcrumb{display:flex;gap:10px;flex-wrap:wrap;align-items:center;color:rgba(255,255,255,.72);font-weight:850;font-size:13px}
.breadcrumb a{color:rgba(255,255,255,.82)}
.breadcrumb a:hover{text-decoration:underline;text-decoration-color:rgba(255,255,255,.25)}
.breadcrumb .sep{opacity:.6}
.pagehero h1{font-size:clamp(2rem,4.1vw,3rem);margin:10px 0 10px}
.pagehero p{max-width:70ch}
.pagegrid{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:start}
.sidebar{position:sticky;top:92px}
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table td{padding:10px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.table td:first-child{border-radius:14px 0 0 14px;font-weight:950;color:rgba(255,255,255,.88);width:38%}
.table td:last-child{border-radius:0 14px 14px 0;color:rgba(255,255,255,.74);font-weight:820}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery a{border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06)}
.gallery img{aspect-ratio:4/3;object-fit:cover;transition:transform .25s ease}
.gallery a:hover img{transform:scale(1.04)}
.pager{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px}
.pager a{display:inline-flex;align-items:center;gap:10px}
@media (max-width:980px){.pagegrid{grid-template-columns:1fr}.sidebar{position:static}}

/* --- WOEF additions --- */
.pagehead{
  padding: 44px 0 10px;
}
.pagehead .kicker{margin-bottom:10px;}

.data-tools{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin: 12px 0 18px;
}
.data-tools input{
  flex:1;
  min-width: 220px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: inherit;
}

.data-table{
  width:100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.data-table th, .data-table td{
  padding: 12px 14px;
  vertical-align: top;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.data-table th{
  position: sticky;
  top: 0;
  background: rgba(15,23,42,.92);
  backdrop-filter: blur(6px);
  z-index: 1;
}
.data-table tr:hover td{background: rgba(255,255,255,.04);}

.chips{display:flex;flex-wrap:wrap;gap:6px;}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
}

.smallnote{opacity:.85;font-size: 13px;}
.hero__media img.round{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 46px rgba(0,0,0,.35);
}

.callout{
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.callout b{display:block;margin-bottom:6px;}