/* Pixel Canvas inner pages (Projects, Features, Pricing, Contact). Builds on styles.css. */

.hdr nav a[aria-current="page"]{opacity:1; color:#fff; position:relative;}
.hdr nav a[aria-current="page"]::after{content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px; border-radius:2px; background:var(--pb);}
.mnav a.item[aria-current="page"]{color:var(--sky2);}

/* page hero */
.phero{position:relative; min-height:min(78vh, 820px); display:flex; align-items:flex-end; padding:150px 0 clamp(56px, 7vw, 96px); overflow:hidden; background:#05030f;}
.phero__bg{position:absolute; inset:0; background:var(--bg) center/cover no-repeat; opacity:.55; transform:scale(1.04);}
.phero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,3,15,.88) 0%, rgba(5,3,15,.6) 90px, rgba(5,3,15,.25) 200px, rgba(5,3,15,0) 320px), linear-gradient(90deg, rgba(5,3,15,.92) 0%, rgba(5,3,15,.55) 45%, rgba(5,3,15,.15) 100%), linear-gradient(0deg, var(--ink) 0%, rgba(11,7,32,0) 45%);}
.phero .wrap{position:relative; z-index:1;}
.phero h1{font-size:clamp(44px, 6.4vw, 104px); line-height:.96; margin:18px 0 22px; max-width:14ch;}
.phero p.lead{font-size:clamp(17px, 1.35vw, 21px); line-height:1.55; color:rgba(255,255,255,.82); max-width:640px; margin:0;}
.phero .btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px;}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:30px;}
.chips a{display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 14px; border-radius:999px; border:1px solid rgba(255,255,255,.22); background:rgba(11,7,32,.45); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:13px; color:rgba(255,255,255,.85); transition:all .25s ease;}
.chips a small{font-size:11px; color:var(--sky2);}
.chips a:hover{border-color:rgba(127,214,255,.6); color:#fff;}

/* media card (video or image) */
.media{position:relative; border-radius:22px; overflow:hidden; aspect-ratio:16/9; background:#130d2e; border:1px solid var(--line); box-shadow:0 30px 80px rgba(0,0,0,.45);}
.media video, .media > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.media__tag{position:absolute; left:14px; top:14px; z-index:2; display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:rgba(11,7,32,.62); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.2); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;}
.media__tag i{width:7px; height:7px; border-radius:50%; background:#3ce07a; box-shadow:0 0 0 3px rgba(60,224,122,.25);}

/* project case studies */
.projects{padding:clamp(40px, 5vw, 80px) 0 clamp(60px, 8vw, 120px);}
.proj{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.12fr); gap:clamp(32px, 5vw, 88px); align-items:center; padding:clamp(56px, 7vw, 110px) 0; border-top:1px solid var(--line); scroll-margin-top:80px;}
.proj:nth-child(even) .proj__media{order:-1;}
.proj__num{font-family:var(--display); font-weight:200; font-size:clamp(48px, 5vw, 80px); line-height:1; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1px rgba(127,214,255,.6);}
.proj h2{font-size:clamp(30px, 3.4vw, 52px); line-height:1.04; margin:14px 0 16px;}
.proj h2 small{display:block; font-family:"Inter", sans-serif; font-size:13px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--sky2); margin-bottom:12px;}
.proj p.lead{font-size:17px; line-height:1.6; color:rgba(255,255,255,.82); margin:0;}
.stats-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:18px 24px; margin:28px 0 6px; padding:20px 0 0; border-top:1px solid var(--line);}
.stats-row b{display:block; font-family:var(--display); font-size:clamp(26px, 2.2vw, 36px); font-weight:500; letter-spacing:-.04em; line-height:1; overflow-wrap:anywhere;}
.stats-row span{display:block; margin-top:8px; font-size:13px; line-height:1.4; color:rgba(255,255,255,.65);}
.ticks{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px;}
.ticks li{position:relative; padding-left:26px; font-size:15px; line-height:1.55; color:rgba(255,255,255,.78);}
.ticks li::before{content:""; position:absolute; left:2px; top:.55em; width:12px; height:6px; border-left:2px solid var(--sky); border-bottom:2px solid var(--sky); transform:rotate(-45deg);}
.proj .links{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px;}
.proj .links .btn{min-height:44px; font-size:14px;}

