/* Self-hosted faces, copied from the approved design source. */
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-ext-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-ext-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-ext-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-ext-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'The Seasons'; src: url('../fonts/TheSeasons-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'The Seasons'; src: url('../fonts/TheSeasons-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'The Seasons'; src: url('../fonts/TheSeasons-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'The Seasons'; src: url('../fonts/TheSeasons-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'The Seasons'; src: url('../fonts/TheSeasons-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'The Seasons'; src: url('../fonts/TheSeasons-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }

/* -------------------------------------------------------------------------
 * El Mirador — layout, breakpoints, motion and accessibility.
 *
 * The design's own visual decisions live as inline styles on the markup,
 * carried over unchanged from the approved source. This file adds only what
 * the static export could not express: the breakpoint switch that used to be
 * JavaScript, the motion system, and the accessibility layer.
 * ---------------------------------------------------------------------- */

:root {
	/* Palette, named from the design so overrides stay legible */
	--em-navy:        #0B202A;
	--em-navy-deep:   #091C25;
	--em-teal:        #0F2B37;
	--em-teal-mid:    #2F5F73;
	--em-blue:        #417C96;
	--em-ink:         #1B3B4B;
	--em-ink-soft:    #4A6672;
	--em-cream:       #F5EEE2;
	--em-cream-warm:  #F7F1E5;
	--em-sand:        #EDE3D3;
	--em-gold:        #C29A57;
	--em-gold-deep:   #7D5A17;

	/* Motion — one easing and three durations, so timing stays coherent */
	--em-ease:        cubic-bezier(.16, 1, .3, 1);
	--em-dur-fast:    420ms;
	--em-dur:         900ms;
	--em-dur-slow:    1400ms;
	--em-stagger:     90ms;

	--em-header-h:    clamp(68px, 8vw, 96px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	overflow-x: hidden;
	font-family: Montserrat, system-ui, sans-serif;
	text-rendering: optimizeLegibility;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--em-blue); color: var(--em-cream); }

/* Belt and braces against sideways scroll on small screens. Sections use
   negative-inset parallax layers that would otherwise widen the viewport. */
.em-page { overflow: clip; }

/* -------------------------------------------------------------------------
 * Breakpoint switch — was JavaScript, now CSS
 *
 * The original runtime measured window.innerWidth and swapped nodes. Doing it
 * here means the server sends the right layout: no flash, no shift, and the
 * navigation still works with scripting off.
 * ---------------------------------------------------------------------- */

/* Visibility only — never a display value of our own.
   The generated wrappers carry inline `display:contents` so they stay
   layout-transparent exactly as the design's conditional did; the header's
   nav, burger and call bar keep their own inline display. Setting a display
   here would inject a box the design never had. */
@media (max-width: 899.98px) { .em-at-desktop { display: none !important; } }
@media (min-width: 900px)    { .em-at-mobile  { display: none !important; } }

/* -------------------------------------------------------------------------
 * Mobile menu
 * ---------------------------------------------------------------------- */

.em-mobile-menu { display: none; }
.em-mobile-menu[data-open] { display: flex; }
.em-mobile-menu[hidden] { display: none; }

html.em-menu-open, html.em-menu-open body { overflow: hidden; }

@media (min-width: 900px) {
	.em-mobile-menu, .em-sticky-cta { display: none !important; }
}

.js .em-mobile-menu[data-open] {
	animation: em-menu-in var(--em-dur-fast) var(--em-ease) both;
}
.js .em-mobile-menu[data-open] nav a {
	animation: em-menu-item var(--em-dur-fast) var(--em-ease) both;
	animation-delay: calc(90ms + var(--em-i, 0) * 55ms);
}
@keyframes em-menu-in {
	from { opacity: 0; clip-path: inset(0 0 100% 0); }
	to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes em-menu-item {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
 * Motion
 *
 * Nothing here hides content unless `.js` is on the document element, which
 * the head script sets before first paint. If the script never runs, every
 * revealed element simply renders in its final state.
 * ---------------------------------------------------------------------- */

/* The start state and the transition come from the design's inline styles,
   including its five different travel distances. All this adds is the
   resting state and the delay hook. */
.js [data-reveal] { will-change: opacity, transform; }
.js [data-reveal].is-in {
	opacity: 1 !important;
	transform: none !important;
	transition-delay: var(--em-delay, 0ms);
}

/* Without scripting the design's inline opacity:0 would strand content. */
html.no-js [data-reveal] {
	opacity: 1 !important;
	transform: none !important;
}

/* A masked wipe for headline blocks: the line rises from behind its own edge
   rather than fading, which reads as deliberate rather than generic. */
.js [data-reveal="wipe"] {
	transform: none;
	clip-path: inset(0 0 110% 0);
	transition: clip-path var(--em-dur-slow) var(--em-ease), opacity var(--em-dur) var(--em-ease);
}
.js [data-reveal="wipe"].is-in { clip-path: inset(0 0 -10% 0); }

/* Media settles from a slight overscale, so images feel placed, not dropped. */
.js [data-reveal="media"] { --em-rise: 0px; }
.js [data-reveal="media"] > img,
.js [data-reveal="media"] > video {
	transform: scale(1.08);
	transition: transform var(--em-dur-slow) var(--em-ease);
	will-change: transform;
}
.js [data-reveal="media"].is-in > img,
.js [data-reveal="media"].is-in > video { transform: none; }

/* Parallax and pinned-section layers are driven from JS via custom properties
   so the compositor only ever sees a transform. */
[data-parallax] { will-change: transform; }

/* Header state, set by an IntersectionObserver sentinel instead of measuring
   on every scroll frame. */
[data-header] { will-change: background-color, padding; }

/* -------------------------------------------------------------------------
 * Accessibility
 * ---------------------------------------------------------------------- */

.em-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 14px 22px;
	background: var(--em-gold);
	color: var(--em-navy);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 600;
}
.em-skip:focus { left: 8px; top: 8px; }

:focus-visible {
	outline: 2px solid var(--em-gold);
	outline-offset: 3px;
	border-radius: 1px;
}
/* Against the cream sections the gold ring is low contrast; darken it there. */
.em-on-light :focus-visible { outline-color: var(--em-gold-deep); }

/* Every control the design draws as a bare element still needs a target that
   meets the 44px minimum on touch. */
@media (pointer: coarse) {
	nav a, [data-dc-click], button { min-height: 44px; }
}

/* -------------------------------------------------------------------------
 * Reduced motion
 *
 * Travel, parallax, autoplay and stagger all stop. Interaction feedback —
 * hover, focus, the menu opening — is kept, because removing it would make
 * the interface feel broken rather than calm.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	.js [data-reveal],
	.js [data-reveal].is-in {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: opacity 200ms linear;
	}
	.js [data-reveal="media"] > img,
	.js [data-reveal="media"] > video { transform: none !important; }

	[data-parallax],
	[data-scale],
	[data-type-img] img { transform: none !important; }

	.js .em-mobile-menu[data-open],
	.js .em-mobile-menu[data-open] nav a {
		animation: none !important;
	}

	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	/* keep the two feedback transitions that carry meaning */
	a, button { transition: color 120ms linear, background-color 120ms linear !important; }
}


/* Generated from style-hover attributes; page-scoped. */
/* acasa */
.dch-acasa-1:hover { color:#C29A57 !important; }
.dch-acasa-2:hover { background:#F5EEE2 !important; }
.dch-acasa-3:hover { background:#F5EEE2 !important; transform:translateY(-2px) !important; }
.dch-acasa-4:hover { border-color:#F5EEE2 !important; background:rgba(245,238,226,.08) !important; }
.dch-acasa-5:hover { padding-left:clamp(8px,1.6vw,28px) !important; color:#417C96 !important; }
.dch-acasa-6:hover { background:#C29A57 !important; color:#0B202A !important; }
.dch-acasa-7:hover { color:#7D5A17 !important; }
.dch-acasa-8:hover { transform:scale(1.05) !important; }
.dch-acasa-9:hover { background:#C29A57 !important; }
.dch-acasa-10:hover { background:rgba(245,238,226,.08) !important; }
/* meniu */
.dch-meniu-1:hover { color:#C29A57 !important; }
.dch-meniu-2:hover { background:#F5EEE2 !important; }
/* evenimente */
.dch-evenimente-1:hover { color:#C29A57 !important; }
.dch-evenimente-2:hover { background:#F5EEE2 !important; }
.dch-evenimente-3:hover { background:#C29A57 !important; }
.dch-evenimente-4:hover { background:rgba(245,238,226,.1) !important; }
/* contact */
.dch-contact-1:hover { color:#C29A57 !important; }
.dch-contact-2:hover { background:#F5EEE2 !important; }
.dch-contact-3:hover { border-color:#F5EEE2 !important; background:rgba(245,238,226,.08) !important; }
/* politici */
.dch-politici-1:hover { color:#C29A57 !important; }
.dch-politici-2:hover { background:#F5EEE2 !important; }
.dch-politici-3:hover { background:rgba(245,238,226,.1) !important; }


/* -------------------------------------------------------------------------
 * Menu items: guaranteed resting state
 *
 * The 227 cards ship with the design's reveal start state inline
 * (opacity:0 + an 18px rise). The page's own choreography clears it while
 * scrolling. Two situations never reach that code and would otherwise leave
 * the page's primary content invisible:
 *
 *   - scripting disabled, so nothing ever runs
 *   - prefers-reduced-motion, where the motion module deliberately skips the
 *     scroll choreography entirely
 *
 * Both are declared here rather than patched in JavaScript, so the guarantee
 * holds even if the script never executes. !important is required because the
 * start state is an inline style.
 * ---------------------------------------------------------------------- */
html.no-js [data-mgroup] article {
	opacity: 1 !important;
	transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
	[data-mgroup] article {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}