/* ============================================================
   CHITRAFEET BRAND OVERRIDE
   Applies the approved brand-guideline.md tokens on top of the
   Perspec template's structure/CSS without touching style.css.
   ============================================================ */

@font-face{
	font-family:'Bricolage VF';
	src:url('../fonts/self/bricolage-grotesque-latin-wght-normal.woff2') format('woff2-variations');
	font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
	font-family:'Jakarta VF';
	src:url('../fonts/self/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations');
	font-weight:200 800; font-style:normal; font-display:swap;
}

:root{
	/* Brand tokens replacing the template's orange defaults */
	--orange-primary:#C99A5B;   /* --gold */
	--orange-light:#D6B27E;
	--orange-dark:#B8863F;      /* --gold-deep */
	--orange-accent:#E7D2AE;
	--cream:#F5F3EF;
	--dark:#1C1B19;             /* --ink */
	--dark-brown:#211F1D;       /* --charcoal */
	--text-light:#6B6862;       /* --body */
}

body{
	font-family:'Jakarta VF', 'Outfit', sans-serif;
}
h1,h2,h3,h4,h5,h6,
.logo, .hero-text h1, .floating-badge h1, .stat-number,
.section-header h2, .service-card h3, .blog-title, .testimonial-card h3,
.footer-brand .logo, .banner-text h3, .tour-info h3{
	font-family:'Bricolage VF', 'Outfit', sans-serif !important;
}

/* Team grid: only 2 real team members (not 4), center a narrower 2-col layout */
.team-section .team-grid{
	grid-template-columns: repeat(2, minmax(240px, 320px));
	justify-content: center;
	max-width: 760px;
}

@media(max-width:700px){
	.team-section .team-grid{
		grid-template-columns: 1fr;
		max-width: 320px;
	}
}

/* Prevent the decorative overlay image from bleeding past the viewport edge on mobile */
@media(max-width:700px){
	.about-img-overlay{ right: 0; }
	body{ overflow-x: hidden; }
}

