/* =========================================================
   Back end page (backend.html). Sits on top of main.css.
   Hero follows offsite.css (.os-hero), film uses main.css .reelband,
   the project banner uses main.css .feat.
   ========================================================= */
.be{--cy:#00aeef;--mg:#ec008c;--yl:#fff200;--kk:#1a1a1a;--paper:#f3f1ec;}
.hdr nav a[aria-current="page"]{color:var(--acid);opacity:1;}

/* ---------- HERO (copied from offsite .os-hero) ---------- */
.be-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;background:#08080a;overflow:hidden;isolation:isolate;}
.be-hero-img{position:absolute;inset:0 0 0 auto;width:min(58%,920px);z-index:-2;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 46%),linear-gradient(0deg,transparent 0%,#000 24%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 46%),linear-gradient(0deg,transparent 0%,#000 24%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  animation:beWipe 1.5s cubic-bezier(.65,0,.2,1) both;}
/* portrait-2, mirrored so he sits on the right */
.be-hero-img::before{content:"";position:absolute;inset:0;transform:scaleX(-1);
  background:url("../images/portrait-2.png") 22% center/cover no-repeat;}
@keyframes beWipe{from{clip-path:inset(0 0 0 100%);transform:scale(1.04);}to{clip-path:inset(0 0 0 0);transform:none;}}

.be-cols{position:absolute;inset:0;z-index:-1;pointer-events:none;display:grid;grid-template-columns:repeat(4,1fr);padding:0 var(--pad);}
.be-cols i{border-left:1px solid rgba(255,255,255,.07);transform-origin:top;animation:beDraw 1.4s var(--ease) both;}
.be-cols i:last-child{border-right:1px solid rgba(255,255,255,.07);}
.be-cols i:nth-child(2){animation-delay:.1s;} .be-cols i:nth-child(3){animation-delay:.2s;} .be-cols i:nth-child(4){animation-delay:.3s;}
@keyframes beDraw{from{transform:scaleY(0);}to{transform:none;}}

.be-meta{display:grid;grid-template-columns:repeat(4,1fr);margin-top:72px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--fm);font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--mid);}
.be-meta span{padding:14px 0 14px 16px;}
.be-meta span:first-child{padding-left:0;color:var(--acid);}
.be-meta span:last-child{text-align:right;padding-right:0;}

.be-hero-in{flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,6vw,80px);}
.be-h1{font-weight:900;text-transform:uppercase;letter-spacing:-.05em;line-height:.86;
  font-size:clamp(44px,7vw,120px);display:flex;flex-direction:column;align-items:flex-start;}
.be-h1 .ln{display:block;background:#08080a;padding:.02em .12em .04em 0;white-space:nowrap;
  animation:beLn .9s var(--ease) both;animation-delay:.75s;}
.be-h1 .ln:nth-child(2){animation-delay:.85s;}
.be-h1 .ln:nth-child(3){animation-delay:.95s;}
.be-h1 .ln:nth-child(4){animation-delay:1.05s;}
.be-h1 .ln.in{margin-left:clamp(20px,6vw,110px);padding-left:.12em;}
.be-h1 .acid{color:var(--acid);}
@keyframes beLn{from{transform:translateX(-30px);clip-path:inset(0 100% 0 0);}to{transform:none;clip-path:inset(0 0 0 0);}}
@keyframes beFade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

.be-hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding-bottom:clamp(26px,3.4vw,44px);
  opacity:0;animation:beFade .9s var(--ease) 1.3s both;}
.be-hero-foot p{max-width:46ch;color:var(--dim);font-size:clamp(15px,1.3vw,18px);line-height:1.5;}
.be-hero-foot p b{color:var(--ink);font-weight:600;}

@media(max-width:860px){
  .be-hero-img{width:100%;inset:auto 0 0 0;height:66%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 80%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 80%,transparent 100%);
    -webkit-mask-composite:source-over;mask-composite:add;}
  .be-hero-img::before{background-position:30% 6%;}
  .be-meta{grid-template-columns:1fr 1fr;font-size:9px;letter-spacing:1.6px;}
  .be-meta span:nth-child(2),.be-meta span:nth-child(3){display:none;}
  .be-meta span{white-space:nowrap;}
  .be-meta span:last-child{white-space:normal;}
  .be-cols{grid-template-columns:repeat(2,1fr);}
  .be-cols i:nth-child(n+3){display:none;}
  .be-cols i:nth-child(2){border-right:1px solid rgba(255,255,255,.07);}
  .be-hero-in{justify-content:flex-start;padding-top:44px;}
  .be-hero-foot{position:relative;padding-top:70px;background:linear-gradient(180deg,transparent,rgba(8,8,10,.92) 55%);}
  .be-hero-foot p{color:#c9c9d1;}
  .be-h1{font-size:clamp(34px,10.4vw,80px);}
  .be-h1 .ln.in{margin-left:18px;}
}

