*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:'Poppins',Arial,sans-serif;background:#0F0E0C;color:#E8E3D8;line-height:1.75;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}
:root{
  --gold:#C9A83C;--gold-dim:rgba(201,168,60,.16);--gold-ln:rgba(201,168,60,.28);
  --gold-grad:linear-gradient(90deg,#839204,#b7a604);
  --gold-radial:radial-gradient(circle at center,#fff3b0,#E6BC54,#c9a83c);
  --s1:#181510;--s2:#1F1C15;
  --bd:rgba(201,168,60,.2);--bds:rgba(255,255,255,.09);
  --tb:#D8D1C3;--tm:#ffffff;--th:#F5F0E6;
  --nh:76px;
}
/* BG GRID */
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(201,168,60,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,60,.025) 1px,transparent 1px);background-size:64px 64px;pointer-events:none;z-index:0}
body::after{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 90% 50% at 50% -5%,rgba(201,168,60,.055) 0%,transparent 55%);pointer-events:none;z-index:0}
/* TYPE */
h1,h2,h3{font-family:'League Gothic',Arial Black,sans-serif;text-transform:uppercase;letter-spacing:.04em;line-height:1.1;color:var(--th)}
h1{font-size:clamp(2.8rem,7vw,5.5rem)}
h2{font-size:clamp(2rem,4.5vw,3.2rem)}
h3{font-size:clamp(1.4rem,2.5vw,2rem)}
h4{font-size:1rem;font-weight:700;color:var(--th);line-height:1.45}
p{font-size:1rem;color:var(--tb);line-height:1.9}
.gold{background:var(--gold-radial);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.label{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;background:var(--gold-radial);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;border:1px solid var(--gold-ln);padding:.28rem .9rem;border-radius:2px;margin-bottom:1rem}
/* LAYOUT */
.container{max-width:1320px;margin:0 auto;padding:0 2rem;position:relative;z-index:1;min-width:0}
.section{padding:5rem 0}
/* RULE */
.rule{width:52px;height:3px;background:var(--gold-radial);border-radius:2px;margin:.75rem 0 1.5rem}
.rule.c{margin-left:auto;margin-right:auto}
/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 2.2rem;border-radius:3px;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:all .22s ease;cursor:pointer}
.btn-g{background:var(--gold-grad);color:#fff;border:2px solid #8f9a04}
.btn-g:hover{background:linear-gradient(90deg,#9aaa05,#cdc004);border-color:#9aaa05;transform:translateY(-2px)}
.btn-o{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.45)}
.btn-o:hover{border-color:var(--gold);background:var(--gold-radial);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transform:translateY(-2px)}
/* SCROLL BAR */
#prog{position:fixed;top:0;left:0;height:3px;background:var(--gold-radial);z-index:2000;pointer-events:none;transition:width .1s linear}
/* NAVBAR */
#nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  height:var(--nh);
  background:rgba(15,14,12,.92);
  border-bottom:1px solid var(--bd);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  transition:background .3s
}

#nav.sc{
  background:rgba(15,14,12,.98);
  box-shadow:0 4px 40px rgba(0,0,0,.6)
}

.ni{
  max-width:1320px;
  margin:0 auto;
  padding:0 2rem;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between
}

/* LOGO WRAPPER */
.lw{
  display:flex;
  align-items:center;
  flex-direction:row;   /* ensures strict horizontal layout */
  gap:0.75rem;
  cursor:pointer;
}

/* logo */
.lw img{
  display:block;
  height:auto;
  max-height:64px; /* keeps logo aligned inside navbar */
  width:auto;
}

/* TEXT BLOCK */
.lt{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  justify-content:center;
}

.ln{
  font-family:'League Gothic',sans-serif;
  font-size:1.7rem;
  letter-spacing:.12em;
  color:#fff;
  text-transform:uppercase;
}

.ls{
  font-size:.48rem;
  letter-spacing:.2em;
  background:linear-gradient(90deg,#839204,#b8a605);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-transform:uppercase;
  font-weight:600;
  margin-top:2px;
}

/* NAV LINKS */
.nls{
  display:flex;
  align-items:center;
  gap:.1rem;
}

.nb{
  position:relative;
  padding:.55rem 1.1rem;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tb);
  border-radius:3px;
  transition:color .2s,background .2s;
}

.nb::after{
  content:'';
  position:absolute;
  bottom:4px;
  left:1.1rem;
  right:1.1rem;
  height:2px;
  background:var(--gold-radial);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .3s ease;
}

.nb:hover,
.nb.a{
  background:var(--gold-dim);
}

.nb:hover::after,
.nb.a::after{
  transform:scaleX(1);
  transform-origin:left;
}

.nc{
  margin-left:.75rem;
  padding:.55rem 1.4rem;
  background:var(--gold-grad);
  color:#fff;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  border-radius:3px;
  border:2px solid #8f9a04;
  transition:background .2s,transform .2s;
}