/* Full feature list grid (360vr.html "What's Included" section) */
.why-list-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
	flex-direction: unset;
}
.why-list-grid .why-item{
	background: var(--white);
	border-radius: var(--radius, 16px);
	padding: 1.75rem;
	align-items: flex-start;
	box-shadow: 0 8px 24px rgba(28,27,25,.05);
	flex-direction: column;
	gap: 0;
}
.why-list-grid .why-icon{
	width: 52px; height: 52px; border-radius: 50%;
	background: rgba(201,154,91,.12); color: var(--gold-deep, #B8863F);
	display: flex; align-items: center; justify-content: center;
	font-size: 22px; margin-bottom: 1rem; flex: none;
}
.why-list-grid .why-text h3{
	font-family: 'Bricolage VF', sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--dark, #1C1B19);
	margin-bottom: .5rem;
}
.why-list-grid .why-text p{
	font-size: .9rem;
	color: var(--text-light, #6B6862);
	margin: 0;
	line-height: 1.55;
}
@media(max-width: 992px){
	.why-list-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media(max-width: 620px){
	.why-list-grid{ grid-template-columns: 1fr; }
}

/* Featured "Most Requested" card (Live Guided Session) inside the feature grid */
.why-list-grid .why-item-featured{
	background: linear-gradient(150deg, #2A1F12, var(--dark-brown, #211F1D) 60%);
	border: 1px solid var(--dark-brown, #211F1D);
	position: relative;
	grid-column: span 1;
}
.why-list-grid .why-item-featured .why-text h3,
.why-list-grid .why-item-featured .why-icon{ color: var(--orange-light, #D6B27E); }
.why-list-grid .why-item-featured .why-text p{ color: #C9C4BA; }
.why-list-grid .why-item-featured .why-icon{ background: rgba(214,178,126,.16); }
.feature-badge{
	position: absolute; top: 1.25rem; right: 1.25rem;
	background: var(--orange-primary, #C99A5B); color: #221805;
	font-size: 11px; font-weight: 700; letter-spacing: .04em;
	padding: 5px 12px; border-radius: 99px;
}

/* Animated icons: continuous soft pulse ring + hover response */
.why-list-grid .why-icon{
	position: relative;
	transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.why-list-grid .why-icon::after{
	content:'';
	position: absolute; inset: 0; border-radius: 50%;
	border: 2px solid var(--orange-primary, #C99A5B);
	opacity: 0; animation: iconPulse 2.8s ease-out infinite;
}
.why-list-grid .why-item:nth-child(2) .why-icon::after{ animation-delay: .2s; }
.why-list-grid .why-item:nth-child(3) .why-icon::after{ animation-delay: .4s; }
.why-list-grid .why-item:nth-child(4) .why-icon::after{ animation-delay: .6s; }
.why-list-grid .why-item:nth-child(5) .why-icon::after{ animation-delay: .8s; }
.why-list-grid .why-item:nth-child(6) .why-icon::after{ animation-delay: 1s; }
.why-list-grid .why-item:nth-child(7) .why-icon::after{ animation-delay: 1.2s; }
.why-list-grid .why-item:nth-child(8) .why-icon::after{ animation-delay: 1.4s; }
.why-list-grid .why-item:nth-child(9) .why-icon::after{ animation-delay: 1.6s; }
.why-list-grid .why-item:nth-child(10) .why-icon::after{ animation-delay: 1.8s; }
.why-list-grid .why-item:nth-child(11) .why-icon::after{ animation-delay: 2s; }
.why-list-grid .why-item:nth-child(12) .why-icon::after{ animation-delay: 2.2s; }
.why-list-grid .why-item:nth-child(13) .why-icon::after{ animation-delay: 2.4s; }
.why-list-grid .why-item:nth-child(14) .why-icon::after{ animation-delay: 2.6s; }

@keyframes iconPulse{
	0%{ transform: scale(1); opacity: .55; }
	80%{ transform: scale(1.35); opacity: 0; }
	100%{ transform: scale(1.35); opacity: 0; }
}

.why-list-grid .why-item:hover .why-icon{
	transform: scale(1.12) rotate(-6deg);
}
.why-list-grid .why-item-featured .why-icon::after{ border-color: var(--orange-light, #D6B27E); }

@media(prefers-reduced-motion: reduce){
	.why-list-grid .why-icon::after{ animation: none; }
	.why-list-grid .why-item:hover .why-icon{ transform: none; }
}

/* ============ 3D Animated Service Icons (Home: "What We Shoot") ============ */
.service-card{ perspective: 900px; }
.service-icon{
	position: relative;
	transform-style: preserve-3d;
	animation: iconFloat3D 4.5s ease-in-out infinite;
	transition: box-shadow .35s ease;
}
.service-card:nth-child(2) .service-icon{ animation-delay: .3s; }
.service-card:nth-child(3) .service-icon{ animation-delay: .6s; }
.service-card:nth-child(4) .service-icon{ animation-delay: .9s; }
.service-card:nth-child(5) .service-icon{ animation-delay: 1.2s; }
.service-card:nth-child(6) .service-icon{ animation-delay: 1.5s; }

@keyframes iconFloat3D{
	0%,100%{ transform: rotateY(0deg) rotateX(0deg) translateY(0); }
	25%{ transform: rotateY(12deg) rotateX(4deg) translateY(-4px); }
	50%{ transform: rotateY(0deg) rotateX(-3deg) translateY(-7px); }
	75%{ transform: rotateY(-12deg) rotateX(4deg) translateY(-4px); }
}

.service-card:hover .service-icon{
	animation: iconSpin3D .8s cubic-bezier(.34,1.56,.64,1) forwards;
	box-shadow: 0 16px 32px rgba(201, 154, 91, 0.45);
}
@keyframes iconSpin3D{
	0%{ transform: rotateY(0deg) scale(1); }
	60%{ transform: rotateY(200deg) scale(1.14); }
	100%{ transform: rotateY(360deg) scale(1.08); }
}

/* subtle 3D depth shading on the icon face */
.service-icon::before{
	content:''; position:absolute; inset:0; border-radius: inherit;
	background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(0,0,0,.12));
	mix-blend-mode: overlay; pointer-events:none;
}
.service-icon i{ position: relative; z-index: 1; }

@media(prefers-reduced-motion: reduce){
	.service-icon{ animation: none; }
	.service-card:hover .service-icon{ animation: none; }
}

/* Detailed Service Breakdown (services.html) */
.svc-detail-list{ padding: 5rem 0; background: var(--white); }
.svc-row-wrap{ max-width: 1100px; margin: 3rem auto 0; border-top: 1px solid var(--line, #E4E0D8); }
.svc-row{
	display: flex; align-items: center; gap: 2rem;
	padding: 1.75rem 0; border-bottom: 1px solid var(--line, #E4E0D8);
	flex-wrap: wrap;
}
.svc-row-num{
	font-family: 'Bricolage VF', sans-serif; font-weight: 700; font-size: 1rem;
	color: var(--orange-primary, #C99A5B); flex: 0 0 44px;
}
.svc-row-title{ flex: 0 0 260px; }
.svc-row-title h3{
	font-family: 'Bricolage VF', sans-serif; font-size: 1.15rem; font-weight: 700;
	color: var(--dark, #1C1B19); margin: 0;
}
.svc-row-tags{ list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; flex: 1 1 300px; }
.svc-row-tags li{
	font-size: .85rem; color: var(--text-light, #6B6862);
	background: var(--cream, #F5F3EF); border: 1px solid var(--line, #E4E0D8);
	padding: .4rem .9rem; border-radius: 99px;
}
.svc-row-cta{
	display: inline-flex; align-items: center; gap: 6px;
	font-size: .9rem; font-weight: 700; color: var(--orange-primary, #C99A5B);
	white-space: nowrap; transition: gap .25s ease, color .25s ease;
}
.svc-row-cta:hover{ gap: 10px; color: var(--orange-dark, #B8863F); }

@media(max-width: 860px){
	.svc-row{ flex-direction: column; align-items: flex-start; gap: .75rem; }
	.svc-row-title{ flex-basis: auto; }
	.svc-row-cta{ margin-top: .25rem; }
}

/* ============ Interactive 360 Panorama Heroes ============ */
.header-bg-image.pano-hero{
	background-image: none !important;
}
.header-bg-image.pano-hero .pnlm-container{
	position: absolute; inset: 0;
}
.header-bg-image.pano-hero .pnlm-load-box,
.header-bg-image.pano-hero .pnlm-about-msg,
.header-bg-image.pano-hero .pnlm-panorama-info,
.header-bg-image.pano-hero .pnlm-controls-container{
	display: none !important;
}
.pano-hero-badge{
	position: absolute; top: 18px; left: 18px; z-index: 3;
	display: flex; align-items: center; gap: 7px;
	background: rgba(28,27,25,.62); backdrop-filter: blur(6px);
	color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .03em;
	padding: 8px 14px; border-radius: 99px;
	pointer-events: none;
}
.pano-hero-badge span{
	width: 6px; height: 6px; border-radius: 50%; background: #74C7E8;
	animation: panoHeroPulse 2.2s ease-in-out infinite;
}
@keyframes panoHeroPulse{
	0%,100%{ opacity:.4; transform: scale(.85); }
	50%{ opacity:1; transform: scale(1.15); }
}

/* Homepage hero pano (replaces the old broken pano-slider mechanism) */
#hero-pano-viewer{ position: absolute; inset: 0; z-index: 0; }
#hero-pano-viewer .pnlm-load-box,
#hero-pano-viewer .pnlm-about-msg,
#hero-pano-viewer .pnlm-panorama-info,
#hero-pano-viewer .pnlm-controls-container{
	display: none !important;
}

@media(prefers-reduced-motion: reduce){
	.pano-hero-badge span{ animation: none; }
}

/* New-tab button on 360 tour cards (360vr.html) */
.portfolio-item{ position: relative; }
.portfolio-newtab-btn{
	position: absolute; top: 14px; right: 14px; z-index: 4;
	width: 38px; height: 38px; border-radius: 50%;
	background: rgba(28,27,25,.62); backdrop-filter: blur(6px);
	color: #fff; display: flex; align-items: center; justify-content: center;
	font-size: 15px;
	opacity: 0; transform: translateY(-6px);
	transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.portfolio-item:hover .portfolio-newtab-btn{
	opacity: 1; transform: translateY(0);
}
.portfolio-newtab-btn:hover{
	background: var(--orange-primary, #C99A5B); color: #221805;
}
@media(max-width: 768px){
	/* always visible on touch devices, since there's no hover state */
	.portfolio-newtab-btn{ opacity: 1; transform: none; }
}

/* Fix: header-overlay was blocking drag/touch input to the interactive panorama beneath it
   (homepage's .hero-overlay already had pointer-events:none, this one didn't) */
.header-overlay{
	pointer-events: none;
}



/* Let vertical swipes scroll the page through the panorama,
   only horizontal drags control the 360 view */
#hero-pano-header,
#hero-pano-viewer{
	touch-action: pan-y;
}

/* ============ Mobile hero: proportional 2:1 (width:height) ratio ============ */
@media(max-width: 700px){
	/* Inner pages: panorama header scales with screen width, not a fixed px value */
	.page-header{
		aspect-ratio: 4 / 3;
		min-height: unset;
	}

	/* Homepage has real text content (heading+paragraph+2 buttons), so a strict
	   2:1/4:3 box clips it - this is its actual minimum height with no clipping */
	.hero{
		padding: 90px 0 30px;
	}
	.hero .hero-image{
		display: none;
	}
	.hero .hero-text h1{
		font-size: 1.6rem;
		line-height: 1.15;
	}
	.hero .hero-text p{
		font-size: 0.85rem;
		margin-bottom: 1rem;
		line-height: 1.5;
	}
	.hero .hero-cta{
		gap: 0.5rem;
	}
	.hero .btn-primary, .hero .btn-secondary{
		padding: 0.6rem 1.1rem;
		font-size: 0.85rem;
	}
}