/* ==========================================================================
   ARCA STUDIO — Premium Architecture & Interior Design Theme
   Design System & Components
   by LunovaStudioCo
   --------------------------------------------------------------------------
   TABLE OF CONTENTS
   1.  Design Tokens (CSS Variables)
   2.  Reset & Base
   3.  Typography
   4.  Layout & Containers
   5.  Buttons
   6.  Header & Navigation
   7.  Hero & Slider
   8.  Sections & Cards
   9.  Process Steps
   10. Testimonials
   11. Accordion (FAQ)
   12. Forms
   13. Blog
   14. Footer
   15. Scroll Animations
   16. Utilities
   17. Responsive
   18. Accessibility (reduced motion, focus)
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
	/* ======================================================================
	   ARCA STUDIO — architectural neutral palette
	   Warm White · Sand · Beige · Stone · Taupe · Concrete · Soft Charcoal.
	   No saturated colour anywhere. Variable NAMES are kept from the base
	   framework so every component class still resolves; only VALUES change.
	   ====================================================================== */

	/* --- Color: backgrounds (warm white + sand neutrals) --- */
	--a-beige:        #F7F4EF;  /* main warm-white background */
	--a-surface:      #FCFAF6;  /* cards / elevated surfaces */
	--a-white:        #FFFFFF;
	--a-beige-deep:   #E9E1D4;  /* alternate sections (sand) */

	/* --- Aliases kept so existing class names still resolve --- */
	--a-ivory:        #F7F4EF;  /* warm white */
	--a-greige:       #E9E1D4;  /* sand */
	--a-sand:         #E9E1D4;
	--a-beige-mid:    #DDD3C4;  /* beige */

	/* --- Color: brand ink (soft charcoal) + stone accent --- */
	--a-sage:         #2C2A28;  /* PRIMARY ink / soft charcoal (near-black) */
	--a-sage-deep:    #1C1B19;  /* hover / pressed / darkest */
	--a-gold:         #9B9184;  /* TAUPE — the quiet metallic-neutral accent */
	--a-gold-soft:    #C3B8A8;  /* stone — light accent */
	--a-clay:         #9B9184;  /* alias → taupe accent */
	--a-clay-soft:    #C3B8A8;  /* alias → stone */

	/* --- Color: text --- */
	--a-charcoal:     #2C2A28;  /* headings + body (soft charcoal) */
	--a-stone:        #6E6A63;  /* secondary text (concrete) */
	--a-taupe:        #9B9184;  /* muted labels */
	--a-mist:         #DED6C9;  /* borders / dividers (warm hairline) */
	--a-line:         #DED6C9;

	/* --- Typography (Cormorant Garamond headings + Jost body) --- */
	--a-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--a-font-body:    'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--a-h1: clamp(3rem, 6.5vw, 4.75rem);    /* ~48-76px  editorial display */
	--a-h2: clamp(2.35rem, 5vw, 3.35rem);   /* ~38-54px */
	--a-h3: clamp(1.7rem, 3vw, 2.15rem);    /* ~27-34px */
	--a-h4: 1.5rem;                         /* 24px */
	--a-body: 1.0625rem;                    /* 17px */
	--a-small: 0.9375rem;                   /* 15px */
	--a-overline: 0.75rem;                  /* 12px — architectural label */

	--a-leading-body: 1.8;
	--a-leading-head: 1.08;
	--a-tracking-overline: 0.32em;          /* wide-tracked labels */

	/* --- Spacing scale (4px base) --- */
	--a-1: 0.25rem;   /* 4 */
	--a-2: 0.5rem;    /* 8 */
	--a-3: 0.75rem;   /* 12 */
	--a-4: 1rem;      /* 16 */
	--a-6: 1.5rem;    /* 24 */
	--a-8: 2rem;      /* 32 */
	--a-12: 3rem;     /* 48 */
	--a-16: 4rem;     /* 64 */
	--a-24: 6rem;     /* 96 */
	--a-section: clamp(5rem, 10vw, 9rem);   /* generous architectural rhythm */

	/* --- Radius — crisp, gallery-like (near-square) --- */
	--a-radius-sm: 0px;
	--a-radius-md: 2px;
	--a-radius-lg: 3px;
	--a-radius-full: 999px;

	/* --- Shadows (soft, diffuse, warm-neutral) --- */
	--a-shadow-xs: 0 1px 2px rgba(28, 27, 25, 0.04);
	--a-shadow-sm: 0 10px 30px rgba(28, 27, 25, 0.05);
	--a-shadow-md: 0 20px 50px rgba(28, 27, 25, 0.08);
	--a-shadow-lg: 0 30px 70px rgba(28, 27, 25, 0.11);

	/* --- Layout --- */
	--a-container: 1280px;
	--a-container-narrow: 820px;

	/* --- Motion --- */
	--a-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--a-dur: 0.8s;
	--a-dur-fast: 0.35s;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background-color: var(--a-ivory);
	color: var(--a-charcoal);
	font-family: var(--a-font-body);
	font-size: var(--a-body);
	font-weight: 300;
	line-height: var(--a-leading-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a {
	color: var(--a-sage-deep);
	text-decoration: none;
	transition: color var(--a-dur-fast) var(--a-ease);
}
a:hover { color: var(--a-charcoal); }

ul, ol { margin: 0; padding: 0; }

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--a-font-display);
	font-weight: 500;
	line-height: var(--a-leading-head);
	color: var(--a-charcoal);
	margin: 0 0 var(--a-4);
	letter-spacing: 0.01em;
}

h1 { font-size: var(--a-h1); }
h2 { font-size: var(--a-h2); }
h3 { font-size: var(--a-h3); }
h4 { font-size: var(--a-h4); font-weight: 600; }

p { margin: 0 0 var(--a-4); }

.s-overline {
	display: inline-block;
	font-family: var(--a-font-body);
	font-size: var(--a-overline);
	font-weight: 500;
	letter-spacing: var(--a-tracking-overline);
	text-transform: uppercase;
	color: var(--a-taupe);
	margin-bottom: var(--a-4);
}

.s-lead {
	font-size: 1.25rem;
	color: var(--a-stone);
	line-height: 1.65;
	font-weight: 300;
}

blockquote {
	font-family: var(--a-font-display);
	font-size: 1.7rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--a-charcoal);
	border-left: 1px solid var(--a-sage);
	margin: var(--a-8) 0;
	padding-left: var(--a-6);
}

/* ==========================================================================
   4. LAYOUT & CONTAINERS
   ========================================================================== */
.s-container {
	width: 100%;
	max-width: var(--a-container);
	margin-inline: auto;
	padding-inline: var(--a-6);
}

.s-container--narrow { max-width: var(--a-container-narrow); }

