/* =============================================================
   Krishna Bogati Agency — main.css
   Clean, minimal, lightweight business layout (Neve-inspired
   structure) with brand-specific tokens: Himalayan indigo,
   Nepali crimson, gold accent, Sora + Inter type pairing.
   ============================================================= */

.kb-container{
	max-width: var(--kb-container);
	margin: 0 auto;
	padding-left: max(24px, env(safe-area-inset-left));
	padding-right: max(24px, env(safe-area-inset-right));
}

/* -----------------------------------------------------------
   Header
   ----------------------------------------------------------- */
.kb-header{
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255,255,255,0.92);
	-webkit-backdrop-filter: saturate(180%) blur(8px); /* Safari / iOS requires the prefix */
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--kb-line);
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
	.kb-header{ background: rgba(255,255,255,0.98); } /* solid fallback where blur is unsupported */
}
.kb-header-inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 76px;
}
.kb-site-title{
	font-family: var(--kb-font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--kb-ink);
}
.kb-branding img{ max-height: 44px; width: auto; }
.kb-nav{ flex: 1; display: flex; justify-content: center; }
.kb-nav-menu{
	display: flex;
	gap: 32px;
	list-style: none;
	margin: 0; padding: 0;
}
.kb-nav-menu a{
	color: var(--kb-body);
	font-weight: 500;
	font-size: 0.95rem;
}
.kb-nav-menu a:hover{ color: var(--kb-crimson); }
.kb-header-cta{ display:flex; align-items:center; }

.kb-nav-toggle{
	display:none;
	background:none; border:0; cursor:pointer;
	width: 44px; height: 44px; /* Apple/Google minimum recommended touch target */
	flex-direction: column; justify-content: center; align-items: center; gap: 5px;
	-webkit-tap-highlight-color: transparent;
}
.kb-nav-toggle span{ display:block; height:2px; width: 100%; background: var(--kb-ink); border-radius: 2px; }
.kb-mobile-menu{
	display: none;
	flex-direction: column;
	gap: 14px;
	padding: 16px 24px calc(28px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--kb-line);
	background: var(--kb-white);
	max-height: calc(100vh - 76px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch; /* momentum scrolling on iOS Safari */
}
.kb-mobile-menu .kb-nav-menu-mobile a{ display:block; padding: 6px 0; } /* larger tap target for menu links */
.kb-mobile-menu.is-open{ display: flex; }
.kb-nav-menu-mobile{ flex-direction: column; gap: 14px; list-style:none; margin:0; padding:0; }

/* -----------------------------------------------------------
   Buttons
   ----------------------------------------------------------- */
.kb-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--kb-radius-sm);
	font-weight: 600;
	font-size: 0.95rem;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
	white-space: nowrap;
}
.kb-btn-primary{ background: var(--kb-crimson); color: var(--kb-white); }
.kb-btn-primary:hover{ background: var(--kb-crimson-dark); color: var(--kb-white); transform: translateY(-1px); }
.kb-btn-ghost{ background: transparent; border-color: var(--kb-line); color: var(--kb-ink); }
.kb-btn-ghost:hover{ border-color: var(--kb-crimson); color: var(--kb-crimson); }
.kb-btn-lg{ padding: 15px 28px; font-size: 1rem; }
.kb-btn-sm{ padding: 9px 16px; font-size: 0.85rem; }

/* -----------------------------------------------------------
   Hero
   ----------------------------------------------------------- */
.kb-hero{ padding: 72px 0 40px; overflow: hidden; }
.kb-hero-inner{
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 48px;
	align-items: center;
}
.kb-eyebrow{
	font-family: var(--kb-font-mono);
	font-size: 0.78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--kb-crimson);
	margin-bottom: 14px;
	font-weight: 500;
}
.kb-hero h1{
	font-size: clamp(2rem, 4vw, 3rem);
	letter-spacing: -0.01em;
	margin-bottom: .45em;
}
.kb-hero-subtitle{
	font-size: 1.1rem;
	color: var(--kb-body);
	max-width: 46ch;
}
.kb-hero-actions{ display:flex; gap: 14px; flex-wrap: wrap; margin: 28px 0 40px; }
.kb-hero-stats{
	display: flex;
	gap: 36px;
	margin: 0;
	padding-top: 28px;
	border-top: 1px solid var(--kb-line);
}
.kb-hero-stats dt{
	font-family: var(--kb-font-mono);
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--kb-ink);
}
.kb-hero-stats dd{ margin: 2px 0 0; font-size: 0.85rem; color: var(--kb-body); }

