/* Public services, work and homepage scene refresh. Existing brand fonts,
   nav, footer and colour tokens remain shared with the rest of the site. */
:root { --rv-bg:#fafafa; --rv-panel:#fff; --rv-raised:#f2f2f6; --rv-text:#12121a; --rv-muted:#626271; --rv-line:#dedee6; --rv-purple:#5654e0; --rv-positive:#277751; }
html.amx-dark { --rv-bg:#0a0a0f; --rv-panel:#111118; --rv-raised:#191921; --rv-text:#f5f5f7; --rv-muted:#aaaab9; --rv-line:#2b2b37; --rv-purple:#a9a8ff; --rv-positive:#97d6b1; }
body.amx-rebuilt { background:var(--rv-bg); color:var(--rv-text); }
.rv-skip { position:fixed; top:10px; left:10px; z-index:99999; transform:translateY(-160%); padding:12px 20px; background:var(--rv-panel); color:var(--rv-text); border:1px solid var(--rv-line); border-radius:8px; }
.rv-skip:focus { transform:none; }
.framer-XHEbD .framer-3x6hey:empty { display:none!important; }
.framer-XHEbD .amx-reel-tilt { transform-origin:center center; }
body.amx-rebuilt .rv-main { padding-top:0; }
.rv-main { font-family:Satoshi,"Inter Tight",Inter,sans-serif; }
.rv-shell { width:min(1200px,calc(100% - 64px)); margin-inline:auto; }
.rv-main h1,.rv-main h2,.rv-main h3,.rv-main p,.rv-main figure { margin:0; }
.rv-main h1 { font-size:clamp(40px,4.5vw,66px); line-height:1.06; letter-spacing:-.045em; font-weight:750; }
.rv-main h2 { font-size:clamp(30px,3.4vw,46px); line-height:1.1; letter-spacing:-.035em; font-weight:700; }
.rv-main h3 { font-size:26px; line-height:1.15; letter-spacing:-.025em; }
.rv-main p { color:var(--rv-muted); line-height:1.65; font-size:17px; }
.rv-main a { color:inherit; text-decoration:none; }
.rv-kicker { display:block; color:var(--rv-purple); font:500 11px/1.4 "IBM Plex Mono",monospace; letter-spacing:.13em; text-transform:uppercase; margin-bottom:18px; }
.rv-main a:focus-visible,.rv-main summary:focus-visible,.scene-toggle:focus-visible { outline:2px solid var(--rv-purple); outline-offset:5px; }
.rv-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:26px; }
.rv-main .rv-button,.rv-button { display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:50px; padding:13px 22px; background:var(--amx-accent,#7776f6); color:#09090b; border-radius:8px; font-size:15px; font-weight:700; text-decoration:none; }
.rv-button svg,.rv-link svg { width:18px; height:18px; transition:transform .22s ease; flex-shrink:0; }
.rv-button:hover svg,.rv-link:hover svg { transform:translateX(4px); }
.rv-main .rv-link { display:inline-flex; gap:12px; align-items:center; min-height:44px; font-size:14px; font-weight:650; }
.rv-main .rv-link:hover { color:var(--rv-purple); }
.rv-services-hero { padding-top:68px; padding-bottom:70px; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.rv-services-hero h1 em { font-style:normal; color:var(--rv-purple); }
.rv-services-hero p { margin-top:24px; max-width:49ch; }
.rv-services-hero .rv-location { font-size:12px; margin-top:18px; }
.rv-system { border:1px solid var(--rv-line); border-radius:18px; background:var(--rv-panel); padding:22px; position:relative; }
.rv-system-label { display:flex; justify-content:space-between; font:11px/1.4 "IBM Plex Mono",monospace; color:var(--rv-muted); margin-bottom:18px; }
.rv-system-label span:last-child { color:var(--rv-purple); }
.rv-system-screen { border:1px solid var(--rv-line); border-radius:9px; overflow:hidden; position:relative; }
.rv-system-screen img { display:block; width:100%; height:auto; }
.rv-system-screen > span { display:block; font:10px/1.4 "IBM Plex Mono",monospace; color:var(--rv-muted); padding:10px 12px; background:var(--rv-raised); }
.rv-system-flow { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding-top:29px; }
.rv-system-flow::before { content:""; position:absolute; height:1px; left:15%; right:15%; top:50px; background:var(--rv-line); }
.rv-flow-step { text-align:center; position:relative; }
.rv-flow-step > span { position:relative; display:grid; place-items:center; width:42px; height:42px; background:var(--rv-raised); color:var(--rv-purple); border:1px solid var(--rv-line); border-radius:12px; margin:0 auto 12px; }
.rv-flow-step > span::after { content:""; position:absolute; inset:-1px; border:1px solid var(--rv-purple); border-radius:12px; animation:rv-step 8s ease infinite; animation-delay:calc(var(--step)*1.1s); opacity:0; }
.rv-flow-step b { display:block; font-size:12px; font-weight:600; }
.rv-flow-step small { display:block; font-size:10px; color:var(--rv-muted); margin-top:5px; }
.rv-system .scene-toggle { margin:18px 0 -8px auto; }
@keyframes rv-step { 8%,28% { opacity:1; transform:scale(1); } 45%,100% { opacity:0; transform:scale(1.12); } }
.rv-route-nav { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--rv-line); }
.rv-route-nav a { display:flex; align-items:center; gap:16px; padding:25px 16px; border-right:1px solid var(--rv-line); }
.rv-route-nav a:last-child { border-right:0; }
.rv-route-nav a:hover { background:var(--rv-panel); }
.rv-route-nav small { color:var(--rv-purple); font:11px monospace; }
.rv-route-nav strong { display:block; font-size:17px; font-weight:650; }
.rv-route-nav span span { display:block; color:var(--rv-muted); font-size:12px; margin-top:4px; }
.rv-route-nav b { margin-left:auto; color:var(--rv-purple); }
.rv-service-group { padding-top:90px; scroll-margin-top:115px; }
.rv-group-head { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:30px; }
.rv-group-head p { max-width:43ch; font-size:15px; }
.rv-service-pair { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.rv-service-card { display:flex; flex-direction:column; border:1px solid var(--rv-line); border-radius:16px; overflow:hidden; background:var(--rv-panel); }
.rv-service-media { height:260px; background:var(--rv-raised); padding:25px 32px 0; overflow:hidden; border-bottom:1px solid var(--rv-line); }
.rv-service-media img { display:block; width:100%; height:auto; border-radius:8px 8px 0 0; box-shadow:0 12px 28px #0002; transition:transform .7s cubic-bezier(.22,1,.36,1); }
.rv-service-card:hover .rv-service-media img { transform:translateY(-10px); }
.rv-service-copy { padding:28px 32px 30px; flex:1; display:flex; flex-direction:column; }
.rv-service-copy .rv-kicker { margin-bottom:10px; }
.rv-service-copy p { font-size:15px; margin-top:14px; }
.rv-includes { display:flex; flex-wrap:wrap; gap:7px; margin:22px 0; padding:0; list-style:none; }
.rv-includes li { font-size:11px; border:1px solid var(--rv-line); padding:6px 9px; border-radius:5px; color:var(--rv-muted); }
.rv-service-copy .rv-link { align-self:flex-start; margin-top:auto; }
.rv-service-media:has(.amx-scene) { padding:20px 32px; height:310px; }
.rv-service-media .amx-scene { height:270px; max-width:400px; margin:auto; }
.rv-service-media .scene-stage { padding:14px 16px; }
.rv-service-media .scene-toggle { position:absolute; right:0; bottom:0; background:var(--rv-panel); margin-bottom:3px; }
.rv-service-media .scene-chrome { padding:12px 14px; }
.rv-service-media .scene-result { padding:8px; margin-top:7px; }
.rv-service-media .scene-pagination { margin:6px 0; }
.rv-service-media .scene-task { padding:10px; margin-top:7px; }
.rv-service-media .scene-task-route { height:22px; }
.rv-service-media .scene-task-finish small { display:none; }
.rv-service-media .scene-stage { transform:scale(.96); transform-origin:top center; }
.rv-service-media .rv-mini-search { padding:20px; border:1px solid var(--rv-line); border-radius:10px; background:var(--rv-panel); font-size:14px; }
.rv-mini-search strong { display:block; color:var(--rv-purple); font-size:20px; margin:14px 0 8px; }
.rv-mini-search span { display:block; font:11px monospace; color:var(--rv-muted); }
.rv-mini-search p { font-size:13px; margin:0 0 16px; }
.rv-mini-search ul { border-top:1px solid var(--rv-line); padding:12px 0 0; list-style:none; display:flex; gap:10px; flex-wrap:wrap; margin:0; }
.rv-mini-search li { font-size:11px; color:var(--rv-positive); }
.rv-connected { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:20px; height:100%; }
.rv-connected span { display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--rv-muted); font-size:12px; }
.rv-connected img { width:55px; height:55px; padding:12px; object-fit:contain; background:var(--rv-panel); border:1px solid var(--rv-line); border-radius:12px; box-shadow:none; }
.rv-connected i { width:30px; height:1px; background:var(--rv-purple); }
.rv-connected i { position:relative; overflow:hidden; }
.rv-connected i::after { content:""; position:absolute; inset:0; background:var(--rv-text); animation:scene-travel 2.8s linear infinite; }
.rv-connected + .scene-toggle { position:absolute; bottom:5px; right:5px; }
.rv-process { padding-block:90px; }
.rv-process-grid { margin-top:34px; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.rv-process-grid article { padding-top:20px; border-top:1px solid var(--rv-line); }
.rv-process-grid span { font:12px monospace; color:var(--rv-purple); }
.rv-process-grid h3 { font-size:23px; margin:18px 0 12px; }
.rv-process-grid p { font-size:15px; }
.rv-proof { display:grid; grid-template-columns:.65fr 1fr; gap:60px; padding:40px; background:var(--rv-panel); border:1px solid var(--rv-line); border-radius:16px; align-items:center; }
.rv-proof blockquote { font-size:24px; line-height:1.5; margin:0 0 20px; letter-spacing:-.02em; }
.rv-proof figcaption { color:var(--rv-muted); font-size:13px; line-height:1.6; }
.rv-proof figcaption strong { color:var(--rv-text); }
.rv-proof .rv-kicker { margin-bottom:12px; }
.rv-close { display:flex; justify-content:space-between; align-items:center; gap:36px; padding-block:90px; }
.rv-close p { margin-top:16px; max-width:54ch; }
.rv-close .rv-button { flex-shrink:0; }
.rv-work-head { padding-top:52px; padding-bottom:30px; display:flex; justify-content:space-between; align-items:flex-end; gap:30px; }
.rv-work-head .rv-kicker { margin-bottom:10px; }
.rv-work-head h1 { font-size:clamp(36px,4vw,54px); }
.rv-work-head p { margin-top:12px; font-size:15px; }
.rv-work-head .rv-link { white-space:nowrap; }
.rv-work-grid { display:grid; grid-template-columns:1fr 1fr; gap:44px 26px; }
.rv-project { min-width:0; }
.rv-project-image { display:block; border:1px solid var(--rv-line); border-radius:12px; overflow:hidden; position:relative; background:var(--rv-panel); }
.rv-project-image img { width:100%; height:auto; aspect-ratio:1170/732; object-fit:cover; object-position:top; display:block; transition:transform .65s cubic-bezier(.22,1,.36,1); }
.rv-project-image:hover img { transform:scale(1.025); }
.rv-project-image::after { content:"View project ↗"; position:absolute; bottom:18px; right:18px; padding:10px 14px; background:#0a0a0f; color:#fff; font-size:12px; border:1px solid #ffffff30; border-radius:6px; opacity:0; transform:translateY(5px); transition:opacity .22s,transform .22s; }
.rv-project-image:hover::after,.rv-project-image:focus-visible::after { opacity:1; transform:none; }
.rv-project-meta { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:18px; }
.rv-project-meta h2 { font-size:23px; }
.rv-project-meta > span { color:var(--rv-muted); font:11px monospace; }
.rv-project p { font-size:14px; line-height:1.55; margin:10px 0 8px; max-width:57ch; }
.rv-project-links { display:flex; align-items:center; flex-wrap:wrap; gap:20px; }
.rv-project-links .rv-link { font-size:12px; }
.rv-project-links .rv-link:last-child { color:var(--rv-muted); }
.rv-work-reviews { margin-block:55px; padding:38px; border:1px solid var(--rv-line); background:var(--rv-panel); border-radius:16px; scroll-margin-top:110px; }
.rv-review-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; }
.rv-review-heading h2 { font-size:30px; }
.rv-review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.rv-review-grid figure + figure { border-left:1px solid var(--rv-line); padding-left:28px; }
.rv-review-grid blockquote { margin:12px 0 20px; font-size:16px; line-height:1.65; }
.rv-review-grid figcaption { font-size:12px; color:var(--rv-muted); line-height:1.7; }
.rv-review-grid figcaption b { display:block; color:var(--rv-text); }
.rv-stars { color:var(--rv-purple); font-size:15px; letter-spacing:3px; }
.rv-more-work { margin-top:60px; padding-top:28px; border-top:1px solid var(--rv-line); }
.rv-more-work h2 { font-size:30px; margin-bottom:26px; }
.rv-work-grid.rv-work-small { grid-template-columns:repeat(3,1fr); gap:24px; }
.rv-work-small .rv-project-meta h2 { font-size:19px; }
.rv-work-small .rv-project-meta > span { display:none; }
/* Illustrations: layered application UI with a distinct, legible story. */
.amx-scene { font-family:"Inter Tight",Inter,sans-serif; color:var(--rv-text); background:var(--rv-panel); border:1px solid var(--rv-line); border-radius:12px; overflow:hidden; position:relative; }
.amx-scene * { box-sizing:border-box; }
.scene-chrome { display:flex; align-items:center; gap:10px; padding:14px; background:var(--rv-raised); border-bottom:1px solid var(--rv-line); }
.scene-chrome > span { display:flex; gap:3px; }
.scene-chrome i { display:block; width:4px; height:4px; border-radius:50%; background:var(--rv-muted); opacity:.45; }
.scene-chrome b { font-size:10px; font-weight:500; }
.scene-chrome small { margin-left:auto; font:8px monospace; letter-spacing:.08em; color:var(--rv-muted); }
.scene-stage { padding:18px 16px; min-height:263px; }
.scene-stage svg { width:20px; height:20px; flex-shrink:0; }
.scene-search { display:flex; gap:8px; align-items:center; border:1px solid var(--rv-line); border-radius:7px; padding:11px 9px; font-size:11px; }
.scene-search svg { width:14px; height:14px; color:var(--rv-purple); }
.scene-caret { width:1px; height:12px; background:var(--rv-purple); animation:scene-caret 1s steps(2) infinite; }
.scene-result { display:flex; align-items:center; gap:9px; margin-top:10px; padding:9px; position:relative; border-radius:7px; }
.scene-favicon { width:24px; height:24px; display:grid; place-items:center; flex-shrink:0; border:1px solid var(--rv-line); border-radius:7px; font-size:11px; }
.scene-result > div { flex:1; }
.scene-result b { display:block; font-size:11px; font-weight:550; }
.scene-result i { display:block; height:3px; width:85%; background:var(--rv-line); margin-top:5px; border-radius:3px; }
.scene-result i:last-child { width:60%; }
.scene-result-muted { animation:scene-search-result 9s ease infinite; }
.scene-result-muted + .scene-result-muted { animation-delay:.35s; }
.scene-seo-preview { padding:17px 0 6px; }
.scene-seo-preview > span { color:var(--rv-muted); font:9px monospace; }
.scene-seo-preview > b { display:block; color:var(--rv-purple); font-size:16px; margin:8px 0; }
.scene-seo-preview > p { font-size:11px; line-height:1.5; color:var(--rv-muted); margin:0; }
.scene-pagination { display:flex; gap:10px; align-items:center; font-size:10px; margin:12px 0; color:var(--rv-muted); }
.scene-pagination strong { display:grid; place-items:center; width:22px; height:22px; background:var(--rv-raised); color:var(--rv-purple); border-radius:4px; }
.scene-pagination small { font-size:9px; margin-left:auto; }
.scene-your-result { color:var(--rv-purple); border:1px solid var(--rv-purple); background:var(--rv-raised); animation:scene-your-result 9s ease infinite; }
.scene-your-result small { display:block; color:var(--rv-muted); font-size:10px; margin-top:4px; }
.scene-target { position:absolute; top:-4px; right:-4px; width:7px; height:7px; background:var(--rv-purple); border-radius:50%; }
.scene-incoming { display:flex; align-items:center; gap:10px; border:1px solid var(--rv-purple); border-radius:9px; padding:15px 11px; animation:scene-message 9s ease infinite; }
.scene-incoming > svg { color:var(--rv-purple); }
.scene-incoming b { display:block; font-size:11px; }
.scene-incoming span { display:block; font-size:10px; color:var(--rv-muted); margin-top:6px; }
.scene-incoming > small { margin-left:auto; font:8px monospace; color:var(--rv-muted); }
.scene-wait { display:flex; align-items:center; gap:10px; margin:22px 0 16px; }
.scene-clock { border:1px solid var(--rv-line); border-radius:50%; width:34px; height:34px; display:grid; place-items:center; color:var(--rv-purple); }
.scene-clock svg { animation:scene-clock 9s ease-in-out infinite; }
.scene-wait-line { flex:1; height:1px; background:var(--rv-line); overflow:hidden; }
.scene-wait-line i { display:block; width:40%; height:1px; background:var(--rv-purple); animation:scene-travel 3s ease infinite; }
.scene-wait b { font-size:10px; color:var(--rv-muted); font-weight:400; }
.scene-week { position:relative; display:flex; justify-content:space-between; padding:10px 5px 15px; border-bottom:1px solid var(--rv-line); font:9px monospace; color:var(--rv-muted); }
.scene-week i { position:absolute; bottom:-2px; left:0; height:3px; width:100%; background:var(--rv-purple); transform-origin:left; animation:scene-week 9s ease infinite; }
.scene-overdue { display:flex; gap:9px; align-items:center; margin-top:18px; animation:scene-overdue 9s ease infinite; }
.scene-status-dot { width:6px; height:6px; border-radius:50%; background:#dbaa78; }
.scene-overdue b,.scene-task-finish b { display:block; font-size:11px; font-weight:550; }
.scene-overdue small,.scene-task-finish small { display:block; font-size:10px; color:var(--rv-muted); margin-top:5px; }
.scene-task-heading { display:flex; justify-content:space-between; align-items:center; color:var(--rv-purple); font:9px monospace; letter-spacing:.06em; }
.scene-task-heading svg { width:16px; height:16px; }
.scene-task { display:flex; gap:10px; align-items:center; padding:12px 10px; border:1px solid var(--rv-line); background:var(--rv-raised); border-radius:7px; margin-top:10px; animation:scene-task 9s ease infinite; animation-delay:calc(var(--step)*.5s); }
.scene-task-box { border:1px solid var(--rv-line); border-radius:4px; width:16px; height:16px; color:var(--rv-purple); }
.scene-task-box svg { width:14px; height:14px; animation:scene-check 9s ease infinite; animation-delay:calc(var(--step)*.5s); }
.scene-task b { font-size:11px; font-weight:500; }
.scene-repeat { margin-left:auto; color:var(--rv-muted); font-size:16px; }
.scene-task-route { display:flex; align-items:center; gap:10px; height:35px; justify-content:center; }
.scene-task-route span { color:var(--rv-purple); }
.scene-task-route svg { width:14px; height:14px; }
.scene-task-route i { height:1px; width:45px; background:var(--rv-line); }
.scene-task-finish { text-align:center; }
.scene-toggle { display:block; margin:0 14px 10px auto; padding:6px 4px; min-height:28px; background:none; border:0; border-radius:4px; font:10px/1.3 "Inter Tight",sans-serif; color:var(--rv-muted); cursor:pointer; }
.scene-toggle:hover { color:var(--rv-purple); }
.scene-toggle[hidden] { display:none; }
.amx-scene:not(.scene-playing) *,.amx-scene:not(.scene-playing) *::after { animation-play-state:paused!important; }
@keyframes scene-caret { 50% { opacity:0; } }
@keyframes scene-search-result { 0%,8% { opacity:.65; transform:translateY(6px); } 20%,55% { opacity:1; transform:none; } 75%,100% { opacity:.7; transform:none; } }
@keyframes scene-your-result { 0%,40% { opacity:.75; transform:translateY(5px); } 55%,90% { opacity:1; transform:none; } 100% { opacity:.75; transform:translateY(5px); } }
@keyframes scene-message { 0%,7% { transform:translateY(7px); opacity:.7; } 18%,45% { transform:none; opacity:1; } 75%,100% { transform:none; opacity:.7; } }
@keyframes scene-clock { 0%,15% { transform:rotate(0); } 70%,100% { transform:rotate(360deg); } }
@keyframes scene-travel { from { transform:translateX(-110%); } to { transform:translateX(350%); } }
@keyframes scene-week { 0%,10% { transform:scaleX(.02); } 72%,100% { transform:scaleX(1); } }
@keyframes scene-overdue { 0%,40% { opacity:.65; transform:translateY(4px); } 65%,100% { opacity:1; transform:none; } }
@keyframes scene-task { 0%,8% { transform:translateX(6px); opacity:.75; } 20%,90% { transform:none; opacity:1; } 100% { transform:translateX(6px); opacity:.75; } }
@keyframes scene-check { 0%,35% { opacity:0; transform:scale(.5); } 50%,90% { opacity:1; transform:scale(1); } 100% { opacity:0; } }
/* Replace the old oversized line drawings without disturbing the section. */
#amx-sf { margin:0 auto; padding:55px 0 36px; }
#amx-sf .amx-sf-card { padding:12px 12px 25px; }
#amx-sf .amx-sf-art { border:0; padding:0; background:none; }
#amx-sf .amx-sf-art svg { display:inline-block; width:20px; height:20px; }
#amx-sf .amx-sf-card h3 { margin:22px 10px 12px; font-size:23px; }
#amx-sf .amx-sf-card > p { margin:0 10px; font-size:15px; }
#amx-sf .scene-chrome { min-height:40px; }
#amx-sf .amx-scene { height:355px; }
#amx-sf .scene-stage { min-height:276px; }
#amx-sf .scene-toggle { position:absolute; bottom:0; right:0; }
#amx-sf .scene-result b,#amx-sf .scene-task b,#amx-sf .scene-incoming b { font-size:12px; }
.amx-home-intro { max-width:740px; margin:0 auto; padding:40px 24px 0; text-align:center; }
.amx-home-intro h2 { font:700 clamp(32px,4vw,48px)/1.12 Satoshi,"Inter Tight",sans-serif; letter-spacing:-.035em; color:var(--rv-text); margin:0 0 16px; }
.amx-home-intro p { font:17px/1.65 "Inter Tight",sans-serif; color:var(--rv-muted); margin:0; }
.amx-home-intro a { display:inline-block; color:var(--rv-purple); padding:14px; font:600 14px/1.4 "Inter Tight",sans-serif; }
.amx-home-enquiry { width:min(1100px,92%); margin:25px auto 30px; padding:40px; display:grid; grid-template-columns:.85fr 1.15fr; gap:65px; align-items:center; background:var(--rv-panel); border:1px solid var(--rv-line); border-radius:18px; }
.amx-home-enquiry h2 { font:700 clamp(30px,3.5vw,44px)/1.1 Satoshi,"Inter Tight",sans-serif; letter-spacing:-.035em; margin:0 0 18px; color:var(--rv-text); }
.amx-home-enquiry p { font:16px/1.6 "Inter Tight",sans-serif; color:var(--rv-muted); margin:0; max-width:32ch; }
.rv-form-location { display:block; color:var(--rv-muted); font:12px/1.7 "Inter Tight",sans-serif; margin-top:26px; }
.rv-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; }
.rv-quick-form { width:100%; }
.rv-quick-form .amx-field { min-width:0; }
.amx-home-enquiry .rv-quick-form .amx-field label { color:var(--rv-text); font-size:12px; margin-bottom:8px; text-shadow:none; }
.rv-quick-form .amx-field label span { color:var(--rv-muted); font-size:10px; }
html .amx-home-enquiry .rv-quick-form .amx-field input { width:100%; min-width:0; box-sizing:border-box; background:var(--rv-bg); border:1px solid var(--rv-line); border-radius:7px; padding:12px; height:46px; color:var(--rv-text); font-size:16px; }
html .amx-home-enquiry .rv-quick-form .amx-field input:focus { outline:2px solid var(--rv-purple); outline-offset:2px; border-color:transparent; box-shadow:none; }
html .amx-home-enquiry .rv-quick-form .amx-field input::placeholder { color:var(--rv-muted); opacity:.7; font-size:13px; }
.rv-quick-form .amx-recaptcha-note { font:10px/1.5 "Inter Tight",sans-serif!important; text-align:center; margin:0; }
.rv-quick-form button[type=submit] { margin-top:18px; min-height:48px; background:var(--amx-accent,#7776f6); color:#09090b; border-radius:7px; width:100%; box-shadow:none; }
.rv-quick-form .amx-cta-note { color:var(--rv-muted); font-size:11px; text-align:center; display:block; margin-top:10px; }
.rv-home-services { width:min(1200px,92%); margin:0 auto; padding:65px 0; }
.rv-home-services .rv-group-head h2 { font:700 clamp(34px,4vw,52px)/1.05 Satoshi,"Inter Tight",sans-serif; letter-spacing:-.035em; color:var(--rv-text); }
.rv-home-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.rv-home-card { border:1px solid var(--rv-line); border-radius:16px; overflow:hidden; background:var(--rv-panel); display:flex; flex-direction:column; }
.rv-home-art { height:330px; background:var(--rv-raised); padding:18px 16px 0; overflow:hidden; border-bottom:1px solid var(--rv-line); }
.rv-home-art > img { width:100%; height:auto; display:block; border-radius:8px; transition:transform 1.2s cubic-bezier(.22,1,.36,1); margin-top:30px; }
.rv-home-card:hover .rv-home-art > img { transform:translateY(-18px); }
.rv-home-art .amx-scene { height:312px; }
.rv-home-art .scene-stage { padding:12px; min-height:0; }
.rv-home-art .scene-result { padding:7px; margin-top:7px; }
.rv-home-art .scene-task { padding:9px; margin-top:8px; }
.rv-home-art .scene-task-route { height:24px; }
.rv-home-art .scene-task-finish small { display:none; }
.rv-home-art .scene-toggle { position:absolute; right:0; bottom:0; margin-bottom:0; background:var(--rv-panel); }
.rv-home-copy { padding:25px; flex:1; display:flex; flex-direction:column; }
.rv-home-copy .rv-kicker { font-size:10px; margin-bottom:12px; }
.rv-home-copy h3 { font-size:26px; }
.rv-home-copy p { font-size:15px; margin:14px 0 22px; }
.rv-home-copy .rv-link { margin-top:auto; font-size:13px; align-self:flex-start; }
.rv-home-icon { width:42px; height:42px; display:grid; place-items:center; color:var(--rv-purple); background:var(--rv-raised); border:1px solid var(--rv-line); border-radius:11px; margin:25px 25px 0; font-size:23px; transition:transform .35s ease; }
.rv-home-card:hover .rv-home-icon { transform:translateY(-3px); }
.rv-home-compact .rv-home-copy { padding-top:22px; }
.rv-home-all { display:flex; justify-content:center; margin-top:25px; }
.amx-home-close { margin:40px auto 70px; width:min(1200px,92%); padding:45px; border:1px solid var(--rv-line); border-radius:16px; background:var(--rv-panel); display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start; }
.amx-home-close h2 { font:700 clamp(30px,4vw,44px)/1.12 Satoshi,"Inter Tight",sans-serif; color:var(--rv-text); letter-spacing:-.035em; margin:0 0 20px; }
.amx-home-close p { font:16px/1.65 "Inter Tight",sans-serif; color:var(--rv-muted); margin:0; }
@media(max-width:1000px) {
  .rv-services-hero { gap:30px; }
  .rv-service-media,.rv-service-media:has(.amx-scene) { padding-inline:20px; }
  .rv-service-copy { padding:24px; }
  .rv-work-small .rv-project-meta h2 { font-size:17px; }
  .rv-review-grid { gap:20px; }
  .rv-review-grid figure + figure { padding-left:20px; }
}
@media(max-width:760px) {
  .rv-shell { width:calc(100% - 36px); }
  .rv-services-hero { padding-top:42px; padding-bottom:36px; grid-template-columns:1fr; gap:35px; }
  .rv-services-hero h1 { max-width:13ch; }
  .rv-services-hero p { font-size:16px; margin-top:18px; }
  .rv-services-hero .rv-location { margin-top:14px; }
  .rv-system { padding:17px; max-width:500px; width:100%; margin:auto; }
  .rv-route-nav { grid-template-columns:1fr; }
  .rv-route-nav a { border-right:0; border-bottom:1px solid var(--rv-line); padding:17px 8px; }
  .rv-route-nav a:last-child { border-bottom:0; }
  .rv-route-nav span span { display:inline; margin-left:10px; }
  .rv-route-nav strong { display:inline; font-size:15px; }
  .rv-service-group { padding-top:55px; }
  .rv-group-head { flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:24px; }
  .rv-service-pair { grid-template-columns:1fr; gap:20px; }
  .rv-service-media { height:225px; padding-top:22px; }
  .rv-service-copy h3 { font-size:25px; }
  .rv-service-copy p { font-size:15px; }
  .rv-process { padding-block:55px; }
  .rv-process-grid { grid-template-columns:1fr; gap:22px; margin-top:25px; }
  .rv-process-grid h3 { margin-top:12px; }
  .rv-proof { grid-template-columns:1fr; padding:26px; gap:20px; }
  .rv-proof blockquote { font-size:21px; }
  .rv-close { padding-block:55px; flex-direction:column; align-items:flex-start; gap:24px; }
  .rv-work-head { padding-top:32px; padding-bottom:24px; align-items:flex-start; flex-direction:column; gap:8px; }
  .rv-work-head p { font-size:14px; max-width:37ch; margin-top:10px; }
  .rv-work-head .rv-link { min-height:34px; font-size:12px; }
  .rv-work-grid,.rv-work-grid.rv-work-small { grid-template-columns:1fr; gap:28px; }
  .rv-project-meta { padding-top:16px; }
  .rv-project-meta h2 { font-size:22px; }
  .rv-project-image::after { display:none; }
  .rv-work-reviews { margin-block:36px; padding:25px; }
  .rv-review-heading { flex-direction:column; align-items:flex-start; gap:10px; }
  .rv-review-grid { grid-template-columns:1fr; gap:25px; }
  .rv-review-grid figure + figure { padding:24px 0 0; border-left:0; border-top:1px solid var(--rv-line); }
  .rv-review-grid blockquote { margin-bottom:12px; }
  .rv-more-work { margin-top:36px; }
  .rv-work-small .rv-project-meta h2 { font-size:22px; }
  #amx-sf { padding-top:45px; }
  #amx-sf .amx-sf-grid { gap:24px; }
  .amx-home-close { grid-template-columns:1fr; gap:28px; padding:26px; }
  .amx-home-intro { padding-top:25px; }
  .framer-XHEbD .framer-10y5ykl { gap:40px!important; padding-top:112px!important; padding-bottom:35px!important; }
  .framer-XHEbD .amx-hero-actions { flex-direction:column!important; gap:10px!important; }
  .framer-XHEbD .amx-hero-actions > * { order:0!important; }
  .framer-XHEbD .framer-3x6hey { display:none!important; }
  .amx-home-enquiry { padding:25px; grid-template-columns:1fr; gap:26px; margin-top:0; }
  .rv-form-grid { gap:16px; grid-template-columns:1fr; }
  .rv-form-location { display:none; }
  .rv-home-grid { grid-template-columns:1fr; }
  .rv-home-services { padding-top:40px; }
  .rv-home-art { height:325px; }
  .rv-home-art .amx-scene { height:307px; }
  .rv-home-art .scene-chrome { padding:11px; }
  .rv-home-art .scene-pagination { margin:7px 0; }
  .rv-home-copy h3 { font-size:25px; }
  .rv-home-compact { flex-direction:row; }
  .rv-home-compact .rv-home-icon { flex-shrink:0; margin:25px 0 0 20px; }
  .rv-home-compact .rv-home-copy { padding:25px 20px; }
  .rv-home-compact .rv-home-copy h3 { font-size:23px; }
}
@media(prefers-reduced-motion:reduce) {
  .amx-scene *,.amx-scene *::after { animation:none!important; }
  .rv-main * { transition:none!important; }
  .scene-toggle { display:none!important; }
  .scene-caret { opacity:0; }
}

/* ── Quick enquiry: one question at a time ────────────────────────────────
   The grid stays the no-JS layout. rv-quick-form.js adds .rvq-track and the
   rules below only take over once it has, so a failed script degrades to the
   plain four-field form rather than to nothing. */
.rv-form-grid[data-rvq-on] { display:block; position:relative; }
.rvq-track { position:relative; }
/* Only the step that is away leaves the flow, so the active one still gives
   the track its height and nothing has to measure anything. */
.rvq-step {
  opacity:1; transform:none;
  transition:opacity .18s ease, transform .22s cubic-bezier(.16,1,.3,1);
}
.rvq-step[data-away] {
  position:absolute; inset:0; opacity:0; visibility:hidden; pointer-events:none;
}
.rvq-step[data-away="next"] { transform:translateX(18px); }
.rvq-step[data-away="prev"] { transform:translateX(-18px); }
.rvq-step .amx-field label { font-size:15px!important; font-weight:600; }
.rvq-step .amx-field label span { font-size:11px; font-weight:400; }

/* The opening question is a choice, not a text field. */
.rvq-choices { display:grid; gap:8px; margin-top:4px; }
.rvq-choice {
  display:flex; align-items:center; gap:12px; cursor:pointer;
  padding:12px 14px; border:1px solid var(--rv-line); border-radius:9px;
  background:var(--rv-bg); transition:border-color .18s ease, background-color .18s ease;
}
.rvq-choice input { position:absolute; opacity:0; width:0; height:0; }
.rvq-key {
  flex:none; width:24px; height:24px; display:grid; place-items:center;
  border:1px solid var(--rv-line); border-radius:6px;
  font:600 12px/1 "Work Sans","Inter Tight",sans-serif; color:var(--rv-muted);
  transition:border-color .18s ease, color .18s ease, background-color .18s ease;
}
.rvq-text { font:400 14px/1.4 "Work Sans","Inter Tight",sans-serif; color:var(--rv-text); }
.rvq-choice:hover { border-color:var(--amx-accent,#7776f6); }
.rvq-choice:has(input:checked) { border-color:var(--amx-accent,#7776f6); background:rgba(119,118,246,.08); }
.rvq-choice:has(input:checked) .rvq-key { background:var(--amx-accent,#7776f6); border-color:transparent; color:#09090b; }
/* Keyboard users get the same ring the inputs get. */
.rvq-choice:has(input:focus-visible) { outline:2px solid var(--rv-purple); outline-offset:2px; }

/* Phone or email: two inputs, one answer. */
.rvq-field-either input + input { margin-top:8px; }
.rvq-hint { margin:8px 0 0; font:300 12px/1.5 "Work Sans","Inter Tight",sans-serif; color:var(--rv-muted); }

.rvq-nav { margin-top:18px; }
.rvq-progress { height:3px; border-radius:2px; background:var(--rv-line); overflow:hidden; }
.rvq-progress i {
  display:block; height:100%; width:25%; border-radius:2px;
  background:var(--amx-accent,#7776f6);
  transition:width .28s cubic-bezier(.16,1,.3,1);
}
.rvq-controls { display:flex; align-items:center; gap:12px; margin-top:12px; }
.rvq-count { font:11px/1 "Inter Tight",sans-serif; color:var(--rv-muted); text-align:center; }
/* The site styles bare buttons globally, hence the specificity here. */
html .amx-home-enquiry .rv-quick-form .rvq-controls button {
  background:none; border:1px solid var(--rv-line); color:var(--rv-text);
  font:600 13px/1 "Inter Tight",sans-serif; padding:10px 18px; border-radius:7px;
  min-height:0; width:auto; box-shadow:none; cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background-color .2s ease;
}
html .amx-home-enquiry .rv-quick-form .rvq-controls .rvq-back:hover {
  border-color:var(--amx-accent,#7776f6); color:var(--amx-accent,#7776f6);
}
/* Next is the only thing to do on this screen, so it takes the room the count
   used to and reads as the primary action rather than a peer of Back. */
html .amx-home-enquiry .rv-quick-form .rvq-controls .rvq-next {
  border-color:transparent; background:var(--amx-accent,#7776f6); color:#09090b;
  flex:1 1 auto; min-width:0; min-height:48px; font-size:15px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 10px 24px -12px var(--amx-accent,#7776f6);
}
html .amx-home-enquiry .rv-quick-form .rvq-controls .rvq-next::after {
  content:"\2192"; font-size:16px; line-height:1; transition:transform .2s ease;
}
html .amx-home-enquiry .rv-quick-form .rvq-controls .rvq-next:hover { filter:brightness(1.08); }
html .amx-home-enquiry .rv-quick-form .rvq-controls .rvq-next:hover::after { transform:translateX(3px); }
html .amx-home-enquiry .rv-quick-form .rvq-controls .rvq-back { flex:0 0 auto; min-height:48px; }
/* `.amx-cta-form button { flex:1 0 100% }` under 520px was written for the
   submit button and caught these two as well, stretching Next to the full form
   width inside a row that also holds Back and the counter, so it ran off the
   right edge of the card on phones. The flex values above are the fix; this
   guards the basis explicitly because that rule carries no !important but does
   load after this file on some pages. */
@media (max-width:520px) {
  html .amx-home-enquiry .rv-quick-form .rvq-controls .rvq-next { flex:1 1 0%; }
  html .amx-home-enquiry .rv-quick-form .rvq-controls .rvq-back { flex:0 0 auto; }
  .rvq-count { order:3; flex:0 0 auto; }
}
/* [hidden] loses to the global button display rule without this. */
html .amx-home-enquiry .rv-quick-form [hidden] { display:none!important; }
.rvq-ready button[type=submit] { margin-top:14px; }

@media (prefers-reduced-motion: reduce) {
  .rvq-step, .rvq-progress i { transition:none; }
  .rvq-step[data-away] { transform:none; }
}

/* ── Portfolio: the borrowed layout ───────────────────────────────────────────
   Structure from the reference: a quiet full-height opening statement, a client
   row, big alternating work cards, a results block and a closing invitation.
   Type, colour and spacing stay on the site's own tokens so the page still
   belongs to the nav and footer wrapped around it. */
.pf-hero {
  min-height:min(78vh,760px); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:120px 24px 72px; position:relative;
}
/* The template sets this at 56px / 150% / -0.02em in Work Sans Light, and
   carries the sentence break on weight: the promise stays quiet, the thing we
   actually do lands in SemiBold. */
.rv-main .pf-hero h1 {
  max-width:1008px; margin:0;
  font:300 clamp(30px,4.4vw,56px)/1.5 "Work Sans","Inter Tight",sans-serif;
  letter-spacing:-.02em; color:var(--rv-muted);
}
/* One sentence per line, as in the template, rather than leaving the break to
   whatever the viewport happens to do to it. */
.pf-hero h1 .pf-light, .pf-hero h1 .pf-bold { display:block; }
.pf-hero h1 .pf-light { font-weight:300; }
.pf-hero h1 .pf-bold  { font-weight:600; color:var(--rv-text); }
.pf-hero p { margin:26px 0 0; max-width:52ch; font:300 18px/1.6 "Work Sans","Inter Tight",sans-serif; color:var(--rv-muted); }
.pf-scroll {
  position:absolute; bottom:34px; left:50%; translate:-50% 0;
  width:40px; height:40px; display:grid; place-items:center; color:var(--rv-muted);
  animation:pf-nudge 2.6s ease-in-out infinite;
}
.pf-scroll svg { width:26px; height:26px; }
@keyframes pf-nudge { 0%,100% { transform:translateY(0); } 50% { transform:translateY(7px); } }

.pf-clients { padding:20px 0 96px; }
.rv-main .pf-clients h2 { font:300 clamp(24px,2.6vw,34px)/1.5 "Work Sans","Inter Tight",sans-serif; color:var(--rv-muted); margin:0 0 34px; letter-spacing:-.01em; }
.pf-logos { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:34px 56px; }
/* Mixed aspect ratios: a single height makes wordmarks huge and square or
   portrait marks disappear, so each is sized to read at the same weight. */
.pf-logos img { height:auto; width:auto; max-height:46px; max-width:148px; object-fit:contain; opacity:.62; transition:opacity .25s ease; }
.pf-logos img[src*="chargeroo"], .pf-logos img[src*="angie"] { max-height:66px; }
.pf-logos img[src*="twj"] { max-height:74px; }
.pf-logos img[src*="landscapers"] { max-height:58px; }
.pf-logos img[src*="albury-florist"] { max-height:72px; }
.pf-logos img:hover { opacity:1; }

.pf-work { padding-bottom:110px; }
.pf-work-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:16px 40px; margin:0 0 56px; }
.rv-main .pf-work-head h2 { font:300 clamp(26px,3vw,40px)/1.5 "Work Sans","Inter Tight",sans-serif; color:var(--rv-muted); margin:0; letter-spacing:-.01em; }
.pf-work-head p { max-width:42ch; margin:0; font:300 15px/1.7 "Work Sans","Inter Tight",sans-serif; color:var(--rv-muted); }
.pf-card { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; margin-bottom:96px; }
/* Every second card leads with the copy, so the eye zig-zags down the page
   instead of running down one rail. */
.pf-card:nth-child(even) .pf-shot { order:2; }
.pf-shot {
  border-radius:20px; overflow:hidden; background:var(--rv-raised);
  border:1px solid var(--rv-line); aspect-ratio:16/11;
  /* container-type gives us 100cqh below: the frame's own height, which is the
     one number CSS otherwise cannot know here. */
  container-type:size;
}
/* Full-length captures sitting at natural height inside a short frame, so the
   card shows the real page and hovering walks down it. min-height covers the
   short ones, which would otherwise leave a gap. */
.pf-shot img {
  display:block; width:100%; height:auto; min-height:100%;
  object-fit:cover; object-position:top center;
  transform:translateY(0);
  transition:transform var(--pf-dur, 6s) linear;
}
/* 100cqh is the frame, 100% is the image, so this lands the bottom of the
   image on the bottom of the frame whatever either measures. */
.pf-card:hover .pf-shot img,
.pf-card:focus-within .pf-shot img { transform:translateY(calc(100cqh - 100%)); }

/* No hover on touch, so the reveal doubles as the trigger and it plays once. */
@media (hover: none) {
  .pf-card.amx-in .pf-shot img { transform:translateY(calc(100cqh - 100%)); }
}
@media (prefers-reduced-motion: reduce) {
  .pf-shot img,
  .pf-card:hover .pf-shot img,
  .pf-card.amx-in .pf-shot img { transform:none; transition:none; }
}
.pf-eyebrow { font:600 13px/1.5 "Work Sans","Inter Tight",sans-serif; letter-spacing:.04em; text-transform:uppercase; color:var(--rv-text); margin:0 0 14px; }
.rv-main .pf-card h3 { font:300 clamp(23px,2.3vw,31px)/1.5 "Work Sans","Inter Tight",sans-serif; letter-spacing:-.01em; color:var(--rv-muted); margin:0 0 20px; }
.pf-card h3 b { font-weight:500; color:var(--rv-text); }
.pf-cat { font:300 17px/1.5 "Work Sans","Inter Tight",sans-serif; color:var(--rv-text); margin:0 0 26px; }
.pf-actions { display:flex; flex-wrap:wrap; gap:12px; }
.pf-btn {
  display:inline-flex; align-items:center; gap:9px; padding:10px 20px;
  border:1px solid var(--rv-line); border-radius:100px; color:var(--rv-text);
  font:400 15px/1.5 "Work Sans","Inter Tight",sans-serif; letter-spacing:.04em; text-transform:uppercase;
  transition:border-color .22s ease, color .22s ease;
}
.pf-btn svg { width:17px; height:17px; transition:transform .22s ease; }
.pf-btn:hover { border-color:var(--rv-purple); color:var(--rv-purple); }
.pf-btn:hover svg { transform:translateX(4px); }
.pf-btn-solid { background:var(--amx-accent,#7776f6); border-color:transparent; color:#09090b; }
.pf-btn-solid:hover { color:#09090b; filter:brightness(1.08); }

/* Numbers pulled from the case study, not invented for the page. */
.pf-stats { display:flex; flex-wrap:wrap; gap:30px; margin:0 0 26px; }
.pf-stat b { display:block; font:600 26px/1.2 "Work Sans","Inter Tight",sans-serif; color:var(--rv-text); }
.pf-stat span { display:block; font:300 13px/1.5 "Work Sans","Inter Tight",sans-serif; color:var(--rv-muted); margin-top:5px; max-width:19ch; }

.pf-proof { border:1px solid var(--rv-line); border-radius:18px; background:var(--rv-panel); padding:26px; margin:0 0 110px; }
.pf-proof-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:20px; }
.rv-main .pf-proof-head h3 { font:500 20px/1.4 "Work Sans","Inter Tight",sans-serif; color:var(--rv-text); margin:0; letter-spacing:-.02em; }
.pf-proof-head span { font:11px/1.4 "IBM Plex Mono",monospace; color:var(--rv-muted); text-transform:uppercase; letter-spacing:.09em; }
.pf-chart { position:relative; border:1px solid var(--rv-line); border-radius:12px; overflow:hidden; background:#fff; }
.pf-chart img { display:block; width:100%; height:auto; }
.pf-chart figcaption {
  font:300 13px/1.6 "Work Sans","Inter Tight",sans-serif; color:var(--rv-muted);
  padding:12px 14px; background:var(--rv-raised); border-top:1px solid var(--rv-line);
}
.pf-chart figcaption b { color:var(--rv-text); font-weight:600; }

.pf-more { padding-bottom:100px; }
.rv-main .pf-more h2 { font:300 clamp(24px,2.6vw,34px)/1.5 "Work Sans","Inter Tight",sans-serif; color:var(--rv-muted); margin:0 0 34px; letter-spacing:-.01em; }
.pf-more-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pf-mini { border:1px solid var(--rv-line); border-radius:16px; overflow:hidden; background:var(--rv-panel); display:flex; flex-direction:column; }
/* flex:none, or the grid row height stretches the image and a 1.6 ratio
   screenshot gets crammed into a portrait box. */
/* height:auto is required: the img carries a height attribute, which is a
   presentational hint that aspect-ratio on its own does not override. */
.pf-mini img { display:block; flex:none; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top center; border-bottom:1px solid var(--rv-line); }
.pf-mini-copy { padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.pf-mini-copy b { font:500 18px/1.4 "Work Sans","Inter Tight",sans-serif; color:var(--rv-text); }
.pf-mini-copy small { font-size:12px; color:var(--rv-purple); text-transform:uppercase; letter-spacing:.09em; margin:4px 0 10px; }
.pf-mini-copy p { font:300 15px/1.6 "Work Sans","Inter Tight",sans-serif; color:var(--rv-muted); margin:0 0 16px; line-height:1.6; }
.pf-mini-copy .rv-link { margin-top:auto; }

.pf-connect { text-align:center; padding:96px 24px 110px; border-top:1px solid var(--rv-line); }
.rv-main .pf-connect h2 { font:600 clamp(34px,4.6vw,54px)/1.3 "Work Sans","Inter Tight",sans-serif; letter-spacing:-.02em; color:var(--rv-text); margin:0 0 16px; }
.pf-connect p { max-width:46ch; margin:0 auto 34px; font:300 18px/1.6 "Work Sans","Inter Tight",sans-serif; color:var(--rv-muted); }
.pf-connect .pf-actions { justify-content:center; }

@media (max-width:900px) {
  .pf-card { grid-template-columns:1fr; gap:26px; margin-bottom:66px; }
  .pf-card:nth-child(even) .pf-shot { order:0; }
  .pf-more-grid { grid-template-columns:1fr; }
  .pf-logos { justify-content:center; gap:26px 34px; }
  .pf-logos img { height:34px; }
  .pf-hero { min-height:auto; padding:96px 20px 60px; }
  .pf-scroll { display:none; }
}

/* ── Homepage showreel ────────────────────────────────────────────────────────
   Six client sites in one frame. Frontline plays the walkthrough video the site
   already ships; three scroll their full-length capture; the two with no long
   capture pan slowly rather than faking a scroll of a page we never took.

   Every pane is width:100%, never height:100% with object-fit:cover. Cover
   crops the sides, and on a screenshot of a website the sides are the content.
   The short panes are centred in the frame instead, so nothing is cut off.

   Six panes share one 36s loop (6s each) offset by --n, with a 1.4s dissolve at
   each end so they hand over rather than snap. */
.rv-reel { position:relative; container-type:size; overflow:hidden; padding:0; }
.rv-reel > * {
  position:absolute; left:0; width:100%; display:block;
  opacity:0;
  animation:rv-reel-scroll 36s cubic-bezier(.4,0,.6,1) infinite;
  animation-delay:calc(var(--n) * -6s);
}
/* Tall captures start at the top and walk down. */
.rv-reel > img:not(.rv-reel-pan) { top:0; height:auto; }
/* Shorter than the frame, so centre them and never crop. */
.rv-reel video, .rv-reel .rv-reel-pan { top:50%; height:auto; }
.rv-reel video { animation-name:rv-reel-hold; }
.rv-reel .rv-reel-pan { animation-name:rv-reel-pan; }

@keyframes rv-reel-scroll {
  0%     { opacity:0; transform:translateY(0) }
  4%     { opacity:1; transform:translateY(calc((100cqh - 100%) * .06)) }
  12.7%  { opacity:1; transform:translateY(calc((100cqh - 100%) * .94)) }
  16.7%  { opacity:0; transform:translateY(calc(100cqh - 100%)) }
  100%   { opacity:0; transform:translateY(calc(100cqh - 100%)) }
}
/* -50% keeps it centred; the scale is the only thing actually animating. */
@keyframes rv-reel-hold {
  0%    { opacity:0; transform:translateY(-50%) scale(1.05) }
  4%    { opacity:1; transform:translateY(-50%) scale(1.04) }
  12.7% { opacity:1; transform:translateY(-50%) scale(1) }
  16.7% { opacity:0; transform:translateY(-50%) scale(1) }
  100%  { opacity:0; transform:translateY(-50%) scale(1) }
}
@keyframes rv-reel-pan {
  0%    { opacity:0; transform:translateY(-50%) scale(1.08) translateX(1.5%) }
  4%    { opacity:1; transform:translateY(-50%) scale(1.07) translateX(1.3%) }
  12.7% { opacity:1; transform:translateY(-50%) scale(1.01) translateX(-1.3%) }
  16.7% { opacity:0; transform:translateY(-50%) scale(1) translateX(-1.5%) }
  100%  { opacity:0; transform:translateY(-50%) scale(1) translateX(-1.5%) }
}

/* An animation that never stops is a battery and attention cost, so it holds
   on the first site instead. */
@media (prefers-reduced-motion: reduce) {
  .rv-reel > * { animation:none; opacity:0; }
  .rv-reel > *[style*="--n:0"] { opacity:1; transform:translateY(-50%); }
}