.s-section { padding-block: var(--a-section); }
.s-section--ivory   { background: var(--a-ivory); }
.s-section--greige  { background: var(--a-greige); }
.s-section--surface { background: var(--a-surface); }

.s-section-head {
	max-width: 680px;
	margin: 0 auto var(--a-16);
	text-align: center;
}
.s-section-head p { color: var(--a-stone); margin-bottom: 0; font-weight: 300; }

/* Architectural mark — a thin vertical rule used as a quiet divider */
.s-arc {
	width: 1px;
	height: 56px;
	background: var(--a-stone);
	border: none;
	border-radius: 0;
	margin: 0 auto var(--a-8);
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.s-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--a-2);
	font-family: var(--a-font-body);
	font-size: var(--a-overline);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 1.15rem 2.4rem;
	border-radius: var(--a-radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
	transition: all var(--a-dur-fast) var(--a-ease);
	will-change: transform;
}

.s-btn--primary {
	background: var(--a-sage);
	color: var(--a-white);
}
.s-btn--primary:hover {
	background: var(--a-sage-deep);
	color: var(--a-white);
	transform: translateY(-2px);
	box-shadow: var(--a-shadow-md);
}

.s-btn--ghost {
	background: transparent;
	color: var(--a-charcoal);
	border-color: var(--a-charcoal);
}
.s-btn--ghost:hover {
	background: var(--a-charcoal);
	color: var(--a-white);
	transform: translateY(-2px);
}

/* Ghost on dark photography (hero) */
.s-btn--outline-light {
	background: transparent;
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.7);
}
.s-btn--outline-light:hover {
	background: #FFFFFF;
	color: var(--a-charcoal);
	transform: translateY(-2px);
}

.s-btn--light {
	background: var(--a-white);
	color: var(--a-charcoal);
}
.s-btn--light:hover { background: var(--a-greige); transform: translateY(-2px); }

/* Animated text link */
.s-link-underline {
	position: relative;
	font-family: var(--a-font-body);
	font-size: var(--a-overline);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--a-charcoal);
	padding-bottom: 3px;
}
.s-link-underline::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 1px;
	background: var(--a-charcoal);
	transform: scaleX(1);
	transform-origin: left;
	transition: transform var(--a-dur-fast) var(--a-ease);
}
.s-link-underline:hover::after { transform: scaleX(0); transform-origin: right; }

/* ==========================================================================
   6. HEADER & NAVIGATION
   ========================================================================== */
.s-header {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	z-index: 1000;
	padding-block: var(--a-6);
	background: transparent;
	transition: background var(--a-dur-fast) var(--a-ease),
	            padding var(--a-dur-fast) var(--a-ease),
	            box-shadow var(--a-dur-fast) var(--a-ease);
}
.s-header.is-scrolled {
	background: var(--a-ivory);
	padding-block: var(--a-3);
	box-shadow: var(--a-shadow-sm);
}

.s-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--a-6);
}

.s-logo {
	font-family: var(--a-font-display);
	font-size: 1.65rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--a-charcoal);
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding-left: 0.06em;
}
.s-logo img { max-height: 46px; width: auto; }
.s-logo__arc {
	width: 12px; height: 12px;
	border: 1px solid var(--a-sage);
	border-radius: 0;
	background: transparent;
}

.s-nav { display: flex; align-items: center; gap: var(--a-8); }

.arca-menu {
	display: flex;
	align-items: center;
	gap: var(--a-8);
	list-style: none;
}
.arca-menu a {
	position: relative;
	font-size: var(--a-small);
	font-weight: 400;
	letter-spacing: 0.03em;
	color: var(--a-charcoal);
	padding-block: var(--a-1);
}
.arca-menu a::after {
	content: '';
	position: absolute;
	left: 0; bottom: -4px;
	width: 100%; height: 1px;
	background: var(--a-sage);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--a-dur-fast) var(--a-ease);
}
.arca-menu a:hover::after,
.arca-menu .current-menu-item > a::after { transform: scaleX(1); }

/* Mobile toggle */
.s-menu-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	width: 28px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}
.s-menu-toggle span {
	display: block;
	height: 1.5px;
	width: 100%;
	background: var(--a-charcoal);
	transition: transform var(--a-dur-fast) var(--a-ease),
	            opacity var(--a-dur-fast) var(--a-ease);
}
.s-menu-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.s-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.s-menu-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ==========================================================================
   7. HERO & SLIDER
   ========================================================================== */
.s-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.s-hero__slides { position: absolute; inset: 0; z-index: 0; }
.s-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.05);
	transition: opacity 1.4s ease-in-out, transform 7s linear;
}
.s-hero__slide.is-active {
	opacity: 1;
	transform: scale(1);
}
/* Editorial charcoal overlay — full-bleed studio photography, white text */
.s-hero__slide::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(28, 27, 25, 0.28) 0%,
		rgba(28, 27, 25, 0.40) 55%,
		rgba(28, 27, 25, 0.62) 100%
	);
}

.s-hero__content {
	position: relative;
	z-index: 2;
	max-width: 760px;
	padding-block: var(--a-24) var(--a-16);
}
.s-hero__content .s-overline { color: var(--a-stone); }
.s-hero__title { margin-bottom: var(--a-6); color: #FFFFFF; }
.s-hero__text {
	font-size: 1.2rem;
	color: rgba(247, 244, 239, 0.85);
	margin-bottom: var(--a-8);
	max-width: 520px;
}
.s-hero__actions { display: flex; flex-wrap: wrap; gap: var(--a-4); }

/* Slide indicators — thin lines, not dots */
.s-hero__indicators {
	position: absolute;
	bottom: var(--a-12);
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: var(--a-3);
}
.s-hero__dot {
	width: 40px; height: 2px;
	background: rgba(247, 244, 239, 0.35);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background var(--a-dur-fast) var(--a-ease);
}
.s-hero__dot.is-active { background: #FFFFFF; }

/* Scroll indicator */
.s-hero__scroll {
	position: absolute;
	bottom: var(--a-8);
	right: var(--a-12);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--a-2);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--a-stone);
}
.s-hero__scroll-line {
	width: 1px; height: 48px;
	background: var(--a-stone);
	animation: scrollPulse 2.4s var(--a-ease) infinite;
	transform-origin: top;
}
@keyframes scrollPulse {
	0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
	50%      { transform: scaleY(1);   opacity: 1; }
}

/* Page hero (interior pages — smaller) */
.s-page-hero {
	position: relative;
	padding-block: calc(var(--a-24) + var(--a-12)) var(--a-16);
	text-align: center;
	background: var(--a-greige);
}
.s-page-hero h1 { margin-bottom: var(--a-3); }
.s-page-hero p { color: var(--a-stone); max-width: 560px; margin-inline: auto; }

