/* ==========================================================================
   redesign.css — loads AFTER main.css, never replaces it.
   Every class is prefixed rd- so no Altitude selector in main.css collides.
   Altitude styles bare elements (h1, h2, p, a, section, input, button), so
   the rules below restate those properties explicitly inside rd- scopes.
   ========================================================================== */

:root {
	--rd-navy:        #003D77;
	--rd-gold-dark:   #8F6516;
	--rd-gold-light:  #E7C27D;
	--rd-pale:        #EEF3F9;
	--rd-border:      #E4EAF1;
	--rd-border-2:    #C7D4E2;
	--rd-text:        #16212E;
	--rd-text-2:      #45566B;
	--rd-text-3:      #5A6B80;
	--rd-teal:        #1F6F63;
	--rd-white:       #ffffff;
	--rd-container:   1180px;
	--rd-gutter:      32px;
	/* 744px = Open Sans 400 at 21px x 62ch. Update if .rd-product-body font-size changes. */
	--rd-measure:     744px;
	--rd-radius:      3px;
	--rd-radius-lg:   4px;
	--rd-sans:        'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--rd-serif:       'Newsreader', Georgia, 'Times New Roman', serif;
	/* --rd-text-font backs body.rd-body below as of the site-wide font
	   change; --rd-display backs headings. NOTE: the spec for this pair
	   named the second one --rd-text, but that name is already taken above
	   (line 15) by the body text COLOUR, which body.rd-body also consumes.
	   Redeclaring it here would shadow the colour, so the font variable is
	   --rd-text-font. --rd-text itself is untouched. --rd-sans / --rd-serif
	   are kept for the header wordmark ( --rd-sans ) and are not removed
	   even though --rd-serif now has zero consumers -- see the note at
	   .rd-hero-title below. */
	--rd-display:     'Montserrat', system-ui, sans-serif;
	--rd-text-font:   'Open Sans', system-ui, sans-serif;
}

body.rd-body {
	background: var(--rd-white);
	color: var(--rd-text);
	font-family: var(--rd-text-font);
	-webkit-font-smoothing: antialiased;
}

.rd-body h1, .rd-body h2, .rd-body h3,
.rd-body h4, .rd-body h5, .rd-body h6 {
	font-family: var(--rd-display);
	font-weight: 600;
}

/* input/select/textarea never inherit body's font-family -- main.css's
   own "body, input, select, textarea" rule targets them directly by
   element type, so they need the same treatment here. */
.rd-body input, .rd-body select, .rd-body textarea {
	font-family: var(--rd-text-font);
}

/* Excluded from the two rules above, on purpose: the header chrome (the
   utility bar and the nav) and the entire footer keep exactly what they
   rendered before this change. #footer's (1,0,0) beats the heading rule's
   (0,1,1) on ID count alone; .rd-topbar / .rd-nav are (0,1,0), which needs
   no ID because nothing else currently sets font-family on their
   descendants. Placed after the rules above so source order can't matter
   even where specificity ties. */
.rd-topbar, .rd-nav {
	font-family: var(--rd-sans);
}

#footer, #footer h1, #footer h2, #footer h3,
#footer h4, #footer h5, #footer h6 {
	font-family: var(--rd-sans);
}

/* Altitude sets uppercase + 0.1em tracking on every heading site-wide
   (main.css h1..h6). Sentence case is the intent here, and the 0.1em was
   tracking chosen for caps -- it reads loose without them, so the two move
   together. (0,1,1) beats main.css bare h1..h6 at (0,0,1). */
.rd-body h1, .rd-body h2, .rd-body h3,
.rd-body h4, .rd-body h5, .rd-body h6 {
	text-transform: none;
	letter-spacing: normal;
}

/* Deliberate exception to the letter-spacing above: these two carry a tight
   negative tracking chosen for Montserrat at display sizes, which the blanket
   rule would otherwise flatten to normal. Two classes = (0,2,0), which beats
   the blanket rule at (0,1,1); the tightening stays in one place rather than
   being restated on each selector own declaration. */
.rd-body .rd-hero-title,
.rd-body .rd-services-title {
	letter-spacing: -0.015em;
}

/* The footer keeps the caps treatment it already had. #footer h2 is (1,0,1)
   and beats the (0,1,1) rule above on ID count -- the same mechanism the
   font-family exclusion directly above relies on. */
