/* AR. HASEEB ULLAH — ARCHITECTURAL PRACTICE
   Design language: the architect's drawing sheet, redrawn as a cyanotype —
   the original "blueprint" was always dark paper with light ink, so a dark
   theme is right at home here. Deep ink ground, warm parchment type, a
   luminous cyanotype-blue accent, and a brass scale-rule accent. */

:root{
  --paper:        #17150F;
  --paper-dim:    #1C1A12;
  --paper-line:   rgba(237,231,218,.16);
  --ink:          #0B0A07;
  --ink-soft:     #C9C2AE;
  --ink-faint:    #96906F;
  --blue:         #3FB6D3;
  --blue-deep:    #0F5A6E;
  --blue-light:   #58C9E3;
  --blue-wash:    rgba(63,182,211,.14);
  --brass:        #C9A466;
  --brass-light:  #E4C384;
  --white:        #FBF9F3;
  --text:         #EDE7DA;
  --surface:      #221F16;

  --font-display: "Montserrat", "Segoe UI", sans-serif;
  --font-sans:    "Inter", "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "Courier New", monospace;

  --radius: 2px;
  --container-pad: clamp(1.25rem, 4vw, 3.5rem);
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--paper);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

main{flex:1 0 auto;}

a{color:inherit;text-decoration:none;}
::selection{background:var(--blue);color:var(--ink);}

h1,h2,h3,h4,.font-display{font-family:var(--font-display);}
.font-mono{font-family:var(--font-mono);}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brass-light);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}

.section-title{
  font-size:clamp(1.9rem,3.2vw,2.6rem);
  font-weight:600;
  color:var(--text);
  margin:.35rem 0 0;
}

.section-pad{padding:5rem var(--container-pad);}
.container-wide{max-width:1360px;margin:0 auto;padding:0 var(--container-pad);}

hr.rule{border:0;border-top:1px solid var(--paper-line);margin:2.5rem 0;}

.blueprint-ground{
  background-color:var(--ink);
  color:var(--white);
}

/* SITE HEADER */
.site-header{
  background:var(--ink);
  border-bottom:1px solid rgba(220,231,230,.12);
  position:sticky;top:0;z-index:1030;
}
.site-header .navbar-brand{
  font-family:var(--font-display);
  color:var(--white);
  font-size:1.15rem;
  letter-spacing:.03em;
  display:flex;flex-direction:column;line-height:1.05;
}
.site-header .navbar-brand small{
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.14em;
  color:var(--brass-light);
  text-transform:uppercase;
  margin-top:.15rem;
}
.site-nav .nav-link{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(251,249,243,.7) !important;
  padding:.5rem .9rem !important;
  position:relative;
}
.site-nav .nav-link:hover,.site-nav .nav-link.active{color:var(--white) !important;}
.site-nav .nav-link.active::after{
  content:"";position:absolute;left:.9rem;right:.9rem;bottom:.15rem;height:2px;background:var(--brass-light);
}
.navbar-toggler{border-color:rgba(255,255,255,.25);}
.navbar-toggler-icon{filter:invert(1);}

/* Small, deliberately understated admin-access icon in the public navbar —
   discoverable for the site owner without reading as a public "Admin" CTA. */
.nav-admin-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(251,249,243,.22);
  color:rgba(251,249,243,.5);
  font-size:.72rem;
  transition:.2s ease;
}
.nav-admin-icon:hover{border-color:var(--brass-light);color:var(--brass-light);}

/* SHEET TITLE BLOCK (signature) */
.title-block{
  background:var(--surface);
  border-bottom:1px solid var(--paper-line);
}
.title-block .tb-inner{
  display:grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap:0;
}
.title-block .tb-cell{
  padding:.55rem var(--container-pad);
  border-right:1px solid var(--paper-line);
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.06em;
  color:var(--ink-faint);
  display:flex;flex-direction:column;justify-content:center;
}
.title-block .tb-cell:last-child{border-right:0;}
.title-block .tb-cell b{
  display:block;color:var(--text);font-size:.78rem;letter-spacing:.02em;
  font-weight:700;
}
.title-block .tb-sheet{color:var(--blue);font-weight:700;}
@media (max-width:900px){
  .title-block .tb-inner{grid-template-columns:auto 1fr;}
  .title-block .tb-scale,.title-block .tb-date,.title-block .tb-drawnby{display:none;}
}

