/* heydamir/unslop pass (31 Oct 2026). Method: unslop by Damir Sokolovsky (@heydamir), CC BY 4.0.
   Direction
   Product   - Virtrix turns satellite imagery of insured commercial sites into dated evidence that GCC insurers' engineers and underwriters can act on
   Character - exact, sober, field-ready
   World     - survey files, satellite tiles and capture stamps, engineer site notes
   Moments   - the satellite scope in the hero and the evidence record under How it works
   Signature - the capture stamp (sensor, resolution, date) set in mono, used only on imagery */

:root{
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --hd-bg:#f5f7fa; --hd-card:#ffffff; --hd-raised:#eceff4;
  --hd-text:#111827; --hd-text-2:#4b5565; --hd-muted:#6b7487;
  --hd-line:rgba(17,24,39,.08); --hd-line-2:rgba(17,24,39,.12);
  --hd-accent:#14213D; --hd-ease:cubic-bezier(.22,1,.36,1);
}

/* 2. Color: ink ramp, three text roles, one accent, quiet hairlines */
body{color:var(--hd-text)}
.section--alt{background:var(--hd-bg)}
.lead,.hero__sub,.m-card p,.mod p,.f4 p,.desks span,.benefits li,.form-notes li,.faq__list p{color:var(--hd-text-2)}
.credit,.record__facts dt,.record__label,.record__flag,.ov__badge{color:var(--hd-muted)}
.m-card,.f4,.badges li,.record,.record__head,.record__qs,.record__foot,.desks li,.faq__list details{border-color:var(--hd-line-2)}
.f4--accent{border-top-color:var(--hd-accent)}
.scope__frame{box-shadow:0 8px 24px rgba(0,0,0,.06)}
.ksa-fixed{box-shadow:0 1px 2px rgba(0,0,0,.05)}
.brand__mark{background:var(--hd-accent)}

/* 5. Type: weights 400-500 (600 rare), hierarchy by size and colour, sentence case */
.hero__title,.h2,.success h3,.brand__word{font-weight:500}
.hero__title{letter-spacing:-.03em;line-height:1.04}
.h2{letter-spacing:-.02em;line-height:1.1}
.m-card h3,.mod h3,.f4 h3,.example__copy .h3,.faq__list summary,.record__title,.partners__head h3{font-weight:500;letter-spacing:0}
.desks b,.benefits span,.slot span,.chain li,.tag,.record__qs b,.record__out i,.lbl--c,.aiflow .lbl--l,.aiflow .lbl--out{font-weight:500}
.aiflow .lbl--ai{font-weight:600;letter-spacing:0}
.m-card__n,.f4__n,.chain li span{font-weight:500;font-variant-numeric:tabular-nums;color:var(--hd-muted)}
.field b{font-weight:500}
.ov__meta dt,.ov dt{text-transform:none;letter-spacing:0}
.btn{font-weight:500}

/* Signature: capture stamp in mono, nothing else in mono */
.ov__badge{font-family:var(--font-body)}
.scope__hud,.stamp{font-family:var(--font-mono);font-size:12px;letter-spacing:0;text-transform:none}
.stamp{color:var(--hd-text-2)}

/* 7. Details: radius by size, nested radii, no pills on buttons/tags */
.btn{border-radius:10px}
.nav .btn,.header .btn{border-radius:8px}
.tag{border-radius:6px}
.pill span{border-radius:8px;transition:background-color .15s var(--hd-ease),border-color .15s var(--hd-ease),color .15s var(--hd-ease)}
.chain li{border-radius:8px}
.record{border-radius:16px}
.record__site img{border-radius:8px}
.record__flag,.record__out i{border-radius:4px}
.scope__frame{border-radius:16px}

