/* IrvineLeads — irvineleads.com
 *
 * Ported from the Claude Design prototype. The design is authored with inline
 * styles, and those are kept verbatim so the layout stays pixel-identical.
 * This sheet carries the three things inline styles cannot do:
 *   1. @keyframes
 *   2. :hover states (the prototype's `style-hover` attribute)
 *   3. media queries
 * Anything a hover rule needs to change lives here rather than inline, so the
 * cascade works without !important.
 */

*{ box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #E2D9B8;
  color: #5C5547;
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: #CD7A45; text-decoration: none; }
img { max-width: 100%; }

/* The route loop builds its reveals by positioning a full-size map render inside
   a small overflow:hidden window. Clamping those images to their box collapses
   every crop, so the rule above must not reach inside the stage. */
#route-loop img { max-width: none; }

/* ── Hero panel choreography ─────────────────────────────────────────────── */
@keyframes riseTop   { 0%,22%{transform:translateY(0)} 40%,90%{transform:translateY(-172px)} 97%,100%{transform:translateY(0)} }
@keyframes sinkOne   { 0%,22%{transform:translateY(0)} 40%,90%{transform:translateY(86px)} 97%,100%{transform:translateY(0)} }
@keyframes highlight { 0%,25%{background:#EFE9D6;border-color:#D3CAAC} 42%,90%{background:#FCF9EF;border-color:#CD7A45;box-shadow:0 10px 26px rgba(205,122,69,.22)} 97%,100%{background:#EFE9D6;border-color:#D3CAAC;box-shadow:none} }
@keyframes dimRow    { 0%,25%{opacity:.66} 42%,90%{opacity:1} 97%,100%{opacity:.66} }
@keyframes starFill  { 0%,30%{color:#C4BBA0;transform:scale(1)} 36%{transform:scale(1.4)} 44%,90%{color:#CD7A45;transform:scale(1)} 97%,100%{color:#C4BBA0} }
@keyframes swap20    { 0%,30%{transform:translateY(0)} 42%,90%{transform:translateY(-20px)} 97%,100%{transform:translateY(0)} }
@keyframes swap18    { 0%,30%{transform:translateY(0)} 42%,90%{transform:translateY(-18px)} 97%,100%{transform:translateY(0)} }
@keyframes deltaIn   { 0%,30%{opacity:0;transform:translateY(8px)} 46%,90%{opacity:1;transform:translateY(0)} 96%,100%{opacity:0;transform:translateY(8px)} }
@keyframes toastIn   { 0%,30%{opacity:0;transform:translateY(16px) scale(.96)} 40%,94%{opacity:1;transform:translateY(0) scale(1)} 99%,100%{opacity:0;transform:translateY(16px) scale(.96)} }
@keyframes barGrow   { 0%,28%{transform:scaleY(.12)} 48%,90%{transform:scaleY(1)} 97%,100%{transform:scaleY(.12)} }
@keyframes panMap    { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
/* The track holds three identical sets of pills and moves by exactly one set,
   so the loop restarts on a pixel-identical frame. padding-right equals the
   track's 14px gap, which makes each third exactly one set plus its gaps.
   Three sets (not two) keep the right edge filled on screens up to ~3170px. */
@keyframes marquee   { from{transform:translateX(0)} to{transform:translateX(calc(-100% / 3))} }
@keyframes floaty    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

.marquee { padding-right: 14px; }

/* ── Hero headline ───────────────────────────────────────────────────────── */
.hero-h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(33px, 3.5vw, 54px);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: #5C5547;
  margin: 0 0 22px;
  white-space: nowrap;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: Inter, sans-serif;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary { background: #CD7A45; color: #FCF9EF; }
.btn-primary:hover { background: #B06232; color: #FCF9EF; }
.btn-ghost { background: transparent; color: #5C5547; border: 1.5px solid rgba(92,85,71,.3); }
.btn-ghost:hover { border-color: #5C5547; color: #5C5547; }
.btn-dark { background: #5C5547; color: #F6F2E4; }
.btn-dark:hover { background: #463F34; color: #F6F2E4; }
.btn-glass { background: rgba(252,249,239,.16); color: #FCF9EF; border: 1.5px solid rgba(252,249,239,.4); }
.btn-glass:hover { background: rgba(252,249,239,.26); color: #FCF9EF; }

.link-accent { font-family: Inter, sans-serif; font-weight: 700; font-size: 15.5px; color: #CD7A45; }
.link-accent:hover { color: #B06232; }

.nav-link { font-size: 15px; font-weight: 600; color: #5C5547; transition: color .18s ease; }
.nav-link:hover { color: #CD7A45; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card { border: 1px solid #D3CAAC; transition: border-color .18s ease, transform .18s ease; }
.card-lift:hover { border-color: #CD7A45; transform: translateY(-3px); }
.card-hi:hover { border-color: #CD7A45; }

/* ── Problem → Solution flow ─────────────────────────────────────────────── */
/* Both sections share this grid so each Solution card sits exactly under the
   Problem card it fixes, and the arrows between them run straight down. */
.flow-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 900px) {
  .flow-grid { grid-template-columns: repeat(3, 1fr); }
}

.sol-card {
  background: rgba(226,217,184,.12);
  border: 1px solid rgba(226,217,184,.22);
  border-radius: 22px;
  padding: 34px 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color .18s ease;
}
.sol-card:hover { border-color: #CD7A45; }
.sol-num {
  width: 44px; height: 44px; flex: none;
  border-radius: 12px;
  background: #CD7A45; color: #FCF9EF;
  display: flex; align-items: center; justify-content: center;
  font-family: Inter, sans-serif; font-weight: 900; font-size: 16px;
}
.sol-title { font-family: Inter, sans-serif; font-weight: 800; font-size: 22px; line-height: 1.2; color: #F6F2E4; letter-spacing: -.015em; }
.sol-body { font-size: 16.5px; line-height: 1.55; color: #C9DDE2; margin: 0; text-wrap: pretty; }
.sol-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.sol-tag { background: rgba(226,217,184,.16); color: #F6F2E4; font-weight: 700; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; }

/* Mobile only: the cards stack, so each Problem card names its fix instead. */
.fix-line { font-family: Inter, sans-serif; font-weight: 700; font-size: 14px; color: #53737C; margin: 14px 0 0; }
@media (min-width: 900px) { .fix-line { display: none; } }

#flow-arrows { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; overflow: visible; }

/* ── Footer links ────────────────────────────────────────────────────────── */
.f-link { font-size: 15px; font-weight: 500; color: #DCD6C8; transition: color .18s ease; }
.f-link:hover { color: #FCF9EF; }
.f-legal { font-size: 13.5px; font-weight: 600; color: #E2D9B8; text-decoration: underline; white-space: nowrap; transition: color .18s ease; }
.f-legal:hover { color: #FCF9EF; }

/* ── Focus visibility ────────────────────────────────────────────────────── */
a:focus-visible {
  outline: 2px solid #CD7A45;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

.wordmark { white-space: nowrap; }

/* The nav is a single-page anchor list that the footer repeats in full, so on
   narrow screens it collapses to the mark plus the booking CTA. */
@media (max-width: 820px) {
  .nav-link { display: none; }
}

@media (max-width: 700px) {
  /* The hero panel is composed against a fixed 620px width. Below that the
     notification lane has nowhere to go, so the rows reclaim it and the two
     decorative toasts (which only restate the panel) step out. */
  .panel-head { padding-right: 22px !important; }
  .panel-rows { padding-left: 16px !important; padding-right: 16px !important; }
  .hero-toast { display: none !important; }
}

/* Keep the header on one line: mark, wordmark and the booking CTA. */
@media (max-width: 520px) {
  .header-inner { gap: 12px !important; }
  .wordmark { font-size: 20px !important; }
  .header-mark { width: 38px !important; height: 35px !important; }
  .btn-header { font-size: 13.5px !important; padding: 10px 16px !important; }
}
@media (max-width: 380px) {
  .wordmark { font-size: 18px !important; }
  .header-mark { width: 32px !important; height: 30px !important; }
  .btn-header { font-size: 12.5px !important; padding: 9px 13px !important; }
}

@media (max-width: 620px) {
  .sec-pad { padding-left: 20px !important; padding-right: 20px !important; }
  .cta-box { padding: 52px 24px !important; }
}

/* Below ~430px the listing rows run out of room for the rank column, because
   the rating line cannot wrap (it rides a fixed-height swap animation). Tighten
   the gutters and step the type down so the rank stays on screen. */
@media (max-width: 430px) {
  .panel-rows { padding-left: 10px !important; padding-right: 10px !important; }
  .panel-row { padding-left: 10px !important; padding-right: 10px !important; gap: 10px !important; }
  .panel-row > div:first-child { width: 36px !important; height: 36px !important; font-size: 14px !important; }
  .panel-row div, .panel-row span { font-size: 11.5px !important; }
  .panel-row .panel-name { font-size: 13px !important; }
}

@media (max-width: 560px) {
  .hero-h1 { font-size: clamp(23px, 7.9vw, 33px); }
  .hero-sub { font-size: 17px !important; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
/* Everything animated here is decorative and loops forever. Honour the request
   and hold each piece at its resting state. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .map-backdrop { animation: none !important; }
  .marquee { animation: none !important; }
}