:root{
  --bg:#ffffff;
  --fg:#111111;
  --muted:#767676;
  --border:#e4e4e4;
  --img-filter:grayscale(1) contrast(1.05);
  --transition:180ms ease;
  --nav-h:84px;
  --footer-h:96px;
}
html[data-theme="night"]{
  --bg:#0b0b0b;
  --fg:#f2f2f2;
  --muted:#8c8c8c;
  --border:#242424;
  --img-filter:grayscale(1) contrast(1.05) brightness(.9);
}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:'Inter', sans-serif;
  font-weight:400;
  transition:background var(--transition), color var(--transition);
  padding-top:var(--nav-h);
  padding-bottom:var(--footer-h);
}
a{color:var(--fg);}

/* container-narrow now fully owns width/centering/gutter itself —
   Bootstrap's .container class is no longer used alongside it, so
   there's no cascade/specificity race for the side padding to lose. */
.container-narrow{
  width:100%;
  max-width:1080px;
  margin-left:auto;
  margin-right:auto;
  padding-left:20px;
  padding-right:20px;
  box-sizing:border-box;
}
@media (min-width:576px){
  .container-narrow{padding-left:28px; padding-right:28px;}
}
@media (min-width:768px){
  .container-narrow{padding-left:36px; padding-right:36px;}
}
@media (min-width:992px){
  .container-narrow{padding-left:40px; padding-right:40px;}
}

.measure{max-width:56ch;}
hr, .border-top, .border-bottom{border-color:var(--border) !important;}

/* ---------- NAV ---------- */
/* ---------- NAV (fixed) ---------- */
.navbar-fixed{
  position:fixed;
  top:0; left:0; right:0;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  z-index:1000;
  transition:background var(--transition), border-color var(--transition);
}
.navbar{padding-top:1.75rem; padding-bottom:1.75rem; position:relative;}

.nav-brand{
  display:inline-flex; align-items:center; gap:11px;
  text-decoration:none; color:var(--fg);
}
.nav-logo{
  width:42px; height:42px; flex:none;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  padding:7px;
  box-sizing:border-box;
}
.nav-logo svg{width:100%; height:100%; display:block;}
.nav-name{font-size:15px; letter-spacing:-0.01em; white-space:nowrap;}
.nav-name-primary{font-weight:700; color:var(--fg);}
.nav-name-secondary{font-weight:400; color:var(--muted); margin-left:5px;}
@media (max-width:400px){ .nav-name-secondary{display:none;} }
.nav-links a, .nav-links-mobile a{
  color:var(--muted); text-decoration:none; font-size:13px; font-weight:500;
  letter-spacing:.02em; transition:color var(--transition);
}
.nav-links a{margin-left:20px;}
.nav-links a:hover, .nav-links-mobile a:hover{color:var(--fg);}
.nav-links a.active, .nav-links-mobile a.active{color:var(--fg); text-decoration:underline; text-underline-offset:4px;}

.navbar-toggle-btn{
  background:none; border:1px solid var(--border); border-radius:8px;
  width:36px; height:36px; color:var(--fg); font-size:14px;
}
.nav-links-mobile{
  display:none;
  flex-direction:column;
  gap:14px;
  position:absolute;
  top:100%;
  left:0; right:0;
  background:var(--bg);
  padding:20px 0 24px;
  border-top:1px solid var(--border);
  z-index:999;
}
.nav-links-mobile.open{display:flex;}
.nav-links-mobile a{font-size:14px;}
.nav-links-mobile .mode-switch{align-self:flex-start; margin-top:6px;}