/* ---------- testimonial panel ---------- */
.be-quote{padding-top:clamp(40px,6vw,90px);padding-bottom:clamp(90px,11vw,160px);}
.qpanel{position:relative;max-width:980px;margin:0 auto;padding:clamp(34px,5.2vw,72px) clamp(24px,5.6vw,80px) clamp(30px,4.4vw,56px);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid var(--line);overflow:hidden;}
.qpanel::before{content:"";position:absolute;inset:-40% -20% auto auto;width:70%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(216,255,54,.08),rgba(216,255,54,0) 62%);animation:qDrift 14s ease-in-out infinite alternate;}
.qline{position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--acid);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.6s var(--ease);}
.qpanel.lit .qline{transform:scaleX(1);}
.qpanel blockquote p{position:relative;font-weight:500;font-size:clamp(20px,2.45vw,33px);line-height:1.38;letter-spacing:-.012em;color:var(--ink);text-wrap:pretty;}
.qpanel blockquote p span{opacity:.2;transition:opacity .7s var(--ease);transition-delay:calc(var(--w) * 38ms + 200ms);}
.qpanel.lit blockquote p span{opacity:1;}
.qpanel figcaption{position:relative;display:flex;align-items:center;gap:16px;margin-top:clamp(26px,3.4vw,44px);
  padding-top:22px;border-top:1px solid var(--line);font-size:15px;color:var(--dim);opacity:0;transition:opacity 1s var(--ease) 2.6s;}
