/* Originally styles for the /services page only. The .sv_hero* block (hero,
   eyebrow, banner — ported from Orisa's services-2/sec-1) is no longer
   exclusive to it: /about's own AboutHero.astro reuses these same classes
   verbatim for its own hero rather than duplicating the rule set, since the
   brief for that page was explicitly "keep the top part like Services." The
   .sv_ticker and .sv_offer* blocks below the hero ARE still /services-only —
   nothing else on the site uses them. Named after the page that introduced
   it, not a promise that it stays that page's alone.

   Palette is Minos's throughout: Orisa's services-2 is a light page built on
   neutral-0/neutral-50, and this site's equivalent surfaces are the charcoal
   ground with the same one-step-lifted #333c4b panel that WhyUs's stacking
   cards and the testimonial cards already use. Dimensions that carry meaning
   (the deck's pin distance, the card radius, the 0.9 scale) are Orisa's own.

   px, not rem, for anything that has to match a fixed measurement — this
   page's root font-size is fluid (see the same note in whyus.css/navbar.css). */

/* ===== Shared eyebrow (hero + offer head) ===================================
   Same two-stacked-copies + dual-arrow hover as .whyus_eyebrow and
   .footer_tag. Kept as its own set of class names rather than reaching for
   those, matching how every ported section on this site owns its own copy of
   the pattern instead of sharing a base class. */
.sv_eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	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;
	text-decoration: none;
}
.sv_eyebrow_label {
	position: relative;
	z-index: 1;
	overflow: hidden;
	display: inline-block;
}
.sv_eyebrow_text {
	display: block;
	transition: 0.3s;
}
.sv_eyebrow_text.text-1 {
	position: relative;
}
.sv_eyebrow_text.text-2 {
	position: absolute;
	top: 100%;
	left: 0;
}
.sv_eyebrow:hover .sv_eyebrow_text.text-1 {
	transform: translateY(-150%);
}
.sv_eyebrow:hover .sv_eyebrow_text.text-2 {
	top: 50%;
	transform: translateY(-50%);
}
.sv_eyebrow_icon {
	position: relative;
	overflow: hidden;
	width: 11px;
	height: 11px;
	display: inline-flex;
	flex-shrink: 0;
}
.sv_eyebrow_icon svg {
	position: absolute;
	inset: 0;
	transition: all 0.2s ease-out;
}
.sv_eyebrow_icon svg:last-child {
	opacity: 0;
	transform: translate(-12px, 12px);
}
.sv_eyebrow:hover .sv_eyebrow_icon svg:first-child {
	transform: translate(12px, -12px);
	opacity: 0;
}
.sv_eyebrow:hover .sv_eyebrow_icon svg:last-child {
	opacity: 1;
	transform: translate(0, 0);
}

/* ===== Hero (Orisa services-2/sec-1) ===================================== */
.sv_hero {
	position: relative;
	background-color: var(--vv-charcoal);
	/* Clears the fixed navbar, which is 1rem from the top plus its own logo
	   height (--nav-logo-h, navbar.css) — this page opens straight into a
	   title rather than a full-bleed hero photo, so nothing else is holding
	   that space open the way index.astro's hero does. Trimmed from 220px:
	   with .sv_eyebrow now removed (below) there's no label sitting above
	   the title to clear room for any more, and the extra space above just
	   read as the whole page starting unnecessarily low. */
	padding-top: 160px;
	overflow: hidden;
}
.sv_hero_head {
	padding-bottom: 60px;
}
/* Removed, not just hidden: the "About ↗" / "Services ↗" / etc. label
   this used to show above every one of these titles. Kept as a CSS rule
   rather than pulled from all four .astro files individually — they all
   still carry the markup, this is what actually takes it off the page. */
