*,*::before,*::after{margin:0;padding:0;box-sizing:border-box; cursor: none !important;}
:root {
  --black: #0a0a0a;
  --white: #f5f0e8;
  --gold: #c9a84c;
  --gold-l: #e8c97a;
  --gold-d: #a07830;
  --mid: #888888;
  --gb: rgba(201,168,76,.12);
  --fd: "Bebas Neue", sans-serif;
  --fs: "Playfair Display", serif;
  --fb: "Inter", sans-serif;
  --nav-h: 5.5rem;
  --px: clamp(1.25rem,4vw,3rem);
  --py: clamp(4rem,8vw,8rem);
}
/* ... rest of your CSS ... */
/* ═══ Shared tokens (kept identical to index.html so both pages feel like one site) ═══ */

html {  scroll-behavior:smooth; overflow-x:hidden; }
body { background:var(--black); color:var(--white); font-family:var(--fb); font-weight:300; overflow-x:hidden; min-height:100vh; cursor:none }
img  { max-width:100%; height:auto; display:block }
a    { text-decoration:none; color:inherit }


.sl { font-size:.6rem; letter-spacing:.35em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; display:block }


/* ── CURSOR ── */
.cursor-dot{position:fixed;width:8px;height:8px;background:var(--gold);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .2s,height .2s,opacity .2s}
.cursor-ring{position:fixed;width:36px;height:36px;border:1px solid rgba(201,168,76,.5);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .35s ease,height .35s ease,border-color .35s}
.cursor-ring.hover{width:54px;height:54px;border-color:var(--gold)}
@media(pointer:coarse){.cursor-dot,.cursor-ring{display:none}body{cursor:auto}}

/* ── CURSOR FIX FOR FORM INPUTS ── */
input, textarea, select, button {
  cursor: none !important;
}
.contact-modal input:focus,
.contact-modal textarea:focus,
.contact-modal select:focus {
  cursor: text !important;
}

/* ── LOADER ── */
#loader{position:fixed;inset:0;background:var(--black);z-index:9990;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.75rem}
#loader.out{opacity:0;pointer-events:none;transition:opacity .7s ease}
.loader-brand{display:flex;flex-direction:column;align-items:center;gap:1.25rem}
.loader-logo{width:min(240px,70vw);height:auto;max-height:130px;object-fit:contain;opacity:0;animation:loaderLogoIn 1.4s cubic-bezier(.16,1,.3,1) forwards,logoGlowPulse 2s ease-in-out infinite alternate}
.loader-brand-name{font-family:var(--font-display);font-size:clamp(.85rem,2.5vw,1rem);letter-spacing:.42em;text-transform:uppercase;color:var(--gold);opacity:0;animation:fadeIn .6s .7s forwards}
.loader-bar-wrap{width:220px;height:1px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.loader-bar{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,var(--gold-dark),var(--gold-light));animation:loadBar 1.6s cubic-bezier(.4,0,.2,1) forwards}
.loader-text{font-size:.58rem;letter-spacing:.35em;text-transform:uppercase;color:var(--mid);opacity:0;animation:fadeIn .4s .9s forwards}
@keyframes loadBar{0%{width:0}100%{width:100%}}
@keyframes fadeIn{to{opacity:1}}
@keyframes loaderLogoIn{0%{opacity:0;transform:scale(.9) translateY(20px);filter:drop-shadow(0 0 0 rgba(201,168,76,0))}100%{opacity:1;transform:scale(1) translateY(0);filter:drop-shadow(0 0 15px rgba(201,168,76,.3))}}
@keyframes logoGlowPulse{0%{filter:drop-shadow(0 0 10px rgba(201,168,76,.25))}100%{filter:drop-shadow(0 0 25px rgba(201,168,76,.65))}}


