/* ══════════════════════════════════════════════════════════════
   TO3.css  —  Sugam K. Dhungana | Geomatics Portfolio
   Kathmandu University · Department of Geomatics Engineering
   Palette : Warm Ivory · Golden Ochre · Sienna Rust · Sage
   Fonts   : Playfair Display · Source Sans 3 · IBM Plex Mono
   Icons   : Font Awesome 6
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Source+Sans+3:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --bg-0:      #faf6ef;
  --bg-1:      #f3ede2;
  --bg-2:      #ece5d8;
  --bg-3:      #e2d9ca;
  --dark-0:    #1a1510;
  --dark-1:    #2a2218;
  --dark-2:    #3a3025;
  --ochre:     #b57010;
  --ochre-l:   #d4902a;
  --ochre-ll:  #e8b050;
  --rust:      #9a3515;
  --rust-l:    #b84c28;
  --sage:      #3d6e45;
  --sage-l:    #5a8c62;
  --stone:     #4a6a88;
  --tx-0:      #1c1710;
  --tx-1:      #3e3228;
  --tx-2:      #6b5c48;
  --tx-3:      #9e8e7a;
  --tx-4:      #c4b8a8;
  --border:    rgba(181,112,16,0.18);
  --border-d:  rgba(181,112,16,0.08);
  --border-h:  rgba(181,112,16,0.42);
  --shadow-sm: 0 2px 12px rgba(28,23,16,0.08);
  --shadow:    0 4px 24px rgba(28,23,16,0.12);
  --shadow-lg: 0 12px 48px rgba(28,23,16,0.18);
  --grd-ochre: linear-gradient(135deg,var(--ochre),var(--rust));
  --grd-page:  linear-gradient(180deg,var(--bg-0) 0%,var(--bg-1) 100%);
  --ff-d: 'Playfair Display', Georgia, serif;
  --ff-b: 'Source Sans 3', system-ui, sans-serif;
  --ff-m: 'IBM Plex Mono', monospace;
  /* brand colours for social icons */
  --github:    #24292e;
  --linkedin:  #0077B5;
  --instagram: #E1306C;
  --facebook:  #1877F2;
  --youtube:   #FF0000;
  --twitter:   #000000;
  --rgate:     #00CCBB;
}

/* ── Reset ────────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html  { scroll-behavior:smooth; font-size:16px; }
body  { background:var(--bg-0); color:var(--tx-0); font-family:var(--ff-b); font-weight:400; line-height:1.78; overflow-x:hidden; }
body.webgis-body { height:100vh; overflow:hidden; }
img   { display:block; max-width:100%; }
a     { text-decoration:none; color:inherit; }

/* Subtle warm grid texture */
body::before {
  content:''; position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(181,112,16,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(181,112,16,.04) 1px,transparent 1px);
  background-size:72px 72px;
  pointer-events:none; z-index:0;
}

.mono { font-family:var(--ff-m); font-size:.72rem; letter-spacing:.04em; color:var(--tx-3); }