.sv_hero_head .sv_eyebrow {
	display: none;
}
/* 2:1, matching Orisa's own col-lg-8 / col-lg-4 split on this row — the title
   needs the room, see the note on .sv_hero_title.

   align-items: center, not end — the row's own height is set by whichever
   column is taller, and since the title shrank to one line (.sv_hero_title,
   above) while .sv_hero_lead still runs several, that's now always the lead
   paragraph on the right. "end" alignment was pinning the (now short) title
   to the BOTTOM of that taller box, which read as the title sitting in a
   large empty gap it never used — centering it in that same box is what was
   actually asked for. */
.sv_hero_row {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 3rem;
	align-items: center;
	margin-top: 20px;
}
/* Orisa's own is fz-200 (200px) at fw-600. Capped at 132px here, not 200px,
   because this site's display face is Review Wide Black — genuinely wide, as
   the filename says (see the same trap in navbar.css, where the menu links
   had to drop to weight 400 over it). At 200px the single word "SERVICES" is
   about 880px wide, more than this column holds, and because
   [data-reveal-text] splits the heading into per-character spans (reveal.js),
   the line breaker is free to break BETWEEN characters — so it wrapped
   mid-word as "SERVI / CES" rather than overflowing. Sizing the longest word
   to fit the column is what actually prevents that; no white-space rule
   would, short of letting it overflow the page.

   line-height 0.85 is Orisa's own tight display leading, kept. */
.sv_hero_title {
	margin: 0;
	color: var(--vv-off-white);
	font-family: Jost, Arial, sans-serif;
	/* Shrunk again, well past the previous 42–112px pass — this class now
	   has to hold four different titles to ONE line each, not just
	   "Services"/"About Minos Host". The longest, Pricing's own "Property
	   Management Pricing" (28 characters), is what the ceiling is actually
	   sized against: at the OLD 112px it ran to roughly 1.8× this column's
	   own width at a 1920px viewport (2fr of .sv_hero_row, minus its gap),
	   wrapping the way "SERVICES" once threatened to at 200px (see the
	   paragraph above) — same failure, longer string. Worked back from
	   that column width at both ends of the realistic desktop range
	   (992px–1920px) the same way, with a safety margin this time rather
	   than cutting it exactly at the edge, since this is an estimate, not a
	   fontTools measurement against the actual Jost metrics. Re-measure
	   properly before raising this again — 3.6vw put the tightest point (a
	   1200px viewport, the narrowest width .sv_hero_row is still 2fr/1fr
	   rather than a single stacked column, see the 1199px breakpoint below)
	   only a few percent inside the estimated limit; 3.3vw gives that same
	   point real margin instead of sitting right on the edge of a guess. */
	font-size: clamp(28px, 3.3vw, 62px);
	font-weight: 900;
	line-height: 0.85;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}
.sv_hero_lead {
	margin: 0 0 0.75rem;
	color: var(--vv-off-white);
	opacity: 0.75;
	font-size: 1.125rem;
	line-height: 1.5;
	max-width: 34rem;
}
/* The banner. Height is fixed and the image is object-fit: cover at 120% so
   ScrollSmoother's data-speed="0.4" (ServicesHero.astro) has vertical slack
   to move the image within the frame — at exactly 100% the drift would pull
   the image's own edge into view at one end of the scroll. */
.sv_hero_banner {
	position: relative;
	height: clamp(320px, 52vh, 620px);
	overflow: hidden;
}
.sv_hero_banner img {
	display: block;
	width: 100%;
	height: 120%;
	object-fit: cover;
	object-position: center;
}

/* ===== Ticker (Orisa services-2/sec-2) ===================================
   Same CSS-only marquee as brands.css: the track holds two copies of the
   list and translates -50%, so the second copy lands exactly where the first
   began. See ServicesTicker.astro for why the plugin was not carried over. */