/* day/night switch */
.mode-switch{
  position:relative; display:inline-flex; align-items:center;
  font-family:'Inter', sans-serif; font-size:12px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; background:none;
  border:1px solid var(--border); border-radius:999px; padding:4px;
  cursor:pointer; color:var(--fg); margin-left:20px;
}
.mode-switch span{
  position:relative; z-index:2; padding:5px 12px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  flex:0 0 auto; min-width:74px; white-space:nowrap; transition:color var(--transition);
}
.mode-switch .indicator{
  position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px);
  background:var(--fg); border-radius:999px;
  transition:transform 220ms cubic-bezier(.65,0,.35,1); z-index:1;
}
html[data-theme="night"] .mode-switch .indicator{transform:translateX(100%);}
.mode-switch span:first-child{color:var(--bg);}
html[data-theme="day"] .mode-switch span:first-child{color:#ffffff;} /* explicit: active "Day" label is always white against the dark indicator */
html[data-theme="night"] .mode-switch span:first-child{color:var(--muted);}
html[data-theme="day"] .mode-switch span:last-child{color:var(--muted);}
.mode-switch span:last-child{color:var(--bg);}

/* ---------- HERO (home) ---------- */
header.hero{padding-top:4rem; padding-bottom:4.5rem;}
.hero-grid{display:grid; grid-template-columns:1fr; gap:40px; align-items:center;}
.eyebrow{font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:20px;}
h1{font-size:44px; line-height:1.12; font-weight:700; letter-spacing:-0.03em; margin-bottom:24px;}
h1 em{font-style:normal; font-weight:300; color:var(--muted);}
.lede{font-size:17px; line-height:1.7; color:var(--muted); max-width:56ch;}
.lede strong{color:var(--fg); font-weight:600;}
.hero-photo{width:100%; aspect-ratio:4/5; object-fit:cover; filter:var(--img-filter); border:1px solid var(--border); display:block;}
@media (min-width:992px){
  header.hero{padding-top:5.5rem; padding-bottom:5.5rem;}
  .hero-grid{grid-template-columns:1.3fr 1fr;}
  h1{font-size:56px;}
}

/* ---------- PAGE HEAD (inner pages) ---------- */
.page-head{padding-top:4rem; padding-bottom:3rem;}
.page-title{font-size:36px; line-height:1.15; font-weight:700; letter-spacing:-0.03em; margin:0;}
.page-title em{font-style:normal; font-weight:300; color:var(--muted);}
@media (min-width:992px){ .page-title{font-size:46px;} }

/* ---------- SECTION LABEL ---------- */
.section{padding-top:3.5rem; padding-bottom:3.5rem;}
.section-label{display:flex; align-items:baseline; gap:14px; margin-bottom:28px;}
.section-label h2{font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; margin:0;}
.section-label i{color:var(--muted); font-size:13px;}

p{font-size:16px; line-height:1.75; color:var(--fg);}
.muted-text{color:var(--muted);}

.btn-line{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  text-decoration:none; color:var(--fg); border-bottom:1px solid var(--fg); padding-bottom:3px;
  transition:opacity var(--transition);
}
.btn-line:hover{opacity:.6;}

/* ---------- WORK / PROJECT LIST ---------- */
.work-list{display:grid; grid-template-columns:1fr;}
.work-item{
  display:grid; grid-template-columns:96px 1fr auto; gap:20px; align-items:center;
  padding:20px 0; border-top:1px solid var(--border); text-decoration:none; color:var(--fg);
}
.work-item:first-child{border-top:none;}
.work-thumb{width:96px; height:72px; object-fit:cover; filter:var(--img-filter); border:1px solid var(--border); display:block;}
.work-info h3{font-size:16px; font-weight:600; margin:0 0 4px; letter-spacing:-0.01em;}
.work-info p{font-size:14px; color:var(--muted); margin:0; line-height:1.5;}
.work-item .fa-arrow-up-right{font-size:12px; color:var(--muted); opacity:0; transition:opacity var(--transition), transform var(--transition);}
.work-item:hover .fa-arrow-up-right{opacity:1; transform:translate(2px,-2px);}
.work-year{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap;}
@media (min-width:992px){
  .work-list{grid-template-columns:1fr 1fr; column-gap:48px;}
  .work-item{grid-template-columns:80px 1fr; grid-template-areas:"thumb info" "thumb year";}
  .work-thumb{grid-area:thumb; width:80px; height:64px;}
  .work-info{grid-area:info;}
  .work-year{grid-area:year; justify-self:start;}
  .work-list .work-item:nth-child(1), .work-list .work-item:nth-child(2){border-top:none;}
}

/* ---------- ABOUT / PHOTO ---------- */
.about-photo{width:100%; aspect-ratio:1/1; object-fit:cover; filter:var(--img-filter); border:1px solid var(--border); display:block;}
.stat-row{border-top:1px solid var(--border); margin-top:28px; padding-top:28px;}
.stat b{display:block; font-size:26px; font-weight:700; letter-spacing:-0.02em;}
.stat span{display:block; font-size:12px; color:var(--muted); letter-spacing:.04em; margin-top:4px;}
.stat i{color:var(--muted); margin-bottom:8px; font-size:15px; display:block;}

/* ---------- SERVICES ---------- */
.service-list{display:grid; grid-template-columns:1fr; gap:0;}
.service-item{
  display:grid; grid-template-columns:40px 1fr; gap:20px;
  padding:28px 0; border-top:1px solid var(--border);
}
.service-item:first-child{border-top:none;}
.service-item i{font-size:18px; color:var(--muted); padding-top:4px;}
.service-item h3{font-size:18px; font-weight:600; margin:0 0 6px; letter-spacing:-0.01em;}
.service-item p{margin:0; max-width:56ch;}
.service-features{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:grid;
  gap:6px;
}
.service-features li{
  font-size:13.5px;
  color:var(--muted);
  padding-left:14px;
  position:relative;
  line-height:1.5;
}
.service-features li::before{
  content:"\2013";
  position:absolute;
  left:0;
  color:var(--fg);
}

/* ---------- PROCESS ---------- */
.process-list{display:grid; grid-template-columns:1fr;}
.process-item{
  display:grid; grid-template-columns:48px 1fr; gap:20px; align-items:start;
  padding:24px 0; border-top:1px solid var(--border);
}
.process-item:first-child{border-top:none;}
.process-number{
  width:40px; height:40px; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; flex:none;
}
.process-item h3{font-size:16px; font-weight:600; margin:0 0 4px; letter-spacing:-0.01em;}
.process-item p{margin:0; max-width:56ch;}
@media (min-width:768px){
  .process-list{grid-template-columns:1fr 1fr; column-gap:48px;}
  .process-list .process-item:nth-child(1), .process-list .process-item:nth-child(2){border-top:none;}
}
@media (min-width:768px){
  .service-list{grid-template-columns:1fr 1fr; column-gap:48px;}
  .service-item:nth-child(1), .service-item:nth-child(2){border-top:none;}
}

/* ---------- TIMELINE (experience) ---------- */
.timeline-item{
  display:grid; grid-template-columns:110px 1fr; gap:24px;
  padding:28px 0; border-top:1px solid var(--border);
}
.timeline-item:first-child{border-top:none;}
.timeline-year{font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; padding-top:3px;}
.timeline-item h3{font-size:18px; font-weight:600; margin:0 0 2px; letter-spacing:-0.01em;}
.timeline-org{font-size:14px; color:var(--muted); margin:0 0 8px;}
.timeline-features{
  list-style:none; margin:0; padding:0;
  display:grid; gap:6px; max-width:64ch;
}
.timeline-features li{
  font-size:14px; color:var(--muted); line-height:1.6;
  padding-left:14px; position:relative;
}
.timeline-features li::before{
  content:"\2013"; position:absolute; left:0; color:var(--fg);
}

/* ---------- ACHIEVEMENTS ---------- */
.achievement-list{list-style:none; margin:0; padding:0; display:grid; gap:16px;}
.achievement-list li{
  font-size:16px; line-height:1.7; color:var(--fg);
  padding-left:28px; position:relative; max-width:70ch;
}
.achievement-list li::before{
  content:"\2192"; position:absolute; left:0; color:var(--muted); font-weight:600;
}

/* ---------- STRENGTH TAGS ---------- */
.tag-list{display:flex; flex-wrap:wrap; gap:10px;}
.tag{
  display:inline-block; font-size:12.5px; font-weight:500;
  padding:8px 16px; border:1px solid var(--border); color:var(--fg);
}

/* ---------- CREDENTIALS ---------- */
.credential-list{display:grid;}
.credential-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0; border-top:1px solid var(--border);
}
.credential-item:first-child{border-top:none;}
.credential-item h3{font-size:16px; font-weight:600; margin:0 0 3px; letter-spacing:-0.01em;}
.credential-item p{margin:0; font-size:14px;}