/* ══════════════════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════════════════ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 2.5rem;
  background:rgba(250,246,239,.96);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.nav-logo {
  font-family:var(--ff-d); font-size:1.15rem; font-weight:700;
  color:var(--tx-0); letter-spacing:.01em;
  display:flex; align-items:center; gap:.4rem;
}
.nav-logo span { color:var(--ochre); font-style:italic; }
.nav-logo .nav-dot {
  width:6px; height:6px; background:var(--ochre);
  border-radius:50%; display:inline-block;
}
.nav-links { display:flex; gap:1.8rem; }
.nav-links a {
  font-size:.99rem; font-weight:900; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tx-2);
  transition:color .2s; position:relative; padding-bottom:3px;
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:2px; background:var(--grd-ochre);
  transform:scaleX(0); transition:transform .22s; border-radius:1px;
}
.nav-links a:hover { color:var(--ochre); }
.nav-links a:hover::after,
.nav-links a.active::after { transform:scaleX(1); }
.nav-links a.active { color:var(--ochre); }
.nav-cta {
  font-size:.76rem; font-weight:600; letter-spacing:.06em;
  padding:.38rem 1rem; background:var(--grd-ochre);
  border-radius:2px; color:#faf6ef;
  transition:opacity .22s; border:none;
}
.nav-cta:hover { opacity:.88; }

/* ══════════════════════════════════════════════════════════
   HOME HERO
══════════════════════════════════════════════════════════ */
.home-hero {
  min-height:100vh; position:relative; z-index:1;
  display:flex; align-items:center; overflow:hidden;
  background:
    linear-gradient(105deg,rgba(0, 0, 0, 0.92) 5%,rgba(22,17,10,.55) 10%),
    url('skd3.jpeg') 20% 35%/cover no-repeat;
  /* ↑ Replace hero-bg.jpg with a mountain/Nepal landscape photo */
}
.home-hero::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:120px;
  background:linear-gradient(to top,var(--bg-0),transparent);
  pointer-events:none;
}
.home-hero-content {
  position:relative; z-index:2;
  padding:10rem 3rem 7rem; max-width:760px;
  animation:fadeUp .9s ease both;
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
.home-eyebrow {
  display:flex; align-items:center; gap:.9rem;
  font-family:var(--ff-m); font-size:.68rem; letter-spacing:.35em;
  text-transform:uppercase; color:var(--ochre-ll); margin-bottom:1.5rem;
}
.home-eyebrow-bar { width:30px; height:1px; background:var(--ochre-ll); }
.home-hero h1 {
  font-family:var(--ff-d);
  font-size:clamp(3.5rem,8vw,7rem);
  font-weight:700; line-height:.96;
  color:#f5ece0; margin-bottom:1rem;
  letter-spacing:-.02em;
}
.home-hero h1 em { color:var(--ochre-ll); font-style:italic; font-weight:400; }
.home-hero-sub {
  font-family:var(--ff-m); font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(245,236,224,.65);
  margin-bottom:1.4rem;
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
}
.home-hero-sub span { color:var(--ochre-ll); }
.home-hero p {
  font-size:.97rem; color:rgba(245,236,224,.72);
  max-width:520px; line-height:1.88; margin-bottom:2.8rem;
}
.home-btns { display:flex; flex-wrap:wrap; gap:.85rem; }
.btn-primary {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.65rem 1.5rem; background:var(--grd-ochre); color:#faf6ef;
  border-radius:2px; font-weight:600; font-size:.88rem;
  border:none; cursor:pointer; transition:opacity .22s;
}
.btn-primary:hover { opacity:.88; }
.btn-outline {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.65rem 1.4rem; border:1px solid rgba(245,236,224,.3);
  color:rgba(245,236,224,.8); border-radius:2px;
  font-weight:600; font-size:.88rem; transition:all .22s;
}
.btn-outline:hover { border-color:var(--ochre-ll); color:var(--ochre-ll); }
.btn-dark {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1.3rem; background:var(--dark-0); color:#f5ece0;
  border-radius:2px; font-size:.85rem; font-weight:600;
  transition:background .22s;
}
.btn-dark:hover { background:var(--dark-2); }

/* ── Home social strip ── */
.hero-social-strip {
  position:relative; z-index:2;
  display:flex; align-items:center; gap:.6rem;
  padding:1.8rem 3rem 0;
  margin-top:-1rem;
}
.hero-social-strip .strip-label {
  font-family:var(--ff-m); font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tx-3); margin-right:.4rem;
}

/* ── Stats strip ── */
.home-stats {
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--bg-1);
}
.stat-item { padding:2rem 1.5rem; text-align:center; border-right:1px solid var(--border); }
.stat-item:last-child { border-right:none; }
.stat-num { font-family:var(--ff-d); font-size:2.6rem; font-weight:700; background:var(--grd-ochre); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; margin-bottom:.3rem; }
.stat-label { font-size:.76rem; color:var(--tx-2); letter-spacing:.04em; }

/* ── Home feature cards ── */
.home-cards { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
.home-card { background:var(--bg-0); padding:2.5rem 2rem; transition:background .25s; display:flex; flex-direction:column; }
.home-card:hover { background:var(--bg-2); }
.home-card-icon { width:44px; height:44px; background:rgba(181,112,16,.1); border:1px solid var(--border); border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:1.2rem; transition:background .25s; }
.home-card:hover .home-card-icon { background:rgba(181,112,16,.18); }
.home-card h3 { font-family:var(--ff-d); font-size:1.2rem; font-weight:600; color:var(--tx-0); margin-bottom:.6rem; }
.home-card p { font-size:.84rem; color:var(--tx-2); line-height:1.72; flex:1; }
.home-card-link { margin-top:1.2rem; font-size:.78rem; font-weight:600; color:var(--ochre); letter-spacing:.05em; display:inline-flex; align-items:center; gap:.4rem; transition:gap .18s; }
.home-card:hover .home-card-link { gap:.7rem; }

/* ══════════════════════════════════════════════════════════
   PAGE BANNER (inner pages)
══════════════════════════════════════════════════════════ */
.page-banner {
  position:relative; z-index:1;
  padding:8rem 3rem 3.5rem;
  background:var(--dark-0);
  border-bottom:3px solid transparent;
  border-image:var(--grd-ochre) 1;
  overflow:hidden;
}
.page-banner::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 70% 50%,rgba(181,112,16,.08) 0%,transparent 70%);
}
.page-banner-label {
  font-family:var(--ff-m); font-size:.65rem; letter-spacing:.35em;
  text-transform:uppercase; color:var(--ochre-ll); margin-bottom:.7rem;
}
.page-banner h1 {
  font-family:var(--ff-d); font-size:clamp(2.4rem,5vw,4rem);
  font-weight:700; color:#f5ece0; line-height:1.05; position:relative; z-index:1;
}
.page-banner p { margin-top:.7rem; font-size:.94rem; color:rgba(245,236,224,.55); max-width:540px; position:relative; z-index:1; }