/* features page */
.fblock{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); gap:clamp(32px, 5vw, 88px); align-items:center; padding:clamp(56px, 7vw, 110px) 0; border-top:1px solid var(--line); scroll-margin-top:80px;}
.fblock--rev .media, .fblock--rev .fblock__media{order:-1;}
.fblock h2{font-size:clamp(30px, 3.4vw, 52px); line-height:1.04; margin:16px 0 18px;}
.fblock p.lead{font-size:17px; line-height:1.6; color:rgba(255,255,255,.82); margin:0;}
.specs{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1px; margin-top:28px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden;}
.specs div{background:var(--ink); padding:20px 20px 22px;}
.specs b{display:block; font-family:var(--display); font-size:clamp(26px, 2.4vw, 38px); font-weight:500; letter-spacing:-.04em; line-height:1;}
.specs span{display:block; margin-top:8px; font-size:13.5px; color:rgba(255,255,255,.68);}
.powered{display:flex; align-items:center; gap:22px; margin-top:28px;}
.powered img{height:34px; width:auto; opacity:.85;}
.powered small{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55);}
.tpl{padding:clamp(56px, 7vw, 110px) 0; border-top:1px solid var(--line);}
.tpl__head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px;}
.tpl__head h2{font-size:clamp(30px, 3.6vw, 56px); line-height:1.02;}
.tpl__nums{display:flex; gap:36px;}
.tpl__nums b{display:block; font-family:var(--display); font-size:clamp(40px, 4vw, 64px); font-weight:500; letter-spacing:-.05em; line-height:1;}
.tpl__nums span{font-size:13px; color:rgba(255,255,255,.68);}
.tpl__grid{display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:14px;}
.tpl__grid figure{margin:0; position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/5; background:#130d2e; border:1px solid var(--line);}
.tpl__grid img{width:100%; height:100%; object-fit:cover; transition:transform .8s ease;}
.tpl__grid figure:hover img{transform:scale(1.06);}
.tpl__grid figcaption{position:absolute; left:0; right:0; bottom:0; padding:30px 14px 12px; background:linear-gradient(0deg, rgba(11,7,32,.92), rgba(11,7,32,0)); font-family:var(--display); font-weight:600; font-size:15px;}
.tpl__grid figcaption small{display:block; font-family:"Inter", sans-serif; font-weight:500; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--sky2); margin-bottom:3px;}
.trio{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; padding:clamp(56px, 7vw, 110px) 0; border-top:1px solid var(--line);}
.trio article{padding:28px 26px 30px; border-radius:20px; border:1px solid var(--line); background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));}
.trio small{font-size:12px; letter-spacing:.14em; color:var(--sky2);}
.trio h3{font-size:clamp(22px, 1.9vw, 28px); margin:12px 0 10px;}
.trio p{font-size:15px; line-height:1.6; color:rgba(255,255,255,.75); margin:0;}