/* BUTTONS */
.btn-ink{
  background:var(--text);color:var(--ink);border:1px solid var(--text);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.75rem 1.5rem;border-radius:var(--radius);transition:.2s ease;
}
.btn-ink:hover{background:transparent;color:var(--text);}
.btn-brass{
  background:var(--brass);color:var(--ink);border:1px solid var(--brass);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.75rem 1.5rem;border-radius:var(--radius);transition:.2s ease;
}
.btn-brass:hover{background:transparent;color:var(--brass);}
.btn-outline-paper{
  border:1px solid rgba(251,249,243,.4);color:var(--white);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.7rem 1.3rem;border-radius:var(--radius);transition:.2s ease;
}
.btn-outline-paper:hover{background:var(--white);color:var(--ink);}

/* HERO */
.hero{position:relative;min-height:78vh;overflow:hidden;color:var(--white);}
.hero-slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:brightness(.5) saturate(1.05);
  transition:opacity 1s ease;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(28,27,24,.25) 0%, rgba(28,27,24,.55) 60%, rgba(28,27,24,.92) 100%);
}
.hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--container-pad) 2.5rem;min-height:78vh;}
.hero-title{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:600;max-width:760px;}
.hero-panels{display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:space-between;align-items:flex-end;margin-top:2rem;}

.profile-chip{
  display:flex;align-items:center;gap:1.4rem;background:rgba(28,27,24,.85);
  border:1px solid rgba(251,249,243,.15);padding:1.4rem 1.9rem;border-radius:8px;backdrop-filter:blur(6px);
}
.profile-chip img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid var(--brass-light);}
.profile-chip .name{font-family:var(--font-display);font-weight:700;font-size:1.35rem;}
.profile-chip .role{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--brass-light);text-transform:uppercase;}
.profile-chip .socials a{color:rgba(251,249,243,.75);margin-right:.7rem;font-size:1.1rem;}
.profile-chip .socials a:hover{color:var(--brass-light);}

.upcoming-chip{
  background:rgba(28,27,24,.85);border:1px solid rgba(251,249,243,.15);border-radius:6px;
  padding:1rem 1.4rem;max-width:380px;backdrop-filter:blur(6px);
}
.upcoming-chip .tag{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-light);
  border:1px solid rgba(199,164,101,.4);padding:.15rem .5rem;border-radius:3px;
}
.upcoming-chip h3{font-size:1.1rem;margin:.6rem 0 .25rem;}
.upcoming-chip p{font-size:.78rem;color:rgba(251,249,243,.7);margin:0;}
.slide-dots{display:flex;gap:.35rem;margin-top:.8rem;}
.slide-dots button{width:18px;height:3px;border:0;background:rgba(251,249,243,.3);cursor:pointer;}
.slide-dots button.active{background:var(--brass-light);}

/* ABOUT TEASER BACKGROUND SLIDESHOW */
.about-bg-section{color:var(--white);}
.about-slides{position:absolute;inset:0;z-index:0;}
.about-slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:brightness(.32) saturate(1.05);
  transition:opacity 1.2s ease;
}
.about-bg-section::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg, rgba(11,10,7,.92) 0%, rgba(11,10,7,.78) 45%, rgba(11,10,7,.4) 100%);
}

/* CARDS */
.card-plate{
  background:var(--surface);border:1px solid var(--paper-line);border-radius:var(--radius);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  height:100%;
}
.card-plate:hover{transform:translateY(-6px);box-shadow:0 18px 34px -14px rgba(0,0,0,.6),0 0 0 1px rgba(63,182,211,.12);border-color:var(--blue);}

