.border-gradient {
position: relative;
}
.border-gradient::before {
content: "";
position: absolute;
inset: 0;
border-radius: 8px;
padding: 1px;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
background: linear-gradient(225deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0.05) 100%);
pointer-events: none;
}
@keyframes grid-move {
0% {
background-position: 0 0;
}
100% {
background-position: 40px 40px;
}
}
.animate-grid-drift {
animation: grid-move 20s linear infinite;
will-change: background-position;
}
@keyframes blink-cursor {
from,
to {
border-color: transparent
}
50% {
border-color: #D02B2D;
}
}
.typewriter-cursor {
border-right: 3px solid #D02B2D;
animation: blink-cursor 0.75s step-end infinite;
white-space: nowrap;
overflow: hidden;
display: inline-block;
vertical-align: bottom;
line-height: 1.1;
}
.mask-linear-fade {
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
iframe {
width: 100%;
border: none;
}
#book-call {
scroll-margin-top: 140px;
}
.pricing-card:hover {
border-color: #B11217;
box-shadow: 0 0 40px -10px rgba(177, 18, 23, 0.15);
}
.pricing-card:hover .pricing-btn {
background-color: #D02B2D;
box-shadow: 0 0 20px -5px rgba(208, 43, 45, 0.4);
}
.pricing-bullet iconify-icon {
color: #71717a;
transition: color 0.3s;
}
.pricing-card:hover .pricing-bullet iconify-icon {
color: #D02B2D;
}
@keyframes pillarMarquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.pillar-marquee-track {
display: flex;
width: max-content;
animation: pillarMarquee 40s linear infinite;
will-change: transform;
cursor: grab;
}
.pillar-marquee-track:active {
cursor: grabbing;
}
.pillar-marquee-track.paused {
animation-play-state: paused;
}
.pillar-marquee-wrapper {
overflow: hidden;
mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.pillar-card {
transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.pillar-card:hover {
border-color: rgba(177, 18, 23, 0.5);
box-shadow: 0 0 30px -10px rgba(208, 43, 45, 0.25);
transform: translateY(-4px);
}
.pillar-card:hover .pillar-card-icon {
color: #D02B2D;
}
.pillar-card:hover .pillar-card-learn {
color: #D02B2D;
}
@media (max-width: 767px) {
.pillar-marquee-track {
animation: none !important;
flex-wrap: wrap;
width: 100%;
cursor: default;
}
.pillar-marquee-track:active {
cursor: default;
}
.pillar-marquee-wrapper {
mask-image: none;
-webkit-mask-image: none;
overflow: visible;
}
.pillar-duplicate {
display: none !important;
}
}
.vis-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.3s ease;
}
.vis-card:hover {
background: rgba(208, 43, 45, 0.1);
border-color: rgba(208, 43, 45, 0.4);
transform: scale(1.05);
box-shadow: 0 0 20px rgba(208, 43, 45, 0.2);
}
.active-point {
position: relative;
padding-left: 20px;
}
.active-point::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 6px;
height: 6px;
background: #D02B2D;
border-radius: 50%;
box-shadow: 0 0 10px #D02B2D;
}
/* IMAGE SOFTENING SYSTEM */
.image-stage-soft {
position: relative;
isolation: isolate;
overflow: hidden;
}
.image-stage-soft::before {
content: "";
position: absolute;
inset: -8%;
background: radial-gradient(circle at center, rgba(208, 43, 45, 0.16) 0%, rgba(208, 43, 45, 0.08) 28%, transparent 70%);
filter: blur(90px);
z-index: 0;
pointer-events: none;
}
.image-stage-soft::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(to top, rgba(10, 10, 10, 0.78), transparent 32%),
linear-gradient(to bottom, rgba(10, 10, 10, 0.32), transparent 22%),
linear-gradient(to right, rgba(10, 10, 10, 0.28), transparent 20%),
linear-gradient(to left, rgba(10, 10, 10, 0.18), transparent 18%);
z-index: 2;
pointer-events: none;
}
.image-soft-mask {
border-radius: 24px;
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
mask-image: radial-gradient(circle at center, black 62%, rgba(0, 0, 0, 0.92) 74%, transparent 100%);
-webkit-mask-image: radial-gradient(circle at center, black 62%, rgba(0, 0, 0, 0.92) 74%, transparent 100%);
}
.image-soft-mask-vertical {
border-radius: 24px;
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
mask-image: linear-gradient(180deg, transparent 0%, black 14%, black 84%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, black 14%, black 84%, transparent 100%);
}
.image-soft-mask-diagonal {
border-radius: 24px;
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
mask-image: linear-gradient(140deg, transparent 0%, black 12%, black 88%, transparent 100%);
-webkit-mask-image: linear-gradient(140deg, transparent 0%, black 12%, black 88%, transparent 100%);
}
.image-noise-overlay {
position: absolute;
inset: 0;
/* Inlined. This used to be a live request to grainy-gradients.vercel.app —
   a third-party single point of failure on a site that self-hosts everything
   else. Same fractal-noise filter, zero network requests. */
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.08;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 3;
}
@media (min-width: 1024px) {
.search-scenario-card {
opacity: 0;
will-change: transform, opacity;
transition:
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.search-card-left {
transform: translateX(-80px);
}
.search-card-center {
transform: translateY(80px);
}
.search-card-right {
transform: translateX(80px);
}
.search-scenario-card.is-visible {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.search-card-left.is-visible {
transition-delay: 0ms;
}
.search-card-center.is-visible {
transition-delay: 120ms;
}
.search-card-right.is-visible {
transition-delay: 240ms;
}
}

/* ── SPEED-TO-LEAD DEMO ──────────────────────────────────────────────────────
   Two device frames with animated screens: a form being filled and submitted on
   the laptop, then the reply text arriving on the phone. Frames are drawn in CSS
   for now and are designed to be swapped for real device photos — see
   .sd-laptop / .sd-phone, where a background-image and a positioned .sd-screen
   are all that is needed.                                                     */
.sd-stage { position: relative; }

/* Laptop */
.sd-laptop { position: relative; width: 100%; max-width: 560px; }
.sd-laptop-lid {
  position: relative; border-radius: 12px 12px 4px 4px; padding: 12px 12px 14px;
  background: linear-gradient(160deg,#2a2a2e,#141417);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08);
}
.sd-laptop-base {
  height: 14px; border-radius: 0 0 14px 14px; margin: 0 auto; width: 112%;
  transform: translateX(-5.3%);
  background: linear-gradient(180deg,#242428,#0e0e10);
  box-shadow: 0 14px 22px -10px rgba(0,0,0,.9);
}
.sd-laptop-base::after {
  content: ''; display: block; width: 14%; height: 4px; margin: 0 auto;
  border-radius: 0 0 6px 6px; background: rgba(255,255,255,.10);
}
/* Phone */
.sd-phone {
  position: relative; width: 210px; border-radius: 30px; padding: 10px;
  background: linear-gradient(160deg,#2a2a2e,#141417);
  box-shadow: 0 30px 60px -18px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08);
}
.sd-phone::before {
  content: ''; position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 58px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.14); z-index: 3;
}
/* The screen. This is the element that sits over a real device photo later. */
.sd-screen {
  position: relative; overflow: hidden; background: #0d0f13;
  border: 1px solid rgba(255,255,255,.06);
}
.sd-laptop .sd-screen { aspect-ratio: 16/10; border-radius: 4px; }
.sd-phone  .sd-screen { aspect-ratio: 9/19; border-radius: 22px; }

/* Browser chrome */
.sd-bar { display:flex; align-items:center; gap:5px; padding:7px 9px; background:#15181e; border-bottom:1px solid rgba(255,255,255,.06); }
.sd-dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.16); }
.sd-url { margin-left:6px; font:400 8px/1 'JetBrains Mono',monospace; color:rgba(255,255,255,.35); letter-spacing:.04em; }

/* Form */
.sd-form { padding: 14px 16px; }
.sd-form-title { font:500 11px/1.2 'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.04em; color:#fff; margin-bottom:10px; }
.sd-field { margin-bottom: 8px; }
.sd-label { font:400 7px/1 'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.4); margin-bottom:3px; display:block; }
.sd-input {
  height: 22px; border-radius: 4px; border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03); padding: 0 7px; display:flex; align-items:center;
  font:400 9px/1 'Inter',sans-serif; color:#fff; transition: border-color .2s, background .2s;
}
.sd-input.is-active { border-color:#D02B2D; background:rgba(208,43,45,.06); }
.sd-caret { display:inline-block; width:1px; height:10px; background:#D02B2D; margin-left:1px; opacity:0; }
.sd-input.is-active .sd-caret { animation: sd-blink .9s steps(1) infinite; }
@keyframes sd-blink { 0%,50%{opacity:1} 51%,100%{opacity:0} }

.sd-submit {
  margin-top: 10px; height: 24px; border-radius: 4px; background:#B11217; color:#fff;
  display:flex; align-items:center; justify-content:center; gap:5px;
  font:700 8px/1 'Inter',sans-serif; text-transform:uppercase; letter-spacing:.12em;
  transition: transform .12s, background .2s;
}
.sd-submit.is-press { transform: scale(.96); background:#8f0e12; }
.sd-spinner { width:9px; height:9px; border:1.5px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation: sd-spin .6s linear infinite; }
@keyframes sd-spin { to { transform: rotate(360deg) } }

/* Sent state */
.sd-sent { position:absolute; inset:29px 0 0; background:#0d0f13; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; opacity:0; pointer-events:none; transition:opacity .35s; }
.sd-sent.is-on { opacity:1; }
.sd-check { width:34px; height:34px; border-radius:50%; background:rgba(208,43,45,.12); border:1px solid rgba(208,43,45,.4); color:#D02B2D; display:flex; align-items:center; justify-content:center; font-size:18px; }

/* Cursor */
.sd-cursor {
  position:absolute; z-index:5; width:13px; height:13px; pointer-events:none;
  transition: transform .55s cubic-bezier(.4,0,.2,1); opacity:0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.sd-cursor.is-on { opacity:1; }

/* Phone messages */
.sd-msg-head { display:flex; align-items:center; gap:6px; padding:16px 10px 8px; border-bottom:1px solid rgba(255,255,255,.06); }
.sd-avatar { width:20px; height:20px; border-radius:50%; background:linear-gradient(140deg,#D02B2D,#8f0e12); display:flex; align-items:center; justify-content:center; font:700 8px/1 'Inter',sans-serif; color:#fff; }
.sd-msg-name { font:600 9px/1.2 'Inter',sans-serif; color:#fff; }
.sd-msg-sub { font:400 7px/1 'JetBrains Mono',monospace; color:rgba(255,255,255,.35); }
.sd-msgs { padding:10px 8px; display:flex; flex-direction:column; gap:6px; }
.sd-bubble {
  max-width:88%; padding:7px 9px; border-radius:12px 12px 12px 3px;
  background:#1c2028; color:#fff; font:400 8.5px/1.45 'Inter',sans-serif;
  opacity:0; transform: translateY(8px) scale(.97); transition: opacity .3s, transform .3s;
}
.sd-bubble.is-on { opacity:1; transform:none; }
.sd-bubble-link { color:#ff6b6d; text-decoration:underline; }
.sd-typing { display:flex; gap:3px; align-items:center; padding:8px 10px; background:#1c2028; border-radius:12px 12px 12px 3px; width:fit-content; opacity:0; transition:opacity .25s; }
.sd-typing.is-on { opacity:1; }
.sd-typing span { width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.5); animation: sd-bounce 1.1s infinite; }
.sd-typing span:nth-child(2){ animation-delay:.15s } .sd-typing span:nth-child(3){ animation-delay:.3s }
@keyframes sd-bounce { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-3px);opacity:1} }

.sd-cta { margin-top:2px; padding:6px 8px; border-radius:8px; background:rgba(208,43,45,.12); border:1px solid rgba(208,43,45,.35); font:600 8px/1 'Inter',sans-serif; color:#fff; text-align:center; opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s; }
.sd-cta.is-on { opacity:1; transform:none; }

/* Anyone who asks for less motion gets the finished state, not a loop. */
@media (prefers-reduced-motion: reduce) {
  .sd-caret, .sd-spinner, .sd-typing span { animation: none !important; }
  .sd-cursor { display: none; }
}

/* The stage now lives inside a feature row, which is narrower than the section
   it started in. Reserve room for the phone that overhangs the laptop's
   bottom-right so it never collides with the row below. */
.sd-stage { padding-bottom: 2.5rem; }
@media (min-width: 1024px) { .sd-phone { width: 190px; } }

/* ── MISSED-CALL DEMO ────────────────────────────────────────────────────────
   One phone, three screens: an incoming call, the missed-call notice, then the
   thread where the automatic text goes out and the homeowner writes back. Shown
   from the contractor's own phone — the point is that it handles itself.      */
.cs-phone { width: 250px; margin: 0 auto; }
.cs-phone .sd-screen { aspect-ratio: 9/19; border-radius: 22px; }

.cs-view { position:absolute; inset:0; opacity:0; transition:opacity .45s; pointer-events:none; }
.cs-view.is-on { opacity:1; }

/* Incoming call */
.cs-call { display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:34px 14px 26px;
           background:linear-gradient(180deg,#141821,#0b0d12); }
.cs-call-who { text-align:center; }
.cs-call-label { font:400 8px/1 'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.18em; color:rgba(255,255,255,.45); margin-bottom:10px; }
.cs-call-name { font:600 15px/1.2 'Inter',sans-serif; color:#fff; margin-bottom:3px; }
.cs-call-num { font:400 9px/1 'JetBrains Mono',monospace; color:rgba(255,255,255,.5); }
.cs-ring { position:relative; width:64px; height:64px; border-radius:50%; margin:18px auto 0;
           background:linear-gradient(140deg,#3a3f4b,#20242d); display:flex; align-items:center; justify-content:center;
           color:rgba(255,255,255,.8); font-size:26px; }
.cs-ring::before, .cs-ring::after {
  content:''; position:absolute; inset:-8px; border-radius:50%; border:1px solid rgba(208,43,45,.5); opacity:0;
}
.is-on .cs-ring::before { animation: cs-pulse 1.8s ease-out infinite; }
.is-on .cs-ring::after  { animation: cs-pulse 1.8s ease-out .9s infinite; }
@keyframes cs-pulse { 0%{transform:scale(.85);opacity:.8} 100%{transform:scale(1.5);opacity:0} }

.cs-actions { display:flex; gap:34px; }
.cs-btn { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px; color:#fff; }
.cs-btn--no  { background:#c0342f; }
.cs-btn--yes { background:#2a9d52; }
.is-on .cs-btn--yes { animation: cs-shake 1.6s ease-in-out infinite; }
@keyframes cs-shake { 0%,88%,100%{transform:none} 92%{transform:translateY(-2px)} 96%{transform:translateY(1px)} }

/* Missed-call notice */
.cs-missed { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:#0b0d12; padding:0 18px; }
.cs-missed-icon { width:46px; height:46px; border-radius:50%; background:rgba(192,52,47,.14); border:1px solid rgba(192,52,47,.45); color:#e0564f; display:flex; align-items:center; justify-content:center; font-size:22px; }
.cs-missed-title { font:600 12px/1.2 'Inter',sans-serif; color:#fff; }
.cs-missed-sub { font:400 8px/1 'JetBrains Mono',monospace; color:rgba(255,255,255,.45); text-transform:uppercase; letter-spacing:.14em; }

/* Thread */
.cs-thread { background:#0d0f13; display:flex; flex-direction:column; }
.cs-msgs { padding:8px; display:flex; flex-direction:column; gap:7px; }
.cs-b { max-width:86%; padding:7px 9px; font:400 8.5px/1.45 'Inter',sans-serif; color:#fff;
        opacity:0; transform:translateY(8px) scale(.97); transition:opacity .3s, transform .3s; }
.cs-b.is-on { opacity:1; transform:none; }
.cs-b--out { align-self:flex-end; background:#B11217; border-radius:12px 12px 3px 12px; }
.cs-b--in  { align-self:flex-start; background:#1c2028; border-radius:12px 12px 12px 3px; }
.cs-auto { align-self:flex-end; font:400 6.5px/1 'JetBrains Mono',monospace; letter-spacing:.12em; text-transform:uppercase;
           color:rgba(255,255,255,.4); opacity:0; transition:opacity .3s; margin-top:-3px; }
.cs-auto.is-on { opacity:1; }
.cs-typing { align-self:flex-start; display:flex; gap:3px; padding:8px 10px; background:#1c2028; border-radius:12px 12px 12px 3px;
             opacity:0; transition:opacity .25s; }
.cs-typing.is-on { opacity:1; }
.cs-typing span { width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.5); animation: sd-bounce 1.1s infinite; }
.cs-typing span:nth-child(2){ animation-delay:.15s } .cs-typing span:nth-child(3){ animation-delay:.3s }

@media (prefers-reduced-motion: reduce) {
  .cs-ring::before, .cs-ring::after, .cs-btn--yes, .cs-typing span { animation: none !important; }
}

/* ── REVIEW FUNNEL DEMO ──────────────────────────────────────────────────────
   Dramatises the row beside it: the ask goes out, nothing happens, it asks
   again over weeks, then the customer rates — and the rating decides where it
   goes. Five stars to Google; anything less comes to you privately instead.
   The loop alternates between those two outcomes so the guard is visible.    */
.rv-phone { width: 250px; margin: 0 auto; }
.rv-phone .sd-screen { aspect-ratio: 9/19.5; border-radius: 22px; display:flex; flex-direction:column; }

.rv-msgs { padding:8px; display:flex; flex-direction:column; gap:6px; flex:1; }
.rv-day { display:flex; align-items:center; gap:6px; opacity:0; transition:opacity .35s; margin:3px 0 1px; }
.rv-day.is-on { opacity:1; }
.rv-day span { font:400 6.5px/1 'JetBrains Mono',monospace; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.35); white-space:nowrap; }
.rv-day i { flex:1; height:1px; background:rgba(255,255,255,.08); }

.rv-b { max-width:88%; align-self:flex-end; padding:7px 9px; border-radius:12px 12px 3px 12px;
        background:#B11217; color:#fff; font:400 8.5px/1.45 'Inter',sans-serif;
        opacity:0; transform:translateY(8px) scale(.97); transition:opacity .3s, transform .3s; }
.rv-b.is-on { opacity:1; transform:none; }
.rv-quiet { align-self:center; font:400 6.5px/1 'JetBrains Mono',monospace; letter-spacing:.14em;
            text-transform:uppercase; color:rgba(255,255,255,.28); opacity:0; transition:opacity .3s; }
.rv-quiet.is-on { opacity:1; }

/* The rating widget the customer taps */
.rv-rate { margin-top:auto; border-top:1px solid rgba(255,255,255,.07); padding:10px 9px 12px; background:#0b0d12;
           opacity:0; transform:translateY(10px); transition:opacity .35s, transform .35s; }
.rv-rate.is-on { opacity:1; transform:none; }
.rv-rate-q { font:500 8px/1.3 'Inter',sans-serif; color:rgba(255,255,255,.75); text-align:center; margin-bottom:7px; }
.rv-stars { display:flex; justify-content:center; gap:5px; }
.rv-star { font-size:17px; color:rgba(255,255,255,.16); transition:color .18s, transform .18s; }
.rv-star.is-lit { color:#f5b301; transform:scale(1.14); }

/* Where it ends up */
.rv-route { margin-top:10px; border-radius:9px; padding:8px 9px; opacity:0; transform:translateY(8px);
            transition:opacity .35s, transform .35s; }
.rv-route.is-on { opacity:1; transform:none; }
.rv-route--public  { background:rgba(37,110,58,.14); border:1px solid rgba(69,170,100,.4); }
.rv-route--private { background:rgba(208,43,45,.12); border:1px solid rgba(208,43,45,.4); }
.rv-route-head { display:flex; align-items:center; gap:5px; font:600 8px/1 'Inter',sans-serif; color:#fff; margin-bottom:4px; }
.rv-route-sub { font:400 7.5px/1.4 'Inter',sans-serif; color:rgba(255,255,255,.6); }

/* The rating meter that ticks up beside the phone */
.rv-meter { margin-top:14px; background:#101010; border:1px solid rgba(255,255,255,.10); border-radius:12px; padding:12px 14px; width:250px; margin-left:auto; margin-right:auto; }
.rv-meter-label { font:400 7px/1 'JetBrains Mono',monospace; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:6px; }
.rv-meter-row { display:flex; align-items:baseline; gap:7px; }
.rv-score { font:500 24px/1 'Oswald',sans-serif; color:#fff; font-variant-numeric:tabular-nums; }
.rv-score.is-bump { animation: rv-bump .5s ease; }
@keyframes rv-bump { 0%{transform:none} 35%{transform:translateY(-3px) scale(1.06); color:#f5b301} 100%{transform:none} }
.rv-count { font:400 8px/1 'Inter',sans-serif; color:rgba(255,255,255,.45); }
.rv-bar { height:4px; border-radius:2px; background:rgba(255,255,255,.08); margin-top:8px; overflow:hidden; }
.rv-bar i { display:block; height:100%; width:88%; background:linear-gradient(90deg,#B11217,#f5b301); transition:width .7s ease; }

@media (prefers-reduced-motion: reduce) { .rv-score.is-bump { animation:none } }

/* ── NURTURE SEQUENCE DEMO ───────────────────────────────────────────────────
   Deliberately not another phone. This is the automation itself, seen the way
   the contractor sees it: a sequence firing over a fortnight after a proposal
   goes out, then shutting itself off the moment the customer signs.          */
.nu-card { width:100%; max-width:430px; margin:0 auto; background:#101010; border:1px solid rgba(255,255,255,.10);
           border-radius:16px; overflow:hidden; box-shadow:0 30px 60px -28px rgba(0,0,0,.85); }
.nu-head { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.07); background:#0B0B0B; }
.nu-live { width:7px; height:7px; border-radius:50%; background:#45aa64; box-shadow:0 0 0 0 rgba(69,170,100,.5); animation: nu-live 2s infinite; }
@keyframes nu-live { 0%{box-shadow:0 0 0 0 rgba(69,170,100,.5)} 70%{box-shadow:0 0 0 7px rgba(69,170,100,0)} 100%{box-shadow:0 0 0 0 rgba(69,170,100,0)} }
.nu-head-t { font:600 12px/1.2 'Inter',sans-serif; color:#fff; }
.nu-head-s { font:400 8px/1 'JetBrains Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-top:3px; }
.nu-badge { margin-left:auto; font:600 7.5px/1 'JetBrains Mono',monospace; letter-spacing:.14em; text-transform:uppercase;
            padding:5px 8px; border-radius:20px; border:1px solid rgba(69,170,100,.4); background:rgba(69,170,100,.12); color:#7ed39a; transition:all .4s; }
.nu-badge.is-stopped { border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:rgba(255,255,255,.55); }

.nu-steps { padding:6px 16px 10px; position:relative; }
.nu-step { display:flex; gap:12px; padding:9px 0; position:relative; opacity:.28; transition:opacity .4s; }
.nu-step.is-on { opacity:1; }
.nu-step.is-skipped { opacity:.22; }
.nu-step.is-skipped .nu-msg { text-decoration:line-through; }
.nu-rail { position:relative; display:flex; flex-direction:column; align-items:center; width:16px; flex-shrink:0; }
.nu-dot { width:9px; height:9px; border-radius:50%; border:1.5px solid rgba(255,255,255,.22); background:#101010; margin-top:3px; transition:all .35s; }
.nu-step.is-on .nu-dot { border-color:#D02B2D; background:#D02B2D; }
.nu-step.is-pending .nu-dot { border-color:#f5b301; background:transparent; animation: nu-blink 1.2s infinite; }
@keyframes nu-blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.nu-line { flex:1; width:1px; background:rgba(255,255,255,.10); margin-top:3px; }
.nu-step:last-child .nu-line { display:none; }

.nu-body { flex:1; min-width:0; }
.nu-when { font:400 7px/1 'JetBrains Mono',monospace; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:4px; display:flex; align-items:center; gap:6px; }
.nu-chan { display:inline-flex; align-items:center; gap:3px; color:rgba(255,255,255,.55); }
.nu-msg { font:400 9.5px/1.45 'Inter',sans-serif; color:rgba(255,255,255,.85); }
.nu-tick { margin-left:auto; color:#45aa64; font-size:11px; opacity:0; transition:opacity .3s; }
.nu-step.is-on .nu-tick { opacity:1; }
.nu-step.is-pending .nu-tick, .nu-step.is-skipped .nu-tick { opacity:0; }

.nu-out { border-top:1px solid rgba(255,255,255,.07); padding:13px 16px; background:#0B0B0B;
          opacity:0; transform:translateY(8px); transition:opacity .4s, transform .4s; }
.nu-out.is-on { opacity:1; transform:none; }
.nu-out-row { display:flex; align-items:center; gap:9px; }
.nu-out-icon { width:28px; height:28px; border-radius:50%; background:rgba(69,170,100,.14); border:1px solid rgba(69,170,100,.45);
               color:#7ed39a; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.nu-out-t { font:600 10px/1.2 'Inter',sans-serif; color:#fff; }
.nu-out-s { font:400 8px/1.3 'Inter',sans-serif; color:rgba(255,255,255,.55); margin-top:2px; }

.nu-foot { padding:10px 16px; border-top:1px solid rgba(255,255,255,.07); display:flex; justify-content:space-between; gap:10px; }
.nu-stat-n { font:500 15px/1 'Oswald',sans-serif; color:#fff; }
.nu-stat-l { font:400 6.5px/1 'JetBrains Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.38); margin-top:4px; }

@media (prefers-reduced-motion: reduce) { .nu-live, .nu-step.is-pending .nu-dot { animation:none !important } }

/* ── LOCAL SEO DEMO ──────────────────────────────────────────────────────────
   A laptop on a search results page, with the contractor's listing climbing the
   ranks month by month. The month captions are the honest part: the row beside
   this says nobody ranks first in a week, so the animation has to move at a
   believable pace and say what actually changed each month.                   */
.seo-laptop { width:100%; max-width:520px; margin:0 auto; }
.seo-serp { background:#0f1116; height:100%; display:flex; flex-direction:column; }
.seo-bar { display:flex; align-items:center; gap:7px; padding:9px 11px; border-bottom:1px solid rgba(255,255,255,.07); }
.seo-logo { font:600 11px/1 'Inter',sans-serif; color:rgba(255,255,255,.75); letter-spacing:-.02em; }
.seo-q { flex:1; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); border-radius:20px;
         padding:5px 10px; font:400 8.5px/1 'Inter',sans-serif; color:rgba(255,255,255,.8); display:flex; align-items:center; gap:6px; }
.seo-q iconify-icon { color:rgba(255,255,255,.4); font-size:10px; }

.seo-list { padding:8px 11px; position:relative; flex:1; }
.seo-row { display:flex; align-items:center; gap:9px; padding:6px 7px; border-radius:7px; margin-bottom:3px;
           transition: transform .85s cubic-bezier(.4,0,.2,1), background .5s, border-color .5s, opacity .5s;
           border:1px solid transparent; }
.seo-rank { width:15px; flex-shrink:0; font:500 9px/1 'JetBrains Mono',monospace; color:rgba(255,255,255,.35); text-align:right; }
.seo-name { font:400 9px/1.3 'Inter',sans-serif; color:rgba(255,255,255,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seo-meta { margin-left:auto; display:flex; align-items:center; gap:3px; font:400 7.5px/1 'Inter',sans-serif; color:rgba(255,255,255,.3); flex-shrink:0; }
.seo-meta .seo-star { color:#f5b301; font-size:8px; }

/* The contractor */
.seo-row.is-you { background:rgba(208,43,45,.10); border-color:rgba(208,43,45,.42); }
.seo-row.is-you .seo-name { color:#fff; font-weight:500; }
.seo-row.is-you .seo-rank { color:#D02B2D; }
.seo-row.is-you .seo-meta { color:rgba(255,255,255,.6); }
.seo-row.is-moving { box-shadow:0 6px 20px -8px rgba(208,43,45,.7); }

/* Month caption */
.seo-cap { margin-top:14px; width:100%; max-width:520px; margin-left:auto; margin-right:auto;
           display:flex; align-items:center; gap:12px; }
.seo-month { font:500 26px/1 'Oswald',sans-serif; color:#fff; font-variant-numeric:tabular-nums; min-width:96px; }
.seo-month small { display:block; font:400 6.5px/1 'JetBrains Mono',monospace; letter-spacing:.16em;
                   text-transform:uppercase; color:rgba(255,255,255,.35); margin-top:5px; }
.seo-note { flex:1; font:400 10px/1.45 'Inter',sans-serif; color:rgba(255,255,255,.62);
            border-left:1px solid rgba(208,43,45,.4); padding-left:12px; min-height:30px;
            opacity:0; transform:translateY(5px); transition:opacity .4s, transform .4s; }
.seo-note.is-on { opacity:1; transform:none; }
.seo-disclaimer { max-width:520px; margin:10px auto 0; font:400 7px/1.4 'JetBrains Mono',monospace;
                  letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.26); }

@media (prefers-reduced-motion: reduce) { .seo-row { transition:none } }

/* ── COST CALCULATOR ─────────────────────────────────────────────────────────
   The contractor supplies every number, so the output is their arithmetic and
   not our claim. That is the whole reason it is persuasive.                   */
.calc { background:#101010; border:1px solid rgba(255,255,255,.10); border-radius:16px; overflow:hidden; }
.calc-in { padding:22px 24px; display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:640px){ .calc-in { grid-template-columns:repeat(3,1fr); gap:22px; } }
.calc-f label { display:block; font:400 7.5px/1 'JetBrains Mono',monospace; letter-spacing:.14em;
                text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:9px; }
.calc-val { font:500 26px/1 'Oswald',sans-serif; color:#fff; font-variant-numeric:tabular-nums; margin-bottom:9px; }
.calc-f input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:2px;
  background:rgba(255,255,255,.14); outline:none; }
.calc-f input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:#D02B2D; cursor:pointer; border:2px solid #101010; box-shadow:0 0 0 1px rgba(208,43,45,.6); }
.calc-f input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:#D02B2D;
  cursor:pointer; border:2px solid #101010; box-shadow:0 0 0 1px rgba(208,43,45,.6); }
.calc-out { border-top:1px solid rgba(255,255,255,.08); background:#0B0B0B; padding:22px 24px; text-align:center; }
.calc-out-l { font:400 7.5px/1 'JetBrains Mono',monospace; letter-spacing:.16em; text-transform:uppercase;
              color:rgba(255,255,255,.42); margin-bottom:10px; }
.calc-out-n { font:500 clamp(38px,7vw,60px)/1 'Oswald',sans-serif; color:#D02B2D; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.calc-out-s { font:400 11px/1.5 'Inter',sans-serif; color:rgba(255,255,255,.6); margin-top:10px; max-width:430px; margin-left:auto; margin-right:auto; }
.calc-note { font:400 7px/1.5 'JetBrains Mono',monospace; letter-spacing:.1em; text-transform:uppercase;
             color:rgba(255,255,255,.28); margin-top:14px; text-align:center; }

/* ── REVIEW ACTIVATION ───────────────────────────────────────────────────────
   The back-catalogue campaign: an existing customer list worked through in
   small weekly batches. The batching is the credible part — a hundred reviews
   landing in a week reads as bought, to Google and to everyone else.         */
.ac-card { width:100%; max-width:440px; margin:0 auto; background:#101010; border:1px solid rgba(255,255,255,.10);
           border-radius:16px; overflow:hidden; box-shadow:0 30px 60px -28px rgba(0,0,0,.85); }
.ac-head { padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.07); background:#0B0B0B; display:flex; align-items:center; gap:11px; }
.ac-head-icon { width:32px; height:32px; border-radius:9px; background:rgba(208,43,45,.12); border:1px solid rgba(208,43,45,.35);
                color:#D02B2D; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.ac-head-t { font:600 12px/1.2 'Inter',sans-serif; color:#fff; }
.ac-head-s { font:400 8px/1 'JetBrains Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.42); margin-top:3px; }

.ac-weeks { padding:14px 18px 6px; display:flex; flex-direction:column; gap:9px; }
.ac-week { display:flex; align-items:center; gap:10px; opacity:.25; transition:opacity .4s; }
.ac-week.is-on { opacity:1; }
.ac-week-l { width:46px; flex-shrink:0; font:400 7px/1 'JetBrains Mono',monospace; letter-spacing:.12em;
             text-transform:uppercase; color:rgba(255,255,255,.4); }
.ac-track { flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.07); overflow:hidden; }
.ac-fill { display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,#B11217,#f5b301); transition:width .8s cubic-bezier(.4,0,.2,1); }
.ac-week-n { width:54px; flex-shrink:0; text-align:right; font:400 7.5px/1 'JetBrains Mono',monospace; color:rgba(255,255,255,.5); }

.ac-out { border-top:1px solid rgba(255,255,255,.07); background:#0B0B0B; padding:14px 18px; display:flex; justify-content:space-between; gap:12px; }
.ac-stat-n { font:500 20px/1 'Oswald',sans-serif; color:#fff; font-variant-numeric:tabular-nums; }
.ac-stat-n.up { color:#f5b301; }
.ac-stat-l { font:400 6.5px/1 'JetBrains Mono',monospace; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.38); margin-top:5px; }

@media (prefers-reduced-motion: reduce) { .ac-fill { transition:none } }

/* ── WORKFLOW JOURNEY ────────────────────────────────────────────────────────
   The sequences installed at each moment of a job, laid out along the job
   itself. Reads like a spec sheet on purpose — the question a contractor has
   is "what am I actually getting", and a list answers it better than prose.  */
.jr { position:relative; }
.jr-stage { position:relative; padding-left:34px; padding-bottom:30px; }
.jr-stage:last-child { padding-bottom:0; }
.jr-stage::before {                                   /* the rail */
  content:''; position:absolute; left:11px; top:22px; bottom:0; width:1px; background:rgba(255,255,255,.10);
}
.jr-stage:last-child::before { display:none; }
.jr-node { position:absolute; left:4px; top:5px; width:15px; height:15px; border-radius:50%;
           border:1.5px solid rgba(208,43,45,.55); background:#0f1013; display:flex; align-items:center;
           justify-content:center; }
.jr-node::after { content:''; width:5px; height:5px; border-radius:50%; background:#D02B2D; }
.jr-when { font:400 7px/1 'JetBrains Mono',monospace; letter-spacing:.16em; text-transform:uppercase;
           color:rgba(255,255,255,.38); margin-bottom:5px; }
.jr-title { font:500 17px/1.2 'Oswald',sans-serif; text-transform:uppercase; letter-spacing:-.01em; color:#fff; margin-bottom:11px; }
.jr-msgs { display:flex; flex-direction:column; gap:7px; }
.jr-msg { display:flex; align-items:flex-start; gap:9px; background:rgba(255,255,255,.025);
          border:1px solid rgba(255,255,255,.07); border-radius:9px; padding:9px 11px; }
.jr-chan { display:flex; align-items:center; gap:4px; flex-shrink:0; width:74px;
           font:400 6.5px/1.3 'JetBrains Mono',monospace; letter-spacing:.1em; text-transform:uppercase;
           color:rgba(255,255,255,.42); padding-top:2px; }
.jr-chan iconify-icon { font-size:11px; color:rgba(208,43,45,.8); }
.jr-text { font:400 9.5px/1.5 'Inter',sans-serif; color:rgba(255,255,255,.78); flex:1; }
.jr-stop { display:inline-block; margin-top:8px; font:400 6.5px/1 'JetBrains Mono',monospace; letter-spacing:.12em;
           text-transform:uppercase; color:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.12);
           border-radius:20px; padding:5px 9px; }

/* ── BEFORE / AFTER ──────────────────────────────────────────────────────────
   Two columns, one problem. Used where the argument is a swap rather than a
   sequence, so an animation would be noise.                                  */
.cmp { display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:880px){ .cmp { grid-template-columns:1fr 1fr; gap:22px; } }
.cmp-col { border-radius:16px; padding:26px 26px 28px; border:1px solid rgba(255,255,255,.09); background:#0f1013; }
.cmp-col--after { border-color:rgba(208,43,45,.4); background:#101010;
                  box-shadow:0 30px 60px -32px rgba(208,43,45,.5); }
.cmp-tag { display:inline-flex; align-items:center; gap:6px; font:600 7px/1 'JetBrains Mono',monospace;
           letter-spacing:.18em; text-transform:uppercase; padding:6px 10px; border-radius:20px; margin-bottom:16px; }
.cmp-tag--before { color:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); }
.cmp-tag--after  { color:#D02B2D; border:1px solid rgba(208,43,45,.4); background:rgba(208,43,45,.1); }
.cmp-h { font:500 21px/1.15 'Oswald',sans-serif; text-transform:uppercase; letter-spacing:-.01em; color:#fff; margin-bottom:16px; }
.cmp-list { display:flex; flex-direction:column; gap:11px; }
.cmp-item { display:flex; gap:10px; font:400 10.5px/1.55 'Inter',sans-serif; }
.cmp-item iconify-icon { font-size:15px; flex-shrink:0; margin-top:1px; }
.cmp-col--before .cmp-item { color:rgba(255,255,255,.52); }
.cmp-col--before .cmp-item iconify-icon { color:rgba(255,255,255,.28); }
.cmp-col--after  .cmp-item { color:rgba(255,255,255,.85); }
.cmp-col--after  .cmp-item iconify-icon { color:#D02B2D; }

/* ── CHANNEL GRID ────────────────────────────────────────────────────────────
   Everything that lands in the inbox, with the ones that need connecting
   marked as such. The marking matters — "all your messages in one place" is
   only true for the accounts you actually hook up.                           */
.ch-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(224px,1fr)); gap:14px; }
.ch { background:#101010; border:1px solid rgba(255,255,255,.09); border-radius:13px; padding:17px 17px 18px;
      transition:border-color .25s, transform .25s; }
.ch:hover { border-color:rgba(208,43,45,.4); transform:translateY(-2px); }
.ch-top { display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.ch-ic { width:30px; height:30px; border-radius:8px; background:rgba(208,43,45,.1); border:1px solid rgba(208,43,45,.3);
         color:#D02B2D; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.ch-n { font:600 11.5px/1.2 'Inter',sans-serif; color:#fff; }
.ch-d { font:400 9.5px/1.5 'Inter',sans-serif; color:rgba(255,255,255,.58); }
.ch-tag { display:inline-block; margin-top:9px; font:400 6.5px/1 'JetBrains Mono',monospace; letter-spacing:.12em;
          text-transform:uppercase; padding:4px 7px; border-radius:20px;
          border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.45); }
.ch-tag--core { border-color:rgba(69,170,100,.4); background:rgba(69,170,100,.1); color:#7ed39a; }

/* What you can do once it is all in one place */
.do-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:11px; margin-top:14px; }
.do { display:flex; gap:10px; align-items:flex-start; background:rgba(255,255,255,.025);
      border:1px solid rgba(255,255,255,.07); border-radius:10px; padding:12px 13px; }
.do iconify-icon { color:#D02B2D; font-size:15px; flex-shrink:0; margin-top:1px; }
.do span { font:400 9.5px/1.5 'Inter',sans-serif; color:rgba(255,255,255,.75); }

/* ── TRADE CARDS ─────────────────────────────────────────────────────────────
   Image on top, name under. The placeholder is deliberately obvious so an
   unfilled slot looks unfinished rather than intentional.                    */
.tr-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (min-width:700px){ .tr-grid { grid-template-columns:repeat(4,1fr); } }
.tr-card { background:#101010; border:1px solid rgba(255,255,255,.09); border-radius:14px; overflow:hidden;
           transition:border-color .25s, transform .25s; }
.tr-card:hover { border-color:rgba(208,43,45,.45); transform:translateY(-3px); }
.tr-img { aspect-ratio:4/3; position:relative; background:#0B0B0B; display:flex; align-items:center;
          justify-content:center; border-bottom:1px solid rgba(255,255,255,.07); overflow:hidden; }
.tr-img::after { content:''; position:absolute; inset:0;
                 background:radial-gradient(circle at 50% 40%,rgba(208,43,45,.13) 0%,transparent 68%); }
/* <picture> would otherwise become the flex item and size itself to content,
   leaving the img short of the box. display:contents hands the layout back
   to the img so the rules below apply as written. */
.tr-img picture, .st-img picture { display:contents; }
.tr-img img { width:100%; height:100%; object-fit:cover; }
.tr-ph { position:relative; z-index:1; text-align:center; padding:0 10px; }
.tr-ph iconify-icon { font-size:26px; color:rgba(255,255,255,.16); display:block; margin-bottom:6px; }
.tr-ph span { font:400 6.5px/1.4 'JetBrains Mono',monospace; letter-spacing:.14em; text-transform:uppercase;
              color:rgba(255,255,255,.3); }
.tr-name { padding:12px 13px 14px; font:500 12px/1.25 'Oswald',sans-serif; text-transform:uppercase;
           letter-spacing:-.01em; color:#fff; text-align:center; }

/* The long list */
.tl { columns:2; column-gap:26px; }
@media (min-width:640px){ .tl { columns:3; } }
@media (min-width:1000px){ .tl { columns:4; } }
.tl li { break-inside:avoid; font:400 10.5px/2.1 'Inter',sans-serif; color:rgba(255,255,255,.6);
         list-style:none; transition:color .2s; }
.tl li::before { content:'—'; color:rgba(208,43,45,.5); margin-right:7px; }
.tl li:hover { color:#fff; }

/* ── STORY ───────────────────────────────────────────────────────────────────
   Portrait beside the founder story. Placeholder is obvious until a real
   photo lands.                                                               */
.st-img { aspect-ratio:4/5; border-radius:16px; overflow:hidden; background:#0B0B0B;
          border:1px solid rgba(255,255,255,.09); position:relative;
          display:flex; align-items:center; justify-content:center; }
.st-img::after { content:''; position:absolute; inset:0;
                 background:radial-gradient(circle at 50% 35%,rgba(208,43,45,.13) 0%,transparent 70%); }
.st-img img { width:100%; height:100%; object-fit:cover; }
.st-ph { position:relative; z-index:1; text-align:center; }
.st-ph iconify-icon { font-size:40px; color:rgba(255,255,255,.14); display:block; margin-bottom:9px; }
.st-ph span { font:400 7px/1.5 'JetBrains Mono',monospace; letter-spacing:.14em;
              text-transform:uppercase; color:rgba(255,255,255,.3); }
.st-quote { font:400 italic 15px/1.6 'Inter',sans-serif; color:#fff;
            border-left:2px solid rgba(208,43,45,.6); padding-left:16px; margin:22px 0; }
.st-sig { font:400 7.5px/1 'JetBrains Mono',monospace; letter-spacing:.16em;
          text-transform:uppercase; color:rgba(255,255,255,.4); }

/* ── HERO ROTATOR ────────────────────────────────────────────────────────────
   One card at a time, sliding in from the right and leaving to the left. The
   stage is a fixed height so the hero never reflows as cards swap — three
   absolutely positioned cards sharing one box, only one of them lit.        */
.hr-stage { position:relative; height:84px; max-width:430px; }
.hr-card { position:absolute; inset:0; display:flex; align-items:center; gap:14px;
           background:#101010; border:1px solid rgba(255,255,255,.10); border-radius:14px;
           padding:0 20px; opacity:0; transform:translateX(38px); pointer-events:none;
           transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); }
.hr-card.is-in  { opacity:1; transform:none; }
.hr-card.is-out { opacity:0; transform:translateX(-38px); }
.hr-ico { width:42px; height:42px; flex:none; border-radius:11px; display:flex;
          align-items:center; justify-content:center; font-size:21px;
          color:#D02B2D; background:rgba(208,43,45,.10); border:1px solid rgba(208,43,45,.30); }
.hr-txt { min-width:0; }
.hr-txt { display:block; }
.hr-t { display:block; font:500 19px/1.15 'Oswald',sans-serif; text-transform:uppercase;
        letter-spacing:-.01em; color:#fff; }
.hr-s { display:block; font:300 12.5px/1.45 'Inter',sans-serif; color:rgba(255,255,255,.55);
        margin-top:4px; }
.hr-dots { display:flex; gap:6px; margin-top:14px; }
.hr-dot { width:18px; height:3px; border-radius:2px; background:rgba(255,255,255,.14);
          transition:background .35s; }
.hr-dot.is-on { background:#D02B2D; }
@media (max-width:420px){ .hr-stage { height:94px; } .hr-t { font-size:17px; } }

/* No motion: show the first card and hide the rest. */
@media (prefers-reduced-motion: reduce) {
  .hr-card { transition:none; }
}

/* ── BEAM ────────────────────────────────────────────────────────────────────
   A light sweep across the primary CTAs. Implemented with animation rather
   than transition on purpose: several of these buttons already declare their
   own `transition` for hover colour and shadow, and a transition-based beam
   would overwrite it and kill those hovers.                                  */
a[href="/#book-call"], #bd-submit, .beam-hover { position:relative; overflow:hidden; }
a[href="/#book-call"]::after,
#bd-submit::after,
.beam-hover::after {
  content:''; position:absolute; top:-10%; bottom:-10%; left:-60%; width:42%;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.42) 50%, transparent 100%);
  transform:skewX(-18deg); pointer-events:none; z-index:1;
}
a[href="/#book-call"]::after,
#bd-submit::after { animation:beam-run 3.8s cubic-bezier(.4,0,.2,1) infinite; }
/* Hover-only variant sits still until you are actually on it. */
.beam-hover::after { opacity:0; }
.beam-hover:hover::after { opacity:1; animation:beam-run 1.05s cubic-bezier(.4,0,.2,1); }
@keyframes beam-run {
  0%        { left:-60%; }
  45%, 100% { left:130%; }
}
/* Keep the label above the sweep on the dark ghost button, where a bright
   band over thin grey type is hard to read. */
.beam-hover > * { position:relative; z-index:2; }

/* ── SCROLL REVEAL ───────────────────────────────────────────────────────────
   Gated behind html.js-anim, which the script adds. Without JS the class is
   never set, so nothing is ever hidden and the page reads normally.
   Uses animation, not transition, for the same reason as the beam: many of
   these elements carry their own transition for hover and it must survive.  */
html.js-anim [data-reveal] { opacity:0; }
html.js-anim [data-reveal].is-revealed { animation:reveal-in 1.05s cubic-bezier(.22,.64,.3,1) both; }
@keyframes reveal-in {
  from { opacity:0; translate:0 32px; }
  to   { opacity:1; translate:none; }
}

@media (prefers-reduced-motion: reduce) {
  a[href="/#book-call"]::after, #bd-submit::after, .beam-hover::after { animation:none; opacity:0; }
  html.js-anim [data-reveal] { opacity:1; }
  html.js-anim [data-reveal].is-revealed { animation:none; }
}

/* ── STEP NUMBERS ────────────────────────────────────────────────────────────
   01 / 02 / 03 light up one after another as the row arrives.
   Default is LIT, so with no JS and under reduced motion the numbers read as
   finished rather than sitting permanently dimmed. Only once the animation
   system is running do they start dark and come up in sequence.             */
.step-num { color:#D02B2D; }
html.js-anim .step-num { color:rgba(255,255,255,.10); }
html.js-anim [data-reveal].is-revealed .step-num {
  animation:step-light .85s cubic-bezier(.16,1,.3,1) both;
}
@keyframes step-light {
  0%   { color:rgba(255,255,255,.10); text-shadow:none; }
  60%  { color:#E8484A; text-shadow:0 0 30px rgba(208,43,45,.55); }
  100% { color:#D02B2D; text-shadow:0 0 18px rgba(208,43,45,.30); }
}
@media (prefers-reduced-motion: reduce) {
  html.js-anim .step-num { color:#D02B2D; }
  html.js-anim [data-reveal].is-revealed .step-num { animation:none; }
}

/* ── SPEC SHEET ──────────────────────────────────────────────────────────────
   A takeoff/inspection-sheet layout: a label rail down the left, line items
   down the right. Deliberately not another card grid — this page already
   runs 2-, 3- and 4-up grids, and a long list in cards reads as filler.    */
.spec { border:1px solid rgba(255,255,255,.10); border-radius:16px; overflow:hidden;
        background:#0B0B0B; }
.spec-grp { display:grid; grid-template-columns:minmax(0,268px) minmax(0,1fr); }
.spec-grp + .spec-grp { border-top:1px solid rgba(255,255,255,.09); }
.spec-side { padding:26px 24px; border-right:1px solid rgba(255,255,255,.09);
             background:rgba(255,255,255,.017); }
.spec-n { font:500 11px/1 'JetBrains Mono',monospace; letter-spacing:.16em;
          color:#D02B2D; display:block; margin-bottom:10px; }
.spec-h { font:500 21px/1.12 'Oswald',sans-serif; text-transform:uppercase;
          letter-spacing:-.01em; color:#fff; }
.spec-note { font:300 12.5px/1.5 'Inter',sans-serif; color:rgba(255,255,255,.45);
             margin-top:9px; }
.spec-items { padding:8px 24px; }
.spec-row { display:grid; grid-template-columns:16px minmax(0,1fr); gap:13px;
            padding:13px 0; border-bottom:1px dashed rgba(255,255,255,.08); }
.spec-row:last-child { border-bottom:0; }
.spec-row iconify-icon { color:#D02B2D; font-size:15px; margin-top:2px; }
.spec-t { font:500 14.5px/1.35 'Inter',sans-serif; color:#fff; }
.spec-d { font:300 13px/1.55 'Inter',sans-serif; color:rgba(255,255,255,.55); margin-top:3px; }
@media (max-width:860px){
  .spec-grp { grid-template-columns:1fr; }
  .spec-side { border-right:0; border-bottom:1px solid rgba(255,255,255,.09); padding:22px 20px; }
  .spec-items { padding:6px 20px; }
}

/* The turnaround callout that follows the sheet. */
.turn { display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:28px;
        align-items:center; border:1px solid rgba(208,43,45,.28); border-radius:16px;
        background:linear-gradient(100deg, rgba(208,43,45,.09), rgba(208,43,45,.02) 60%);
        padding:30px 32px; }
.turn-big { font:500 58px/0.9 'Oswald',sans-serif; color:#fff; letter-spacing:-.02em; }
.turn-unit { font:500 11px/1 'JetBrains Mono',monospace; letter-spacing:.18em;
             text-transform:uppercase; color:#D02B2D; margin-top:9px; }
@media (max-width:760px){ .turn { grid-template-columns:1fr; gap:18px; padding:26px 22px; }
                          .turn-big { font-size:46px; } }

/* ── HERO OFFER CARD ─────────────────────────────────────────────────────────
   Puts the offer itself in the hero, under the buttons: what is included and
   what it costs, without pushing the CTA below the fold.                    */
.offer { border:1px solid rgba(255,255,255,.11); border-radius:14px;
         background:rgba(255,255,255,.022); padding:17px 19px 15px; max-width:560px; }
.offer-h { display:flex; align-items:center; gap:8px; font:500 10.5px/1 'JetBrains Mono',monospace;
           letter-spacing:.16em; text-transform:uppercase; color:#D02B2D; margin-bottom:14px; }
.offer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 18px; }
.offer-i { display:flex; align-items:flex-start; gap:9px;
           font:400 13px/1.35 'Inter',sans-serif; color:rgba(255,255,255,.88); }
.offer-i iconify-icon { color:#D02B2D; font-size:15px; margin-top:1px; flex:none; }
.offer-foot { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
              margin-top:15px; padding-top:13px; border-top:1px solid rgba(255,255,255,.09); }
.offer-price { font:500 27px/1 'Oswald',sans-serif; color:#fff; letter-spacing:-.01em; }
.offer-per { font:300 12.5px/1 'Inter',sans-serif; color:rgba(255,255,255,.5); }
.offer-term { font:400 11px/1 'JetBrains Mono',monospace; letter-spacing:.1em;
              text-transform:uppercase; color:rgba(255,255,255,.45); }
.offer-term b { color:rgba(255,255,255,.78); font-weight:400; }
.offer-note { font:300 12px/1.5 'Inter',sans-serif; color:rgba(255,255,255,.45); margin-top:11px; }
@media (max-width:520px){ .offer-grid { grid-template-columns:1fr; } }

/* ── VALUE CARDS ─────────────────────────────────────────────────────────────
   Groups the included items by the outcome they buy rather than listing seven
   features flat. Each card carries its own concrete items underneath.       */
.vcard { position:relative; background:#101010; border:1px solid rgba(255,255,255,.10);
         border-radius:18px; padding:28px 26px 26px; overflow:hidden;
         transition:border-color .3s, transform .3s; }
.vcard:hover { border-color:rgba(208,43,45,.45); transform:translateY(-3px); }
.vcard::before { content:''; position:absolute; inset:0 0 auto 0; height:2px;
                 background:linear-gradient(90deg,#B11217,rgba(208,43,45,0)); }
.vcard-n { font:500 10.5px/1 'JetBrains Mono',monospace; letter-spacing:.18em;
           text-transform:uppercase; color:rgba(255,255,255,.34); }
.vcard-ico { width:46px; height:46px; border-radius:12px; display:flex; align-items:center;
             justify-content:center; font-size:22px; color:#D02B2D;
             background:rgba(208,43,45,.10); border:1px solid rgba(208,43,45,.30);
             margin:14px 0 16px; }
.vcard-h { font:500 23px/1.1 'Oswald',sans-serif; text-transform:uppercase;
           letter-spacing:-.01em; color:#fff; margin-bottom:9px; }
.vcard-p { font:300 13.5px/1.55 'Inter',sans-serif; color:rgba(255,255,255,.62);
           margin-bottom:17px; }
.vcard-li { display:flex; align-items:flex-start; gap:9px; padding:7px 0;
            border-top:1px dashed rgba(255,255,255,.09);
            font:400 13px/1.45 'Inter',sans-serif; color:rgba(255,255,255,.85); }
.vcard-li iconify-icon { color:#D02B2D; font-size:14px; margin-top:2px; flex:none; }

/* Directional reveal for the value cards — they arrive from the side rather
   than fading straight up, so the row reads as one movement. Overrides the
   default reveal-in via the extra class. */
html.js-anim [data-reveal].is-revealed.slide-l { animation:slide-in-l 1.15s cubic-bezier(.22,.64,.3,1) both; }
html.js-anim [data-reveal].is-revealed.slide-r { animation:slide-in-r 1.15s cubic-bezier(.22,.64,.3,1) both; }
@keyframes slide-in-l { from { opacity:0; translate:-58px 0; } to { opacity:1; translate:none; } }
@keyframes slide-in-r { from { opacity:0; translate:58px 0; }  to { opacity:1; translate:none; } }
@media (prefers-reduced-motion: reduce) {
  html.js-anim [data-reveal].is-revealed.slide-l,
  html.js-anim [data-reveal].is-revealed.slide-r { animation:none; }
}

/* ── ABOUT PAGE ──────────────────────────────────────────────────────────────
   Layout carried over from the original site's About: a full-bleed hero and
   the Core Discipline statement split either side of a pulsing red beam.    */
@keyframes beamPulse {
  0%, 100% { opacity:.35; }
  50%      { opacity:1; }
}
@keyframes smokeDriftSlow {
  0%   { transform:translate3d(0,0,0) scale(1); }
  100% { transform:translate3d(2%,-2%,0) scale(1.08); }
}
.beam-v { animation:beamPulse 4s infinite ease-in-out;
          mask-image:linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
          -webkit-mask-image:linear-gradient(to bottom, transparent, black 15%, black 85%, transparent); }
.beam-h { animation:beamPulse 4s infinite ease-in-out;
          mask-image:linear-gradient(to right, transparent, black 20%, black 80%, transparent);
          -webkit-mask-image:linear-gradient(to right, transparent, black 20%, black 80%, transparent); }
.smoke  { background:radial-gradient(circle at 10% 40%, rgba(255,255,255,.02) 0%, transparent 45%),
                     radial-gradient(circle at 90% 60%, rgba(208,43,45,.015) 0%, transparent 55%);
          animation:smokeDriftSlow 20s infinite alternate ease-in-out; }
.about-hero-mask { mask-image:linear-gradient(180deg, transparent, black 5%, black 90%, transparent);
                   -webkit-mask-image:linear-gradient(180deg, transparent, black 5%, black 90%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .beam-v, .beam-h { animation:none; opacity:.7; }
  .smoke { animation:none; }
}