/* pricing */
.plans{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; padding:clamp(20px, 3vw, 40px) 0 clamp(40px, 5vw, 70px); align-items:stretch;}
.plan{position:relative; display:flex; flex-direction:column; padding:28px 24px 26px; border-radius:22px; border:1px solid var(--line); background:linear-gradient(170deg, rgba(255,255,255,.07), rgba(255,255,255,.015));}
.plan--feat{border-color:transparent; background:linear-gradient(170deg, rgba(176,56,240,.16), rgba(176,56,240,.04)) padding-box, linear-gradient(#120b2c, #120b2c) padding-box, linear-gradient(var(--pp), var(--pp)) border-box; border:1px solid transparent; box-shadow:0 24px 70px rgba(176,56,240,.25);}
.plan h2{font-size:22px; letter-spacing:-.02em;}
.plan .for{font-size:14px; color:rgba(255,255,255,.7); margin:6px 0 18px; min-height:2.8em;}
.plan .price{font-family:var(--display); font-size:clamp(40px, 3.6vw, 54px); font-weight:500; letter-spacing:-.05em; line-height:1;}
.plan .price small{font-family:"Inter", sans-serif; font-size:15px; font-weight:400; letter-spacing:0; color:rgba(255,255,255,.65);}
.plan .bill{font-size:12.5px; color:rgba(255,255,255,.55); margin-top:8px;}
.plan .ticks{margin:22px 0 24px; gap:9px;}
.plan .ticks li{font-size:14px;}
.plan .tbd{margin:22px 0 24px; font-size:14px; line-height:1.55; color:rgba(255,255,255,.62); padding:14px 16px; border-radius:14px; border:1px dashed rgba(226,188,255,.3);}
.plan .btn{margin-top:auto; width:100%;}
.plan__tag{position:absolute; top:-12px; left:24px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:5px 10px; border-radius:999px; background:var(--pb); color:#03131c;}
.plans-note{display:flex; flex-wrap:wrap; gap:10px 28px; padding:22px 0 0; border-top:1px solid var(--line); font-size:14px; color:rgba(255,255,255,.7);}
.plans-note span{display:inline-flex; align-items:center; gap:8px;}
.plans-note span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--sky);}

/* contact */
.contact{display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(28px, 4vw, 64px); padding:clamp(30px, 4vw, 60px) 0 clamp(70px, 8vw, 120px); align-items:start;}
.cinfo{display:grid; gap:14px;}
.cinfo article{padding:24px 24px 26px; border-radius:20px; border:1px solid var(--line); background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));}
.cinfo small{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--sky2);}
.cinfo h3{font-size:22px; margin:10px 0 8px;}
.cinfo p{margin:0; font-size:15px; line-height:1.6; color:rgba(255,255,255,.78);}
.cinfo a{text-decoration:underline; text-underline-offset:3px;}
.cal{border-radius:22px; overflow:hidden; border:1px solid var(--line); background:#fff; min-height:720px;}
.cal .calendly-inline-widget{min-width:300px; height:720px;}
.cal__fallback{padding:40px; color:#111; font-size:15px;}

@media (max-width:1024px){
  .proj, .fblock{grid-template-columns:1fr;}
  .proj:nth-child(even) .proj__media, .fblock--rev .media, .fblock--rev .fblock__media{order:0;}
  .tpl__grid{grid-template-columns:repeat(3, minmax(0, 1fr));}
  .trio{grid-template-columns:1fr;}
  .plans{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .contact{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .phero{min-height:auto; padding-top:120px;}
  .phero h1{font-size:44px;}
  .tpl__grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .plans{grid-template-columns:1fr;}
  .specs{grid-template-columns:1fr 1fr;}
  .cal, .cal .calendly-inline-widget{height:760px; min-height:760px;}
}

/* stories: index cards */
.stories{padding:clamp(30px, 4vw, 60px) 0 clamp(60px, 7vw, 110px);}
.story-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px;}
.story{display:flex; flex-direction:column; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.012)); transition:border-color .3s ease, transform .3s ease;}
.story:hover{border-color:rgba(95,208,255,.5); transform:translateY(-3px);}
.story__img{aspect-ratio:16/10; overflow:hidden; background:#130d2e;}
.story__img img{width:100%; height:100%; object-fit:cover; transition:transform .9s ease;}
.story:hover .story__img img{transform:scale(1.04);}
.story__b{padding:20px 22px 24px; display:flex; flex-direction:column; flex:1;}
.story__b small{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.6);}
.story__b small span{color:var(--pb2); font-weight:600;}
.story__b h3{font-size:clamp(18px, 1.35vw, 21px); line-height:1.3; margin:10px 0 10px;}
.story__b p{font-size:14px; line-height:1.55; color:rgba(255,255,255,.7); margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.story__b .more{margin-top:auto; padding-top:16px; font-size:14px; font-weight:600; color:var(--pp2);}
.story--feature{display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); margin-bottom:24px;}
.story--feature .story__img{aspect-ratio:auto; min-height:360px;}
.story--feature .story__b{padding:clamp(24px, 3vw, 44px); justify-content:center;}
.story--feature .story__b h3{font-size:clamp(26px, 2.6vw, 40px); line-height:1.1; margin:14px 0 14px;}
.story--feature .story__b p{-webkit-line-clamp:5; font-size:15.5px;}

/* stories: article page */
.post-page{padding-top:120px;}
.post-head{max-width:920px; margin:0 auto; text-align:left;}
.post-head .back{display:inline-block; margin-bottom:22px; font-size:14px; color:rgba(255,255,255,.7);}
.post-head .back:hover{color:#fff;}
.post-head h1{font-size:clamp(34px, 4.4vw, 64px); line-height:1.04; margin:16px 0 0;}
.post-hero{max-width:1180px; margin:clamp(28px, 3.4vw, 48px) auto 0;}
.post-hero .media iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.prose{max-width:760px; margin:clamp(36px, 4vw, 60px) auto 0; padding-bottom:clamp(40px, 5vw, 70px);}
.prose > *{margin:0 0 22px;}
.prose p{font-size:clamp(17px, 1.2vw, 19px); line-height:1.75; color:rgba(255,255,255,.84);}
.prose h2{font-size:clamp(26px, 2.2vw, 34px); line-height:1.15; margin-top:40px;}
.prose h3{font-size:clamp(20px, 1.6vw, 25px); line-height:1.25; margin-top:34px;}
.prose a{color:var(--pb2); text-decoration:underline; text-underline-offset:3px;}
.prose a:hover{color:#fff;}
.prose strong{color:#fff; font-weight:600;}
.prose blockquote{margin:30px 0; padding:4px 0 4px 22px; border-left:3px solid var(--pp); font-size:20px; line-height:1.6; color:#fff;}
.prose .ticks li{font-size:17px;}
.prose .pimg{margin:34px 0;}
.prose .pimg img{width:100%; border-radius:18px; border:1px solid var(--line);}
.prose .pvid{margin:34px 0;}
.prose .pvid iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.gallery{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin:34px -60px !important;}
.gallery--2{grid-template-columns:repeat(2, minmax(0, 1fr));}
.gallery a{display:block; border-radius:14px; overflow:hidden; aspect-ratio:4/3; background:#130d2e; border:1px solid var(--line);}
.gallery img{width:100%; height:100%; object-fit:cover; transition:transform .8s ease;}
.gallery a:hover img{transform:scale(1.05);}
.more-stories{border-top:1px solid var(--line); padding-top:clamp(60px, 7vw, 100px);}

@media (max-width:1024px){
  .story-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .story--feature{grid-template-columns:1fr;}
  .story--feature .story__img{min-height:0; aspect-ratio:16/9;}
  .gallery{margin:34px 0 !important;}
}
@media (max-width:640px){
  .story-grid{grid-template-columns:1fr;}
  .post-page{padding-top:100px;}
  .gallery{grid-template-columns:repeat(2, minmax(0, 1fr));}
}

/* contact: qualify for a free digital twin demo */
.qualify{border-radius:24px; border:1px solid var(--line); background:linear-gradient(170deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); padding:clamp(24px, 3vw, 40px); scroll-margin-top:90px;}
.qform__head h2, .qresult h2{font-size:clamp(26px, 2.4vw, 36px); line-height:1.1; margin:12px 0 10px;}
.qform__head p, .qresult p{font-size:15.5px; line-height:1.6; color:rgba(255,255,255,.78); margin:0;}
.qstep{font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--pb2);}
.qgroup{border:0; margin:26px 0 0; padding:0; min-width:0;}
.qgroup legend, .qfield label{display:block; font-weight:600; font-size:15px; margin-bottom:12px; color:#fff;}
.qgroup legend small, .qfield label small{font-weight:400; font-size:12.5px; color:rgba(255,255,255,.5); margin-left:6px;}
.qopts{display:flex; flex-wrap:wrap; gap:8px;}
.qopts label{position:relative; cursor:pointer;}
.qopts input{position:absolute; opacity:0; width:1px; height:1px;}
.qopts span{display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 16px; border-radius:999px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.03); font-size:14px; color:rgba(255,255,255,.85); transition:all .2s ease;}
.qopts span::before{content:""; width:14px; height:14px; border-radius:4px; border:1.5px solid rgba(255,255,255,.5); transition:all .2s ease; flex:0 0 auto;}
.qopts input[type="radio"] + span::before{border-radius:50%;}
.qopts label:hover span{border-color:rgba(95,208,255,.55);}
.qopts input:checked + span{border-color:var(--pp); background:rgba(176,56,240,.16); color:#fff;}
.qopts input:checked + span::before{background:var(--pp); border-color:var(--pp); box-shadow:inset 0 0 0 3px #1a1438;}
.qopts input:focus-visible + span{outline:2px solid var(--pb); outline-offset:2px;}
.qfield{margin-top:22px;}
.qfield input, .qfield textarea{width:100%; box-sizing:border-box; border-radius:14px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.04); color:#fff; font:inherit; font-size:15px; padding:13px 15px; outline:none; transition:border-color .2s ease;}
.qfield textarea{resize:vertical; min-height:110px; line-height:1.5;}
.qfield input:focus, .qfield textarea:focus{border-color:var(--pb);}
.qrow{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}
.qrow .qfield{margin-top:18px;}
.is-bad legend, .is-bad label{color:#ff9d9d !important;}
.is-bad input, .is-bad textarea{border-color:rgba(255,120,120,.7);}
.qerr{margin:20px 0 0; padding:12px 14px; border-radius:12px; background:rgba(255,90,90,.1); border:1px solid rgba(255,120,120,.35); color:#ffc2c2; font-size:14px;}
.qform .btn--solid{margin-top:24px; width:100%;}
.qnote{margin:12px 0 0; font-size:12.5px; color:rgba(255,255,255,.5); text-align:center;}
.qresult .cal{margin-top:22px; border-radius:18px;}
.qresult .cal .calendly-inline-widget{height:700px; min-width:280px;}
.qalt{margin-top:16px !important; font-size:14px !important;}
.qalt a{color:var(--pb2); text-decoration:underline; text-underline-offset:3px;}
@media (max-width:640px){ .qrow{grid-template-columns:1fr;} .qopts span{min-height:40px; font-size:13.5px;} }

/* testimonials (digital twin page) */
.quotes{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px;}
.quotes figure{margin:0; display:flex; flex-direction:column; justify-content:space-between; gap:22px; padding:28px 28px 26px; border-radius:20px; border:1px solid var(--line); background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));}
.quotes blockquote{margin:0; font-size:clamp(16px, 1.2vw, 18.5px); line-height:1.6; color:rgba(255,255,255,.88);}
.quotes figcaption{display:flex; align-items:center; gap:12px;}
.quotes figcaption img{width:44px; height:44px; border-radius:50%; object-fit:cover; border:1px solid var(--line); background:#140c33;}
.quotes figcaption b{display:block; font-weight:600; color:#fff;}
.quotes figcaption span{font-size:13.5px; color:var(--sky2); line-height:1.35;}
@media (max-width: 760px){ .quotes{grid-template-columns:1fr;} }
/* screen recordings: zoom in to hide the browser bar and taskbar */
.media--crop video{transform:scale(1.2); transform-origin:50% 47%;}

/* portal page */
.specs--3{grid-template-columns:1fr;}
.specs--3 b{font-size:clamp(22px, 1.9vw, 30px);}
.pull{margin:22px 0 0; padding:4px 0 4px 20px; border-left:2px solid var(--pp); font-size:15.5px; line-height:1.65; color:rgba(255,255,255,.82);}
.pull cite{display:block; margin-top:12px; font-style:normal; font-size:13px; letter-spacing:.04em; color:var(--sky2);}
.proj p.more{margin:20px 0 0;}
.proj p.more a{font-weight:600; color:var(--pb2);}
.proj p.more a:hover{color:#fff;}

/* landing pages (digital twin, portal): bigger videos on desktop */
@media (min-width:1025px){
  .wrap.wide-media, .wide-media > .wrap{max-width:1560px; padding-left:clamp(18px, 3.2vw, 56px); padding-right:clamp(18px, 3.2vw, 56px);}
  .wide-media .fblock, .wide-media .proj{grid-template-columns:minmax(0, 1fr) minmax(0, 1.85fr); gap:clamp(28px, 3.4vw, 60px);}
  /* video on the left: give it the wide column there too */
  .wide-media .fblock--rev, .wide-media .proj:nth-child(even){grid-template-columns:minmax(0, 1.85fr) minmax(0, 1fr);}
}