.category-card{
  position:relative;height:280px;border-radius:var(--radius);overflow:hidden;cursor:pointer;
  border:1px solid var(--paper-line);
}
.category-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;filter:saturate(1.05);}
.category-card:hover img{transform:scale(1.08);}
.category-card .overlay{
  position:absolute;inset:0;background:linear-gradient(0deg, rgba(28,27,24,.88) 0%, rgba(28,27,24,.2) 55%, rgba(28,27,24,.05) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:1.2rem;color:var(--white);
}
.category-card .idx{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.1em;color:var(--brass-light);}
.category-card h3{font-size:1.25rem;margin:.2rem 0;}
.category-card .count{font-family:var(--font-mono);font-size:.68rem;color:rgba(251,249,243,.75);}

.project-card .imgwrap{height:230px;overflow:hidden;border-bottom:1px solid var(--paper-line);position:relative;}
.project-card .imgwrap img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.project-card:hover .imgwrap img{transform:scale(1.06);}
.project-card .body{padding:1.25rem 1.35rem;}
.project-card .meta{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.05em;color:var(--ink-faint);text-transform:uppercase;}
.project-card h3{font-size:1.15rem;margin:.35rem 0;}
.project-card .badge-cat{
  position:absolute;top:.7rem;left:.7rem;background:var(--blue-deep);color:var(--white);
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.25rem .55rem;border-radius:2px;
}

.service-card,.process-card{padding:2rem 1.6rem;}
.service-card i,.process-card .step{color:var(--blue);}
.service-card i{font-size:1.6rem;}
.process-card .step{font-family:var(--font-mono);font-weight:700;font-size:1.6rem;color:var(--paper-line);}
.process-card h3{font-size:1.05rem;margin:.6rem 0 .4rem;}

.ebook-card .cover{height:210px;overflow:hidden;border-bottom:1px solid var(--paper-line);}
.ebook-card .cover img{width:100%;height:100%;object-fit:cover;}
.ebook-card .body{padding:1.2rem 1.3rem;}
.ebook-card .type-tag{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brass-light);border:1px solid var(--blue-wash);background:var(--blue-wash);padding:.15rem .5rem;border-radius:2px;
}

/* FOOTER */
.site-footer{background:var(--ink);color:rgba(251,249,243,.65);border-top:1px solid rgba(220,231,230,.12);}
.site-footer a:hover{color:var(--brass-light);}
.site-footer .studio-access{
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.06em;color:rgba(251,249,243,.35);
}
.site-footer .studio-access:hover{color:rgba(251,249,243,.65);}

/* MISC */
.page-hero-sm{
  padding:3.2rem var(--container-pad) 2.5rem;
  border-bottom:1px solid rgba(220,231,230,.12);
  position:relative;
  overflow:hidden;
  background:var(--ink);
}
.page-hero-sm .section-title{color:var(--white);}
.page-hero-sm .container-wide{position:relative;z-index:2;}

/* Crossfading background slideshow for inner-page intros (e.g. Portfolio) */
.page-bg-slider{position:absolute;inset:0;z-index:0;}
.page-bg-slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:brightness(.32) saturate(1.05);
  transition:opacity 1.2s ease;
}
.page-bg-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg, rgba(11,10,7,.9) 0%, rgba(11,10,7,.7) 50%, rgba(11,10,7,.4) 100%);
}

.pagination-plates .page-link{
  font-family:var(--font-mono);font-size:.75rem;background:var(--surface);border-color:var(--paper-line);color:var(--text);
}
.pagination-plates .page-item.active .page-link{background:var(--blue-deep);border-color:var(--blue-deep);color:var(--white);}

.toast-plate{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:2000;
  background:var(--ink);color:var(--white);padding:.9rem 1.3rem;border-radius:var(--radius);
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.03em;
  border-left:3px solid var(--brass-light);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.4);
  transform:translateY(20px);opacity:0;transition:.3s ease;pointer-events:none;
}
.toast-plate.show{transform:translateY(0);opacity:1;}

.skip-link{position:absolute;left:-999px;top:0;background:var(--brass);color:var(--white);padding:.6rem 1rem;z-index:2000;}
.skip-link:focus{left:1rem;top:1rem;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
}

/* Visible focus ring throughout */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;
}