/* ---------- CONTACT ---------- */
.contact-line{
  display:flex; align-items:center; justify-content:space-between; padding:16px 0;
  border-top:1px solid var(--border); text-decoration:none; color:var(--fg); font-size:15px; font-weight:500;
}
.contact-line:first-child{border-top:none;}
.contact-line .icon-label{display:flex; align-items:center; gap:12px;}
.contact-line .icon-label i{
  width:28px; height:28px; border:1px solid var(--border); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; color:var(--muted);
}
.contact-line span.value{color:var(--muted); font-weight:400; transition:transform var(--transition), color var(--transition); display:inline-flex; align-items:center; gap:8px;}
.contact-line:hover span.value{transform:translateX(4px); color:var(--fg);}

.contact-form .form-label{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:500;}
.contact-form .form-control{
  background:var(--bg); color:var(--fg); border:1px solid var(--border); border-radius:0;
  font-family:'Inter', sans-serif; font-size:15px; padding:10px 12px;
}
.contact-form .form-control:focus{
  background:var(--bg); color:var(--fg); border-color:var(--fg); box-shadow:none;
}
.contact-form .form-control::placeholder{color:var(--muted);}

/* ---------- EMPTY STATE (blog / events) ---------- */
.empty-state{
  padding:60px 0; text-align:center; border:1px dashed var(--border);
}
.empty-state i{font-size:22px; color:var(--muted); display:block; margin-bottom:14px;}
.empty-state p{margin:0 auto; max-width:44ch;}

