/* ═════════════════════════════════════════════════════════════════
   SECTION 1 — HERO
   Includes: hero layout, background video, live panel widget,
   and proof-strip ticker.
   ═════════════════════════════════════════════════════════════════ */

/* ── Hero section ──
   Top padding leaves room for the fixed nav so the eyebrow isn't
   crowded (matches .bao-hero / .cao-hero so all three pages' first
   blocks align). The 120px tablet floor is set in the responsive
   block below.                                                    */
.hero {
	padding-top: clamp(80px, 9vw, 100px);
	padding-bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}

/* At viewports 1440 px and wider, pin the hero to a minimum of 92 vh
   so the headline + lede + proof strip occupy a consistent share of
   the screen on desktop. Below 1440 px the hero collapses to its
   intrinsic content height so narrower screens don't get an
   awkwardly tall first viewport. */
@media (min-width: 1440px) {
	.hero { min-height: 92vh; }
}

/* ── Background video ── */
.hero-bg {
	--hero-bg-w: clamp(900px, 100vw, 1200px);
	/* scale: 1.05 !important; */
	position: absolute;
	top: -65px; 
	right: -400px;
	left: 20vw;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
	will-change: transform;
	display: flex;
	/* align-items: center; */
    justify-content: center;
	height: 100%;
}
.hero-bg-video {
	display: block;
	width: auto;
	height: auto;
	-webkit-mask-image: radial-gradient(ellipse 72% 70% at 58% 52%, black 22%, transparent 62%);
	mask-image:         radial-gradient(ellipse 72% 70% at 58% 52%, black 22%, transparent 62%);
}
/* ≤480px — hide video, fall back to static PNG */
@media (max-width: 480px) {
	.hero-bg {
		left: auto;
		width: 100vw;
		height: auto;
		max-height: 780px;
		top: -70px; 
		right: -40px;
		background: url(../img/hero-bg.png) center/contain no-repeat;
		overflow: visible;
		scale: 1.2;
		opacity: 0.6;
		background: linear-gradient(31deg, rgba(245, 243, 239, 0.75) 32.7%, rgba(245, 243, 239, 0.00) 51.73%);
	}
	.hero-bg-video {
		/* display: none; */
	}
}

/* ── Hero grid ── */
.hero-grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	grid-template-areas:
		"top    top"
		"bottom bottom";
	column-gap: clamp(32px, 4vw, 72px);
	row-gap: clamp(20px, 2.5vw, 40px);
	position: relative;
	z-index: 1;
}
.hero-copy-top    { grid-area: top;    min-width: 0; }
.hero-copy-bottom { grid-area: bottom; }
.hero-copy-bottom .lede { max-width: none; }
.hero-grid .live-panel {
	grid-area: panel;
	align-self: stretch;
	margin-top: 16px;  /* align top with .lede (which has margin-top: 16px) */
}

/* ── Hero text ── */
/* Hero eyebrow inherits size/weight/typography from the base .eyebrow
   rule (20 / 22 / 600 per spec). Only the bottom margin differs. */
.hero-eyebrow { margin-bottom: 2rem; }
/* Three-line hero headline:
     line 1 (.hl-line)  → left  — default text-align in the block
     line 2 (.hl-line)  → left  — default text-align in the block
     line 3 (.it-tail)  → right — explicit text-align: right pins the
                                   italic text to the right edge of the
                                   headline (which spans the full
                                   hero-copy-top column width). */
/* Desktop/mobile headline groups — the active group uses display:contents so its
   children participate in the h1's flow as if the wrapper didn't exist. */
.hero-hl-group { display: contents; }
.hero-hl-group--mobile { display: none; }

@media (max-width: 767px) {
	.hero-hl-group--desktop { display: none; }
	.hero-hl-group--mobile  { display: contents; }
	/* When multiple .it-tail spans are stacked in the mobile group, the
	   padding-bottom: 23px descender-overflow trick creates a large gap
	   between lines. Remove it from all but the last. */
	.hero-hl-group--mobile .it-tail:not(:last-child) { padding-bottom: 0; }
}

/* GSAP animates .hl-line elements directly — neutralize the split-word hidden state */
.hero-headline .split-word .sw-inner { transform: none; opacity: 1; transition: none; }
.hero-headline { display: block; }
.hero-headline .hl-line {
	display: block;
	text-transform: uppercase;
	text-align: left;
	opacity: 0;
}
.hero-headline .it-tail {
	display: block;
	text-align: right;
	white-space: nowrap;
	opacity: 0;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }

