/* Ported from Orisa's .sec-4-home-3 / .navigation-sec4home3 / .scroll-section
   (compiled main.css lines ~724-746 and ~6674-6695). Its own numbers are kept
   verbatim — the 10px nav row padding, the 60px number column, the 0.3s nav
   transition, the 100vh card min-height, the 16px card radius — because those
   are what make the stack read the way it does on index-3.html. Only the
   palette is Minos's: Orisa runs this section light (neutral-50 cards on a
   white page), which would punch a hole in the dark half of this page, so the
   same contrast relationship is rebuilt on charcoal — see the design-tokens
   comment in base.css for why gold can't carry body type here. */
/* padding-top: 0 for the same reason as always: the EARLIER section's
   padding-bottom creates a boundary gap, and the following section's
   padding-top cancels to 0 so the two don't stack (brands.css/services.css
   run the same rule). This was padding-top: 6rem before, which sat on top of
   Services' own padding-bottom: 6rem and doubled the Services→WhyUs gap to
   12rem against every other boundary's 6rem — the first mismatch this
   replaced.

   padding-bottom: 0, NOT 6rem, on the OTHER side — this section is the one
   exception to "the earlier section's padding-bottom owns the gap": what
   follows isn't .section_testimonials directly, it's .testimonials_panel
   nested inside it, which already carries its own padding: 6rem 0
   (testimonials.css) for its own internal breathing room. Giving this 6rem
   too stacked a SECOND 6rem on top of the panel's own, doubling THIS gap to
   12rem the same way the Services one was doubled — same bug, different
   pair of rules. The panel's own top padding is what now plays the role
   every other section's incoming padding-top normally cancels out. */
.section_whyus {
	position: relative;
	background-color: var(--vv-charcoal);
	padding-top: 0;
	padding-bottom: 0;
}

/* ===== Eyebrow ("What we do") =====
   Removed — same pass as .sv_hero_head .sv_eyebrow (services-page.css) and
   .ct_eyebrow (contact-page.css), the "X ↗" label site-wide. display: none
   here rather than pulled from WhyUs.astro; the rule below it is what
   actually takes it off the page. */
.whyus_eyebrow {
	display: none;
	align-items: center;
	gap: 4px;
	color: var(--vv-gold);
	letter-spacing: 0.025rem;
	text-transform: uppercase;
	font-family: Jost, Arial, sans-serif;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: 10px;
	cursor: default;
}
.whyus_eyebrow_label {
	position: relative;
	z-index: 1;
	overflow: hidden;
	display: inline-block;
}
.whyus_eyebrow_text.text-1 {
	position: relative;
	display: block;
	transition: 0.3s;
}
.whyus_eyebrow_text.text-2 {
	position: absolute;
	top: 100%;
	left: 0;
	display: block;
	transition: 0.3s;
}
.whyus_eyebrow:hover .whyus_eyebrow_text.text-1 {
	transform: translateY(-150%);
}
.whyus_eyebrow:hover .whyus_eyebrow_text.text-2 {
	top: 50%;
	transform: translateY(-50%);
}
.whyus_eyebrow_icon {
	position: relative;
	overflow: hidden;
	width: 16px;
	height: 16px;
	display: inline-flex;
	margin-left: 4px;
}
.whyus_eyebrow_icon svg {
	position: absolute;
	bottom: -1px;
	left: 1px;
	transform: translateY(-2px);
	transition: all 0.2s ease-out;
}
.whyus_eyebrow_icon .icon-2 {
	left: -12px;
	bottom: -12px;
	transform: translate(0, 0);
	opacity: 0;
}
.whyus_eyebrow:hover .whyus_eyebrow_icon .icon-1 {
	transform: translate(16px, -16px);
}
.whyus_eyebrow:hover .whyus_eyebrow_icon .icon-2 {
	opacity: 1;
	visibility: visible;
	transform: translate(13px, -13px);
}
@media (prefers-reduced-motion: reduce) {
	.whyus_eyebrow_text,
	.whyus_eyebrow_icon svg {
		transition: none;
	}
}

