/* Pretty Much: custom rules from the design (loaded before the utility CSS). */
html { scroll-behavior: smooth; zoom: 1.2; }
html, body { overflow-x: hidden; }
.admin-bar #navbar { top: 32px; }
.admin-bar #mobileNav { top: calc(96px + 32px); }
@media screen and (max-width: 782px) {
	.admin-bar #navbar { top: 46px; }
	.admin-bar #mobileNav { top: calc(96px + 46px); }
}

/* Grain texture */
.grain::after {
	content: '';
	position: absolute; inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
	pointer-events: none; z-index: 1;
}
.grain > * { position: relative; z-index: 2; }

/* Home hero background */
.hero-bg { background: radial-gradient(ellipse 90% 140% at 75% 50%, rgba(244,232,182,0.55) 0%, rgba(250,247,240,0.6) 45%, #FAF8F2 100%); }
.hero-bg::before {
	content: '';
	position: absolute; top: -8%; right: -4%; width: 52%; height: 116%;
	background: linear-gradient(145deg, rgba(244,232,182,0.45) 0%, rgba(244,232,182,0.15) 65%, transparent 100%);
	clip-path: polygon(18% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.hero-bg::after {
	content: '';
	position: absolute; bottom: -20%; left: -8%;
	width: 440px; height: 440px; border-radius: 50%;
	background: radial-gradient(circle, rgba(212,175,66,0.06) 0%, transparent 70%);
	pointer-events: none;
}

/* Marquee */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: inline-flex; white-space: nowrap; animation: marquee 24s linear infinite; }

/* Home service cards */
.svc-line { position: absolute; bottom: 0; left: 0; width: 0; height: 2.5px; background: #D4AF42; transition: width 0.4s cubic-bezier(0.16,1,0.3,1); }
.svc-card:hover .svc-line { width: 100%; }
.svc-card:hover .svc-icon { background: #D4AF42; }
.svc-card:hover .svc-icon svg { stroke: white; }
.svc-icon svg { transition: stroke 0.3s; }
.svc-icon { transition: background 0.3s; }

/* CTA glow */
.cta-glow::before {
	content: '';
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 700px; height: 700px; border-radius: 50%;
	background: radial-gradient(circle, rgba(135,153,133,0.09) 0%, transparent 70%);
	pointer-events: none;
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal.visible { opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.stagger.visible > *:nth-child(1) { opacity:1; transform:none; transition-delay:0s; }
.stagger.visible > *:nth-child(2) { opacity:1; transform:none; transition-delay:0.08s; }
.stagger.visible > *:nth-child(3) { opacity:1; transform:none; transition-delay:0.16s; }
.stagger.visible > *:nth-child(4) { opacity:1; transform:none; transition-delay:0.24s; }
.stagger.visible > *:nth-child(5) { opacity:1; transform:none; transition-delay:0.32s; }
.stagger.visible > *:nth-child(6) { opacity:1; transform:none; transition-delay:0.40s; }
.stagger.visible > *:nth-child(n+7) { opacity:1; transform:none; transition-delay:0.48s; }
@media (prefers-reduced-motion: reduce) {
	.reveal, .stagger > * { opacity: 1; transform: none; transition: none; }
	.marquee-track { animation: none; }
}

/* Home process connector */
.process-row { position: relative; }
.process-row::before { content: ''; position: absolute; top: 32px; left: 12.5%; right: 12.5%; height: 1px; background: #E1DDD1; }

/* Hamburger */
.ham-open span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); }
.ham-open span:nth-child(2) { opacity: 0; }
.ham-open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
.ham-open span { transition: transform 0.3s, opacity 0.3s; }

/* Header dropdown */
.treatments-menu { opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 0.2s cubic-bezier(0.16,1,0.3,1), transform 0.2s cubic-bezier(0.16,1,0.3,1); }
.pm-dropdown:hover .treatments-menu, .pm-dropdown.open .treatments-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* FAQ accordion */
.faq-item { border-bottom: 1px solid #E1DDD1; }
.faq-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 0; cursor: pointer; background: none; border: none; text-align: left; }
.faq-icon { flex-shrink: 0; width: 20px; height: 20px; position: relative; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; background: #D4AF42; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.3s; }
.single-treatment .faq-icon::before, .single-treatment .faq-icon::after { transition: transform 0.3s, opacity 0.3s; }
.faq-icon::before { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.faq-icon::after  { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.faq-item.open .faq-icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq-body { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1); }
.faq-item.open .faq-body { max-height: 300px; }
.faq-body p { padding-bottom: 1.25rem; }

/* Slides (Treatments page panels + single treatment heroes) */
.slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 0; transition: opacity 0.8s ease; }
.tech-panel .slide-img { object-fit: scale-down; }
.slide-img.slide-active { opacity: 1; }
.tech-panel { transition: opacity 0.35s ease; }
.slide-dot { background: rgba(48,51,56,0.22); border: none; border-radius: 50%; cursor: pointer; padding: 0; transition: background 0.25s, transform 0.25s; flex-shrink: 0; }
.slide-dot.dot-active { background: rgba(48,51,56,0.8); transform: scale(1.25); }

/* Services tabs */
.tab-btn {
	cursor: pointer; background: none; border: none;
	border-bottom: 2px solid transparent;
	font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
	padding: 1.1rem 1.25rem; white-space: nowrap;
	color: rgba(48,51,56,0.35);
	transition: color 0.2s, border-color 0.2s;
}
.tab-btn:hover { color: #303338; border-bottom-color: #E1DDD1; }
.tab-btn.tab-active { color: #D4AF42; border-bottom-color: #D4AF42; }
.category-section { display: none; }
.category-section.tab-active { display: block; animation: tabFadeIn 0.2s ease both; }
@keyframes tabFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.admin-bar .sticky.top-\[96px\] { top: calc(96px + 32px); }

/* Services price tables */
.price-row:hover { background: rgba(212,175,66,0.05); }
.price-table th { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(48,51,56,0.5); padding: 0 1rem 0.75rem 0; text-align: left; }
.price-table th:first-child { padding-left: 0; }
.price-table td { padding: 0.7rem 1rem 0.7rem 0; border-top: 1px solid #E1DDD1; font-size: 0.82rem; color: #303338; font-weight: 300; text-align: left; }
.price-table td:first-child { padding-left: 0; }
.price-table td.price-single { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 500; color: #D4AF42; }
.price-table td.price-pack { font-size: 0.8rem; font-weight: 400; color: rgba(48,51,56,0.72); }

/* Generic content (blog posts / default pages) */
.pm-content > * + * { margin-top: 1.1em; }
.pm-content h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2rem; font-weight: 300; line-height: 1.2; }
.pm-content h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; font-weight: 500; }
.pm-content a { color: #B8962E; text-decoration: underline; }
.pm-content ul { list-style: disc; padding-left: 1.25rem; }
.pm-content ol { list-style: decimal; padding-left: 1.25rem; }
.pm-content img { max-width: 100%; height: auto; }