/* =====================================================================
   WORK group: /work/, /work/hrive/, /work/monetiq/, /solution-blueprints/
   Only additions that the shared components do not cover. Round 2 type tokens only.
   ===================================================================== */

/* ---------- shared: hero screenshot ---------- */
.hcover { margin-top: clamp(40px, 5vw, 64px); position: relative; }
.hcover::before { content: ""; position: absolute; inset: -40px -24px; z-index: -1; border-radius: 40px;
  background: radial-gradient(60% 60% at 50% 40%, rgba(20,154,157,.22), transparent 70%); filter: blur(20px); }
.hcover img, .mshot img, .hshot img { display: block; width: 100%; height: auto; }

/* /work/ hero: tilted screenshot beside the text */
.hshot { position: relative; margin: 0; perspective: 1400px; }
.hshot::before { content: ""; position: absolute; inset: -30px -20px; z-index: -1; border-radius: 40px;
  background: radial-gradient(60% 60% at 50% 45%, rgba(20,154,157,.24), transparent 70%); filter: blur(24px); }
.hshot .shot { padding: clamp(12px, 1.6vw, 20px); border-radius: 22px; transform: rotateY(-9deg) rotateX(3deg); transform-origin: 60% 50%; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.hshot figcaption { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 14px; text-align: right; }

/* ---------- /work/ featured stack: small stack note ---------- */
.scard__note { margin-top: 12px; font-size: var(--fs-xs); color: #3b4648; }

/* ---------- /work/ filter gallery cards ---------- */
.fgal .cards { align-items: stretch; }
.wcard { padding: 0; overflow: hidden; }
.wcard__cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; padding: 20px 20px 0; background: #f4e6b8; border-bottom: 1px solid var(--line-2); }
.wcard__cover--sand { background: #cfe6e6; } .wcard__cover--stone { background: #ebe3d5; } .wcard__cover--grey { background: #dfe3ea; }
.wcard__cover > * { transition: transform .6s var(--ease); transform-origin: 50% 0; }
a.wcard:hover .wcard__cover > * { transform: scale(1.04); }
.wcard__cover .browser { border-radius: 10px 10px 0 0; box-shadow: 0 14px 34px rgba(7,40,42,.22); }
.wcard__cover .browser__bar { padding: 7px 10px; gap: 5px; }
.wcard__cover .browser__bar i { width: 8px; height: 8px; }
.wcard__cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; }
.wcard__cover .browser__ph { aspect-ratio: 16 / 9; }
.wcard__body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; }
.wcard__body .tag { margin-bottom: 14px; }
.wcard .pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.wcard .pills span { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line-2); color: var(--ink-2); }
/* blueprint cover: the flow's node names as a mini diagram */
.wflow { display: grid; gap: 7px; counter-reset: wf; }
.wflow li { counter-increment: wf; display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 10px; background: rgba(255,255,255,.72); border: 1px solid rgba(7,94,99,.15); font-size: var(--fs-xs); font-weight: 600; color: #0e1718; }
.wflow li::before { content: counter(wf); flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--teal-d); color: #fff; }
.wflow li:nth-child(even) { margin-left: 22px; }
.wflow .is-key { background: #0e1718; color: #fff; }
.wflow .is-key::before { background: var(--gold); color: #1a1300; }

/* ---------- /work/hrive/ challenges: sticky intro left, numbered cards right ---------- */
.chal { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.chal__intro { position: sticky; top: 110px; padding: clamp(26px, 3vw, 40px); border-radius: var(--r); border: 1px solid var(--line-2);
  background: radial-gradient(90% 70% at 0% 0%, rgba(20,154,157,.14), transparent 70%), var(--card); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.chal__intro .body { margin-top: 14px; }
.chal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chal__grid .card { min-height: 220px; }
.chal__n { font-size: var(--fs-display); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(233,187,69,.75); margin-bottom: 18px; }

/* without / with contrast */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.vs > div { padding: 20px 22px; border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--card); }
.vs b { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); margin-bottom: 6px; }
.vs p { color: var(--ink-2); font-size: var(--fs-sm); }
.vs .vs__no i { color: var(--ink-3); } .vs .vs__yes { border-color: rgba(60,195,197,.4); } .vs .vs__yes i { color: var(--teal-l); }

.tour__shot img { object-position: left top; }
/* tour caption role tag */
.tour__role { display: inline-block; margin-left: 10px; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); }

/* modules: 3 + 2 layout */
.mods { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.mods .card { grid-column: span 2; }
.mods .card:nth-child(4), .mods .card:nth-child(5) { grid-column: span 3; }
.mods .card .tags { margin-bottom: 14px; }
.mods .card .tags .tag { margin-bottom: 0; }

/* leave flow: a timeline whose line is drawn as you scroll (work.js sets --p and .is-lit) */
.ltime { --p: 1; position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; counter-reset: lt; }
.ltime::before, .ltime::after { content: ""; position: absolute; left: 10%; right: 10%; top: 23px; height: 2px; border-radius: 2px; }
.ltime::before { background: var(--line-2); }
.ltime::after { background: linear-gradient(90deg, var(--teal-l), var(--gold)); transform-origin: 0 50%; transform: scaleX(var(--p)); }
.ltime li { counter-increment: lt; position: relative; z-index: 1; text-align: center; }
.ltime li::before { content: counter(lt, decimal-leading-zero); display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 18px; border-radius: 50%;
  font-size: var(--fs-xs); font-weight: 800; background: var(--gold); color: #1a1300; box-shadow: 0 0 0 6px rgba(217,163,22,.14); transition: background-color .4s, color .4s, box-shadow .4s, transform .4s var(--ease); }
.ltime__role { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--teal-l); margin-bottom: 6px; }
.ltime h3 { font-size: var(--fs-h4); line-height: 1.3; font-weight: 700; }
.ltime p { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 8px; }
.ltime.is-anim li:not(.is-lit)::before { background: #1a2122; color: var(--ink-3); box-shadow: 0 0 0 1px var(--line-2); transform: scale(.85); }
.ltime.is-anim li { transition: opacity .4s; }
.ltime.is-anim li:not(.is-lit) { opacity: .45; }

/* architecture: four layers in a row with connectors */
.arch { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: ly; }
.arch li { counter-increment: ly; position: relative; padding: 24px; border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--card); }
.arch li:first-child { border-left: 2px solid var(--teal-l); }
.arch li:last-child { border-right: 2px solid var(--gold); }
.arch li::before { content: "Layer " counter(ly); display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--gold-l); margin-bottom: 10px; }
.arch li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -15px; width: 10px; height: 10px; border-top: 2px solid var(--teal-l); border-right: 2px solid var(--teal-l); transform: translateY(-50%) rotate(45deg); }
.arch b { display: block; font-size: var(--fs-h4); line-height: 1.3; }
.arch span { display: block; color: var(--ink-2); font-size: var(--fs-sm); margin-top: 6px; }

/* security notes as icon cards */
.secnotes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.secnote { display: flex; gap: 18px; padding: 24px; border-radius: var(--r-s); border: 1px solid var(--line-2); background: linear-gradient(135deg, rgba(217,163,22,.08), var(--card) 60%); }
.secnote > i { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; color: var(--gold-l); background: rgba(217,163,22,.1); border: 1px solid rgba(217,163,22,.35); }
.secnote h4 { font-size: var(--fs-h4); font-weight: 700; }
.secnote p { color: var(--ink-2); font-size: var(--fs-body); margin-top: 6px; }
.stacknote { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 24px; color: var(--ink-3); font-size: var(--fs-sm); }

/* more screens: horizontal snap rail */
.mrail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.mshot { margin: 0; padding: 16px; border-radius: var(--r); background: linear-gradient(145deg, #e7e6e2, #bcbbb6); scroll-snap-align: start; }
.mshot .browser { border-radius: 10px; box-shadow: 0 14px 34px rgba(7,40,42,.22); }
.mshot .browser__bar { padding: 7px 10px; gap: 5px; }
.mshot .browser__bar i { width: 8px; height: 8px; }
.mshot img { aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; }
.mshot figcaption { font-size: var(--fs-xs); font-weight: 600; color: #1c2a2b; margin-top: 12px; }

/* ---------- /work/monetiq/: one intentional "in preparation" card ---------- */
.prep { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4vw, 56px); align-items: start; padding: clamp(28px, 4vw, 48px); border-radius: 28px;
  border: 1px solid rgba(217,163,22,.4); background: radial-gradient(80% 90% at 0% 0%, rgba(217,163,22,.12), transparent 70%), var(--card); }
.prep .tag { margin-bottom: 18px; }
.prep__list { display: grid; gap: 12px; counter-reset: pl; }
.prep__list li { counter-increment: pl; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 16px 18px; border-radius: var(--r-s); border: 1px solid var(--line-2); background: rgba(255,255,255,.02); }
.prep__list li > i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: var(--ink-3); border: 1px dashed var(--line-2); }
.prep__list b { display: block; font-size: var(--fs-body); }
.prep__list span { display: block; color: var(--ink-2); font-size: var(--fs-sm); margin-top: 2px; }

/* ---------- /solution-blueprints/ ---------- */
/* hero diagram */
.bpdia { padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r); border: 1px solid var(--line-2); background: radial-gradient(80% 60% at 100% 0%, rgba(20,154,157,.16), transparent 70%), var(--card); }
.bpdia__t { font-size: var(--fs-xs); font-weight: 600; color: var(--gold-l); margin-bottom: 16px; }
.bpdia ol { display: grid; gap: 10px; }
.bpdia li { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(60,195,197,.45); font-size: var(--fs-sm); font-weight: 600; }
.bpdia li:not(:last-child)::after { content: ""; position: absolute; left: 27px; bottom: -11px; width: 2px; height: 10px; background: rgba(60,195,197,.45); }
.bpdia li i { color: var(--teal-l); font-size: 18px; }
.bpdia .is-key { border-color: rgba(217,163,22,.6); background: rgba(217,163,22,.08); }
.bpdia .is-key i { color: var(--gold-l); }
.bpdia small { display: block; font-weight: 500; color: var(--ink-3); font-size: var(--fs-xs); }

/* sticky index (reuses .layout-toc + nav.toc[data-spy]) */
.bp-toc a small { display: block; font-size: 12px; font-weight: 600; color: var(--gold-l); letter-spacing: .02em; }
.bp-toc a.is-active small { color: var(--gold-l); }
.bps > *, .bp .scard > * { min-width: 0; }
.bps { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 6vw, 80px); }
.bp { scroll-margin-top: 100px; }
.bp .sec-head { margin-bottom: 24px; }
.bp .scard { grid-template-columns: 1.25fr .75fr; gap: 28px; align-items: start; min-height: 0; }