/* ===== Heading row ===== */
.whyus_head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2rem;
	align-items: end;
	padding-bottom: 3rem;
}
.whyus_heading {
	color: var(--vv-off-white);
	font-family: "Playfair Display", Georgia, serif;
	/* 2.5rem, not 3rem — trimmed to match About's own heading and
	   Testimonials' "What owners say" (both now 3.25rem in Review Wide
	   Black, a heavier uppercase display face; Feature Display here reads
	   bigger at the same rem for the same reason its own font-size was
	   already smaller than u-h3-review's before this pass). */
	font-size: 2.5rem;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
	max-width: 48rem;
	margin: 0;
}

/* ===== The three-piece mark =====
   Orisa positions faces 1 and 3 absolutely against face 2, which stays in
   flow — that is what assembles them into a cube. The translateY(-100px) is
   its own way of pulling the group up into the space beside the nav — and it
   is the reason padding-top has to be measured against it, not picked on its
   own: 4rem (~64-88px depending on root size) minus that 100px pull-up came
   out NEGATIVE, so the mark sat 12-36px ABOVE where the nav list ends,
   overlapping [05]'s own row instead of clearing it. 180px keeps a real 80px
   of daylight below the last nav row after the -100px is subtracted back out
   — both numbers are flat px (not rem), specifically so this stays correct
   at any root font-size instead of drifting the way the mixed-unit version
   above did.

   .whyus_decor sits in normal flow BELOW all five .whyus_nav rows already —
   there's no navbar above it to clear the way an earlier pass assumed. */
.whyus_decor {
	padding-top: 180px;
	padding-left: 3rem;
	color: var(--vv-off-white);
}
.whyus_decor_mark {
	position: relative;
	width: 150px;
	height: 186px;
	transform: translateY(-100px);
}
/* Unlike the cube's three DIFFERENTLY-SHAPED faces (each hand-positioned to
   its own left/top offset so the three distinct rhombi tiled into one
   silhouette), these three pieces are all the SAME 449×558 canvas — each
   mostly transparent outside its own third (see the markup comment) — so
   they can just stack exactly on top of one another. One rule covers all
   three instead of the cube's per-child left/top pair. */
.whyus_decor_mark > svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.whyus_decor_mark > svg image {
	width: 100%;
	height: 100%;
}

/* ===== Pinned body: nav left, stacking cards right =====
   Orisa's col-xxl-3 / col-lg-8 + offset-xxl-1 pair, as a two-track grid. */
.whyus_body {
	display: grid;
	grid-template-columns: minmax(0, 25%) minmax(0, 1fr);
	gap: 4rem;
	align-items: start;
}

/* ===== The numbered nav ===== */
.whyus_nav {
	list-style: none;
	margin: 0;
	padding: 0;
}
.whyus_nav_item {
	padding: 10px 0;
	border-bottom: 1px solid rgba(184, 154, 107, 0.2);
	transition: all 0.3s ease;
}
.whyus_nav_content {
	display: flex;
	align-items: center;
	color: var(--vv-off-white);
}
/* flex: 0 0 60px on the number and flex: 1 on the label, exactly as Orisa
   sizes them — the arrow then takes only what it needs at the end. */
.whyus_nav_num {
	flex: 0 0 60px;
	opacity: 0.5;
}
.whyus_nav_label {
	flex: 1;
	margin: 0;
	text-align: left;
}
.whyus_nav_content svg {
	opacity: 0;
	transition: all 0.3s ease;
	flex-shrink: 0;
}
/* .active is set from whyus.js, off the pinned timeline's progress — not a
   :hover state. Gold-on-charcoal rather than Orisa's neutral-100 fill, which
   would be invisible here. */
.whyus_nav_item.active {
	background-color: rgba(184, 154, 107, 0.14);
}
.whyus_nav_item.active .whyus_nav_content {
	margin: 0 16px;
	transition: all 0.3s ease;
	color: var(--vv-gold);
}
.whyus_nav_item.active svg {
	opacity: 1;
}