.kb-hero-visual{ position: relative; }
.kb-ridge-graphic{ width: 100%; height: auto; }
.kb-ridge-line{ stroke-dasharray: 900; stroke-dashoffset: 900; animation: kbDrawRidge 1.6s ease forwards .2s; }
.kb-ridge-fill{ opacity: 0; animation: kbFadeIn 1s ease forwards 1.1s; }
.kb-ridge-point{ opacity: 0; animation: kbFadeIn .4s ease forwards 1.6s; }
.kb-ridge-label{ font-family: var(--kb-font-mono); font-size: 13px; fill: var(--kb-crimson); font-weight: 600; opacity:0; animation: kbFadeIn .4s ease forwards 1.8s; }
@keyframes kbDrawRidge{ to{ stroke-dashoffset: 0; } }
@keyframes kbFadeIn{ to{ opacity: 1; } }
@media (prefers-reduced-motion: reduce){
	.kb-ridge-line{ stroke-dashoffset: 0; animation: none; }
	.kb-ridge-fill, .kb-ridge-point, .kb-ridge-label{ opacity: 1; animation: none; }
}

/* -----------------------------------------------------------
   Section heading
   ----------------------------------------------------------- */
.kb-section-heading{ max-width: 640px; margin: 0 auto 44px; text-align: center; }
.kb-section-heading h2{ font-size: clamp(1.6rem, 3vw, 2.1rem); }
.kb-section-heading-split{
	display: flex; align-items: flex-end; justify-content: space-between;
	max-width: none; text-align: left; margin-bottom: 32px; gap: 24px;
}
.kb-section-heading-split .kb-eyebrow, .kb-section-heading-split h2{ margin: 0; }

/* -----------------------------------------------------------
   Services
   ----------------------------------------------------------- */
