/*
 * About Us page (/about-us/, post 220): glass and responsive layer.
 *
 * The page is built from theme layouts the home page does not use (about-1,
 * choose-1, portfolio-1, testimonial-1, steps-1, blog-1), so glass.css's
 * home rules do not reach it. This file gives its components the same glass
 * system (client, 2026-10-16), using glass.css's custom properties:
 *
 *   - dark glass on every card: rgba(28,24,20,.55-.72) + a faint 135deg
 *     sheen + backdrop blur, and the 1px gradient edge (--pc-edge) on a free
 *     pseudo-element, masked to a ring;
 *   - amber glass pill buttons with white text (--pc-amber);
 *   - white glass for small pills (breadcrumb, tags, day badges).
 *
 * The second half fixes the phone and tablet layouts.
 *
 * Loaded on this page only (inc/enqueue.php), after glass.css; every
 * selector is scoped to `body.pc-about`.
 */

/* ================================================================== *
 * The edge — the same 1px gradient ring as glass.css
 * ================================================================== */

/* ::after free on these. */
body.pc-about .nm-pr-btn-1::after,
body.pc-about .nm-choose-1-item::after,
body.pc-about .nm-choose-1-fast .content-wrap::after,
body.pc-about .nm-steps-1-card .content::after,
body.pc-about .nm-testimonial-1-main-slider::after,
/* ::after is the theme's gold hover fill, so ::before. */
body.pc-about .nm-about-1-card::before,
body.pc-about .nm-portfolio-1-top-features-single::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	padding: 1px;
	border-radius: inherit;
	background: var(--pc-edge);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	pointer-events: none;
}

body.pc-about .nm-pr-btn-1,
body.pc-about .nm-choose-1-item,
body.pc-about .nm-choose-1-fast .content-wrap {
	position: relative;
}

/* The testimonial quote is absolutely positioned (centred in the avatar arc)
   on desktop, so already a positioned box; it is made relative only below
   992px, where the theme leaves it static. */
@media (max-width: 991px) {
	body.pc-about .nm-testimonial-1-main-slider {
		position: relative;
	}
}

/* Desktop: the glass padding makes the quote card ~90px taller than the
   theme's, so it ran past the bottom of the arc block and under the next
   section (the author line was hidden). The block gets that room back. */
@media (min-width: 992px) {
	body.pc-about .nm-testimonial-1-wrap {
		margin-bottom: 70px;
	}
}

/* The choose-1 cards are exactly their item's size; the ring sits on the
   item so it is not clipped by the card's own overflow: hidden. */
body.pc-about .nm-choose-1-item {
	border-radius: 20px;
}

/* ================================================================== *
 * Dark glass cards
 * ================================================================== */

/* About: "What We're Here For" and the two stacked behind it. A touch more
   solid (.72) because they overlap while they stack in. */
