/* Home — v2 · The Combined Cut. Page-only styles (the shared system is /assets/v2/remco.css). */

.hdr--dark .hdr__brand { color: #fff; }
@media (max-width: 1023px) { .hdr--dark .hdr__brand { color: var(--ink); } }

/* =========================================================================================
   1 · HERO  — pinned stage; html[data-exit] picks the exit
   ========================================================================================= */
.hx { --stage-h: 100svh; --tick-h: 58px; position: relative; height: calc(var(--stage-h) * 2); background: var(--ink); }
html[data-exit="b"] .hx { height: calc(var(--stage-h) * 2.2); }
html[data-exit="c"] .hx { height: calc(var(--stage-h) * 2.4); }
.hx__stage { position: sticky; top: 0; height: var(--stage-h); overflow: hidden; background: var(--ink); isolation: isolate; }

.hx__media { position: absolute; inset: 0; overflow: hidden; background: #2a1d14; transform: translate3d(0, var(--my, 0px), 0) scale(var(--ms, 1)); transform-origin: 50% 46%; will-change: transform; }
.hx__vid, .hx__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.hx__vid { opacity: 0; transition: opacity 1s; }
.hx__vid.is-on { opacity: 1; }
.hx.is-intro .hx__vid, .hx.is-intro .hx__poster { animation: hxZoom 2.4s var(--e-out) both; }
@keyframes hxZoom { from { transform: scale(1.2); } }
.hx__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(12,12,13,.74) 0%, rgba(12,12,13,.34) 46%, rgba(12,12,13,0) 72%),
    linear-gradient(0deg, rgba(12,12,13,.8) 0%, rgba(12,12,13,0) 46%),
    linear-gradient(180deg, rgba(12,12,13,.5) 0%, rgba(12,12,13,0) 24%);
}
/* a black veil every exit can drive */
.hx__stage::after { content: ""; position: absolute; inset: 0; z-index: 4; background: #000; opacity: var(--veil, 0); pointer-events: none; }

.hx__in {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; max-width: none;
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: end; gap: 3rem;
  padding-bottom: calc(var(--tick-h) + clamp(2rem, 5vh, 3.6rem));
  opacity: var(--co, 1); transform: translate3d(0, var(--cy, 0px), 0);
}
.hx__pill {
  display: inline-flex; align-items: center; gap: .7rem; padding: .45rem .9rem .45rem .45rem; border-radius: 999px;
  background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 700 .7rem/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: #fff;
}
.hx__pill b { background: var(--red); border-radius: 999px; padding: .4rem .55rem; letter-spacing: .12em; }
.hx__pill i { width: 7px; height: 7px; border-radius: 50%; background: #1ec96b; animation: live 2s infinite; }
.hx__h { text-shadow: 0 2px 30px rgba(0,0,0,.35); margin-top: 1.4rem; font-size: clamp(2.9rem, 7.4vw, 8rem); max-width: 10.5em; transform-origin: 30% 60%; transform: scale(var(--hs, 1)); opacity: var(--ho, 1); }
.hx__sub { margin-top: 1.6rem; max-width: 30em; font-size: clamp(1rem, 1.25vw, 1.15rem); }
.hx__fade { opacity: var(--so, 1); }
.hx__qpw { opacity: var(--qo, 1); }

/* quick-pick card */
.qp {
  padding: 1.5rem; border-radius: 22px; color: #fff;
  background: rgba(16,16,18,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 30px 60px -30px rgba(0,0,0,.6);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
}
.qp__t { font: 700 1.2rem/1.2 var(--f-sans); letter-spacing: -.02em; }
.qp__s { margin: .3rem 0 1rem; font-size: .86rem; color: var(--on-dark-70); }
.qp__chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.1rem; }
.qp__chip { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 700; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.24); transition: background .35s var(--e-out), box-shadow .35s, transform .35s var(--e-out); }
.qp__chip:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.qp__chip[aria-pressed="true"] { background: var(--red); box-shadow: inset 0 0 0 1.5px var(--red); }
.qp__chip[aria-pressed="true"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.qp__chip--leak { box-shadow: inset 0 0 0 1.5px rgba(255,90,80,.6); }
.qp .btn { width: 100%; }
.qp__alt { display: block; margin-top: .8rem; text-align: center; font-size: .84rem; color: var(--on-dark-70); }
.qp__alt b { color: #fff; }
.qp__alt:hover b { color: #ff5a52; }

/* red services ticker */
.hx__tick { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: var(--tick-h); align-items: center; background: var(--red); color: #fff; --mq-gap: 0rem; --mq-dur: 30s; transform: translate3d(0, var(--ty, 0%), 0); }
.hx__bar { display: none; }
html[data-bar="a"] .hx__bar--a, html[data-bar="c"] .hx__bar--c { display: grid; }
html[data-bar="b"] .hx__bar--b { display: flex; }
.hx__tick:not(.hx__bar--b) { background: transparent; }
.hx__tick .marquee__track span { display: inline-flex; align-items: center; gap: 1.6rem; padding-right: 1.6rem; white-space: nowrap; font: 700 clamp(.9rem, 1.3vw, 1.15rem)/1 var(--f-disp); text-transform: uppercase; letter-spacing: .02em; }
.hx__tick .marquee__track span::after { content: ""; width: 9px; height: 9px; background: #fff; flex: none; }

/* exit B · shingle courses */
.hx__rows { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: none; }
html[data-exit="b"] .hx__rows { display: block; }
/* one shingle course. The texture (grain, staggered tab seams, lit butt edge, soft shadow) is a baked image, and the
   row is revealed with two opposing translates (GPU-composited) so nothing repaints while you scroll. */
.hx__row { position: absolute; left: 0; right: 0; top: var(--top); height: calc(var(--h) + 34px); z-index: var(--z); overflow: hidden; transform: translate3d(-100%, -10px, 0); will-change: transform; contain: strict; }
.hx__ri { position: absolute; inset: 0; background: url("/assets/v2/img/shingle-course-188.webp") var(--off) 0 / 376px 100% repeat-x; transform: translate3d(100%, 0, 0); will-change: transform; }
.hx__re { position: absolute; right: 0; top: 0; width: 2px; height: calc(100% - 34px); background: var(--red); box-shadow: 0 0 14px rgba(225,6,0,.7); opacity: 0; }
@media (max-width: 699px) { .hx__ri { background-image: url("/assets/v2/img/shingle-course-118.webp"); background-size: 236px 100%; } }
.hx__veil { position: absolute; inset: 0; z-index: 4; background: #000; opacity: 0; pointer-events: none; will-change: opacity; display: none; }
html[data-exit="b"] .hx__veil { display: block; }
html[data-exit="b"] .hx__stage::after { display: none; }
html[data-exit="b"] .hx__in, html[data-exit="b"] .hx__media, html[data-exit="b"] .hx__black, html[data-exit="b"] .hx__tick { will-change: transform, opacity; }

/* exit C · the next line surfacing on black */
.hx__black { position: absolute; inset: 0; z-index: 5; background: var(--ink); opacity: var(--bk, 0); pointer-events: none; display: none; }
.hx__next { position: absolute; z-index: 6; left: 0; right: 0; bottom: clamp(3rem, 11vh, 7.5rem); display: none; transform: translate3d(0, var(--ny, 40px), 0) scale(var(--ns, .94)); opacity: var(--no, 0); transform-origin: 20% 50%; }
.hx__next .eyebrow { margin-bottom: 1.4rem; }
html[data-exit="c"] .hx__black, html[data-exit="c"] .hx__next, html[data-exit="b"] .hx__black { display: block; }
html[data-exit="b"] .hx__black { z-index: 6; }

@media (max-width: 1023px) {
  .hx { --stage-h: calc(100svh - var(--callbar)); --tick-h: 46px; }
  .hx__in { grid-template-columns: 1fr; gap: 1.4rem; padding-bottom: calc(var(--tick-h) + 1.2rem); }
  .qp { max-width: 520px; padding: 1.15rem; border-radius: 20px; }
}
@media (max-width: 640px) {
  .hx__h { font-size: clamp(2.4rem, 11.4vw, 3.6rem); margin-top: 1rem; }
  .hx__sub { display: none; }
  .hx__next { bottom: 30%; }
  .hx__pill { font-size: .6rem; letter-spacing: .14em; }
  .qp__s { display: none; }
  .qp__t { font-size: 1.05rem; margin-bottom: .8rem; }
  .qp__chip { padding: .5rem .7rem; font-size: .76rem; }
  .qp__chips { margin-bottom: .9rem; gap: .35rem; }
  .qp .btn { min-height: 50px; }
  .qp__alt { margin-top: .6rem; }
}
@media (max-height: 700px) and (max-width: 640px) { .qp__alt { display: none; } .hx__pill { display: none; } }

/* =========================================================================================
   2 · SAME HOUSE. NEW ROOF.  (black; in exit A this section is the curtain)
   ========================================================================================= */
.rr { position: relative; z-index: 3; background: var(--ink); padding: clamp(6rem, 16vh, 11rem) 0 clamp(4rem, 9vw, 8rem); }
html[data-exit="a"] .rr {
  margin-top: calc(var(--stage-h, 100svh) * -1);
  border-radius: var(--cr, 0px) var(--cr, 0px) 0 0;
  box-shadow: 0 -40px 80px -20px rgba(0,0,0,.55);
}
@media (max-width: 1023px) { html[data-exit="a"] .rr { margin-top: calc((100svh - var(--callbar)) * -1); } }
html[data-exit="c"] .rr { padding-top: 0; }
html[data-exit="c"] .rr__intro { display: none; }
.rr::before { content: ""; position: absolute; left: 50%; top: 14px; width: 44px; height: 4px; margin-left: -22px; border-radius: 4px; background: rgba(255,255,255,.18); opacity: var(--grip, 0); }
.rr__intro .eyebrow { margin-bottom: 1.6rem; }
.rr__h { max-width: 12em; }
.rr__lede { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: end; margin-top: clamp(1.8rem, 3vw, 2.6rem); }
html[data-exit="c"] .rr__lede { margin-top: 0; padding-top: clamp(1.2rem, 3vh, 2.4rem); }
.rr__lede .lede { max-width: 31em; }
.rr__lede .link-arrow { color: #fff; }

.rr__film { position: relative; margin-top: clamp(2.6rem, 6vw, 5rem); }
/* real footage is 720p: keep the frame contained (max 1180px) so it stays sharp */
.rr__film { max-width: min(1180px, calc(100% - var(--gut) * 2)); margin-left: auto; margin-right: auto; }
.rr__frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #111; border-radius: 18px;
  clip-path: inset(8% 6% 8% 6% round 18px); transition: clip-path 1.5s var(--e-io);
  box-shadow: 0 60px 120px -60px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.07);
}
.rr__film.is-in .rr__frame { clip-path: inset(0 0 0 0 round 18px); }
.rr__poster, .rr__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 2.2s var(--e-out); }
.rr__film.is-in .rr__poster, .rr__film.is-in .rr__vid { transform: scale(1); }
.rr__vid { opacity: 0; transition: opacity .55s ease, transform 2.2s var(--e-out); }
.rr__vid.is-on { opacity: 1; }
.rr__frame::after { content: ""; position: absolute; inset: auto 0 0 0; height: 34%; background: linear-gradient(0deg, rgba(8,8,9,.72), rgba(8,8,9,0)); pointer-events: none; }
.rr__tag, .rr__tc { position: absolute; z-index: 2; top: clamp(14px, 2vw, 26px); font: 700 .68rem/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: #fff; }
.rr__tag { left: var(--gut); display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .75rem; border-radius: 999px; background: rgba(12,12,13,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.rr__tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: rrBlink 1.2s steps(2, jump-none) infinite; }
@keyframes rrBlink { 50% { opacity: .2; } }
.rr__tc { right: var(--gut); padding-top: .5rem; font-variant-numeric: tabular-nums; letter-spacing: .14em; opacity: .8; }

.rr__hud { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(18px, 3vw, 40px); }
.rr__line { position: relative; height: 2px; background: rgba(255,255,255,.22); }
.rr__fill { position: absolute; inset: 0; background: var(--red); transform-origin: 0 50%; transform: scaleX(var(--rp, 0)); }
.rr__line b { position: absolute; top: -4px; width: 1px; height: 10px; background: rgba(255,255,255,.5); }
.rr__stages { position: relative; height: 2.6rem; margin-top: .9rem; }
.rr__stages li {
  position: absolute; left: var(--x); width: var(--w); display: flex; align-items: baseline; gap: .6rem;
  font: 600 clamp(.9rem, 1.2vw, 1.1rem)/1.1 var(--f-sans); letter-spacing: -.01em; color: rgba(255,255,255,.38);
  transition: color .45s, transform .6s var(--e-out); transform: translate3d(0, 4px, 0);
}
.rr__stages li span { font: 700 .66rem/1 var(--f-sans); letter-spacing: .16em; color: rgba(255,255,255,.38); transition: color .45s; }
.rr__stages li.is-done { color: rgba(255,255,255,.7); transform: none; }
.rr__stages li.is-on { color: #fff; transform: none; }
.rr__stages li.is-on span { color: var(--red); }
.rr__stages li.is-on::before { content: ""; position: absolute; left: 0; top: calc(-.9rem - 6px); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(225,6,0,.25); }
.rr__stages li:first-child.is-on::before { margin-left: 0; }

@media (max-width: 760px) {
  .rr__lede { grid-template-columns: 1fr; }
  .rr__frame { height: auto; aspect-ratio: 1 / 1; }
  .rr__hud { position: relative; bottom: auto; margin-top: 1.2rem; }
  .rr__stages { height: auto; display: grid; grid-template-columns: 1fr 2fr 1fr; }
  .rr__stages li { position: relative; left: auto; width: auto; display: block; font-size: .74rem; letter-spacing: 0; }
  .rr__stages li span { display: block; margin-bottom: .35rem; }
  .rr__stages li:nth-child(2) { padding-left: .4rem; }
  .rr__stages li:nth-child(3) { padding-left: .4rem; }
}

/* =========================================================================================
   3 · SERVICES INDEX (paper)
   ========================================================================================= */
.sx { position: relative; background: var(--paper); padding: clamp(6rem, 12vw, 10rem) 0 clamp(5rem, 10vw, 8rem); }
.sx__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: end; margin-bottom: clamp(2.6rem, 5vw, 4.4rem); }
.sx__head .h-2 .soft { display: block; }
.sx__note { max-width: 18em; color: var(--mute); font-size: .98rem; }
.sx__item { position: relative; border-top: 1px solid var(--line-2); }
.sx__item:last-child { border-bottom: 1px solid var(--line-2); }
.sx__item::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--e-out); }
.sx__row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 56px; align-items: center; gap: 1.6rem; padding: clamp(1.1rem, 2.2vw, 1.9rem) 0; transition: opacity .45s; }
.sx__n { font: 600 .78rem var(--f-sans); letter-spacing: .14em; color: var(--mute-2); transition: color .3s; }
.sx__name { font: 700 clamp(2rem, 5.6vw, 5.4rem)/1 var(--f-sans); letter-spacing: -.055em; transition: transform .8s var(--e-out); }
.sx__line { font: italic 400 clamp(1.1rem, 1.6vw, 1.45rem)/1.1 var(--f-it); color: var(--mute); transition: color .4s; }
.sx__go { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); transition: background .35s, color .35s, box-shadow .35s; }
.sx__go .ic { width: 20px; height: 20px; transform: rotate(-45deg); transition: transform .5s var(--e-out); }
.sx__panel { display: none; }
@media (hover: hover) and (min-width: 900px) {
  .sx__list:hover .sx__row { opacity: .26; }
  .sx__list .sx__row:hover, .sx__list .sx__row:focus-visible { opacity: 1; }
  .sx__item:hover::before { transform: scaleX(1); }
  .sx__row:hover .sx__name, .sx__row:focus-visible .sx__name { transform: translate3d(18px, 0, 0); }
  .sx__row:hover .sx__n, .sx__row:hover .sx__line { color: var(--red); }
  .sx__row:hover .sx__go { background: var(--red); color: #fff; box-shadow: none; }
  .sx__row:hover .sx__go .ic { transform: none; }
  .sx__row { cursor: none; }
}
/* the photo that follows the cursor */
.sx__float {
  position: fixed; z-index: 30; left: 0; top: 0; width: 320px; aspect-ratio: 4 / 3; pointer-events: none;
  transform: translate3d(var(--fx, -999px), var(--fy, -999px), 0) rotate(var(--fr, 0deg)) scale(var(--fs, .6));
  opacity: 0; transition: opacity .35s; will-change: transform;
}
.sx__float.is-on { opacity: 1; }
.sx__fimgs { position: absolute; inset: 0; overflow: hidden; border-radius: 6px; box-shadow: 0 40px 70px -30px rgba(12,12,13,.55); }
.sx__fimgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); transform: scale(1.15); transition: clip-path .7s var(--e-io), transform 1.1s var(--e-out); }
.sx__fimgs img.is-on { clip-path: inset(0 0 0 0); transform: none; z-index: 2; }
.sx__fimgs img.was-on { clip-path: inset(0 0 0 0); transform: none; z-index: 1; transition: none; }
.sx__float::after { content: "View"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; font: 700 .72rem/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; z-index: 3; }

@media (max-width: 899px), (hover: none) {
  .sx__float { display: none; }
  .sx__head { grid-template-columns: 1fr; }
  .sx__row { grid-template-columns: 30px minmax(0, 1fr) 40px; gap: .2rem .8rem; padding: 1.15rem 0; }
  .sx__name { font-size: clamp(1.55rem, 7.4vw, 2.6rem); }
  .sx__line { grid-column: 2; grid-row: 2; font-size: 1.05rem; }
  .sx__go { grid-column: 3; grid-row: 1 / span 2; width: 40px; height: 40px; }
  .sx__go .ic { transform: rotate(90deg); }
  .sx__item.is-open .sx__go { background: var(--ink); color: #fff; box-shadow: none; }
  .sx__item.is-open .sx__go .ic { transform: rotate(-90deg); }
  .sx__item.is-open .sx__n { color: var(--red); }
  .sx__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--e-out); }
  .sx__item.is-open .sx__panel { grid-template-rows: 1fr; }
  .sx__pin { min-height: 0; overflow: hidden; }
  .sx__pin img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--e-io) .05s; }
  .sx__item.is-open .sx__pin img { clip-path: inset(0); }
  .sx__pin p { margin: 1rem 0 .8rem; color: var(--mute); font-size: 1rem; }
  .sx__pin .link-arrow { margin-bottom: 1.4rem; }
}