/* ==========================================================================
   8. SECTIONS & CARDS
   ========================================================================== */
.s-grid { display: grid; gap: var(--a-6); }
.s-grid--2 { grid-template-columns: repeat(2, 1fr); }
.s-grid--3 { grid-template-columns: repeat(3, 1fr); }
.s-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Two-column media + text */
.s-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--a-16);
	align-items: center;
}
.s-split__media img { border-radius: var(--a-radius-lg); box-shadow: var(--a-shadow-md); }

/* Card */
.s-card {
	background: var(--a-surface);
	border: 1px solid var(--a-mist);
	border-radius: var(--a-radius-md);
	overflow: hidden;
	transition: transform var(--a-dur-fast) var(--a-ease),
	            box-shadow var(--a-dur-fast) var(--a-ease),
	            border-color var(--a-dur-fast) var(--a-ease);
}
.s-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--a-shadow-md);
	border-color: var(--a-clay-soft);
}
.s-card__media { overflow: hidden; aspect-ratio: 4 / 3; }
.s-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--a-ease);
}
.s-card:hover .s-card__media img { transform: scale(1.05); }
.s-card__body { padding: var(--a-6); }
.s-card__body h3 { font-size: var(--a-h4); margin-bottom: var(--a-2); }
.s-card__body p { color: var(--a-stone); font-size: var(--a-small); margin-bottom: var(--a-4); }

/* Specialty card (icon-led, no image) */
.s-specialty {
	text-align: center;
	padding: var(--a-8) var(--a-6);
	background: var(--a-surface);
	border: 1px solid var(--a-mist);
	border-radius: var(--a-radius-md);
	transition: transform var(--a-dur-fast) var(--a-ease),
	            box-shadow var(--a-dur-fast) var(--a-ease);
}
.s-specialty:hover { transform: translateY(-6px); box-shadow: var(--a-shadow-sm); }
.s-specialty__icon {
	width: 52px; height: 52px;
	margin: 0 auto var(--a-4);
	color: var(--a-sage);
}
.s-specialty__icon svg { width: 100%; height: 100%; }
.s-specialty h3 { font-size: 1.4rem; margin-bottom: var(--a-2); }
.s-specialty p { color: var(--a-stone); font-size: var(--a-small); margin: 0; }

/* Quote band */
.s-quote-band {
	text-align: center;
	background: var(--a-greige);
}
.s-quote-band blockquote {
	border: none;
	padding: 0;
	margin: 0 auto;
	max-width: 760px;
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	font-style: italic;
}
.s-quote-band cite {
	display: block;
	margin-top: var(--a-6);
	font-family: var(--a-font-body);
	font-style: normal;
	font-size: var(--a-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--a-sage);
}

/* Metrics */
.s-metric { text-align: center; }
.s-metric__num {
	font-family: var(--a-font-display);
	font-size: clamp(2.5rem, 6vw, 3.5rem);
	color: var(--a-sage);
	line-height: 1;
	margin-bottom: var(--a-2);
}
.s-metric__label {
	font-size: var(--a-small);
	letter-spacing: 0.05em;
	color: var(--a-stone);
}

/* CTA band */
.s-cta {
	position: relative;
	text-align: center;
	padding-block: var(--a-24);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.s-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(247, 244, 239, 0.88);
}
.s-cta__inner { position: relative; z-index: 2; max-width: 600px; margin-inline: auto; }
.s-cta h2 { margin-bottom: var(--a-4); }
.s-cta p { color: var(--a-stone); margin-bottom: var(--a-8); }

/* ==========================================================================
   9. PROCESS STEPS
   ========================================================================== */
.s-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--a-8); }
.s-step { text-align: center; }
.s-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px; height: 64px;
	margin: 0 auto var(--a-4);
	border-radius: 50%;
	border: 1.5px solid var(--a-sage);
	font-family: var(--a-font-display);
	font-size: 1.5rem;
	color: var(--a-sage);
}
.s-step h3 { font-size: 1.4rem; margin-bottom: var(--a-2); }
.s-step p { color: var(--a-stone); font-size: var(--a-small); margin: 0; }

/* ==========================================================================
   10. TESTIMONIALS
   ========================================================================== */
.s-testimonials { position: relative; max-width: 800px; margin-inline: auto; text-align: center; }
.s-testimonial {
	display: none;
	animation: fadeIn 0.8s var(--a-ease);
}
.s-testimonial.is-active { display: block; }
.s-testimonial__quote {
	font-family: var(--a-font-display);
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	font-style: italic;
	line-height: 1.5;
	color: var(--a-charcoal);
	margin-bottom: var(--a-6);
}
.s-testimonial__author { font-size: var(--a-small); letter-spacing: 0.05em; color: var(--a-sage); text-transform: uppercase; }
.s-testimonials__nav { display: flex; justify-content: center; gap: var(--a-3); margin-top: var(--a-8); }
.s-testimonials__dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	border: none;
	background: var(--a-mist);
	cursor: pointer;
	transition: background var(--a-dur-fast) var(--a-ease);
}
.s-testimonials__dot.is-active { background: var(--a-sage); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   11. ACCORDION (FAQ)
   ========================================================================== */
.s-faq { max-width: 760px; margin-inline: auto; }
.s-faq__item { border-bottom: 1px solid var(--a-mist); }
.s-faq__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--a-4);
	padding: var(--a-6) 0;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--a-font-display);
	font-size: 1.3rem;
	color: var(--a-charcoal);
	text-align: left;
}
.s-faq__icon {
	flex-shrink: 0;
	width: 22px; height: 22px;
	position: relative;
	transition: transform var(--a-dur-fast) var(--a-ease);
}
.s-faq__icon::before,
.s-faq__icon::after {
	content: '';
	position: absolute;
	background: var(--a-sage);
	transition: opacity var(--a-dur-fast) var(--a-ease);
}
.s-faq__icon::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.s-faq__icon::after  { left: 50%; top: 0; height: 100%; width: 1.5px; transform: translateX(-50%); }
.s-faq__item.is-open .s-faq__icon::after { opacity: 0; }
.s-faq__a {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--a-dur) var(--a-ease);
}
.s-faq__a-inner { padding-bottom: var(--a-6); color: var(--a-stone); }

/* ==========================================================================
   12. FORMS
   ========================================================================== */