/* ── NAV (same as home) ── */
 nav { 
  position:fixed; top:0; left:0; right:0; 
  display:flex; align-items:center; justify-content:space-between; 
  padding:1.2rem var(--px); z-index:600; 
  background:rgba(10,10,10,.96); backdrop-filter:blur(24px); 
  height:var(--nav-h); border-bottom:1px solid rgba(201,168,76,.15) 
} 
.n-logo img { height:38px; object-fit:contain; transition:transform .4s, filter .4s }
.n-logo:hover img { transform:scale(1.05); filter:drop-shadow(0 0 8px rgba(201,168,76,.65)) }
.n-links { display:flex; align-items:center; gap:1.35rem }
.n-links a { font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(245,240,232,.6); transition:color .2s; white-space:nowrap }
.n-links a:hover, .n-links a.n-active { color:var(--gold) }
.n-cta { background:var(--gold) !important; color:var(--black) !important; padding:.5rem 1.2rem; font-weight:600 !important; transition:background .2s, transform .2s !important }
.n-cta:hover { background:var(--gold-l) !important; transform:translateY(-1px) }
.n-hbg { display:none; flex-direction:column; gap:5px; padding:.5rem; cursor:none }
.n-hbg span { display:block; width:22px; height:1px; background:var(--white); transition:.3s }
.n-mob { display:none; position:fixed; inset:0; background:var(--black); z-index:490; flex-direction:column; align-items:center; justify-content:center; gap:2.5rem }
.n-mob.open { display:flex }
.n-mob a { font-family:var(--fd); font-size:clamp(2rem,8vw,3rem); letter-spacing:.1em; color:var(--white); transition:color .2s }
.n-mob a:hover { color:var(--gold) }
.n-mob a.n-active { color:var(--gold) } 

/* ── PAGE HERO ── */
.pg-hero { 
  padding:calc(var(--nav-h) + 4.5rem) var(--px) 3rem; 
  text-align:center; position:relative; overflow:hidden; 
  background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(201,168,76,.08),transparent 65%) 
}
.pg-hero h1 { font-family:var(--fd); font-size:clamp(2.8rem,8vw,7rem); line-height:.9; color:var(--white) }
.pg-hero h1 em { color:var(--gold); font-style:normal }
.pg-hero p  { font-family:var(--fs); font-style:italic; font-size:clamp(.88rem,1.4vw,1.15rem); color:rgba(245,240,232,.55); max-width:620px; margin:1.25rem auto 0; line-height:1.75 }