/* =========================================================================================
   4 · VALUES — pinned, steps (bone)
   ========================================================================================= */
.vx { background: var(--bone); }
.vx__pin { position: relative; height: 320vh; }
.vx__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: calc(88px + 2vh) 0 4.5vh; }
.vx__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; width: 100%; padding-bottom: 1rem; background: linear-gradient(var(--line-2), var(--line-2)) 50% 100% / calc(100% - 2 * var(--gut)) 1px no-repeat; }
.vx__by { font-size: .86rem; color: var(--mute); }
.vx__body { position: relative; width: 100%; display: grid; }
.vx__photos { position: absolute; top: 3.5vh; bottom: 3.5vh; right: var(--gut); width: 42%; border-radius: 8px; overflow: hidden; background: var(--line); }
.vx__ph { position: absolute; inset: 0; z-index: var(--z, 0); clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--e-io); }
.vx__ph img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transition: transform 1.6s var(--e-out); }
.vx__ph.is-on { clip-path: inset(0 0 0 0); }
.vx__ph.is-on img { transform: scale(1); }
.vx__slides { display: grid; align-items: center; width: 54%; }
.vx__s { grid-area: 1 / 1; display: grid; gap: 1.2rem; pointer-events: none; }
.vx__s.is-on { pointer-events: auto; }
.vx__n { font: 700 .78rem var(--f-sans); letter-spacing: .2em; color: var(--red); opacity: 0; transition: opacity .5s; }
.vx__n small { font-size: inherit; color: var(--mute); }
.vx__w { font: 700 clamp(2.6rem, 5.8vw, 6.2rem)/.92 var(--f-disp); text-transform: uppercase; letter-spacing: -.045em; }
.vx__w > span { display: block; overflow: hidden; padding: .1em .25em .18em .08em; margin: -.1em -.25em -.18em -.08em; }
.vx__w > span > span { display: block; transform: translate3d(0, 150%, 0) rotate(3deg); transform-origin: 0 100%; transition: transform .6s var(--e-io); }
.vx__w em { font: italic 400 1.14em/.8 var(--f-it); text-transform: none; letter-spacing: -.01em; color: var(--red); }
.vx__m { max-width: 25ch; font: 600 clamp(1.15rem, 1.7vw, 1.6rem)/1.35 var(--f-sans); letter-spacing: -.02em; color: var(--ink); opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity .4s, transform .6s var(--e-out); }
.vx__s.is-on .vx__n { opacity: 1; transition-delay: .15s; }
.vx__s.is-on .vx__w > span > span { transform: none; transition: transform .9s var(--e-out) .1s; }
.vx__s.is-on .vx__m { opacity: 1; transform: none; transition: opacity .7s .3s, transform .9s var(--e-out) .3s; }
.vx__s.is-past .vx__w > span > span { transform: translate3d(0, -150%, 0); }
.vx__bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; width: 100%; }
.vx__bar li { display: grid; grid-template-columns: auto 1fr; gap: .3rem .7rem; align-items: baseline; font-size: .78rem; color: var(--mute-2); transition: color .5s; }
.vx__bar li b { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .7rem; }
.vx__bar li > i { grid-column: 1 / -1; position: relative; height: 2px; background: var(--line-2); overflow: hidden; }
.vx__bar li > i > i { position: absolute; inset: 0; background: var(--red); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.vx__bar li.is-on { color: var(--ink); }
@media (max-width: 900px) {
  .vx__pin { height: 290vh; }
  .vx__stage { height: calc(100svh - var(--callbar)); padding: calc(78px + 1vh) 0 2.6vh; }
  .vx__top { flex-direction: column; gap: .3rem; padding-bottom: .7rem; }
  .vx__body { grid-template-rows: minmax(0, .8fr) auto; gap: 1.2rem; padding-top: 1.2rem; padding-bottom: 1.2rem; }
  .vx__photos { position: relative; inset: auto; width: auto; height: 100%; min-height: 160px; }
  .vx__slides { width: 100%; }
  .vx__w { font-size: clamp(2.3rem, 11vw, 3.4rem); }
  .vx__m { font-size: 1.05rem; }
  .vx__s { gap: .7rem; }
  .vx__bar { gap: .6rem; }
  .vx__bar li b { display: none; }
}

/* =========================================================================================
   5 · REAL WORK STRIP + COAST ROUTE (one black band)
   ========================================================================================= */
.wk { background: var(--ink); padding: clamp(5.5rem, 11vw, 9rem) 0 clamp(5rem, 10vw, 8rem); overflow: hidden; }
.wk__head { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.wk__head .link-arrow { color: #fff; flex: none; }
.wk__strip { --mq-gap: 14px; --mq-dur: 34s; }
.wk__strip:hover .marquee__track { animation-play-state: paused; }
.wk__strip figure { flex: none; width: clamp(260px, 30vw, 460px); }
.wk__strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; filter: saturate(.92); transition: filter .5s; }
.wk__strip figure:hover img { filter: none; }
.wk__strip figcaption { margin-top: .7rem; font-size: .8rem; color: var(--on-dark-50); }

.wk__area { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem 5rem; align-items: end; margin-top: clamp(5rem, 10vw, 8rem); padding-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--line-dark); }
.wk__areatxt .h-2 { font-size: clamp(2.1rem, 4.2vw, 4rem); max-width: 10em; }
.wk__areatxt .h-2 .soft { display: block; }
.wk__areatxt p { margin: 1.4rem 0 1.8rem; color: var(--on-dark-70); max-width: 26em; }

.route { position: relative; padding-bottom: .4rem; }
.route__ends { display: flex; justify-content: space-between; font: 700 .72rem/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.route__ends small { font-size: inherit; color: var(--on-dark-50); font-weight: 600; margin: 0 .4rem; }
.route__track { position: relative; height: 92px; margin: 1.4rem 0 1.6rem; }
.route__line { position: absolute; left: 0; right: 0; top: 30px; height: 2px; background: linear-gradient(90deg, var(--red), #ff4a43); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.6s var(--e-io); }
.route.is-in .route__line { transform: none; }
.route__track::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 2px; background: rgba(255,255,255,.12); }
.route__dot { position: absolute; left: var(--x); top: 31px; width: 0; height: 0; }
.route__dot i { position: absolute; left: -5px; top: calc(-5px + var(--dy, 0px)); width: 10px; height: 10px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .5s var(--e-out), background .3s, box-shadow .3s; transition-delay: calc(.2s + var(--x-n) * 1.4s); }
.route.is-in .route__dot i { transform: scale(1); }
.route__dot.is-inland::before { content: ""; position: absolute; left: -.5px; top: 0; width: 1px; height: var(--dy); background: rgba(255,255,255,.28); transform: scaleY(0); transform-origin: 0 0; transition: transform .5s var(--e-out) calc(.3s + var(--x-n) * 1.4s); }
.route.is-in .route__dot.is-inland::before { transform: none; }
.route__dot.is-inland i { background: var(--ink); box-shadow: inset 0 0 0 2px #fff; }
.route__dot.is-home i { background: var(--red); box-shadow: 0 0 0 5px rgba(225,6,0,.28); }
.route__dot.is-home b { position: absolute; left: 0; bottom: 14px; transform: translateX(-50%); white-space: nowrap; font: 700 .62rem/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: #ff4a43; }
.route__dot.is-on i { background: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,.22); transform: scale(1.35); transition-delay: 0s; }
.route__dot.is-home.is-on i { background: var(--red); box-shadow: 0 0 0 6px rgba(225,6,0,.4); }
.route__dot button { position: absolute; left: -11px; top: calc(-11px + var(--dy, 0px)); width: 22px; height: 22px; border-radius: 50%; }
.route__now { display: flex; align-items: baseline; gap: .9rem; min-height: 2.2rem; overflow: hidden; }
.route__now b { font: 700 clamp(1.4rem, 2.2vw, 2rem)/1.1 var(--f-sans); letter-spacing: -.035em; }
.route__now span { font-size: .86rem; color: var(--on-dark-50); }
.route__now.is-swap b, .route__now.is-swap span { animation: nowIn .55s var(--e-out) both; }
.route__now.is-swap span { animation-delay: .05s; }
@keyframes nowIn { from { opacity: 0; transform: translate3d(0, 60%, 0); } }

@media (max-width: 900px) {
  .wk__area { grid-template-columns: 1fr; gap: 2.4rem; }
}
@media (max-width: 640px) {
  .wk__head { flex-direction: column; align-items: flex-start; }
  .wk__strip figure { width: 240px; }
  .route__ends { font-size: .62rem; letter-spacing: .12em; }
  .route__ends small { display: none; }
}

/* =========================================================================================
   6 · CLOSING CTA — a note to Devon
   ========================================================================================= */
.cx { background: var(--paper); padding: clamp(6rem, 12vw, 10rem) 0; }
.cx__grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 3rem clamp(3rem, 6vw, 6rem); align-items: start; }
.cx__side { position: sticky; top: 120px; }
.cx__side .h-2 .soft { display: block; }
.cx__lede { margin: 1.5rem 0 2.6rem; color: var(--mute); font-size: 1.05rem; max-width: 24em; }
.cx__call { display: grid; gap: .8rem; justify-items: start; padding-top: 1.6rem; border-top: 1px solid var(--line-2); }
.cx__call > a:first-of-type { font: 700 clamp(1.8rem, 3vw, 2.6rem)/1 var(--f-sans); letter-spacing: -.04em; transition: color .3s; }
.cx__call > a:first-of-type:hover { color: var(--red); }
.cx__live { width: 8px; height: 8px; border-radius: 50%; background: #1ec96b; animation: live 2s infinite; }

.note { position: relative; background: #fff; border-radius: 6px; padding: clamp(1.6rem, 3.6vw, 3.4rem); box-shadow: 0 0 0 1px var(--line), 0 50px 90px -60px rgba(12,12,13,.45); }
.note__hp { position: absolute; left: -9999px; }
.note__to { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 1.1rem; margin-bottom: clamp(1.4rem, 2.6vw, 2.2rem); border-bottom: 1px solid var(--line); font: 700 .7rem/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.note__to span:last-child { color: var(--red); }
.note__txt { font: 500 clamp(1.3rem, 2.15vw, 2rem)/2 var(--f-sans); letter-spacing: -.025em; color: var(--ink); }
.nf { position: relative; display: inline-block; vertical-align: baseline; max-width: 100%; }
.nf input, .nf select {
  font: inherit; color: var(--ink); letter-spacing: inherit; line-height: 1.3;
  max-width: 100%; min-width: 4.5ch; padding: 0 .1em .05em; margin: 0 .05em;
  border: 0; border-radius: 0; background: transparent; outline: 0;
  border-bottom: 2px solid var(--line-2); transition: border-color .3s, background .3s;
  field-sizing: content; -webkit-appearance: none; appearance: none;
}
.nf input::placeholder { color: var(--mute-2); opacity: 1; font-weight: 400; }
.nf select { cursor: pointer; padding-right: 1.05em; color: var(--red-deep); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23b40500' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") right .05em center / .62em no-repeat; }
.nf--wide input { min-width: 7ch; }
.nf input:hover, .nf select:hover { border-bottom-color: var(--ink); }
.nf input:focus, .nf select:focus { border-bottom-color: var(--red); background-color: var(--red-soft); }
.nf.has-err input, .nf.has-err select { border-bottom-color: var(--red); background-color: rgba(225,6,0,.06); }
.note__more { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.note__more label { display: block; font: 700 .7rem/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin-bottom: .6rem; }
.note__more label small { font-size: inherit; font-weight: 600; color: var(--mute-2); }
.note__more textarea { width: 100%; min-height: 64px; padding: .4rem 0; border: 0; border-bottom: 2px solid var(--line-2); background: transparent; font: 500 1.05rem/1.5 var(--f-sans); color: var(--ink); resize: vertical; outline: 0; transition: border-color .3s; }
.note__more textarea:focus { border-bottom-color: var(--red); }
.note__send { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.6rem; margin-top: 2rem; }
.note__send .btn[disabled] { opacity: .7; cursor: progress; }
.note__fine { font-size: .82rem; color: var(--mute); }
.note__errs { margin-top: 1rem; font-size: .9rem; font-weight: 600; color: var(--red-deep); }
.note__errs:empty { display: none; }
.note__errs a { text-decoration: underline; }
.note__ok { display: none; text-align: left; padding: 1rem 0; }
.note.is-sent .note__form { display: none; }
.note.is-sent .note__ok { display: block; animation: okIn .8s var(--e-out) both; }
.note__tick { width: 64px; height: 64px; margin-bottom: 1.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; }
.note__tick svg { width: 28px; height: 28px; stroke-dasharray: 30; stroke-dashoffset: 30; animation: okTick .7s .3s var(--e-out) forwards; }
.note__ok p { margin-top: .8rem; color: var(--mute); }
@keyframes okIn { from { opacity: 0; transform: translate3d(0, 20px, 0); } }
@keyframes okTick { to { stroke-dashoffset: 0; } }
.nf.shake { animation: nfShake .45s; }
@keyframes nfShake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

@media (max-width: 900px) {
  .cx__grid { grid-template-columns: 1fr; }
  .cx__side { position: static; }
}
@media (max-width: 560px) {
  .note__txt { font-size: 1.22rem; line-height: 2.05; }
  .note__to { font-size: .62rem; }
  .note__send .btn { width: 100%; }
}

/* =========================================================================================
   review-only: hero exit switch (sits above the A/B/C ribbon)
   ========================================================================================= */
.exitpill {
  position: fixed; z-index: 81; left: 14px; bottom: calc(14px + var(--callbar) + 54px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: .3rem; padding: .35rem .4rem .35rem .85rem; border-radius: 999px;
  background: rgba(12,12,13,.88); color: #fff; font: 700 .72rem/1 var(--f-sans); letter-spacing: .02em;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 14px 30px -14px rgba(0,0,0,.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.exitpill { transition: opacity .4s, transform .5s var(--e-out); }
.exitpill.is-away { opacity: 0; transform: translate3d(0, 12px, 0); pointer-events: none; }
.exitpill span { margin-right: .35rem; color: var(--on-dark-70); }
.exitpill button { width: 30px; height: 30px; border-radius: 50%; font: 700 .74rem/1 var(--f-disp); background: rgba(255,255,255,.1); transition: background .3s, color .3s; }
.exitpill button:hover { background: rgba(255,255,255,.22); }
.exitpill button[aria-pressed="true"] { background: var(--red); }
@media (max-width: 1023px) { .exitpill { bottom: calc(14px + var(--callbar) + 50px + env(safe-area-inset-bottom, 0px)); } }

/* =========================================================================================
   reduced motion: no pinning, no exits, everything visible
   ========================================================================================= */
@media (prefers-reduced-motion: reduce) {
  .hx, html[data-exit] .hx { height: auto; }
  .hx__stage { position: relative; height: 100svh; }
  .hx__rows, .hx__black, .hx__next, html[data-exit] .hx__rows, html[data-exit] .hx__black, html[data-exit] .hx__next { display: none !important; }
  html[data-exit] .rr { margin-top: 0; border-radius: 0; }
  html[data-exit="c"] .rr { padding-top: clamp(6rem, 16vh, 11rem); }
  html[data-exit="c"] .rr__intro { display: block; }
  .rr__frame { clip-path: none; }
  .vx__pin { height: auto; }
  .vx__stage { position: relative; height: auto; grid-template-rows: auto; }
  .vx__photos { position: relative; inset: auto; width: 100%; height: 50vh; margin-bottom: 2rem; }
  .vx__ph { clip-path: none; }
  .vx__ph:not(:first-child) { display: none; }
  .vx__slides { width: 100%; gap: 3rem; }
  .vx__s { grid-area: auto; }
  .vx__s .vx__n, .vx__s .vx__m { opacity: 1; transform: none; }
  .vx__w > span > span { transform: none !important; }
  .vx__bar { display: none; }
  .exitpill { display: none; }
}

/* ---------- hero bottom bar options ---------- */
/* A · proof bar: glass strip, four quiet facts, live clock */
.hx__bar--a { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; background: rgba(12,12,13,.38) !important; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-top: 1px solid rgba(255,255,255,.14); }
.hbA__c { display: flex; flex-direction: column; justify-content: center; gap: .3rem; padding: 0 clamp(1rem, 2.4vw, 2.2rem); border-left: 1px solid rgba(255,255,255,.12); min-width: 0; }
.hbA__c:first-child { border-left: 0; padding-left: var(--gut); }
.hbA__c small { display: inline-flex; align-items: center; gap: .5rem; font: 600 .62rem/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.hbA__c b { font: 600 clamp(.82rem, 1vw, .95rem)/1.2 var(--f-sans); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbA__dot { width: 7px; height: 7px; border-radius: 50%; background: #1ec96b; animation: live 2s infinite; }
/* B · quiet ticker: thin, dark, fades at the edges */
.hx__bar--b { background: rgba(12,12,13,.62) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,.12); --mq-dur: 42s; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hx__bar--b .marquee__track span { font: 600 .74rem/1 var(--f-sans) !important; letter-spacing: .22em !important; color: rgba(255,255,255,.82); gap: 2.4rem !important; padding-right: 2.4rem !important; }
.hx__bar--b .marquee__track span::after { width: 5px !important; height: 5px !important; background: var(--red) !important; transform: rotate(45deg); }
/* C · service shortcuts: four real links + open 24/7 */
.hx__bar--c { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: stretch; background: rgba(12,12,13,.4) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,.14); }
.hx__bar--c a { position: relative; display: flex; align-items: center; gap: .8rem; padding: 0 clamp(1rem, 2.2vw, 2rem); border-left: 1px solid rgba(255,255,255,.12); color: #fff; font: 600 clamp(.85rem, 1.05vw, 1rem)/1 var(--f-sans); letter-spacing: -.01em; overflow: hidden; isolation: isolate; transition: color .35s; }
.hx__bar--c a:first-child { border-left: 0; padding-left: var(--gut); }
.hx__bar--c a small { font: 600 .66rem/1 var(--f-sans); letter-spacing: .14em; color: var(--red); }
.hx__bar--c a .ic { width: 15px; height: 15px; margin-left: auto; opacity: .55; transition: transform .45s var(--e-out), opacity .3s; }
.hx__bar--c a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; transform: translateY(101%); transition: transform .5s var(--e-out); }
.hx__bar--c a:hover { color: var(--ink); }
.hx__bar--c a:hover::before { transform: none; }
.hx__bar--c a:hover .ic { transform: translateX(4px); opacity: 1; }
.hbC__open { display: flex; align-items: center; gap: .55rem; padding: 0 var(--gut) 0 clamp(1rem, 2vw, 1.8rem); border-left: 1px solid rgba(255,255,255,.12); font: 600 .66rem/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.7); white-space: nowrap; }
.hbC__open i { width: 7px; height: 7px; border-radius: 50%; background: #1ec96b; animation: live 2s infinite; }
@media (max-width: 760px) {
  .hx__bar--a { grid-template-columns: 1fr 1fr; }
  .hx__bar--a .hbA__c:nth-child(n+3) { display: none; }
  .hbA__c { padding: 0 1rem; } .hbA__c:first-child { padding-left: 16px; }
  html[data-bar="c"] .hx { --tick-h: 58px; }
  .hx__bar--c { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hx__bar--c a { flex-direction: column; justify-content: center; align-items: flex-start; gap: .3rem; padding: 0 .7rem; font-size: .72rem; line-height: 1.1; }
  .hx__bar--c a:first-child { padding-left: 12px; }
  .hx__bar--c a .ic, .hbC__open { display: none; }
}

.rr__hud { position: relative !important; bottom: auto !important; margin-top: 1.3rem; }
.rr__tag { left: clamp(14px, 2vw, 22px) !important; }
.rr__tc { right: clamp(14px, 2vw, 22px) !important; }
@media (max-width: 760px) { .rr__frame { aspect-ratio: 4 / 3; } .rr__stages { grid-template-columns: 1fr 1fr 1fr !important; } }

/* no pulsing green "live" dots anywhere (Alex 2026-10-21: reads as an AI-template site) */
.hx__pill i, .cx__live, .hbA__dot, .hbC__open i { display: none !important; }