.footer-fixed{
  position:fixed;
  left:0; right:0; bottom:0;
  background:var(--bg);
  z-index:1000;
  transition:background var(--transition);
}
.footer-inner{padding-top:1.5rem; padding-bottom:1.5rem; display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; align-items:center;}
.footer-inner p{font-size:12px; color:var(--muted); margin:0;}
.footer-links{font-size:12px; color:var(--muted);}
.footer-links a{color:var(--muted); text-decoration:none; transition:color var(--transition);}
.footer-links a:hover{color:var(--fg);}
.footer-links .footer-sep{margin:0 8px; color:var(--border);}
.footer-inner .socials{margin-left:auto;}
.footer-inner .socials a{color:var(--muted); margin-left:16px; font-size:14px; transition:color var(--transition);}
.footer-inner .socials a:hover{color:var(--fg);}
@media (max-width:575.98px){
  .footer-inner{justify-content:flex-start;}
  .footer-inner .socials{margin-left:0;}
}

@media (max-width:575.98px){
  h1{font-size:32px;}
  .page-title{font-size:28px;}
  .work-item{grid-template-columns:1fr;}
  .work-thumb{width:100%; height:140px;}
  .work-year{order:-1;}
}

/* ---------- HERO CTA ROW (home) ---------- */
.hero-ctas{display:flex; flex-wrap:wrap; gap:24px; margin-top:8px;}

/* ---------- FEATURE GRID (What I Do) ---------- */
.feature-list{display:grid; grid-template-columns:1fr; gap:0;}
.feature-item{
  padding:28px 0; border-top:1px solid var(--border);
}
.feature-item:first-child{border-top:none;}
.feature-item .feature-icon{
  width:40px; height:40px; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--muted); margin-bottom:16px;
}
.feature-item h3{font-size:17px; font-weight:600; margin:0 0 6px; letter-spacing:-0.01em;}
.feature-item p{margin:0; color:var(--muted); max-width:56ch;}
@media (min-width:768px){
  .feature-list{grid-template-columns:1fr 1fr; column-gap:48px;}
  .feature-list .feature-item:nth-child(1), .feature-list .feature-item:nth-child(2){border-top:none;}
}

/* ---------- FAQ (tabs + accordion) ---------- */
.faq-tabs{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; padding:0; list-style:none;
}
.faq-tabs button{
  font-family:'Inter', sans-serif; font-size:13px; font-weight:500;
  padding:9px 16px; border:1px solid var(--border); background:none; color:var(--muted);
  cursor:pointer; transition:color var(--transition), border-color var(--transition), background var(--transition);
}
.faq-tabs button.active{color:var(--bg); background:var(--fg); border-color:var(--fg);}
.faq-tabs button:hover:not(.active){color:var(--fg); border-color:var(--fg);}
.faq-intro{color:var(--muted); margin-bottom:24px; max-width:64ch;}
.faq-list{display:none;}
.faq-list.active{display:block;}
.faq-item{border-top:1px solid var(--border);}
.faq-item:last-child{border-bottom:1px solid var(--border);}
.faq-question{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:18px 0; font-family:'Inter', sans-serif; font-size:15px; font-weight:600; color:var(--fg);
}
.faq-question i{color:var(--muted); font-size:13px; transition:transform var(--transition); flex:none;}
.faq-question[aria-expanded="true"] i{transform:rotate(180deg);}
.faq-answer{padding:0 0 20px; margin:0; color:var(--muted); max-width:68ch; line-height:1.7;}

/* ---------- FILTER TABS (blog / events) ---------- */
.filter-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px;}
.filter-tabs button{
  font-family:'Inter', sans-serif; font-size:13px; font-weight:500;
  padding:9px 16px; border:1px solid var(--border); background:none; color:var(--muted);
  cursor:pointer; transition:color var(--transition), border-color var(--transition), background var(--transition);
}
.filter-tabs button.active{color:var(--bg); background:var(--fg); border-color:var(--fg);}
.filter-tabs button:hover:not(.active){color:var(--fg); border-color:var(--fg);}

/* ---------- EVENT GALLERY ---------- */
.gallery-controls{
  display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end;
  justify-content:space-between; margin-bottom:28px;
}
.gallery-controls h3{font-size:16px; font-weight:600; margin:0 0 4px;}
.gallery-controls p{margin:0; font-size:13px; color:var(--muted);}
.event-selector{
  font-family:'Inter', sans-serif; font-size:14px; color:var(--fg); background:var(--bg);
  border:1px solid var(--border); padding:10px 14px; min-width:240px; border-radius:0;
}
.gallery-grid{display:grid; grid-template-columns:1fr; gap:24px;}
@media (min-width:576px){ .gallery-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:992px){ .gallery-grid{grid-template-columns:1fr 1fr 1fr;} }
.gallery-item{border:1px solid var(--border); overflow:hidden;}
.gallery-item .gallery-link{display:block; position:relative; cursor:zoom-in;}
.gallery-item img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition:transform var(--transition);
}
.gallery-item .gallery-link:hover img{transform:scale(1.03);}
.gallery-item .gallery-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.25); color:#fff; opacity:0; transition:opacity var(--transition); font-size:18px;
}
.gallery-item .gallery-link:hover .gallery-overlay{opacity:1;}
.gallery-info{padding:12px 14px;}
.gallery-info h3{font-size:14px; font-weight:600; margin:0 0 2px;}
.gallery-info p{margin:0; font-size:12.5px; color:var(--muted);}

