/* NOEL Atelier — luxury editorial refinement
   AATRAS warmth + Backstage editorial rhythm + NOEL identity */

:root {
	--color-primary: #a6876d;
	--color-primary-50: #fbf7f2;
	--color-primary-100: #efe4d9;
	--color-primary-500: #a6876d;
	--color-primary-600: #8f715b;
	--color-primary-700: #735947;
	--color-secondary: #6d625a;
	--color-secondary-50: #faf7f3;
	--color-secondary-100: #eee8e1;
	--color-secondary-200: #ded4ca;
	--color-secondary-300: #cbbdaf;
	--color-secondary-500: #8f8176;
	--color-secondary-600: #6d625a;
	--color-secondary-700: #514942;
	--color-neutral: #1d1916;
	--color-background: #f3eee7;
	--font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-serif: "Bodoni Moda", "Times New Roman", serif;
}

::selection { background: #a6876d; color: #fff; }

/* Review score block intentionally removed from the Atelier presentation. */
section[aria-label="Google recenzije"],
section[aria-label="Google reviews"],
section[aria-label="Google Bewertungen"] { display: none !important; }

body {
	background:
		radial-gradient(circle at 88% 8%, rgba(166,135,109,.09), transparent 27rem),
		var(--color-background);
	color: #1d1916;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.72;
}

h1, h2, h3 {
	font-family: var(--font-serif);
	font-weight: 500;
	letter-spacing: -.035em;
	text-wrap: balance;
}

h2 { font-size: clamp(2.65rem, 5vw, 4.65rem); line-height: .98; }
h3 { letter-spacing: -.025em; }

.wrap { width: min(1180px, calc(100% - 64px)); }
.narrow { width: min(820px, calc(100% - 64px)); }
.section { padding: clamp(92px, 9.5vw, 142px) 0; }

.eyebrow {
	margin-bottom: 18px;
	color: #756657;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .24em;
}

:where(a, button, summary, input, textarea, select):focus-visible { outline-color: #8f715b; }

/* Header */
.header {
	background: rgba(243,238,231,.92);
	border-bottom: 1px solid rgba(29,25,22,.08);
	backdrop-filter: blur(18px) saturate(120%);
}

.topbar { background: #1d1916; border-bottom: 0; color: #f1e9df; }
.topbar .wrap { min-height: 40px; }
.topbar a { color: inherit; }

.social-pill {
	min-height: 28px;
	padding: 4px 10px;
	border-radius: 2px;
	box-shadow: none;
}

.social-whatsapp { background: #285d4a; border-color: #285d4a; }
.social-instagram {
	background: linear-gradient(135deg, #6d405d 0%, #8f5161 55%, #9b6b50 100%);
	border-color: transparent;
}
.social-facebook { color: #e1d5ca; }

.nav { min-height: 88px; gap: 30px; }

.logo {
	font-family: var(--font-serif);
	font-size: 2.08rem;
	font-weight: 500;
	line-height: .84;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.logo span {
	margin-top: 9px;
	font-family: var(--font-sans);
	font-size: .49rem;
	font-weight: 600;
	letter-spacing: .42em;
}

.desktop-nav {
	gap: 27px;
	font-size: .73rem;
	font-weight: 600;
	letter-spacing: .055em;
	text-transform: uppercase;
}

.desktop-nav a { padding: 12px 0; }
.desktop-nav a::after { bottom: 6px; background: #a6876d; }

.button {
	min-height: 50px;
	padding: 13px 24px;
	border-color: #1d1916;
	background: #1d1916;
	font-size: .69rem;
	font-weight: 700;
	letter-spacing: .14em;
}

.button:hover {
	background: #8f715b;
	border-color: #8f715b;
	transform: translateY(-2px);
}

/* Pair foreground and background: these unlayered styles override theme.css. */
.button.secondary {
	background: #1d1916;
	border-color: #1d1916;
	color: #fff;
}

.button.secondary:hover,
.button.secondary:focus-visible {
	background: #735947;
	border-color: #735947;
	color: #fff;
}

.button.secondary.light {
	background: transparent;
	border-color: rgba(255, 255, 255, .72);
	color: #fff;
}

.button.secondary.light:hover,
.button.secondary.light:focus-visible {
	background: #fff;
	border-color: #fff;
	color: #1d1916;
}

.button:focus-visible {
	outline: 2px solid #735947;
	outline-offset: 4px;
}

.nav-book { min-height: 42px; padding-inline: 18px; }

/* Hero */
.hero, .home-hero {
	min-height: clamp(700px, 82vh, 860px);
	background: #1b1714;
}

.hero::after { box-shadow: inset 0 -170px 180px rgba(18,14,12,.23); }

.hero-photo::after, .home-hero-shade {
	background:
		linear-gradient(90deg, rgba(18,14,12,.76) 0%, rgba(18,14,12,.53) 34%, rgba(18,14,12,.13) 73%, rgba(18,14,12,.04) 100%),
		linear-gradient(0deg, rgba(18,14,12,.36) 0%, transparent 48%);
}

.hero-copy, .home-hero-copy { padding-bottom: clamp(78px, 9vw, 118px); }

.hero-copy-inner {
	position: relative;
	width: min(690px, 72%);
	padding-left: 30px;
	border-left: 1px solid rgba(240,227,214,.46);
}

.hero h1 {
	margin-bottom: 26px;
	font-size: clamp(5.2rem, 10.4vw, 9.2rem);
	line-height: .81;
	letter-spacing: -.055em;
}

.hero h1 em { color: #ead9c9; }

.hero-subtitle {
	margin-bottom: 14px;
	font-family: var(--font-sans);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.hero .lead {
	max-width: 610px;
	color: rgba(255,255,255,.82);
	font-size: clamp(.96rem, 1.2vw, 1.08rem);
}

.home-hero h1, .treatment-hero h1 {
	font-size: clamp(4.7rem, 9vw, 8.1rem);
	line-height: .86;
	letter-spacing: -.055em;
}

.home-hero-copy > p, .treatment-hero-copy > p { color: rgba(255,255,255,.82); }

.hero .button:first-child,
.home-hero .button:first-child,
.treatment-hero .button:first-child {
	background: #f2e9df;
	border-color: #f2e9df;
	color: #1d1916;
}

.hero .button:first-child:hover,
.home-hero .button:first-child:hover,
.treatment-hero .button:first-child:hover {
	background: #a6876d;
	border-color: #a6876d;
	color: #fff;
}

/* Category rail */
.intro-rail { background: #e8e0d7; border-color: #d5c9bd; }
.intro-rail a {
	padding: 21px 12px;
	border-color: #d5c9bd;
	font-family: var(--font-sans);
	font-size: .69rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.intro-rail a:hover { background: #f5f0ea; }

/* Editorial home sections */
.featured-services { background: #f6f1eb; }

.featured-heading, .split-title { gap: 64px; margin-bottom: 46px; }
.featured-heading > p, .split-title > p { color: #5b514a; line-height: 1.75; }
.featured-grid { gap: 18px; }

.featured-item {
	background: #fbf8f4;
	border: 0;
	box-shadow: 0 16px 44px rgba(41,33,27,.06);
	transition: transform .28s ease, box-shadow .28s ease;
}
.featured-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 24px 56px rgba(41,33,27,.1);
}
.featured-media { background: #ddd2c8; }
.featured-media img { transition: transform .7s cubic-bezier(.2,.65,.2,1); }
.featured-item:hover .featured-media img { transform: scale(1.045); }

.featured-inner { gap: 10px 14px; padding: 22px 22px 24px; }
.featured-number { color: #9b816b; letter-spacing: .12em; }
.featured-copy h3 { font-size: 1.35rem; }
.featured-copy p { color: #5d544d; }
.featured-book, .text-link { border-bottom-color: #a6876d; font-size: .64rem; letter-spacing: .15em; }

.welcome {
	padding-top: clamp(120px, 12vw, 180px);
	padding-bottom: clamp(120px, 12vw, 180px);
}
.welcome-inner { position: relative; max-width: 820px; }
.welcome-inner::before {
	content: "";
	display: block;
	width: 52px;
	height: 1px;
	margin: 0 auto 28px;
	background: #a6876d;
}
.welcome h2 { font-size: clamp(3.2rem, 6vw, 5.4rem); }
.welcome p {
	max-width: 710px;
	color: #5b514a;
	font-size: 1.03rem;
	line-height: 1.85;
}

.welcome + .narrow.section {
	width: min(1180px, calc(100% - 64px));
	padding-top: 0;
	padding-bottom: clamp(90px, 9vw, 132px);
	border-top: 1px solid #cfc2b6;
}
.welcome + .narrow.section .section-title { padding-top: 34px; }

.services-section { background: #e6ddd3; }
.cards { gap: 20px; }

.service-card {
	background: #f7f1ea;
	border: 0;
	box-shadow: none;
	transition: transform .3s ease, box-shadow .3s ease;
}
.service-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 46px rgba(41,33,27,.08);
}
.card-image { background: #d8ccc0; }
.card-image img { transition: transform .7s cubic-bezier(.2,.65,.2,1); }
.service-card:hover .card-image img { transform: scale(1.045); }
.card-body { padding: 24px 24px 26px; }
.card-body h3 { font-size: 1.42rem; }
.card-body p, .story-copy p, .contact-card p { color: #574f49; }

/* Dark editorial portfolio */
.portfolio-section { background: #1d1916; color: #f4ede5; }
.portfolio-section .eyebrow { color: #c9ae96; }
.portfolio-section .split-title > p { color: #c9bfb6; }
.gallery { gap: 8px; }
.gallery figure { background: #342d28; }
.gallery img { transition: transform .8s cubic-bezier(.2,.65,.2,1), filter .4s ease; }
.gallery figure:hover img { transform: scale(1.035); filter: saturate(1.04); }
.gallery figcaption {
	left: 18px;
	bottom: 16px;
	max-width: calc(100% - 36px);
	padding: 0;
	background: transparent;
	backdrop-filter: none;
	font-family: var(--font-sans);
	font-size: .64rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-shadow: 0 2px 14px rgba(0,0,0,.7);
}
.gallery-context { color: #c9bfb6 !important; }

.story { background: #f3eee7; }
.story.dark, .treatment-final, .price-note-section, .services-cta { background: #211b18; }
.story.dark .eyebrow,
.treatment-final .eyebrow,
.price-note .eyebrow,
.services-cta .eyebrow { color: #c9ae96; }
.story.muted-band { background: #ded3c8; }

.home-team { background: #eee6de; }
.home-team::before { background: #a6876d; }
.home-team-card:nth-child(2) { margin-top: 48px; }
.home-team-card span { color: #6a5d54; }

.home-contact { background: #dfd5cb; }
.contact-card { background: #f7f1ea; border-color: #cabdaf; }
.contact-card.simple { background: rgba(255,255,255,.22); }

/* Page headers and service pages */
.page-head { min-height: 510px; background: #211b18; }
.page-head-media::after {
	background: linear-gradient(90deg, rgba(24,19,16,.8), rgba(24,19,16,.34) 60%, rgba(24,19,16,.12));
}
.page-head-copy { padding-bottom: 76px; }
.page-head h1 {
	font-size: clamp(4.2rem, 8.2vw, 7.4rem);
	line-height: .88;
	letter-spacing: -.05em;
}
.breadcrumbs { color: #6d625a; }

.category-links {
	top: 128px;
	background: rgba(243,238,231,.95);
	border-color: #d6cabf;
}
.category-links a:hover { background: #e8ddd2; }

.category-section,
.price-section,
.treatment-intro,
.treatment-note-section { background: #f6f1eb; }

.category-section.is-muted,
.price-section.is-muted,
.treatment-detail-band { background: #e5dbd1; }

.category-media, .treatment-note-media { background: #d9cec4; }
.category-media img, .treatment-note-media img {
	transition: transform .7s cubic-bezier(.2,.65,.2,1);
}
.category-media:hover img, .treatment-note-media:hover img { transform: scale(1.025); }

.category-lead,
.price-section-heading p,
.treatment-intro-copy > p,
.treatment-note-copy > p { color: #5b514a; }

.service-list,
.service-list li,
.price-card,
.price-card-head,
.price-row,
.treatment-small-note,
.treatment-checks,
.treatment-checks li,
.treatment-facts,
.treatment-facts > div { border-color: #cfc2b6; }

.service-list li { padding-block: 13px; font-size: 1.08rem; }
.service-list li::before, .treatment-checks li::before { background: #a6876d; }

/* Price list */
.price-section { padding: clamp(78px, 8vw, 118px) 0; }
.price-section-heading h2 { font-size: clamp(2.5rem, 4.6vw, 4rem); }
.price-groups { gap: 20px; }
.price-card { background: rgba(255,255,255,.42); box-shadow: none; }
.price-card-head { padding: 22px 24px; }
.price-card-head h3 { font-size: 1.35rem; }
.price-row { min-height: 58px; padding: 14px 24px; }
.price-row strong { font-size: 1rem; }
.price-row .price-value { color: #1d1916; }
.price-row-head { background: rgba(222,211,201,.4); }

/* Treatment landings */
.treatment-hero {
	min-height: clamp(700px, 82vh, 860px);
	background: #211b18;
}
.treatment-hero-shade {
	background:
		linear-gradient(90deg, rgba(22,17,14,.82) 0%, rgba(22,17,14,.55) 38%, rgba(22,17,14,.1) 78%),
		linear-gradient(0deg, rgba(22,17,14,.32), transparent 48%);
}
.treatment-intro-grid,
.treatment-note-grid,
.treatment-final-grid { gap: clamp(54px, 8vw, 110px); }

.pmu-provider { background: #e8ddd2; border-left-color: #a6876d; }
.treatment-detail-card { background: #f7f1ea; border-color: #cfc2b6; }
.treatment-detail-card.dark-card { background: #211b18; border-color: #211b18; }
.treatment-final { color: #f4ede5; }

/* About, contact and footer */
.about-values-grid > div, .team-card, .contact-method { border-color: #cfc2b6; }

footer {
	padding-top: 76px;
	background: #1b1714;
	color: #f0e8df;
}
.footer-grid { gap: 62px; }
.footer-grid p { color: #cbbeb2; }
.footer-bottom { border-color: rgba(255,255,255,.14); color: #bdb0a5; }

/* Refined motion */
@keyframes noel-editorial-reveal {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}

.hero-copy-inner > *,
.home-hero-copy > *,
.treatment-hero-copy > * {
	animation: noel-editorial-reveal .72s cubic-bezier(.2,.7,.2,1) both;
}
.hero-copy-inner > *:nth-child(2),
.home-hero-copy > *:nth-child(2),
.treatment-hero-copy > *:nth-child(2) { animation-delay: .07s; }
.hero-copy-inner > *:nth-child(3),
.home-hero-copy > *:nth-child(3),
.treatment-hero-copy > *:nth-child(3) { animation-delay: .14s; }
.hero-copy-inner > *:nth-child(4),
.home-hero-copy > *:nth-child(4),
.treatment-hero-copy > *:nth-child(4) { animation-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
	.hero-copy-inner > *,
	.home-hero-copy > *,
	.treatment-hero-copy > * { animation: none; }
}

/* Responsive */
@media (max-width: 980px) {
	.wrap, .welcome + .narrow.section { width: min(100% - 40px, 1180px); }
	.narrow { width: min(820px, calc(100% - 40px)); }
	.hero-copy-inner { width: min(680px, 84%); }
	.home-team-card:nth-child(2) { margin-top: 28px; }
}

@media (max-width: 720px) {
	.wrap, .narrow, .welcome + .narrow.section { width: min(100% - 30px, 1180px); }
	.section { padding: 76px 0; }
	.topbar .wrap { min-height: 38px; }
	.nav { min-height: 72px; }
	.logo { font-size: 1.72rem; }

	.hero, .home-hero, .treatment-hero { min-height: 650px; }
	.hero-copy, .home-hero-copy, .treatment-hero-copy { padding-bottom: 58px; }
	.hero-copy-inner { width: 100%; padding-left: 18px; }

	.hero h1 { font-size: clamp(4.45rem, 21vw, 6rem); }
	.home-hero h1, .treatment-hero h1 { font-size: clamp(3.9rem, 17vw, 5.35rem); }

	.welcome { padding-top: 104px; padding-bottom: 104px; }
	.welcome h2 { font-size: clamp(2.9rem, 13vw, 4.25rem); }

	.featured-heading, .split-title { gap: 18px; margin-bottom: 32px; }
	.featured-inner, .card-body { padding: 21px; }
	.gallery { gap: 8px; }
	.home-team-card:nth-child(2) { margin-top: 0; }

	.page-head { min-height: 390px; }
	.page-head-copy { padding-bottom: 50px; }
	.page-head h1 { font-size: clamp(3.6rem, 17vw, 5rem); }
	.category-links { top: 110px; }
	.price-row { padding-inline: 16px; }
}

/* Landing-page readability: explicit colors on dark surfaces. */
.treatment-detail-card.dark-card .eyebrow,
.treatment-hero .eyebrow,
.page-head .eyebrow,
footer .eyebrow { color: #e8d7c7; }
.story.dark .story-copy p { color: #e4d9cf; }
.featured-number { color: #735947; }
.hero .button:first-child:hover,
.home-hero .button:first-child:hover,
.treatment-hero .button:first-child:hover {
	background: #735947;
	border-color: #735947;
	color: #fff;
}
.topbar .social-whatsapp,
.topbar .social-instagram { color: #fff; }

/* Verified 16 October Lighthouse nodes: restore section-specific readable text. */
/* Buttons in dark booking sections must retain a pale background and dark text. */
.price-note .button,
.services-cta .button,
.treatment-final .button,
.about-standards .button {
  background: #f5f1ec;
  border-color: #f5f1ec;
  color: #221f1c;
}
.price-note .button:hover,
.price-note .button:focus-visible,
.services-cta .button:hover,
.services-cta .button:focus-visible,
.treatment-final .button:hover,
.treatment-final .button:focus-visible,
.about-standards .button:hover,
.about-standards .button:focus-visible {
  background: #735947;
  border-color: #735947;
  color: #fff;
}
/* Price labels and durations on alternating beige panels. */
#sadrzaj .category-section .eyebrow { color: #514942; }
/* Verified contact-card and visit-section labels on pale backgrounds. */
#sadrzaj .contact-method:not(.featured) .contact-kicker,
#sadrzaj .visit-section .eyebrow,
#sadrzaj .visit-meta span,
#sadrzaj .visit-meta small { color: #514942; }
#sadrzaj .treatment-facts span { color: #514942; }
#sadrzaj .price-row > span,
#sadrzaj .price-section .eyebrow { color: #514942; }
.noel-reviews .eyebrow,
.services-section .eyebrow,
.story.muted-band .eyebrow,
.home-contact .eyebrow { color: #514942; }
.portfolio-section .split-title > p,
.portfolio-section .gallery-context { color: #e5d9ce !important; }
.story.dark .story-copy p { color: #e4d9cf !important; }
.social-instagram {
	background: linear-gradient(135deg, #6d405d 0%, #8f5161 55%, #87573f 100%);
}