.s-form { display: grid; gap: var(--a-4); }
.s-field label {
	display: block;
	font-size: var(--a-small);
	font-weight: 500;
	margin-bottom: var(--a-2);
	color: var(--a-charcoal);
}
.s-input,
.s-textarea,
.s-select {
	width: 100%;
	font-family: var(--a-font-body);
	font-size: var(--a-body);
	color: var(--a-charcoal);
	background: var(--a-white);
	border: 1px solid var(--a-mist);
	border-radius: var(--a-radius-sm);
	padding: var(--a-4);
	transition: border-color var(--a-dur-fast) var(--a-ease),
	            box-shadow var(--a-dur-fast) var(--a-ease);
}
.s-input:focus,
.s-textarea:focus,
.s-select:focus {
	outline: none;
	border-color: var(--a-sage);
	box-shadow: 0 0 0 3px rgba(155, 145, 132, 0.18);
}
.s-textarea { min-height: 150px; resize: vertical; }

/* ==========================================================================
   13. BLOG
   ========================================================================== */
.s-post-meta {
	display: flex;
	gap: var(--a-3);
	align-items: center;
	font-size: var(--a-overline);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--a-sage);
	margin-bottom: var(--a-2);
}
.s-article {
	max-width: var(--a-container-narrow);
	margin-inline: auto;
	font-size: 1.125rem;
	line-height: 1.85;
}
.s-article p { margin-bottom: var(--a-6); }
.s-article h2 { margin-top: var(--a-12); }
.s-article img { border-radius: var(--a-radius-md); margin-block: var(--a-8); }

.s-pagination {
	display: flex;
	justify-content: center;
	gap: var(--a-3);
	margin-top: var(--a-12);
}
.s-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px; height: 44px;
	border-radius: var(--a-radius-sm);
	border: 1px solid var(--a-mist);
	color: var(--a-charcoal);
	font-size: var(--a-small);
}
.s-pagination .page-numbers.current,
.s-pagination .page-numbers:hover { background: var(--a-sage); color: var(--a-white); border-color: var(--a-sage); }

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.s-footer {
	background: var(--a-charcoal);
	color: var(--a-ivory);
	padding-block: var(--a-24) var(--a-8);
}
.s-footer a { color: var(--a-ivory); opacity: 0.8; }
.s-footer a:hover { opacity: 1; color: var(--a-clay-soft); }
.s-footer__top {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: var(--a-8);
	padding-bottom: var(--a-16);
	border-bottom: 1px solid rgba(247, 244, 239, 0.14);
}
.s-footer__brand .s-logo { color: var(--a-ivory); }
.s-footer__brand p { color: rgba(247, 244, 239, 0.7); font-size: var(--a-small); max-width: 280px; margin-top: var(--a-4); }
.footer-widget-title,
.s-footer h4 {
	color: var(--a-ivory);
	font-size: 1.1rem;
	margin-bottom: var(--a-4);
}
.s-footer ul { list-style: none; }
.s-footer li { margin-bottom: var(--a-3); }
.s-footer li a { font-size: var(--a-small); }
.s-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--a-4);
	padding-top: var(--a-8);
	font-size: var(--a-small);
	color: rgba(247, 244, 239, 0.6);
}

/* ==========================================================================
   15. SCROLL ANIMATIONS
   ========================================================================== */

/* ── PHP-rendered pages: [data-animate] / [data-animate-stagger] ─────────
 * Only transform is animated. Opacity is never touched.
 * Sections are always visible — if JS fails nothing is hidden.
 * ────────────────────────────────────────────────────────────────────────── */
[data-animate] {
	transform: translateY(28px);
	transition: transform var(--a-dur) var(--a-ease);
}
[data-animate].is-visible { transform: translateY(0); }

/* Stagger children */
[data-animate-stagger] > * {
	transform: translateY(24px);
	transition: transform var(--a-dur) var(--a-ease);
}
[data-animate-stagger].is-visible > * { transform: translateY(0); }
[data-animate-stagger].is-visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-animate-stagger].is-visible > *:nth-child(2) { transition-delay: 0.15s; }
[data-animate-stagger].is-visible > *:nth-child(3) { transition-delay: 0.25s; }
[data-animate-stagger].is-visible > *:nth-child(4) { transition-delay: 0.35s; }

/* ── REUSABLE SCROLL-REVEAL MODULE: arca-scroll-ready / arca-in ──────────
 * Subtle, premium fade + slide-up as each top-level Elementor section enters
 * the viewport. CSS-only state; all timing/observing is driven by main.js.
 *
 * arca-scroll-ready  JS adds it to every `.elementor > [data-element_type]`
 *   section. Sets the resting (hidden) state: opacity 0 + translateY(40px).
 *
 * arca-in  JS adds it via IntersectionObserver when the section enters the
 *   viewport → opacity 1 + translateY(0): a soft fade + slide upward.
 *
 * SAFETY (buyer-safe, works on every Elementor page, Free-compatible):
 *   • The class is ONLY ever added by JS. If JS does not run, the class never
 *     exists → no opacity:0 → content is always visible (no blank sections).
 *   • In the Elementor editor the JS guard never adds the class, and the CSS
 *     override below forces full visibility as a second line of defence.
 *   • Honours prefers-reduced-motion (no fade, no slide).
 *   • Reusable as-is in future themes: rename the `arca-` prefix only.
 * ────────────────────────────────────────────────────────────────────────── */
.arca-scroll-ready {
	opacity: 0;                          /* fade */
	transform: translateY(40px);         /* slide up (subtle) */
	transition: opacity 0.9s ease,
	            transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}
.arca-scroll-ready.arca-in {
	opacity: 1;
	transform: translateY(0);
}

/* Inside the Elementor editor: everything is always fully visible.
   The JS guard (isElementorEditor) never adds the class in the editor;
   this rule is a second line of defence at the CSS level. */
.elementor-editor-active .arca-scroll-ready,
.elementor-editor-preview .arca-scroll-ready {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* Respect prefers-reduced-motion: no fade, no slide. */
@media (prefers-reduced-motion: reduce) {
	.arca-scroll-ready {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   16. UTILITIES
   ========================================================================== */
.s-text-center { text-align: center; }
.s-mt-6 { margin-top: var(--a-6); }
.s-mt-8 { margin-top: var(--a-8); }
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px;
	overflow: hidden;
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: var(--a-charcoal);
	color: var(--a-white);
	padding: var(--a-3) var(--a-6);
	border-radius: 0 0 var(--a-radius-sm) 0;
}
.skip-link:focus { left: 0; color: var(--a-white); }

/* ==========================================================================
   17. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
	.s-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.s-process { grid-template-columns: repeat(2, 1fr); gap: var(--a-12); }
	.s-footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
	:root { --a-section: 4rem; }

	/* Mobile nav */
	.s-menu-toggle { display: flex; }
	.s-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(80vw, 320px);
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 0;
		background: var(--a-ivory);
		padding: var(--a-16) var(--a-8);
		box-shadow: var(--a-shadow-lg);
		transform: translateX(100%);
		transition: transform var(--a-dur-fast) var(--a-ease);
		z-index: 1001;
	}
	.s-nav.is-open { transform: translateX(0); }
	.arca-menu { flex-direction: column; align-items: flex-start; gap: var(--a-6); width: 100%; }
	.arca-menu a { font-size: 1.25rem; }
	.s-nav .s-btn { margin-top: var(--a-6); }

	.s-split,
	.s-grid--2,
	.s-grid--3,
	.s-grid--4 { grid-template-columns: 1fr; gap: var(--a-8); }
	.s-process { grid-template-columns: 1fr; }

	.s-hero { min-height: 90vh; }
	.s-hero__content { padding-block: var(--a-24) var(--a-12); }
	.s-hero__slide::after {
		background: linear-gradient(180deg, rgba(247,244,239,0.75) 0%, rgba(247,244,239,0.9) 100%);
	}
	.s-hero__scroll { display: none; }

	.s-footer__top { grid-template-columns: 1fr; gap: var(--a-12); }
	.s-footer__bottom { flex-direction: column; text-align: center; }

	blockquote { font-size: 1.3rem; }
}