/* 9. Motion: nothing loops unless it is live; one easing */
.hero__bg img{animation:none;transform:none}
.live{animation:none;background:#dc2626}
.flow path,.ov-run,.aiflow .ai-spark{animation:none}
.ov__tabs button::before,.ov__tabs button::after{animation:none!important}
.btn{transition:background-color .15s var(--hd-ease),color .15s var(--hd-ease),border-color .15s var(--hd-ease),transform .15s var(--hd-ease)}
.btn:active{transform:scale(.98)}

/* 1. Spacing: everything on the 4px grid */
.scope__hud,.chain,.record__out{gap:8px}
.chain li{padding:8px 12px}
.credit{padding:0 8px}
.tag{padding:4px 8px}
.ov__badge{padding:4px 8px}
.record__flag{padding:2px 8px}
.record__out i{padding:2px 8px}
.brand__mark{font-weight:600}
h3{font-weight:500}
svg text{font-weight:500}
.ov__info h3,.success h3{font-weight:500}
.aiflow text,.ov svg text{font-weight:500}

/* Orbit View labels: solid chips instead of outlined text, readable badge */
.ov-lbl,.ov-lbl--dim{font:500 18px var(--font-body);fill:#111827;stroke:none;paint-order:normal}
.ov-chip{fill:#fff;stroke:rgba(17,24,39,.12);stroke-width:1}
.ov__badge{background:rgba(17,24,39,.78);color:#fff;font-size:12px;letter-spacing:0}
@media (max-width:900px){.ov-lbl,.ov-lbl--dim{font-size:26px}}

/* Headings bold (client preference) */
.hero__title,.h2,.ov__info h3,.success h3{font-weight:700}
.m-card h3,.mod h3,.f4 h3,.example__copy .h3,.faq__list summary,.record__title,.partners__head h3,h3,.brand__word{font-weight:700}
/* Orbit View: smaller image so it fits the section on laptops */
@media (min-width:901px){
  .ov{grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:start}
  .ov__stage{width:min(440px,calc(100vh - 240px),44vw);min-width:340px}
  .ov-lbl,.ov-lbl--dim{font-size:22px}
}
/* Evidence record: image matches the height of the details beside it */
@media (min-width:901px){
  .record__site{grid-template-columns:48% 1fr;align-items:stretch}
  .record__site img{height:100%;min-height:220px;aspect-ratio:auto;object-fit:cover}
}
/* How it works: who does each step, inputs and outputs */
.f4__who{margin:0 0 6px;font:500 13px/1.4 var(--font-body);color:#6b7487}
.f4 .f4__who{color:#6b7487}
.io{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.io__col{background:#fff;border:1px solid rgba(17,24,39,.12);border-radius:12px;padding:20px 24px}
.io__label{margin:0 0 8px;font-weight:700;color:#111827;font-size:15px}
.io ul{margin:0;padding-left:18px;list-style:disc;color:#4b5565;font-size:15px;line-height:1.6}
.io li{margin-bottom:4px}.io li::marker{color:#6b7487}
@media (max-width:700px){.io{grid-template-columns:1fr}.io__col{padding:16px}}
/* Inputs box: single column after removing "You get back" */
.io{grid-template-columns:minmax(0,560px)}
/* Orbit View: image height matches the panel on the right */
@media (min-width:901px){
  .ov{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  .ov__stage{width:auto;min-width:0;aspect-ratio:auto;height:100%;min-height:420px}
  .ov__stage img,.ov__svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
}
/* Orbit View: animated highlights */
@keyframes ovGlow{0%,100%{stroke-opacity:1;filter:drop-shadow(0 0 0 rgba(255,138,61,0))}50%{stroke-opacity:.55;filter:drop-shadow(0 0 6px rgba(255,138,61,.9))}}
@keyframes ovMarch{to{stroke-dashoffset:-56}}
@keyframes ovPt{0%,100%{r:10}50%{r:14}}
@keyframes ovFill{0%,100%{fill-opacity:1}50%{fill-opacity:.35}}
@keyframes ovRun{to{stroke-dashoffset:-48}}
.ov__stage .ov-fire{animation:ovGlow 2.4s ease-in-out infinite}
.ov__stage .ov-fire:nth-of-type(2){animation-delay:.3s}.ov__stage .ov-fire:nth-of-type(3){animation-delay:.6s}.ov__stage .ov-fire:nth-of-type(4){animation-delay:.9s}
.ov__stage .ov-yard,.ov__stage .ov-measure{animation:ovMarch 2s linear infinite}
.ov__stage .ov-conc:not(.ov-conc--in){animation:ovMarch 3s linear infinite}
.ov__stage .ov-conc--in{animation:ovFill 2.8s ease-in-out infinite}
.ov__stage .ov-pt{animation:ovPt 1.8s ease-in-out infinite}
.ov__stage .ov-flood{animation:ovFill 3s ease-in-out infinite}
.ov__stage .ov-run{animation:ovRun 1.4s linear infinite}
@media (prefers-reduced-motion:reduce){.ov__stage .ov-fire,.ov__stage .ov-yard,.ov__stage .ov-measure,.ov__stage .ov-conc,.ov__stage .ov-pt,.ov__stage .ov-flood,.ov__stage .ov-run{animation:none}}
/* Site record: full-width, no empty left column */
.example{grid-template-columns:1fr;gap:var(--space-4)}
.example__copy p{max-width:72ch}
@media (min-width:901px){
  .record{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr)}
  .record__head{grid-column:1/-1}
  .record__qs{border-top:0;border-left:1px solid var(--hd-line-2,var(--line));padding:var(--space-4) var(--space-5)}
  .record__qs ol{gap:var(--space-3)}
}
/* Footer: links on one line, level with the brand row; legal copy aligned */
.footer__links a{white-space:nowrap}
.footer__legal p{white-space:normal}
.footer__legal p:last-child{white-space:nowrap}
@media (min-width:901px){
  .footer__inner{align-items:flex-start}
  .footer__links{min-height:32px;align-items:center;gap:var(--space-6)}
}
@media (max-width:900px){.footer__links{row-gap:8px;column-gap:20px}}
/* Footer links level with the tagline */
@media (min-width:901px){
  .footer__inner{align-items:flex-end}
  .footer__links{min-height:0;align-items:baseline}
  .footer__links a,.footer__tag{line-height:1.5}
  .footer__tag{margin-bottom:0}
}
/* Evidence record: boxed observations on the image */
.record__img{position:relative;border-radius:8px;overflow:hidden;align-self:stretch}
.record__img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:0}
.record__marks{position:absolute;inset:0;width:100%;height:100%}
.rm polygon,.rm__area{fill:rgba(255,255,255,.08);stroke:#fff;stroke-width:2;stroke-dasharray:6 4;animation:rmMarch 1.6s linear infinite}
.rm rect:not(.rm__area){fill:#14213D;stroke:none}
.rm text{fill:#fff;font:600 14px/1 var(--font-body,system-ui),sans-serif;text-anchor:middle}
@keyframes rmMarch{to{stroke-dashoffset:-20}}
@media (prefers-reduced-motion:reduce){.rm polygon,.rm__area{animation:none}}
@media (min-width:901px){
  .record__img img{height:100%;min-height:220px;aspect-ratio:auto;position:absolute;inset:0}
  .record__img{min-height:220px}
}
/* Hero background: sharp orbital photo, clean fade (no milky wash over the image) */
.hero--v2 .hero__bg img{opacity:1;object-position:62% 40%;filter:none}
.hero--v2 .hero__bg::after,.hero__bg::after{background:
  linear-gradient(90deg,#fff 0%,#fff 34%,rgba(255,255,255,.86) 44%,rgba(255,255,255,0) 62%),
  linear-gradient(0deg,#fff 0%,rgba(255,255,255,0) 18%)}
@media (max-width:900px){
  .hero--v2 .hero__bg::after,.hero__bg::after{background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.88) 55%,#fff 100%)}
}
.nav{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--line)}
.hero--v2 .hero__bg img{object-position:78% 72%}
/* Desktop: photo as a clean right-hand panel instead of a hazy full-bleed fade */
@media (min-width:901px){
  .hero--v2 .hero__bg{left:auto;right:0;width:46%;border-bottom-left-radius:28px;overflow:hidden}
  .hero--v2 .hero__bg img{object-position:72% 60%}
  .hero--v2 .hero__bg::after,.hero__bg::after{background:linear-gradient(90deg,rgba(9,14,28,.35) 0%,rgba(9,14,28,0) 30%)}
}
@media (min-width:901px){
  .hero--v2 .scope .credit{background:rgba(9,14,28,.55);color:rgba(255,255,255,.82);padding:3px 8px;border-radius:4px;display:inline-block}
}
/* Tablet/phone: no washed-out photo behind the copy; the satellite card carries the visual */
@media (max-width:900px){.hero--v2 .hero__bg{display:none}}
/* Body text slightly larger; headings unchanged */
:root{--bt:17px;--bt-lg:19px}
@media (max-width:1100px){:root{--bt:16.5px;--bt-lg:18px}}
@media (max-width:640px){:root{--bt:15px;--bt-lg:16px}}
.f4 p:not(.f4__who),.mod p,.m-card p,.record dd,.record__qs li,.desks span,.ov__info p,.example__copy p,.benefits li,.io li,
.form-wrap label,.form-wrap input,.form-wrap select,.form-wrap textarea,.form-wrap p:not(.credit),.success p,.pilot .lead+p,.footer__tag{font-size:var(--bt)}
.hero__sub,.lead,.faq p,.ai__cap{font-size:var(--bt-lg)}
.legal p,.legal li,main.legal p,main.legal li{font-size:var(--bt)}
@media (max-width:640px){
  :root{--bt-lg:15.5px}
  .f4 p:not(.f4__who),.mod p,.m-card p{font-size:13.5px}
  .faq p{font-size:14.5px}
}
.record dd.stamp{font-size:12px}

/* Orbit View layer buttons: same style as the site's buttons, no glow */
.ov__tabs button{color:#0B0E14!important;background:#fff!important;border:1px solid rgba(16,24,40,.25)!important;border-radius:10px!important;box-shadow:none!important;font-weight:500!important;animation:none!important;transform:none!important;transition:background-color .15s,border-color .15s,color .15s!important}
.ov__tabs button:hover{border-color:#14213D!important;color:#14213D!important;background:#F6F7FA!important}
.ov__tabs button:focus-visible{outline:2px solid #14213D;outline-offset:2px}
.ov__tabs button[aria-selected=true]{color:#fff!important;background:#14213D!important;border-color:#14213D!important}
.ov__tabs button::before{background:var(--c)!important;box-shadow:none!important;animation:dotBlink 1.6s ease-in-out infinite!important}
.ov__tabs button:nth-child(2)::before{animation-delay:.5s!important}.ov__tabs button:nth-child(3)::before{animation-delay:1s!important}
.ov__tabs button::after{content:none!important;display:none!important}
@keyframes dotBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){.ov__tabs button::before{animation:none!important}}

/* Orbit View: image on the right, controls and text on the left (desktop) */
@media (min-width:901px){.ov__panel{order:1}.ov__stage{order:2}}