.sv_ticker {
	background-color: var(--vv-charcoal);
	border-top: 1px solid rgba(184, 154, 107, 0.18);
	border-bottom: 1px solid rgba(184, 154, 107, 0.18);
	padding: 26px 0;
	overflow: hidden;
}
.sv_ticker_track {
	display: flex;
	width: max-content;
	animation: sv-ticker-scroll 44s linear infinite;
}
/* Pauses under the cursor and for anyone who has asked for less motion. */
.sv_ticker:hover .sv_ticker_track {
	animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
	.sv_ticker_track {
		animation: none;
	}
}
@keyframes sv-ticker-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}
.sv_ticker_list {
	display: flex;
	align-items: center;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0 1rem 0 0;
}
.sv_ticker_item {
	display: flex;
	align-items: center;
	gap: 2rem;
	white-space: nowrap;
	color: var(--vv-off-white);
	font-size: 20px;
	font-weight: 400;
	letter-spacing: -0.01em;
}
.sv_ticker_item svg {
	flex-shrink: 0;
	color: var(--vv-gold);
	opacity: 0.6;
}

@media screen and (max-width: 1199px) {
	.sv_hero {
		padding-top: 130px;
	}
	.sv_hero_row {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
		align-items: start;
	}
}
@media screen and (max-width: 767px) {
	.sv_hero {
		padding-top: 110px;
	}
	.sv_ticker_item {
		font-size: 16px;
		gap: 1.25rem;
	}
	.sv_ticker_list {
		gap: 1.25rem;
	}
}

/* ===== The service cards — Orisa's "My Process" deck (about-3/sec-2) =====
   Measured off services-3.html at 1920/1440/768/375: the section is Orisa's
   neutral-50 (#F2F2F2) with seven full-height column lines at 10% opacity;
   each card is a plain white (#FEFEFE) box with 40px padding and square
   corners, photo left, content right; the title is neutral-900 (#1D1D1D) at
   600 over a neutral-100 (#DFDFDF) hairline, the text neutral-500 (#585959)
   at 500 and 1.6 leading. Orisa's own palette and sizes throughout — Jost is
   the one stand-in, for Orisa's DM Sans, as everywhere else on this site.

   Mechanics (pin, 0.9 scale, the next card rising from yPercent 100, the
   per-card reveal, /services#slug scrolling) live in services-page.js. */
.sv_offer {
	/* Orisa's layout on this site's palette: the menu panel's cream as the
	   ground, so the section answers the charcoal ticker above it and the
	   footer below; charcoal type (the site's "blue"); gold only as line,
	   icon and bullet — never as type on the light ground (base.css). */
	--offer-ground: var(--vv-cream);
	--offer-card: var(--vv-cream-card);
	--offer-ink: var(--vv-charcoal);
	--offer-muted: var(--vv-gray);
	--offer-rule: rgba(184, 154, 107, 0.45);
	position: relative;
	background-color: var(--offer-ground);
	padding-top: 120px;
	color: var(--offer-ink);
}
.sv_offer_container {
	position: relative;
	z-index: 1;
	max-width: 1750px;
}

/* Orisa's .row.pb-50.align-items-end: the "Step by step" label over the
   h3-sized "My Process". */
.sv_offer_head {
	padding-bottom: 50px;
}
.sv_offer_head .sv_eyebrow {
	margin-bottom: 10px;
	color: var(--offer-ink);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.05em;
}
.sv_offer_head .sv_eyebrow_icon {
	color: var(--vv-gold);
}
.sv_offer_heading {
	margin: 0;
	color: var(--offer-ink);
	font-family: Jost, Arial, sans-serif;
	font-size: 64px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.05em;
}

/* Orisa's .scroll-section .wrapper / .item: the first card in flow, every
   other one stacked absolutely over it. services-page.js gives every card
   the tallest one's height, so a shorter card fully covers a taller one. */
.sv_offer_deck {
	position: relative;
}
.sv_offer_item {
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
}
/* Orisa's .item:not(:first-child): a full-screen-tall, transparent box
   with the card at its top. yPercent 100 of THAT is a whole screen down, so
   the cards still waiting their turn sit out of sight below rather than
   piling up under the current one, and each rises in from the bottom edge. */