/* simple built-in lightbox, no external dependency */
.lightbox-overlay{
  display:none; position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.9);
  align-items:center; justify-content:center; padding:40px;
  flex-direction:column;
}
.lightbox-overlay.open{display:flex;}
.lightbox-stage{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; max-width:1100px;
}
.lightbox-overlay img{max-width:100%; max-height:80vh; display:block;}
.lightbox-close{
  position:absolute; top:24px; right:24px; background:none; border:1px solid rgba(255,255,255,.4);
  color:#fff; width:40px; height:40px; font-size:16px; cursor:pointer; z-index:2;
}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:1px solid rgba(255,255,255,.4); color:#fff;
  width:44px; height:44px; font-size:16px; cursor:pointer; z-index:2;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--transition);
}
.lightbox-nav:hover{background:rgba(255,255,255,.15);}
.lightbox-prev{left:0;}
.lightbox-next{right:0;}
@media (max-width:767.98px){
  .lightbox-prev{left:-4px;}
  .lightbox-next{right:-4px;}
  .lightbox-nav{width:38px; height:38px;}
}
.lightbox-caption{
  color:#fff; text-align:center; margin-top:16px; max-width:640px;
}
.lightbox-caption .lightbox-title{font-size:14px; font-weight:600; margin:0 0 4px;}
.lightbox-caption .lightbox-counter{font-size:12px; color:rgba(255,255,255,.6); margin:0;}

/* ---------- SCHEDULE FILTER + EVENT CARDS ---------- */
.schedule-filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px;}
.schedule-filters button{
  font-family:'Inter', sans-serif; font-size:13px; font-weight:500;
  padding:9px 16px; border:1px solid var(--border); background:none; color:var(--muted);
  cursor:pointer; transition:color var(--transition), border-color var(--transition), background var(--transition);
}
.schedule-filters button.active{color:var(--bg); background:var(--fg); border-color:var(--fg);}
.schedule-filters button:hover:not(.active){color:var(--fg); border-color:var(--fg);}
.event-section{display:none;}
.event-section.active{display:block;}
.event-card{
  padding:24px 0; border-top:1px solid var(--border);
  display:grid; grid-template-columns:1fr auto; gap:16px; align-items:start;
}
.event-card:first-child{border-top:none;}
.event-card.past-event{opacity:.6;}
.event-card h3{font-size:17px; font-weight:600; margin:0 0 8px; letter-spacing:-0.01em;}
.event-meta{display:flex; flex-wrap:wrap; gap:16px; margin-bottom:10px;}
.event-meta span{font-size:13px; color:var(--muted); display:inline-flex; align-items:center; gap:6px;}
.event-card p.event-desc{margin:0; color:var(--muted); max-width:64ch;}
.event-empty{color:var(--muted); padding:40px 0; text-align:center;}
@media (max-width:575.98px){
  .event-card{grid-template-columns:1fr;}
}