@media (max-width: 480px) {
	.s-container { padding-inline: var(--a-4); }
	.s-hero__actions { flex-direction: column; }
	.s-hero__actions .s-btn { width: 100%; }
}

/* ==========================================================================
   18. ACCESSIBILITY — reduced motion & focus
   ========================================================================== */
:focus-visible {
	outline: 2px solid var(--a-sage);
	outline-offset: 3px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	[data-animate],
	[data-animate-stagger] > * { transform: none !important; }
	.s-hero__slide { transition: opacity 0.5s ease; }
	.s-hero__scroll-line { animation: none; }
}

/* =============================================================
   ARCA STUDIO — Extended Components
   Additional styles for inner pages, Elementor integration,
   contact form, pricing cards, and utility helpers.
   ============================================================= */

/* ------------------------------------------------------------------
   Page Hero (inner pages)
------------------------------------------------------------------ */
.s-page-hero {
	padding: 7rem 0 4rem;
	background: var(--a-ivory);
	text-align: center;
}
.s-page-hero .s-overline { margin-bottom: 0.75rem; }
.s-page-hero h1 { margin-bottom: 1rem; }
.s-page-hero .s-lead { max-width: 600px; margin: 0 auto; color: var(--a-stone); }

/* ------------------------------------------------------------------
   Split reverse (media left on desktop)
------------------------------------------------------------------ */
@media (min-width: 900px) {
	.s-split--reverse { flex-direction: row-reverse; }
}

/* ------------------------------------------------------------------
   Lists inside content
------------------------------------------------------------------ */
.s-list {
	list-style: none;
	padding: 0;
	margin: 1.25rem 0 2rem;
}
.s-list li {
	padding: 0.5rem 0 0.5rem 1.75rem;
	position: relative;
	border-bottom: 1px solid var(--a-mist);
	font-size: 0.9375rem;
}
.s-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--a-sage);
}

/* ------------------------------------------------------------------
   Pricing Cards
------------------------------------------------------------------ */
.s-pricing-card {
	background: var(--a-surface);
	border: 1px solid var(--a-mist);
	border-radius: 4px;
	padding: 2.5rem 2rem;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.s-pricing-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(28, 27, 25,0.08);
}
.s-pricing-card--featured {
	background: var(--a-sage);
	border-color: var(--a-sage);
	color: #fff;
}
.s-pricing-card--featured h3,
.s-pricing-card--featured p { color: rgba(255,255,255,0.9); }
.s-pricing-card h3 { margin-bottom: 0.75rem; font-size: 1.25rem; }
.s-pricing-card__price {
	font-family: var(--a-font-display);
	font-size: 3rem;
	font-weight: 400;
	line-height: 1;
	margin-bottom: 0.75rem;
	color: var(--a-charcoal);
}
.s-pricing-card--featured .s-pricing-card__price { color: #fff; }
.s-pricing-note {
	text-align: center;
	margin-top: 2rem;
	color: var(--a-stone);
	font-size: 0.9375rem;
}

/* ------------------------------------------------------------------
   Contact info list
------------------------------------------------------------------ */
.s-contact-info {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 2rem;
}
.s-contact-info li {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--a-mist);
}
.s-contact-info strong {
	font-family: var(--a-font-body);
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--a-stone);
}
.s-contact-info a { color: var(--a-charcoal); }
.s-contact-note {
	background: var(--a-greige);
	border-left: 3px solid var(--a-sage);
	padding: 1rem 1.25rem;
	border-radius: 0 4px 4px 0;
	font-size: 0.9375rem;
}
.s-contact-note p { margin: 0; }

/* ------------------------------------------------------------------
   Native Contact Form
------------------------------------------------------------------ */
.s-contact-form { margin-top: 2rem; }
.s-form-group {
	margin-bottom: 1.5rem;
}
.s-form-group label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--a-charcoal);
}
.s-contact-form input,
.s-contact-form textarea,
.s-contact-form select {
	width: 100%;
	padding: 0.875rem 1rem;
	background: var(--a-surface);
	border: 1px solid var(--a-mist);
	border-radius: 4px;
	font-family: var(--a-font-body);
	font-size: 1rem;
	color: var(--a-charcoal);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	appearance: none;
}
.s-contact-form input:focus,
.s-contact-form textarea:focus {
	outline: none;
	border-color: var(--a-sage);
	box-shadow: 0 0 0 3px rgba(155,145,132,0.15);
}
.s-contact-form textarea { resize: vertical; min-height: 150px; }

/* ------------------------------------------------------------------
   Narrow container (article / blog prose)
------------------------------------------------------------------ */
.s-container--narrow { max-width: 760px; }
.s-prose {
	line-height: 1.8;
	font-size: 1.0625rem;
}
.s-prose h2 { margin-top: 2.5rem; margin-bottom: 1rem; }
.s-prose h3 { margin-top: 2rem; margin-bottom: 0.75rem; }
.s-prose p { margin-bottom: 1.25rem; }
.s-prose ul, .s-prose ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.s-prose li { margin-bottom: 0.5rem; }

/* ------------------------------------------------------------------
   Section head flush (used in FAQ for second group)
------------------------------------------------------------------ */
.s-section-head--flush { margin-top: 3rem; }

/* ------------------------------------------------------------------
   Blog empty state
------------------------------------------------------------------ */
.s-blog-empty {
	text-align: center;
	padding: 4rem 0;
	color: var(--a-stone);
	font-style: italic;
}

/* ------------------------------------------------------------------
   Elementor — override container when Elementor Pro takes over
------------------------------------------------------------------ */
.arca-has-elementor .s-site-main { padding: 0; }
.elementor-page .s-site-main { min-height: 50vh; }