/* ===== The card stack =====
   Orisa's .scroll-section .wrapper / .list / .item, unchanged: every card
   after the first is absolutely positioned on top of the first, so they all
   occupy the same box and whyus.js can slide them in over one another. The
   first stays in flow and is what gives the column its height. */
.whyus_stack {
	position: relative;
}
.whyus_stack_list {
	position: relative;
	height: 100%;
}
.whyus_card {
	min-height: 100vh;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	height: auto;
}
.whyus_card:first-child {
	min-height: 100%;
	height: 100%;
}
/* No width gate on this any more. It used to be @media (min-width: 992px),
   matching whyus.js's own matchMedia gate back when the deck was
   desktop-only — below that the JS never ran, so leaving cards 2+ absolute
   would have stacked them on top of card 1 with no transform to separate
   them. whyus.js now runs the same stacking timeline at every width (only
   the PINNED element differs — see its comment), so the absolute positioning
   the effect depends on has to follow it down. The mobile block at the
   bottom of this file is what gives the stack a viewport-sized box to deal
   the cards inside. */
.whyus_card:not(:first-child) {
	position: absolute;
}
/* Orisa's .container.bg-neutral-50.rounded-4 — a lifted, OPAQUE panel against
   the page. Solid is not optional here the way it might be elsewhere: every
   card but the first is position: absolute (see .whyus_card above), stacked
   directly on top of the one before it, and whyus.js never hides the card
   underneath — it only scales it down. Full opacity is what actually hides
   it. A first pass here used rgba(245, 242, 237, 0.04) — 4% — matching a
   "glass" treatment used elsewhere on this page; on a card that has to
   fully occlude another card, that reads as both cards' text superimposed
   the moment the next one slides in. */
/* max-width caps this at roughly Orisa's own .container ceiling (1140-1320px
   across its breakpoint ladder) — without it the card fills 100% of
   .whyus_stack's column, which on a wide desktop is most of the viewport
   width and, since the grid's other dimensions scale off that, pulled the
   whole card noticeably bigger than Orisa's own (measured: 1143×446 there,
   1286×644 here before this pass — width AND height both over). */
.whyus_card_inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2rem;
	align-items: center;
	max-width: 72rem;
	padding: 0.75rem;
	border-radius: 16px;
	border: 1px solid rgba(184, 154, 107, 0.2);
	background-color: #333c4b;
}
.whyus_card_copy {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	padding: 2.25rem;
}
.whyus_card_icon {
	padding-bottom: 20px;
	color: var(--vv-gold);
}
.whyus_card_icon svg {
	display: block;
}
/* The site-wide card title (base.css) — Jost, not the Playfair this used to
   be, so it matches the card titles on /services, /about and /faq exactly. */
.whyus_card_title {
	display: block;
	color: var(--vv-off-white);
	font-family: Jost, Arial, sans-serif;
	font-size: var(--card-title-size);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.04em;
	margin-bottom: 1.5rem;
}
/* Sentence case, not this page's usual uppercase micro-copy — Orisa's own
   list here (.ps-3.neutral-950, plain <li>s, no font-size/line-height
   override of its own) is default body text, and uppercase at this width
   was the real reason the card ran taller than Orisa's: every bullet long
   enough to read as a full sentence wrapped to two lines instead of one
   once the letters were forced wider by text-transform, and five doubled
   lines compounds fast. Sentence case is also just more readable at this
   length — the uppercase voice elsewhere on this page (Pillars, the eyebrow
   labels) is short 1-3 word tags, not run-on sentences. */
.whyus_card_list {
	color: var(--vv-off-white);
	font-family: Jost, Arial, sans-serif;
	font-size: var(--card-text-size);
	font-weight: 400;
	line-height: 1.5;
	margin: 0 0 1rem;
	padding-left: 1.1rem;
}
.whyus_card_list li::marker {
	color: var(--vv-gold);
}
.whyus_card_media {
	border-radius: 12px;
	overflow: hidden;
	align-self: stretch;
}
.whyus_card_media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* text-scale-anim: whyus.js splits the title into per-letter spans and scales
   the hovered letter (plus its two neighbours) vertically. These two rules
   are all the CSS that effect needs — Orisa's are identical. */