/* ---------- CONTACT INFO / FORM (extended) ---------- */
.contact-form-note{color:var(--muted); font-size:14px; margin-bottom:20px; max-width:60ch;}
.form-error{display:block; font-size:12px; color:#c0392b; margin-top:5px; min-height:15px;}
.turnstile-row{min-height:65px;} /* reserves space so layout doesn't jump once the widget renders */
.form-status{font-size:13.5px; margin-bottom:4px;}
.form-status.success{color:#1a7a3c;}
.form-status.error{color:#c0392b;}
.btn-solid i.spin{animation:spin 1s linear infinite;}
.form-row-2{display:grid; grid-template-columns:1fr; gap:16px;}
@media (min-width:576px){ .form-row-2{grid-template-columns:1fr 1fr;} }
.btn-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:8px;}
.btn-solid{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  text-decoration:none; color:var(--bg); background:var(--fg); border:1px solid var(--fg);
  padding:11px 20px; cursor:pointer; transition:opacity var(--transition);
}
.btn-solid:hover{opacity:.85; color:var(--bg);}

/* ---------- LEGAL PAGES ---------- */
.legal-content h2{font-size:18px; font-weight:600; margin:36px 0 12px; letter-spacing:-0.01em;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p{color:var(--muted); max-width:72ch;}
.legal-content ul{color:var(--muted); max-width:72ch; padding-left:20px;}
.legal-content li{margin-bottom:6px; line-height:1.6;}
.legal-updated{color:var(--muted); font-size:13px; margin-bottom:40px;}

/* ---------- VCARD (mycard.php, standalone) ---------- */
.vcard-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg); color:var(--fg); padding:24px;
}
.vcard{
  width:100%; max-width:360px; text-align:center; border:1px solid var(--border); padding:48px 32px;
}
.vcard-avatar{
  width:64px; height:64px; margin:0 auto 20px; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:22px;
}
.vcard h1{font-size:22px; font-weight:700; margin:0 0 4px; letter-spacing:-0.02em;}
.vcard p.vcard-title{color:var(--muted); font-size:14px; margin:0 0 32px;}
.vcard-links{display:grid; gap:10px; margin-bottom:24px;}
.vcard-links a{
  display:block; padding:12px; border:1px solid var(--border); color:var(--fg);
  text-decoration:none; font-size:14px; font-weight:500; transition:background var(--transition);
}
.vcard-links a:hover{background:var(--border);}
.vcard-save{
  display:block; padding:12px; background:var(--fg); color:var(--bg);
  text-decoration:none; font-size:14px; font-weight:600; margin-bottom:20px;
}
.vcard-url{font-size:12px; color:var(--muted); text-decoration:none;}

/* ---------- BLOG (dynamic feed cards) ---------- */
.blog-filter-wrap{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px;}
.blog-filter-btn{
  font-family:'Inter', sans-serif; font-size:13px; font-weight:500;
  padding:9px 16px; border:1px solid var(--border); background:none; color:var(--muted);
  cursor:pointer; transition:color var(--transition), border-color var(--transition), background var(--transition);
}
.blog-filter-btn.active{color:var(--bg); background:var(--fg); border-color:var(--fg);}
.blog-filter-btn:hover:not(.active){color:var(--fg); border-color:var(--fg);}
.blog-filter-btn i{margin-right:4px;}

.blog-notice{
  display:none; font-size:13px; color:var(--muted); border:1px solid var(--border);
  padding:12px 16px; margin-bottom:24px;
}
.blog-notice.show{display:block;}

.blog-grid{display:grid; grid-template-columns:1fr; gap:24px;}
@media (min-width:576px){ .blog-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:992px){ .blog-grid{grid-template-columns:1fr 1fr 1fr;} }

.blog-card{
  display:block; border:1px solid var(--border); text-decoration:none; color:var(--fg);
  transition:border-color var(--transition);
}
.blog-card:hover{border-color:var(--fg);}
.blog-card-thumb{aspect-ratio:16/10; overflow:hidden; background:var(--border);}
.blog-card-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.blog-card-thumb-placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:22px;
}
.blog-card-body{padding:18px;}
.source-badge{
  display:inline-block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  padding:4px 9px; border:1px solid var(--border); color:var(--muted); margin-bottom:12px;
}
.blog-card-title{font-size:16px; font-weight:600; margin-bottom:8px; letter-spacing:-0.01em; line-height:1.35;}
.blog-card-excerpt{font-size:13.5px; color:var(--muted); line-height:1.6; margin-bottom:16px;}
.blog-card-meta{display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--muted);}
.blog-read-btn{font-weight:600; color:var(--fg);}

.blog-state{
  grid-column:1/-1; text-align:center; padding:60px 0; color:var(--muted); border:1px dashed var(--border);
}
.blog-state i{font-size:20px; display:block; margin-bottom:12px;}
.blog-state i.spin{animation:blogspin 1s linear infinite;}
@keyframes blogspin{ to{ transform:rotate(360deg); } }

.btn-load-more{
  font-family:'Inter', sans-serif; font-size:13px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  padding:11px 24px; border:1px solid var(--fg); background:none; color:var(--fg); cursor:pointer;
  transition:background var(--transition), color var(--transition);
}
.btn-load-more:hover{background:var(--fg); color:var(--bg);}

/* ---------- PORTFOLIO FILTER ---------- */
.portfolio-filter-bar{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px;}
.portfolio-filter-btn{
  font-family:'Inter', sans-serif; font-size:13px; font-weight:500; text-decoration:none;
  padding:9px 16px; border:1px solid var(--border); background:none; color:var(--muted);
  cursor:pointer; transition:color var(--transition), border-color var(--transition), background var(--transition);
}
.portfolio-filter-btn.active{color:var(--bg); background:var(--fg); border-color:var(--fg);}
.portfolio-filter-btn:hover:not(.active){color:var(--fg); border-color:var(--fg);}

/* ---------- PORTFOLIO GRID ---------- */
.portfolio-items-grid{display:grid; grid-template-columns:1fr; gap:28px;}
@media (min-width:576px){ .portfolio-items-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:992px){ .portfolio-items-grid{grid-template-columns:1fr 1fr 1fr;} }