#footer h1, #footer h2, #footer h3,
#footer h4, #footer h5, #footer h6 {
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.rd-container {
	max-width: var(--rd-container);
	margin: 0 auto;
	padding-left: var(--rd-gutter);
	padding-right: var(--rd-gutter);
}

/* ---------- utility bar ---------- */

.rd-topbar {
	background: var(--rd-navy);
	color: var(--rd-white);
	font-size: 16px;
	letter-spacing: 0.02em;
}

.rd-topbar-inner {
	max-width: var(--rd-container);
	margin: 0 auto;
	padding: 12px var(--rd-gutter);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 29px;
}

.rd-topbar-address,
.rd-topbar-email { opacity: 0.85; }

.rd-topbar-right {
	display: flex;
	gap: 29px;
	align-items: center;
}

.rd-topbar-phone {
	font-weight: 700;
	color: var(--rd-gold-light);
}

/* ---------- sticky header ---------- */

.rd-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(255, 255, 255, 0.94);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--rd-border);
}

.rd-header-inner {
	max-width: var(--rd-container);
	margin: 0 auto;
	padding: 22px var(--rd-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 38px;
}

.rd-logo {
	display: flex;
	align-items: baseline;
	gap: 12px;
	text-decoration: none;
	border-bottom: 0;
}

.rd-logo-text {
	font-family: var(--rd-sans);
	font-size: 27px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--rd-navy);
	line-height: 1;
}

.rd-logo-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--rd-gold-dark);
	display: inline-block;
}

.rd-nav {
	display: flex;
	align-items: center;
	gap: 41px;
	font-size: 18px;
	font-weight: 600;
}

.rd-nav a {
	color: var(--rd-text-2);
	text-decoration: none;
	border-bottom: 0;
}

.rd-nav a.rd-nav-active {
	color: var(--rd-navy);
	border-bottom: 2.4px solid var(--rd-gold-dark);
	padding-bottom: 3.6px;
}

/* Fragment-jump offset for the footer product columns. Without this the
   native jump (the no-JS path, and any in-page #produse link) lands the
   section flush against the top of the viewport, underneath the sticky
   .rd-header. The value tracks the header's own rendered height:
   22px padding + 32px .rd-logo-text line box + 22px padding + 1px border.
   scroll.js applies the same offset by measuring the header live; this is
   the CSS-only equivalent for when scroll.js is not running. */
#produse {
	scroll-margin-top: 77px;
}

/* ---------- hero ---------- */

.rd-hero {
	position: relative;
	overflow: hidden;
	min-height: 560px;
	display: flex;
	align-items: center;
	padding: 78px var(--rd-gutter) 64px;
	background-image: url('/images/building-background.avif');
	background-size: cover;
	background-position: 50% 34%;
}

/* The section is full-bleed now so the photo spans the viewport; the
   max-width container behaviour moves down to .rd-hero-inner, mirroring
   the .rd-services / .rd-services-inner pair below. z-index 1 lifts it
   above both overlay pseudo-elements, which carry no z-index of their own. */
.rd-hero-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--rd-container);
	margin: 0 auto;
}

/* Two overlays stacked between the photo and the content: ::before is the
   navy left-to-right wash, ::after the top/bottom vignette. */
.rd-hero::before,
.rd-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.rd-hero::before {
	background: linear-gradient(100deg, rgba(0, 26, 52, 0.92) 0%, rgba(0, 45, 88, 0.78) 42%, rgba(0, 61, 119, 0.34) 100%);
}

.rd-hero::after {
	background: linear-gradient(to bottom, rgba(0, 20, 42, 0.35) 0%, rgba(0, 20, 42, 0) 30%, rgba(0, 20, 42, 0.45) 100%);
}

/* --rd-serif's only consumer used to be this rule; it is now orphaned
   (see the :root note above). Left in :root and in fonts.css --
   Newsreader's files are unused but harmless to leave. */
.rd-hero-title {
	font-family: var(--rd-display);
	font-weight: 600;
	font-size: 68px;
	line-height: 1.06;
	letter-spacing: -0.015em;
	color: #ffffff;
	text-shadow: 0 2px 24px rgba(0, 18, 38, 0.45);
	margin: 0 0 24px;
	text-transform: none;
	text-wrap: pretty;
}

.rd-hero-body {
	font-size: 20px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.88);
	margin: 0 0 34px;
	max-width: 46ch;
}

