/* ── The engine: Evan's whole operation as one live machine ─────────── */
.engine{--glass:rgba(255,255,255,.08);--glass-line:rgba(255,255,255,.16);
  /* motion constants: one entrance curve, one on-screen curve, one pop; one pulse period for the whole pipeline */
  --e-in:cubic-bezier(.05,.7,.1,1);--e-io:cubic-bezier(.45,0,.55,1);--e-pop:cubic-bezier(.34,1.56,.64,1);--pulse:2.4s;
  margin-top:56px;position:relative;overflow:hidden;color:#fff;border-radius:28px;padding:48px 40px 40px;
  background:
    radial-gradient(110% 70% at 0% 0%,rgba(31,139,171,.55) 0%,rgba(31,139,171,0) 60%),
    radial-gradient(80% 60% at 100% 100%,rgba(240,144,42,.22) 0%,rgba(240,144,42,0) 60%),
    var(--navy);
  box-shadow:var(--shadow-lg)}
.engine::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(circle,rgba(255,255,255,.09) 1px,transparent 1.4px) 0 0/22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
.eng-head{position:relative;max-width:860px}
.eng-kick{color:var(--sky-3);font-weight:650;font-size:15px;margin-bottom:12px}
.eng-head h3{font-size:clamp(34px,4.8vw,60px);letter-spacing:-.045em;line-height:1}
.eng-me{color:var(--orange);white-space:nowrap}
.eng-sub{color:rgba(255,255,255,.86);font-size:clamp(18px,1.7vw,22px);font-weight:550;line-height:1.55;margin-top:16px;max-width:62ch}