.kb-services{ padding: 72px 0; background: var(--kb-bg-alt); }
.kb-services-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.kb-service-card{
	background: var(--kb-white);
	border: 1px solid var(--kb-line);
	border-radius: var(--kb-radius);
	padding: 28px;
	color: var(--kb-body);
	box-shadow: var(--kb-shadow);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kb-service-card:hover{ transform: translateY(-4px); box-shadow: var(--kb-shadow-hover); border-color: var(--kb-crimson); color: var(--kb-body); }
.kb-service-icon{
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 52px; height: 52px;
	border-radius: 12px;
	background: rgba(200,53,46,0.08);
	color: var(--kb-crimson);
	margin-bottom: 18px;
}
.kb-service-card h3{ font-size: 1.1rem; margin-bottom: .4em; }
.kb-service-card p{ font-size: 0.92rem; margin-bottom: 1em; }
.kb-service-link{ font-size: 0.85rem; font-weight: 600; color: var(--kb-crimson); }

/* -----------------------------------------------------------
   Portfolio
   ----------------------------------------------------------- */
.kb-portfolio-preview, .kb-page-wrap{ padding: 72px 0; }
.kb-portfolio-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.kb-portfolio-card{
	display: block;
	border-radius: var(--kb-radius);
	overflow: hidden;
	border: 1px solid var(--kb-line);
	background: var(--kb-white);
	color: var(--kb-body);
	transition: transform .18s ease, box-shadow .18s ease;
}
.kb-portfolio-card:hover{ transform: translateY(-4px); box-shadow: var(--kb-shadow-hover); color: var(--kb-body); }
.kb-portfolio-thumb{ aspect-ratio: 4/3; overflow: hidden; background: var(--kb-bg-alt); }
.kb-portfolio-thumb img{ width:100%; height:100%; object-fit: cover; }
.kb-portfolio-thumb-placeholder{ width:100%; height:100%; background: linear-gradient(135deg, var(--kb-indigo), var(--kb-crimson)); }
.kb-portfolio-info{ padding: 18px 20px; }
.kb-portfolio-info h3{ font-size: 1rem; margin-bottom: 4px; }
.kb-portfolio-cat{ font-size: 0.78rem; color: var(--kb-crimson); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

.kb-portfolio-filters{ display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.kb-filter-btn{
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--kb-line);
	background: var(--kb-white);
	font-size: 0.85rem;
	font-weight: 500;
	cursor: pointer;
	color: var(--kb-body);
}
.kb-filter-btn.is-active, .kb-filter-btn:hover{ background: var(--kb-ink); border-color: var(--kb-ink); color: var(--kb-white); }

.kb-portfolio-single-body{ display: grid; grid-template-columns: 2fr 1fr; gap: 40px; margin-top: 28px; }
.kb-portfolio-meta-box{
	align-self: start;
	background: var(--kb-bg-alt);
	border-radius: var(--kb-radius);
	padding: 24px;
	display: flex; flex-direction: column; gap: 18px;
}
.kb-portfolio-meta-box strong{ display:block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--kb-crimson); margin-bottom: 4px; }
.kb-portfolio-meta-box p{ margin: 0; }

/* -----------------------------------------------------------
   Testimonials
   ----------------------------------------------------------- */
.kb-testimonials{ padding: 72px 0; background: var(--kb-indigo); }
.kb-testimonials .kb-eyebrow{ color: var(--kb-gold); }
.kb-testimonials h2{ color: var(--kb-white); }
.kb-testimonials-track{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 4px;
}
.kb-testimonial-card{
	background: var(--kb-white);
	border-radius: var(--kb-radius);
	padding: 26px;
	scroll-snap-align: start;
}
.kb-stars{ color: var(--kb-gold); letter-spacing: 2px; font-size: 0.95rem; }
.kb-testimonial-text{ font-size: 0.96rem; margin: 14px 0 20px; color: var(--kb-body); }
.kb-testimonial-author{ display: flex; align-items: center; gap: 12px; }
.kb-testimonial-avatar img{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.kb-testimonial-role{ display: block; font-size: 0.82rem; color: var(--kb-body); font-weight: 400; }

/* -----------------------------------------------------------
   FAQ (AI / SEO answer-engine friendly accordion)
   ----------------------------------------------------------- */
.kb-faq{ padding: 72px 0; background: var(--kb-bg-alt); }
.kb-faq-list{ max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.kb-faq-item{
	background: var(--kb-white);
	border: 1px solid var(--kb-line);
	border-radius: var(--kb-radius);
	padding: 6px 22px;
}
.kb-faq-question{
	list-style: none;
	cursor: pointer;
	padding: 16px 0;
	font-family: var(--kb-font-display);
	font-weight: 600;
	color: var(--kb-ink);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.kb-faq-question::-webkit-details-marker{ display: none; }
.kb-faq-toggle{
	flex-shrink: 0;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--kb-bg-alt);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 1.1rem;
	color: var(--kb-crimson);
	transition: transform .2s ease;
}
.kb-faq-item[open] .kb-faq-toggle{ transform: rotate(45deg); }
.kb-faq-answer{ padding-bottom: 18px; color: var(--kb-body); }
.kb-faq-answer p{ margin: 0; font-size: 0.96rem; }

/* -----------------------------------------------------------
   CTA band
   ----------------------------------------------------------- */
.kb-cta-band{ background: var(--kb-ink); padding: 56px 0; }
.kb-cta-band-inner{
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.kb-cta-band h2{ color: var(--kb-white); margin-bottom: .25em; font-size: 1.6rem; }
.kb-cta-band p{ color: #B9C3D0; margin: 0; }

/* -----------------------------------------------------------
   Footer
   ----------------------------------------------------------- */
.kb-footer{ background: var(--kb-indigo); color: #C9D2DE; padding: 64px 0 0; }
.kb-footer-grid{
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: 32px;
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.kb-footer-about p{ color: #A9B4C4; font-size: 0.9rem; }
.kb-footer-title{ color: var(--kb-white); font-family: var(--kb-font-display); font-size: 1.2rem; }
.kb-social-list, .kb-contact-list, .kb-footer-menu{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kb-social-list{ flex-direction: row; gap: 14px; margin-top: 12px; }
.kb-footer a{ color: #C9D2DE; }
.kb-footer a:hover{ color: var(--kb-gold); }
.kb-widget-title{ color: var(--kb-white); font-size: 0.95rem; margin-bottom: 14px; }
.kb-footer-bottom{
	display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	padding: 20px 24px; font-size: 0.82rem; color: #8D9AAC;
}

/* -----------------------------------------------------------
   Blog / archive / single
   ----------------------------------------------------------- */
.kb-breadcrumbs{ font-size: 0.85rem; color: var(--kb-body); margin-bottom: 24px; }
.kb-breadcrumbs a{ color: var(--kb-body); }
.kb-archive-header{ margin-bottom: 40px; }
.kb-layout-with-sidebar{ display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start; }
.kb-post-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.kb-post-card{ border: 1px solid var(--kb-line); border-radius: var(--kb-radius); overflow: hidden; background: var(--kb-white); }
.kb-post-card-thumb{ display:block; aspect-ratio: 16/10; background: var(--kb-bg-alt); overflow: hidden; }
.kb-post-card-thumb img{ width:100%; height:100%; object-fit: cover; }
.kb-post-card-thumb-placeholder{ width:100%; height:100%; background: linear-gradient(135deg, var(--kb-indigo), var(--kb-crimson)); }
.kb-post-card-body{ padding: 20px; }
.kb-post-meta{ font-size: 0.78rem; color: var(--kb-body); font-family: var(--kb-font-mono); margin-bottom: 10px; }
.kb-post-sep{ margin: 0 6px; }
.kb-post-card-title{ font-size: 1.05rem; margin-bottom: 8px; }
.kb-post-card-link{ font-size: 0.85rem; font-weight: 600; }
.kb-pagination{ margin-top: 40px; display: flex; gap: 10px; }
.kb-pagination .page-numbers{
	display: inline-flex; align-items:center; justify-content:center;
	min-width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--kb-line);
	color: var(--kb-body); font-size: 0.9rem;
}
.kb-pagination .page-numbers.current{ background: var(--kb-crimson); border-color: var(--kb-crimson); color: var(--kb-white); }

.kb-single-header{ margin-bottom: 28px; }
.kb-post-cat{ display:inline-block; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; color: var(--kb-crimson); margin-bottom: 12px; }
.kb-single-header h1{ font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.kb-single-thumb{ border-radius: var(--kb-radius); overflow: hidden; margin-bottom: 32px; }
.kb-single-content{ font-size: 1.05rem; }
.kb-single-content h2{ margin-top: 1.6em; }
.kb-single-content img{ border-radius: var(--kb-radius); }
.kb-post-tags{ display:flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.kb-post-tags a{ font-size: 0.8rem; padding: 6px 12px; border: 1px solid var(--kb-line); border-radius: 999px; color: var(--kb-body); }

.kb-page-header{ margin-bottom: 32px; }
.kb-page-thumb{ border-radius: var(--kb-radius); overflow: hidden; margin-bottom: 32px; }
.kb-page-content{ font-size: 1.05rem; }

/* -----------------------------------------------------------
   Widgets / sidebar
   ----------------------------------------------------------- */
.kb-widget{ margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--kb-line); }
.kb-widget:last-child{ border-bottom: none; }
.kb-sidebar .kb-widget-title{ color: var(--kb-ink); }

/* -----------------------------------------------------------
   Contact page
   ----------------------------------------------------------- */
.kb-contact-layout{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; margin-top: 32px; }
.kb-contact-form{ display: flex; flex-direction: column; gap: 18px; }
.kb-form-row{ display:flex; flex-direction:column; gap: 6px; }
.kb-form-row label{ font-size: 0.85rem; font-weight: 600; color: var(--kb-ink); }
.kb-form-row input, .kb-form-row textarea{
	padding: 12px 14px;
	border: 1px solid var(--kb-line);
	border-radius: var(--kb-radius-sm);
	font-family: var(--kb-font-body);
	font-size: 16px; /* 16px+ stops iOS Safari from auto-zooming the page on focus */
	background: var(--kb-white);
	color: var(--kb-ink);
	width: 100%;
}
.kb-form-row input:focus, .kb-form-row textarea:focus{ outline: none; border-color: var(--kb-crimson); box-shadow: 0 0 0 3px rgba(200,53,46,0.12); }
.kb-form-row textarea{ resize: vertical; min-height: 120px; }
.kb-notice{ padding: 14px 18px; border-radius: var(--kb-radius-sm); margin-bottom: 20px; font-size: 0.92rem; }
.kb-notice-success{ background: #E8F5E9; color: #256029; }
.kb-notice-error{ background: #FDECEA; color: #A32A24; }
.kb-contact-details-col{ display: flex; flex-direction: column; gap: 16px; }
.kb-contact-detail-card{ background: var(--kb-bg-alt); border-radius: var(--kb-radius); padding: 22px; }
.kb-contact-detail-card h3{ font-size: 0.95rem; margin-bottom: 6px; }
.kb-contact-detail-card p{ margin: 0; font-size: 0.92rem; }

/* -----------------------------------------------------------
   404
   ----------------------------------------------------------- */
.kb-404{ text-align: center; padding: 96px 0; }
.kb-404 h1{ font-size: clamp(1.8rem, 4vw, 2.6rem); }
.kb-404-search{ max-width: 420px; margin: 28px auto 0; }

/* -----------------------------------------------------------
   Comments
   ----------------------------------------------------------- */
.kb-comments{ margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--kb-line); }
.kb-comment-list{ list-style: none; margin: 0 0 32px; padding: 0; }

/* -----------------------------------------------------------
   Responsive
   ----------------------------------------------------------- */
@media (max-width: 980px){
	.kb-hero-inner{ grid-template-columns: 1fr; }
	.kb-hero-visual{ order: -1; max-width: 420px; margin: 0 auto; }
	.kb-services-grid{ grid-template-columns: repeat(2, 1fr); }
	.kb-portfolio-grid{ grid-template-columns: repeat(2, 1fr); }
	.kb-testimonials-track{ grid-template-columns: repeat(2, 1fr); }
	.kb-layout-with-sidebar{ grid-template-columns: 1fr; }
	.kb-post-grid{ grid-template-columns: 1fr; }
	.kb-contact-layout{ grid-template-columns: 1fr; }
	.kb-portfolio-single-body{ grid-template-columns: 1fr; }
	.kb-footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
	.kb-nav, .kb-header-cta{ display: none; }
	.kb-nav-toggle{ display: flex; }
	.kb-services-grid, .kb-portfolio-grid, .kb-testimonials-track{ grid-template-columns: 1fr; }
	.kb-cta-band-inner{ flex-direction: column; text-align: center; }
	.kb-section-heading-split{ flex-direction: column; align-items: flex-start; }
	.kb-footer-grid{ grid-template-columns: 1fr; }
	.kb-footer-bottom{ flex-direction: column; text-align: center; }
	.kb-hero{ padding: 48px 0 24px; }
	.kb-hero-stats{ gap: 24px; flex-wrap: wrap; }
}
@media (max-width: 400px){
	/* Small-screen phones (e.g. iPhone SE, older Android) */
	.kb-container{ padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
	.kb-hero-stats{ gap: 16px; }
	.kb-btn-lg{ width: 100%; }
	.kb-hero-actions{ flex-direction: column; }
	.kb-hero-actions .kb-btn{ width: 100%; }
}
/* Global overflow safety net for very long unbroken strings (long URLs/emails in editable fields) */
.kb-hero-copy, .kb-section-heading, .kb-cta-band-inner, .kb-contact-detail-card{ overflow-wrap: break-word; word-break: break-word; }