/* Runverra v3 "Ink & Ember" subpage skin (R2, 2026-10-17). Loaded AFTER the ENG-014 subpage stylesheet; styling only.
   Same type and palette as the home page: Barlow Condensed ExtraBold (display.ttf) + DM Sans (sans.ttf), ink #0B0B0C,
   ember #FF5A1F, paper #FAF8F4. Ember is only used as text on ink, or as a fill under ink text; on paper, text accents use
   --ember-text (#B23C10, 5.3:1 on paper). */
@font-face{font-family:"Barlow Condensed";src:url(/assets/display.ttf) format("truetype");font-weight:800;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/assets/sans.ttf) format("truetype");font-weight:400;font-display:swap}
:root{
  --ink:#0B0B0C;--bone:#FAF8F4;--paper:#F3EFE9;--forest:#0B0B0C;--forest-2:#1B1A19;--stone:#A9A39B;--stone-d:#5E5953;
  --amber:#FF5A1F;--amber-d:#B23C10;--ember:#FF5A1F;--ember-text:#B23C10;--violet:#B14BFF;
  --line:rgba(11,11,12,.13);--line-inv:rgba(250,248,244,.16);
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--display:"Barlow Condensed",Impact,"Arial Narrow",sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;--cut:0px
}
html{background:var(--bone)}
body{background:var(--bone);color:#141414;font-family:var(--sans)}
::selection{background:var(--ember);color:var(--ink)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;box-shadow:0 0 0 5px var(--ink)}
.skip:focus{background:var(--ink);color:var(--bone);border-radius:999px}
/* type */
h1,h2{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.92}
h3{font-family:var(--sans);font-weight:600;letter-spacing:-.01em}
.label{font:500 12px/1.3 var(--mono);letter-spacing:.06em;color:var(--ember-text)}
.label::after{background:var(--ember);opacity:.35}
.muted{color:var(--stone-d)}
a:hover{text-decoration-color:var(--ember)}
/* header = home .nav treatment: paper glass bar, orange R mark + condensed wordmark, outlined pill CTA */
header.site{background:rgba(250,248,244,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.04em;text-transform:uppercase;color:#141414}
.brand img{width:30px;height:30px}
nav.main ul{font-size:14px;font-weight:400}
nav.main a{border-bottom-width:1px}
nav.main a[aria-current="page"],nav.main a:not(.cta):not(.feat):hover{border-color:var(--ember)}
.cta,nav.main .cta{background:transparent;color:#141414;border:1px solid #141414;border-radius:999px;clip-path:none;font-weight:500;padding:8px 16px}
.cta:hover{background:#141414;color:var(--bone)}
nav.main a.feat{background:var(--ember);color:#141414;border-radius:999px;clip-path:none;font-weight:600;padding:8px 14px}
nav.main a.feat:hover{background:#141414;color:var(--bone)}
nav.main a.feat[aria-current="page"]{background:var(--ember);color:#141414;box-shadow:inset 0 0 0 1.5px #141414}
.menu-btn{border-radius:999px;border-width:1px!important;font-family:var(--sans)!important;font-weight:500!important}
dialog.menu{background:var(--ink);color:var(--bone)}
dialog.menu .brand{color:var(--bone)}
dialog.menu li a{font:800 clamp(44px,13vw,96px)/1 var(--display);text-transform:uppercase;letter-spacing:0}
dialog.menu li a:hover{color:var(--ember)}
.btn-x{border-radius:999px;border-width:1px}
/* buttons = home .btn: ember pill, ink text; secondary = ghost pill */
.btn{border-radius:999px;clip-path:none;border-width:1px;font-weight:600;font-family:var(--sans)}
.btn.primary,.inv .btn.primary{background:var(--ember);border-color:var(--ember);color:#141414;clip-path:none}
.btn.primary:hover,.inv .btn.primary:hover{background:#141414;border-color:#141414;color:var(--bone)}
.btn.secondary{color:#141414;border-color:rgba(20,20,20,.35)}
.btn.secondary:hover,.inv .btn.secondary:hover{background:#141414;border-color:#141414;color:var(--bone)}
/* page hero = home stage: paper with the ember/violet glow, ink display type */
.hero,.hero.inv{background:var(--bone);color:#141414;border-bottom:1px solid var(--line);
  background-image:radial-gradient(60vmax 40vmax at 88% 0%,color-mix(in srgb,var(--ember) 13%,transparent),transparent 70%),radial-gradient(50vmax 36vmax at 6% 110%,color-mix(in srgb,var(--violet) 8%,transparent),transparent 70%)}
.hero h1{color:#141414;letter-spacing:-.005em;max-width:16ch}
.hero.page h1{font-size:clamp(48px,9vw,128px)}
.hero h1 .s{color:var(--ember-text)}
.hero .lede{color:#3b3732}
.hero .small{color:var(--stone-d)}
.hero a:not(.btn):not(.cta),.hero.inv a:not(.btn):not(.cta){color:#141414}
.hero.inv .label,.hero .label{color:var(--ember-text)}
.hero.inv .muted{color:var(--stone-d)}
/* sections */
section.band h2+p,section.band h2+.lede{margin-top:16px}
section.band{border-top:1px solid var(--line)}
section.band.paper{background:var(--paper)}
section.band.inv,section.band.ink{background:var(--ink);color:var(--bone)}
.inv .label,.ink .label{color:var(--ember)}
.inv .label::after,.ink .label::after{background:var(--bone);opacity:.2}
.inv .muted,.ink .muted{color:#BDB7AE}
section.band.inv a:not(.btn):not(.cta),section.band.ink a:not(.btn):not(.cta){color:var(--bone)}
.big-cta h2{line-height:.86}
.big-cta h2 .s{color:var(--ember);font-family:var(--display);font-style:normal;text-transform:uppercase}
.cut{clip-path:none;border-radius:18px}
.card,.svc-card{background:#fff;border:1px solid var(--line)}
section.band:not(.paper) .card{background:var(--paper)}
.svc-card .num{font-family:var(--mono);font-weight:500;color:var(--ember-text)}
.svc-card:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}.svc-card:hover .num{color:var(--ember)}
.price{font-family:var(--display);font-weight:800;font-size:30px;line-height:1;color:var(--ember-text)}
.svc-card:hover .price{color:var(--ember)}
.jump a{text-decoration-color:var(--ember);text-decoration-thickness:1.5px}
ul.ticks li::before{font-family:var(--mono);font-weight:500;color:var(--ember-text)}
ol.steps li::before{font:800 clamp(44px,6vw,80px)/.9 var(--display);color:var(--ember-text)}
.not{border-left-color:var(--ember)}
table.pk{background:#fff;border-radius:14px;overflow:hidden}
table.pk thead th{background:var(--ink);color:var(--bone);font-family:var(--mono);font-weight:500;letter-spacing:.06em}
table.pk tbody tr:first-child td{font:800 26px/1.05 var(--display);color:#141414}
table.cmp tbody tr:first-child td{font:inherit;color:inherit}
.faq summary{font-weight:600}
.faq summary::after{color:var(--ember-text)}
.gig{border-radius:18px}
.gig .k{color:var(--ember-text)}
/* contact form: home .quote feel (labels in mute, soft field outlines, ember focus) */
form.contact label{font-weight:600;font-size:14px;color:#141414}
form.contact input,form.contact textarea,form.contact select{width:100%;font:16px var(--sans);color:#141414;background:#fff;border:1px solid rgba(20,20,20,.35);border-radius:12px;padding:12px 14px}
form.contact select{appearance:auto}
form.contact input:focus,form.contact textarea:focus,form.contact select:focus{border-color:var(--ember)}
form.contact .note{color:var(--stone-d)}
/* legal pages */
.legal{background:var(--bone)}
.legal h1{font-size:clamp(48px,8vw,96px);color:#141414}
.legal h2{font-size:30px;letter-spacing:0;line-height:1}
.legal blockquote{border-radius:0 10px 10px 0}
.toc h2{font:500 12px var(--mono);letter-spacing:.06em;color:var(--ember-text);text-transform:uppercase}
/* footer = home .foot treatment: paper, hairline top, ink links, giant pale condensed wordmark */
footer.site{background:var(--bone);color:var(--stone-d);border-top:1px solid var(--line)}
footer.site a{color:#141414}
footer.site a:hover{color:var(--ember-text)}
footer.site a.cta:hover{color:var(--bone)}
footer.site h2{font:500 12px var(--mono);letter-spacing:.06em;color:var(--stone-d);text-transform:uppercase}
footer.site .base{border-top-color:var(--line);color:var(--stone-d)}
svg.word text{font:800 150px var(--display);fill:#ECE6DE;letter-spacing:0}
section.band.big-cta{border-bottom:0}
@media (max-width:479px){.brand{font-size:19px;gap:8px}.brand img{width:26px;height:26px}nav.main a.feat{padding:7px 12px}nav.main .cta{padding:7px 12px}}
@media (max-width:719px) and (scripting: enabled){.menu-btn{border:1px solid #141414;color:#141414}}
/* R3 (RUN-QA R2 round 1): no custom cursor dot (the home page has none); single TOC numbering; legal measure ~70 characters */
.cursor{display:none!important}
.toc ol{list-style:none;padding-left:0}
.legal .doc{max-width:min(100%,36em)}

/* 2026-10 clarity pass: /about/ intro (photo spot + text) and the "Sample project" label on /work/ demo cards */
.about-intro{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:start}
.about-photo{width:100%;height:auto;max-width:140px;aspect-ratio:1;border-radius:50%;object-fit:cover;box-shadow:0 10px 30px rgba(11,11,12,.18)}
.about-photo--empty{display:flex;align-items:center;justify-content:center;background:#0B0B0C;color:#FF5A1F;font:800 64px/1 var(--sans,sans-serif);letter-spacing:.02em}
@media (max-width:640px){.about-intro{grid-template-columns:1fr}.about-photo{max-width:96px}}
.work-card h3{margin:0 0 6px}
.work-card .svc strong{color:#FF5A1F}
/* 2026-10 round 3: live 3D demo embed (Websites and Work pages) */
.demo-embed{margin:28px 0 8px}
.demo-embed__tabs{display:flex;gap:8px;margin:0 0 12px;flex-wrap:wrap}
.demo-embed__tabs button{font:600 14px/1 var(--sans,inherit);padding:10px 16px;border-radius:999px;border:1px solid rgba(11,11,12,.18);background:#fff;color:#0B0B0C;cursor:pointer}
.demo-embed__tabs button[aria-selected="true"]{background:#0B0B0C;color:#fff;border-color:#0B0B0C}
.demo-embed__win{border-radius:16px;overflow:hidden;background:#0B0B0C;box-shadow:0 30px 70px rgba(11,11,12,.25)}
.demo-embed__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#1b1b1d;color:#bdb8b1;font:12px/1.2 var(--mono,monospace)}
.demo-embed__bar i{width:9px;height:9px;border-radius:50%;background:#3a3a3d}
.demo-embed__url{margin-left:8px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-embed__open{color:#FFB38A;white-space:nowrap}
.demo-embed__stage{position:relative;aspect-ratio:16/10;max-height:78vh;width:100%}
.demo-embed__stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.demo-embed__play{position:absolute;inset:0;display:block;color:#fff;text-decoration:none}
.demo-embed__play img{width:100%;height:100%;object-fit:cover;filter:brightness(.62);transition:filter .3s,transform .6s}
.demo-embed__play:hover img,.demo-embed__play:focus-visible img{filter:brightness(.8);transform:scale(1.02)}
.demo-embed__play span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 26px;border-radius:999px;background:#FF5A1F;font:700 17px/1.1 var(--sans,inherit);box-shadow:0 14px 40px rgba(255,90,31,.45)}
.demo-embed__play small{font-weight:500;font-size:12px;opacity:.9}
@media (max-width:640px){.demo-embed__stage{aspect-ratio:9/14;max-height:80vh}.demo-embed__open{display:none}}

/* ===================== 2026-10-19 one brand: every subpage on the home page's dark studio look =====================
   (Matt: "change all the pages ... so it all looks like one brand"). Same tokens as the home (gallery.css): ink #0B0B0C page,
   raised surfaces #141416/#1A1A1D, text #F2EEE8, mute #A9A39B (7.5:1 on ink), hairlines rgba(242,238,232,.14), ember #FF5A1F with
   #FF8A5C for ember text on ink. Light-theme text colours (#141414, #3b3732, --stone-d) are remapped so nothing goes dark-on-dark. */
:root{--ink:#F2EEE8;--bone:#0B0B0C;--paper:#141416;--forest:#0B0B0C;--forest-2:#1A1A1D;--stone:#A9A39B;--stone-d:#A9A39B;--ember-text:#FF8A5C;--amber-d:#FF8A5C;
  --line:rgba(242,238,232,.14);--line-inv:rgba(242,238,232,.14);color-scheme:dark}
html,body,body.rvc{background:#0B0B0C;color:#F2EEE8}
body.rvc{--rvc-paper:#F2EEE8}
::selection{background:var(--ember);color:#0B0B0C}
a{color:inherit}
.muted,.small,.note,.hero .small,.hero .lede,.lede{color:#A9A39B}
.label,.hero .label,.hero.inv .label,.toc h2,.faq summary::after,ul.ticks li::before,ol.steps li::before,.svc-card .num,.gig .k{color:#FF8A5C}
/* nav: the home's solid ink bar */
.rvc .nav,header.site{background:#0B0B0C!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:1px solid rgba(242,238,232,.12)!important;color:#F2EEE8}
.rvc .nav__logo,.rvc .nav nav a,.brand,.rvc .nav__menu{color:#F2EEE8!important}
.rvc .nav__cta,.rvc .nav__menu{border-color:rgba(242,238,232,.7)!important;background:transparent}
.rvc .nav__cta:hover,.rvc .nav__menu:hover{background:#F2EEE8!important;color:#0B0B0C!important}
.cta,nav.main .cta{color:#F2EEE8;border-color:rgba(242,238,232,.7)}
.cta:hover{background:#F2EEE8;color:#0B0B0C}
@media (max-width:719px) and (scripting: enabled){.menu-btn{border-color:rgba(242,238,232,.7);color:#F2EEE8}}
/* hero + bands */
.hero,.hero.inv{background-color:#0B0B0C;color:#F2EEE8;border-bottom-color:rgba(242,238,232,.12);
  background-image:radial-gradient(60vmax 40vmax at 88% 0%,color-mix(in srgb,var(--ember) 16%,transparent),transparent 70%),radial-gradient(50vmax 36vmax at 6% 110%,color-mix(in srgb,var(--violet) 12%,transparent),transparent 70%)}
.hero h1,.legal h1,table.pk tbody tr:first-child td,form.contact label,.svx__ic,.svx .price{color:#F2EEE8}
.hero h1 .s{color:#FF8A5C}
.hero a:not(.btn):not(.cta),.hero.inv a:not(.btn):not(.cta),footer.site a{color:#F2EEE8}
section.band{border-top-color:rgba(242,238,232,.12)}
section.band.paper{background:#111113}
section.band.inv,section.band.ink{background:#141416;color:#F2EEE8}
.inv .muted,.ink .muted{color:#BDB7AE}
/* cards, tables, gigs */
.card,.svc-card,.work-card,.gig,.svx,table.pk,table.cmp{background:#141416!important;color:#F2EEE8;border:1px solid rgba(242,238,232,.12)}
section.band:not(.paper) .card,section.band.paper .card{background:#141416!important}
.card.svc-card:hover,section.band:not(.paper) .card.svc-card:hover,.gig:hover{background:#1A1A1D!important;border-color:rgba(255,90,31,.55);box-shadow:0 14px 30px rgba(0,0,0,.4)}
table.pk thead th{background:#1F1F23;color:#F2EEE8}
table.pk td,table.pk th,table.cmp td,table.cmp th{border-color:rgba(242,238,232,.12)}
.price{color:#FF8A5C}
.fict{background:#2A2414;color:#F5D98A;border-color:#8A6D1E}
/* buttons */
.btn.primary,.inv .btn.primary{background:var(--ember);border-color:var(--ember);color:#0B0B0C}
.btn.primary:hover,.inv .btn.primary:hover{background:#F2EEE8;border-color:#F2EEE8;color:#0B0B0C}
.btn.secondary,.inv .btn.secondary{color:#F2EEE8;border-color:rgba(242,238,232,.45);background:transparent}
.btn.secondary:hover,.inv .btn.secondary:hover{background:#F2EEE8;border-color:#F2EEE8;color:#0B0B0C}
/* forms */
form.contact input,form.contact textarea,form.contact select{color:#F2EEE8;background:#141416;border:1px solid rgba(242,238,232,.22)}
form.contact input:focus,form.contact textarea:focus,form.contact select:focus{border-color:var(--ember)}
form.contact input::placeholder,form.contact textarea::placeholder{color:#7D776F}
.consent{background:#141416;color:#F2EEE8;border-color:rgba(242,238,232,.18)}
/* legal pages: dark too, comfortable measure */
.legal{background:#0B0B0C}
.legal,.legal p,.legal li{color:#D9D4CC}
.legal h2,.legal h3{color:#F2EEE8}
.legal a{color:#FF8A5C}
.legal blockquote{background:#141416;border-left-color:var(--ember);color:#F2EEE8}
/* footer: the home's dark footer, faint giant wordmark */
footer.site{background:#0B0B0C;color:#A9A39B;border-top-color:rgba(242,238,232,.12)}
footer.site a:hover{color:#FF8A5C}
footer.site h2{color:#A9A39B}
footer.site .base{border-top-color:rgba(242,238,232,.12);color:#A9A39B}
svg.word text{fill:#1A1A1D}
/* demo embed tabs on dark */
.demo-embed__tabs button{background:#141416;color:#F2EEE8;border-color:rgba(242,238,232,.18)}
.demo-embed__tabs button[aria-selected="true"]{background:#F2EEE8;color:#0B0B0C;border-color:#F2EEE8}
.demo-embed__play span{color:#0B0B0C}
.about-photo{box-shadow:0 10px 30px rgba(0,0,0,.5)}
.work-card .svc strong{color:#FF8A5C}
/* contrast stragglers found by the 2026-10-19 scan (old light tokens/hardcodes) */
body.rvc .gig,body.rvc .gig .h,body.rvc .gig .g,body.rvc .gig a{color:#F2EEE8!important}
body.rvc .svc,body.rvc .work-card p.svc{color:#A9A39B!important}
body.rvc .svx .price,body.rvc p.price{color:#F2EEE8!important}
body.rvc .own a,body.rvc .proj a,body.rvc .proj h3,body.rvc .proj p{color:#F2EEE8!important}
body.rvc .proj .frame{background:#1A1A1D}
/* 2026-10-19 sound button on every page: slow ember glow until first pressed; a music note on phones */
.snd{display:inline-flex;align-items:center;gap:8px;background:transparent;color:#F2EEE8;border:1px solid rgba(242,238,232,.7);border-radius:999px;padding:7px 12px;font:500 13px/1 "DM Sans",Sans,sans-serif;cursor:pointer;position:relative}
.snd[hidden]{display:none!important}
.snd__bars{display:inline-flex;gap:2px;align-items:flex-end;height:12px}.snd__bars i{width:2px;height:4px;background:currentColor}
.snd[aria-pressed="true"] .snd__bars i{background:#FF5A1F;animation:sndeq .9s infinite alternate}.snd[aria-pressed="true"] .snd__bars i:nth-child(2){animation-delay:.3s}.snd[aria-pressed="true"] .snd__bars i:nth-child(3){animation-delay:.6s}
@keyframes sndeq{to{height:12px}}
.snd__note{display:none}
.snd--invite{animation:sndglow 2.6s ease-in-out infinite;border-color:rgba(255,90,31,.85)!important}
@keyframes sndglow{0%,100%{box-shadow:0 0 0 0 rgba(255,90,31,0),0 0 0 rgba(255,90,31,0)}50%{box-shadow:0 0 0 4px rgba(255,90,31,.18),0 0 22px rgba(255,90,31,.55)}}
@media (max-width:860px){
  .snd{width:40px;height:40px;padding:0;justify-content:center;border-radius:50%}
  .snd .snd__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .snd .snd__bars{display:none}.snd .snd__note{display:block}
  .snd[aria-pressed="true"] .snd__note{color:#FF5A1F;animation:sndnote 1.2s ease-in-out infinite alternate}
}
@keyframes sndnote{to{transform:translateY(-2px) rotate(-6deg)}}
@media (prefers-reduced-motion:reduce){.snd--invite,.snd .snd__note{animation:none}}

/* 2026-10-19 Websites dropdown (lib/chrome-v3.mjs webMenu): opens on hover or keyboard focus; the same block is in src/v3-sub.css and v3/site/gallery.css */
.nav__dd{position:relative;display:flex;align-items:center}
.nav__dd>a::after{content:"";display:inline-block;width:6px;height:6px;margin:0 0 3px 7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.7}
.nav__ddm{position:absolute;top:100%;left:-16px;margin-top:12px;min-width:290px;padding:8px;border-radius:14px;background:#0F0F11;border:1px solid rgba(250,248,244,.14);box-shadow:0 24px 50px rgba(0,0,0,.45);display:grid;gap:2px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility 0s .18s;z-index:60}
.nav__ddm::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav__dd:hover .nav__ddm,.nav__dd:focus-within .nav__ddm{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s}
.nav .nav__ddm a{display:grid!important;gap:2px;padding:10px 12px!important;border-radius:10px;border:0!important;color:#FAF8F4!important;font:500 14.5px/1.3 "DM Sans",system-ui,sans-serif!important;white-space:nowrap;text-decoration:none}
.nav .nav__ddm a small{font-size:12.5px;line-height:1.3;color:#A9A39B;font-weight:400}
.nav .nav__ddm a:hover,.nav .nav__ddm a:focus-visible{background:rgba(255,90,31,.14)!important;color:#FFFFFF!important}
@media (max-width:860px){.nav__dd{display:none!important}}
@media (prefers-reduced-motion:reduce){.nav__ddm{transition:none!important}}

/* 2026-10-19 contrast sweep (all pages scanned): plain links on dark bands (About "See everything on the Work page") and the
   Work page's phone project list (.plist) were near-black on near-black */
body.rvc .inv p > a:not(.btn):not(.cta),body.rvc .band:not(.paper) p > a:not(.btn):not(.cta){color:#F2EEE8!important;text-decoration-color:#FF5A1F}
body.rvc .plist .prow{color:#F2EEE8!important}
body.rvc .plist .prow .g{color:#C9C2B8!important}
body.rvc .plist .prow .k{color:#FF8A5C!important}
/* 2026-10-19 (Matt): pricing and service cards sit centred, whatever their count (1, 2 or 3), never stuck to the left */
@media (min-width:720px){.cards{grid-template-columns:repeat(auto-fit,minmax(300px,440px));justify-content:center}}

/* 2026-10-19: tap-to-call in the header (Runverra's line, answered by Vision): number on desktop, phone icon on phones */
.nav .nav__call{display:inline-flex;align-items:center;gap:7px}.nav .nav__call svg{width:15px;height:15px;flex:none}
@media (max-width:860px){.nav .nav__call .nav__num{display:none}.nav .nav__call{padding:8px 11px!important}}
@media (max-width:380px){.nav nav{gap:6px!important}.nav .nav__call{padding:7px 9px!important}.nav .nav__cta:not(.nav__call){padding:8px 11px!important}}
/* 2026-10-19 nav plan: "Call" word on phones (the number shows on wider screens) */
.nav .nav__word{display:none}@media (max-width:860px){.nav .nav__call .nav__word{display:inline}.nav .nav__call{padding:8px 13px!important}}
.rvm__top .snd{margin-left:auto;margin-right:12px}
/* 2026-10-19 (Matt): the sound button breathes a slow brand-orange glow until it is on; then a steady glow */
@keyframes sndPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,90,31,0),0 0 8px rgba(255,90,31,.2)}50%{box-shadow:0 0 0 4px rgba(255,90,31,.16),0 0 22px rgba(255,90,31,.55)}}
.snd{animation:sndPulse 3s ease-in-out infinite;border-color:rgba(255,90,31,.8)!important}
.snd[aria-pressed="true"]{animation:none;box-shadow:0 0 14px rgba(255,90,31,.45)}
@media (prefers-reduced-motion:reduce){.snd{animation:none;box-shadow:0 0 12px rgba(255,90,31,.4)}}
@media (max-width:380px){.nav nav{gap:6px!important}.nav .nav__call{padding:7px 10px!important}.nav .nav__cta:not(.nav__call){padding:8px 11px!important}}
/* phones: Menu shows as its icon only, so the logo, Call and Get a free demo all have room */
@media (max-width:400px){.nav .nav__menu{font-size:0!important;gap:0!important;padding:9px 11px!important}.nav .nav__menu i{margin:0!important}}
@media (max-width:400px){.nav .nav__menu{min-height:38px;min-width:44px;justify-content:center}}

/* 2026-10-19 service pages: one plain comparison table (/websites/, /3d-websites/, /care-plans/, /automations/). Phones: each row
   stacks, and every cell shows its column name (data-label). The 3 sample sites on /websites/ sit in one row on wide screens. */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 16px;max-width:100%}
.cmp{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45;color:#F2EEE8;border:1px solid rgba(242,238,232,.16)}
.cmp caption{caption-side:top}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:12px 16px;border-bottom:1px solid rgba(242,238,232,.12);color:#F2EEE8}
.cmp thead th{font-weight:700;font-size:17px;background:rgba(242,238,232,.04);border-bottom:2px solid #FF5A1F}
.cmp tbody th{font-weight:500;color:#A9A39B;width:22%;min-width:120px}
.cmp tbody tr:last-child>*{border-bottom:0}
.cmp tbody tr:hover>*{background:rgba(255,90,31,.05)}
@media (max-width:639px){
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto;min-width:0}
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cmp tr{padding:14px 16px;border-bottom:1px solid rgba(242,238,232,.12)}
  .cmp tbody tr:last-child{border-bottom:0}
  .cmp tbody th{padding:0 0 6px;border:0;color:#FF8A5C;font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
  .cmp td{padding:3px 0;border:0}
  .cmp td::before{content:attr(data-label) ": ";font-weight:700;color:#F2EEE8}
}
@media (min-width:980px){.tgrid.tgrid--3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:980px){.demos.demos--3{grid-template-columns:repeat(3,1fr)}}

/* 2026-10-19 portfolio filters (step 4 of the nav plan): All / Websites / 3D / Automations / Our products. CSS only
   (:has); without it every section shows. Sections and the mixed demo cards carry data-kind. */
.pfilter{padding:22px 0 0;position:sticky;top:64px;z-index:5;background:var(--rv-bg,#0B0B0C)}
.pfilter .tfilter__chips{margin:0 0 18px}
.pfilter .tfilter__chips label{background:transparent;color:#F2EEE8;border-color:rgba(242,238,232,.35)}
.pfilter .tfilter__chips input:checked+label{background:#FF5A1F;color:#0B0B0C;border-color:#FF5A1F}
main:has(#pf-web:checked) [data-kind]:not([data-kind~="web"]),
main:has(#pf-3d:checked) [data-kind]:not([data-kind~="3d"]),
main:has(#pf-auto:checked) [data-kind]:not([data-kind~="auto"]),
main:has(#pf-own:checked) [data-kind]:not([data-kind~="own"]){display:none}
/* 2026-10-20 (Matt): the header call button reads "Call" at every width */
.nav .nav__call .nav__word{display:inline}
/* 2026-10-20: a playing demo has a Close demo button (clicking outside the box or Esc also closes it) */
.demo-embed__close{margin-left:auto;margin-right:14px;font:600 12px/1 "DM Sans",Sans,sans-serif;color:#0B0B0C;background:#F2EEE8;border:0;border-radius:999px;padding:6px 12px;cursor:pointer}
.demo-embed__close[hidden]{display:none}
.demo-embed__close:hover{background:#FF5A1F}
.demo-embed__close:focus-visible{outline:2px solid #FF5A1F;outline-offset:2px}
/* the portfolio filter bar no longer sticks: it covered the 3D demo picker while scrolling */
.pfilter{position:static}