/* Kit CSS variables for Elementor Global Colors */
:root {
	--e-global-color-primary:   #2C2A28;
	--e-global-color-secondary: #9B9184;
	--e-global-color-text:      #2C2A28;
	--e-global-color-accent:    #6E6A63;
}

/* ------------------------------------------------------------------
   WXR / Demo Content helpers
------------------------------------------------------------------ */
.s-demo-notice {
	background: #F0EAE0;
	border: 1px solid #9B9184;
	padding: 0.75rem 1rem;
	border-radius: 4px;
	font-size: 0.875rem;
	margin-bottom: 1rem;
	display: none; /* Hidden on front end; shown in admin preview */
}

/* ==========================================================================
   PREMIUM IMAGE HOVER — robust, real-DOM selectors
   --------------------------------------------------------------------------
   Subtle luxury hover for EVERY rendered photo on the site: editorial images,
   image cards, treatment cards and blog cards gently zoom (1.04) and lift on
   pointer hover, with a soft deepened shadow.

   WHAT WAS FIXED
   • Media gate changed from `(hover: hover) and (pointer: fine)` to
     `(hover: hover)` ONLY. The `(pointer: fine)` clause evaluates FALSE on
     touchscreen and hybrid laptops (coarse primary pointer), which silently
     disabled the whole block — including the transition — so nothing animated
     even with a mouse. `(hover: hover)` enables the effect for any device that
     can hover and still disables it on touch-only devices.
   • Selectors broadened to match the <img> as a DESCENDANT of the image widget
     (and figure / custom-HTML / wp-caption variants), so they match whatever
     wrapper Elementor emits — `.elementor-widget-container`, `.elementor-image`,
     `<a>`, or `<figure>` — instead of assuming one fixed chain.
   • `transform` uses `!important` so no Elementor per-element rule can override it.
   • Corners stay rounded because each image keeps its own 3px radius (which
     scales with the zoom); the standard Elementor frame also clips with
     overflow:hidden and carries the shadow so it is never cropped.
   • Logos (PHP header/footer), icon widgets, buttons and section BACKGROUND
     images are untouched — none of them are `<img>` inside an image widget.
   ========================================================================== */

/* Standard Elementor image frame: clip the zoom + carry the resting shadow so
   overflow:hidden cannot crop it (confirmed rendered structure). */
.elementor-widget-image .elementor-widget-container,
.elementor-widget-image .elementor-image {
	overflow: hidden;
	border-radius: 3px;
	box-shadow: 0 18px 50px rgba(28, 27, 25, 0.13);
	transition: box-shadow 0.6s ease;
}
.elementor-widget-image img {
	display: block;
	box-shadow: none !important; /* the frame above carries the shadow */
}

@media (hover: hover) {

	/* Every rendered photo transitions, whatever wrapper Elementor emits. */
	.elementor-widget-image img,
	.elementor-widget-image figure img,
	.elementor-widget-image a img,
	.elementor-widget-html img,
	figure.wp-caption img,
	.wp-block-image img {
		transition: transform 0.6s ease, box-shadow 0.6s ease;
		will-change: transform;
	}

	/* Subtle zoom (1.04) + slight lift. !important beats Elementor transforms. */
	.elementor-widget-image:hover img,
	.elementor-widget-html:hover img,
	figure.wp-caption:hover img,
	.wp-block-image:hover img {
		transform: scale(1.04) translateY(-6px) !important;
	}

	/* Deepen the shadow on hover — on the standard frame... */
	.elementor-widget-image:hover .elementor-widget-container,
	.elementor-widget-image:hover .elementor-image {
		box-shadow: 0 26px 60px rgba(28, 27, 25, 0.18);
	}
	/* ...and directly on the image as a fallback for non-standard wrappers. */
	.elementor-widget-html:hover img,
	figure.wp-caption:hover img,
	.wp-block-image:hover img {
		box-shadow: 0 26px 60px rgba(28, 27, 25, 0.18) !important;
	}
}

/* ==========================================================================
   BUTTON & CARD MICRO-INTERACTIONS  (frontend only, CSS-only)
   --------------------------------------------------------------------------
   Two subtle, premium medical/luxury touches added incrementally:
     1) Elegant transition + faint lift on Elementor buttons.
     2) Gentle elevation on service / treatment cards (image cards) on hover.

   • Gated behind @media (hover: hover) so touch devices get no stuck states.
   • transform-only on hover → never changes layout, gaps or flow; the resting
     state is identical, so nothing is "moved" on the page.
   • Scoped to Elementor button widgets and to inner-column cards that contain
     an image (treatment preview, treatments grid, blog cards) via :has().
     Counters, process steps, testimonials and headings are NOT affected.
   • Independent from the existing scroll-reveal and image-hover blocks above —
     none of them are touched.
   ========================================================================== */

@media (hover: hover) {

	/* 1) BUTTONS — elegant transition + faint lift -------------------------- */
	.elementor-widget-button .elementor-button,
	.elementor-button {
		transition: background-color 0.4s ease,
		            color 0.4s ease,
		            border-color 0.4s ease,
		            transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		            box-shadow 0.45s ease;
	}
	.elementor-widget-button .elementor-button:hover,
	.elementor-button:hover {
		transform: translateY(-2px);
		box-shadow: 0 12px 26px rgba(28, 27, 25, 0.15);
	}

	/* 2) SERVICE / TREATMENT CARDS — gentle elevation ---------------------- */
	/* The card body is the column's .elementor-widget-wrap; lifting it moves
	   image + text together. The inner image keeps its own zoom (untouched). */
	.elementor-inner-column:has(.elementor-widget-image) > .elementor-widget-wrap {
		transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
		will-change: transform;
	}
	.elementor-inner-column:has(.elementor-widget-image):hover > .elementor-widget-wrap {
		transform: translateY(-6px);
	}
}

/* =============================================================
   ARCA STUDIO — ELEMENTOR HERO SLIDER (v1.3.1 — single section, true slider)
   ONE hero section (#arca-hero) containing THREE slide inner-sections.
   The slides are stacked on top of one another and cross-faded, so
   exactly one is ever visible and the page does NOT scroll through
   three stacked heroes. Auto-rotation + prev/next arrows + pagination
   dots are added by initArcaHero() in assets/js/main.js. Each slide
   stays an ordinary, fully-editable Elementor inner-section with its own
   background image, overlay, eyebrow, H1, sub-headline and two CTAs.

   ROBUST HOOKS — why this is keyed off an ID, not a section class:
   Elementor Free reliably renders a section's CSS ID (#arca-hero) and
   its own structural class (.elementor-inner-section), but does NOT
   reliably output a *custom* CSS class on sections/inner-sections. The
   earlier build keyed stacking on the custom `.arca-hero-slide`
   section class, which silently failed to render — so the slides fell
   into normal flow and stacked vertically. Everything below is now keyed
   off `#arca-hero` + `.elementor-inner-section`. As an extra safety
   net, initArcaHero() also re-applies the `#arca-hero` id and the
   `.arca-hero` / `.arca-hero-slide` hook classes at runtime, so every
   selector resolves on every Elementor version.

   EDITOR: the slides are left in normal vertical flow (each individually
   selectable and editable); rotation runs only on the front end. */