.text-scale-anim {
	white-space: pre-wrap;
	transform-origin: top left;
}
.at-word-span,
.at-letter-span {
	display: inline-block;
}

@media screen and (max-width: 1199px) {
	.whyus_body {
		grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
		gap: 2rem;
	}
	.whyus_card_copy {
		padding: 2rem;
	}
}
@media screen and (max-width: 991px) {
	/* padding-top: 0 cancels Services' own padding-bottom: 3rem; padding-bottom
	   is 0, NOT 3rem, for the same reason as the desktop rule above: what
	   follows is .testimonials_panel (testimonials.css), which already carries
	   its own padding: 3rem 0 at this width. A real 3rem here would double
	   that gap to 6rem the same way the desktop one doubled to 12rem. */
	.section_whyus {
		padding-top: 0;
		padding-bottom: 0;
	}
	.whyus_body {
		grid-template-columns: 1fr;
	}
	.whyus_nav {
		display: none;
	}
	/* The cards DO stack here now (whyus.js pins .whyus_stack at this width
	   and deals them exactly as on desktop), so this is no longer the
	   "unstack them back into normal flow" block it used to be — every card
	   is absolutely positioned in the same box, and .whyus_stack_list below
	   is what gives that box a real height, since with all five out of flow
	   there is no in-flow child left to size it.
	   --vh, not vh: this is inside a PINNED element, so its height has to
	   match what the viewport really is on a mobile browser whose toolbar
	   comes and goes — plain vh over-counts by the toolbar and the last card
	   would sit cut off at the bottom. 74 rather than 100 leaves room for the
	   navbar's own MENU button above (whyus.js starts this pin 72px down) and
	   a little air under the deck. */
	.whyus_card,
	.whyus_card:first-child {
		position: absolute;
		inset: 0;
		min-height: 0;
		height: 100%;
		margin-bottom: 0;
	}
	/* .whyus_stack is the pin TARGET at this width (whyus.js), but it never
	   had its own overflow rule — nothing on desktop needed one, since
	   .whyus_pin (desktop's own pin target, a different, larger element)
	   already clips everything relevant through its own box. Cards 2-5 sit
	   at yPercent: 100 (fully below the box) until their own turn to rise;
	   without overflow: hidden HERE, "below the box" is not "off-screen",
	   it is just the ordinary page underneath the pin, and every one of
	   those waiting cards painted straight through into it at once — the
	   "3 κάρτες φαίνονται κάτω κάτω" bug, and it was never really about how
	   much slack any single card had, which is why the -stack_list rule's
	   own vh bump right below only ever partly helped it. Clipping the pin
	   target itself is what actually confines the deck to one visible card
	   at a time, the way it already reads on desktop. */
	.whyus_stack {
		overflow: hidden;
	}
	.whyus_stack_list {
		min-height: calc(var(--vh) * 82);
	}
	/* Fills the card's own box rather than shrink-wrapping its content —
	   without this the five cards would each be a different height (their
	   copy differs), and a deck whose cards don't share one silhouette reads
	   as five loose panels rather than a stack.

	   align-content: start (and .whyus_card_copy's flex-start below) is what
	   keeps the CONTENT packed at the top of that full-height box instead of
	   distributed down it. Desktop can distribute freely — its card is two
	   columns side by side and short. Here the card is one tall column and
	   the next card rises over it from the BOTTOM, so anything spread to the
	   bottom edge is the first thing covered: with the desktop
	   space-between still applying, the media image sat at the very bottom
	   behind a large gap and was occluded almost the instant it arrived —
	   measured, and visible as a thin dark strip under the bullets rather
	   than a photo. Packed to the top, the image follows straight after the
	   bullets and the slack collects at the bottom, where the incoming card
	   eats empty space first and the content stays readable far longer. */
	.whyus_card_inner {
		grid-template-columns: 1fr;
		height: 100%;
		align-content: start;
		overflow: hidden;
	}
	.whyus_card_copy {
		height: auto;
		justify-content: flex-start;
	}
	/* 16rem before, when these were free-scrolling blocks that could be as
	   tall as they liked. Inside a viewport-height card the image is the one
	   part that can give room back to the copy, which must not be clipped —
	   min-height: 0 lets it actually shrink below its content size, which a
	   grid item otherwise refuses to do.
	   13rem, not the 8rem this briefly dropped to — that trim was reaching
	   for clearance by shrinking the image, back when overflow: hidden was
	   still missing on .whyus_stack (above) and every waiting card was
	   bleeding straight through the page regardless of how much slack any
	   one card had. With that actually fixed, the box has room to spare
	   (measured ~280-340px even at the smaller size), so the image gets
	   most of it back — "η εικόνα δεν φαίνεται ολόκληρη" was this crop
	   being tighter than it needed to be, not the box being too short. */
	.whyus_card_media {
		max-height: 13rem;
		min-height: 0;
	}
	/* Tightened alongside the media height above — the same clearance push,
	   spread across the rest of the card rather than taken entirely from
	   one element: a little off the icon's own bottom gap, the title's
	   margin, and the list's, each still generous, just no longer sized for
	   a card with room to spare. */
	.whyus_card_icon {
		padding-bottom: 12px;
	}
	.whyus_card_title {
		margin-bottom: 1rem;
	}
	.whyus_card_list {
		margin-bottom: 0.75rem;
	}
	.whyus_head {
		grid-template-columns: 1fr;
		align-items: start;
	}
	.whyus_heading {
		font-size: 2rem;
	}
	/* Was display: none — "filler with no room to be filler" was true of
	   Orisa's OWN positioning for it (180px padding-top + a -100px pull,
	   both tuned to clear five nav rows that are also display: none at this
	   width, .whyus_nav above), not of the mark itself: reveal.js's
	   initSvgBreak (the three-piece break-apart-on-scroll) was never gated
	   to desktop the way the pin above is, it just had nothing to animate
	   here because the CSS hid its wrapper outright — "δεν υπάρχει το logo
	   που σπάει σε 3 κομμάτια στο κινητό" was this rule, not a missing
	   effect. .whyus_side is a single grid column now (.whyus_nav gone,
	   nothing left inside it but this), so the mark gets its own plain
	   centred spot above the card list instead of the desktop numbers-column
	   offset math that doesn't apply once there's no numbers column left to
	   offset against. */
	.whyus_decor {
		display: flex;
		justify-content: center;
		padding: 0 0 2.5rem;
	}
	.whyus_decor_mark {
		width: 130px;
		height: 161px;
		transform: none;
	}
}
@media screen and (max-width: 767px) {
	.whyus_card_copy {
		padding: 1.5rem;
	}
}
/* The photo takes what the card's text leaves it, and on a short phone that is
   a band rather than a picture: measured 14-86px at 360x740 against the 13rem
   the rule above allows, which reads as a smear under the bullet list. It
   recovers on its own once there is room (97-145px at 375x812, the full 208px
   at 412x915), so only the short end stands the photo down — the same call,
   at the same 800px cutoff, that .sv_offer_media already makes on /services. */
@media screen and (max-width: 767px) and (max-height: 800px) {
	.whyus_card_media {
		display: none;
	}
}

/* ===== Intro paragraphs under the heading =====
   The client's two "why owners choose us" paragraphs, side by side under the
   heading and above the pinned deck. Same character scrub as the heading
   (data-reveal-text); type from type.css (TEXT). */
.whyus_head_main {
	min-width: 0;
}
.whyus_intro {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.5rem;
	max-width: 64rem;
	margin-top: 2rem;
}
.whyus_intro_p {
	margin: 0;
	color: var(--vv-off-white);
	opacity: 0.8;
}
@media screen and (max-width: 767px) {
	.whyus_intro {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
		margin-top: 1.5rem;
	}
}