/* ══════════════════════════════════════════════════════════
   SHARED LAYOUT
══════════════════════════════════════════════════════════ */
.page-content { position:relative; z-index:1; padding:5rem 3rem; }
.container    { max-width:1100px; margin:0 auto; }
.container-sm { max-width:780px; margin:0 auto; }
.section      { margin-bottom:5rem; }
.section-last { margin-bottom:0; }

.section-label {
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--ff-m); font-size:.64rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ochre); margin-bottom:.6rem;
}
.section-label::before { content:''; width:24px; height:2px; background:var(--grd-ochre); border-radius:1px; }
.section-title { font-family:var(--ff-d); font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:700; color:var(--tx-0); line-height:1.15; margin-bottom:1rem; }
.section-sub   { font-size:.94rem; color:var(--tx-2); max-width:560px; line-height:1.75; }
.divider { border:none; border-top:1px solid var(--border); margin:4rem 0; }

/* ══════════════════════════════════════════════════════════
   PHOTO FRAMES & PLACEHOLDERS
══════════════════════════════════════════════════════════ */
.photo-frame {
  border-radius:3px; overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--shadow);
  position:relative;
}
.photo-frame img { width:100%; display:block; object-fit:cover; }
.photo-caption {
  padding:.65rem 1rem; background:var(--bg-1);
  border-top:1px solid var(--border);
  font-size:.7rem; color:var(--tx-3); font-family:var(--ff-m);
  display:flex; align-items:center; gap:.5rem;
}
.photo-caption i { color:var(--ochre); font-size:.8rem; }