.rd-hero-body strong { color: var(--rd-navy); }

/* ---------- services ---------- */

.rd-services {
	background: #ffffff;
	padding: 120px var(--rd-gutter) 88px;
	font-family: var(--rd-text-font);
	color: #16212E;
}

.rd-services-inner {
	max-width: var(--rd-container);
	margin: 0 auto;
}

.rd-services-head {
	max-width: 720px;
	margin: 0 0 60px;
}

.rd-services-eyebrow {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8F6516;
	margin: 0 0 14px;
}

.rd-services-title {
	font-family: var(--rd-display);
	font-weight: 600;
	font-size: 36px;
	line-height: 1.16;
	letter-spacing: -0.015em;
	color: #003D77;
	margin: 0 0 18px;
	text-wrap: pretty;
	text-transform: none;
}

.rd-services-lede {
	font-size: 17px;
	line-height: 1.7;
	color: #45566B;
	margin: 0;
}

/* Four columns divided by vertical rules. The dividers are border-right on
   each step rather than a gap, so the rules run the full column height; the
   first and last steps drop their outer padding so the row aligns flush
   with the container edges. */
.rd-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border-top: 1px solid #003D77;
}

.rd-step {
	padding: 30px 28px 34px;
	border-right: 1px solid #E4EAF1;
}

.rd-step:first-child {
	padding-left: 0;
}

.rd-step:last-child {
	padding-right: 0;
	border-right: 0;
}

.rd-step-num {
	display: block;
	font-family: var(--rd-display);
	font-weight: 600;
	font-size: 34px;
	line-height: 1;
	color: #8F6516;
	margin: 0 0 18px;
}

.rd-step-title {
	font-family: var(--rd-display);
	font-weight: 600;
	font-size: 18px;
	color: #003D77;
	margin: 0 0 10px;
}

.rd-step-body {
	font-size: 14.5px;
	line-height: 1.65;
	color: #5A6B80;
	margin: 0;
}

.rd-services-cta {
	margin-top: 56px;
	background: #003D77;
	color: #ffffff;
	padding: 38px 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

.rd-services-cta-title {
	font-family: var(--rd-display);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.28;
	margin: 0 0 6px;
}

.rd-services-cta-body {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
}

.rd-services-cta-btn {
	background: #E7C27D;
	color: #1E2A16;
	padding: 15px 30px;
	border-radius: 3px;
	font-weight: 700;
	font-size: 15px;
	flex: none;
	text-decoration: none;
}

/* ---------- responsive ---------- */

@media screen and (max-width: 980px) {
	.rd-hero { padding-top: 56px; padding-bottom: 48px; min-height: 480px; }
	.rd-hero-title { font-size: 51px; }
	.rd-steps { grid-template-columns: repeat(2, 1fr); }
	.rd-step:nth-child(2) { padding-right: 0; border-right: 0; }
	.rd-step:nth-child(3) { padding-left: 0; }
	.rd-services-title { font-size: 32px; }
}

@media screen and (max-width: 736px) {
	:root { --rd-gutter: 20px; }
	.rd-topbar-inner { flex-direction: column; align-items: flex-start; gap: 7.2px; }
	.rd-topbar-right { gap: 19px; }
	.rd-topbar-address { display: none; }
	.rd-hero { min-height: 440px; }
	.rd-hero-title { font-size: 40px; }
	.rd-hero-body { font-size: 17px; }
	.rd-services { padding-top: 56px; padding-bottom: 56px; }
	/* main.css's #page-wrapper > * rule wins on ID specificity and drops to
	   padding:0 at <=480px, so .rd-hero's and .rd-services' own gutter has
	   never applied. Reassert it here at phone widths only -- desktop keeps
	   main.css's values, which is what is currently deployed and approved. */
	#page-wrapper > .rd-hero,
	#page-wrapper > .rd-services {
		padding-left: var(--rd-gutter);
		padding-right: var(--rd-gutter);
	}
	.rd-steps { grid-template-columns: 1fr; }
	.rd-step { padding: 26px 0; border-right: 0; border-bottom: 1px solid #E4EAF1; }
	.rd-step:last-child { border-bottom: 0; }
	.rd-services-title { font-size: 26px; }
	.rd-services-cta { flex-direction: column; align-items: flex-start; gap: 24px; }
	.rd-header-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.rd-nav { gap: 22px; font-size: 17px; }
	.rd-logo-text { font-size: 22px; }
	/* .rd-logo-text drops to 26px here, so the header is 22+26+22+1 = 71px. */
	#produse { scroll-margin-top: 71px; }
}

/* Altitude's main.css darkens whatever sits first inside #page-wrapper —
   a positional rule, so class prefixing can't protect against it.
   Scoped to .rd-body; delete this when #page-wrapper is retired. */
.rd-body #page-wrapper > :first-child {
    background-color: transparent;
}