/* tabs on a pastel panel */
.bp .utabs { margin-top: 18px; }
.bp .utabs__list { border-bottom-color: rgba(11,13,14,.14); }
.bp .utabs__list [role="tab"] { color: #3b4648; padding: 0 10px; gap: 6px; font-size: var(--fs-sm); min-height: 44px; }
.bp .utabs__list [role="tab"]:hover, .bp .utabs__list [role="tab"][aria-selected="true"] { color: #0e1718; }
.bp .utabs__list [role="tab"][aria-selected="true"] i { color: var(--teal-d); }
.bp .utabs__list:not(.is-inked) [role="tab"][aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--teal-d); }
.bp .utabs__ink { background: var(--teal-d); }
.bp .utabs__panel { padding-top: 18px; }
.bp .utabs__panel .dots li:first-child { margin-top: 0; }
.bp .utabs__panel .tag { margin-top: 12px; }
.bp .scard__link { margin-top: 24px; }

/* flow nodes light in sequence as the panel scrolls (work.js); static and fully lit otherwise */
.bp .flow li { transition: background-color .45s, border-color .45s, box-shadow .45s, opacity .45s; }
.bp .flow.is-anim li:not(.is-lit) { opacity: .5; }
.bp .flow.is-anim li:not(.is-lit)::before { background: #9fb3b4; }
.bp .flow li.is-lit:not(.flow__split) { border-color: rgba(7,94,99,.45); box-shadow: 0 6px 18px rgba(7,94,99,.14); }
.flow__br { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.flow__br em { font-style: normal; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.flow__br .lo { background: rgba(217,163,22,.22); color: var(--gold-l); }
.flow__br .hi { background: rgba(60,195,197,.2); color: #7fdcdd; }

/* =====================================================================
   IMAGE ROUND: photo frames, image-topped cards, banners (all pages in the group)
   TODO(replace-before-launch): photos from /assets/img/temp-pinterest/ are unlicensed placeholders.
   ===================================================================== */
.wimg { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line-2); background: #151516; aspect-ratio: 4 / 3; isolation: isolate; }
.wimg--16x10 { aspect-ratio: 16 / 10; } .wimg--16x9 { aspect-ratio: 16 / 9; } .wimg--21x9 { aspect-ratio: 21 / 9; } .wimg--4x5 { aspect-ratio: 4 / 5; }
.wimg > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.wimg::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,15,16,0) 50%, rgba(15,15,16,.45)), radial-gradient(80% 70% at 0% 0%, rgba(20,154,157,.12), transparent 70%); }
.wimg__cap { position: absolute; left: 14px; bottom: 12px; right: 14px; z-index: 2; font-size: var(--fs-xs); font-weight: 600; color: #e8e8e6; }
/* motion (work.js adds .wimg-anim to <html>): clip reveal + slight parallax on the photo */
.wimg-anim [data-wimg] { clip-path: inset(10% 6% 10% 6% round var(--r)); transition: clip-path 1.1s var(--ease); }
.wimg-anim [data-wimg].is-in { clip-path: inset(0 0 0 0 round var(--r)); }
.wimg-anim [data-wimg] > img { transform: translateY(var(--wpy, 0px)) scale(1.1); transition: transform .2s linear; }

/* HRive overview: photo above the fact rows */
.ovside { display: grid; gap: 20px; }
/* HRive challenge: photo inside the sticky intro */
.chal__intro .wimg { margin-top: 24px; }
/* HRive modules: photo fills the sixth cell (3 + 3 layout) */
.mods .card:nth-child(4), .mods .card:nth-child(5) { grid-column: span 2; }
.mods .wimg { grid-column: span 2; aspect-ratio: auto; min-height: 220px; }
/* FAQ intro photo */
.faq__grid .wimg { margin-top: 28px; }

/* /work/ blueprint covers: photo under the flow chips */
.wcard__cover--photo { background: #151516; }
.wcard__cover--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); transform-origin: 50% 50%; }
.wcard__cover--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,14,15,.72), rgba(14,14,15,.1) 70%); }
.wcard__cover--photo .wflow { position: relative; z-index: 1; max-width: 60%; gap: 5px; }
.wcard__cover--photo .wflow li { padding: 5px 10px; background: rgba(14,14,15,.62); color: #fff; border-color: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.wcard__cover--photo .wflow li:nth-child(even) { margin-left: 14px; }
.wcard__cover--photo .wflow .is-key { background: rgba(217,163,22,.9); color: #1a1300; }
a.wcard:hover .wcard__cover--photo > img { transform: scale(1.05); }
a.wcard:hover .wcard__cover--photo > .wflow { transform: none; }

/* /solution-blueprints/: wide banner above each blueprint card; interpretation head + photo */
.bp__img { margin-bottom: 20px; }
.bp__img::after { background: linear-gradient(90deg, rgba(15,15,16,.35), rgba(15,15,16,0) 60%), linear-gradient(180deg, rgba(15,15,16,0) 55%, rgba(15,15,16,.4)); }
.starthead { align-items: center; margin-bottom: clamp(32px, 4vw, 48px); }
.starthead .sec-head { margin-bottom: 0; }

/* /work/monetiq/: hero photo, prep photo, image-topped related cards */
.mphoto figcaption { margin-top: 12px; font-size: var(--fs-xs); color: var(--ink-3); }
.mphoto figcaption i { color: var(--gold-l); margin-right: 6px; }
.prep .wimg { margin-top: 26px; }
.rcard__img { margin: -8px -8px 22px; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; position: relative; background: #151516; }
.rcard__img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.rcard__img .browser { position: absolute; inset: 14px 14px 0; border-radius: 10px 10px 0 0; box-shadow: 0 14px 34px rgba(7,40,42,.22); }
.rcard__img .browser img { position: static; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; }
.rcard__img--shot { background: linear-gradient(145deg, #e7e6e2, #bcbbb6); }
a.card:hover .rcard__img > img { transform: scale(1.04); }

@media (max-width: 960px) {
  .mods .card:nth-child(4), .mods .card:nth-child(5) { grid-column: auto; }
  .mods .wimg { grid-column: auto; min-height: 200px; }
}
@media (max-width: 767px) {
  .mods .wimg { min-height: 0; aspect-ratio: 16 / 10; }
  .wimg--21x9 { aspect-ratio: 16 / 9; }
  .wcard__cover--photo .wflow { max-width: 72%; }
}
@media (prefers-reduced-motion: reduce) {
  .wimg-anim [data-wimg] { clip-path: none; transition: none; }
  .wimg-anim [data-wimg] > img, .rcard__img > img, .wcard__cover--photo > img { transform: none; transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .arch { grid-template-columns: 1fr 1fr; }
  .arch li:nth-child(2)::after { display: none; }
  .chal { grid-template-columns: 1fr; }
  .chal__intro { position: static; }
  .bp .scard { grid-template-columns: minmax(0, 1fr); }
  .bplay { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .ltime { grid-template-columns: 1fr; gap: 28px; padding-left: 0; }
  .ltime::before, .ltime::after { left: 23px; right: auto; top: 24px; bottom: 24px; width: 2px; height: auto; }
  .ltime::after { transform-origin: 50% 0; transform: scaleY(var(--p)); background: linear-gradient(180deg, var(--teal-l), var(--gold)); }
  .ltime li { text-align: left; display: grid; grid-template-columns: 48px 1fr; column-gap: 18px; }
  .ltime li::before { grid-row: 1 / span 3; margin: 0; }
  .prep { grid-template-columns: 1fr; }
  .hshot .shot { transform: none; }
  .mods { grid-template-columns: 1fr 1fr; }
  .mods .card, .mods .card:nth-child(4) { grid-column: auto; }
}
@media (max-width: 767px) {
  .arch { grid-template-columns: 1fr; gap: 16px; }
  .arch li:not(:last-child)::after { display: block; top: auto; bottom: -14px; right: auto; left: 28px; transform: rotate(135deg); }
  .arch li:nth-child(2)::after { display: block; }
  .secnotes, .vs, .chal__grid, .mods { grid-template-columns: 1fr; }
  .mods .card:nth-child(5) { grid-column: auto; }
  .chal__grid .card { min-height: 0; }
  .mrail { grid-auto-columns: 85%; }
  .mshot { padding: 10px; border-radius: 16px; }
  .hcover.shot { padding: 10px; border-radius: 16px; }
  .wcard__cover { padding: 14px 14px 0; }
  .wflow { gap: 5px; }
  .wflow li { padding: 5px 10px; }
  .prep__list li { grid-template-columns: 34px 1fr; padding: 14px; }
  .bp .utabs__list [role="tab"] i { display: none; }
  .prep__list li > i { width: 34px; height: 34px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .wcard__cover > *, .ltime li, .ltime li::before, .bp .flow li { transition: none; }
  a.wcard:hover .wcard__cover > * { transform: none; }
}

/* =====================================================================
   VISUAL ROUND (work group): cinematic heroes, large media, collages.
   Shared components (phero--cinema, collage, bigsplit, imarquee, pcard) live in site.css.
   ===================================================================== */

/* /work/hrive/ hero: a tilted, slowly drifting wall of the real HRive screens (sample data) */
.phero--wall .phero__bg { background: #0a0f10; }
.hwall { position: absolute; inset: -18% -12%; display: grid; align-content: center; gap: clamp(14px, 1.6vw, 22px);
  transform: perspective(1600px) rotateX(18deg) rotateZ(-7deg) scale(1.02); transform-origin: 50% 40%; }
.hwall__row { overflow: visible; }
.hwall__track { display: flex; gap: clamp(14px, 1.6vw, 22px); width: max-content; animation: hwall 90s linear infinite; }
.hwall__row:nth-child(2) .hwall__track { animation-direction: reverse; animation-duration: 110s; margin-left: -260px; }
.hwall__row:nth-child(3) .hwall__track { animation-duration: 100s; margin-left: -120px; }
.hwall__shot { flex: none; width: clamp(300px, 34vw, 520px); aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #e9ecef;
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.hwall__shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; filter: saturate(.8) brightness(.9); }
@keyframes hwall { to { transform: translateX(-50%); } }
/* extra grade on top of the shared shade: the white screens need more darkening than a photo */
.phero--wall .phero__shade { background:
  radial-gradient(55% 50% at 50% 50%, rgba(6,12,13,.78), rgba(6,12,13,.35) 80%),
  radial-gradient(55% 70% at 8% 100%, rgba(7,94,99,.55), transparent 70%),
  linear-gradient(180deg, rgba(8,12,13,.82) 0%, rgba(7,16,18,.62) 40%, rgba(6,23,25,.84) 80%, var(--bg) 100%); }

/* /work/hrive/ large screen that overlaps the hero bottom */
.hshow { position: relative; z-index: 2; overflow-x: clip; padding-top: 40px; margin-bottom: -40px; margin-top: clamp(-190px, -11.5vw, -100px); }
.hshow__fig { margin: 0 auto; max-width: 1180px; position: relative; }
.hshow__fig::before { content: ""; position: absolute; inset: -40px -30px; z-index: -1; border-radius: 48px;
  background: radial-gradient(60% 60% at 50% 45%, rgba(20,154,157,.28), transparent 70%); filter: blur(28px); }
.hshow__fig .browser { border-radius: 16px; box-shadow: 0 50px 120px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06); }
.hshow__fig img { display: block; width: 100%; height: auto; }
.hshow__fig figcaption { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 14px; text-align: center; }
.hshow-anim [data-hshow] { transform: perspective(1400px) rotateX(14deg) scale(.94); transform-origin: 50% 100%; opacity: .6; transition: transform 1.2s var(--ease), opacity 1.2s var(--ease); }
.hshow-anim [data-hshow].is-in { transform: none; opacity: 1; }

/* HRive: bigger screens in the sideways rail */
.mrail--big { grid-auto-columns: clamp(280px, 56vw, 760px); gap: 24px; }
.mrail--big .mshot { padding: clamp(12px, 1.6vw, 22px); }

@media (max-width: 767px) {
  .hwall { inset: -10% -60%; transform: perspective(1200px) rotateX(16deg) rotateZ(-8deg); }
  .hwall__shot { width: 240px; }
  .hshow { margin-top: -80px; }
  .mrail--big { grid-auto-columns: calc(100vw - 64px); }
}
@media (prefers-reduced-motion: reduce) {
  .hwall__track { animation: none; }
  .hshow-anim [data-hshow] { transform: none; opacity: 1; transition: none; }
}
.phero--cinema .phero__meta { text-align: center; }

/* HRive tour: a sticky, heavily graded photo behind the pinned screens (Elexoft feature pattern), wider screens */
#tour { position: relative; isolation: isolate; overflow-x: clip; }
.tourbg { position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; z-index: -1; overflow: hidden; pointer-events: none; }
.tourbg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.6) brightness(.5); }
.tourbg::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, var(--bg) 0%, rgba(8,12,13,.55) 22%, rgba(8,14,15,.72) 78%, var(--bg) 100%),
  radial-gradient(60% 60% at 30% 55%, rgba(7,94,99,.35), transparent 70%); }
#tour .wrap { max-width: 1320px; }
#tour .tour__stop { grid-template-columns: 1.75fr .65fr; }
#tour .tour__shot { box-shadow: 0 40px 100px -30px rgba(0,0,0,.8); }
@media (max-width: 960px) { #tour .tour__stop { grid-template-columns: 1fr; } }

/* /work/: marquee strip under the hero, FAQ collage */
.wk-mq { padding-top: clamp(28px, 4vw, 48px); padding-bottom: 0; }
.wk-faqcol { margin-top: 32px; --u: clamp(26px, 2.4vw, 34px); gap: 12px; }

/* /work/monetiq/: hero photo note, collage in the prep card */
.mq-note { position: relative; margin-top: 24px; text-align: center; font-size: var(--fs-xs); color: rgba(245,245,244,.7); }
.mq-note i { color: var(--gold-l); margin-right: 6px; }
.prep .mq-col { margin-top: 28px; --u: clamp(34px, 3.2vw, 48px); }
.mq-cap { margin-top: 12px; font-size: var(--fs-xs); color: var(--ink-3); }
.mq-cap i { color: var(--gold-l); margin-right: 6px; }
.prep { grid-template-columns: 1.1fr .9fr; align-items: center; }

/* /solution-blueprints/: key-controls marquee, interpretation collage */
.bp-mq { padding-top: 0; }
.starthead .bp-col { --u: clamp(34px, 3.4vw, 52px); }
/* busy hero photos (node graph with labels): soften and darken behind the centred text */
.phero--busy .phero__bg > img { filter: saturate(.7) brightness(.8) blur(1.5px); }
.phero--busy .phero__shade::after { content: ""; position: absolute; inset: 0; background: radial-gradient(46% 42% at 50% 55%, rgba(6,12,13,.6), transparent 85%); }