/* ==========================================================================
   Reality Computer Services: shared site stylesheet
   Used by every page EXCEPT index.html, which keeps its own inline CSS
   because its homepage-only components (video hero, credential strip,
   tabbed "How we work", reviews carousel, IP tool) are not reused.
   If a token below changes, change it in index.html's <style> too.
   ========================================================================== */
:root{
  --ink:#05111A;
  --ink-2:#0A1A24;
  --ink-3:#0E2029;
  --line:#19242B;
  --line-2:#22313A;

  --pale:#F0F3FA;
  --cream:#FBF9F5;
  --pale-line:#DDE3EE;

  --white:#FFFFFF;
  --dim:#B7C0C8;
  --dim-2:#8B98A2;
  --dark-text:#25313A;
  --dark-muted:#4E5C66;

  --orange:#F58020;
  --orange-lift:#FF9440;
  --orange-ink:#B05708;
  --orange-soft:rgba(245,128,32,.12);

  --gutter:clamp(1.25rem,5vw,4rem);
  --radius:20px;
  --radius-sm:12px;
  --head-h:76px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--ink);color:var(--white);
  font-family:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}

h1,h2,h3,h4{font-family:'Poppins',system-ui,sans-serif;font-weight:600;line-height:1.18;margin:0;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2.125rem,1.45rem + 2.9vw,3.75rem);line-height:1.1;letter-spacing:-.02em}
h2{font-size:clamp(1.75rem,1.35rem + 1.7vw,2.625rem);letter-spacing:-.015em}
h3{font-size:clamp(1.1875rem,1.12rem + .4vw,1.4375rem)}
h4{font-size:1.0625rem;font-weight:600}
p{margin:0}
a{color:inherit}

.eyebrow{
  font-family:'Poppins',sans-serif;font-size:.75rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--orange);margin-bottom:1rem;
}
.eyebrow--ink{color:var(--orange-ink)}
.lede{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.68;color:var(--dim)}
.lede--ink{color:var(--dark-muted)}

.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:900px}
.section{padding-block:clamp(3.5rem,7vw,6.5rem)}
.section--pale{background:var(--pale);color:var(--dark-text)}
.section--cream{background:var(--cream);color:var(--dark-text)}
.section--pale p,.section--cream p{color:var(--dark-muted)}
.section--pale h2,.section--cream h2,.section--pale h3,.section--cream h3{color:var(--dark-text)}

.head{max-width:44rem;margin-bottom:clamp(2.25rem,4vw,3.25rem)}
.head--center{margin-inline:auto;text-align:center}
.head p{margin-top:1.1rem}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.9rem 1.6rem;
  font-family:'Poppins',sans-serif;font-size:.9375rem;font-weight:500;
  border-radius:999px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .2s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px;flex:0 0 auto}
.btn--primary{background:var(--orange);color:#160A02;border-color:var(--orange)}
.btn--primary:hover{background:var(--orange-lift);border-color:var(--orange-lift)}
.btn--ghost{border-color:rgba(255,255,255,.24);color:var(--white)}
.btn--ghost:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}
.btn--dark{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn--dark:hover{background:var(--ink-3);border-color:var(--ink-3)}
.btn--outline-ink{border-color:#C2CCDA;color:var(--dark-text)}
.btn--outline-ink:hover{border-color:var(--dark-text);background:rgba(37,49,58,.05)}
.btn--sm{min-height:44px;padding:.65rem 1.2rem;font-size:.875rem}

.cta-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
@media (max-width:559px){.cta-row .btn{flex:1 1 100%}}

.arrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:'Poppins',sans-serif;font-size:.9375rem;font-weight:500;
  color:var(--orange);text-decoration:none;
}
.arrow svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.arrow:hover svg{transform:translateX(4px)}

:where(a,button,input,textarea,select,[tabindex]):focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
.section--pale :where(a,button,input,textarea,select):focus-visible,
.section--cream :where(a,button,input,textarea,select):focus-visible{outline-color:var(--orange-ink)}

@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .js .rv.in{opacity:1;transform:none}
  .js .rv-d1{transition-delay:.08s}.js .rv-d2{transition-delay:.16s}
}

/* ---------- Header ---------- */
.site-head{position:sticky;top:0;z-index:60;background:rgba(5,17,26,.82);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--line)}
.site-head__in{display:flex;align-items:center;gap:1.25rem;height:var(--head-h)}
.logo{display:flex;align-items:center;flex:0 1 auto;min-width:0}
.logo img{height:28px;width:auto}
@media (min-width:600px){.logo img{height:34px}}
.nav{display:none;margin-left:auto;align-items:center;gap:.15rem}
.nav a{font-family:'Poppins',sans-serif;font-size:.9375rem;color:var(--dim);text-decoration:none;
  padding:.6rem .8rem;border-radius:999px;white-space:nowrap;
  transition:color .25s var(--ease),background-color .25s var(--ease)}
.nav a:hover{color:var(--white);background:rgba(255,255,255,.07)}
.nav a[aria-current="page"]{color:var(--white);background:rgba(255,255,255,.09)}
.head-actions{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.nav ~ .head-actions{margin-left:.75rem}
.head-tel{display:none;align-items:center;gap:.5rem;text-decoration:none;white-space:nowrap;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:.9375rem;color:var(--white);padding:.5rem}
.head-tel svg{width:16px;height:16px;color:var(--orange)}
.head-tel:hover{color:var(--orange-lift)}
.burger{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.55rem .95rem;
  border-radius:999px;background:transparent;border:1px solid rgba(255,255,255,.24);color:var(--white);
  font-family:'Poppins',sans-serif;font-size:.875rem;font-weight:500;cursor:pointer;transition:border-color .25s var(--ease)}
.burger:hover{border-color:rgba(255,255,255,.6)}
.burger svg{width:16px;height:16px}
/* ---------- Mobile menu ----------
   Off-canvas panel with one level of drill-down. The sub-panel slides over the
   root rather than pushing it, so the back gesture matches what a phone user
   expects, and the root stays where they left it. */
.drawer{position:fixed;inset:0;z-index:90}
.drawer[hidden]{display:none}
.drawer__scrim{position:absolute;inset:0;background:rgba(2,9,14,.66);
  opacity:0;transition:opacity .34s var(--ease)}
.drawer.in .drawer__scrim{opacity:1}
.drawer__panel{
  position:absolute;top:0;right:0;height:100%;width:min(88vw,400px);
  background:var(--ink-2);border-left:1px solid var(--line-2);
  box-shadow:-24px 0 60px rgba(0,0,0,.5);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .38s var(--ease);
}
.drawer.in .drawer__panel{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 1.25rem;border-bottom:1px solid var(--line);flex:0 0 auto}
.drawer__brand{font-family:'Poppins',sans-serif;font-size:.75rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2)}
.drawer__x{display:grid;place-items:center;width:44px;height:44px;margin-right:-.6rem;
  background:none;border:0;border-radius:999px;color:var(--white);cursor:pointer;
  transition:background-color .25s var(--ease)}