.eng-grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 48px;margin-top:40px;align-items:stretch}
.st-make{grid-column:1/-1}
.eng-wires{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.eng-wires .w-base{fill:none;stroke:rgba(143,208,226,.38);stroke-width:2;stroke-dasharray:2 6;stroke-linecap:round;transition:stroke .3s}
.eng-wires .w-pk{fill:none;stroke:var(--orange);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:16 var(--len);stroke-dashoffset:16;
  filter:drop-shadow(0 0 5px rgba(240,144,42,.9));animation:packet var(--pulse) infinite;animation-delay:var(--dl)}
.eng-wires .hl .w-base{stroke:rgba(240,144,42,.85)}
@keyframes packet{0%{stroke-dashoffset:16;animation-timing-function:var(--e-io)}33.3%,100%{stroke-dashoffset:calc(var(--len) * -1)}}

.stage{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:20px;
  background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .22s cubic-bezier(.2,0,0,1),border-color .2s,background .2s}
.stage:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.09)}
.st-top{display:flex;align-items:center;gap:10px}
.st-n{width:32px;height:32px;border-radius:50%;background:#fff;color:var(--navy);font-weight:750;font-size:15px;display:grid;place-items:center;flex:none}
.stage.hot .st-n{background:var(--orange);color:#10232e}
.stage h4{font-size:clamp(19px,1.7vw,22px);letter-spacing:-.025em;line-height:1.2}

/* 1 · the content tiles */
.makes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.mk{margin:0;display:flex;flex-direction:column;gap:7px}
.mk figcaption{font-size:15.5px;font-weight:650;color:#fff;line-height:1.25}
.mk-card{position:relative;aspect-ratio:4/5;border-radius:12px;background:#fff;overflow:hidden;color:var(--navy);
  box-shadow:0 10px 22px -12px rgba(0,0,0,.6);transition:transform .25s cubic-bezier(.2,0,0,1),box-shadow .25s}
.mk:hover .mk-card{transform:scale(1.04) rotate(-1deg);box-shadow:0 18px 30px -14px rgba(0,0,0,.7)}
.mk-badge{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;background:rgba(13,58,78,.82);color:#fff;
  font-size:10px;font-weight:700;padding:3px 7px;border-radius:99px;font-variant-numeric:tabular-nums}
.mk-card video,.car-track img{width:100%;height:100%;object-fit:cover;display:block}
.car-track{display:flex;height:100%;transition:transform .7s cubic-bezier(.65,0,.35,1)}
.car-track img{flex:0 0 100%}

.mk-post .mk-card{padding:8% 7%;display:flex;flex-direction:column;gap:8%}
.pm-head{display:flex;align-items:center;gap:6px}
.pm-head img{width:clamp(20px,2.4vw,34px);height:clamp(20px,2.4vw,34px);border-radius:50%;object-fit:cover;flex:none}
.pm-head span{display:flex;flex-direction:column;gap:3px;min-width:0}
.pm-head b{font-size:clamp(9px,1vw,13px);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-head i{display:block;width:60%;height:4px;border-radius:2px;background:#e3edf1}
.pm-lines{display:flex;flex-direction:column;gap:clamp(6px,.8vw,10px)}
.pm-lines i{display:block;height:clamp(5px,.6vw,8px);border-radius:3px;background:#cfdfe6;width:var(--w);transform-origin:0 50%}
.pm-react{margin-top:auto;display:flex}
.pm-react span{width:clamp(13px,1.4vw,20px);height:clamp(13px,1.4vw,20px);border-radius:50%;border:1.5px solid #fff;margin-right:-4px}
.pm-react .r1{background:#378fe9}.pm-react .r2{background:#44712e}.pm-react .r3{background:#df704d}

.mk-img .mk-card{display:flex;flex-direction:column}
.pf-banner{width:100%;height:auto;aspect-ratio:4/1;object-fit:cover;flex:none}
.pf-av{width:34%;aspect-ratio:1;border-radius:50%;object-fit:cover;border:2px solid #fff;margin:-17% 0 0 8px;position:relative}
.pf-lines{padding:8px 9px}

/* 2 · the two audiences */
.reach{position:relative;background:#fff;color:var(--navy);border-radius:14px;padding:12px 14px 13px;overflow:hidden}
.rc-head{display:flex;align-items:center;gap:7px;font-weight:700;font-size:14.5px;margin-bottom:8px}
.rc-head img,.rc-head svg{width:18px;height:18px;flex:none;color:var(--teal)}
.rc-big{font-size:clamp(24px,2.3vw,30px);font-weight:750;letter-spacing:-.045em;line-height:1}
.rc-l{color:var(--muted);font-size:14px;line-height:1.35;margin-top:4px}
.rc-l b{color:var(--navy)}
.spark{display:block;width:100%;height:44px;margin-top:8px}
.sp-area{fill:url(#sparkG)}
.sp-line{fill:none;stroke:var(--teal);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.rc-foot{font-size:12.5px;color:var(--muted);margin-top:4px}
.rc-foot b{color:var(--teal-ink);font-size:15px;font-weight:750}
.pops{position:absolute;right:12px;bottom:12px;width:24px;height:24px}
.pops span{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;color:#fff;
  animation:pop-up 1.8s cubic-bezier(.2,.7,.2,1) forwards}
.pops svg{width:13px;height:13px}
@keyframes pop-up{0%{transform:translate(0,0) scale(.3);opacity:0}15%{transform:translate(0,-8px) scale(1.1);opacity:1}100%{transform:translate(var(--x),-74px) scale(.85);opacity:0}}
.inbox{display:flex;flex-direction:column;gap:6px;height:102px;overflow:hidden;margin-bottom:10px;
  -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.mail{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:center;height:30px;padding:0 8px;border-radius:8px;
  background:var(--sky-0);border:1px solid var(--line);font-size:12px}
.mail .s{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail .o{font-weight:750;color:var(--teal-ink);font-size:11px;font-variant-numeric:tabular-nums}
.mail.new{animation:mail-in .45s var(--e-in)}
@keyframes mail-in{from{margin-top:-36px;opacity:0;transform:scale(.95)}}

/* 3 · inbound */
.dms{display:flex;flex-direction:column;gap:8px;flex:1;min-height:240px;max-height:300px;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.dm{flex:none;position:relative;display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:center;height:46px;padding:0 9px;
  background:#fff;border-radius:13px 13px 13px 4px;transition:opacity .4s}
.dm.new{animation:dm-in .4s cubic-bezier(.2,1.2,.4,1)}
@keyframes dm-in{from{margin-top:-54px;opacity:0;transform:translateX(-14px) scale(.9)}}
.dm .av{width:26px;height:26px;border-radius:50%;background:var(--c);color:#fff;font-size:10px;font-weight:750;display:grid;place-items:center}
.dm .b{display:flex;flex-direction:column;gap:6px;padding-right:62px}
.dm .b i{display:block;height:5px;border-radius:3px;background:#d8e5ea;width:var(--w)}
.dm .tag{position:absolute;right:8px;top:50%;margin-top:-10px;height:20px;display:grid;place-items:center;padding:0 7px;border-radius:99px;
  font-size:10.5px;font-weight:750;white-space:nowrap;transform:scale(0);transition:transform .25s var(--e-pop)}
.dm.lo .tag{background:var(--sky-1);color:var(--teal-ink)}
.dm.hi .tag{background:var(--orange);color:#10232e}
.dm.tagged .tag{transform:scale(1)}
.dm.lo.tagged{opacity:.6}
.dm-count{font-size:15.5px;line-height:1.45;color:rgba(255,255,255,.85)}
.dm-count b{display:block;font-size:clamp(30px,3vw,40px);font-weight:750;letter-spacing:-.045em;line-height:1;color:#fff;margin-bottom:4px}

/* 4 · qualify and book */
.lanes{display:flex;flex-direction:column;gap:8px}
.lane{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:12px;background:var(--glass);border:1px solid var(--glass-line);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.lane b{font-size:16px;letter-spacing:-.02em}
.lane span{font-size:13.5px;color:rgba(255,255,255,.75)}
.lane.hi{background:#fff;color:var(--navy);border-color:#fff}
.lane.hi span{color:var(--muted)}
.lane.ping{transform:scale(1.04)}
.lane.hi.ping{box-shadow:0 0 0 4px rgba(240,144,42,.45)}
.cal{background:#fff;color:var(--navy);border-radius:14px;padding:11px}
.cal-h{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:12.5px;margin-bottom:8px}
.cal-c{color:var(--orange-ink);font-variant-numeric:tabular-nums}
.cal-g{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.cal-g .d{font-size:10px;font-weight:650;color:var(--muted);text-align:center}
.cal-slot{height:20px;border-radius:6px;background:var(--sky-0);border:1px dashed var(--line);display:grid;place-items:center}
.cal-slot.booked{background:var(--orange);border:1px solid var(--orange);animation:book .5s cubic-bezier(.34,1.56,.64,1)}
.cal-slot.booked::after{content:"";width:9px;height:5px;border:solid #10232e;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
@keyframes book{from{transform:scale(.3)}}
.cal-f{font-size:15px;font-weight:600;color:rgba(255,255,255,.88);margin-top:auto}

/* entrance: chips pop, stages rise one after another, then the wires light up */
html.anim .engine .stage{opacity:0;translate:0 26px}
html.anim .engine.live .stage{animation:stage-in .6s var(--e-in) forwards;animation-delay:calc(.45s + var(--d) * .15s)}
@keyframes stage-in{to{opacity:1;translate:0 0}}
html.anim .engine .eng-wires{opacity:0;transition:opacity .5s 1.1s}
html.anim .engine.live .eng-wires{opacity:1}
html.anim .engine .sp-line{stroke-dasharray:1;stroke-dashoffset:1}
html.anim .engine.live .sp-line{transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1) 1.2s;stroke-dashoffset:0}
html.anim .engine.live .mk-post .pm-lines i{animation:type-line 5s cubic-bezier(.4,0,.2,1) infinite;animation-delay:calc(var(--i) * .4s)}
@keyframes type-line{0%{transform:scaleX(0)}14%,80%{transform:scaleX(1);opacity:1}92%,100%{transform:scaleX(1);opacity:0}}
html.anim .engine.live .pm-react span{animation:react-pop 5s cubic-bezier(.34,1.56,.64,1) infinite}
html.anim .engine.live .pm-react .r2{animation-delay:.12s}
html.anim .engine.live .pm-react .r3{animation-delay:.24s}
@keyframes react-pop{0%,40%{transform:scale(0)}48%,82%{transform:scale(1)}92%,100%{transform:scale(0)}}
html:not(.anim) .eng-wires .w-pk{display:none}

/* secondary layer: each stage glows as the pulse lands on it */
.stage::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 0 rgba(240,144,42,0)}
html.anim .engine.live .stage::after{animation:arrive var(--pulse) var(--e-in) infinite;animation-delay:calc(1.6s + var(--arr, 0s))}
@keyframes arrive{0%{box-shadow:0 0 0 0 rgba(240,144,42,.6),inset 0 0 0 1px rgba(240,144,42,.7)}30%,100%{box-shadow:0 0 0 10px rgba(240,144,42,0),inset 0 0 0 1px rgba(240,144,42,0)}}
.st-make{--arr:0s}.st-reach{--arr:.8s}.st-in{--arr:1.6s}.st-book{--arr:0s}

@media (max-width:1140px){
  .eng-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 40px}
  .makes{gap:14px}
}
@media (max-width:720px){
  .engine{padding:32px 18px 22px;border-radius:22px;margin-top:40px}
  .eng-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .makes{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .mk figcaption{font-size:12.5px}
  .dms{min-height:0;height:220px}
}