@media screen and (min-width: 1200px) and (min-height: 680px), screen and (min-width: 992px) and (min-height: 790px) {
	.sv_offer_item:not(:first-child) {
		position: absolute;
		min-height: 100vh;
	}
	/* Each card its own compositing layer while the deck runs, so its 0.9
	   scale and fade are done by the GPU rather than repainting the photo
	   and every line of text on each frame — that repaint was the shake. */
	.sv_offer_item {
		will-change: transform, opacity;
	}
}
.sv_offer_card {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: 1.5rem;
	align-items: center;
	padding: 28px;
	background-color: var(--offer-card);
	/* A hairline, not a drop shadow: the cards scale and fade every frame
	   of the deck, and a blurred shadow had to be repainted with them. */
	border: 1px solid rgba(46, 54, 68, 0.08);
}
@media screen and (min-width: 1400px) {
	.sv_offer_card {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		column-gap: 3rem;
	}
}
.sv_offer_media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}
.sv_offer_media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sv_offer_header {
	padding-bottom: 12px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--offer-rule);
}
.sv_offer_title {
	margin: 0;
	color: var(--offer-ink);
	font-family: Jost, Arial, sans-serif;
	font-size: 34px;
	font-weight: 600;
	line-height: normal;
	letter-spacing: -1.8px;
}
.sv_offer_body {
	max-width: 75%;
}
.sv_offer_desc {
	margin: 0 0 12px;
	color: var(--offer-muted);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: -0.01em;
}
.sv_offer_body > .sv_offer_desc:last-child {
	margin-bottom: 0;
}
/* Card 1's lists, written out as one sentence (ServicesOffer.astro): the
   lead-in picked out in charcoal, the rest set exactly like the paragraph. */
.sv_offer_list_label {
	color: var(--offer-ink);
	font-weight: 600;
}
@media screen and (max-width: 1399px) {
	.sv_offer_body {
		max-width: none;
	}
}
@media screen and (max-width: 1199px) {
	.sv_offer_title {
		font-size: 24px;
		letter-spacing: -1px;
	}
	.sv_offer_media {
		min-height: 240px;
	}
}
/* Below 992px the cards sit in normal flow, one under the next (the deck
   isn't pinned there — card 1's lists alone outgrow a phone screen), and
   each one's text washes in as it scrolls into view (services-page.js).
   Orisa's own stacked order: content first, photo under it. */
/* Normal flow wherever the deck isn't pinned — including a desktop screen
   too short for the tallest card (the query services-page.js uses). */
@media screen and (max-width: 991px), screen and (max-width: 1199px) and (max-height: 789px), screen and (max-height: 679px) {
	.sv_offer {
		padding-bottom: 40px;
	}
	/* The cards overlap instead of sitting apart: each one rises OVER the one
	   before it (services-page.js's flow stack, reveal.js), so the stack has
	   to be a stack here too — opaque cards, each painted over its
	   predecessor's foot. */
	.sv_offer_item + .sv_offer_item {
		margin-top: -28px;
	}
	.sv_offer_item {
		position: relative;
		will-change: transform, opacity;
	}
}
@media screen and (max-width: 991px) {
	.sv_offer {
		padding-top: 80px;
	}
	.sv_offer_heading {
		font-size: 40px;
	}
	.sv_offer_card {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 1.25rem;
	}
	.sv_offer_media {
		order: 2;
		min-height: 220px;
	}
}
@media screen and (max-width: 767px) {
	.sv_offer_card {
		padding: 24px 20px;
	}
	.sv_offer_title {
		font-size: 22px;
	}
	.sv_offer_desc {
		font-size: 15px;
	}
	.sv_offer_media {
		min-height: 200px;
	}
}
@media screen and (max-width: 575px) {
	.sv_offer_heading {
		font-size: 36px;
	}
	.sv_offer_title {
		font-size: 20px;
	}
	.sv_offer_desc {
		font-size: 14px;
	}
	.sv_offer_media {
		min-height: 180px;
	}
}