.portfolio-card{border:1px solid var(--border); display:flex; flex-direction:column; height:100%;}
.portfolio-card-img-container{aspect-ratio:16/10; overflow:hidden; background:var(--border);}
.portfolio-card-img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* intentionally NOT grayscale — portfolio thumbnails show in full color */
}
.portfolio-card-body{padding:18px; display:flex; flex-direction:column; flex:1;}
.portfolio-card-title{font-size:16px; font-weight:600; margin:0 0 8px; letter-spacing:-0.01em;}
.portfolio-card-text{font-size:13.5px; color:var(--muted); line-height:1.6; margin:0 0 4px; flex:1;}

.portfolio-view-btn{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px; align-self:flex-start;
  font-family:'Inter', sans-serif; font-size:12px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  padding:9px 16px; border:1px solid var(--fg); background:none; color:var(--fg); cursor:pointer;
  transition:background var(--transition), color var(--transition);
}
.portfolio-view-btn:hover{background:var(--fg); color:var(--bg);}

.portfolio-note{margin-top:36px; font-size:13px; color:var(--muted); border-top:1px solid var(--border); padding-top:20px;}

/* ---------- PORTFOLIO LIGHTBOXES ---------- */
.portfolio-lightbox{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:3000;
  align-items:center; justify-content:center; padding:24px;
}
.portfolio-lightbox.active{display:flex;}
.portfolio-lightbox-content{
  position:relative; width:95vw; max-width:1200px; height:90vh;
  background:var(--bg); border:1px solid var(--border);
  overflow:hidden; display:flex; flex-direction:column;
}
.lightbox-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 18px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.lightbox-toolbar-title{
  font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; flex:1;
}
.lightbox-toolbar-actions{display:flex; gap:8px; flex-shrink:0;}
.lightbox-btn{
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px;
  font-family:'Inter', sans-serif; font-size:12px; font-weight:500;
  border:1px solid var(--border); background:none; color:var(--fg);
  text-decoration:none; cursor:pointer; transition:background var(--transition);
}
.lightbox-btn:hover{background:var(--border); color:var(--fg);}
.lightbox-btn.btn-close-lb{border-color:var(--fg);}

.portfolio-lightbox-iframe{flex:1; width:100%; border:none; background:#fff; display:block;}

.iframe-blocked-msg{
  display:none; flex-direction:column; align-items:center; justify-content:center;
  flex:1; gap:16px; padding:30px; text-align:center;
}
.iframe-blocked-msg .blocked-icon{font-size:2.5rem; color:var(--muted);}
.iframe-blocked-msg h4{color:var(--fg); margin:0; font-size:17px; font-weight:600;}
.iframe-blocked-msg p{color:var(--muted); font-size:13.5px; max-width:420px; margin:0 auto;}
.open-external-btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 22px;
  background:var(--fg); color:var(--bg); font-size:13px; font-weight:600;
  text-decoration:none; margin-top:6px; transition:opacity var(--transition);
}
.open-external-btn:hover{opacity:.8; color:var(--bg);}

