/* ============================================================
   Landing-page hero + ticker, exactly as option-3-bold-interactive.html.

   theme.css was lifted from the later production build, whose hero sets
   the headline in a serif and adds a fifth slide. The client asked for the
   option-3 hero instead, so its rules are reproduced here and scoped to
   .hero and .tick — every other section keeps theme.css untouched.

   Values are option 3's, copied verbatim. Where its tokens differ from
   theme.css (ember-2, brass, fg-2, fg-3, bg-2, strokes, the font stack)
   they are redefined on the two blocks only, so they inherit no further.
   ============================================================ */

.hero,
.tick {
	--bg: #0E0E10;
	--bg-2: #141417;
	--stroke: rgba(255,255,255,.09);
	--stroke-2: rgba(255,255,255,.16);
	--fg: #F4F1EC;
	--fg-2: #A5A19B;
	--fg-3: #6E6A65;
	--ember-2: #FF8C4B;
	--brass: #C9A227;
	--sans: -apple-system,BlinkMacSystemFont,'Segoe UI Variable','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

/* ---------- hero ---------- */
/* option 3's body is 16px in its own sans; theme.css's is 16.5px, which the
   lede and the eyebrow's line box would otherwise inherit (1px taller hero) */
.hero { position:relative;min-height:min(100vh,860px);display:flex;align-items:center;overflow:hidden;padding:clamp(60px,9vw,110px) 0;font-family:var(--sans);font-size:16px }
.hero__slides { position:absolute;inset:0 }
.hero__slides figure { position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.4s ease }
.hero__slides figure.on { opacity:1 }
.hero__slides img { width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:sk-drift 18s ease-in-out infinite alternate }
@keyframes sk-drift { to{transform:scale(1.16) translate3d(-2%,-1%,0)} }
@media (prefers-reduced-motion:reduce) { .hero__slides img { animation:none } }

.hero::before {
	content:"";position:absolute;inset:0;z-index:1;
	background:
		radial-gradient(120% 90% at 78% 40%,rgba(226,112,58,.16) 0%,transparent 58%),
		linear-gradient(95deg,rgba(14,14,16,.97) 0%,rgba(14,14,16,.88) 38%,rgba(14,14,16,.42) 74%,rgba(14,14,16,.6) 100%);
}
.hero__in { position:relative;z-index:2;max-width:920px }

.hero .eyebrow { gap:10px;margin:0 0 22px;font:700 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ember) }
.hero .eyebrow::before { width:26px;height:2px;background:var(--ember) }

/* option 3 sets the headline in the bold sans, not the serif */
.hero h1 { font-family:var(--sans);font-weight:700;font-size:clamp(42px,8.4vw,104px);line-height:1.03;letter-spacing:-.045em;margin:0 0 28px }
.hero h1 .ln { display:block;overflow:hidden }
.hero h1 .ln i { display:block;font-style:normal;transform:translateY(105%);animation:sk-rise .95s cubic-bezier(.16,1,.3,1) forwards }
.hero h1 .ln:nth-child(2) i { animation-delay:.1s }
.hero h1 .ln:nth-child(3) i { animation-delay:.2s }
@keyframes sk-rise { to{transform:none} }
@media (prefers-reduced-motion:reduce) { .hero h1 .ln i { transform:none;animation:none } }
.hero h1 em { font-style:normal;background:linear-gradient(100deg,var(--ember-2),var(--brass));-webkit-background-clip:text;background-clip:text;color:transparent }

.hero__lede { font-size:clamp(16.5px,1.9vw,20px);color:var(--fg-2);max-width:54ch;margin:0 0 18px }
.hero__q { margin:0 0 34px;padding-left:18px;border-left:2px solid var(--ember);font:400 15.5px/1.7 var(--sans);color:var(--fg-2);max-width:48ch }
.hero__cta { display:flex;flex-wrap:wrap;gap:14px;align-items:center }

.hero .btn { position:relative;overflow:hidden;padding:17px 36px;background:var(--ember);color:#14100D;font:700 12.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;border-radius:100px;transition:transform .3s,box-shadow .3s,background .3s }
.hero .btn:hover { transform:translateY(-3px);box-shadow:0 14px 34px -10px rgba(226,112,58,.6);background:var(--ember-2) }
.hero .btn--o { background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--stroke-2) }
.hero .btn--o:hover { background:var(--fg);color:var(--bg);box-shadow:none }

.hero__dots { position:absolute;bottom:34px;right:clamp(20px,4vw,48px);z-index:3;display:flex;gap:9px }
.hero__dots button { width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.26);cursor:pointer;transition:.3s }
.hero__dots button[aria-current="true"] { background:var(--ember);width:26px;border-radius:6px }
@media (max-width:600px) { .hero__dots { bottom:20px } }

/* ---------- ticker ---------- */
.tick { border-block:1px solid var(--stroke);background:var(--bg-2);overflow:hidden;padding:20px 0 }
.tick__t { display:flex;gap:56px;white-space:nowrap;width:max-content;animation:sk-slide 34s linear infinite }
.tick:hover .tick__t { animation-play-state:paused }
@keyframes sk-slide { to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce) { .tick__t { animation:none } }
.tick span { font:700 15px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);display:flex;align-items:center;gap:56px }
.tick span::after { content:"";width:5px;height:5px;border-radius:50%;background:var(--ember);flex:none }
.tick .hot { color:var(--fg) }