/* Placeholder shown when image file is missing */
.photo-placeholder {
  background:linear-gradient(135deg,var(--bg-2) 0%,var(--bg-3) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; color:var(--tx-3); font-family:var(--ff-m); font-size:.7rem;
  text-align:center; padding:2rem; min-height:180px;
  border:2px dashed var(--border); border-radius:3px;
}
.photo-placeholder i { font-size:2rem; color:var(--tx-4); }

/* ══════════════════════════════════════════════════════════
   SOCIAL ICON BUTTONS
══════════════════════════════════════════════════════════ */
.social-row { display:flex; flex-wrap:wrap; gap:.6rem; }
.soc-btn {
  width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--border); color:var(--tx-2);
  font-size:.88rem; transition:all .22s; cursor:pointer;
  background:var(--bg-0);
}
.soc-btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.soc-btn.github:hover    { background:var(--github);   border-color:var(--github);   color:#fff; }
.soc-btn.linkedin:hover  { background:var(--linkedin); border-color:var(--linkedin); color:#fff; }
.soc-btn.instagram:hover { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color:transparent; color:#fff; }
.soc-btn.facebook:hover  { background:var(--facebook); border-color:var(--facebook); color:#fff; }
.soc-btn.youtube:hover   { background:var(--youtube);  border-color:var(--youtube);  color:#fff; }
.soc-btn.rgate:hover     { background:var(--rgate);    border-color:var(--rgate);    color:#fff; }
.soc-btn.email:hover     { background:var(--ochre);    border-color:var(--ochre);    color:#fff; }

/* ══════════════════════════════════════════════════════════
   ABOUT PAGE
══════════════════════════════════════════════════════════ */
.about-grid { display:grid; grid-template-columns:300px 1fr; gap:4rem; align-items:start; }
.about-photo-wrap { position:sticky; top:90px; }
.about-photo { border-radius:3px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border); }
.about-photo img { width:100%; aspect-ratio:4/5; object-fit:cover; object-position:top; }
.about-bio-text { font-size:.94rem; color:var(--tx-1); line-height:1.9; }
.about-bio-text p { margin-bottom:1.1rem; }

.about-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:2rem 0; background:var(--border); border:1px solid var(--border); border-radius:3px; overflow:hidden; }
.aii {
  padding:.75rem 1rem; background:var(--bg-1); border-bottom:1px solid var(--border);
  transition:background .2s;
}
.aii:hover { background:var(--bg-2); }
.aii-label { font-size:.6rem; font-family:var(--ff-m); letter-spacing:.12em; text-transform:uppercase; color:var(--ochre); margin-bottom:.18rem; }
.aii-value { font-size:.88rem; color:var(--tx-0); font-weight:500; }

.hobby-grid { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem; }
.hobby-tag {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.3rem .75rem; background:var(--bg-1);
  border:1px solid var(--border); border-radius:20px;
  font-size:.78rem; color:var(--tx-1); transition:all .2s;
}
.hobby-tag:hover { background:rgba(181,112,16,.1); border-color:rgba(181,112,16,.3); color:var(--ochre); }
.hobby-tag i { font-size:.75rem; color:var(--ochre); }

/* ══════════════════════════════════════════════════════════
   SKILLS PAGE
══════════════════════════════════════════════════════════ */
.skills-layout { display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.skill-cat-label {
  font-family:var(--ff-d); font-size:1.2rem; font-weight:600;
  color:var(--rust); margin-bottom:1.5rem;
  display:flex; align-items:center; gap:.6rem; padding-bottom:.6rem;
  border-bottom:2px solid var(--border);
}
.skill-cat-label i { color:var(--ochre); font-size:1rem; }

.skill-item { margin-bottom:1.15rem; }
.skill-label-row { display:flex; justify-content:space-between; margin-bottom:.38rem; }
.skill-name { font-size:.86rem; color:var(--tx-1); font-weight:500; }
.skill-pct  { font-family:var(--ff-m); color:var(--ochre); font-size:.76rem; }
.skill-track { height:5px; background:var(--bg-3); border-radius:3px; overflow:hidden; }
.skill-fill  {
  height:100%; width:0; border-radius:3px;
  transition:width 1.3s cubic-bezier(.25,.8,.25,1);
}
.skill-fill.ochre { background:linear-gradient(90deg,var(--ochre),var(--ochre-l)); }
.skill-fill.rust  { background:linear-gradient(90deg,var(--rust),var(--rust-l)); }
.skill-fill.sage  { background:linear-gradient(90deg,var(--sage),var(--sage-l)); }
.skill-fill.stone { background:linear-gradient(90deg,var(--stone),#6b92b0); }

.tools-grid { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
.tool-chip {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.3rem .8rem; border:1px solid var(--border);
  border-radius:20px; font-size:.78rem; font-weight:500;
  color:var(--tx-1); background:var(--bg-0); transition:all .2s;
}
.tool-chip:hover { background:rgba(181,112,16,.1); border-color:rgba(181,112,16,.35); color:var(--ochre); }
.tool-chip.hot { background:rgba(181,112,16,.08); border-color:rgba(181,112,16,.28); color:var(--ochre); }
.tool-chip i { font-size:.7rem; }

.softskills-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:3px; overflow:hidden;
}
.softskill-card {
  background:var(--bg-0); padding:1.4rem 1.6rem; transition:background .22s;
}
.softskill-card:hover { background:var(--bg-2); }
.ss-icon { font-size:1.5rem; margin-bottom:.55rem; }
.ss-name { font-size:.88rem; font-weight:600; color:var(--tx-0); margin-bottom:.2rem; }
.ss-desc { font-size:.76rem; color:var(--tx-2); line-height:1.5; }

/* ══════════════════════════════════════════════════════════
   EDUCATION PAGE
══════════════════════════════════════════════════════════ */
.edu-timeline { position:relative; padding-left:2.5rem; }
.edu-timeline::before {
  content:''; position:absolute; left:0; top:1rem; bottom:0;
  width:2px;
  background:linear-gradient(to bottom,var(--ochre) 0%,transparent 100%);
}
.edu-item { position:relative; display:grid; grid-template-columns:64px 1fr; gap:2rem; margin-bottom:4rem; }
.edu-item::before {
  content:''; position:absolute; left:-2.85rem; top:.85rem;
  width:8px; height:8px; background:var(--ochre); border-radius:50%;
  border:2px solid var(--bg-0);
  box-shadow:0 0 0 3px rgba(181,112,16,.22);
}
.edu-badge {
  font-family:var(--ff-m); font-size:.57rem; letter-spacing:.08em;
  padding:.25rem .45rem; border-radius:2px; text-align:center;
  height:fit-content; margin-top:.2rem; white-space:nowrap;
}
.edu-badge.degree { background:rgba(181,112,16,.12); color:var(--ochre); border:1px solid rgba(181,112,16,.3); }
.edu-badge.school { background:rgba(61,110,69,.1); color:var(--sage); border:1px solid rgba(61,110,69,.28); }
.edu-badge.cert   { background:rgba(74,106,136,.1); color:var(--stone); border:1px solid rgba(74,106,136,.28); }
.edu-period { font-family:var(--ff-m); font-size:.68rem; color:var(--tx-3); margin-bottom:.25rem; }
.edu-school { font-size:.8rem; color:var(--rust-l); font-weight:600; margin-bottom:.5rem; display:flex; align-items:center; gap:.4rem; }
.edu-school i { font-size:.75rem; }
.edu-degree { font-family:var(--ff-d); font-size:1.28rem; font-weight:700; color:var(--tx-0); margin-bottom:.55rem; line-height:1.25; }
.edu-desc { font-size:.84rem; color:var(--tx-1); line-height:1.78; margin-bottom:.8rem; }
.edu-tags { display:flex; flex-wrap:wrap; gap:.38rem; }
.edu-tag { font-size:.66rem; padding:.14rem .48rem; background:var(--bg-2); border:1px solid var(--border-d); border-radius:10px; color:var(--tx-2); }

/* Education photo strip */
.edu-photo-strip { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:1.2rem; }

.cert-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.2rem; margin-top:1rem; }
.cert-card {
  padding:1.4rem; border:1px solid var(--border); border-radius:3px;
  background:var(--bg-1); transition:box-shadow .22s, transform .22s;
  display:flex; flex-direction:column; gap:.4rem;
}
.cert-card:hover { box-shadow:var(--shadow); transform:translateY(-3px); }
.cert-icon { font-size:1.5rem; }
.cert-name { font-weight:600; color:var(--tx-0); font-size:.9rem; }
.cert-org  { font-size:.76rem; color:var(--tx-2); }
.cert-year { font-family:var(--ff-m); font-size:.65rem; color:var(--ochre); margin-top:.2rem; }

/* ══════════════════════════════════════════════════════════
   PROJECTS PAGE
══════════════════════════════════════════════════════════ */
.proj-filter { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.5rem; }
.proj-filter-btn {
  padding:.32rem .85rem; border:1px solid var(--border); border-radius:20px;
  font-size:.78rem; font-weight:500; color:var(--tx-2);
  background:var(--bg-0); cursor:pointer; transition:all .2s;
}
.proj-filter-btn:hover,
.proj-filter-btn.active { background:var(--grd-ochre); border-color:transparent; color:#faf6ef; }

.proj-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.8rem; }

.proj-card {
  background:var(--bg-0); border:1px solid var(--border);
  border-radius:4px; overflow:hidden;
  transition:transform .25s, box-shadow .25s;
  display:flex; flex-direction:column;
  position:relative;
}
.proj-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }

.proj-ribbon {
  position:absolute; top:14px; right:-28px;
  background:var(--grd-ochre); color:#faf6ef;
  font-size:.62rem; font-family:var(--ff-m); letter-spacing:.1em;
  text-transform:uppercase; padding:.22rem 2.5rem;
  transform:rotate(45deg); z-index:5;
  box-shadow:0 2px 8px rgba(181,112,16,.3);
}

.proj-img-wrap { position:relative; overflow:hidden; aspect-ratio:16/9; background:var(--bg-2); }
.proj-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.proj-card:hover .proj-img-wrap img { transform:scale(1.06); }
.proj-img-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(22,17,10,.75) 0%,transparent 55%);
  display:flex; align-items:flex-end; padding:.9rem;
}
.proj-tags { display:flex; flex-wrap:wrap; gap:.32rem; }
.proj-tag {
  font-size:.6rem; font-family:var(--ff-m); letter-spacing:.05em;
  padding:.16rem .44rem; background:rgba(250,246,239,.88);
  color:var(--tx-1); border-radius:10px; font-weight:500;
}
.proj-body { padding:1.5rem; flex:1; display:flex; flex-direction:column; }
.proj-cat { font-size:.62rem; font-family:var(--ff-m); letter-spacing:.12em; text-transform:uppercase; color:var(--ochre); margin-bottom:.4rem; }
.proj-title { font-family:var(--ff-d); font-size:1.12rem; font-weight:700; color:var(--tx-0); margin-bottom:.55rem; line-height:1.28; }
.proj-desc { font-size:.82rem; color:var(--tx-2); line-height:1.7; flex:1; }
.proj-meta { margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--border-d); display:flex; flex-wrap:wrap; gap:.4rem; }
.proj-meta-tag { font-size:.64rem; padding:.1rem .4rem; background:var(--bg-2); border-radius:2px; color:var(--tx-2); }
.proj-links { display:flex; gap:.75rem; margin-top:1.1rem; }
.proj-link {
  font-size:.78rem; font-weight:600; color:var(--ochre);
  display:inline-flex; align-items:center; gap:.3rem; transition:color .2s;
}
.proj-link:hover { color:var(--rust); }
.proj-link i { font-size:.75rem; }

/* Featured project (full-width) */
.proj-featured { grid-column:1/-1; display:grid; grid-template-columns:1.4fr 1fr; }
.proj-featured .proj-img-wrap { aspect-ratio:unset; }
.proj-featured .proj-img-wrap img { height:100%; }
.proj-featured .proj-title { font-size:1.35rem; }

/* ══════════════════════════════════════════════════════════
   WEBGIS PAGE (full-screen)
══════════════════════════════════════════════════════════ */
.wg-page-wrap { height:100vh; display:flex; flex-direction:column; overflow:hidden; padding-top:54px; }
.wg-topbar { display:flex; justify-content:space-between; align-items:center; padding:.42rem 1.4rem; background:var(--bg-2); border-bottom:1px solid var(--border); flex-shrink:0; }
.wg-topbar .mono { font-size:.63rem; color:var(--tx-3); }
.wg-topbar-title { font-size:.7rem; color:var(--ochre); font-family:var(--ff-m); letter-spacing:.08em; }
.wg-layout { display:flex; flex:1; overflow:hidden; height:0; }

/* Side panel */
.side-panel { width:320px; min-width:320px; height:100%; display:flex; flex-direction:column; overflow-y:auto; background:var(--bg-0); border-right:1px solid var(--border); z-index:10; }
.side-panel::-webkit-scrollbar { width:3px; }
.side-panel::-webkit-scrollbar-thumb { background:var(--bg-3); border-radius:2px; }
.sp-brand { padding:1.3rem 1.4rem 1rem; border-bottom:1px solid var(--border); flex-shrink:0; background:var(--bg-1); }
.sp-brand-tag { display:inline-block; font-size:.62rem; letter-spacing:.32em; color:var(--ochre); margin-bottom:.45rem; }
.sp-brand-title { font-family:var(--ff-d); font-size:1.55rem; font-weight:700; line-height:1.12; color:var(--tx-0); margin-bottom:.3rem; }
.sp-brand-sub { font-size:.73rem; color:var(--tx-2); }
.sp-block { padding:1.15rem 1.4rem; border-bottom:1px solid var(--border-d); flex-shrink:0; }
.sp-step-num { font-family:var(--ff-m); font-size:.58rem; letter-spacing:.3em; color:var(--ochre); margin-bottom:.32rem; }
.sp-block-title { font-family:var(--ff-d); font-size:.98rem; font-weight:600; color:var(--tx-0); margin-bottom:.75rem; display:flex; align-items:center; gap:.5rem; }
.sp-radius-live { font-family:var(--ff-m); font-size:.75rem; color:var(--ochre); font-style:normal; }
.sp-btn { width:100%; padding:.58rem 1rem; border-radius:2px; border:none; cursor:pointer; font-family:var(--ff-b); font-size:.82rem; font-weight:600; transition:all .22s; }
.sp-btn.geolocate { background:rgba(181,112,16,.09); color:var(--ochre); border:1px solid var(--border); }
.sp-btn.geolocate:hover { background:rgba(181,112,16,.16); }
.sp-btn.search { background:var(--grd-ochre); color:#faf6ef; margin-top:.75rem; }
.sp-btn.search:hover:not(:disabled) { opacity:.88; }
.sp-btn.search:disabled { background:var(--bg-3); color:var(--tx-3); cursor:not-allowed; }
.sp-hint { font-size:.7rem; color:var(--tx-3); text-align:center; margin:.5rem 0 0; }
.sp-loc-display { display:flex; align-items:center; gap:.5rem; margin-top:.65rem; padding:.48rem .7rem; background:rgba(181,112,16,.07); border:1px solid var(--border); border-radius:2px; }
.sp-loc-icon { color:var(--ochre); font-size:.88rem; }
#loc-text { font-size:.7rem; color:var(--tx-1); }
.sp-range { width:100%; -webkit-appearance:none; appearance:none; height:3px; border-radius:2px; outline:none; cursor:pointer; margin-bottom:.45rem; background:linear-gradient(to right,var(--ochre) 0%,var(--ochre) 20%,var(--bg-3) 20%); }
.sp-range::-webkit-slider-thumb { -webkit-appearance:none; width:15px; height:15px; border-radius:50%; background:var(--grd-ochre); border:2px solid var(--bg-0); cursor:pointer; }
.sp-range::-moz-range-thumb { width:13px; height:13px; border-radius:50%; background:var(--ochre); border:2px solid var(--bg-0); }
.sp-range-labels { display:flex; justify-content:space-between; font-size:.6rem; color:var(--tx-3); margin-bottom:.2rem; font-family:var(--ff-m); }
.sp-results-block { flex:1; display:flex; flex-direction:column; min-height:0; }
.sp-filter-wrap { margin-bottom:.85rem; }
.sp-filter-label { display:block; font-size:.66rem; font-family:var(--ff-m); letter-spacing:.12em; color:var(--ochre); text-transform:uppercase; margin-bottom:.38rem; }
.sp-select-box { position:relative; }
.sp-select { width:100%; padding:.52rem .8rem; background:var(--bg-2); color:var(--tx-0); border:1px solid var(--border); border-radius:2px; font-family:var(--ff-b); font-size:.82rem; appearance:none; -webkit-appearance:none; cursor:pointer; outline:none; transition:border-color .2s; }
.sp-select:focus { border-color:var(--border-h); }
.sp-select-arrow { position:absolute; right:.8rem; top:50%; transform:translateY(-50%); color:var(--ochre); pointer-events:none; font-size:.75rem; }
.sp-filter-count { font-size:.68rem; color:var(--tx-2); margin-top:.32rem; height:.9rem; }
.sp-dest-list { overflow-y:auto; flex:1; }
.sp-dest-list::-webkit-scrollbar { width:3px; }
.sp-dest-list::-webkit-scrollbar-thumb { background:var(--bg-3); }
.dest-item { display:flex; align-items:flex-start; gap:.7rem; padding:.7rem .9rem; cursor:pointer; border-bottom:1px solid var(--border-d); transition:background .18s; }
.dest-item:hover { background:var(--bg-1); }
.dest-item.highlighted { background:var(--bg-2); }
.dest-dot-wrap { flex-shrink:0; padding-top:.22rem; }
.dest-color-dot { width:9px; height:9px; border-radius:50%; border:1.5px solid rgba(28,23,16,.25); display:block; }
.dest-info { flex:1; min-width:0; }
.dest-name { font-size:.83rem; font-weight:600; color:var(--tx-0); line-height:1.3; margin-bottom:.18rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dest-meta { display:flex; align-items:center; gap:.48rem; flex-wrap:wrap; }
.dest-cat-badge { font-size:.58rem; font-family:var(--ff-m); letter-spacing:.06em; padding:.08rem .32rem; border-radius:2px; border:1px solid; opacity:.82; }
.dest-dist    { font-size:.64rem; color:var(--tx-3); font-family:var(--ff-m); }
.dest-rating  { font-size:.63rem; color:var(--ochre); }
.dest-visitors { font-size:.64rem; font-weight:600; font-family:var(--ff-m); }
.cat-heritage  { color:#b57010; border-color:#b57010; } .cat-religion  { color:#a8321c; border-color:#a8321c; }
.cat-trekking  { color:#3d6e45; border-color:#3d6e45; } .cat-wildlife  { color:#245c38; border-color:#245c38; }
.cat-adventure { color:#9a3515; border-color:#9a3515; } .cat-viewpoint { color:#3a62a0; border-color:#3a62a0; }
.cat-nature    { color:#28807a; border-color:#28807a; } .cat-cultural  { color:#6a4ea0; border-color:#6a4ea0; }
.sp-note { padding:.85rem 1.4rem; border-top:1px solid var(--border); background:rgba(181,112,16,.04); flex-shrink:0; font-size:.7rem; color:var(--tx-3); line-height:1.6; }
.sp-note-label { display:block; font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--rust-l); margin-bottom:.28rem; }
#map { flex:1; height:100%; min-height:0; background:#e8e0d8; position:relative; z-index:1; }
.leaflet-interactive { cursor:pointer; }
.info-panel { background:rgba(250,246,239,.97) !important; border:1px solid rgba(181,112,16,.3) !important; border-radius:3px; padding:13px 16px; font-family:'Source Sans 3',sans-serif; min-width:218px; max-width:265px; color:#1c1710; box-shadow:var(--shadow); }
.info-panel h4 { font-family:'Playfair Display',serif; font-size:1.02rem; font-weight:700; color:#b57010; margin-bottom:6px; padding-bottom:5px; border-bottom:1px solid rgba(181,112,16,.2); line-height:1.22; }
.info-panel .info-type { font-family:'IBM Plex Mono',monospace; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px; display:block; }
.info-panel p { font-size:.78rem; line-height:1.7; color:#6b5c48; margin:1px 0; }
.info-panel p strong { color:#1c1710; font-weight:600; }
.info-placeholder { font-size:.73rem; color:#b8a888; font-style:italic; line-height:1.6; }
.legend-panel { background:rgba(250,246,239,.97) !important; border:1px solid rgba(181,112,16,.25) !important; border-radius:3px; padding:11px 15px; font-family:'Source Sans 3',sans-serif; box-shadow:var(--shadow); max-height:calc(100vh - 110px); overflow-y:auto; }
.legend-section-title { display:block; font-family:'Playfair Display',serif; font-size:.8rem; font-weight:700; color:#b57010; letter-spacing:.03em; margin-bottom:6px; }
.legend-item { display:flex; align-items:center; gap:7px; margin:3px 0; font-size:.7rem; color:#6b5c48; }
.legend-swatch { width:16px; height:10px; border-radius:1px; flex-shrink:0; border:1px solid rgba(0,0,0,.1); }
.legend-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; border:1.5px solid rgba(0,0,0,.2); }
.legend-divider { border:none; border-top:1px solid rgba(181,112,16,.15); margin:7px 0; }

/* ══════════════════════════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════════════════════════ */
.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:4rem; align-items:start; }
.contact-info-title { font-family:var(--ff-d); font-size:1.5rem; font-weight:700; color:var(--tx-0); margin-bottom:.8rem; }
.contact-info-text  { font-size:.9rem; color:var(--tx-2); line-height:1.8; margin-bottom:2rem; }
.cinfo-items { display:flex; flex-direction:column; gap:.9rem; margin-bottom:2rem; }
.cinfo-item { display:flex; align-items:center; gap:1rem; }
.cinfo-icon {
  width:40px; height:40px; background:rgba(181,112,16,.1); border:1px solid var(--border);
  border-radius:3px; display:flex; align-items:center; justify-content:center;
  font-size:.95rem; color:var(--ochre); flex-shrink:0;
  transition:background .22s;
}
.cinfo-item:hover .cinfo-icon { background:rgba(181,112,16,.18); }
.cinfo-label { font-size:.66rem; font-family:var(--ff-m); letter-spacing:.1em; text-transform:uppercase; color:var(--ochre); }
.cinfo-value { font-size:.88rem; color:var(--tx-1); font-weight:500; }
.cinfo-value a { color:inherit; transition:color .2s; }
.cinfo-value a:hover { color:var(--ochre); }

.contact-form-wrap {
  background:var(--bg-1); border:1px solid var(--border); border-radius:4px;
  padding:2.5rem; box-shadow:var(--shadow-sm);
}
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.form-group { margin-bottom:1.2rem; }
.form-group label { display:block; font-size:.78rem; font-weight:600; letter-spacing:.04em; color:var(--tx-1); margin-bottom:.42rem; }
.form-input {
  width:100%; padding:.62rem .9rem;
  border:1.5px solid var(--border); border-radius:2px;
  background:var(--bg-0); color:var(--tx-0);
  font-family:var(--ff-b); font-size:.9rem; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.form-input:focus { border-color:var(--ochre); box-shadow:0 0 0 3px rgba(181,112,16,.12); }
textarea.form-input { resize:vertical; min-height:130px; }
.form-submit {
  width:100%; padding:.72rem 1rem;
  background:var(--grd-ochre); color:#faf6ef;
  border:none; border-radius:2px; cursor:pointer;
  font-family:var(--ff-b); font-size:.92rem; font-weight:700;
  transition:opacity .22s; display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.form-submit:hover { opacity:.88; }

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
.footer {
  position:relative; z-index:1;
  background:var(--dark-0); color:rgba(245,236,224,.55);
  padding:4rem 3rem 2rem;
  border-top:3px solid transparent;
  border-image:var(--grd-ochre) 1;
}
.footer-inner { max-width:1100px; margin:0 auto; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer-brand-name { font-family:var(--ff-d); font-size:1.5rem; font-weight:700; color:#f5ece0; margin-bottom:.5rem; }
.footer-brand-name span { color:var(--ochre-ll); font-style:italic; }
.footer-brand-desc { font-size:.82rem; line-height:1.72; max-width:260px; margin-bottom:1.2rem; }
.footer-col-title { font-family:var(--ff-m); font-size:.63rem; letter-spacing:.25em; text-transform:uppercase; color:var(--ochre-ll); margin-bottom:1rem; }
.footer-col-links { list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.footer-col-links a { font-size:.83rem; color:rgba(245,236,224,.5); transition:color .2s; display:flex; align-items:center; gap:.4rem; }
.footer-col-links a:hover { color:var(--ochre-ll); }
.footer-col-links i { font-size:.75rem; }
.footer-bottom { border-top:1px solid rgba(181,112,16,.15); padding-top:1.5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; }
.footer-copy  { font-size:.72rem; }
.footer-files { font-family:var(--ff-m); font-size:.65rem; color:rgba(245,236,224,.3); }

/* ── Footer social icons ── */
.footer-social { display:flex; gap:.55rem; }
.footer-soc {
  width:34px; height:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(245,236,224,.15); color:rgba(245,236,224,.5);
  font-size:.8rem; transition:all .22s;
}
.footer-soc:hover { color:#faf6ef; border-color:var(--ochre-ll); background:rgba(181,112,16,.15); }

/* ── Scrollbar ── */
::-webkit-scrollbar              { width:5px; }
::-webkit-scrollbar-track        { background:var(--bg-1); }
::-webkit-scrollbar-thumb        { background:var(--bg-3); border-radius:2px; }
::-webkit-scrollbar-thumb:hover  { background:#c8b898; }

/* ── Responsive ── */
@media(max-width:1000px) {
  .about-grid    { grid-template-columns:1fr; }
  .about-photo-wrap { position:static; max-width:280px; }
  .contact-grid  { grid-template-columns:1fr; }
  .skills-layout { grid-template-columns:1fr; }
  .proj-featured { grid-template-columns:1fr; grid-column:auto; }
  .footer-grid   { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
  .nav { padding:.75rem 1.5rem;
   }
  .nav-links { gap:1.1rem; }
  .nav-cta   { display:none; }
  .home-hero-content { padding:8rem 1.5rem 5rem; }
  .home-stats { grid-template-columns:1fr 1fr; }
  .home-cards { grid-template-columns:1fr; }
  .page-banner  { padding:7rem 1.5rem 2.5rem; }
  .page-content { padding:3.5rem 1.5rem; }
  .edu-item  { grid-template-columns:48px 1fr; gap:1rem; }
  .form-row  { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .wg-layout { flex-direction:column; }
  .side-panel { width:100%; min-width:unset; height:44vh; border-right:none; border-bottom:1px solid var(--border); }
  #map { height:56vh; }
  .proj-featured { grid-column:auto; grid-template-columns:1fr; }
}

/* ======================================================
   IMAGE CARDS
====================================================== */

.home-card{
  position:relative;
  overflow:hidden;
  min-height:360px;

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  border:none;
}

.card-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.82),
      rgba(0,0,0,.45)
    );

  display:flex;
  flex-direction:column;
  justify-content:flex-end;

  padding:2rem;

  transition:.35s ease;
}

.home-card:hover .card-overlay{
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.100),
      rgba(0,0,0,.100)
    );
}

.card-gis{
  background-image:url("gis\,carto.jpg");
}

.card-webgis{
  background-image:url("webgis.jpeg");
}

.card-rs{
  background-image:url("rs.jpeg");
}

.home-card h3{
  color:#fff;
  font-size:1.4rem;
  margin-bottom:.8rem;
}

.home-card p{
  color:rgba(255, 255, 255, 0.92);
  line-height:1.8;
}

.home-card-link{
  color:#ffd27d;
  font-weight:700;
  margin-top:1rem;
}

.home-card-icon{
  width:55px;
  height:55px;

  background:rgba(255,255,255,.12);

  border:1px solid rgba(255,255,255,.25);

  backdrop-filter:blur(8px);

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  margin-bottom:1rem;
}

.home-card-icon i{
  color:white;
  font-size:1.2rem;
}