.drawer__x:hover{background:rgba(255,255,255,.08)}
.drawer__x svg{width:20px;height:20px}

.drawer__slides{position:relative;flex:1 1 auto;overflow:hidden}
.drawer__slide{
  position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:.5rem 1.25rem 1.75rem;
  display:flex;flex-direction:column;
  transition:transform .34s var(--ease),opacity .34s var(--ease);
}
.drawer__slide[hidden]{display:none}
.drawer__slide--sub{transform:translateX(100%);opacity:0;background:var(--ink-2)}
.drawer__slide--sub.in{transform:none;opacity:1}
.drawer__slide[data-slide="root"].out{transform:translateX(-22%);opacity:0}

.drawer__slide > a:not(.btn),.drawer__into{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.95rem .25rem;text-align:left;
  font-family:'Poppins',sans-serif;font-size:1.0625rem;font-weight:500;
  color:var(--white);text-decoration:none;
  background:none;border:0;border-bottom:1px solid var(--line);
  width:100%;cursor:pointer;
}
.drawer__slide > a[aria-current="page"]:not(.btn){color:var(--orange)}
.drawer__into svg{width:18px;height:18px;color:var(--dim-2);flex:0 0 auto}
.drawer__back{
  display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;
  margin:.35rem 0 .35rem -.5rem;padding:.6rem .8rem;
  background:none;border:0;border-radius:999px;cursor:pointer;
  font-family:'Poppins',sans-serif;font-size:.9375rem;font-weight:500;color:var(--dim);
  transition:color .25s var(--ease),background-color .25s var(--ease);
}
.drawer__back:hover{color:var(--white);background:rgba(255,255,255,.07)}
.drawer__back svg{width:17px;height:17px}
.drawer__title{font-family:'Poppins',sans-serif;font-size:1.375rem;font-weight:600;
  color:var(--white);margin:.35rem 0 .85rem}
.drawer__all{color:var(--orange) !important}
.drawer .btn{width:100%;margin-top:1.5rem}
body.menu-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .drawer__panel,.drawer__scrim,.drawer__slide{transition:none}
}
@media (min-width:1240px){.nav{display:flex}.head-tel{display:inline-flex}.burger{display:none}.drawer{display:none !important}}
@media (max-width:1239px){.head-actions .btn{display:none}}