#arca-hero,
.arca-hero {
	position: relative;
	overflow: hidden;
	min-height: 100svh;
	min-height: 100vh;
}
#arca-hero > .elementor-container,
.arca-hero > .elementor-container {
	min-height: 100svh;
	min-height: 100vh;
	height: 100%;
}
#arca-hero .elementor-column > .elementor-widget-wrap,
.arca-hero .elementor-column > .elementor-widget-wrap {
	position: relative;
	height: 100%;
}

/* Stack the 3 slide sections and cross-fade them. FRONT END ONLY —
   gated by body:not(.elementor-editor-active) so the Elementor editor
   keeps the slides unstacked and editable (see editor block below).
   Selectors cover BOTH Elementor render modes: legacy Sections/Columns
   (.elementor-inner-section) and Flexbox Containers (.e-child, default
   since Elementor 3.16), plus the JS-applied .arca-hero-slide hook. */
body:not(.elementor-editor-active) #arca-hero .elementor-inner-section,
body:not(.elementor-editor-active) #arca-hero .e-child,
body:not(.elementor-editor-active) .arca-hero .arca-hero-slide {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	opacity: 0;
	visibility: hidden;
	z-index: 1;
	transition: opacity 1.4s ease-in-out, visibility 0s linear 1.4s;
	will-change: opacity;
}
body:not(.elementor-editor-active) #arca-hero .elementor-inner-section.is-active,
body:not(.elementor-editor-active) #arca-hero .e-child.is-active,
body:not(.elementor-editor-active) .arca-hero .arca-hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
	transition: opacity 1.4s ease-in-out, visibility 0s linear 0s;
}

/* Slide internals: dark overlay sits below the content; content is
   centred both axes within the full-height slide. */
#arca-hero .elementor-inner-section > .elementor-background-overlay {
	z-index: 1;
}
body:not(.elementor-editor-active) #arca-hero .elementor-inner-section > .elementor-container,
body:not(.elementor-editor-active) .arca-hero .arca-hero-slide > .elementor-container {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 2;
	min-height: 100%;
	height: 100%;
}
#arca-hero .elementor-inner-section .elementor-column,
.arca-hero .arca-hero-slide .elementor-column {
	width: 100%;
}
/* The eyebrow / H1 / sub stack full-width; the two CTA buttons sit
   side by side beneath them (flex-wrap, no nested inner-section — valid
   Elementor Free). Targeted by Elementor's own per-widget-type classes
   so the layout holds regardless of custom-class rendering. */
.arca-hero-slide-col > .elementor-widget-wrap,
.arca-hero-slide-col .elementor-widget-wrap {
	max-width: 780px;
	margin: 0 auto;
	padding: 96px 24px;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	column-gap: 16px;
	row-gap: 18px;
}
.arca-hero-slide-col .elementor-widget-wrap > .elementor-widget-heading,
.arca-hero-slide-col .elementor-widget-wrap > .elementor-widget-text-editor {
	flex: 0 0 100%;
	width: 100%;
}
.arca-hero-slide-col .elementor-widget-wrap > .elementor-widget-button {
	flex: 0 0 auto;
}
.arca-hero-eyebrow,
.arca-hero-title,
.arca-hero-sub {
	text-shadow: 0 1px 24px rgba(14, 13, 11, 0.22);
}

/* EDITOR: unstack all 3 slides into normal vertical flow so each is a
   full, independently-clickable section the buyer can edit directly. */
.elementor-editor-active #arca-hero,
.elementor-editor-active .arca-hero {
	min-height: 0;
}
.elementor-editor-active #arca-hero .elementor-inner-section,
.elementor-editor-active .arca-hero .arca-hero-slide {
	position: relative !important;
	inset: auto !important;
	opacity: 1 !important;
	visibility: visible !important;
	min-height: 480px;
	height: auto !important;
}

@media (prefers-reduced-motion: reduce) {
	body:not(.elementor-editor-active) #arca-hero .elementor-inner-section,
	body:not(.elementor-editor-active) .arca-hero .arca-hero-slide {
		transition: opacity 0.6s ease, visibility 0s linear 0.6s;
	}
}

@media (max-width: 767px) {
	#arca-hero,
	.arca-hero { min-height: 92svh; min-height: 92vh; }
	.arca-hero-slide-col .elementor-widget-wrap { padding: 72px 20px; }
}

/* =============================================================
   ARCA STUDIO — HERO SLIDER CONTROLS (arrows + dots)
   Injected by initElementorHeroSlider() in assets/js/main.js — NOT part of
   the Elementor JSON, so the 3 slides stay plain, fully-editable Image
   widgets in Elementor Free. The controls sit in their own full-hero overlay
   at z 6 (above the z 5 text content) so they are always visible/clickable,
   while the wrapper itself is pointer-events:none so empty space never
   blocks clicks on the heading/buttons beneath it — only the arrow buttons
   and dots re-enable pointer-events for themselves.
   ============================================================= */
.arca-hero-controls {
	position: absolute;
	inset: 0;
	z-index: 6;
	pointer-events: none;
}
.arca-hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid rgba(44, 42, 40, 0.16);
	background: rgba(255, 252, 246, 0.45);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #2C2A28;
	cursor: pointer;
	pointer-events: auto;
	transition: background-color 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}
.arca-hero-arrow:hover {
	background: rgba(255, 252, 246, 0.85);
	border-color: rgba(155, 145, 132, 0.55);
}
.arca-hero-arrow:focus-visible {
	outline: 2px solid #9B9184;
	outline-offset: 2px;
}
.arca-hero-arrow--prev { left: 22px; }
.arca-hero-arrow--next { right: 22px; }
.arca-hero-arrow svg { display: block; width: 18px; height: 18px; }

.arca-hero-dots {
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 10px;
	pointer-events: auto;
}
.arca-hero-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(44, 42, 40, 0.28);
	cursor: pointer;
	transition: background-color 0.35s ease, width 0.35s ease, border-radius 0.35s ease;
}
.arca-hero-dot:hover { background: rgba(44, 42, 40, 0.5); }
.arca-hero-dot.is-active {
	width: 22px;
	border-radius: 4px;
	background: #9B9184;
}