body.pc-about .nm-about-1-card {
	background-color: rgba(28, 24, 20, 0.72);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 45%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	        backdrop-filter: blur(18px) saturate(140%);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* Our Story stats (500+, 15+, 98%). */
body.pc-about .nm-portfolio-1-top-features-single {
	background-color: rgba(28, 24, 20, 0.55);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 45%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	        backdrop-filter: blur(16px) saturate(140%);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}

/* Why Choose Us: the photo/pattern cards keep their artwork; only their
   solid #111 becomes glass. */
body.pc-about .nm-choose-1-handshake,
body.pc-about .nm-choose-1-testimonial,
body.pc-about .nm-choose-1-turnaround {
	background-color: rgba(28, 24, 20, 0.6);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	        backdrop-filter: blur(16px) saturate(140%);
}

body.pc-about .nm-choose-1-item {
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

/* "No Slow Lane": already a frosted panel over the car photo; it gets the
   sheen and the edge. */
body.pc-about .nm-choose-1-fast .content-wrap {
	background-color: rgba(20, 18, 16, 0.35);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 50%);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	        backdrop-filter: blur(14px) saturate(150%);
}

/* Steps: the three timeline cards. */
body.pc-about .nm-steps-1-card .content {
	background-color: rgba(28, 24, 20, 0.55);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 45%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	        backdrop-filter: blur(16px) saturate(140%);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* Testimonial: the quote in the middle of the avatar arc becomes a glass
   card of its own. */
body.pc-about .nm-testimonial-1-main-slider {
	padding: 30px 28px 26px;
	border-radius: 24px;
	background-color: rgba(28, 24, 20, 0.5);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 45%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	        backdrop-filter: blur(18px) saturate(140%);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* Avatars: a thin light rim, like glass beads. */
body.pc-about .nm-testimonial-1-preview-slider-item {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 10px 24px rgba(0, 0, 0, 0.4);
}

/* ================================================================== *
 * White glass pills
 * ================================================================== */

/* Portfolio and blog category tags sit on photos, some of them nearly
   white, where a white pill lost its text: dark glass with a light rim. */
body.pc-about .nm-portfolio-1-card .card-categories .link-elm,
body.pc-about .nm-blog-1-item .card-categories .link-elm {
	background: linear-gradient(180deg, rgba(40, 36, 32, 0.62) 0%, rgba(20, 18, 16, 0.5) 100%);
	color: #fff;
	-webkit-backdrop-filter: blur(12px) saturate(150%);
	        backdrop-filter: blur(12px) saturate(150%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* The steps' day badges ("3-5 days") sit on the dark cards: white glass. */
body.pc-about .nm-steps-1-card .date {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.08) 100%);
	color: #fff;
	-webkit-backdrop-filter: blur(12px) saturate(150%);
	        backdrop-filter: blur(12px) saturate(150%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 6px 16px rgba(0, 0, 0, 0.3);
}

body.pc-about .nm-steps-1-card .date {
	border-radius: 100px;
}

/* ================================================================== *
 * Amber glass pill buttons ("Book Strategy Call", "More Portfolio",
 * "More Review", "More blog") — the home page's button, white text.
 * ================================================================== */
body.pc-about .nm-pr-btn-1 {
	background-color: rgba(150, 106, 44, 0.9) !important;
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 100%),
		var(--pc-amber) !important;
	color: #fff !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	-webkit-backdrop-filter: blur(16px) saturate(170%);
	        backdrop-filter: blur(16px) saturate(170%);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

body.pc-about .nm-pr-btn-1 .text,
body.pc-about .nm-pr-btn-1:hover .text {
	color: #fff !important;
}

body.pc-about .nm-pr-btn-1 .icon {
	background: rgba(0, 0, 0, 0.7) !important;
	-webkit-backdrop-filter: blur(10px);
	        backdrop-filter: blur(10px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* ================================================================== *
 * Responsive
 * ================================================================== */

/* Tablets and phones: the banner is locked to 535px by the Customizer's
   Additional CSS (`body:not(.pc-engine-service) .nm-breadcrumb-area`: min-
   AND max-height !important, padding-top 240px), more than half a phone
   screen. That CSS is client-edited and left alone; this outranks it on
   this page only (`html body.pc-about` beats its 0-2-1). */
@media (max-width: 991px) {
	html body.pc-about .nm-breadcrumb-area {
		min-height: 0 !important;
		max-height: none !important;
		padding: 170px 0 80px;
	}
}

/* Tablets (768-991px): the theme keeps the desktop avatar arc down to
   768px, where it no longer fits: avatars ran off both edges and the block
   grew to ~1050px. Its own phone layout (avatars in rows, the quote below)
   is applied here too, with 60px avatars, two rows of ten. */
@media (min-width: 768px) and (max-width: 991px) {
	body.pc-about .nm-testimonial-1-wrap {
		height: auto;
		margin-bottom: 80px;
	}
	body.pc-about .nm-testimonial-1-preview {
		margin-top: 40px;
	}
	body.pc-about .nm-testimonial-1-preview-slider .swiper-wrapper {
		max-width: 100%;
		height: auto;
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		justify-content: center;
	}
	body.pc-about .nm-testimonial-1-preview-slider .swiper-wrapper .swiper-slide,
	body.pc-about .nm-testimonial-1-preview-slider-item {
		position: unset;
		width: 60px;
		height: 60px;
	}
	body.pc-about .nm-testimonial-1-preview-slider .swiper-wrapper .swiper-slide:nth-child(n+21) {
		display: none;
	}
	body.pc-about .nm-testimonial-1-main-slider {
		left: auto;
		top: auto;
		transform: unset;
		max-width: 560px;
		margin: 36px auto 0;
	}
}

/* Why Choose Us (tablets and phones): the three photo cards were a fixed
   585-645px tall, most of it empty. They size to their content now; the two
   whose photo is a full-bleed background keep enough height to show it. */
@media (max-width: 991px) {
	body.pc-about .nm-choose-1-item:not(.has-2-clm),
	body.pc-about .nm-choose-1-item:not(.has-2-clm) > * {
		height: auto;
	}
	body.pc-about .nm-choose-1-fast,
	body.pc-about .nm-choose-1-experience {
		min-height: 400px;
	}

	/* "99+ Happy client" (a half-width card here too): 106px avatars wrapped
	   onto two rows, the fourth sliding past the card's edge, with a stray
	   divider and 92px of padding. Now: rating, then one overlapping row of
	   avatars. */
	body.pc-about .nm-choose-1-testimonial {
		padding: 36px 22px;
	}
	body.pc-about .nm-choose-1-testimonial .content-wrap {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
	}
	body.pc-about .nm-choose-1-testimonial .content-wrap-line {
		display: none;
	}
	body.pc-about .nm-choose-1-author {
		display: flex;
		flex-wrap: nowrap;
		width: auto;
	}
	body.pc-about .nm-choose-1-author .author-img {
		position: relative;
		left: auto;
		top: auto;
		flex: 0 0 auto;
		width: 64px;
		height: 64px;
		margin: 0 0 0 -14px;
		transform: none;
	}
	body.pc-about .nm-choose-1-author .author-img:first-child {
		margin-left: 0;
	}
}

@media (max-width: 767px) {
	html body.pc-about .nm-breadcrumb-area {
		padding: 130px 0 56px;
		background-position: 70% 0;
	}

	/* Our Story stats: three across instead of three stacked full-width. */
	body.pc-about .nm-portfolio-1-top-features {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
	}
	body.pc-about .nm-portfolio-1-top-features-single {
		width: auto;
		margin: 0;
		padding: 18px 8px;
	}
	body.pc-about .nm-portfolio-1-top-features-single .title {
		font-size: 26px;
	}
	body.pc-about .nm-portfolio-1-top-features-single .disc {
		font-size: 12px;
		line-height: 1.35;
	}

	/* Testimonial: the theme laid all 21 avatars out as a seven-row grid
	   above the quote. Two rows of six smaller avatars instead. */
	body.pc-about .nm-testimonial-1-preview {
		margin-top: 30px;
	}
	body.pc-about .nm-testimonial-1-preview-slider .swiper-wrapper {
		gap: 8px;
	}
	body.pc-about .nm-testimonial-1-preview-slider .swiper-wrapper .swiper-slide,
	body.pc-about .nm-testimonial-1-preview-slider-item {
		width: 50px;
		height: 50px;
	}
	body.pc-about .nm-testimonial-1-preview-slider .swiper-wrapper .swiper-slide:nth-child(n+13) {
		display: none;
	}
	body.pc-about .nm-testimonial-1-main-slider {
		margin-top: 24px;
		padding: 26px 20px 22px;
		/* The theme centres it with left: 50% on desktop and leaves it static
		   here; made relative (for the edge ring) that left: 50% would apply
		   and push it half off the screen. */
		left: auto;
		top: auto;
	}

	/* Buttons: a little smaller, and never wider than the screen. */
	body.pc-about .nm-pr-btn-1 {
		max-width: 100%;
		font-size: 17px;
	}
	body.pc-about .nm-pr-btn-1 .icon {
		width: 46px;
		height: 46px;
	}
}

/* ================================================================== *
 * No backdrop-filter: solid colours, readable without blur.
 * ================================================================== */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.pc-about .nm-about-1-card,
	body.pc-about .nm-portfolio-1-top-features-single,
	body.pc-about .nm-steps-1-card .content,
	body.pc-about .nm-testimonial-1-main-slider {
		background-color: rgb(24, 22, 20);
	}
}

/* The Our Story section's decorative glow (.nm-bg-shadow) hangs ~40px past
   the right edge on phones. body hides the overflow, but iOS Safari can
   still let the page pan sideways; clipping it at the section is safe
   (`clip`, unlike `hidden`, does not make a scroll container). */
body.pc-about .nm-portfolio-1-area {
	overflow-x: clip;
}