.qpanel.lit figcaption{opacity:1;}
.qpanel figcaption b{color:var(--ink);font-weight:700;margin-right:8px;}
.qink{display:flex;gap:3px;}
.qink i{width:14px;height:8px;display:block;}
.qink .c{background:var(--cy);}.qink .m{background:var(--mg);}.qink .y{background:var(--yl);}.qink .k{background:#fff;}
@keyframes qDrift{from{transform:translate(0,0);}to{transform:translate(-18%,22%);}}

/* ---------- PROJECTS ---------- */
.be-projects{--mg:#ff45a8;padding-bottom:clamp(90px,10vw,140px);}
.be-projects .slabhead{border-top:1px solid var(--line);padding-top:22px;margin-bottom:clamp(28px,3.6vw,48px);}

/* deployment pipeline tile (main.css .tile-acid / .pviz), full width under the banner */
.be-grid{margin-top:clamp(10px,1.2vw,16px);}
.be-grid .be-pipe{grid-column:1/-1;aspect-ratio:16/5;}
@media(max-width:1000px){.be-grid .be-pipe{aspect-ratio:2/1;}}
@media(max-width:620px){.be-grid .be-pipe{aspect-ratio:4/3;}}

/* Northside banner: home .feat, back-end version */
.be-projects .slabhead h2{font-size:clamp(26px,4.2vw,60px);}
.be-feat .feat-h{font-size:clamp(32px,3.5vw,58px);}
.be-feat .feat-dek{max-width:54ch;}

/* four outcomes, 2 x 2 */
.wins{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);}
.wins li{display:grid;grid-template-columns:34px 1fr;gap:3px 14px;align-content:start;padding:16px 16px 18px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
.wins b{grid-column:2;font-weight:800;font-size:15.5px;letter-spacing:-.01em;color:var(--ink);line-height:1.25;}
.wins small{grid-column:2;font-size:13.5px;line-height:1.45;color:var(--dim);}
.wi{grid-row:1/3;width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(216,255,54,.4);background:rgba(216,255,54,.06);
  transition:background .4s var(--ease),border-color .4s var(--ease);}
.wi svg{width:19px;height:19px;fill:none;stroke:var(--acid);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s var(--ease);}
.be-feat:hover .wi{background:var(--acid);border-color:var(--acid);}
.be-feat:hover .wi svg{stroke:#08080a;}
.wins li:nth-child(2) .wi,.wins li:nth-child(2) .wi svg{transition-delay:.12s;}
.wins li:nth-child(3) .wi,.wins li:nth-child(3) .wi svg{transition-delay:.24s;}
.wins li:nth-child(4) .wi,.wins li:nth-child(4) .wi svg{transition-delay:.36s;}
.be-feat:not(:hover) .wi,.be-feat:not(:hover) .wi svg{transition-delay:0s;}

/* visual: product page with the calculator, plugin list, print file */
.be-vis{min-height:clamp(420px,44vw,680px);}
.be-browser{left:16%;right:5%;top:7%;}
.be-screen{aspect-ratio:4/3;background:#fff url("../images/northside/new-product-desktop.jpg") 100% 40%/165% auto no-repeat;
  transition:background-position 5s cubic-bezier(.45,0,.2,1);}
.be-feat:hover .be-screen{background-position:100% 100%;}

/* plugin list sits over the product photo, leaving the calculator clear */
.plg{position:absolute;left:3%;top:48%;width:clamp(240px,46%,310px);background:#121216;border:1px solid var(--line-2);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.85);font-size:13.5px;transition:transform .8s var(--ease);}
.plg-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);}
.plg-h b{font-weight:800;font-size:14.5px;}
.plg-h span{font-family:var(--fm);font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--mid);}
.plg-r{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.06);color:#e4e4ea;}
.plg-r:last-child{border-bottom:0;}
.plg-r i{font-style:normal;font-family:var(--fm);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--acid);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.plg-r i::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.plg-r.gone span{color:var(--mid);text-decoration:line-through;text-decoration-color:var(--mg);}
.plg-r.gone i{color:var(--mg);}
.be-feat:hover .plg{transform:translateY(-10px);}

.pfile{position:absolute;right:4%;bottom:7%;display:flex;align-items:center;gap:12px;padding:11px 16px 11px 11px;
  background:#16161b;border:1px solid rgba(216,255,54,.45);box-shadow:0 24px 50px -16px rgba(0,0,0,.85);transition:transform .8s var(--ease);}
.pfile .pf-ic{width:34px;height:34px;display:grid;place-items:center;background:rgba(216,255,54,.1);flex:none;}
.pfile .pf-ic svg{width:19px;height:19px;stroke:var(--acid);fill:none;stroke-width:1.6;stroke-linejoin:round;}
.pfile b{display:block;font-weight:700;font-size:14px;}
.pfile span:last-child{font-family:var(--fm);font-size:10.5px;color:var(--dim);line-height:1.45;}
.be-feat:hover .pfile{transform:translateY(-6px);}
.be-vis .feat-tag{left:4%;}

@media(max-width:980px){
  .be-vis{min-height:clamp(380px,72vw,600px);}
  .be-browser{left:14%;right:5%;top:6%;}
  .be-screen{aspect-ratio:16/10;}
  .plg{top:auto;bottom:6%;width:min(40%,310px);}
  .pfile{bottom:6%;}
  .be-vis .feat-tag{display:none;}
}
@media(max-width:620px){
  .wins{grid-template-columns:1fr;}
  .be-vis{min-height:clamp(440px,130vw,560px);}
  .be-browser{left:5%;right:5%;top:5%;}
  .plg{left:5%;width:min(78%,290px);font-size:12.5px;bottom:5%;}
  .plg-r{padding:7px 12px;}
  .pfile{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .be-hero-img,.be-cols i,.be-h1 .ln,.be-hero-foot{animation:none;opacity:1;}
  .qpanel::before{animation:none;}
  .qline,.qpanel blockquote p span,.qpanel figcaption{transition:none !important;}
  .be-screen,.plg,.pfile,.wi,.wi svg{transition:none;}
}

/* =========================================================
   Foxera banner (second project). Same .feat / .be-feat frame,
   flipped so the visual sits on the left, in Foxera's purple.
   ========================================================= */
.fx-feat{--fx:#9d7ad2;--fx-2:#2d0080;--fx-hi:#c4a8f5;margin-top:clamp(16px,2vw,28px);
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);}
.fx-feat .feat-visual{order:-1;}
.fx-feat .feat-h em{color:var(--fx-hi);}
.fx-mark{display:block;width:74px;height:20px;background:url("../images/tiles/logo-foxera.png") right center/contain no-repeat;opacity:.9;}

/* background: Foxera purple light over a dot grid, no photo */
.fx-vis{background:
  radial-gradient(55% 65% at 18% 88%,rgba(157,122,210,.5),transparent 70%),
  radial-gradient(50% 55% at 90% 6%,rgba(45,0,128,.85),transparent 72%),
  linear-gradient(160deg,#1a1030 0%,#0d0a15 70%);}
.fx-vis::before{background:linear-gradient(270deg,var(--bg-2) 0%,rgba(14,14,17,.15) 20%,transparent 46%);}
.fx-vis::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.4px) 0 0/22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%);}

/* the real calendar (flow-test data), cropped past the sidebar */
.fx-browser{left:6%;right:13%;top:8%;}
.fx-screen{aspect-ratio:4/3;background:#fff url("../images/foxera-platform.png") 100% 0/auto 100% no-repeat;
  transition:background-position 5s cubic-bezier(.45,0,.2,1);}
.fx-feat:hover .fx-screen{background-position:58% 0;}

/* two-way SMS, from the client's phone */
.fx-sms{position:absolute;right:4%;top:38%;width:clamp(230px,41%,300px);padding:12px 12px 14px;background:#111015;
  border:1px solid rgba(196,168,245,.35);border-radius:18px;box-shadow:0 34px 70px -22px rgba(0,0,0,.9);
  display:flex;flex-direction:column;gap:7px;font-size:12.5px;line-height:1.4;transition:transform .8s var(--ease);}
.fx-sms-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:2px 4px 8px;border-bottom:1px solid var(--line);margin-bottom:2px;}
.fx-sms-h b{font-weight:800;font-size:13.5px;}
.fx-sms-h span{font-family:var(--fm);font-size:10px;color:var(--mid);}
.fx-sms .b{max-width:84%;padding:8px 11px;border-radius:14px;}
.fx-sms .out{align-self:flex-start;background:#25232d;color:#e6e4ec;border-bottom-left-radius:4px;}
.fx-sms .in{align-self:flex-end;background:var(--fx);color:#140c22;font-weight:600;border-bottom-right-radius:4px;}
.fx-sms .ok{display:flex;gap:8px;align-items:center;}
.fx-sms .ok::before{content:"";flex:none;width:9px;height:5px;margin-bottom:3px;border-left:2px solid var(--acid);border-bottom:2px solid var(--acid);transform:rotate(-45deg);}
.fx-feat:hover .fx-sms{transform:translateY(-10px);}
/* replies land in order the first time the banner is hovered */
.fx-sms .b{transition:opacity .45s var(--ease),transform .45s var(--ease);}
@media (hover:hover){
  .fx-sms .b:nth-child(n+3){opacity:.35;}
  .fx-feat:hover .fx-sms .b{opacity:1;}
  .fx-feat:hover .fx-sms .b:nth-child(3){transition-delay:.15s;}
  .fx-feat:hover .fx-sms .b:nth-child(4){transition-delay:.55s;}
  .fx-feat:hover .fx-sms .b:nth-child(5){transition-delay:.95s;}
  .fx-feat:hover .fx-sms .b:nth-child(6){transition-delay:1.35s;}
}

.fx-pay{position:absolute;left:3%;bottom:15%;display:flex;align-items:center;gap:12px;padding:11px 16px 11px 11px;
  background:#16161b;border:1px solid rgba(216,255,54,.45);box-shadow:0 24px 50px -16px rgba(0,0,0,.85);transition:transform .8s var(--ease);}
.fx-pay-ic{width:34px;height:34px;display:grid;place-items:center;background:rgba(216,255,54,.1);flex:none;}
.fx-pay-ic svg{width:19px;height:19px;stroke:var(--acid);fill:none;stroke-width:1.6;stroke-linejoin:round;}
.fx-pay b{display:block;font-weight:700;font-size:14px;}
.fx-pay span:last-child{font-family:var(--fm);font-size:10.5px;color:var(--dim);line-height:1.45;}
.fx-feat:hover .fx-pay{transform:translateY(-6px);}
.fx-vis .feat-tag{left:auto;right:4%;}

@media(max-width:980px){
  .fx-feat{grid-template-columns:1fr;}
  .fx-vis::before{background:linear-gradient(0deg,var(--bg-2) 0%,transparent 30%);}
  .fx-browser{left:5%;right:18%;top:6%;}
  .fx-sms{top:auto;bottom:6%;width:min(44%,290px);}
  .fx-pay{bottom:6%;}
}
@media(max-width:620px){
  .fx-browser{left:5%;right:5%;}
  .fx-sms{right:5%;width:min(74%,280px);font-size:12px;}
  .fx-pay{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .fx-screen,.fx-sms,.fx-sms .b,.fx-pay{transition:none;}
}

/* =========================================================
   Custom software banner, under the testimonial (links to custom-software.html)
   ========================================================= */
.be-quote:has(+ .be-cs){padding-bottom:clamp(28px,3.4vw,48px);}
.be-cs{padding-bottom:clamp(90px,11vw,160px);}
.csb{position:relative;max-width:980px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border:1px solid var(--line);background:var(--bg-2);overflow:hidden;
  transition:border-color .4s var(--ease);}
.csb:hover{border-color:var(--acid);}
.csb-copy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,1.6vw,20px);padding:clamp(24px,3.4vw,52px);}
.csb-kick{display:inline-flex;align-items:center;gap:10px;font-family:var(--fm);font-size:10.5px;letter-spacing:2.6px;text-transform:uppercase;
  color:#08080a;background:var(--acid);padding:7px 12px 7px 10px;}
.csb-kick i{width:6px;height:6px;border-radius:50%;background:#08080a;display:block;animation:blip 1.6s steps(2) infinite;}
.csb-h{font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.9;font-size:clamp(30px,3.4vw,50px);}
.csb-h em{font-style:normal;color:var(--acid);}
.csb-copy p{color:#c9c9d1;font-size:clamp(15.5px,1.25vw,18px);line-height:1.55;max-width:44ch;}
.csb-cta{margin-top:6px;display:inline-flex;align-items:center;gap:12px;font-family:var(--fm);font-size:11px;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--line-2);padding:13px 18px;transition:.3s var(--ease);}
.csb-cta i{width:8px;height:8px;background:var(--acid);display:block;}
.csb-cta b{font-weight:400;transition:transform .3s var(--ease);}
.csb:hover .csb-cta{background:var(--acid);color:#08080a;border-color:var(--acid);}
.csb:hover .csb-cta i{background:#08080a;}
.csb:hover .csb-cta b{transform:translate(3px,-3px);}

.csb-vis{position:relative;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:clamp(24px,3.4vw,52px);border-left:1px solid var(--line);
  background:radial-gradient(70% 70% at 80% 100%,rgba(216,255,54,.09),transparent 70%);}
.csb-bill{list-style:none;border-top:1px dashed var(--line-2);}
.csb-bill li{position:relative;display:flex;justify-content:space-between;gap:12px;padding:10px 2px;border-bottom:1px dashed var(--line-2);}
.csb-bill span{position:relative;font-weight:600;font-size:15px;transition:color .4s var(--ease);transition-delay:calc(var(--i) * 110ms);}
.csb-bill i{font-style:normal;font-family:var(--fm);font-size:10.5px;color:var(--mid);}
.csb-bill span::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;background:var(--mg);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s cubic-bezier(.65,0,.2,1);transition-delay:calc(var(--i) * 110ms);}
.csb:hover .csb-bill span::after,.csb:focus-visible .csb-bill span::after{transform:scaleX(1);}
.csb:hover .csb-bill span,.csb:focus-visible .csb-bill span{color:var(--mid);}
.csb-own{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;padding:14px 16px;border:1px solid rgba(216,255,54,.45);background:#121216;
  transition:transform .6s var(--ease),background .4s var(--ease);transition-delay:.35s;}
.csb-dot{grid-row:1/3;width:12px;height:12px;background:var(--acid);box-shadow:0 0 14px rgba(216,255,54,.6);}
.csb-own b{font-weight:800;font-size:16px;}
.csb-own i{font-style:normal;font-family:var(--fm);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--acid);}
.csb:hover .csb-own{transform:translateY(-6px);}
.csb:not(:hover) .csb-own,.csb:not(:hover) .csb-bill span::after,.csb:not(:hover) .csb-bill span{transition-delay:0s;}
@media(max-width:860px){
  .csb{grid-template-columns:1fr;}
  .csb-vis{border-left:0;border-top:1px solid var(--line);}
}
@media (prefers-reduced-motion:reduce){
  .csb-kick i{animation:none;}
  .csb-bill span::after,.csb-bill span,.csb-own{transition:none;}
}