/* ── CATEGORY TABS ── */
.cat-wrap {
  position:relative;
  width:min(100%, 1540px);
  margin:0 auto;
  padding:0 clamp(3.25rem,5vw,4.5rem) 2rem;
}
.cat-tabs {
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-start;
  gap:.75rem;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:.45rem .2rem .7rem;
  margin:0;
}
.cat-tabs::-webkit-scrollbar { display:none }
.cat-tab {
  flex:0 0 auto;
  min-height:58px;
  white-space:nowrap;
  scroll-snap-align:center;
  font-size:.63rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  padding:.9rem 1.45rem;
  border:1px solid rgba(201,168,76,.2);
  color:rgba(245,240,232,.56);
  background:linear-gradient(180deg,#101010,#0c0c0c);
  transition:border-color .25s ease,color .25s ease,background .25s ease,transform .25s ease,box-shadow .25s ease;
  border-radius:4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  cursor:none;
}
.cat-tab .ct-n {
  font-family:var(--fd);
  font-size:1rem;
  line-height:1;
  color:rgba(201,168,76,.58);
  transition:color .25s ease;
}
.cat-tab:hover {
  border-color:rgba(201,168,76,.65);
  color:rgba(245,240,232,.9);
  transform:translateY(-1px);
}
.cat-tab.on {
  border-color:var(--gold);
  color:var(--gold-l);
  background:linear-gradient(180deg,rgba(201,168,76,.13),rgba(201,168,76,.055));
  box-shadow:0 10px 28px rgba(201,168,76,.10);
}
.cat-tab.on .ct-n { color:var(--gold) }
.cat-scroll-btn {
  position:absolute;
  top:50%;
  transform:translateY(calc(-50% - .7rem));
  z-index:3;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(201,168,76,.34);
  background:rgba(10,10,10,.96);
  color:var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  box-shadow:0 8px 24px rgba(0,0,0,.32);
  transition:opacity .2s ease,border-color .2s ease,background .2s ease,transform .2s ease;
  cursor:none;
}
.cat-scroll-btn:hover {
  border-color:var(--gold);
  background:#15130d;
  transform:translateY(calc(-50% - .7rem)) scale(1.05);
}
.cat-scroll-prev { left:.35rem }
.cat-scroll-next { right:.35rem }
.cat-scroll-btn.is-hidden { opacity:.22; pointer-events:none }

/* ── PROJECTS GRID ── */
.proj-wrap { max-width:1300px; margin:0 auto; padding:1rem var(--px) var(--py); position:relative; min-height:60vh }
.pj-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem }
.pj-card { 
  border:1px solid rgba(201,168,76,.14); background:#0e0e0e; overflow:hidden; 
  opacity:0; transform:translateY(24px) scale(.98); 
  transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .3s;
  display:flex; flex-direction:column
}
.pj-card.in { opacity:1; transform:none }
.pj-card:hover { border-color:rgba(201,168,76,.4); box-shadow:0 20px 50px rgba(0,0,0,.4) }
.pj-img { 
  aspect-ratio:4/3; background-size:cover; background-position:center; 
  position:relative; flex-shrink:0 
}
.pj-img::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(10,10,10,.85)) }
.pj-cat-badge { 
  position:absolute; top:.85rem; left:.85rem; 
  font-size:.52rem; letter-spacing:.16em; text-transform:uppercase; 
  background:rgba(10,10,10,.75); border:1px solid rgba(201,168,76,.35); 
  color:var(--gold-l); padding:.32rem .7rem; backdrop-filter:blur(6px);
  z-index:2
}
.pj-body { padding:1.25rem 1.35rem 1.5rem; flex:1; display:flex; flex-direction:column }
.pj-name { font-family:var(--fd); font-size:1.45rem; line-height:1; color:var(--white); margin-bottom:.55rem; letter-spacing:.01em }
.pj-desc { font-size:.8rem; line-height:1.65; color:rgba(245,240,232,.5); margin-bottom:1rem; min-height:2.6rem; flex:1 }
.pj-tags { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:1rem }
.pj-tag  { font-size:.54rem; letter-spacing:.08em; text-transform:uppercase; border:1px solid rgba(201,168,76,.2); padding:.22rem .55rem; color:var(--mid) }
.pj-link { 
  display:inline-flex; align-items:center; gap:.4rem; 
  font-size:.58rem; letter-spacing:.15em; text-transform:uppercase; 
  color:var(--gold); transition:gap .25s, color .25s 
}
.pj-link:hover { gap:.65rem; color:var(--gold-l) }
.pj-empty { text-align:center; padding:4rem 1rem; color:var(--mid); font-size:.9rem; grid-column:1/-1 }

/* Grid transition when switching category */
.pj-grid.switching .pj-card { opacity:0; transform:translateY(16px) scale(.98); transition-duration:.28s }

/* ── FOOTER ── */
footer { 
  background:var(--black); padding:clamp(2rem,4vw,4rem) var(--px); 
  border-top:1px solid rgba(201,168,76,.12); 
  display:grid; grid-template-columns:auto 1fr auto; 
  align-items:center; gap:clamp(1rem,2vw,3rem) 
}
.ft-logo img { height:30px; object-fit:contain }
.ft-links { display:flex; gap:clamp(1rem,1.5vw,2rem); justify-content:center; flex-wrap:wrap }
.ft-links a { font-size:clamp(.52rem,.6vw,.6rem); letter-spacing:.18em; text-transform:uppercase; color:var(--mid); transition:color .2s; white-space:nowrap }
.ft-links a:hover { color:var(--gold) }
.ft-copy { font-size:clamp(.55rem,.62vw,.62rem); color:rgba(245,240,232,.2); text-align:right; line-height:1.6; white-space:nowrap }