.dock{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:1fr 1fr;
  background:var(--ink);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.dock a{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:58px;text-decoration:none;
  font-family:'Poppins',sans-serif;font-weight:500;font-size:.9375rem}
.dock__a{color:var(--white)}
.dock__b{background:var(--orange);color:#160A02}
.dock svg{width:17px;height:17px}
@media (min-width:1240px){.dock{display:none}}
@media (max-width:1239px){body{padding-bottom:58px}}

/* ---------- Service hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--ink);isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg video,.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(5,17,26,.96) 0%,rgba(5,17,26,.88) 44%,rgba(5,17,26,.56) 80%,rgba(5,17,26,.7) 100%),
    linear-gradient(to top,var(--ink) 2%,rgba(5,17,26,0) 48%)}
@media (max-width:900px){
  .hero__bg::after{background:linear-gradient(to bottom,rgba(5,17,26,.9) 0%,rgba(5,17,26,.84) 40%,var(--ink) 96%)}
}
.hero__glow{position:absolute;z-index:1;pointer-events:none;width:min(66vw,760px);aspect-ratio:1;
  right:-12%;top:-26%;background:radial-gradient(circle,rgba(245,128,32,.2) 0%,rgba(245,128,32,0) 62%)}
.hero__in{position:relative;z-index:2;padding-block:clamp(2rem,4vw,3rem) clamp(3.5rem,7vw,5.5rem);
  min-height:min(70svh,660px);display:flex;flex-direction:column;justify-content:center}
/* Video hero: the copy has to stay inside the dark part of the gradient, so it
   is the narrower of the two. */
.hero__copy{max-width:42rem}
.hero p.lede{margin-top:1.4rem;max-width:38rem}

/* Breadcrumb */
.crumbs{position:relative;z-index:2;padding-top:1.25rem;font-size:.875rem;color:var(--dim-2)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0;padding:0}
.crumbs a{color:var(--dim-2);text-decoration:none}
.crumbs a:hover{color:var(--white)}
.crumbs li[aria-current]{color:var(--dim)}
.crumbs svg{width:14px;height:14px;opacity:.6}

/* ---------- Problem block ---------- */
.two{display:grid;gap:clamp(2rem,4vw,4rem);align-items:start}
@media (min-width:940px){.two{grid-template-columns:1fr 1fr}}
.pullquote{
  border-left:1px solid var(--orange);padding-left:1.5rem;
  font-family:'Poppins',sans-serif;font-weight:500;
  font-size:clamp(1.1875rem,1.05rem + .7vw,1.5rem);line-height:1.4;color:var(--white);
}

/* ---------- Coverage grid ---------- */
.covers{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
@media (min-width:620px){.covers{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.covers{grid-template-columns:repeat(3,1fr)}}
.covers li{
  display:flex;align-items:flex-start;gap:.8rem;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:1rem 1.15rem;font-size:.9375rem;color:var(--dim);
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.covers li:hover{border-color:var(--line-2);background:var(--ink-3)}
.covers svg{width:19px;height:19px;flex:0 0 auto;margin-top:.15rem;color:var(--orange);
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Options ---------- */
.options{display:grid;gap:1rem}
@media (min-width:900px){.options{grid-template-columns:1fr 1fr}}
.option{border-radius:var(--radius);padding:clamp(1.75rem,3vw,2.5rem);display:flex;flex-direction:column}
.option--dark{background:var(--ink-2);border:1px solid var(--line)}
.option.option--orange{background:linear-gradient(158deg,#F58020 0%,#D9631A 100%);color:#1B0C02}
.option.option--orange h3{color:#1B0C02}
.option.option--orange > p{color:#2A1204}
.option.option--orange li{color:#2A1204}
.option.option--orange li svg{color:#1B0C02}
.option h3{margin-bottom:.5rem}
.option__for{font-family:'Poppins',sans-serif;font-size:.8125rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:1rem}
.option.option--orange .option__for{color:#5A2B06}
.option > p{color:var(--dim)}
.option ul{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.6rem}
.option li{display:flex;align-items:flex-start;gap:.65rem;font-size:.9375rem;color:var(--dim)}
.option li svg{width:18px;height:18px;flex:0 0 auto;margin-top:.2rem;color:var(--orange);
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.option .btn{margin-top:2rem;align-self:flex-start}

/* ---------- Cards ---------- */
.cards{display:grid;gap:1rem}
@media (min-width:760px){.cards{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.5rem,2.4vw,2rem);display:flex;flex-direction:column;
  transition:border-color .35s var(--ease),transform .35s var(--ease),background-color .35s var(--ease)}
.card:hover{border-color:var(--line-2);transform:translateY(-4px);background:var(--ink-3)}
.card h3{margin-bottom:.7rem}
.card p{color:var(--dim);font-size:.9375rem;line-height:1.65}
/* Icon: glyph only, no container. Sized up to carry the weight the box held. */
.icon{display:block;width:32px;height:32px;margin:0 0 1.25rem;color:var(--orange)}
.icon svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Steps ---------- */
.steps{display:grid;gap:1rem}
@media (min-width:860px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--white);border:1px solid var(--pale-line);border-radius:var(--radius);padding:clamp(1.5rem,2.4vw,2rem)}
.step__n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:999px;
  background:var(--orange-soft);color:var(--orange-ink);
  font-family:'Poppins',sans-serif;font-weight:600;font-size:.9375rem;margin-bottom:1.25rem}
.step h3{margin-bottom:.6rem;font-size:1.25rem}
.step p{font-size:.9375rem;line-height:1.65}

/* ---------- CTA band ---------- */
.band{
  background:
    radial-gradient(90% 160% at 88% 10%,rgba(245,128,32,.16) 0%,rgba(245,128,32,0) 58%),
    var(--ink-2);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.75rem,4vw,3rem);
  display:grid;gap:1.5rem;align-items:center;
}
@media (min-width:860px){.band{grid-template-columns:1.4fr auto;gap:2.5rem}}
.band h2{font-size:clamp(1.5rem,1.25rem + 1.1vw,2.125rem)}
.band p{margin-top:.75rem;color:var(--dim)}
.band .cta-row{margin-top:0}

/* ---------- Reviews ---------- */
.quotes{display:grid;gap:1rem}
@media (min-width:800px){.quotes{grid-template-columns:repeat(2,1fr)}}
.quote{margin:0; /* figure carries a UA margin of 1em 40px */
  background:var(--white);border:1px solid var(--pale-line);border-radius:var(--radius);
  padding:clamp(1.5rem,2.6vw,2.25rem);display:flex;flex-direction:column}
.stars{display:flex;gap:2px;margin-bottom:1.25rem}
.stars svg{width:17px;height:17px;color:var(--orange)}
.quote blockquote{margin:0;font-size:1.0625rem;line-height:1.65;color:var(--dark-text)}
.quote figcaption{margin-top:auto;padding-top:1.6rem}
.quote cite{display:block;font-style:normal;font-family:'Poppins',sans-serif;font-weight:600;font-size:1rem;color:var(--dark-text)}
.quote figcaption span{font-size:.875rem;color:var(--dark-muted)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:1.35rem 0;cursor:pointer;list-style:none;
  font-family:'Poppins',sans-serif;font-weight:500;font-size:1.0625rem;color:var(--white);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--orange-lift)}
.faq summary span{flex:0 0 auto;width:26px;height:26px;border-radius:999px;border:1px solid var(--line-2);
  display:grid;place-items:center;margin-top:.1rem;transition:transform .3s var(--ease),border-color .3s var(--ease)}
.faq summary span svg{width:13px;height:13px;color:var(--orange);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.faq details[open] summary span{transform:rotate(45deg);border-color:var(--orange)}
.faq p{padding:0 0 1.5rem;color:var(--dim);max-width:62ch;font-size:.9375rem;line-height:1.7}

/* ---------- Contact ---------- */
.contact{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:start}
@media (min-width:960px){.contact{grid-template-columns:1fr 1.15fr}}
.contact-items{list-style:none;margin:2.25rem 0 0;padding:0;display:grid;gap:1rem}
.contact-items li{display:flex;gap:1rem;align-items:flex-start;background:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.15rem 1.25rem}
.contact-items .icon{width:26px;height:26px;margin:.15rem 0 0;flex:0 0 auto}
.contact-items .icon svg{width:26px;height:26px}
.contact-items a,.contact-items strong{font-family:'Poppins',sans-serif;font-weight:600;font-size:1.0625rem;
  text-decoration:none;color:var(--white);display:block}
.contact-items a:hover{color:var(--orange-lift)}
.contact-items p{margin-top:.15rem;font-size:.875rem;color:var(--dim-2)}
.todo{color:var(--orange);font-weight:500}

.form{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2.25rem);display:grid;gap:1.15rem}
.field{display:grid;gap:.45rem}
.field label{font-family:'Poppins',sans-serif;font-size:.875rem;font-weight:500;color:var(--white)}
.field .opt{color:var(--dim-2);font-weight:400}
.field input,.field textarea,.field select{
  width:100%;font:inherit;font-size:1rem;color:var(--white);padding:.85rem 1rem;
  background:var(--ink);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.field input::placeholder,.field textarea::placeholder{color:#7A8791}
.field input:hover,.field textarea:hover,.field select:hover{border-color:#33454F}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(245,128,32,.2)}
.field textarea{min-height:132px;resize:vertical}
.field select{appearance:none;padding-right:2.6rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238B98A2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.1rem center}
.row2{display:grid;gap:1.15rem}
@media (min-width:560px){.row2{grid-template-columns:1fr 1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{min-height:1.4em;font-size:.9375rem;font-weight:500;line-height:1.5}
.form-status.ok{color:#4ADE80}
.form-status.err{color:var(--orange-lift)}
.form .hint,.hint{font-size:.8125rem;color:var(--dim-2);line-height:1.55}

/* ---------- Footer ---------- */
.foot{background:var(--ink);border-top:1px solid var(--line);color:var(--dim)}
.foot a{color:var(--dim);text-decoration:none}
.foot a:hover{color:var(--white)}
.foot__top{display:grid;gap:2.5rem;padding-block:clamp(3rem,6vw,4.5rem)}
@media (min-width:820px){.foot__top{grid-template-columns:1.5fr 1fr 1fr}}
.foot img{height:36px;width:auto;margin-bottom:1.25rem}
.foot h4{font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2);margin-bottom:1.15rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem;font-size:.9375rem}
.foot__tel{display:inline-block;margin-top:1.25rem;font-family:'Poppins',sans-serif;font-weight:600;font-size:1.25rem;color:var(--white) !important}
.foot__bot{display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;padding-block:1.5rem;border-top:1px solid var(--line);font-size:.8125rem;color:var(--dim-2)}
.credit a{color:var(--dim-2);text-decoration:none;border-bottom:1px solid rgba(139,152,162,.35);transition:color .25s var(--ease),border-color .25s var(--ease)}
.credit a:hover{color:var(--white);border-color:var(--white)}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--orange);color:#160A02;
  padding:.75rem 1.1rem;border-radius:999px;font-weight:600;text-decoration:none;transition:top .2s var(--ease)}
.skip:focus{top:1rem}
:where(section,[id]){scroll-margin-top:calc(var(--head-h) + 12px)}

/* ==========================================================================
   Added when the site went multi-page (all services on their own pages)
   ========================================================================== */

/* ---------- Nav dropdown ----------
   A real link to the hub page, plus a separate disclosure button for the menu.
   With JS off the link still works; the button is simply inert. */
.nav__group{position:relative;display:flex;align-items:center;gap:0}
.nav .nav__link{padding-right:.45rem}
.nav__group.open .nav__link,.nav__group[data-current] .nav__link{color:var(--white)}
.nav__toggle{
  display:inline-grid;place-items:center;width:30px;height:30px;
  background:none;border:0;border-radius:999px;cursor:pointer;color:var(--dim);
  transition:color .25s var(--ease),background-color .25s var(--ease);
}
.nav__toggle:hover{color:var(--white);background:rgba(255,255,255,.07)}
.nav__toggle svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.nav__toggle[aria-expanded="true"]{color:var(--white)}
.nav__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}

.nav__panel{
  position:absolute;top:calc(100% + .7rem);left:50%;transform:translate(-50%,-6px);
  width:min(92vw,640px);z-index:80;
  background:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  padding:.6rem;
  display:grid;gap:.15rem;grid-template-columns:1fr 1fr;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.nav__group.open .nav__panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
/* A panel with one or two entries does not need two columns or the full width. */
.nav__panel--one{grid-template-columns:1fr;width:min(92vw,340px)}
/* Tools & downloads: link column on the left, download centre call to action right */
.nav__panel--tools{width:min(92vw,660px);grid-template-columns:1fr 1fr;align-items:start;gap:.5rem}
.nav__panel .nav__col{display:grid;gap:.15rem;align-content:start}
.nav__panel .nav__cta{
  display:grid;gap:.4rem;align-content:start;padding:1.1rem 1.2rem;
  background:rgba(245,128,32,.1);border:1px solid rgba(245,128,32,.28);
  border-radius:var(--radius-sm);
}
.nav__panel .nav__cta:hover,.nav__panel .nav__cta:focus-visible{
  background:rgba(245,128,32,.16);border-color:rgba(245,128,32,.45)
}
.nav__panel .nav__cta span{font-size:.8125rem;line-height:1.5;color:var(--dim-2)}
.nav__panel .nav__cta span.nav__cta__go{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:.2rem;
  font-family:'Poppins',sans-serif;font-weight:500;font-size:.875rem;color:var(--orange)
}
.nav__panel .nav__cta span.nav__cta__go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.nav__panel .nav__cta:hover span.nav__cta__go{color:var(--orange-lift)}
.nav__panel .nav__cta:hover span.nav__cta__go svg{transform:translateX(3px)}
.nav__panel a{
  display:grid;gap:.1rem;padding:.7rem .85rem;border-radius:var(--radius-sm);
  text-decoration:none;white-space:normal;
}
.nav__panel a:hover,.nav__panel a:focus-visible{background:rgba(255,255,255,.07)}
.nav__panel a[aria-current="page"]{background:rgba(245,128,32,.13)}
.nav__panel b{font-family:'Poppins',sans-serif;font-weight:500;font-size:.9375rem;color:var(--white)}
.nav__panel span{font-size:.8125rem;line-height:1.45;color:var(--dim-2)}
.nav__panel .nav__all{grid-column:1/-1;margin-top:.15rem;border-top:1px solid var(--line);
  padding-top:.85rem;display:flex;align-items:center;gap:.5rem;
  color:var(--orange);font-family:'Poppins',sans-serif;font-weight:500;font-size:.9375rem}
.nav__panel .nav__all svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.nav__panel .nav__all:hover{color:var(--orange-lift)}
.nav__panel .nav__all:hover svg{transform:translateX(3px)}

/* Drawer sub-list (mobile) */
.drawer__sub{display:grid;padding:0 0 .35rem .9rem;border-left:1px solid var(--line);margin:.15rem 0 .5rem}
.drawer__sub a{font-size:.9375rem;font-weight:400;color:var(--dim);padding:.7rem .25rem;border-bottom:0}
.drawer__sub a:hover{color:var(--white)}
.drawer__lbl{font-family:'Poppins',sans-serif;font-size:.75rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim-2);padding:1rem .25rem .35rem}

/* ---------- Plain hero (pages with no video) ---------- */
.hero--plain{
  background:
    radial-gradient(80% 120% at 82% 0%,rgba(245,128,32,.13) 0%,rgba(245,128,32,0) 60%),
    linear-gradient(180deg,var(--ink-2) 0%,var(--ink) 100%);
  border-bottom:1px solid var(--line);
}
.hero--plain .hero__in{min-height:0;padding-block:clamp(1.75rem,3.5vw,2.75rem) clamp(3rem,6vw,4.5rem)}
/* No video to keep clear of, so the column can run wider. The lede stays
   narrower than the heading. Long question headings want the room, body copy
   past roughly 70 characters gets harder to read, not easier. */
.hero--plain .hero__copy{max-width:52rem}
.hero--plain p.lede{max-width:42rem}

/* ---------- Service index cards ---------- */
.card--link{text-decoration:none;color:inherit}
.card--link .arrow{margin-top:1.35rem}
.card__foot{margin-top:auto;padding-top:1.35rem}
.card ul.mini{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.45rem}
.card ul.mini li{display:flex;gap:.6rem;align-items:flex-start;font-size:.875rem;color:var(--dim-2)}
.card ul.mini svg{width:16px;height:16px;flex:0 0 auto;margin-top:.25rem;color:var(--orange);
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Related services ---------- */
.more{display:grid;gap:.75rem}
@media (min-width:700px){.more{grid-template-columns:1fr 1fr}}
@media (min-width:1060px){.more{grid-template-columns:repeat(4,1fr)}}
.more a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:1.1rem 1.25rem;text-decoration:none;
  font-family:'Poppins',sans-serif;font-weight:500;font-size:.9375rem;color:var(--white);
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.more a:hover{border-color:var(--line-2);background:var(--ink-3)}
.more svg{width:17px;height:17px;flex:0 0 auto;color:var(--orange);
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s var(--ease)}
.more a:hover svg{transform:translateX(3px)}

/* ---------- Prose (about page) ---------- */
.prose p{color:var(--dim);margin-top:1.15rem;max-width:64ch}
.prose p:first-child{margin-top:0}
.section--pale .prose p,.section--cream .prose p{color:var(--dark-muted)}

/* ---------- Steps on a dark ground ---------- */
.step--dark{background:var(--ink-2);border-color:var(--line)}
.step--dark h3{color:var(--white)}
.step--dark p{color:var(--dim)}

/* ---------- Partner logos ---------- */
.partners{list-style:none;margin:0;padding:0;display:grid;gap:1rem;text-align:left}
@media (min-width:700px){.partners{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.partners{grid-template-columns:repeat(4,1fr)}}
.partners li{background:var(--white);border:1px solid var(--pale-line);border-radius:var(--radius);padding:1.5rem}
.partners__logo{display:flex;align-items:center;height:34px;margin-bottom:.9rem}
.partners__logo img{max-height:100%;max-width:160px;width:auto;height:auto;object-fit:contain}
.partners li:nth-child(3) .partners__logo img{max-width:175px}
.partners p{font-size:.875rem;line-height:1.6}

/* ==========================================================================
   Animated hero art
   An alternative to the video hero for services with no honest footage behind
   them. Drawn from the site's own icon set at display scale, so the hero and
   the service cards speak one language. Sits where the video would.
   ========================================================================== */
.hero--art{
  background:
    radial-gradient(66% 104% at 76% 6%,rgba(245,128,32,.15) 0%,rgba(245,128,32,0) 56%),
    linear-gradient(180deg,var(--ink-2) 0%,var(--ink) 100%);
  border-bottom:1px solid var(--line);
}
.hero__art{display:none}
@media (min-width:1000px){
  .hero__art{
    display:block;position:absolute;z-index:1;pointer-events:none;
    right:clamp(1rem,3vw,4rem);top:50%;transform:translateY(-48%);
    width:min(46vw,650px);
  }
  .hero__art svg{width:100%;height:auto}
}

/* One stroke language for the whole illustration. vector-effect holds the
   width steady through the scale transforms that size each glyph. */
.mig [stroke],.mig path,.mig rect,.mig circle{
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round;
}
.mig-server{stroke:#61798A;stroke-width:2.8}
.mig-cloud{stroke:var(--orange);stroke-width:3.4;opacity:.95}
.mig-cloud__fill{fill:rgba(245,128,32,.07);stroke:none}
.mig-halo{fill:url(#mig-halo-fill);stroke:none;opacity:.5}
.mig-item{stroke:var(--orange);stroke-width:2.6}
.mig-item--2{stroke:#B9C7D2}
.mig-tick{stroke:var(--orange);stroke-width:3}
.mig-tick circle{stroke:var(--orange);stroke-width:2.6}
.mig-route{stroke:var(--orange);stroke-width:2.2;stroke-dasharray:4 9;opacity:.7;
  vector-effect:non-scaling-stroke;stroke-linecap:round}

/* The route draws itself once, then the first item follows it. */
.js .mig-route{stroke-dasharray:280;stroke-dashoffset:280;
  animation:mig-draw 1.5s cubic-bezier(.22,1,.36,1) .15s forwards}
@keyframes mig-draw{to{stroke-dashoffset:0;stroke-dasharray:3 8}}

.mig-item{offset-path:path("M206 292 C 274 292, 284 198, 358 178");offset-rotate:0deg;opacity:0}
.mig-item--1{animation:mig-travel 6s cubic-bezier(.45,0,.55,1) 1.5s infinite}
.mig-item--2{animation:mig-travel 6s cubic-bezier(.45,0,.55,1) 3.5s infinite}
.mig-item--3{animation:mig-travel 6s cubic-bezier(.45,0,.55,1) 5.5s infinite}
@keyframes mig-travel{
  0%{offset-distance:0%;opacity:0}
  7%{opacity:1}
  60%{opacity:1}
  72%{offset-distance:100%;opacity:0}
  100%{offset-distance:100%;opacity:0}
}

/* The cloud lifts as each item lands, so the two ends of the story are linked. */
.mig-cloud{animation:mig-receive 6s ease-out 1.5s infinite}
@keyframes mig-receive{
  0%,58%{opacity:.72}
  68%{opacity:1}
  100%{opacity:.72}
}
.mig-led{fill:var(--orange);stroke:none;opacity:.32;animation:mig-read 6s steps(1,end) 1.5s infinite}
.mig-led--b{animation-delay:3.5s}
@keyframes mig-read{0%,10%{opacity:1}11%,100%{opacity:.3}}

.mig-tick{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.6)}
.js .mig-tick{animation:mig-done 18s cubic-bezier(.22,1,.36,1) 13s infinite}
@keyframes mig-done{
  0%{opacity:0;transform:scale(.6)}
  4%{opacity:1;transform:scale(1)}
  28%{opacity:1;transform:scale(1)}
  34%{opacity:0;transform:scale(1)}
  100%{opacity:0;transform:scale(1)}
}

/* Motion is decorative. Without it the graphic still tells the whole story:
   route drawn, items along it, tick showing. */
@media (prefers-reduced-motion:reduce){
  .mig-item,.mig-cloud,.mig-led,.mig-tick,.js .mig-route,.js .mig-tick{animation:none}
  .js .mig-route{stroke-dasharray:3 8;stroke-dashoffset:0}
  .mig-item{opacity:1}
  .mig-item--1{offset-distance:26%}
  .mig-item--2{offset-distance:56%}
  .mig-item--3{offset-distance:86%}
  .mig-cloud{opacity:1}
  .mig-led{opacity:1}
  .mig-tick{opacity:1;transform:none}
}

/* ---------- Cyber security hero art ----------
   Files arrive at one machine from every direction and pass behind its filled
   screen; the shield inside is what makes that safe. Same construction as the
   migration art: site icon paths at display scale, one stroke language, no JS. */
.sec [stroke],.sec path,.sec rect,.sec circle,.sec ellipse{
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round;
}
/* The art box overlaps the text column slightly at wide widths, so the leading
   edge is masked: arrivals fade in rather than crossing the copy. */
.hero__art:has(.sec){
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 17%);
          mask-image:linear-gradient(90deg,transparent 0,#000 17%);
}
.sec-halo{fill:url(#sec-halo-fill);stroke:none;opacity:.55}
.sec-monitor{stroke:#61798A;stroke-width:2.6}
.sec-monitor__screen{fill:#071219;stroke:none}
/* Keyline comet: one continuous sweep circling the screen bezel, never
   stopping. A conic gradient rotates on a ring the exact size of the screen
   rect (x180 y136 w220 h143 rx22 in the 560x400 viewBox, hence the
   percentages); the ring is cut with the classic two-layer mask-composite
   trick. The gradient IS the comet: sharp leading edge, long smooth taper,
   so there is nothing to bead or misalign. */
@property --sweep{syntax:'<angle>';initial-value:0deg;inherits:false}
.sec-sweep{
  position:absolute;pointer-events:none;
  left:32.143%;top:34%;width:39.286%;height:35.75%;
  border-radius:10% / 15.4%;
  padding:3px;
  background:conic-gradient(from var(--sweep) at 50% 50%,
    transparent 0turn,transparent .62turn,
    rgba(245,128,32,0) .62turn,rgba(245,128,32,.85) .965turn,#FFC894 1turn);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}
.sec-sweep--glow{padding:5px;margin:-2px;width:calc(39.286% + 4px);height:calc(35.75% + 4px);
  filter:blur(5px);opacity:.65}
.js .sec-sweep{animation:sec-sweep 6.5s linear infinite}
@keyframes sec-sweep{to{--sweep:360deg}}

.sec-shield{stroke:var(--orange);stroke-width:3.2}
.sec-shield__fill{fill:rgba(245,128,32,.09);stroke:none}
.sec-file{stroke:#9FB0BC;stroke-width:2.4;opacity:0;offset-rotate:0deg}

/* Six approaches, one per direction. Each ends inside the screen, so the file
   is occluded by the monitor rather than stopping at its edge. */
.sec-file--1{offset-path:path("M8 216 C 90 214, 150 210, 250 206")}
.sec-file--2{offset-path:path("M104 10 C 150 60, 210 120, 262 168")}
.sec-file--3{offset-path:path("M470 12 C 420 60, 360 120, 312 166")}
.sec-file--4{offset-path:path("M548 198 C 480 200, 410 202, 330 204")}
.sec-file--5{offset-path:path("M512 384 C 450 340, 380 288, 318 244")}
.sec-file--6{offset-path:path("M52 388 C 120 344, 196 292, 258 246")}

.js .sec-file{animation:sec-inbound 7s cubic-bezier(.4,0,.7,1) infinite}
.js .sec-file--1{animation-delay:0s}
.js .sec-file--2{animation-delay:1.17s}
.js .sec-file--3{animation-delay:2.33s}
.js .sec-file--4{animation-delay:3.5s}
.js .sec-file--5{animation-delay:4.67s}
.js .sec-file--6{animation-delay:5.83s}
@keyframes sec-inbound{
  0%{offset-distance:0%;opacity:0}
  10%{opacity:1}
  52%{offset-distance:88%;opacity:1}
  60%{offset-distance:100%;opacity:0}
  100%{offset-distance:100%;opacity:0}
}

/* The shield answers what arrives with a lift in weight, not a flash. The page
   promises protection that stays out of the way; the motion should agree. */
.js .sec-shield{animation:sec-hold 1.167s ease-out infinite}
@keyframes sec-hold{
  0%,58%{opacity:.85}
  70%{opacity:1}
  100%{opacity:.85}
}

/* Static state still reads: files inbound from every side, shield holding. */
@media (prefers-reduced-motion:reduce){
  .js .sec-file,.js .sec-shield,.js .sec-sweep{animation:none}
  .sec-file{opacity:1}
  .sec-file--1{offset-distance:62%}
  .sec-file--2{offset-distance:54%}
  .sec-file--3{offset-distance:70%}
  .sec-file--4{offset-distance:58%}
  .sec-file--5{offset-distance:66%}
  .sec-file--6{offset-distance:50%}
  .sec-shield{opacity:1}
  /* The sweep holds one position on the keyline rather than disappearing. */
  .sec-sweep{--sweep:200deg}
}

/* ---------- Wi-Fi, networking & NAS hero art ----------
   Waves expand from the router and each node lights as the wave reaches it.
   The delays below are computed from the real distances in the drawing, so the
   far node lights last: that is the argument the page is making. This art
   fills .hero__bg rather than sitting in .hero__art, because the composition
   is the whole scene rather than an object beside the copy. */
.net [stroke],.net path,.net rect,.net circle,.net ellipse{
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round;
}
.hero__art:has(.net){width:min(50vw,700px);transform:translateY(-50%)}
.net-halo{fill:url(#net-halo-fill);stroke:none;opacity:.6}
.net-router{stroke:#7C93A3;stroke-width:2.8}
.net-router__led{fill:var(--orange);stroke:none}
.net-nas{stroke:#61798A;stroke-width:2.6}
.net-nas__led{fill:var(--orange);stroke:none;opacity:.3}
.net-cable{stroke:#4A5D6A;stroke-width:2.2;stroke-dasharray:1 7}
.net-node{stroke:#61798A;stroke-width:2.6}
.net-node__dot{fill:var(--orange);stroke:none;opacity:0}
.net-wave{opacity:0}
.net-wave path{stroke:var(--orange);stroke-width:2.6;fill:none;vector-effect:non-scaling-stroke}

/* Three waves in flight at once, each expanding and thinning out as it goes. */
.js .net-wave{animation:net-expand 5s cubic-bezier(.2,.5,.4,1) infinite}
.js .net-wave--2{animation-delay:-1.667s}
.js .net-wave--3{animation-delay:-3.333s}
@keyframes net-expand{
  0%{transform:scale(.1);opacity:0}
  14%{opacity:.9}
  72%{opacity:.3}
  100%{transform:scale(1.65);opacity:0}
}

/* Arrival times, derived from the distances in the drawing. */
.js .net-node__dot{animation:net-arrive 1.667s ease-out infinite}
.js .net-node--near .net-node__dot{animation-delay:-0.477s}
.js .net-node--mid  .net-node__dot{animation-delay:-0.18s}
.js .net-node--far  .net-node__dot{animation-delay:-0.92s}
@keyframes net-arrive{
  0%{opacity:0}
  7%{opacity:1}
  60%{opacity:.5}
  100%{opacity:0}
}
.js .net-nas__led{animation:net-blink 2.4s steps(1,end) infinite}
.js .net-nas__led--b{animation-delay:1.2s}
@keyframes net-blink{0%,18%{opacity:1}19%,100%{opacity:.28}}

/* Static state still reads: three waves out, every node lit. */
@media (prefers-reduced-motion:reduce){
  .js .net-wave,.js .net-node__dot,.js .net-nas__led{animation:none}
  .net-wave--1{transform:scale(.55);opacity:.55}
  .net-wave--2{transform:scale(1.05);opacity:.34}
  .net-wave--3{transform:scale(1.5);opacity:.16}
  .net-node__dot{opacity:1}
  .net-nas__led{opacity:1}
}

/* ---------- Home computer support hero art ----------
   A slow machine does not animate smoothly, it stutters. So the spinner and the
   progress bar run on steps() while it struggles and switch to a smooth ease
   once it comes good: the motion carries the meaning rather than a caption.
   One 9s loop: 0-55% struggling, 55-68% resolving, then calm, then reset. */
.hcs [stroke],.hcs path,.hcs rect,.hcs circle,.hcs line,.hcs ellipse{
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round;
}
/* The dashed fills must opt OUT of non-scaling-stroke at higher specificity
   than the blanket rule above, or their dash pattern is measured in screen
   pixels and cycles: the double-ended bar bug. Dash values are real path
   units (ring 213.6 = 2*pi*34, bar 136). */
.hcs .hcs-ring circle,.hcs .hcs-bar__fill{vector-effect:none}
.hcs-halo{fill:url(#net-halo-fill);stroke:none;opacity:.5}
.hcs-body{stroke:#7C93A3;stroke-width:2.8}
.hcs-screen{fill:#071219}
.hcs-glow{fill:var(--orange);opacity:0}
.hcs-track{stroke:#2B3D49;stroke-width:4;fill:none}
/* The ring: one continuous arc growing 0 to 100 around the circumference.
   Grows from 12 o'clock (the -90deg turn; the circle is centred on its group
   origin, so no transform-box juggling). Dash values are the real circumference
   (2*pi*34 = 213.6): pathLength is off the table because Chrome ignores it on
   some shapes, which is exactly how the old bar broke. */
.hcs-ring{transform:rotate(-90deg)}
.hcs-ring circle{stroke:var(--orange);stroke-width:4.5;fill:none;vector-effect:none;
  stroke-linecap:round;stroke-dasharray:213.6;stroke-dashoffset:213.6}
.hcs-tick{opacity:0}
.hcs-tick path{stroke:var(--orange);stroke-width:5.5;fill:none}
.hcs-bar__track{stroke:#2B3D49;stroke-width:5;fill:none}
.hcs-bar__fill{stroke:var(--orange);stroke-width:5;fill:none;vector-effect:none;
  stroke-linecap:round;stroke-dasharray:136;stroke-dashoffset:136}

/* Both fills run smoothly 0 to 100, the colour warming as they complete. */
.js .hcs-ring circle{animation:hcs-ring 9s infinite}
@keyframes hcs-ring{
  0%{stroke-dashoffset:213.6;stroke:#C46A10;opacity:1;animation-timing-function:cubic-bezier(.45,.05,.3,1)}
  64%{stroke-dashoffset:0;stroke:var(--orange)}
  90%{stroke-dashoffset:0;stroke:var(--orange);opacity:1}
  96%{opacity:0}
  100%{stroke-dashoffset:213.6;opacity:0}
}
.js .hcs-bar__fill{animation:hcs-bar 9s infinite}
@keyframes hcs-bar{
  0%{stroke-dashoffset:136;stroke:#C46A10;opacity:1;animation-timing-function:cubic-bezier(.45,.05,.3,1)}
  64%{stroke-dashoffset:0;stroke:var(--orange)}
  90%{stroke-dashoffset:0;stroke:var(--orange);opacity:1}
  96%{opacity:0}
  100%{stroke-dashoffset:136;opacity:0}
}

.js .hcs-tick{animation:hcs-tick 9s infinite}
@keyframes hcs-tick{
  0%,60%{opacity:0;transform:scale(.6)}
  68%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  90%{opacity:1;transform:scale(1)}
  96%,100%{opacity:0;transform:scale(1)}
}
.hcs-tick{transform-box:fill-box;transform-origin:center}

.js .hcs-glow{animation:hcs-glow 9s ease-out infinite}
@keyframes hcs-glow{
  0%,58%{opacity:0}
  70%{opacity:.07}
  92%{opacity:.05}
  100%{opacity:0}
}

/* Static state shows the good end of the story, not the stuck one. */
@media (prefers-reduced-motion:reduce){
  .js .hcs-ring circle,.js .hcs-bar__fill,.js .hcs-tick,.js .hcs-glow{animation:none}
  .hcs-ring circle{stroke-dashoffset:0}
  .hcs-tick{opacity:1;transform:none}
  .hcs-bar__fill{stroke-dashoffset:0}
  .hcs-glow{opacity:.05}
}

/* ---------- Backup & data recovery hero art ----------
   One 13s story on repeat: digits stream off the drive into the bin (deleted,
   lost), a beat of quiet, then recovery pulls them back out and home to the
   drive, tick. Four digits share one timeline, staggered by delay; the stagger
   is small against the leg length, so the beats stay legible. */
.bdr [stroke],.bdr path,.bdr rect,.bdr circle,.bdr ellipse{
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round;
}
.bdr-halo{fill:url(#bdr-halo-fill);stroke:none;opacity:.55}
.bdr-route{stroke:var(--orange);stroke-width:2;stroke-dasharray:3 8;opacity:.35}
.bdr-drive{stroke:#7C93A3;stroke-width:2.6}
.bdr-drive__led{fill:var(--orange);stroke:none}
.bdr-bin{stroke:#9FB0BC;stroke-width:2.4;transform-box:fill-box;transform-origin:center}
.bdr-bit{offset-path:path("M214 180 C 276 192, 332 228, 384 280");offset-rotate:0deg;opacity:0}
.bdr-bit text{fill:var(--orange);font-family:'Poppins',sans-serif;font-weight:600;font-size:24px;
  text-anchor:middle;dominant-baseline:central}
.bdr-tick{stroke:var(--orange);stroke-width:2.6;opacity:0;
  transform-box:fill-box;transform-origin:center}

/* Out: 4-27%. In the bin: 27-55%. Back: 55-80%. Tick: 84-95%. */
.js .bdr-bit{animation:bdr-bit 13s infinite}
.js .bdr-bit--2{animation-delay:.5s}
.js .bdr-bit--3{animation-delay:1s}
.js .bdr-bit--4{animation-delay:1.5s}
@keyframes bdr-bit{
  0%{offset-distance:0%;opacity:0;animation-timing-function:cubic-bezier(.45,.05,.35,1)}
  4%{opacity:1}
  24%{offset-distance:100%;opacity:1}
  27%{offset-distance:100%;opacity:0}
  55%{offset-distance:100%;opacity:0;animation-timing-function:cubic-bezier(.45,.05,.35,1)}
  58%{opacity:1}
  78%{offset-distance:0%;opacity:1}
  82%{offset-distance:0%;opacity:0}
  100%{opacity:0}
}

/* The bin swallows, then gives back: a small bump at each beat. */
.js .bdr-bin{animation:bdr-bin 13s ease-out infinite}
@keyframes bdr-bin{
  0%,22%{transform:scale(1)}
  26%{transform:scale(1.07)}
  32%{transform:scale(1)}
  54%{transform:scale(1)}
  58%{transform:scale(1.07)}
  64%{transform:scale(1)}
  100%{transform:scale(1)}
}

/* The drive settles as its data comes home. */
.js .bdr-drive__led{animation:bdr-led 13s ease-out infinite}
.js .bdr-drive__led--b{animation-delay:.4s}
.js .bdr-drive__led--c{animation-delay:.8s}
@keyframes bdr-led{
  0%,26%{opacity:1}
  32%{opacity:.3}
  74%{opacity:.3}
  80%{opacity:1}
  100%{opacity:1}
}
.js .bdr-tick{animation:bdr-tick 13s ease-out infinite}
@keyframes bdr-tick{
  0%,82%{opacity:0;transform:scale(.6)}
  87%{opacity:1;transform:scale(1)}
  95%{opacity:1;transform:scale(1)}
  99%,100%{opacity:0;transform:scale(1)}
}

/* Static state shows the promise kept: data home, drive lit, tick up. */
@media (prefers-reduced-motion:reduce){
  .js .bdr-bit,.js .bdr-bin,.js .bdr-drive__led,.js .bdr-tick{animation:none}
  .bdr-bit--1{opacity:1;offset-distance:8%}
  .bdr-bit--3{opacity:1;offset-distance:26%}
  .bdr-tick{opacity:1;transform:none}
}