/* In the EDITOR, the translucent veil overlay (an Elementor background
   element with position:absolute; inset:0) stretches across the full height
   of the unrolled 3-stacked-image view instead of a single hero's worth —
   simply because the hero section is much taller there. Dial it back so it
   doesn't wash out the slides buyers are trying to select/edit; the buyer's
   actual opacity choice is untouched and renders normally on the frontend.
   Pure CSS (no JS-added class): Elementor's editor restructures/re-renders
   the hero markup asynchronously, sometimes after our one-time DOMContentLoaded
   tagging script has already run, so a JS-class hook isn't reliable here. The
   editor is only ever used in evergreen admin browsers, so :has() is safe. */
.elementor-editor-active .elementor-top-section:has(.arca-hero-slide) > .elementor-background-overlay {
	opacity: 0.12 !important;
}

@media (max-width: 767px) {
	.arca-hero-arrow { width: 38px; height: 38px; }
	.arca-hero-arrow--prev { left: 12px; }
	.arca-hero-arrow--next { right: 12px; }
	.arca-hero-dots { bottom: 16px; }
}

/* No manual controls inside the Elementor editor — the editor already
   unstacks all 3 slides into a normal, selectable column (see rules above). */
.elementor-editor-active .arca-hero-controls { display: none; }

/* ==========================================================================
   ARCA STUDIO — Architecture-Specific Components
   ========================================================================== */

/* --- Project Card --- */
.s-project-card .s-card__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
}
.s-project-card .s-card__body {
	padding: var(--a-4) 0 0;
}
.s-project-card .s-card__body h3 {
	font-size: 1.5rem;
	font-weight: 400;
	margin-top: 0.3rem;
	margin-bottom: 0.8rem;
}
.s-project-card .s-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--a-ease);
}
.s-project-card:hover .s-card__media img { transform: scale(1.03); }
.s-card { border-radius: 0; border: none; background: transparent; }
.s-card:hover { transform: none; box-shadow: none; }
.s-card__media { border-radius: 0; overflow: hidden; }

/* --- Team Card --- */
.s-team-card .s-card__media,
.s-team-card > div:first-child {
	aspect-ratio: 3 / 4;
	overflow: hidden;
}
.s-team-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--a-ease); }
.s-team-card:hover img { transform: scale(1.03); }

/* --- Specialty card for ARCA (icon-led) --- */
.s-specialty { background: transparent; border: none; border-radius: 0; padding: var(--a-8) 0; text-align: left; }
.s-specialty:hover { transform: none; box-shadow: none; }
.s-specialty__icon { margin: 0 0 var(--a-4); color: var(--a-stone); }
.s-specialty h3 { font-family: var(--a-font-display); font-size: 1.5rem; font-weight: 400; }

/* --- Footer social links --- */
.s-footer__social { display: flex; gap: var(--a-4); margin-top: var(--a-4); }
.s-footer__social a {
	font-size: var(--a-overline);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(247, 244, 239, 0.6);
	opacity: 1;
	border-bottom: 1px solid rgba(247, 244, 239, 0.25);
	padding-bottom: 2px;
	transition: color var(--a-dur-fast) var(--a-ease), border-color var(--a-dur-fast) var(--a-ease);
}
.s-footer__social a:hover { color: rgba(247, 244, 239, 1); border-color: rgba(247, 244, 239, 0.7); }

/* --- Page hero refined for architecture --- */
.s-page-hero {
	padding: 8rem 0 5rem;
	background: var(--a-ivory);
	text-align: center;
}
.s-page-hero .s-overline { margin-bottom: 1rem; }
.s-page-hero h1 { margin-bottom: 0; font-size: var(--a-h1); }

/* --- ARCA form success message --- */
.s-form-success {
	background: var(--a-greige);
	border-left: 2px solid var(--a-sage);
	padding: var(--a-4) var(--a-6);
	margin-bottom: var(--a-6);
	font-size: var(--a-small);
}

/* --- Mobile hero for dark-overlay variant --- */
@media (max-width: 768px) {
	#arca-hero .arca-hero-slide,
	.arca-hero .arca-hero-slide {
		transition: opacity 0.8s ease-in-out;
	}
}

/* --- Split layout responsive fix --- */
@media (max-width: 900px) {
	.s-split { grid-template-columns: 1fr; gap: var(--a-12); }
	.s-split--reverse { direction: ltr; }
}

/* --- Navigation for ARCA wider tracking --- */
.arca-menu a { letter-spacing: 0.04em; }

/* --- Wide-screen container upgrade --- */
@media (min-width: 1400px) {
	.s-container { padding-inline: var(--a-12); }
}

/* ==========================================================================
   BUTTON CONSISTENCY PATCH  (buttons only — no layout / colour / type change)
   --------------------------------------------------------------------------
   Normalises every main CTA to one size + shape so the header, hero,
   bottom-CTA and section buttons read as a single design system. GEOMETRY
   ONLY: background, colour, border, radius and the button type tokens keep
   the theme's existing values. Each button container's desktop text-alignment
   is preserved (hero stays left, CTA stays centred); buttons are only forced
   to centre when they STACK on mobile. Scoped to .s-btn (PHP) and Elementor
   button widgets so both rendering paths match.
   ========================================================================== */

/* 1 — Shared geometry: same height, min-width, padding, centred label ------ */
.s-btn {
	box-sizing: border-box;
	min-width: 220px;
	height: 48px;
	padding: 0 2.4rem;      /* horizontal padding kept; fixed height sets vertical */
	line-height: 1;         /* crisp vertical centring of the label */
	white-space: nowrap;
	text-align: center;
	/* .s-btn base already sets display:inline-flex + align/justify:center */
}

.elementor-widget-button .elementor-button,
.elementor-button {
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 220px !important;
	height: 48px !important;
	padding: 0 2.4rem !important;
	line-height: 1 !important;
	white-space: nowrap;
	text-align: center;
}

/* 2 — Mobile: centred, capped width, no overflow. 480px is the SAME
      breakpoint at which the theme already stacks the hero actions. -------- */
@media (max-width: 480px) {
	.s-btn {
		width: 100%;
		max-width: 260px;
		min-width: 0;
	}
	/* keep the full-width contact-form submit full width (it matches the inputs) */
	.s-btn[style*="width:100%"] { max-width: none; }

	.elementor-widget-button .elementor-button,
	.elementor-button {
		width: 100% !important;
		max-width: 260px !important;
		min-width: 0 !important;
	}

	/* stacked button groups → single column, centred, consistent 1rem gap */
	.s-hero__actions,
	.s-cta__inner > div {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.elementor-widget-button .elementor-button-wrapper { text-align: center; }
}
/* ===================== END BUTTON CONSISTENCY PATCH ======================== */