.iframe-spinner-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; background:rgba(0,0,0,.6); color:#ddd; font-size:13px; z-index:10;
  transition:opacity .3s ease; pointer-events:none;
}
.iframe-spinner-overlay.hidden{opacity:0;}
.iframe-spinner-overlay i{font-size:1.8rem; animation:spin 1s linear infinite;}
@keyframes spin{ to{ transform:rotate(360deg); } }
.iframe-slow-msg{font-size:12px; color:#aaa; margin-top:2px; display:none;}
.iframe-slow-msg.visible{display:block;}
.iframe-slow-msg a{color:#ddd;}

.portfolio-page-viewer{flex:1; overflow-y:auto;}
.portfolio-page{display:none; justify-content:center; align-items:flex-start; padding:16px;}
.portfolio-page.active{display:flex;}
.portfolio-page-img{max-width:100%; height:auto;}
.portfolio-page-controls{
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:12px 16px; border-top:1px solid var(--border); flex-shrink:0;
}
.portfolio-page-btn{
  padding:7px 18px; border:1px solid var(--border); background:none; color:var(--fg);
  cursor:pointer; font-size:13px; transition:background var(--transition);
}
.portfolio-page-btn:hover:not(:disabled){background:var(--border);}
.portfolio-page-btn:disabled{opacity:.35; cursor:not-allowed;}
.portfolio-page-indicator{color:var(--muted); font-size:13px;}

/* ---------- FLOATING WHATSAPP BUTTON ---------- */
.whatsapp-float{
  position:fixed;
  right:24px;
  bottom:calc(var(--footer-h, 80px) + 20px);
  z-index:1500;
  width:56px; height:56px; border-radius:50%;
  background:var(--fg); color:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-size:26px; text-decoration:none;
  transition:transform var(--transition), color var(--transition), background var(--transition);
}
.whatsapp-float:hover{transform:scale(1.06); color:var(--bg);}
.whatsapp-tooltip{
  position:absolute; right:66px; top:50%; transform:translateY(-50%);
  background:var(--fg); color:var(--bg); font-size:12px; font-weight:500;
  padding:8px 12px; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity var(--transition);
}
.whatsapp-float:hover .whatsapp-tooltip{opacity:1;}
@media (max-width:575.98px){
  .whatsapp-float{width:48px; height:48px; font-size:22px; right:16px;}
  .whatsapp-tooltip{display:none;} /* no hover on touch; icon is self-explanatory */
}

/* ---------- UDYAM REGISTRATION LINE ---------- */
.udyam-line{font-size:11px; color:var(--muted); width:100%; order:99; margin-top:4px;}
.updated-line{font-size:11px; color:var(--muted); width:100%; order:100; margin-top:2px;}

/* ---------- TESTIMONIALS (Google reviews) ---------- */
.testimonial-summary{
  display:none; align-items:center; gap:10px; margin-bottom:28px; font-size:14px; color:var(--muted);
}
.testimonial-summary .testimonial-rating{font-size:20px; font-weight:700; color:var(--fg);}
.testimonial-summary .testimonial-stars i{color:var(--fg); font-size:13px; margin-right:1px;}
.testimonial-summary .testimonial-stars i.faded{color:var(--border);}

.testimonial-grid{display:grid; grid-template-columns:1fr; gap:24px;}
@media (min-width:576px){ .testimonial-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:992px){ .testimonial-grid{grid-template-columns:1fr 1fr 1fr;} }

.testimonial-card{border:1px solid var(--border); padding:22px;}
.testimonial-card .testimonial-stars{margin-bottom:12px;}
.testimonial-card .testimonial-stars i{color:var(--fg); font-size:12px; margin-right:1px;}
.testimonial-card .testimonial-stars i.faded{color:var(--border);}
.testimonial-text{font-size:14px; line-height:1.65; color:var(--fg); margin-bottom:18px;}
.testimonial-author{display:flex; align-items:center; gap:10px;}
.testimonial-avatar{width:34px; height:34px; border-radius:50%; overflow:hidden; flex:none; display:flex; align-items:center; justify-content:center; border:1px solid var(--border);}
.testimonial-avatar-img{width:100%; height:100%; object-fit:cover;}
.testimonial-avatar-fallback{font-size:13px; font-weight:600; color:var(--muted);}
.testimonial-name{display:block; font-size:13px; font-weight:600; color:var(--fg);}
.testimonial-time{display:block; font-size:12px; color:var(--muted);}

/* ---------- LINKEDIN RECOMMENDATION (experience page) ---------- */
.recommendation{
  margin-top:16px; padding:16px 18px; border-left:2px solid var(--border);
  background:var(--border); background:color-mix(in srgb, var(--border) 35%, transparent);
}
.recommendation p{font-size:13.5px; font-style:italic; color:var(--fg); margin:0 0 8px; line-height:1.6;}
.recommendation-author{font-size:12px; color:var(--muted); font-style:normal;}

/* ---------- LOAD / SCROLL ANIMATIONS ---------- */
.reveal-el{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal-el.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Typewriter heading effect */
.tw-char{
  opacity:0;
  transition:opacity .05s linear;
}
.tw-char.is-visible{
  opacity:1;
}
/* An actual inline cursor character, not a block-level border — this
   flows naturally with the text and wraps correctly on multi-line
   headings, unlike a border pinned to the element's own edge. */
.tw-cursor{
  display:inline-block;
  width:2px;
  height:0.85em;
  margin-left:3px;
  background:var(--fg);
  vertical-align:middle;
  animation:tw-blink 1s step-end infinite;
}
.tw-cursor.tw-cursor-done{
  animation:none;
  opacity:0;
  transition:opacity .5s ease;
}

@keyframes tw-blink{
  0%, 100%{opacity:1;}
  50%{opacity:0;}
}

@media (prefers-reduced-motion: reduce){
  .reveal-el{opacity:1; transform:none; transition:none;}
  .tw-char{opacity:1;}
  .tw-cursor{display:none;}
}

/* ---------- SELECTION/COPY DETERRENT ---------- */
/* Blanket-disables text selection sitewide, per request — but explicitly
   RE-ENABLES it on form fields (typing/editing obviously needs it) and
   on the contact info values (email/phone/address). That exception is
   deliberate, not an oversight: visitors need to be able to copy your
   phone number and email to actually use them — blocking that hurts
   real conversions for a "protection" that a determined visitor bypasses
   in five seconds anyway. Remove the exception below if you'd rather
   apply this with zero exceptions.
*/
body{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
input, textarea, [contenteditable="true"],
.contact-line .value, .contact-line .icon-label{
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
}