/* ── WHATSAPP FLOAT ──*/
.wa { 
  position:fixed; bottom:1.75rem; right:1.75rem; z-index:6000; 
  width:56px; height:56px; border-radius:50%; background:#25d366; 
  display:flex; align-items:center; justify-content:center; 
  box-shadow:0 4px 24px rgba(37,211,102,.35); 
  transition:transform .25s, box-shadow .25s 
}
.wa:hover { transform:scale(1.1); box-shadow:0 6px 32px rgba(37,211,102,.5) }
.wa svg { width:28px; height:28px; fill:#fff } 

/* ── FLOATING HOME CTA ── */
.homefab { 
  position:fixed; left:1.75rem; bottom:1.75rem; z-index:5999; 
  display:flex; align-items:center; gap:.6rem; 
  background:rgba(10,10,10,.92); border:1px solid rgba(201,168,76,.4); 
  color:var(--gold-l); padding:.85rem 1.3rem; 
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; 
  backdrop-filter:blur(10px); box-shadow:0 10px 30px rgba(0,0,0,.4); 
  transition:border-color .25s, background .25s, transform .25s 
}
.homefab:hover { border-color:var(--gold); background:#141209; transform:translateY(-2px) }
.homefab svg { width:14px; height:14px; fill:var(--gold); flex-shrink:0 }

/* ── BACK TO TOP ── */
.back-top { 
  position:fixed; bottom:5.5rem; right:1.75rem; z-index:5998; 
  width:40px; height:40px; border-radius:50%; 
  background:rgba(201,168,76,.15); border:1px solid rgba(201,168,76,.25); 
  color:var(--gold); display:flex; align-items:center; justify-content:center; 
  font-size:1.2rem; transition:all .3s ease; 
  opacity:0; pointer-events:none;
  cursor:none
}
.back-top.visible { opacity:1; pointer-events:auto }
.back-top:hover { background:rgba(201,168,76,.25); transform:translateY(-3px) }

/* ════════════════════════════════════════════════
   RESPONSIVE FIXES FOR ALL SCREEN SIZES
════════════════════════════════════════════════ */
@media(max-width:1200px){
  .pj-grid { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.25rem }
}

@media(max-width:992px){
  :root { --nav-h:4.5rem }
  .pg-hero { padding:calc(var(--nav-h) + 3rem) var(--px) 2.5rem }
  .pg-hero h1 { font-size:clamp(2.4rem,7vw,5rem) }
  .pj-grid { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) }
  .cat-wrap { padding-inline:3.4rem }
  .cat-tab { min-height:54px; padding:.8rem 1.25rem; font-size:.57rem }
}

@media(max-width:768px){
  :root { --nav-h:4rem }
  
  /* ── NAV ── */
  nav { padding:0 1.25rem; height:var(--nav-h) }
  .n-links { display:none }
  .n-hbg { display:flex }
  
  /* ── PAGE HERO ── */
  .pg-hero { padding:calc(var(--nav-h) + 2.5rem) 1.25rem 2rem }
  .pg-hero h1 { font-size:clamp(2rem,8vw,3.5rem) }
  .pg-hero p { font-size:clamp(.8rem,1.2vw,1rem); max-width:100%; padding:0 .5rem }
  
  /* ── CATEGORY TABS ── */
  .cat-wrap { padding:0 3rem 1.5rem }
  .cat-tabs { gap:.55rem; padding-block:.35rem .65rem }
  .cat-tab {
    min-height:48px;
    padding:.7rem 1.05rem;
    font-size:.5rem;
    letter-spacing:.12em;
    gap:.42rem
  }
  .cat-tab .ct-n { font-size:.8rem }
  .cat-scroll-btn { width:36px; height:36px; font-size:.85rem }
  .cat-scroll-prev { left:.55rem }
  .cat-scroll-next { right:.55rem }
  
  /* ── PROJECTS GRID ── */
  .proj-wrap { padding:1rem 1.25rem 4rem }
  .pj-grid { 
    grid-template-columns:repeat(2,1fr); 
    gap:1rem 
  }
  .pj-card { transform:translateY(16px) scale(.98) }
  .pj-name { font-size:1.2rem }
  .pj-desc { font-size:.75rem; min-height:2rem }
  .pj-body { padding:1rem 1rem 1.25rem }
  .pj-cat-badge { font-size:.45rem; padding:.25rem .6rem; top:.6rem; left:.6rem }
  .pj-tag { font-size:.45rem; padding:.18rem .45rem }
  .pj-link { font-size:.5rem }
  
  /* ── FOOTER ── */
  footer { 
    grid-template-columns:1fr; 
    text-align:center; 
    padding:2.5rem 1.25rem; 
    gap:1.5rem 
  }
  .ft-logo img { margin:0 auto }
  .ft-links { justify-content:center; gap:1rem }
  .ft-copy { text-align:center; white-space:normal }
  
  /* ── FLOATING BUTTONS ── */
  .wa { width:50px; height:50px; bottom:1.25rem; right:1.25rem }
  .wa svg { width:24px; height:24px }
  .homefab { 
    left:1.25rem; bottom:1.25rem; 
    padding:.7rem 1rem; 
    font-size:.5rem;
    gap:.5rem
  }
  .homefab span.hf-txt { display:none }
  .back-top { bottom:5rem; right:1.25rem; width:36px; height:36px; font-size:1rem }
}

@media(max-width:576px){
  /* ── PAGE HERO ── */
  .pg-hero { padding:calc(var(--nav-h) + 2rem) 1rem 1.5rem }
  .pg-hero h1 { font-size:clamp(1.8rem,10vw,2.8rem) }
  .pg-hero p { font-size:.8rem }
  
  /* ── CATEGORY TABS ── */
  .cat-wrap { padding:0 1rem 1.25rem }
  .cat-tabs { gap:.4rem }
  .cat-tab { 
    padding:.5rem .75rem; 
    font-size:.45rem;
    letter-spacing:.1em
  }
  .cat-tab .ct-n { font-size:.6rem }
  
  /* ── PROJECTS GRID ── */
  .proj-wrap { padding:1rem 1rem 3.5rem }
  .pj-grid { 
    grid-template-columns:1fr; 
    gap:.875rem 
  }
  .pj-name { font-size:1.1rem }
  .pj-desc { font-size:.7rem; min-height:auto }
  .pj-body { padding:.875rem .875rem 1rem }
  .pj-cat-badge { font-size:.4rem; padding:.2rem .5rem; top:.5rem; left:.5rem }
  .pj-tag { font-size:.4rem; padding:.15rem .4rem }
  .pj-link { font-size:.45rem }
  
  /* ── FOOTER ── */
  footer { padding:2rem 1rem; gap:1.25rem }
  .ft-links { gap:.75rem; flex-direction:column; align-items:center }
  .ft-links a { font-size:.5rem }
  .ft-copy { font-size:.5rem }
  
  /* ── FLOATING BUTTONS ── */
  .wa { width:44px; height:44px; bottom:1rem; right:1rem }
  .wa svg { width:20px; height:20px }
  .homefab { left:1rem; bottom:1rem; padding:.6rem .8rem; font-size:.45rem }
  .back-top { bottom:4.5rem; right:1rem; width:32px; height:32px; font-size:.85rem }
}

@media(max-width:380px){
  /* ── EXTRA SMALL SCREENS ── */
  .pg-hero h1 { font-size:clamp(1.5rem,12vw,2.2rem) }
  .cat-tab { 
    padding:.4rem .6rem; 
    font-size:.4rem;
    letter-spacing:.08em
  }
  .cat-tab .ct-n { font-size:.5rem }
  .pj-grid { gap:.75rem }
  .pj-name { font-size:1rem }
  .pj-desc { font-size:.65rem }
  .pj-body { padding:.75rem }
  .pj-tag { font-size:.35rem; padding:.12rem .35rem }
  .pj-link { font-size:.4rem }
  .homefab { padding:.5rem .6rem; font-size:.4rem }
  .homefab svg { width:12px; height:12px }
  .wa { width:40px; height:40px }
  .wa svg { width:18px; height:18px }
}

@media(min-width:1600px){
  .cat-wrap, .proj-wrap { max-width:1500px }
  .pj-grid { gap:2rem }
  .pj-grid { grid-template-columns:repeat(auto-fill,minmax(320px,1fr)) }
}

@media(min-width:2000px){
  .pj-grid { grid-template-columns:repeat(4,1fr) }
}


/* Portfolio readability update: user-requested 16px content and 26px headings. */
.pj-body, .pj-desc, .pg-hero p { font-size:16px; }
.pj-name { font-size:26px; line-height:1.12; }
.pj-tag, .pj-link { font-size:12px; }
.pj-img { background-color:#111; }
@media(max-width:768px){
  .pj-body, .pj-desc, .pg-hero p { font-size:16px; }
  .pj-name { font-size:26px; }
}
\n\n/* ===== FINAL PORTFOLIO: text-only cards + horizontal category rail ===== */\n.cat-wrap{max-width:1500px;padding:0 var(--px) 1.5rem;overflow:hidden;}\n.cat-tabs{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:.7rem;overflow-x:auto;overflow-y:hidden;padding:.35rem .15rem .85rem;margin:0;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(201,168,76,.5) transparent;}\n.cat-tabs::-webkit-scrollbar{height:5px}.cat-tabs::-webkit-scrollbar-track{background:transparent}.cat-tabs::-webkit-scrollbar-thumb{background:rgba(201,168,76,.45);border-radius:999px}\n.cat-tab{flex:0 0 auto;scroll-snap-align:start;border-radius:999px;padding:.72rem 1.05rem;background:#0b0b0b;box-shadow:none;}\n.cat-tab:hover{transform:none;}\n.proj-wrap{max-width:1500px;padding-top:.5rem;}\n.pj-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;}\n.pj-card{position:relative;min-height:300px;padding:0;border:1px solid rgba(201,168,76,.16);background:linear-gradient(145deg,#11110f 0%,#090909 70%);border-radius:10px;overflow:hidden;}\n.pj-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 10%,rgba(201,168,76,.10),transparent 35%);pointer-events:none;}\n.pj-card:hover{transform:translateY(-4px);border-color:rgba(201,168,76,.48);box-shadow:0 22px 55px rgba(0,0,0,.4);}\n.pj-card-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:1.15rem 1.25rem 0;}\n.pj-cat-badge{position:static;background:transparent;border:0;padding:0;backdrop-filter:none;color:var(--gold);font-size:12px;letter-spacing:.14em;}\n.pj-card-index{font-family:var(--fd);font-size:1.4rem;color:rgba(201,168,76,.18);}\n.pj-body{position:relative;z-index:1;padding:1rem 1.25rem 1.3rem;font-size:16px;}\n.pj-name{font-size:26px;line-height:1.08;margin-bottom:.75rem;}\n.pj-desc{font-size:16px;line-height:1.65;min-height:auto;margin-bottom:1rem;color:rgba(245,240,232,.58);}\n.pj-tags{gap:.45rem;margin-top:auto;margin-bottom:1.25rem;}\n.pj-tag{font-size:11px;border-radius:999px;padding:.28rem .6rem;background:rgba(201,168,76,.035);}\n.pj-card-footer{padding-top:.95rem;border-top:1px solid rgba(201,168,76,.12);}\n.pj-link{font-size:12px;}\n.pj-link-muted{opacity:.5;cursor:default;}\n.pj-img{display:none!important;}\n\n@media(max-width:1100px){.pj-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}\n@media(max-width:768px){\n  .cat-wrap{padding:0 1rem 1.25rem;}\n  .cat-tabs{margin-left:0;margin-right:0;padding-bottom:.7rem;}\n  .cat-tab{font-size:11px;padding:.68rem .9rem;}\n  .proj-wrap{padding:.5rem 1rem 4rem;}\n  .pj-grid{grid-template-columns:1fr;gap:.85rem;}\n  .pj-card{min-height:0;}\n  .pj-card-top{padding:1rem 1rem 0;}\n  .pj-body{padding:.9rem 1rem 1.1rem;font-size:16px;}\n  .pj-name{font-size:24px;}\n  .pj-desc{font-size:15px;}\n  .n-mob{gap:1.45rem;padding:5rem 1.25rem 2rem;overflow-y:auto;}\n  .n-mob a{font-size:clamp(1.5rem,7vw,2.2rem);}\n}\n@media(max-width:430px){\n  .pg-hero{padding-left:1rem;padding-right:1rem;}\n  .cat-tab{font-size:10px;letter-spacing:.08em;}\n  .pj-name{font-size:22px;}\n  .pj-desc{font-size:15px;}\n}\n@media(min-width:1800px){\n  .cat-wrap,.proj-wrap{max-width:1680px;}\n  .pj-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;}\n}\n
@media(max-width:576px){
  .cat-wrap { padding:0 2.6rem 1.25rem }
  .cat-tab { min-height:44px; padding:.64rem .9rem; font-size:.47rem; letter-spacing:.1em }
  .cat-tab .ct-n { font-size:.76rem }
  .cat-scroll-btn { width:32px; height:32px }
  .cat-scroll-prev { left:.4rem }
  .cat-scroll-next { right:.4rem }
}