/*
 * Homepage hero. Loaded only on index.html; every rule is scoped under .rc-hero.
 * Matches the home-hero design export (hero.html).
 */
.rc-hero {
  --ink: #0B0F19; --blue: #2563EB; --blue-press: #1D4ED8; --bone: #F4F2ED; --label: #3F4652;
  --f-sans: 'Geist', 'Helvetica Neue', Arial, sans-serif; --f-mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --t-hero: clamp(52px, 9.6vw, 164px); --t-lead: clamp(19px, 1.5vw, 24px);
  --gutter: clamp(20px, 4.5vw, 72px); --max: 1440px; --ease: cubic-bezier(0.2, 0.7, 0, 1);
  position: relative; overflow: hidden; color: var(--ink); background: var(--bone);
  font-family: var(--f-sans); -webkit-font-smoothing: antialiased;
}
.rc-hero * { box-sizing: border-box; }
.rc-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 60%; }
.rc-hero__wash-v { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .15) 45%, rgba(244, 242, 237, .82) 100%); }
.rc-hero__wash-h { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 70%); }
.rc-hero__inner { position: relative; max-width: var(--max); margin: 0 auto; padding: clamp(56px, 8vw, 128px) var(--gutter) clamp(72px, 8vw, 120px); display: flex; flex-direction: column; gap: clamp(48px, 6vw, 96px); }
.rc-hero__eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--label); }
.rc-hero__title { margin: 0; font-weight: 400; font-size: var(--t-hero); line-height: .94; letter-spacing: -.045em; display: flex; flex-direction: column; gap: .04em; }
.rc-hero__line { display: flex; align-items: center; gap: .2em; animation: rc-hero-rise 600ms var(--ease) both; }
.rc-hero__line--2 { padding-left: .9em; animation-delay: 80ms; }
.rc-hero__line--3 { animation-delay: 160ms; }
.rc-hero__arrow { width: 2.2em; height: .5em; flex-shrink: 0; }
.rc-hero__accent { color: var(--blue); }
.rc-hero__foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px; align-items: end; border-top: 1px solid var(--ink); padding-top: 32px; }
.rc-hero__lead { margin: 0; font-size: var(--t-lead); line-height: 1.4; max-width: 620px; text-wrap: pretty; font-weight: 450; }
.rc-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; justify-content: flex-end; }
.rc-hero__btn { display: inline-flex; align-items: center; gap: 14px; padding: 18px 30px; border-radius: 999px; background: var(--blue); color: #fff; box-shadow: 0 8px 24px rgba(11, 15, 25, .18); font-size: 17px; font-weight: 500; text-decoration: none; transition: background 160ms; }
.rc-hero__btn:hover { background: var(--blue-press); color: #fff; }
.rc-hero__link { color: var(--ink); font-size: 17px; border-bottom: 1px solid var(--ink); padding-bottom: 3px; text-decoration: none; transition: color 160ms, border-color 160ms; }
.rc-hero__link:hover { color: var(--blue); border-color: var(--blue); }
.rc-hero a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: none; }
/* Own keyframes name so the site-wide rc-rise is untouched. */
@keyframes rc-hero-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
/* Scroll cue: a small mouse outline centred in the gap between the headline and the rule,
   with a dot gliding down inside it. */
.rc-hero__foot { position: relative; }
.rc-hero__scroll { position: absolute; left: 50%; bottom: calc(100% + clamp(48px, 6vw, 96px) / 2); transform: translate(-50%, 50%); display: flex; padding: 6px; color: var(--ink); text-decoration: none; }
.rc-hero__mouse { position: relative; display: block; width: 20px; height: 32px; border: 1.5px solid currentColor; border-radius: 10px; opacity: .7; transition: opacity 160ms, color 160ms; }
.rc-hero__wheel { position: absolute; left: 50%; top: 6px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: rc-hero-wheel 1.8s var(--ease) infinite; }
.rc-hero__scroll:hover { color: var(--blue); }
.rc-hero__scroll:hover .rc-hero__mouse { opacity: 1; }
@keyframes rc-hero-wheel {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  70% { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(10px); opacity: 0; }
}
@media (max-width: 899px) { .rc-hero__mouse { width: 18px; height: 28px; } .rc-hero__wheel { top: 5px; } }
/* Slow, subtle drift on the photo (Ken Burns): scale and pan a little, back and forth. */
.rc-hero__img { animation: rc-hero-drift 24s ease-in-out infinite alternate; will-change: transform; }
@keyframes rc-hero-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.1) translate3d(-1.5%, -1%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .rc-hero__line, .rc-hero__img { animation: none; }
  .rc-hero__wheel { animation: none; opacity: 1; }
}
@media (max-width: 640px) { .rc-hero__ctas { justify-content: flex-start; } }
/* Narrow phones: at the 52px minimum, "→ compound." is wider than the screen.
   Shorten the arrow and cap the size so the line fits (the section clips overflow). */
@media (max-width: 599px) {
  .rc-hero__title { font-size: min(var(--t-hero), 14vw); }
  .rc-hero__arrow { width: 1.2em; }
}