/* ── Live panel widget ── */
.live-panel {
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: 16px;
	padding: 16px 20px;
	box-shadow: 0 40px 80px rgba(0,0,0,.12), 0 12px 24px rgba(0,0,0,.08);
	position: relative;
	display: flex;
	flex-direction: column;
}
.live-panel-top {
	display: flex; align-items: center; justify-content: space-between;
	font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	padding-bottom: 12px; border-bottom: 1px solid var(--rule);
	color: var(--green);
}
.live-dot {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--ink-muted); font-size: 11px;
}
.live-dot::before { content:''; width:8px; height:8px; border-radius:50%; background:#0B6623; box-shadow: 0 0 0 0 rgba(11,102,35,.6); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(11,102,35,.6);} 70%{box-shadow:0 0 0 12px rgba(11,102,35,0);} 100%{box-shadow:0 0 0 0 rgba(11,102,35,0);} }

/* Circular stepper: 5 icon circles joined by a connecting line */
.live-journey {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	margin: 10px 0 8px;
	position: relative;
}
/* Connecting line behind icons */
.live-journey::before {
	content: '';
	position: absolute;
	top: 17px; left: 10%; right: 10%;
	height: 2px;
	background: linear-gradient(to right,
		var(--green) 0%, var(--green) 32%,
		var(--rule) 50%, var(--rule) 100%);
	z-index: 0;
}
.live-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	position: relative;
	z-index: 1;
	color: var(--ink-muted);
}
.live-step-icon {
	width: 34px; height: 34px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1.5px solid var(--rule);
	color: var(--ink-muted);
}
.live-step-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.live-step.done .live-step-icon {
	background: var(--green);
	border-color: var(--green);
	color: #fff;
}
.live-step.done { color: var(--ink); }
.live-step.active .live-step-icon {
	background: var(--orange);
	border-color: var(--orange);
	color: #fff;
}
.live-step.active { color: var(--ink); }

.live-client {
	display: flex; align-items: center; gap: 10px; padding: 10px 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	margin-top: 2px;
}
.avatar {
	width: 32px; height: 32px; border-radius: 50%;
	background: #fff;
	border: 1.5px solid var(--orange);
	display: grid; place-items: center;
	color: var(--orange); font-weight: 700; font-size: 11px; letter-spacing: .04em;
	flex-shrink: 0;
}
.client-info { display: flex; flex-direction: column; }
.client-name { font-weight: 700; font-size: 13px; color: var(--ink); line-height: 1.2; }
.client-meta { font-size: 10px; color: var(--ink-muted); margin-top: 1px; }
.client-status { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--ink-muted); text-transform: uppercase; }

.live-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding-top: 10px; margin-top: auto; }
.live-met {
	text-align: left;
	padding: 10px 12px;
	background: var(--cream);
	border-radius: 8px;
}
.live-met-lbl { font-size: 10px; font-weight: 500; color: var(--ink-muted); }
.live-met-val { font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.1; margin-top: 2px; }
.live-met.orange .live-met-val { color: var(--orange); }

.metric-hl {  font-weight: 600; }

/* ── Proof strip (stock-ticker marquee) ──
   Breaks out of the 1440px .section-wrap cap so the marquee spans the
   full viewport width. `50% - 50vw` pulls each side from the current
   edge all the way to the viewport edge regardless of container width. */
.proof-strip {
	margin-top: clamp(32px, 4vw, 64px);
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	padding: clamp(18px, 2vw, 28px) 0;
	overflow: hidden;
	font-size: 40px;
	font-weight: 500;
	 text-transform: uppercase; letter-spacing: .03em;
	color: var(--ink-muted);
	line-height: 1;
}
.proof-track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: 0;
	animation: proof-ticker 56s linear infinite;
}
@keyframes proof-ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.proof-item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: 0 clamp(20px, 2.5vw, 40px);
}
.proof-slash {
	color: var(--orange);
	font-weight: 500;
	flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
	.hero-grid {
		grid-template-columns: 1fr;
		grid-template-areas: "top" "bottom" "panel";
	}
	.hero { min-height: auto; padding-top: 120px; }
}

@media (max-width: 900px) {
	.hero { min-height: auto; padding-top: 60px; }
}