/* The same positional rule paints the LAST child of #page-wrapper -- the
   wrapper the footer sits in. Repaint it navy to match the utility bar.
   Scoped to .rd-body, so 404.php (legacy chrome) keeps Altitude's slate. */
.rd-body #page-wrapper > :last-child {
    background-color: var(--rd-navy);
}

/* At 0.5 alpha the copyright scores 3.89:1 on the navy and fails AA;
   0.7 clears it at 6.13:1. Specificity (1,2,0) beats main.css (1,1,0). */
.rd-body #footer .copyright {
    color: rgba(255, 255, 255, 0.7);
}

.rd-product-body {
    font-size: 21px;
    line-height: 1.75;
    color: #434b56;
    max-width: var(--rd-measure);
    margin: 0 auto 1.4em auto;
}
.rd-product-body:last-child {
    margin-bottom: 0;
}

/* Subheads take .rd-product-body's measure and centring so headings and
   paragraphs share a left edge. Size, weight and vertical margins are left
   to the h2 rules already in play -- only the inline axis is touched. */
.rd-product h2 {
    max-width: var(--rd-measure);
    margin-left: auto;
    margin-right: auto;
}

/* Scoped to the 9 product routes only (section.main.rd-product). The
   shared h1 / header.major / .main rules in main.css are left untouched --
   /about/ and /contact/ render their headings from those same rules. */
.rd-product header.major h1 {
    font-size: 3em;
    font-weight: 600;
    margin-bottom: 1.5em;
}

/* Expertiză în afaceri spotlight card: mutes the stock photo slightly so it
   sits closer to the site's navy/gold palette. Works alongside the existing
   .image::before navy gradient in main.css, not instead of it. */
.spotlights > article.rd-spot-tinted .image img {
	filter: saturate(0.85) contrast(1.05);
}

/* header.php opens a .wrapper > .inner pair that every inner route
   closes immediately, leaving an empty first child. main.css's
   #page-wrapper > :first-child rule gives that empty div 4em of
   padding-top, pushing every page title down for no visible reason.
   Does not match on the homepage, where #page-wrapper's first child is
   section.rd-hero, and 404.php never loads this stylesheet. */
#page-wrapper > .wrapper:first-child {
	padding-top: 0;
}

/* Select focus eases instead of snapping. main.css:2206 swaps the border colour
   (and on /contact/ adds an inset ring) on :focus with no transition, so clicking
   a select changes it in one frame. 0.2s ease-in-out matches main.css's own
   transitions. The native option list is drawn by the OS and is unaffected. */
.rd-body select {
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .rd-body select { transition: none; }
}

/* iOS Safari's data detector rewrites any phone-number-looking text into its
   own link, with its own colour and dotted underline -- which is why the
   topbar number looked washed out on iPhone but not on desktop. The meta tag
   in header.php turns that off; the number is now an explicit tel: link we
   style ourselves, so tapping it dials. */
a.rd-topbar-phone {
    color: var(--rd-gold-light);
    text-decoration: none;
    -webkit-text-decoration: none;
    border-bottom: 0;
}
a.rd-topbar-phone:hover,
a.rd-topbar-phone:focus {
    color: var(--rd-gold-light);
    text-decoration: none;
    border-bottom: 0;
}

/* At phone widths the four nav items ran out of room and "Despre Noi" broke
   across two lines, dragging the row out of alignment. Items never break
   mid-item now; if the row genuinely cannot fit, it wraps between items. */
@media screen and (max-width: 736px) {
    .rd-nav { flex-wrap: wrap; row-gap: 8px; }
    .rd-nav a { white-space: nowrap; }
}
@media screen and (max-width: 480px) {
    .rd-nav { gap: 16px; row-gap: 8px; font-size: 15px; }
}
@media screen and (max-width: 360px) {
    .rd-nav { gap: 12px; row-gap: 8px; font-size: 14px; }
}