.nc:hover{
  background:linear-gradient(90deg,#9aaa05,#cdc004);
  transform:translateY(-1px);
}

/* MOBILE MENU */
.hm{
  display:none;
  flex-direction:column;
  gap:5px;
  padding:6px;
  cursor:pointer;
  min-width:44px;
  min-height:44px;
  align-items:center;
  justify-content:center;
}

.hm span{
  display:block;
  width:23px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:all .3s;
}

.hm.op span:nth-child(1){
  transform:rotate(45deg) translate(5px,5px);
}

.hm.op span:nth-child(2){
  opacity:0;
}

.hm.op span:nth-child(3){
  transform:rotate(-45deg) translate(5px,-5px);
}

/* MOBILE NAV */
.mobn{
  display:none;
  position:fixed;
  top:var(--nh);
  left:0;
  right:0;
  background:rgba(15,14,12,.99);
  border-bottom:1px solid var(--bd);
  padding:0.75rem 1rem 1.5rem;
  max-height:calc(100vh - var(--nh));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  z-index:999;
  flex-direction:column;
  gap:.1rem;
}

.mobn.op{
  display:flex;
}

.mobn .nb{
  width:100%;
  text-align:left;
  padding:.9rem .75rem;
  font-size:.92rem;
  border-bottom:1px solid var(--bds);
  color:var(--tb);
  min-height:48px;
}

.mobn .nc{
  margin:.75rem 0 0;
  width:100%;
  text-align:center;
  padding:.9rem;
}
/* PAGES */
.pg{display:none;}.pg.a{display:block}
/* HERO */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:var(--nh) 0 4rem}
.hsp{position:absolute;inset:0;background:radial-gradient(ellipse 65% 55% at 50% 35%,rgba(201,168,60,.085) 0%,transparent 65%);pointer-events:none}
.hcn{position:absolute;width:200px;height:200px;border:1px solid rgba(201,168,60,.13);pointer-events:none}
.hcn.tl{top:0;left:0;border-right:none;border-bottom:none}
.hcn.br{bottom:0;right:0;border-left:none;border-top:none}
.hb{position:relative;text-align:center;padding:2rem 1.5rem;max-width:860px}
.him {
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto 0.5rem;
  margin-top: -20px;
  display: block;
}
.hero h1{color:#fff;margin-bottom:.6rem}
.hero h1 em{font-style:normal;background:var(--gold-radial);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.htag{font-size:clamp(.65rem,1.6vw,.8rem);letter-spacing:.35em;text-transform:uppercase;margin-bottom:1.25rem;font-weight:500;background:linear-gradient(90deg,#839204,#b8a605);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ftag{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;margin:.4rem 0 .75rem;display:block;background:linear-gradient(90deg,#839204,#b8a605);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hdesc{max-width:660px;margin:0 auto 2.5rem;font-size:1.05rem;color:#CCC6B8;line-height:1.9}
.hbtns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
/* BRAND STRIP */
.bstrip{background:#fff;border-top:3px solid var(--gold);padding:.55rem 0;position:relative;z-index:1; margin-bottom: 10px;}
.bsi{max-width:1100px;margin:0 auto;padding:.25rem 1.5rem;display:flex;align-items:center;justify-content:space-around;flex-wrap:wrap;gap:.4rem .75rem}
.bch{display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;opacity:.88;transition:opacity .2s;padding:.25rem .3rem;border-radius:3px}
.bci{width:150px;height:150px;border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
/* SH */
.sh{margin-bottom:3.5rem}
.sh.c{text-align:center}
.sh.c p{margin:0 auto}
.sh.c .rule{margin-left:auto;margin-right:auto}
.sh p{max-width:600px;margin-top:.5rem}
/* ABOUT SNIPPET */
.asec{background:var(--s1)}
.agrid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.avis{position:relative;aspect-ratio:1;background:var(--s2);border:1px solid var(--bd);border-radius:8px;overflow:hidden}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}
.stat{border-left:2px solid var(--gold);padding-left:1rem}
.stn{font-family:'League Gothic',sans-serif;font-size:2.4rem;background:var(--gold-radial);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.stl{font-size:.78rem;color:var(--tb);letter-spacing:.04em;margin-top:.1rem}
/* HOME SERVICE CARDS */
.csec{background:#0F0E0C}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}
.sc{background:var(--s1);border:1px solid var(--bd);border-radius:8px;padding:2rem;cursor:pointer;position:relative;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.sc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--cc,var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .3s}
.sc:hover{transform:translateY(-5px);box-shadow:0 16px 50px rgba(0,0,0,.5);border-color:var(--cc,var(--gold))}
.sc:hover::before{transform:scaleX(1)}
.sc:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sco{width:50px;height:50px;border-radius:10px;margin-bottom:1.25rem;display:flex;align-items:center;justify-content:center;padding: 2px 3px;}
.sc h3{font-size:1.4rem;margin-bottom:.4rem;color:var(--cc,#E6BC54)}
.sc p{font-size:.93rem;color:var(--tb);line-height:1.8}
.slk{display:inline-flex;align-items:center;gap:.35rem;margin-top:1rem;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cc,var(--gold))}
/* MV */
.mvsec{background:var(--s1)}
.mvg{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.mvc{background:var(--s2);border:1px solid var(--bd);border-radius:8px;padding:2.5rem}
.mvc h3{background:var(--gold-radial);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem}
.mvc p{font-size:.95rem;color:var(--tb)}
/* VALUES */
.vsec{background:#0F0E0C}
.vg{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.5rem}
.vc{text-align:center;padding:2rem 1.25rem;background:var(--s1);border:1px solid var(--bd);border-radius:8px;transition:transform .2s}
.vc:hover{transform:translateY(-4px)}
.vi{width:54px;height:54px;background:var(--gold-dim);border-radius:50%;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center}
.vc h4{background:var(--gold-radial);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.4rem;font-size:.98rem}
.vc p{font-size:.85rem;color:var(--tb)}
/* CTA */
.cta{background:var(--s1);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);padding:5.5rem 0;text-align:center;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(201,168,60,.045) 0%,transparent 65%);pointer-events:none}
.cta .container{position:relative;z-index:1}
.cta h2{margin-bottom:.6rem}
.cta p{max-width:540px;margin:0 auto 2rem}
.ctab{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* PAGE HEADER */
.pgh{min-height:48vh;display:flex;flex-direction:column;justify-content:center;background:var(--s1);padding:8rem 0 0;border-bottom:none;position:relative;overflow:hidden}
.pgh::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 15% 50%,rgba(201,168,60,.06) 0%,transparent 60%)}
.pgh .container{text-align:left;padding-bottom:3rem;max-width:none;margin-left:0;padding-left:clamp(1rem,5vw,4rem);padding-right:clamp(1rem,5vw,4rem)}
.pgh h1,.pgh h2,.pgh h3,.pgh p,.pgh .label,.pgh .rule{text-align:left;margin-left:40px;margin-right:0}
.pgh h1 em{font-style:normal;background:var(--gold-radial);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* sbnav inside pgh — flush bottom, acts as the section border */
.pgh .sbnav{margin-top:0;border-top:1px solid var(--bd);border-bottom:3px solid var(--gold)}

/* TIMELINE */
.tlw{position:relative;padding:2rem 0}
.tlw::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(180deg,var(--gold),rgba(201,168,60,.08));transform:translateX(-50%)}
.mi{display:grid;grid-template-columns:1fr 60px 1fr;align-items:start;margin-bottom:2.5rem}
.mb{background:var(--s1);border:1px solid var(--bd);border-radius:8px;padding:1.5rem}
.mi.ml .mb{grid-column:1;text-align:right}
.mi.mr .mb{grid-column:3}
.mi.ml .mg{grid-column:3}
.mi.mr .mg{grid-column:1}
.md{grid-column:2;display:flex;flex-direction:column;align-items:center;gap:.4rem;padding-top:1.15rem}
.mdi{width:42px;height:42px;background:var(--s2);border:2px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center}
.mdy{font-family:'League Gothic',sans-serif;font-size:.95rem;background:var(--gold-radial);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.mb h4{background:var(--gold-radial);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem;font-size:.9rem}
.mb ul li{font-size:.82rem;color:var(--tb);padding:.2rem 0}
.mb ul li::before{content:'▸ ';background:var(--gold-radial);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* ABOUT BODY */
.abg{display:grid;grid-template-columns:3fr 2fr;gap:4rem;align-items:start}
.ib{background:var(--s1);border:1px solid var(--bd);border-radius:8px;padding:2rem}
.ib h4{background:var(--gold-radial);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase}
.ir{padding:.65rem 0;border-bottom:1px solid var(--bds);font-size:.85rem}
.ir:last-child{border-bottom:none}
.ir strong{display:block;color:#F2EDE0;margin-bottom:.1rem;font-size:.82rem}
.ir span{color:var(--tb)}
/* SERVICES */
.bci img{width:100%;height:100%;object-fit:contain;display:block}
/* CLIENTS LOGOS */
/* SECTION */
.clients-section {
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 1.5rem;
}

/* TITLE */
.clients-title {
  background: var(--gold-radial);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

/* SUBTITLE */
.clients-subtitle {
  font-size: 0.8rem;
  color: var(--tb);
  margin-bottom: 1.2rem;
  line-height: 1.5;
}

/* CAROUSEL VIEWPORT */
.clients-scroll {
  height: 580px;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

/* SCROLLING TRACK — contains logos × 2 for seamless loop */
.brand-logo-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  animation: logos-scroll-up 28s linear infinite;
  will-change: transform;
}

.brand-logo-track:hover {
  animation-play-state: paused;
}

@keyframes logos-scroll-up {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* LOGO ITEM */
.brand-logo-item {
  background-color: white;
  padding: 0.55rem 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.brand-logo-item:hover{transform:translateY(-4px) scale(1.06);box-shadow:0 6px 20px rgba(201,168,60,.22);border-color:var(--gold)}

/* IMAGE */
.brand-logo-item img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

/* TEXT (OPTIONAL BELOW LOGO) */
.brand-logo-item span {
  display: none; /* hides text for cleaner logo wall */
}


/* SECTION NAV BAR */
.sbnav{
  background:#ffffff;
  border-top:3px solid var(--gold);
  border-bottom:3px solid var(--gold);
  padding:.75rem 0;
  margin-bottom:2.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:1.5rem;
  position:relative;
  z-index:1;
  overflow-x:hidden;
}
/* Inner container to constrain sbnav button spread */
.sbnav-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:1.5rem;
  max-width:1320px;
  width:100%;
  padding:0 2rem; 
  margin:0 auto;
}
.sh .sbnav{background:transparent;border-top:none;margin-bottom:0;padding-top:0}
/* BASE BUTTON */
.sbnt{
  display:flex;
  flex-direction:column;
  width:130px; 
  height:130px; 
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.35rem .45rem;
  border-radius:4px;
  border:none;
  background:transparent;
  cursor:pointer;
  font-family:inherit;
  font-weight:800;
  font-size:.8rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:.88;
  transition:opacity .2s,transform .2s;
  position:relative;
}

/* VARIANT (inherits sbnt) */
.sbnt1{
  width:150px;
  height:150px;
}

/* HOVER / ACTIVE / FOCUS (apply to BOTH) */
.sbnt:hover,
.sbnt1:hover{
  opacity:1;
  transform:translateY(-3px);
}

.sbnt:focus-visible,
.sbnt1:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

.sbnt.active,
.sbnt1.active{
  opacity:1;
}

.sbnt.active::after,
.sbnt1.active::after{
  content:'';
  position:absolute;
  bottom:-4px;
  left:.6rem;
  right:.6rem;
  height:2px;
  background:currentColor;
  border-radius:2px;
}

/* ICON DEFAULT */
.sbnt-icon{
  width:110px;
  height:110px;
  border-radius:8px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ICON VARIANT */
.sbnt1 .sbnt-icon{
  width:130px;
  height:130px;
}

/* Images inside nav buttons — fill like homepage bci */
.sbnt img,.sbnt1 img{width:100%;height:100%;object-fit:contain;display:block}
/* DETAIL DRAWER */
.sdet{display:none;background:var(--s2);border:1px solid var(--bd);border-radius:12px;padding:1.5rem;margin:1rem auto;position:relative;overflow:hidden;box-sizing:border-box;width:100%;max-width:1200px;min-width:0;text-align:left}
.sdet.op{display:block;animation:sli .3s ease}
@keyframes sli{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
.detcl{position:absolute;top:1rem;right:1rem;width:36px;height:36px;border:1px solid var(--bd);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--tb);cursor:pointer;transition:color .2s,border-color .2s,background .2s;background:var(--s2);z-index:10;flex-shrink:0}
.detcl:hover{background:var(--gold-dim);border-color:var(--gold);color:#fff}
.detg{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;margin-top:2.25rem;width:100%;box-sizing:border-box;min-width:0}
.dc{background:var(--s1);border:1px solid var(--bds);border-radius:8px;padding:0;min-width:0;word-break:break-word;box-sizing:border-box;width:100%;overflow:hidden;max-width:100%}
.dc>h4{padding-top:1.25rem}
.dc h4{margin-bottom:.75rem;font-size:1.1rem;font-weight:700;line-height:1.4;padding:1.25rem 1.75rem 0}
.dc p{font-size:1rem;line-height:1.88;color:var(--tb);padding:0 1.75rem .75rem}
.cc{columns:3;gap:1.5rem;margin-top:.75rem;padding:0 1.75rem 1.75rem}
.ci{font-size:.95rem;color:var(--tb);padding:.3rem 0;line-height:1.72;break-inside:avoid;display:block}
.ci::before{content:'› ';background:var(--gold-radial);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* drawer */
.sdet h3{font-size:clamp(1.25rem,2.2vw,1.75rem);margin-bottom:.65rem;text-transform:none;letter-spacing:.02em}
.sdet>p{font-size:.97rem;line-height:1.88;color:var(--tb);max-width:100%}
/* FACEBOOK FEED (drawer embeds) */
.fb-feed{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--bds)}
.fb-feed-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem}
.fb-feed-icon{width:38px;height:38px;border-radius:8px;background:#1877F2;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fb-feed-title{font-family:'League Gothic',sans-serif;font-size:1.3rem;text-transform:uppercase;letter-spacing:.06em;color:var(--th)}
.fb-feed-sub{font-size:.78rem;color:var(--tm);margin-top:.1rem}
.fb-see-all{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.25rem;padding:.6rem 1.4rem;border:2px solid #1877F2;border-radius:3px;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#1877F2;transition:background .2s,color .2s}
.fb-see-all:hover{background:#1877F2;color:#fff}
/* CONTACT */
.cog{display:grid;grid-template-columns:1fr 1.3fr;gap:4rem;align-items:stretch}
.cin{display:flex;flex-direction:column}
.cin h3{background:var(--gold-radial);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:2rem}
.crow{display:flex;gap:1rem;margin-bottom:1.5rem;align-items:flex-start}
.cic{width:44px;height:44px;background:var(--gold-dim);border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.cic svg{width:18px;height:18px;fill:var(--gold)}
.crow strong{display:block;color:#F2EDE0;margin-bottom:.15rem;font-size:.88rem}
.crow span{font-size:.88rem;color:var(--tb)}
.cfm{background:var(--s1);border:1px solid var(--bd);border-radius:12px;padding:2.5rem;align-self:start}
.cfm h3{background:var(--gold-radial);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1.5rem}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fg{margin-bottom:1.25rem}
.fg label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#D0C8B5;margin-bottom:.45rem}
.fg label .req{background:var(--gold-radial);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.fc{width:100%;padding:.85rem 1rem;background:var(--s2);border:1px solid rgba(255,255,255,.13);border-radius:6px;color:#F0EBE0;font-family:inherit;font-size:max(16px,.9rem);outline:none;transition:border-color .2s,box-shadow .2s;min-height:48px;-webkit-appearance:none;appearance:none}
.fc:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,60,.12)}
.fc::placeholder{color:#706A62}
.fc.er{border-color:#e24b4b}
textarea.fc{resize:vertical;min-height:130px}
select.fc{font-size:16px}select.fc option{background:#1F1C15}
.fe{font-size:.74rem;color:#e86060;margin-top:.25rem;display:none}
.fe.sh{display:block}
.fok{display:none;text-align:center;padding:1.75rem;background:rgba(126,217,87,.07);border:1px solid rgba(126,217,87,.25);border-radius:8px;margin-top:1rem}
.fok.sh{display:block}
.fok h4{color:#7ED957;margin-bottom:.4rem}
.fok p{font-size:.88rem;color:var(--tb)}
.sobs{display:flex;gap:.65rem;flex-wrap:wrap}
.sob{width:38px;height:38px;border:1px solid rgba(255,255,255,.12);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--tb);font-size:.74rem;font-weight:700;transition:border-color .2s,color .2s,background .2s;text-decoration:none}
.sob:hover{border-color:var(--gold);background:var(--gold-radial);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background:var(--gold-dim)}
.sobs{display:flex;gap:.65rem;flex-wrap:wrap}
.cs-item{display:flex;align-items:center;gap:1rem;padding:.9rem 1rem;border-radius:8px;background:rgba(201,168,60,.05);border:1px solid rgba(201,168,60,.12);transition:all .2s}
.cs-item:hover{background:rgba(201,168,60,.1);border-color:var(--gold-ln);transform:translateX(4px)}
.cs-icon{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--gold),#E6BC54);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cs-item-text{flex:1}
.cs-item-link{font-size:.88rem;font-weight:600;background:var(--gold-radial);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block}
.cs-item-link:hover{color:#fff}
.cs-item-meta{font-size:.74rem;color:var(--tm);margin-top:.1rem}
.dept-item{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;border-radius:8px;transition:background .2s}
.dept-item:hover{background:rgba(255,255,255,.03)}
.dept-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.dept-link{font-size:.82rem;font-weight:600;background:var(--gold-radial);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;white-space:nowrap;display:inline-block}
.dept-name{font-size:.74rem;color:var(--tm)}
.dept-toggle{margin-left:auto;flex-shrink:0;width:32px;height:32px;border-radius:50%;border:1px solid rgba(201,168,60,.3);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.8rem;color:var(--gold);transition:all .22s;background:transparent}
.dept-toggle svg{transition:transform .25s ease}
.dept-toggle:hover{background:var(--gold-dim);border-color:var(--gold)}
.dept-toggle.open{background:var(--gold-dim);border-color:var(--gold)}
.dept-toggle.open svg{transform:rotate(180deg)}
.dept-acronym{flex-shrink:0;width:44px;height:44px;border-radius:8px;background:var(--gold-dim);border:1px solid var(--gold-ln);display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.dept-panel{max-height:0;overflow:hidden;padding:0 1rem;border-radius:8px;background:rgba(201,168,60,.05);border-left:3px solid var(--gold);margin:0 1rem 0 calc(44px + 1rem);transition:max-height .35s ease,padding .35s ease,margin-bottom .35s ease}
.dept-panel.open{max-height:400px;padding:1rem;margin-bottom:.75rem}
.dept-panel-title{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--gold-radial);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.65rem}
.dept-panel-line{font-size:.81rem;color:var(--tb);padding:.15rem 0}
.dept-panel-time{font-size:.79rem;color:var(--tm);margin-top:.65rem;padding-top:.65rem;border-top:1px solid var(--bds)}

@media(max-width:768px){.brand-logo-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:360px){.brand-logo-grid{grid-template-columns:1fr!important}}

/* FOOTER */
footer{background:#0A0906;border-top:1px solid var(--bd);padding:4rem 0 2rem}
.fg2{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.fbr p{font-size:.84rem;color:var(--tb);max-width:280px;margin-top:.75rem}
.fc2 h5{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;background:var(--gold-radial);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem}
.fc2 li{margin-bottom:.6rem}
.fc2 li button,.fc2 li a{font-size:.85rem;color:var(--tb);transition:color .2s}
.fc2 li button:hover,.fc2 li a:hover{background:var(--gold-radial);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.fbt{border-top:1px solid var(--bds);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.fbt p{font-size:.78rem;color:var(--tm)}
/* BACK TOP */
#bt{position:fixed;bottom:2rem;right:2rem;z-index:500;width:44px;height:44px;background:var(--gold-grad);color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:1.1rem;font-weight:700;display:none;align-items:center;justify-content:center;transition:opacity .3s,transform .2s}
#bt.sh{display:flex}
#bt:hover{transform:translateY(-3px)}

/* =====================
   RESPONSIVE
   ===================== */
@media(max-width:1024px){
  .agrid,.abg{grid-template-columns:1fr;gap:2rem}
  .avis{display:block}
  .ib{position:static}
  .fg2{grid-template-columns:1fr 1fr}
  }

@media(max-width:768px){
  .nls,.nc{display:none}
  .hm{display:flex}
  .section{padding:4rem 0}
  .hero{min-height:auto;padding:5.5rem 0 3rem}
  .cgrid{grid-template-columns:1fr}
  .mvg,.cog{grid-template-columns:1fr;gap:2rem}
  .fr{grid-template-columns:1fr}
  .abg{grid-template-columns:1fr}
  .tlw::before{left:28px}
  .mi{grid-template-columns:56px 1fr}
  .mi .mb{grid-column:2!important;text-align:left!important}
  .mi.ml .mg,.mi.mr .mg{display:none}
  .md{grid-column:1}
  .fg2{grid-template-columns:1fr 1fr}
  .fbt{flex-direction:column;text-align:center}
  .cc{columns:1}
  .sdet{padding:1.5rem 1rem}
  .detg{grid-template-columns:1fr}
  .cfm{padding:1.5rem}


  .sbnav{padding:.4rem 0;gap:.75rem;justify-content:center}
  .sbnav-inner{gap:.75rem;padding:0 .5rem}
  .sbnt{width:100px;height:100px;font-size:.68rem;padding:.25rem .4rem}
  .sbnt-icon{width:65px;height:65px;border-radius:6px}
  .sbnt1{width:110px;height:110px}
}
@media(max-width:480px){
  .hbtns,.ctab{flex-direction:column;align-items:center}
  .bsi{justify-content:center;gap:.6rem .9rem}
  .bch{font-size:.74rem}
  .stats{grid-template-columns:1fr 1fr}
  .fg2{grid-template-columns:1fr}
  h1{font-size:clamp(2.2rem,10vw,3.5rem)}
  .dept-panel{margin-left:1rem}
  .cc{columns:1}
}
@media(max-width:360px){
  .stats{grid-template-columns:1fr}
  .container{padding:0 1rem}


  .sbnt{width:100%;height:auto;flex:1 1 100%;padding:1rem;flex-direction:row;justify-content:flex-start} /* Ensures no overflow by flattening flex structure */
  .sbnav{padding:0.5rem;gap:0.5rem}
}

/* FACEBOOK IFRAME EMBEDS */



/* Drawer header with image */
.det-header{display:grid;grid-template-columns:1fr 460px;gap:2rem;align-items:start;margin-bottom:1.5rem}
.det-header-text{min-width:0}
.det-header-img{border-radius:10px;overflow:hidden;flex-shrink:0;border:1px solid var(--bds)}
.det-header-img img{width:100%;height:280px;object-fit:cover;object-position:center top;display:block}
/* Service card image — flush to card edges */
.dc-img{margin:0;width:100%;aspect-ratio:16/7;overflow:hidden}
.dc-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:0}
@media(max-width:768px){.det-header{grid-template-columns:1fr!important}.det-header-img{display:none}}

/* ============================================================
   MOBILE-FIRST GLOBAL RESET ADDITIONS
============================================================ */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
button, a, select, input, textarea {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button {
  min-height: 44px;
  min-width: 44px;
}

/* ============================================================
   NAVBAR — MOBILE FIXES
============================================================ */
.ni {
  padding: 0 1rem;
  gap: 0;
}
.lw {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  max-width: calc(100vw - 80px);
}
.lw img {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.lt {
  min-width: 0;
  overflow: hidden;
}
.ln {
  font-size: clamp(0.85rem, 3.8vw, 1.7rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ls {
  font-size: clamp(0.38rem, 1.2vw, 0.48rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   HERO — MOBILE
============================================================ */
@media(max-width:768px){
.him {
  width: min(220px, 70vw) !important;
  height: auto !important;
  max-width: 70vw;
  margin: 0 auto 0.5rem !important;
  margin-top: -10px !important;
  display: block;
}
}
.hb {
  padding: 1.5rem 1rem;
  width: 100%;
  max-width: 100%;
}
.hdesc {
  font-size: 0.95rem;
  padding: 0 0.25rem;
}

/* ============================================================
   BRAND STRIP — MOBILE
============================================================ */
.bsi {
  padding: 0.25rem 0.75rem;
  gap: 0.25rem;
}
.bci {
  width: 90px;
  height: 90px;
}

/* ============================================================
   ABOUT STATS — MOBILE
============================================================ */
@media (max-width: 480px) {
  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}
@media (max-width: 340px) {
  .stats {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SERVICE CARDS — MOBILE
============================================================ */
.cgrid {
  gap: 1rem;
}
.sc {
  padding: 1.5rem 1.25rem;
}

/* ============================================================
   SERVICE BRAND NAV BUTTONS — MOBILE
============================================================ */
@media (max-width: 768px) {
  .sbnav {
    padding: 0.5rem 0;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    justify-content: flex-start;
    scroll-snap-type: x mandatory;
    /* Hide scrollbar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }
  .sbnav::-webkit-scrollbar {
    display: none; /* Chrome/Safari/WebKit */
  }
  .sbnav-inner {
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: max-content;
    max-width: none;
    /* Hide scrollbar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }
  .sbnav-inner::-webkit-scrollbar {
    display: none; /* Chrome/Safari/WebKit */
  }
  .sbnt, .sbnt1 {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  .sbnt-icon {
    width: 60px;
    height: 60px;
  }
  .sbnt1 .sbnt-icon {
    width: 70px;
    height: 70px;
  }
}

/* ============================================================
   SERVICE DRAWERS — MOBILE
============================================================ */
/* SERVICE DRAWERS — base (all sizes) */
.sdet {
  padding: 1.25rem 1.5rem;
  margin: 0.75rem 0;
  border-radius: 8px;
}
.detcl {
  top: 0.75rem;
  right: 0.75rem;
  min-width: 36px;
  min-height: 36px;
}
.dc-img {
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  margin: 0;
}
.dc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 0;
}

/* SERVICE DRAWERS — mobile only */
@media (max-width: 768px) {
  .detg {
    grid-template-columns: 1fr !important;
    gap: 1rem;
    margin-top: 1.25rem;
  }
  .cc {
    columns: 1 !important;
  }
  .det-header {
    grid-template-columns: 1fr !important;
  }
}
.det-header-img {
  display: none;
}
@media (min-width: 600px) {
  .det-header-img {
    display: block;
  }
}

/* ============================================================
   FACEBOOK IFRAMES — RESPONSIVE
============================================================ */

/* 3 posts → 3 cols; 2 posts → 2 cols auto via base CSS */
/* On mobile collapse to 1 col */
@media (max-width: 768px) {
  }

/* ============================================================
   COMPLIANCE SERVICES GRID — MOBILE
============================================================ */
@media (max-width: 768px) {
  .sdet [style*="grid-template-columns:repeat(3,1fr)"] {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* ============================================================
   PAGE HEADER — MOBILE
============================================================ */
.pgh .container {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

/* ============================================================
   ABOUT BODY GRID — MOBILE
============================================================ */
@media (max-width: 768px) {
  .abg {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
  .abg > div:last-child > div[style*="position:sticky"] {
    position: static !important;
  }
  .clients-scroll {
    height: 320px;
  }
}

/* ============================================================
   TIMELINE — MOBILE (flexbox rewrite for correct left-dot layout)
============================================================ */
@media (max-width: 768px) {

  /* Vertical line hugs the left */
  .tlw::before {
    left: 20px;
    transform: none;
  }

  /* Each milestone row = flex row: [dot col] [card col] */
  .mi {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    grid-template-columns: unset !important;
  }

  /* dot col */
  .md {
    order: 0 !important;
    flex: 0 0 44px !important;
    grid-column: unset !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0;
  }

  /* Card — always second, takes remaining space */
  .mb {
    order: 1 !important;
    flex: 1 1 0 !important;
    grid-column: unset !important;
    text-align: left !important;
    padding: 1rem 1.1rem;
    min-width: 0;
  }

  /* Ghost spacer columns — hidden on mobile */
  .mg {
    display: none !important;
  }
}

/* ============================================================
   MISSION/VISION — MOBILE
============================================================ */
@media (max-width: 768px) {
  .mvg {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .mvc {
    padding: 1.5rem 1.25rem;
  }
}

/* ============================================================
   VALUES GRID — MOBILE
============================================================ */
@media (max-width: 480px) {
  .vg {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .vc {
    padding: 1.25rem 0.75rem;
  }
}
@media (max-width: 340px) {
  .vg {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CONTACT PAGE — MOBILE
============================================================ */
@media (max-width: 768px) {
  .cog {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .cfm {
    padding: 1.25rem 1rem;
  }
  .fr {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .cin h3 {
    margin-bottom: 1.25rem;
  }
}
.crow span {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ============================================================
   DEPARTMENT EMAIL PANELS — MOBILE
============================================================ */
.dept-panel {
  margin-left: 0.5rem;
}
.dept-link {
  word-break: break-all;
  font-size: 0.75rem;
}
.dept-acronym {
  flex-shrink: 0;
}

/* ============================================================
   FOOTER — MOBILE
============================================================ */
@media (max-width: 768px) {
  .fg2 {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .fbr {
    grid-column: 1 / -1;
  }
}
@media (max-width: 480px) {
  .fg2 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .fbr {
    grid-column: auto;
  }
  footer {
    padding: 2.5rem 0 1.5rem;
  }
}
.fbt {
  flex-direction: column;
  text-align: center;
  gap: 0.75rem;
}
.fbt p {
  font-size: 0.74rem;
}

/* ============================================================
   CONTACT SOCIAL LINKS — MOBILE
============================================================ */
@media (max-width: 600px) {
  .cs-item {
    min-width: unset;
    width: 100%;
    flex: 1 1 100%;
  }
  .cs-item-link {
    word-break: break-all;
    font-size: 0.8rem;
  }
}

/* ============================================================
   CTA SECTION — MOBILE
============================================================ */
.cta {
  padding: 3.5rem 0;
}
.ctab {
  gap: 0.75rem;
}
@media (max-width: 480px) {
  .ctab, .hbtns {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .ctab .btn, .hbtns .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }
}

/* ============================================================
   BUTTONS — GLOBAL TOUCH SIZE
============================================================ */
.btn {
  min-height: 44px;
  padding: 0.75rem 1.5rem;
}
.nb {
  min-height: 44px;
}
.nc {
  min-height: 44px;
}

/* ============================================================
   PRIVACY MODAL — MOBILE
============================================================ */
#privacy-modal > div {
  padding: 1.5rem 1rem;
  margin: 0 auto;
}
#close-privacy-modal {
  min-width: 44px;
  min-height: 44px;
  top: 0.75rem !important;
  right: 0.75rem !important;
}

/* ============================================================
   VISITOR COUNTER — MOBILE
============================================================ */
#visitor-counter {
  flex-wrap: wrap;
  max-width: 100%;
}

/* ============================================================
   BACK TO TOP BUTTON
============================================================ */
#bt {
  bottom: 1.25rem;
  right: 1.25rem;
}

/* ============================================================
   SECTION SPACING — MOBILE
============================================================ */
@media (max-width: 480px) {
  .section {
    padding: 2.5rem 0;
  }
  .container {
    padding: 0 1rem;
  }
  h1 {
    font-size: clamp(2rem, 9vw, 3rem);
  }
  h2 {
    font-size: clamp(1.6rem, 6vw, 2.4rem);
  }
  h3 {
    font-size: clamp(1.2rem, 4.5vw, 1.8rem);
  }
}

/* ============================================================
   360px ULTRA-SMALL
============================================================ */
@media (max-width: 360px) {
  .lw {
    gap: 0.4rem;
  }
  .lw img {
    width: 28px;
    height: 28px;
  }
  .ln {
    font-size: 0.78rem;
  }
  .ls {
    display: none;
  }
  .bci {
    width: 70px;
    height: 70px;
  }
  .sbnt, .sbnt1 {
    width: 68px;
    height: 68px;
  }
  .sbnt-icon, .sbnt1 .sbnt-icon {
    width: 52px;
    height: 52px;
  }
}


/* ABOUT IMAGE — show on mobile with reasonable height */
@media (max-width: 1024px) {
  .avis {
    aspect-ratio: unset;
    height: auto;
    max-width: 100%;
    border-radius: 8px;
    overflow: visible;
    background: transparent;
    border: none;
  }
  .avis img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
  }
}
@media (max-width: 480px) {
  .avis {
    height: auto;
  }
}


/* COMPLIANCE SERVICES GRID */
.compliance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.1rem 0.75rem;
}
@media (max-width: 768px) {
  .compliance-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   FACEBOOK IFRAME EMBEDS — CLEAN REWRITE
============================================================ */
.fb-iframe-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.5rem 0 1.25rem;
  align-items: start;
}
.fb-iframe-wrap {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: transparent;
}
.fb-iframe-wrap iframe {
  display: block;
  width: 500px;
  height: 750px;
  border: none;
  transform-origin: top left;
  /* transform and wrapper height set by JS */
}
@media (max-width: 768px) {
  .fb-iframe-list {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   SITE-WIDE ANIMATIONS
================================================================ */

/* Fade + slide up — base state (hidden) */
.anim-up, .anim-fade, .anim-left, .anim-right, .anim-scale {
  opacity: 0;
  transition-timing-function: cubic-bezier(.22,.61,.36,1);
  transition-property: opacity, transform;
  transition-duration: .75s;
}
.anim-up    { transform: translateY(40px); }
.anim-left  { transform: translateX(-40px); }
.anim-right { transform: translateX(40px); }
.anim-scale { transform: scale(.88); }
.anim-fade  { transform: none; }

/* Visible state */
.anim-up.in, .anim-fade.in, .anim-left.in,
.anim-right.in, .anim-scale.in {
  opacity: 1;
  transform: none;
}

/* Stagger delays for grids */
.anim-d1 { transition-delay: .08s; }
.anim-d2 { transition-delay: .18s; }
.anim-d3 { transition-delay: .28s; }
.anim-d4 { transition-delay: .38s; }
.anim-d5 { transition-delay: .48s; }
.anim-d6 { transition-delay: .58s; }

/* ── Hero section ── */
.him     { transition: opacity .9s ease, transform .9s cubic-bezier(.34,1.3,.64,1); }
.hero h1 { transition: opacity .8s ease .15s, transform .8s cubic-bezier(.22,.61,.36,1) .15s; }
.htag    { transition: opacity .7s ease .3s,  transform .7s ease .3s; }
.hdesc   { transition: opacity .7s ease .45s, transform .7s ease .45s; }
.hbtns   { transition: opacity .7s ease .6s,  transform .7s ease .6s; }

.hero .him, .hero h1, .hero .htag, .hero .hdesc, .hero .hbtns {
  opacity: 0;
  transform: translateY(24px);
}
.hero .him { transform: scale(.8) translateY(20px); }

.hero.hero-loaded .him,
.hero.hero-loaded h1,
.hero.hero-loaded .htag,
.hero.hero-loaded .hdesc,
.hero.hero-loaded .hbtns {
  opacity: 1;
  transform: none;
}

/* ── Gold rule animated width ── */
.rule {
  width: 0;
  transition: width .7s cubic-bezier(.22,.61,.36,1);
}
.rule.in { width: 52px; }

/* ── Stat counter ── */
.stn {
  transition: opacity .5s ease;
}

/* ── Card hover — lift + glow ── */
.sc {
  transition: transform .28s cubic-bezier(.22,.61,.36,1),
              border-color .28s ease,
              box-shadow .28s ease;
}
.sc:hover {
  transform: translateY(-7px) scale(1.012);
  box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 30px rgba(201,168,60,.08);
}

/* ── Value card pulse on hover ── */
.vc {
  transition: transform .25s ease, box-shadow .25s ease;
}
.vc:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 40px rgba(0,0,0,.4), 0 0 20px rgba(201,168,60,.06);
}
.vi {
  transition: background .3s ease, box-shadow .3s ease;
}
.vc:hover .vi {
  background: rgba(201,168,60,.28);
  box-shadow: 0 0 18px rgba(201,168,60,.2);
}

/* ── Navbar link hover underline ── */
.nb::after {
  transition: transform .28s ease;
}

/* ── Stat number count-up flash ── */
@keyframes statPop {
  0%   { transform: scale(.7);  opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
.stn.counted { animation: statPop .6s cubic-bezier(.34,1.4,.64,1) forwards; }

/* ── Label badge slide in ── */
@keyframes labelIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.label.in { animation: labelIn .5s ease forwards; }
.label     { opacity: 0; }

/* ── Page header (inner pages) ── */
.pgh h1, .pgh h2, .pgh .label, .pgh .rule, .pgh p {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.pgh.in h1, .pgh.in h2, .pgh.in .label, .pgh.in .rule, .pgh.in p {
  opacity: 1;
  transform: none;
}
.pgh.in .label { animation: labelIn .5s ease forwards; opacity: 1; }
.pgh.in h1  { transition-delay: .1s; }
.pgh.in .rule { transition-delay: .2s; }
.pgh.in p   { transition-delay: .3s; }

/* ── Scroll progress bar pulse ── */
#prog {
  transition: width .12s linear;
  box-shadow: 0 0 8px rgba(201,168,60,.5);
}

/* ── MVC (Mission/Vision) cards ── */
.mvc {
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.mvc:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 50px rgba(0,0,0,.4);
  border-color: rgba(201,168,60,.4);
}

/* ── Timeline dots pop ── */
@keyframes dotPop {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.2); }
  100% { transform: scale(1);   opacity: 1; }
}
.mdi.in { animation: dotPop .5s cubic-bezier(.34,1.4,.64,1) forwards; }
.mdi { opacity: 0; }


/* ================================================================
   HERO — Updated to match design screenshot
================================================================ */

/* Hero layout */
.hero {
  background: radial-gradient(ellipse 70% 60% at 50% 30%,
    rgba(30,28,20,.95) 0%,
    #0F0E0C 65%
  );
}

/* Logo — metallic M, crisp and prominent */
.him {
  width: 350px !important;
  height: 250px !important;
  object-fit: contain;
  margin: 0 auto 0.3rem !important;
  margin-top: -55px !important;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,.7))
          drop-shadow(0 0 40px rgba(180,210,255,.12));
}

/* H1 — large, bold, full-width feel */
.hero h1 {
  font-size: clamp(2.2rem, 6.5vw, 5.2rem) !important;
  letter-spacing: .04em;
  color: #ffffff;
  margin-bottom: .5rem;
  line-height: 1.0;
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}

/* Tagline — gold, wide spaced */
.htag {
  font-size: clamp(.65rem, 1.5vw, .82rem) !important;
  letter-spacing: .32em !important;
  margin-bottom: 1.6rem;
  font-weight: 600;
}

/* Description */
.hdesc {
  font-size: 1.05rem;
  color: #c8c2b5;
  max-width: 680px;
  margin-bottom: 2.8rem;
}

/* Buttons */
.hbtns {
  gap: 1.2rem;
}

/* Hero content block */
.hb {
  max-width: 960px;
  padding: 2rem 2rem 3rem;
}

/* Remove corner decorations for cleaner look */
.hcn { display: none; }

/* ============================================================
   MOBILE FIX — FINAL PASS
   Purpose: correct cascade issues where global (non-media-query)
   rules appear later in the sheet and unintentionally override
   earlier mobile-only media-query blocks. All desktop restores
   use min-width:769px; all mobile overrides use max-width:768px.
   DO NOT place anything below this block in <style>.
============================================================ */

/* hero logo mobile ────────────
   The global `.him { width:350px !important }` rule above
   overrides the @media(max-width:768px) rule at line ~798
   because it appears later in the cascade. This re-asserts
   the correct mobile size AFTER the 350px rule.               */
@media (max-width: 768px) {
  .him {
    width: min(200px, 62vw) !important;
    height: auto !important;
    margin-top: -10px !important;
  }
}

/* ── 2. Page-header: remove hardcoded 40px left margin ───────
   `.pgh h1, …{ margin-left:40px }` has no mobile counterpart.
   On narrow viewports this pushes text beyond the safe zone.  */
@media (max-width: 768px) {
  .pgh h1, .pgh h2, .pgh h3,
  .pgh p, .pgh .label, .pgh .rule {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ── 3. Htag: clamp letter-spacing on very narrow screens ────
   .32em letter-spacing on a tiny viewport can overflow.       */
@media (max-width: 400px) {
  .htag {
    letter-spacing: .18em !important;
  }
}

/* ── 4. Restore desktop values overridden by global rules ────
   Several mobile-only styles were written without media-query
   wrappers, which incorrectly overrides desktop layout.
   These rules restore original desktop intent.                */
@media (min-width: 769px) {

  /* Navbar inner padding: was 2rem, globally reduced to 1rem */
  .ni {
    padding: 0 2rem;
    gap: unset;
  }

  /* Logo wrapper: remove mobile-only overflow clip */
  .lw {
    max-width: none;
    overflow: visible;
  }

  /* Logo image: restore original max-height from 34px override */
  .lw img {
    width: auto !important;
    height: auto !important;
    max-height: 64px;
  }

  /* Brand strip logos: restore 150px from global 90px override */
  .bci {
    width: 150px;
    height: 150px;
  }

  /* CTA section: restore 5.5rem padding from global 3.5rem */
  .cta {
    padding: 5.5rem 0;
  }

  /* Buttons: restore original padding from global 0.75rem 1.5rem */
  .btn {
    padding: 0.85rem 2.2rem;
    min-height: unset;
  }

  /* Footer bottom: restore row layout from global column override */
  .fbt {
    flex-direction: row;
    text-align: left;
    gap: 1rem;
  }

  /* Dept-panel: restore indent (calc(44px + 1rem) from global 0.5rem) */
  .dept-panel {
    margin: 0 1rem 0 calc(44px + 1rem);
  }

  /* Privacy modal: restore desktop padding from global 1.5rem 1rem */
  #privacy-modal > div {
    padding: 2.5rem;
  }

  /* Back-to-top: restore desktop position from global 1.25rem */
  #bt {
    bottom: 2rem;
    right: 2rem;
  }
}

/* ── 5. Visitor counter: prevent overflow on narrow screens ──*/
@media (max-width: 480px) {
  #visitor-counter {
    justify-content: center;
    font-size: 0.8rem;
  }
}

/* ── 6. Service drawer close btn: ensure tap target ─────────*/
@media (max-width: 768px) {
  .detcl {
    width: 44px;
    height: 44px;
    top: 0.6rem;
    right: 0.6rem;
  }
}

/* ── 7. Inline-style grids in services/about: force stack ───
   Some sections use inline style="display:grid;grid-template-
   columns:..." which bypasses CSS classes on mobile.          */
@media (max-width: 768px) {
  [style*="grid-template-columns:repeat(auto-fit,minmax(230px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   CONTACT PAGE — TARGETED MOBILE FIXES
============================================================ */

/* dept email dropdown ──
   Root cause: .dept-link has white-space:nowrap which forces
   long emails (e.g. mihwariypeopleconnect@gmail.com) to never
   wrap, expanding the flex row and pushing the chevron toggle
   button beyond the right edge of the visible container.
   Fix: allow the email to wrap on mobile so the toggle stays
   visible, and ensure the dept-info column can shrink.        */
@media (max-width: 768px) {
  .dept-link {
    white-space: normal !important;
    word-break: break-all;
    overflow-wrap: break-word;
  }

  /* Ensure the info column CAN shrink even with long text */
  .dept-info {
    min-width: 0;
    overflow: hidden;
  }

  /* Keep the toggle button always visible and right-aligned */
  .dept-item {
    align-items: flex-start; /* align to top when email wraps */
  }

  .dept-toggle {
    margin-top: 2px;         /* align toggle with first line of text */
    flex-shrink: 0 !important;
  }

  /* dept acronym size */
  .dept-acronym {
    flex-shrink: 0 !important;
  }
}

/* contact form select ─
   select.fc has appearance:none but no custom chevron arrow
   was added, so mobile users can't see it's a dropdown. Fix
   by injecting a CSS arrow via background-image.              */
select.fc {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C9A83C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.5rem; /* make room for the arrow */
  cursor: pointer;
}

/* ── 10. Contact form: improve mobile layout ──────────────────
   Ensure the form card doesn't cause horizontal overflow,
   inputs are full-width and readable, and touch targets work. */
@media (max-width: 768px) {
  /* Form card: tighter padding, no overflow */
  .cfm {
    padding: 1.25rem 1rem !important;
    overflow: hidden;
  }

  /* All form inputs: enforce 100% width within card */
  .fc {
    width: 100%;
    font-size: 16px; /* prevent iOS auto-zoom on focus */
    min-height: 48px;
  }

  /* Textarea doesn't need the 48px min, restore normal */
  textarea.fc {
    min-height: 120px;
  }

  /* Form field groups: consistent spacing when stacked */
  .fr {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .fg {
    margin-bottom: 1rem;
  }

  /* Submit button: full width, comfortable tap target */
  #sbtn {
    min-height: 52px;
    font-size: 0.85rem;
  }

  /* Error messages: readable font size */
  .fe {
    font-size: 0.72rem;
  }
}

/* ── 11. Contact left column: prevent overflow ────────────────
   The email address in .crow can be very long; ensure it
   wraps cleanly within the available mobile width.            */
@media (max-width: 768px) {
  .crow span,
  .crow a {
    word-break: break-all;
    overflow-wrap: break-word;
    font-size: 0.85rem;
  }

  /* Give the contact info column breathing room */
  .cin {
    min-width: 0;
  }
}

/* ── 12. Services drawer header image: restore on mobile ──────
   Two rules hide .det-header-img on mobile:
   (a) @media(max-width:768px){display:none} at line ~736
   (b) Global display:none with only a min-width:600px restore
   Both are overridden here (Final Pass = last in cascade).
   The image now stacks below the text description in a clean
   full-width card on all mobile sizes (320px–768px).          */
@media (max-width: 768px) {
  .det-header-img {
    display: block !important;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 1rem;
  }

  .det-header-img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center top;
    display: block;
    border-radius: 8px;
  }

  /* Tighten the gap since it's now stacked vertically */
  .det-header {
    gap: 0.75rem;
    margin-bottom: 1rem;
  }
}



/* ============================================================
   PUBLIC TRAININGS — TWO BRAND CONTAINERS
============================================================ */

/* ── Page hero header ───────────────────────────────────── */
.pt-split-hero {
  margin-top: var(--nh);
  padding: 4rem 2rem 3rem;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 80% at 20% 50%, rgba(212,38,33,.13) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(81,0,255,.13) 0%, transparent 60%),
    #0F0E0C;
  position: relative;
  overflow: hidden;
}
.pt-split-overlay {
  position: relative;
  z-index: 1;
}
.pt-split-overlay h1 {
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  margin-bottom: .5rem;
}
.pt-split-overlay p {
  max-width: 500px;
  margin: .5rem auto 0;
  font-size: .95rem;
  color: rgba(255,255,255,.65);
}
.pt-split-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    rgba(212,38,33,.06) 0%,
    transparent 48%,
    transparent 52%,
    rgba(81,0,255,.06) 100%
  );
  pointer-events: none;
}

/* ── Two-column section wrapper ─────────────────────────── */
.pt-two-col-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 3rem 2rem 4rem;
  /* Smooth merged background — red left fading through dark centre into purple right */
  background: linear-gradient(90deg,
    #1a0505 0%,
    #0d030d 50%,
    #080012 100%
  );
}

/* ── Brand column ───────────────────────────────────────── */
.pt-brand-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 1.5rem;
}

/* ── Inner card container — image flush to CTA ──────────── */
.pt-col-card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  height: 100%;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.pt-col-qbox .pt-col-card {
  background: rgba(212,38,33,.05);
  box-shadow: 0 8px 40px rgba(212,38,33,.08);
}
.pt-col-dayaw .pt-col-card {
  background: rgba(81,0,255,.05);
  box-shadow: 0 8px 40px rgba(81,0,255,.08);
}
.pt-col-card:hover {
  transform: translateY(-5px);
}
.pt-col-qbox .pt-col-card:hover {
  box-shadow: 0 20px 60px rgba(212,38,33,.15);
  border-color: rgba(212,38,33,.25);
}
.pt-col-dayaw .pt-col-card:hover {
  box-shadow: 0 20px 60px rgba(81,0,255,.18);
  border-color: rgba(81,0,255,.3);
}

/* ── Column header (logo + name) — inside card ─────────── */
.pt-col-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 1.75rem 1.25rem;
}
.pt-col-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}
.pt-col-brand-name {
  font-family: 'League Gothic', sans-serif;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: .2rem;
}
.pt-col-tagline {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  font-weight: 600;
}

/* ── Poster image — flush, zero gap to CTA below ────────── */
.pt-col-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  flex-shrink: 0;
  /* No radius — straight edge so it meets the CTA seamlessly */
}
.pt-col-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .4s ease;
}
.pt-col-card:hover .pt-col-img {
  transform: scale(1.04);
}

/* ── CTA — directly below image, same card background ────── */
.pt-col-cta {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  padding: 1.5rem 1.75rem 1.75rem;
  flex: 1;
}

.pt-col-register {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.pt-col-reg-note {
  font-size: .83rem;
  color: rgba(255,255,255,.58);
  line-height: 1.65;
}
.pt-col-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .75rem 1.4rem;
  border-radius: 5px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  transition: opacity .2s, transform .22s ease;
  align-self: flex-start;
}
.pt-col-btn:hover {
  opacity: .88;
  transform: translateY(-2px);
}
.pt-col-btn-qbox  { background: linear-gradient(135deg,#99186a,#d42621); color:#fff; }
.pt-col-btn-dayaw { background: linear-gradient(135deg,#4200c5,#5100ff); color:#fff; }
.pt-col-slots {
  font-size: .67rem;
  color: rgba(255,255,255,.3);
  letter-spacing: .06em;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .pt-two-col-section {
    grid-template-columns: 1fr;
    padding: 2rem 1rem 3rem;
    background: linear-gradient(180deg, #1a0505 0%, #0d030d 50%, #080012 100%);
  }
  .pt-brand-col {
    padding: .75rem;
  }
  .pt-col-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .pt-col-btn {
    align-self: stretch;
    justify-content: center;
  }
}

@supports (-webkit-appearance:none){
  html{overflow-x:clip}
  body::before,body::after{-webkit-backface-visibility:hidden;backface-visibility:hidden}
}


/* ================================================================
   UTILITY CLASSES — extracted from inline styles (FIX-003)
   Allows removal of 'unsafe-inline' from style-src CSP directive.
   Added to end of styles.css
================================================================ */

.ui-iflex-gap5 { display:inline-flex;align-items:center;gap:.5rem; }
.clr-paymongo { color:#29ABE2 }
.bdr-paymongo { border-top:3px solid #29ABE2 }
.iframe-bare { border:none;overflow:hidden }
.card-gold-top { background:var(--s2);border:1px solid var(--bd);border-radius:8px;padding:1.5rem;border-top:3px solid var(--gold) }
.txt-lg-heading { font-family:'League Gothic',sans-serif;font-size:2.6rem;background:var(--gold-radial);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:.4rem }
.txt-gold-label { font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--gold-radial);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem }
.txt-sm-body { font-size:.84rem;line-height:1.65 }
.no-dec { text-decoration:none }
.lnk-gold-arrow { margin-left:.5rem;text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;background:var(--gold-radial);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.icon-gold-stroke { -webkit-text-fill-color:initial;stroke:var(--gold) }
.mobnav-item { color:var(--gold);text-decoration:none;display:flex;align-items:center;gap:.5rem;border-bottom:1px solid var(--bds);min-height:48px;padding:.9rem .75rem;font-size:.92rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; }
.mt-5 { margin-top:.5rem }
.ui-flex-gap7-nd { gap:.7rem;margin-bottom:.4rem;text-decoration:none }
.ico-30 { width:30px;height:30px;object-fit:contain }
.txt-med { font-size:1.1rem }
.txt-footer-muted { font-size:.78rem;line-height:1.9;color:rgba(255,255,255,.45);max-width:320px;margin-bottom:1.1rem; }
.lnk-footer { color:rgba(255,255,255,.8);text-decoration:none;border-bottom:1px solid var(--gold-ln);transition:color .2s,border-color .2s; }
.sr-hidden { display:none;visibility:hidden;position:absolute;left:-9999px;top:-9999px }
.txt-white-border-muted { color:#fff;border-color:rgba(255,255,255,.45) }
.ui-flex-gap5 { display:flex;align-items:center;gap:.5rem; }
.bdr-dayaw { border-top:3px solid; border-image: linear-gradient(135deg, #99186a, #d42621) 1; }
.txt-dayaw { background: linear-gradient(135deg, #99186a, #d42621); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.bdr-qbox { border-top:3px solid; border-image: linear-gradient(135deg,#4200c5,#5100ff) 1; }
.txt-qbox { background: linear-gradient(135deg,#4200c5,#5100ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.txt-lg { font-size:1.4rem }
.cta-row { margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center }
.txt-reset-gold { background:none !important;-webkit-background-clip:border-box !important;-webkit-text-fill-color:#F5F0E6 !important;background-clip:border-box !important; }
.txt-orange { background:linear-gradient(135deg,#fd9600,#ffb347);-webkit-background-clip:text;-webkit-text-fill-color:transparent; }
.bg-white { background:rgb(255, 255, 255) }
.clr-inherit { color:inherit }

/* Extended utility classes — batch 2 */
.txt-red { background:linear-gradient(135deg,#ff3131,#ff6b6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent; }
.bdr-orange { border-top:3px solid; border-image: linear-gradient(135deg,#fd9600,#ffb347) 1; }
.bg-dark { background:#0F0E0C }
.flex-grow-min { flex:1;min-width:200px }
.clr-green { color:#7ED957 }
.bdr-red { border-top:3px solid; border-image: linear-gradient(135deg,#ff3131,#ff6b6b) 1; }
.txt-block-580 { max-width:580px;font-size:1.05rem }
.txt-reset-gold { background:none !important;-webkit-background-clip:border-box !important;-webkit-text-fill-color:#F5F0E6 !important;background-clip:border-box !important; }
.bdr-green { border-top:3px solid #7ED957 }
.btn-qbox { background:linear-gradient(135deg,#4200c5,#5100ff);border-color:#3a06a8;color:#fff }
.bg-white-rounded { background-color: white; border-radius: 5px; }
.ui-flex-wrap-gap6 { display:flex;flex-wrap:wrap;gap:.6rem;align-items:center; }
.txt-block-620 { max-width:620px;font-size:1.05rem }
.bg-dark-npb { background:#0F0E0C;padding-bottom:0 }
.clr-theme { color:var(--th) }
.bg-dark-pt { background:#0F0E0C;padding-top:1.5rem }

/* One-off utility classes — batch 3 (clears all remaining inline styles) */
.u-001 { width:100%;height:100%;object-fit:cover;display:block;border-radius:8px; }
.u-002 { margin-top:1rem }
.u-003 { margin-top:2rem }
.u-004 { --cc:#7ED957 }
.u-005 { --cc:#29ABE2 }
.u-006 { --cc:#d42621 }
.u-007 { --cc:#490ac6 }
.u-008 { text-align:center;margin-top:3rem }
.u-009 { margin-top:1.25rem }
.u-010 { margin-top:3.5rem;margin-bottom:.75rem }
.u-011 { margin-top:2.5rem;margin-bottom:.75rem }
.u-012 { margin-top:5rem;margin-bottom:.5rem }
.u-013 { position:sticky;top:calc(var(--nh) + 1.5rem);display:flex;flex-direction:column;gap:1.25rem }
.u-014 { position:static }
.u-015 { background:var(--s1);border-top:1px solid var(--bd) }
.u-016 { margin-bottom:3rem }
.u-017 { display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.25rem }
.u-018 { font-family:'League Gothic',sans-serif;font-size:2.6rem; background:var(--gold-radial); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; margin-bottom:.4rem }
.u-019 { font-size:.68rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase; background:var(--gold-radial); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:.5rem }
.u-020 { font-size:.84rem;line-height:1.65;margin-bottom:.5rem }
.u-021 { max-width:520px;font-size:1.05rem }
.u-022 { margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--bd);flex:1;display:flex;flex-direction:column }
.u-023 { background:var(--gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase }
.u-024 { font-size:.78rem;color:var(--tm);margin-bottom:1rem }
.u-025 { flex:1;display:flex;flex-direction:column;justify-content:space-between }
.u-026 { width:100%;justify-content:center;margin-top:.25rem;min-height:48px }
.u-027 { font-size:1.8rem;margin-bottom:.35rem }
.u-028 { margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--bd) }
.u-029 { background:var(--gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase }
.u-030 { display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap }
.u-031 { padding-bottom:0 }
.u-032 { max-width:600px;font-size:1.05rem }
.u-033 { margin-top:2.5rem;margin-bottom:0 }
.u-034 { background:none !important;-webkit-background-clip:border-box !important;-webkit-text-fill-color:#F5F0E6 !important;background-clip:border-box !important;color:#F5F0E6 }
.u-035 { border-top:3px solid #7ED957;grid-column:1/-1 }
.u-036 { width:100%;overflow:hidden;border-radius:0 }
.u-037 { width:100%;height:auto;aspect-ratio:16/5;object-fit:cover;display:block }
.u-038 { padding:1.5rem 1.75rem 1.25rem }
.u-039 { color:#7ED957;font-size:1.15rem;font-weight:700;margin-bottom:1.1rem }
.u-040 { padding:1.25rem 1.75rem 1.5rem;border-top:1px solid rgba(201,168,60,.15) }
.u-041 { font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7ED957;margin-bottom:.9rem }
.u-042 { background:#fff;border-radius:8px;padding:.75rem 1rem;border:1px solid rgba(201,168,60,.18) }
.u-043 { width:100%;height:auto;display:block;object-fit:contain;max-height:160px }
.u-044 { background:#7ED957;border-color:#5cb83a;color:#fff }
.u-045 { background:#29ABE2;border-color:#1a8cbf;color:#fff }
.u-046 { background: linear-gradient(135deg, #99186a, #d42621);-webkit-background-clip: text;-webkit-text-fill-color: transparent; }
.u-047 { margin-top:1.5rem;font-size:.85rem;color:var(--tb);border-top:1px solid var(--bds);padding-top:1rem }
.u-048 { margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center }
.u-049 { background:linear-gradient(135deg,#99186a,#d42621);border-color:#7a1155;color:#fff }
.u-050 { background: linear-gradient(135deg,#4200c5,#5100ff);-webkit-background-clip: text;-webkit-text-fill-color: transparent; }
.u-051 { background:linear-gradient(135deg,#ff3131,#ff6b6b);border-color:#cc2929;color:#fff }
.u-052 { background:linear-gradient(135deg,#fd9600,#ffb347);border-color:#cc7a00;color:#fff }
.u-053 { color:#d42621 }
.u-054 { background:linear-gradient(135deg,#5100ff,#4200c5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text }
.u-055 { margin-bottom:2rem }
.u-056 { background:linear-gradient(135deg,#4200c5,#5100ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent; }
.u-057 { margin-top:.75rem;font-size:.85rem;color:var(--tb) }
.u-058 { display:flex;flex-direction:column;gap:3rem; }
.u-059 { margin-top:3rem;padding-top:2rem;border-top:1px solid var(--bds);display:flex;flex-wrap:wrap;gap:.75rem;align-items:center }
.u-060 { font-size: 70px; }
.u-061 { background:var(--qb-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:clamp(1.1rem,2.2vw,1.55rem);margin-bottom:.6rem; }
.u-062 { background:none!important;-webkit-background-clip:border-box!important;-webkit-text-fill-color:var(--th)!important;background-clip:border-box!important; }
.u-063 { font-size:.95rem;margin-top:.4rem }
.u-064 { margin-top:.65rem;font-size:.85rem;color:var(--tb) }
.u-065 { margin-top:1rem;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(212,38,33,.82); }
.u-066 { background:transparent;border:1.5px solid var(--gold-ln);color:rgba(255,255,255,.7); }

/* Footer portfolio link hover (replaces inline onmouseover/onmouseout handlers) */
a.lnk-footer:hover {
  color: #C9A83C !important;
  border-color: var(--gold) !important;
}