/* RGD Software — site styles (light + dark, container-responsive) */
.rgd{
  --bg:#ffffff; --ink:#201e1d; --ink-soft:#2d2b2b; --muted:#5f6773;
  --rule:#e4e7ea; --rule-strong:#201e1d; --grid:#eef1f5; --frame:#201e1d;
  --accent:#0c77ef; --accent-hover:#0a5fc0; --accent-tint:#e8f1fd;
  --btn:#0c77ef; --btn-hover:#0a5fc0; --badge-ink:#0a4f9e;
  --panel:#ffffff; --glow:rgba(12,119,239,.22); --glow-text:rgba(12,119,239,.35);
  --overlay:rgba(15,17,21,.58); --wa:#25d366;
  container-type:inline-size; container-name:rgd;
  position:relative; background:var(--bg); color:var(--ink);
  font-family:Inter,system-ui,sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.rgd.t-dark{
  --bg:#0f1115; --ink:#eceef1; --ink-soft:#c3c9d2; --muted:#9aa3ae;
  --rule:#262b33; --rule-strong:#3a414c; --grid:#1a1e24; --frame:#3a414c;
  --accent:#3b93f5; --accent-hover:#62a8f7; --accent-tint:#16243a;
  --btn:#0c77ef; --btn-hover:#2a87f3; --badge-ink:#8cbffa;
  --panel:#090b0e; --glow:rgba(59,147,245,.55); --glow-text:rgba(59,147,245,.75);
  --overlay:rgba(4,5,8,.72);
}
.rgd *,.rgd *::before,.rgd *::after{box-sizing:border-box}
.rgd a{color:inherit}
.rgd svg{display:block;flex-shrink:0}
.rgd button{font:inherit;color:inherit}
.wrap{max-width:1440px;margin-inline:auto;padding-inline:64px}

/* ---------- type ---------- */
.kicker{font:800 12.5px/1 Nunito,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.h2{font:900 42px/1.05 Nunito,sans-serif;letter-spacing:-.03em;margin:0;color:var(--ink)}
.h3{font:800 21px/1.25 Nunito,sans-serif;letter-spacing:-.01em;margin:0;color:var(--ink)}
.body{font:400 16px/1.6 Inter,sans-serif;color:var(--muted);margin:0;max-width:46ch}
.meta{font:500 13px/1.3 Inter,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.u{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:.075em;text-underline-offset:.12em;text-decoration-skip-ink:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--btn);color:#fff !important;font:800 16px/1 Nunito,sans-serif;padding:17px 26px;border:0;border-radius:0;text-decoration:none;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--btn-hover)}
.btn svg{transition:transform .15s}
.btn:hover svg{transform:translateX(3px)}
.btn-sm{padding:11px 18px;font-size:15px}
.btn-white{background:#fff;color:#0c77ef !important}
.btn-white:hover{background:#e8f1fd}
.link{display:inline-flex;align-items:center;gap:8px;background:none;border:0;border-bottom:2px solid currentColor;padding:0 0 5px;color:var(--ink);font:800 16px/1.2 Nunito,sans-serif;text-decoration:none;cursor:pointer;transition:color .15s}
.link:hover{color:var(--accent)}
.link svg{transition:transform .15s}
.link:hover svg{transform:translateX(3px)}
.iconbtn{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:2px solid var(--frame);color:var(--ink);cursor:pointer;padding:0;transition:background .15s,border-color .15s,color .15s}
.iconbtn:hover{background:var(--btn);border-color:var(--btn);color:#fff}
.rgd :focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- logo ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo-mark{width:42px;height:38px;color:var(--ink)}
.wordmark{font:800 20px/1 Inter,sans-serif;letter-spacing:-.025em;color:var(--ink);white-space:nowrap}
.g{color:var(--accent)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:2px solid var(--rule)}
.hdr-in{height:78px;display:flex;align-items:center}
.nav{display:flex;gap:34px;margin-left:auto}
.nav a{font:500 15px/1 Inter,sans-serif;color:var(--muted);text-decoration:none;padding:6px 0 5px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.hdr-act{display:flex;align-items:center;gap:12px;margin-left:40px}
.toggle{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:2px solid var(--rule);color:var(--ink);cursor:pointer;padding:0;transition:border-color .15s,color .15s}
.toggle:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- hero ---------- */
.hero{border-bottom:2px solid var(--rule-strong)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);min-height:822px}
.hero-copy{display:flex;flex-direction:column;padding:56px 56px 44px 0}
.hero-main{flex:1;display:flex;flex-direction:column;justify-content:center}
.hero-kicker{margin:0 0 24px}
.hero-h1{font:900 64px/1.01 Nunito,sans-serif;letter-spacing:-.035em;margin:0 0 28px;color:var(--ink)}
.hero-h1 span{display:block}
.hero-h1 .soft{color:var(--ink-soft)}
.hero-p{font:400 20px/1.55 Inter,sans-serif;color:var(--muted);margin:0 0 38px;max-width:30em}
.hero-cta{align-self:flex-start}
.hero-badge-wrap{padding-top:36px}
.badge{display:inline-flex;align-items:center;gap:12px;border:2px solid var(--accent);padding:12px 16px;font:800 14px/1.3 Nunito,sans-serif;color:var(--badge-ink)}
.pulse{position:relative;width:10px;height:10px;background:var(--accent);flex-shrink:0}
.pulse::after{content:"";position:absolute;inset:0;border:2px solid var(--accent);animation:rgd-ping 1.8s ease-out infinite}
.hero-media{position:relative;display:flex;align-items:center;padding:56px 0 56px 56px;border-left:2px solid var(--rule)}
.hero-lines{position:absolute;inset:0;pointer-events:none}
.hero-lines span{position:absolute;top:0;bottom:0;width:2px;background:var(--grid)}
.panel{position:relative;z-index:1;width:100%;aspect-ratio:16/8;background:var(--panel);border:2px solid var(--frame);overflow:hidden;display:flex;align-items:center;justify-content:center;container-type:inline-size}
.glow{position:absolute;left:18%;right:18%;top:8%;bottom:8%;background:radial-gradient(closest-side,var(--glow),transparent);filter:blur(26px);animation:rgd-breathe 5s ease-in-out infinite}
.rgd-word{position:relative;display:flex;align-items:baseline;font:900 25cqi/1 Nunito,sans-serif;letter-spacing:-.04em;color:var(--accent)}
.rgd-word .l{display:inline-block;text-shadow:0 0 .12em var(--glow-text),0 0 .4em var(--glow);animation:rgd-rise .9s cubic-bezier(.2,.7,.2,1) both,rgd-pulse 4s ease-in-out 1.6s infinite}
.rgd-word .l:nth-child(2){animation-delay:.15s,1.75s}
.rgd-word .l:nth-child(3){animation-delay:.3s,1.9s}
.cursor{display:inline-block;width:.38em;height:.085em;margin-left:.08em;background:var(--accent);box-shadow:0 0 .2em var(--glow);animation:rgd-blink 1.05s steps(1) infinite}
.tick{position:absolute;width:14px;height:14px;border-color:var(--accent);border-style:solid;border-width:0}
.tick.tl{top:14px;left:14px;border-top-width:2px;border-left-width:2px}
.tick.tr{top:14px;right:14px;border-top-width:2px;border-right-width:2px}
.tick.bl{bottom:14px;left:14px;border-bottom-width:2px;border-left-width:2px}
.tick.br{bottom:14px;right:14px;border-bottom-width:2px;border-right-width:2px}

/* ---------- sections ---------- */
.sec{padding:112px 0;border-bottom:2px solid var(--rule-strong)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:56px}

/* services */
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--rule);border-top:2px solid var(--rule);border-bottom:2px solid var(--rule)}
.svc{background:var(--bg);padding:36px 32px 44px 0;display:flex;flex-direction:column;gap:12px}
.svc:not(:nth-child(4n+1)){padding-left:32px}
.svc-num{font:900 30px/1 Nunito,sans-serif;color:var(--accent);letter-spacing:-.02em;margin-bottom:28px}
.svc .body{max-width:34ch}

/* portfolio */
.pf-ctrl{display:flex;align-items:center;gap:12px}
.pf-count{font:800 16px/1 Nunito,sans-serif;color:var(--ink);margin-right:12px;letter-spacing:.02em}
.pf-count span{color:var(--muted)}
.slide{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.slide-info{border-left:2px solid var(--rule);margin-left:48px;padding-left:48px;display:flex;flex-direction:column}
.slide-title{font:900 36px/1.08 Nunito,sans-serif;letter-spacing:-.03em;margin:0 0 16px;color:var(--ink)}
.slide-rule{height:2px;background:var(--rule);margin:36px 0 20px}
.slide-info .link{align-self:flex-start;margin-top:28px}
.shot{position:relative;aspect-ratio:16/10;border:2px solid var(--frame);background:var(--bg);display:flex;flex-direction:column}
.shot-bar{height:36px;border-bottom:2px solid var(--rule);display:flex;align-items:center;gap:6px;padding:0 14px;flex-shrink:0}
.shot-bar .d{width:9px;height:9px;background:var(--rule)}
.shot-bar .url{margin-left:14px;height:12px;width:38%;background:var(--grid)}
.shot-body{flex:1;display:grid;grid-template-columns:24% minmax(0,1fr);min-height:0}
.shot-side{border-right:2px solid var(--rule);padding:20px 16px;display:flex;flex-direction:column;gap:12px}
.shot-side span{height:10px;background:var(--grid)}
.shot-side span:first-child{background:var(--accent-tint);width:80%}
.shot-main{padding:20px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.shot-main span{background:var(--grid)}
.shot-main span.on{background:var(--accent)}
.shot-main span.soft{background:var(--accent-tint)}
.shot-label{position:absolute;right:12px;bottom:12px;background:var(--bg);border:2px solid var(--rule);padding:6px 10px}

/* faq */
.faq-list{border-top:2px solid var(--rule)}
.faq-item{border-bottom:2px solid var(--rule)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;background:none;border:0;text-align:left;cursor:pointer;font:800 19px/1.35 Nunito,sans-serif;color:var(--ink);transition:color .15s}
.faq-q:hover{color:var(--accent)}
.faq-num{font:800 13px/1 Nunito,sans-serif;color:var(--muted);letter-spacing:.06em;width:34px;flex-shrink:0}
.faq-qt{flex:1}
.faq-ic{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--rule);color:var(--ink);flex-shrink:0;transition:transform .2s,background .15s,border-color .15s,color .15s}
.faq-item.is-open .faq-ic{transform:rotate(45deg);background:var(--btn);border-color:var(--btn);color:#fff}
.faq-a{padding:0 64px 30px 58px}
.faq-a p{font:400 16px/1.65 Inter,sans-serif;color:var(--muted);margin:0;max-width:70ch;white-space:pre-line}

/* about */
.ab-text{font:400 17px/1.65 Inter,sans-serif;color:var(--muted);margin:0;max-width:62ch}
.rows{grid-area:rows;align-self:end;padding-top:56px}
.wa{color:var(--wa)}

/* contact band */
.band{background:#0c77ef;color:#fff;padding:104px 0 96px}
.band-h{font:900 60px/1.02 Nunito,sans-serif;letter-spacing:-.035em;margin:0;max-width:15ch;color:#fff}
.band-row{display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px;margin-top:52px}
.band-row a.tx{color:#fff;font:700 17px/1.2 Inter,sans-serif;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.band-row a.tx:hover{text-decoration-color:rgba(255,255,255,.55)}
.band-row a.wa-l{display:inline-flex;align-items:center;gap:10px;text-decoration:none}

/* footer */
.ftr-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:30px}
.ftr .logo-mark{width:32px;height:29px}
.ftr .wordmark{font-size:17px}
.ftr-t{font:400 14px/1.5 Inter,sans-serif;color:var(--muted)}
.ftr-t a{text-decoration:none}
.ftr-t a:hover{color:var(--accent)}

/* modal */
.ov{position:fixed;inset:0;z-index:100;background:var(--overlay);display:flex;align-items:center;justify-content:center;padding:24px}
.md{width:100%;max-width:560px;background:var(--bg);border:2px solid var(--frame);padding:40px}
.md-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:32px}
.md-h{font:900 30px/1.08 Nunito,sans-serif;letter-spacing:-.03em;margin:0;color:var(--ink)}
.md .iconbtn{width:44px;height:44px}
.fld{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.fld label{font:700 12px/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.inp{width:100%;font:400 16px/1.4 Inter,sans-serif;color:var(--ink);background:var(--bg);border:2px solid var(--rule);border-radius:0;padding:13px 15px;outline:none;transition:border-color .15s;-webkit-appearance:none;appearance:none}
.inp::placeholder{color:var(--muted);opacity:.8}
.inp:focus{border-color:var(--accent)}
.rgd .inp:focus-visible{outline:none}
textarea.inp{resize:vertical;min-height:112px}
.sel{position:relative}
.sel select{padding-right:44px;cursor:pointer}
.sel svg{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted)}
.md-foot{display:flex;align-items:center;flex-wrap:wrap;gap:14px 20px;margin-top:8px}
.md-foot .ftr-t{font-size:13.5px}

/* ---------- motion ---------- */
@keyframes rgd-ping{from{transform:scale(1);opacity:.9}to{transform:scale(2.6);opacity:0}}
@keyframes rgd-breathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes rgd-rise{from{opacity:0;transform:translateY(.18em);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes rgd-pulse{0%,100%{text-shadow:0 0 .12em var(--glow-text),0 0 .4em var(--glow)}50%{text-shadow:0 0 .2em var(--glow-text),0 0 .7em var(--glow)}}
@keyframes rgd-blink{0%,50%{opacity:1}51%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.rgd *{animation:none !important;transition:none !important}}

/* ---------- tablet ---------- */
@container rgd (max-width:1180px){
  .wrap{padding-inline:40px}
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc:not(:nth-child(4n+1)){padding-left:0}
  .svc:nth-child(even){padding-left:32px}
  .hero-h1{font-size:52px}
}
@container rgd (max-width:960px){
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-media{border-left:0;padding:0 0 56px}
  .hero-lines{display:none}
  .slide{grid-template-columns:1fr}
  .slide-info{border-left:0;margin:32px 0 0;padding:0}
  .band-h{font-size:48px}
}

/* ---------- mobile ---------- */
@container rgd (max-width:700px){
  .wrap{padding-inline:24px}
  .hdr-in{height:68px}
  .nav{display:none}
  .hdr-act{margin-left:auto;gap:8px}
  .hdr-act .btn svg{display:none}
  .logo{gap:8px}
  .logo-mark{width:36px;height:33px}
  .wordmark{font-size:18px}
  .hero-grid{display:flex;flex-direction:column;gap:22px;padding-block:36px 40px}
  .hero-copy,.hero-main{display:contents}
  .hero-kicker{order:1;margin:0}
  .hero-h1{order:2;font-size:38px;margin:0}
  .hero-media{order:3;padding:6px 0}
  .hero-p{order:4;font-size:18px;margin:0}
  .hero-cta{order:5}
  .hero-badge-wrap{order:6;padding-top:10px}
  .badge{font-size:13.5px;padding:11px 14px}
  .tick{width:10px;height:10px}
  .tick.tl,.tick.tr{top:10px}.tick.bl,.tick.br{bottom:10px}
  .tick.tl,.tick.bl{left:10px}.tick.tr,.tick.br{right:10px}
  .sec{padding:64px 0}
  .sec-head{margin-bottom:36px;flex-direction:column;align-items:flex-start;gap:24px}
  .h2{font-size:28px}
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc,.svc:not(:nth-child(4n+1)){padding:20px 12px 22px 0}
  .svc:nth-child(even){padding:20px 0 22px 16px}
  .svc .body{display:none}
  .svc .h3{font-size:18px}
  .svc-num{font-size:24px;margin-bottom:0}
  .pf-ctrl{width:100%}
  .pf-count{margin-right:auto}
  .slide-title{font-size:28px}
  .faq-q{font-size:17px;padding:20px 0;gap:14px}
  .faq-num{display:none}
  .faq-a{padding:0 0 24px}
  .rows{padding-top:0}
  .band{padding:64px 0}
  .band-h{font-size:36px}
  .band-row{flex-direction:column;align-items:flex-start;gap:18px;margin-top:36px}
  .ftr-in{flex-direction:column;align-items:flex-start;gap:14px}
  .md{padding:24px}
  .md-h{font-size:24px}
}

/* ---------- svg ---------- */
.ic{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:square;stroke-linejoin:miter}
.icf{fill:currentColor;stroke:none}
.lm-s{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linejoin:round}
.lm-st{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.lm-t{font-family:Inter,sans-serif;font-weight:900;font-size:12.5px;letter-spacing:-.03em;text-anchor:middle;fill:currentColor}
.lm-t .lm-g{fill:var(--accent)}

/* ---------- service icons (behind titles) ---------- */
.svc-num{margin-bottom:4px}
.svc-tt{position:relative;display:flex;align-items:center;min-height:96px;margin-bottom:6px}
.svc-tt .h3{position:relative;z-index:1}
.svc-ic{position:absolute;left:-6px;top:50%;width:120px;height:96px;transform:translateY(-50%);color:var(--accent);opacity:.3;filter:drop-shadow(0 0 5px var(--glow));pointer-events:none;transition:opacity .2s}
.svc-ic *{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.svc-ic .occ{fill:var(--bg)}
.svc:hover .svc-ic{opacity:.55}
.t-dark .svc-ic{opacity:.5;filter:drop-shadow(0 0 7px var(--glow))}
.t-dark .svc:hover .svc-ic{opacity:.8}
.t-dark .svc-tt .h3{text-shadow:0 0 18px rgba(59,147,245,.35)}

/* ---------- faq show more ---------- */
.faq-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0 20px 58px;background:none;border:0;border-bottom:2px solid var(--rule);cursor:pointer;font:800 16px/1.3 Nunito,sans-serif;color:var(--accent);text-align:left;transition:color .15s}
.faq-toggle:hover{color:var(--accent-hover)}
.faq-toggle .faq-ic{border-color:var(--accent);color:var(--accent)}
.faq-toggle:hover .faq-ic{background:var(--btn);border-color:var(--btn);color:#fff}
.faq-toggle.is-open .faq-ic{transform:rotate(180deg)}
@container rgd (max-width:700px){
  .faq-toggle{padding-left:0}
  .svc-tt{min-height:84px}
  .svc-ic{width:105px;height:84px}
}

/* ================= FAQ options ================= */
/* centred */
.faqc{display:flex;flex-direction:column;align-items:center}
.faqc-head{text-align:center;display:flex;flex-direction:column;align-items:center}
.faqc-head .body{margin-top:18px;max-width:44ch}
.faqc-list{width:100%;max-width:880px;margin-top:52px}
.faqc-foot{margin-top:40px}
/* question index */
/* editorial rows */

/* ================= About options ================= */
/* statement */
/* values index */
/* contact card */
.abc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:80px;align-items:start}
.abc-quote{font:900 48px/1.02 Nunito,sans-serif;letter-spacing:-.035em;color:var(--accent);margin:32px 0 24px}
.abc .ab-text{max-width:56ch}

@container rgd (max-width:960px){
  .abc{grid-template-columns:1fr;gap:40px}
}
@container rgd (max-width:700px){
  .abc-quote{font-size:34px}
}

/* ---------- pre-launch fixes ---------- */
.btn{white-space:nowrap}
.faq-item.is-open .faq-ic{transform:none}
.faq-item.is-open .faq-ic svg{transform:rotate(45deg)}
.faq-ic svg{transition:transform .2s}
@container rgd (max-width:700px){
  .hdr-act .btn{padding:10px 14px;font-size:14px}
  .abc-logo svg{max-width:300px !important}
}
@container rgd (max-width:360px){
  .wordmark{display:none}
}

/* ================= live site ================= */
html{scroll-padding-top:80px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* the design canvas used a fixed 822px hero; live, it fills the viewport */
@container rgd (min-width:961px){
  .hero-grid{min-height:calc(100vh - 78px);min-height:calc(100svh - 78px)}
}

/* Hologram: the transparent title loop floats, frameless, above a projector pad and a
   perspective floor grid. Layers sit at different depths so the pointer tilt reads as 3D. */
.rgd{--holo-line:rgba(12,119,239,.16);--holo-pad:rgba(12,119,239,.55)}
.rgd.t-dark{--holo-line:rgba(59,147,245,.26);--holo-pad:rgba(59,147,245,.85)}
.holo{position:relative;z-index:1;width:100%;aspect-ratio:16/11;perspective:1100px;--rx:0deg;--ry:0deg}
.holo-floor{position:absolute;left:-14%;right:-14%;bottom:-4%;height:44%;transform:perspective(380px) rotateX(62deg);transform-origin:50% 100%;
  background-image:linear-gradient(var(--holo-line) 2px,transparent 2px),linear-gradient(90deg,var(--holo-line) 2px,transparent 2px);
  background-size:52px 52px;background-position:center 0;
  -webkit-mask-image:radial-gradient(ellipse 48% 80% at 50% 70%,#000 20%,transparent 72%);mask-image:radial-gradient(ellipse 48% 80% at 50% 70%,#000 20%,transparent 72%);
  animation:holo-floor 2.8s linear infinite;pointer-events:none}
.holo-pad{position:absolute;left:50%;bottom:10%;width:54%;height:11%;transform:translateX(-50%);border-radius:50%;border:2px solid var(--holo-pad);
  background:radial-gradient(closest-side,var(--glow),transparent);box-shadow:0 0 28px var(--glow),inset 0 0 22px var(--glow);animation:holo-pad 4s ease-in-out infinite}
.holo-beam{position:absolute;left:50%;bottom:15.5%;width:96%;height:72%;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(to top,var(--glow),transparent 80%);clip-path:polygon(23% 100%,77% 100%,100% 0,0 0);filter:blur(10px);opacity:.5;
  -webkit-mask-image:linear-gradient(to top,#000 30%,transparent 90%);mask-image:linear-gradient(to top,#000 30%,transparent 90%);animation:holo-flicker 6s steps(1) infinite}
.holo-obj{position:absolute;left:0;right:0;top:0;bottom:18%;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.holo-sway,.holo-float{position:absolute;inset:0;transform-style:preserve-3d}
.holo-sway{animation:holo-sway 11s ease-in-out infinite}
.holo-float{animation:holo-float 5.5s ease-in-out infinite}
.holo-glow{position:absolute;left:14%;right:14%;top:14%;bottom:14%;background:radial-gradient(closest-side,var(--glow),transparent);filter:blur(30px);transform:translateZ(-70px);animation:holo-breathe 5s ease-in-out infinite}
.holo-vid{position:absolute;top:-10%;bottom:-10%;left:-10%;width:120%;height:120%;object-fit:contain;transform:translateZ(50px);opacity:0;transition:opacity .6s;pointer-events:none}
.holo.has-vid .holo-vid{opacity:1}
.t-dark .holo-vid{filter:brightness(1.4)} /* the dark clip is mastered dim; lift it so it glows */
/* Safari / iOS can't show WebM transparency: use the flat MP4 and blend its background away.
   Blending only reaches the page if no stacking context sits in between, so in this mode the
   perspective moves into the object's own transform and the whole object group is blended. */
.holo.is-mp4{z-index:auto;perspective:none}
.holo.is-mp4 .holo-obj{transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));mix-blend-mode:multiply}
.t-dark .holo.is-mp4 .holo-obj{mix-blend-mode:screen}
.t-dark .holo.is-mp4 .holo-vid{filter:brightness(.91) contrast(1.22) brightness(1.4)} /* maps the clip's #181818 ground to black, then lifts it */
@keyframes holo-floor{to{background-position:center 52px}}
@keyframes holo-float{0%,100%{transform:translateY(-2%)}50%{transform:translateY(2%)}}
@keyframes holo-sway{0%,100%{transform:rotateY(-8deg) rotateX(3deg)}50%{transform:rotateY(8deg) rotateX(-2deg)}}
@keyframes holo-breathe{0%,100%{opacity:.7;transform:translateZ(-70px) scale(1)}50%{opacity:1;transform:translateZ(-70px) scale(1.08)}}
@keyframes holo-pad{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes holo-flicker{0%,100%{opacity:.5}47%{opacity:.36}48%{opacity:.52}83%{opacity:.42}84%{opacity:.5}}
@container rgd (max-width:700px){
  .hero-media{padding:0}
  .holo-floor{background-size:36px 36px}
}

/* portfolio screenshot from the CMS */
.shot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* modal lives in its own layer so position:fixed is relative to the viewport */
.rgd.md-layer{position:static;container-type:normal;background:none}
.md-layer .ov{container:rgd / inline-size;overflow-y:auto;align-items:flex-start}
.md-layer .md{margin:auto}
.md-err{font:500 14px/1.45 Inter,sans-serif;color:#c0341a;margin:-4px 0 16px}
.t-dark .md-err{color:#ff8f7a}
.md-sent .body{max-width:none;font-size:17px}
.md-sent .btn{margin-top:26px}
.btn[disabled]{opacity:.65;cursor:default}

/* project case study (opened from "Find out more") */
.md.pd{max-width:1000px;padding:0}
.pd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:40px 40px 32px}
.pd-title{font:900 44px/1.04 Nunito,sans-serif;letter-spacing:-.035em;margin:0;color:var(--ink)}
.pd-tagline{font-size:18px;margin-top:14px;max-width:52ch}
.pd-shot{padding:0 40px}
.pd-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;margin:0 40px;padding:22px 0;border-bottom:2px solid var(--rule)}
.pd-meta .btn{white-space:normal;overflow-wrap:anywhere;text-align:left}
.pd-facts{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap}
.pd-facts .meta+.meta{padding-left:22px;border-left:2px solid var(--rule)}
.pd-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);margin:0 40px;border-bottom:2px solid var(--rule)}
.pd-body.one{grid-template-columns:minmax(0,1fr)}
.pd-main{padding:36px 40px 36px 0}
.pd-side{padding:36px 0 36px 40px;border-left:2px solid var(--rule)}
.pd-body.one .pd-main{padding-right:0}
.pd-body.one .pd-side{padding-left:0;border-left:0}
.pd-block+.pd-block{margin-top:34px}
.pd-p{font:400 16.5px/1.65 Inter,sans-serif;color:var(--muted);margin:0;max-width:62ch;white-space:pre-line}
.pd-results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.pd-results li{position:relative;padding-left:24px;font:700 16px/1.45 Nunito,sans-serif;color:var(--ink)}
.pd-results li::before{content:"";position:absolute;left:0;top:.42em;width:9px;height:9px;background:var(--accent)}
.pd-tech{display:flex;flex-wrap:wrap;gap:8px}
.pd-tech > span{border:2px solid var(--rule);padding:7px 12px;font:600 13.5px/1 Inter,sans-serif;color:var(--ink)}
.pd-empty{margin:0 40px;padding:32px 0;border-bottom:2px solid var(--rule)}
.pd-empty .body{max-width:56ch}
.pd-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;padding:28px 40px 36px}
@container rgd (max-width:960px){
  .pd-body{grid-template-columns:minmax(0,1fr)}
  .pd-main{padding-right:0}
  .pd-side{padding-left:0;border-left:0;border-top:2px solid var(--rule)}
  .pd-body.one .pd-side{border-top:0}
}
@container rgd (max-width:700px){
  .md.pd{padding:0}
  .pd-head{padding:24px 24px 22px;gap:16px}
  .pd-title{font-size:30px}
  .pd-tagline{font-size:16.5px}
  .pd-shot{padding:0 24px}
  .pd-meta,.pd-body,.pd-empty{margin:0 24px}
  .pd-main,.pd-side{padding-top:28px;padding-bottom:28px}
  .pd-foot{padding:24px 24px 28px}
  .pd-foot .pf-ctrl{width:auto}
  .shot-bar{height:26px}
  .shot-main{padding:12px;gap:4px}
  .shot-side{padding:12px 10px;gap:8px}
}

/* Paragraphs from the admin (a blank line starts a new one) */
.faq-a p + p,.pd-p + .pd-p{margin-top:14px}