/* ============================================================
   DIGIBRO — Work hub + project singles. v6 design system.

   Scope: body.digibro-work (the /work/ hub AND every /work/<slug>/).
   Mirrors digibro-industry.css: the v6 tokens are re-declared here so
   the page does not inherit the v5 homepage values, while the header,
   footer, drawer and mobile CTA keep their v5 values.

   Light only, by decision (2026-09-07). Dark bands are design.
   ============================================================ */

/* ---------- v6 tokens ---------- */
body.digibro-work{
  --blue:#0600F0; --blue-deep:#0400B4; --blue-soft:#ECEBFF;
  --accent:#0A9F6E; --accent-deep:#07805A; --accent-soft:#E6F6F0;
  --amber:#C2410C; --amber-soft:#FDEEE6;
  --ink:#0B0B14; --body:#33334A; --muted:#61617A;
  --paper:#FFFFFF; --paper-2:#F7F8FA; --paper-3:#EFF1F5;
  --line:#E2E5EC; --line-strong:#CBD0DA;
  --dark:#0B0B14; --dark-2:#15151F; --dark-line:#2A2A3A;
  --on-dark:#E7E7F0; --on-dark-muted:#A0A0B8;
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --shadow:0 1px 2px rgba(11,11,20,.06),0 8px 24px rgba(11,11,20,.06);
  --wrap:1180px;
}
/* the site chrome stays on v5 values */
body.digibro-work #hdr,
body.digibro-work .top,
body.digibro-work #drawer,
body.digibro-work .site-foot,
body.digibro-work .mobile-cta{
  --ink:#0B0B12; --body:#4C4C58; --line:#E4E6EC; --blue-soft:#EFEEFF;
}

/* ---------- base ---------- */
.digibro-work .site-content,
.digibro-work main{background:var(--paper)}
.digibro-work .e-con,
.digibro-work .elementor-widget{color:var(--body)}
.digibro-work{font-size:16px;line-height:1.62}
.digibro-work .elementor-heading-title{color:var(--ink);font-weight:700;
  letter-spacing:-.026em;line-height:1.14;margin:0;text-wrap:balance}
.digibro-work h1.elementor-heading-title{font-size:clamp(2.05rem,4.4vw,3.3rem)}
.digibro-work h2.elementor-heading-title{font-size:clamp(1.6rem,3vw,2.3rem)}
.digibro-work h3.elementor-heading-title{font-size:1.12rem;line-height:1.3}
.digibro-work .elementor-widget-text-editor p{margin:0}
.digibro-work a{color:var(--blue);text-decoration:none}
.digibro-work a:hover{text-decoration:underline}

/* ---------- layout ---------- */
.digibro-work .e-con.wrap,
.digibro-work .e-con.wrap>.e-con-inner{width:100%;max-width:var(--wrap);
  margin-inline:auto;padding-inline:24px}
.digibro-work .e-con.sec{padding-block:84px;border-top:1px solid var(--line)}
.digibro-work .e-con.sec.tint{background:var(--paper-2)}
.digibro-work .e-con.sec.dark{background:var(--dark);border-top-color:var(--dark-line)}
.digibro-work .e-con.hero{padding-block:34px 64px;border-top:0}
.digibro-work .e-con.col{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.digibro-work .e-con.row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.digibro-work .e-con.grid{display:grid;gap:20px}
.digibro-work .e-con.grid.g2{grid-template-columns:repeat(2,1fr)}
.digibro-work .e-con.grid.g3{grid-template-columns:repeat(3,1fr)}
.digibro-work .e-con.grid.g4{grid-template-columns:repeat(4,1fr)}
.digibro-work .e-con.head{display:flex;flex-direction:column;align-items:flex-start;
  gap:16px;max-width:760px;margin-bottom:40px}
.digibro-work .e-con.head.center{margin-inline:auto;text-align:center;align-items:center}

/* ---------- bridge classes (native Elementor widgets) ---------- */
.digibro-work .dw-eyebrow .elementor-heading-title{display:inline-flex;align-items:center;
  gap:8px;background:var(--accent-soft);color:var(--accent-deep);font-size:.76rem;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:6px 12px;
  border-radius:999px;line-height:1.4}
.digibro-work .dark .dw-eyebrow .elementor-heading-title{background:rgba(18,185,129,.14);color:#8CE8C4}
.digibro-work .dw-lede{font-size:1.06rem;color:var(--muted);max-width:66ch}
.digibro-work .dark .dw-lede{color:var(--on-dark-muted)}
.digibro-work .dw-note{font-size:.86rem;color:var(--muted)}
.digibro-work .dark .dw-note{color:var(--on-dark-muted)}
.digibro-work .dark .elementor-heading-title{color:#fff}
.digibro-work .dw-btn .elementor-button{display:inline-flex;align-items:center;justify-content:center;
  gap:8px;background:var(--blue);color:#fff;border:1px solid var(--blue);border-radius:var(--r-sm);
  font-size:.95rem;font-weight:600;padding:13px 22px;line-height:1.2;transition:background .15s ease}
.digibro-work .dw-btn .elementor-button:hover{background:var(--blue-deep);text-decoration:none}
.digibro-work .dw-btn.outline .elementor-button{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.digibro-work .dw-btn.outline .elementor-button:hover{background:var(--paper-2);border-color:var(--ink)}
.digibro-work .dark .dw-btn.outline .elementor-button{color:#fff;border-color:var(--dark-line);background:transparent}
.digibro-work .dark .dw-btn.outline .elementor-button:hover{background:rgba(255,255,255,.06)}
.digibro-work .dw-btn.accent .elementor-button{background:var(--accent);border-color:var(--accent)}
.digibro-work .dw-btn.accent .elementor-button:hover{background:var(--accent-deep)}
.digibro-work .e-con.card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;height:100%}
.digibro-work .dark .e-con.card{background:var(--dark-2);border-color:var(--dark-line)}
.digibro-work .dark .e-con.card .elementor-widget-text-editor{color:var(--on-dark-muted)}

/* ---------- breadcrumb ---------- */
.digibro-work .crumb{font-size:.86rem;color:var(--muted);padding-block:18px 0}
.digibro-work .crumb a{color:var(--muted)}
.digibro-work .crumb a:hover{color:var(--blue)}
.digibro-work .crumb .cur{color:var(--ink);font-weight:600}

/* ---------- hero proof strip ---------- */
.digibro-work .wk-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);width:100%}
.digibro-work .wk-proof div{padding:20px 22px;border-left:1px solid var(--line)}
.digibro-work .wk-proof div:first-child{border-left:0}
.digibro-work .wk-proof b{display:block;font-size:1.9rem;line-height:1.1;color:var(--ink);
  letter-spacing:-.03em;font-weight:700}
.digibro-work .wk-proof span{display:block;margin-top:6px;font-size:.84rem;color:var(--muted)}

/* ============================================================
   FILTER BAR
   ============================================================ */
.digibro-work .wk-filterbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-block:1px solid var(--line);margin-bottom:32px}
.digibro-work .wk-filterbar-in{max-width:var(--wrap);margin-inline:auto;padding:16px 24px;
  display:flex;flex-direction:column;gap:14px}
.digibro-work .wk-frow{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.digibro-work .wk-frow.between{justify-content:space-between}

.digibro-work .wk-search{position:relative;flex:1 1 260px;min-width:220px}
.digibro-work .wk-search input{width:100%;font:inherit;font-size:.94rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:11px 38px 11px 38px;line-height:1.3}
.digibro-work .wk-search input:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.digibro-work .wk-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--muted);pointer-events:none}
.digibro-work .wk-search button{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:1.1rem;
  line-height:1;padding:6px;border-radius:6px}
.digibro-work .wk-search button:hover{color:var(--ink);background:var(--paper-3)}
.digibro-work .wk-search button[hidden]{display:none}

.digibro-work .wk-chip{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:.88rem;
  font-weight:600;color:var(--body);background:var(--paper);border:1px solid var(--line-strong);
  border-radius:999px;padding:8px 15px;cursor:pointer;line-height:1.3;
  transition:background .14s ease,border-color .14s ease,color .14s ease}
.digibro-work .wk-chip:hover{border-color:var(--ink);color:var(--ink)}
.digibro-work .wk-chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.digibro-work .wk-chip .n{font-size:.76rem;font-weight:700;opacity:.62}
.digibro-work .wk-chip[aria-pressed="true"] .n{opacity:.8}

.digibro-work .wk-select{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;color:var(--muted)}
.digibro-work .wk-select select{font:inherit;font-size:.88rem;font-weight:600;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:8px 30px 8px 12px;cursor:pointer;line-height:1.3;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2361617A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:11px}
.digibro-work .wk-select select:focus{outline:2px solid var(--blue);outline-offset:1px}

.digibro-work .wk-seg{display:inline-flex;background:var(--paper-3);border-radius:999px;padding:3px}
.digibro-work .wk-seg button{font:inherit;font-size:.84rem;font-weight:600;color:var(--muted);
  background:transparent;border:0;border-radius:999px;padding:7px 14px;cursor:pointer;line-height:1.3}
.digibro-work .wk-seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink);
  box-shadow:0 1px 2px rgba(11,11,20,.1)}

.digibro-work .wk-count{font-size:.86rem;color:var(--muted)}
.digibro-work .wk-count b{color:var(--ink);font-weight:700}
.digibro-work .wk-reset{font:inherit;font-size:.84rem;font-weight:600;color:var(--blue);
  background:transparent;border:0;cursor:pointer;padding:6px 2px;text-decoration:underline}
.digibro-work .wk-reset[hidden]{display:none}

/* ============================================================
   LISTING GRID + CARD
   ============================================================ */
.digibro-work .jet-listing-grid__items{display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;margin:0!important;width:100%!important}
.digibro-work .jet-listing-grid__items>.jet-listing-grid__item{width:auto!important;
  max-width:none!important;padding:0!important;margin:0!important}
.digibro-work .jet-listing-grid,
.digibro-work .jet-listing-grid__slider{width:100%}
.digibro-work .wk-card[hidden]{display:none!important}

.digibro-work .wk-card{display:flex;flex-direction:column;height:100%;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .16s ease,box-shadow .16s ease}
.digibro-work .wk-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}

.digibro-work .wk-cover{position:relative;display:block;aspect-ratio:1/1;
  background:var(--cov,var(--paper-3));overflow:hidden}
.digibro-work .wk-cover:hover{text-decoration:none}
.digibro-work .wk-cover svg{display:block;width:100%;height:100%;object-fit:cover}
.digibro-work .wk-cover-fallback{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;font-size:2.4rem;font-weight:700;letter-spacing:-.04em;color:#fff;
  background:var(--cov,#0B0B14)}
.digibro-work .wk-cover img{display:block;width:100%;height:100%;object-fit:cover}

/* status/demo ribbons removed 10 Sep 2026 — the covers read cleaner without them.
   Delivery status still shows on the project's own page sidebar. */

.digibro-work .wk-body{display:flex;flex-direction:column;gap:12px;padding:22px 22px 0;flex:1}
.digibro-work .wk-title{font-size:1.12rem;line-height:1.3;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);margin:0}
.digibro-work .wk-title a{color:inherit}
.digibro-work .wk-title a:hover{color:var(--blue);text-decoration:none}
.digibro-work .wk-meta{font-size:.8rem;color:var(--muted);margin:-6px 0 0}
.digibro-work .wk-sum{font-size:.95rem;color:var(--body);margin:0}

.digibro-work .wk-stack{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.digibro-work .wk-stack li{font-size:.72rem;font-weight:600;letter-spacing:.02em;color:var(--muted);
  background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:4px 8px;line-height:1.3}

.digibro-work .wk-foot{display:flex;gap:8px;padding:18px 22px 22px;margin-top:16px}
.digibro-work .wk-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:.87rem;font-weight:600;padding:10px 14px;border-radius:var(--r-sm);line-height:1.2;
  background:var(--blue);color:#fff;border:1px solid var(--blue)}
.digibro-work .wk-btn:hover{background:var(--blue-deep);text-decoration:none;color:#fff}
.digibro-work .wk-btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.digibro-work .wk-btn.ghost:hover{background:var(--paper-2);border-color:var(--ink);color:var(--ink)}

/* empty state */
.digibro-work .wk-empty{display:none;border:1px dashed var(--line-strong);border-radius:var(--r-lg);
  padding:48px 24px;text-align:center;color:var(--muted);background:var(--paper-2)}
.digibro-work .wk-empty.on{display:block}
.digibro-work .wk-empty b{display:block;color:var(--ink);font-size:1.06rem;margin-bottom:6px}

/* ============================================================
   PROJECT SINGLE
   ============================================================ */
.digibro-work .wk-single-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;width:100%}
.digibro-work .wk-shot{border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--paper-3);width:100%}
.digibro-work .wk-shot svg,
.digibro-work .wk-shot img{display:block;width:100%;height:auto}
.digibro-work .wk-factbar{display:grid;grid-template-columns:repeat(4,1fr);gap:0;width:100%;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);margin:0}
.digibro-work .wk-factbar div{padding:18px 20px;border-left:1px solid var(--line)}
.digibro-work .wk-factbar div:first-child{border-left:0}
.digibro-work .wk-factbar dt{font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin:0 0 5px}
.digibro-work .wk-factbar dd{margin:0;font-size:.98rem;font-weight:600;color:var(--ink)}
.digibro-work .wk-scope{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;width:100%}
.digibro-work .wk-scope li{position:relative;padding-left:26px;font-size:1rem;color:var(--body)}
.digibro-work .wk-scope li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:2px;
  background:var(--blue);border-radius:2px}
.digibro-work .wk-outcomes{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;width:100%}
.digibro-work .wk-outcomes div{border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;background:var(--paper)}
.digibro-work .wk-outcomes b{display:block;font-size:1.8rem;line-height:1.1;letter-spacing:-.03em;color:var(--ink)}
.digibro-work .wk-outcomes span{display:block;margin-top:5px;font-size:.84rem;color:var(--muted)}
.digibro-work .wk-nextprev{display:flex;justify-content:space-between;gap:16px;width:100%;flex-wrap:wrap}
.digibro-work .wk-nextprev a{display:inline-flex;flex-direction:column;gap:3px;font-size:.95rem;font-weight:600;color:var(--ink)}
.digibro-work .wk-nextprev a small{font-size:.74rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.digibro-work .wk-nextprev a:hover{color:var(--blue);text-decoration:none}

/* ---------- specificity guards (v5 heading rules are 0,2,2) ---------- */
.digibro-work .elementor-widget-heading h1.elementor-heading-title{font-size:clamp(2.05rem,4.4vw,3.3rem)}
.digibro-work .elementor-widget-heading h2.elementor-heading-title{font-size:clamp(1.6rem,3vw,2.3rem)}
.digibro-work .elementor-widget-heading h3.elementor-heading-title{font-size:1.12rem}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .digibro-work .jet-listing-grid__items{grid-template-columns:repeat(2,1fr)}
  .digibro-work .e-con.grid.g4{grid-template-columns:repeat(2,1fr)}
  .digibro-work .e-con.grid.g3{grid-template-columns:repeat(2,1fr)}
  .digibro-work .wk-single-hero{grid-template-columns:1fr;gap:32px}
  .digibro-work .wk-proof,
  .digibro-work .wk-factbar{grid-template-columns:repeat(2,1fr)}
  .digibro-work .wk-proof div:nth-child(3),
  .digibro-work .wk-factbar div:nth-child(3){border-left:0}
  .digibro-work .wk-proof div:nth-child(n+3),
  .digibro-work .wk-factbar div:nth-child(n+3){border-top:1px solid var(--line)}
  .digibro-work .e-con.sec{padding-block:64px}
}
@media (max-width:700px){
  .digibro-work .jet-listing-grid__items{grid-template-columns:1fr}
  .digibro-work .e-con.grid.g2,
  .digibro-work .e-con.grid.g3,
  .digibro-work .e-con.grid.g4{grid-template-columns:1fr}
  .digibro-work .wk-filterbar{position:static;backdrop-filter:none}
  .digibro-work .wk-frow.between{align-items:flex-start;flex-direction:column;gap:10px}
  .digibro-work .e-con.sec{padding-block:52px}
}
@media (max-width:560px){
  .digibro-work .wk-proof,
  .digibro-work .wk-factbar{grid-template-columns:1fr}
  .digibro-work .wk-proof div,
  .digibro-work .wk-factbar div{border-left:0;border-top:1px solid var(--line)}
  .digibro-work .wk-proof div:first-child,
  .digibro-work .wk-factbar div:first-child{border-top:0}
  .digibro-work .wk-foot{flex-direction:column}
  .digibro-work .wk-chips-scroll{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;
    -webkit-overflow-scrolling:touch}
  .digibro-work .wk-chips-scroll .wk-chip{flex:0 0 auto}
}

@media (prefers-reduced-motion:reduce){
  .digibro-work *{transition:none!important;animation:none!important}
}

/* ============================================================
   FAQ (authored as <details> markup in an Elementor HTML widget)
   ============================================================ */
.digibro-work .wk-faq{display:flex;flex-direction:column;gap:10px;width:100%;max-width:820px}
.digibro-work .wk-faq details{border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper)}
.digibro-work .wk-faq summary{list-style:none;cursor:pointer;font-size:1.02rem;font-weight:600;
  color:var(--ink);padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.digibro-work .wk-faq summary::-webkit-details-marker{display:none}
.digibro-work .wk-faq summary::after{content:"+";font-size:1.3rem;font-weight:400;color:var(--muted);line-height:1}
.digibro-work .wk-faq details[open] summary::after{content:"\2212"}
.digibro-work .wk-faq summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.digibro-work .wk-faq details[open] summary{border-bottom:1px solid var(--line)}
.digibro-work .wk-faq .a{padding:16px 22px 20px;color:var(--body);font-size:.98rem}
.digibro-work .wk-faq .a p{margin:0 0 10px}
.digibro-work .wk-faq .a p:last-child{margin:0}

/* ------------------------------------------------------------
   Listing item plumbing.

   The card lives inside: .jet-listing-grid__item > .e-con.wkcard-wrap
   > .elementor-widget-shortcode > .elementor-widget-container
   > .elementor-shortcode > article.wk-card

   digibro-v5's `.digibro-page .e-con{display:block}` reset kills the
   flex chain, so every level is re-declared here at higher specificity.
   Without this the cards do not stretch to equal height in a row.
   ------------------------------------------------------------ */
.digibro-work .jet-listing-grid__items>.jet-listing-grid__item{display:flex}
.digibro-work .e-con.wkcard-wrap{display:flex;flex-direction:column;width:100%;
  padding:0;margin:0;--gap:0px}
.digibro-work .wkcard-wrap>.elementor-widget-shortcode,
.digibro-work .wkcard-wrap .elementor-widget-container,
.digibro-work .wkcard-wrap .elementor-shortcode{display:flex;flex-direction:column;
  flex:1 1 auto;width:100%;min-width:0}

/* ============================================================
   PROJECT SINGLE — plain-markup layout

   The single is rendered through the_content (see digibro-work.php),
   not through Elementor, so it cannot use the .e-con.* classes. These
   wk-* classes are the same v6 rhythm expressed on plain elements.
   The final CTA is a rounded dark card rather than a full-bleed band,
   because the content sits inside Astra's container.
   ============================================================ */
.digibro-work .wk-page{display:flex;flex-direction:column;width:100%}
.digibro-work .wk-page>section{padding-block:56px;border-top:1px solid var(--line)}
.digibro-work .wk-page>section:first-of-type{padding-block:8px 48px;border-top:0}
.digibro-work .wk-col{display:flex;flex-direction:column;align-items:flex-start;gap:20px;width:100%}
.digibro-work .wk-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.digibro-work .wk-h1{font-size:clamp(2rem,4.2vw,3rem);font-weight:700;letter-spacing:-.026em;
  line-height:1.14;color:var(--ink);margin:0;text-wrap:balance}
.digibro-work .wk-h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700;letter-spacing:-.026em;
  line-height:1.18;color:var(--ink);margin:0 0 4px}
.digibro-work .wk-eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);
  color:var(--accent-deep);font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;line-height:1.4}
.digibro-work .wk-lede{font-size:1.06rem;color:var(--muted);max-width:66ch;margin:0}
.digibro-work .wk-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--blue);color:#fff;border:1px solid var(--blue);border-radius:var(--r-sm);
  font-size:.95rem;font-weight:600;padding:13px 22px;line-height:1.2}
.digibro-work .wk-cta:hover{background:var(--blue-deep);color:#fff;text-decoration:none}
.digibro-work .wk-cta.accent{background:var(--accent);border-color:var(--accent)}
.digibro-work .wk-cta.accent:hover{background:var(--accent-deep)}
.digibro-work .wk-cta.outline{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.digibro-work .wk-cta.outline:hover{background:var(--paper-2);border-color:var(--ink);color:var(--ink)}
.digibro-work .wk-ctacard{background:var(--dark);border-radius:var(--r-lg);padding:44px;
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;width:100%}
.digibro-work .wk-ctacard .wk-h2{color:#fff}
.digibro-work .wk-ctacard .wk-lede{color:var(--on-dark-muted)}
.digibro-work .wk-ctacard .wk-eyebrow{background:rgba(18,185,129,.14);color:#8CE8C4}
.digibro-work .wk-ctacard .wk-cta.outline{color:#fff;border-color:var(--dark-line)}
.digibro-work .wk-ctacard .wk-cta.outline:hover{background:rgba(255,255,255,.06);color:#fff}
.digibro-work .wk-body-copy{font-size:1.02rem;color:var(--body);max-width:70ch}
.digibro-work .wk-body-copy h2{font-size:1.5rem;margin:32px 0 12px;color:var(--ink)}
.digibro-work .wk-body-copy h3{font-size:1.15rem;margin:24px 0 8px;color:var(--ink)}
.digibro-work .wk-body-copy p{margin:0 0 14px}
@media (max-width:700px){
  .digibro-work .wk-page>section{padding-block:44px}
  .digibro-work .wk-ctacard{padding:28px}
}

/* ============================================================
   PROJECT SINGLE — Astra template-detail layout

   Reference: wpastra.com/website-templates/<template>
   title band → framed preview + actions → story/sidebar split
   → page-screenshot grid → CTA → more work

   The page renders inside Astra's content column, so bands are
   rounded blocks rather than full-bleed strips.
   ============================================================ */
.digibro-work .wk-detail>section{padding-block:56px;border-top:1px solid var(--line)}
.digibro-work .wk-detail>section:first-of-type{border-top:0}
.digibro-work .wk-narrow{max-width:780px;margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px}
.digibro-work .wk-narrow .crumb{padding:0;order:-1}
.digibro-work .wk-narrow .wk-lede{margin-inline:auto}
.digibro-work .wk-note{font-size:.92rem;color:var(--amber);background:var(--amber-soft);
  border-radius:999px;padding:8px 16px;margin:0}

/* ---------- title band ---------- */
.digibro-work .wk-titleband{background:var(--paper-2);border-radius:var(--r-lg);
  padding:44px 28px!important;margin-bottom:8px}

/* ---------- framed preview ---------- */
.digibro-work .wk-preview{margin:0;border:1px solid var(--line-strong);border-radius:var(--r-lg);
  overflow:hidden;background:var(--paper);box-shadow:var(--shadow);position:relative}
.digibro-work .wk-preview-img{display:block;width:100%;height:auto}
.digibro-work .wk-preview-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  padding:16px;border-top:1px solid var(--line);background:var(--paper)}

/* ---------- story / sidebar split ---------- */
.digibro-work .wk-split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.digibro-work .wk-main{display:flex;flex-direction:column;gap:20px;min-width:0}
.digibro-work .wk-main .wk-h2{margin-top:14px}
.digibro-work .wk-side{display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--paper);position:sticky;top:24px}
.digibro-work .wk-side-block{padding:18px 20px;border-top:1px solid var(--line)}
.digibro-work .wk-side-block:first-child{border-top:0}
.digibro-work .wk-side-block h3{font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.digibro-work .wk-side-block p{margin:0;font-size:.96rem;font-weight:600;color:var(--ink)}
.digibro-work .wk-side-block .wk-tags{font-weight:400;color:var(--body);font-size:.9rem;line-height:1.6}
.digibro-work .wk-chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.digibro-work .wk-chips li{font-size:.78rem;font-weight:600;color:var(--blue);
  background:var(--blue-soft);border-radius:6px;padding:5px 10px;line-height:1.3}
.digibro-work .wk-chips.soft li{background:var(--paper-2);border:1px solid var(--line);color:var(--body)}
.digibro-work .wk-chips a{color:inherit}

/* ---------- tick list ---------- */
.digibro-work .wk-ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.digibro-work .wk-ticks li{position:relative;padding-left:30px;font-size:1rem;color:var(--body)}
.digibro-work .wk-ticks li::before{content:"";position:absolute;left:0;top:.15em;width:19px;height:19px;
  border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.3l2.6 2.6L11 4.5' fill='none' stroke='%2307805A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}

/* ---------- numbered steps ---------- */
.digibro-work .wk-steps{list-style:none;counter-reset:wkstep;margin:0;padding:0;
  display:flex;flex-direction:column;gap:14px}
.digibro-work .wk-steps li{counter-increment:wkstep;position:relative;padding-left:44px;
  font-size:1rem;color:var(--body)}
.digibro-work .wk-steps li::before{content:counter(wkstep);position:absolute;left:0;top:0;
  width:30px;height:30px;border-radius:8px;background:var(--blue);color:#fff;
  font-size:.88rem;font-weight:700;display:flex;align-items:center;justify-content:center}

/* ---------- screenshot grid ---------- */
.digibro-work .wk-sechead{text-align:center;margin-bottom:28px}
.digibro-work .wk-sechead .wk-h2{margin:0}
.digibro-work .wk-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.digibro-work .wk-shot-card{margin:0;display:flex;flex-direction:column;gap:10px;text-align:center}
.digibro-work .wk-shot-card img{display:block;width:100%;height:auto;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--paper-3)}
.digibro-work .wk-shot-card a:hover img{border-color:var(--line-strong)}
.digibro-work .wk-shot-card figcaption{font-size:.92rem;font-weight:600;color:var(--ink)}

/* ---------- more work ---------- */
.digibro-work .wk-morecards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.digibro-work .wk-morecards .wk-card{height:100%}
.digibro-work .wk-morelink{text-align:center;margin:28px 0 0}
.digibro-work .wk-ctasec{border-top:0!important;padding-block:8px 56px!important}

@media (max-width:1000px){
  .digibro-work .wk-split{grid-template-columns:1fr;gap:32px}
  .digibro-work .wk-side{position:static}
  .digibro-work .wk-shots,
  .digibro-work .wk-morecards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .digibro-work .wk-shots,
  .digibro-work .wk-morecards{grid-template-columns:1fr}
  .digibro-work .wk-titleband{padding:28px 18px!important}
  .digibro-work .wk-detail>section{padding-block:40px}
}

/* Buttons in an `.e-con.row` sit side by side. Elementor gives every widget
   in a container width:100%, which stacks them even though the row is flex. */
.digibro-work .e-con.row>.elementor-widget,
.digibro-work .e-con.row>.elementor-element{width:auto;max-width:100%;flex:0 0 auto}

/* Elementor containers default to `flex-direction: var(--flex-direction)` (column),
   which wins over a plain `display:flex`. Set both, or button rows stack. */
.digibro-work .e-con.row{--flex-direction:row;--justify-content:flex-start;--align-items:center;
  --flex-wrap:wrap;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:wrap}

/* ============================================================
   Card component outside the Work pages

   The homepage keeps the v5 body class, so `body.digibro-work` never
   matches there. Repeating the token block on a plain `.digibro-work`
   element lets a section opt in: give the container that class and the
   cards inside it get the v6 palette without touching the rest of the
   page. On Work pages `body.digibro-work` is more specific and wins
   with the same values, so nothing changes there.
   ============================================================ */
.digibro-work{
  --blue:#0600F0; --blue-deep:#0400B4; --blue-soft:#ECEBFF;
  --accent:#0A9F6E; --accent-deep:#07805A; --accent-soft:#E6F6F0;
  --amber:#C2410C; --amber-soft:#FDEEE6;
  --ink:#0B0B14; --body:#33334A; --muted:#61617A;
  --paper:#FFFFFF; --paper-2:#F7F8FA; --paper-3:#EFF1F5;
  --line:#E2E5EC; --line-strong:#CBD0DA;
  --dark:#0B0B14; --dark-2:#15151F; --dark-line:#2A2A3A;
  --on-dark:#E7E7F0; --on-dark-muted:#A0A0B8;
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --shadow:0 1px 2px rgba(11,11,20,.06),0 8px 24px rgba(11,11,20,.06);
}
/* four across on the homepage strip */
.digibro-work.wk-home-grid .jet-listing-grid__items{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){
  .digibro-work.wk-home-grid .jet-listing-grid__items{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .digibro-work.wk-home-grid .jet-listing-grid__items{grid-template-columns:1fr}
}

/* ------------------------------------------------------------
   “Pages in this build” — each shot opens the live page
   ------------------------------------------------------------ */
.digibro-work .wk-shot-frame{position:relative;display:block;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);background:var(--paper-3)}
.digibro-work .wk-shot-frame img{display:block;width:100%;height:auto;border:0;border-radius:0}
.digibro-work .wk-shot-card.is-link .wk-shot-frame{transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.digibro-work .wk-shot-card.is-link .wk-shot-frame:hover,
.digibro-work .wk-shot-card.is-link .wk-shot-frame:focus-visible{border-color:var(--blue);
  box-shadow:var(--shadow);transform:translateY(-2px)}
.digibro-work .wk-shot-open{position:absolute;inset:auto 0 0 0;display:flex;align-items:center;
  justify-content:center;gap:6px;padding:11px 12px;font-size:.82rem;font-weight:600;color:#fff;
  background:rgba(11,11,20,.86);opacity:0;transform:translateY(100%);
  transition:opacity .16s ease,transform .16s ease}
.digibro-work .wk-shot-card.is-link .wk-shot-frame:hover .wk-shot-open,
.digibro-work .wk-shot-card.is-link .wk-shot-frame:focus-visible .wk-shot-open{opacity:1;transform:none}
.digibro-work .wk-shot-card figcaption a{color:inherit}
.digibro-work .wk-shot-card figcaption a:hover{color:var(--blue);text-decoration:none}
/* touch devices have no hover — keep the label visible instead */
@media (hover:none){
  .digibro-work .wk-shot-open{position:static;opacity:1;transform:none;background:var(--ink)}
}

/* ============================================================
   A SINGLE SECTION PLACED ON ITS OWN
   [digibro_project_section] inside an Elementor Shortcode widget.
   Each section then sits in its own .wk-page wrapper, so the
   ":first-of-type has no border" rule would kill every separator.
   Put it back here, and take it off the blocks that open or close
   the page.
   ============================================================ */
.digibro-work .wk-solo{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px;box-sizing:border-box}
@media (max-width:600px){.digibro-work .wk-solo{padding-inline:18px}}
.digibro-work .wk-solo>section{border-top:1px solid var(--line)}
.digibro-work .wk-solo[data-wk-section="title"]>section{border-top:0;padding-block:8px 48px}
.digibro-work .wk-solo[data-wk-section="cta"]>section{border-top:0}
.digibro-work .e-con>.e-con-inner>.elementor-widget-shortcode,
.digibro-work .e-con>.elementor-widget-shortcode{width:100%}
.digibro-work .elementor-widget-shortcode .elementor-shortcode{display:block}

/* Editor-only marker for a section whose fields are still empty. */
.wk-solo-empty{padding:14px 16px;border:1px dashed #c3c4c7;border-radius:8px;
  color:#646970;font-size:13px;background:#fff}

/* ============================================================
   WEBSITE VIDEO TOUR
   Click-to-load facade: only a thumbnail until someone presses play,
   so YouTube's player (and its cookies) never load on a page nobody
   watches. Keeps the project page fast and the Core Web Vitals clean.
   ============================================================ */
.digibro-work .wk-videosec .wk-sechead{margin-bottom:20px}
.digibro-work .wk-video{position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--dark);aspect-ratio:16/9;width:100%}
.digibro-work .wk-video-btn{position:absolute;inset:0;display:block;width:100%;height:100%;
  padding:0;margin:0;border:0;background:none;cursor:pointer;appearance:none}
.digibro-work .wk-video-thumb{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease,opacity .3s ease}
.digibro-work .wk-video-btn:hover .wk-video-thumb{transform:scale(1.03);opacity:.88}
.digibro-work .wk-video-play{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;pointer-events:none}
.digibro-work .wk-video-play svg{width:84px;height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.digibro-work .wk-yt-bg{fill:#212121;fill-opacity:.82;transition:fill .2s ease,fill-opacity .2s ease}
.digibro-work .wk-video-btn:hover .wk-yt-bg{fill:#f00;fill-opacity:1}
.digibro-work .wk-video-btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.digibro-work .wk-video-label{position:absolute;left:16px;bottom:14px;color:#fff;
  font-size:.9rem;font-weight:600;letter-spacing:.01em;pointer-events:none;
  text-shadow:0 2px 10px rgba(0,0,0,.55)}
.digibro-work .wk-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.digibro-work .wk-video-fallback{margin:12px 0 0;font-size:.9rem}
.digibro-work .wk-video-fallback a{color:var(--muted)}
@media (max-width:600px){
  .digibro-work .wk-video-play svg{width:62px}
  .digibro-work .wk-video-label{font-size:.82rem;left:12px;bottom:10px}
}

/* ============================================================
   PROJECT PAGE BUILT FROM REAL WIDGETS  (dw-*)

   The shortcode version styles plain markup (.wk-*). This block
   styles the same page when it is made of Elementor and Crocoblock
   widgets, so both builds look identical. Widget classes land on the
   OUTER wrapper, which is why almost every rule reaches down into the
   widget's own markup.
   ============================================================ */

/* ---------- title band ---------- */
.digibro-work .e-con.dw-titleband{display:flex;background:var(--paper-2);border-radius:var(--r-lg);
  padding:40px 32px 44px!important;border-top:0;text-align:center;
  --align-items:center;align-items:center}
.digibro-work .dw-crumb .jet-breadcrumbs__wrap{justify-content:center;font-size:.86rem;color:var(--muted)}
.digibro-work .dw-crumb a{color:var(--muted)}
.digibro-work .dw-h1 h1{font-size:clamp(2rem,4.2vw,3rem);font-weight:700;letter-spacing:-.026em;
  line-height:1.14;color:var(--ink);margin:0;text-wrap:balance}
.digibro-work .dw-lede,
.digibro-work .dw-lede p{font-size:1.06rem;color:var(--muted);max-width:66ch;margin:0 auto}

/* ---------- preview shot ---------- */
.digibro-work .dw-preview img{width:100%;height:auto;display:block;border-radius:var(--r-lg);
  border:1px solid var(--line);box-shadow:var(--shadow-soft)}

/* ---------- the two-column split ---------- */
.digibro-work .e-con.split{display:flex;--display:flex;--flex-direction:row;--align-items:flex-start;
  --flex-wrap:wrap;--gap:48px;flex-direction:row;align-items:flex-start;flex-wrap:wrap;gap:48px}
.digibro-work .e-con.split>.dw-main{display:flex;flex:1 1 460px;min-width:0;width:auto;--width:auto}
.digibro-work .e-con.split>.dw-side{display:flex;flex:0 0 300px;max-width:100%;width:auto;--width:auto;gap:0}
@media (max-width:1000px){
  .digibro-work .e-con.split>.dw-main,
  .digibro-work .e-con.split>.dw-side{flex:1 1 100%}
}

/* ---------- body copy ---------- */
.digibro-work .dw-body{color:var(--body)}
.digibro-work .dw-body p{margin:0 0 16px}
.digibro-work .dw-body p:last-child{margin-bottom:0}

/* ---------- repeaters: ticks, steps, stats ---------- */
.digibro-work .dw-ticks .jet-listing-dynamic-repeater__items,
.digibro-work .dw-steps .jet-listing-dynamic-repeater__items{display:flex;flex-direction:column;gap:10px;
  list-style:none;margin:0;padding:0}
.digibro-work .dw-ticks .jet-listing-dynamic-repeater__item{position:relative;padding-left:30px;
  list-style:none;color:var(--body)}
.digibro-work .dw-ticks .jet-listing-dynamic-repeater__item::before{content:"";position:absolute;
  left:0;top:.45em;width:16px;height:16px;border-radius:50%;background:var(--blue-soft);
  box-shadow:inset 0 0 0 1.5px var(--blue)}
.digibro-work .dw-ticks .jet-listing-dynamic-repeater__item::after{content:"";position:absolute;
  left:5px;top:calc(.45em + 4px);width:6px;height:3px;border-left:2px solid var(--blue);
  border-bottom:2px solid var(--blue);transform:rotate(-45deg)}
.digibro-work .dw-steps .jet-listing-dynamic-repeater__items{counter-reset:dwstep}
.digibro-work .dw-steps .jet-listing-dynamic-repeater__item{position:relative;padding-left:38px;
  list-style:none;color:var(--body);counter-increment:dwstep}
.digibro-work .dw-steps .jet-listing-dynamic-repeater__item::before{content:counter(dwstep);
  position:absolute;left:0;top:.05em;width:24px;height:24px;border-radius:50%;
  background:var(--ink);color:#fff;font-size:.78rem;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.digibro-work .dw-stats .jet-listing-dynamic-repeater__items{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;list-style:none;margin:0;padding:0}
.digibro-work .dw-stats .jet-listing-dynamic-repeater__item{list-style:none;border:1px solid var(--line);
  border-radius:var(--r-md);padding:16px 18px;background:var(--paper-2)}
.digibro-work .dw-stats b{display:block;font-size:1.7rem;font-weight:700;color:var(--ink);line-height:1.1}
.digibro-work .dw-stats span{display:block;margin-top:4px;font-size:.86rem;color:var(--muted)}

/* ---------- sidebar blocks ---------- */
.digibro-work .dw-side-block{border-top:1px solid var(--line);padding-block:16px;width:100%}
.digibro-work .dw-side>.dw-side-block:first-child{border-top:0;padding-top:0}
.digibro-work .dw-side-block h3{font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.digibro-work .dw-side-block .jet-listing-dynamic-field__content{color:var(--ink);font-weight:600}
.digibro-work .dw-chips .jet-listing-dynamic-terms{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.digibro-work .dw-chips h3{flex:1 0 100%}
.digibro-work .dw-chips .jet-listing-dynamic-terms__link{display:inline-flex;align-items:center;
  background:var(--paper-3);border:1px solid var(--line);border-radius:999px;padding:4px 11px;
  font-size:.78rem;font-weight:600;color:var(--ink)}
.digibro-work .dw-chips.soft .jet-listing-dynamic-terms__link{background:var(--blue-soft);
  border-color:transparent;color:var(--blue-deep)}
.digibro-work .dw-chips .jet-listing-dynamic-terms__delimiter{display:none}
.digibro-work .dw-side-link a{color:var(--blue);font-weight:600}

/* ---------- the Live site dynamic link, styled as a button ---------- */
.digibro-work .dw-link-btn .jet-listing-dynamic-link__link{display:inline-flex;align-items:center;
  justify-content:center;gap:8px;background:var(--blue);color:#fff;border:1px solid var(--blue);
  border-radius:var(--r-sm);padding:11px 20px;font-size:.95rem;font-weight:600;line-height:1;
  text-decoration:none}
.digibro-work .dw-link-btn .jet-listing-dynamic-link__link:hover{background:var(--blue-deep);
  text-decoration:none}
.digibro-work .dw-link-btn .jet-listing-dynamic-link__link::after{content:"\2197"}

/* ---------- section headings ---------- */
.digibro-work .wk-sec-h.center{width:100%;text-align:center}
.digibro-work .wk-sec-h.center .elementor-heading-title{text-align:center}

/* ---------- video ---------- */
.digibro-work .e-con.dw-videosec{display:flex;--align-items:center;align-items:center;text-align:center}
.digibro-work .e-con.ctacard{display:flex}
.digibro-work .dw-videonote p{color:var(--muted);max-width:62ch;margin:0 auto}
.digibro-work .dw-video{width:100%}
.digibro-work .dw-video .elementor-wrapper{border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--dark)}

/* ---------- dark CTA card ---------- */
.digibro-work .e-con.ctacard{background:var(--dark);border-radius:var(--r-lg);
  padding:44px 36px!important;align-items:flex-start;gap:14px;color:var(--on-dark-muted)}
.digibro-work .ctacard .elementor-heading-title{color:#fff}
.digibro-work .ctacard .dw-lede p{color:var(--on-dark-muted);margin:0}
.digibro-work .ctacard .wk-eyebrow p{margin:0}

/* ---------- more work ---------- */
.digibro-work .dw-morelist{width:100%}
.digibro-work .dw-center{align-self:center}

/* ---------- a section placed bare inside an Elementor container ---------- */
.digibro-work .wk-bare{width:100%}
.digibro-work .wk-bare>section{padding-block:0;border-top:0}

/* ============================================================
   PAGES IN THIS BUILD — hover to scroll the full-page shot

   The screenshots are full-page captures (tall). Each card shows a
   fixed-height window onto one; hovering slides the whole page past
   that window, which is a far better proof of the build than a
   cropped thumbnail. The travel is (image height − window height), so
   it works with any capture without per-image setup. Duration is set
   per card in digibro-work.js so a long page is not a slow one.

   No links: these are proof of work, not navigation.
   ============================================================ */
.digibro-work .wk-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 22px}
@media (max-width:960px){ .digibro-work .wk-shots{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .digibro-work .wk-shots{grid-template-columns:1fr} }

.digibro-work .wk-shot-card{--shot-h:280px;margin:0;display:flex;flex-direction:column;gap:10px}
.digibro-work .wk-shot-frame{position:relative;display:block;height:var(--shot-h);overflow:hidden;
  border-radius:var(--r-md);border:1px solid var(--line);background:var(--paper-3);
  box-shadow:0 1px 2px rgba(11,11,18,.05)}
.digibro-work .wk-shot-img{width:100%;height:auto;display:block;
  transition:transform var(--shot-dur,5s) cubic-bezier(.33,0,.28,1)}
.digibro-work .wk-shot-card:hover .wk-shot-img,
.digibro-work .wk-shot-card:focus-within .wk-shot-img{transform:translateY(calc(var(--shot-h) - 100%))}

.digibro-work .wk-shot-hint{position:absolute;right:10px;bottom:10px;display:inline-flex;
  align-items:center;gap:6px;background:rgba(11,11,18,.78);color:#fff;font-size:.72rem;
  font-weight:600;letter-spacing:.02em;padding:5px 10px;border-radius:999px;
  pointer-events:none;transition:opacity .25s ease}
.digibro-work .wk-shot-hint::before{content:"↕";font-size:.85rem;line-height:1}
.digibro-work .wk-shot-card:hover .wk-shot-hint{opacity:0}
.digibro-work .wk-shot-card figcaption{font-size:.9rem;font-weight:600;color:var(--ink);text-align:center}

/* Touch: nothing hovers, so let the window scroll by finger instead. */
@media (hover:none){
  .digibro-work .wk-shot-frame{height:auto;max-height:420px;overflow:auto;
    -webkit-overflow-scrolling:touch}
  .digibro-work .wk-shot-img{transition:none}
  .digibro-work .wk-shot-hint{position:sticky;top:10px;left:auto;margin-left:auto;
    display:block;width:max-content}
}
@media (prefers-reduced-motion:reduce){
  .digibro-work .wk-shot-img{transition:none}
  .digibro-work .wk-shot-card:hover .wk-shot-img{transform:none}
}

/* Buttons under the preview shot, centred. */
.digibro-work .e-con.row.center{--justify-content:center;justify-content:center;width:100%}

/* ============================================================
   FIRST SECTION — breathing room

   The title band is a tinted card, and it was sitting flush against
   the header with no air above it. Give it a margin, a little more
   inside padding, and a gentler gap before the preview shot (the
   generic .sec rhythm of 84px top and bottom is too much straight
   after a card).
   ============================================================ */
.digibro-work .e-con.dw-titleband{margin-top:34px;padding:46px 34px 50px!important}
.digibro-work .e-con.sec.hero + .e-con.sec{padding-top:52px}

@media (max-width:860px){
  .digibro-work .e-con.dw-titleband{margin-top:22px;padding:34px 22px 38px!important}
  .digibro-work .e-con.sec.hero + .e-con.sec{padding-top:40px}
}
@media (max-width:600px){
  .digibro-work .e-con.dw-titleband{margin-top:14px;padding:26px 18px 30px!important}
}

/* A capture that is barely taller than the window has nothing to scroll:
   no hint, no movement, no promise the card cannot keep. */
.digibro-work .wk-shot-card.is-static .wk-shot-hint{display:none}
.digibro-work .wk-shot-card.is-static:hover .wk-shot-img{transform:none}
.digibro-work .wk-shot-card.is-static .wk-shot-frame{height:auto;max-height:var(--shot-h)}

/* ============================================================
   LAPTOP FRAME AROUND THE PREVIEW SHOT

   Drawn in CSS, not a mockup PNG: it stays sharp on any screen,
   adds nothing to page weight, and works with whatever image the
   project happens to have. A generic aluminium notebook — no maker's
   marks — because the point is "this is a real site on a real
   screen", not a brand endorsement.

   The lid is the image wrapper; the base is an ::after below it. The
   shot is cropped to a 16:10 screen from the top, which is what a
   visitor sees when the page loads.
   ============================================================ */
.digibro-work .e-con.dw-laptop{display:block;width:100%;max-width:940px;
  margin-inline:auto;padding-bottom:30px}
.digibro-work .dw-laptop .elementor-widget{width:100%}

/* --- the lid --- */
.digibro-work .dw-laptop .jet-listing-dynamic-image{
  position:relative;
  padding:14px 14px 16px;
  border-radius:16px 16px 8px 8px;
  background:linear-gradient(180deg,#42464d 0%,#2b2e34 55%,#1e2024 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),
             inset 0 -1px 0 rgba(255,255,255,.06),
             0 26px 54px -20px rgba(11,11,18,.5);
}

/* camera dot on the top bezel */
.digibro-work .dw-laptop .jet-listing-dynamic-image::before{
  content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;
  background:#0d0e11;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}

/* the base, with a shallow thumb notch */
.digibro-work .dw-laptop .jet-listing-dynamic-image::after{
  content:"";position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);
  width:calc(100% + 32px);height:13px;
  background:
    radial-gradient(ellipse 46px 16px at 50% -2px,rgba(0,0,0,.45) 0 55%,transparent 56%),
    linear-gradient(180deg,#d8dade 0%,#b6bac1 45%,#8d9199 100%);
  border-radius:0 0 10px 10px;
  box-shadow:0 12px 22px -10px rgba(11,11,18,.45);
}

/* --- the screen --- */
.digibro-work .dw-laptop .jet-listing-dynamic-image img{
  display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;
  border-radius:3px;background:#0b0b12;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);
}

@media (max-width:700px){
  .digibro-work .e-con.dw-laptop{padding-bottom:22px}
  .digibro-work .dw-laptop .jet-listing-dynamic-image{padding:9px 9px 11px;border-radius:11px 11px 6px 6px}
  .digibro-work .dw-laptop .jet-listing-dynamic-image::after{height:10px;bottom:-10px;width:calc(100% + 18px)}
  .digibro-work .dw-laptop .jet-listing-dynamic-image::before{top:3px;width:4px;height:4px}
}

/* A project with no preview image leaves the frame's container empty —
   collapse it so it does not hold open a gap nobody can see the point of. */
.digibro-work .e-con.dw-laptop:not(:has(.jet-listing-dynamic-image)){display:none}

/* ============================================================
   FIXES — 11 Sep, 4th pass
   ============================================================ */

/* --- 1. The two buttons under the preview shot must match ---
   One is an Elementor Button, the other a JetEngine Dynamic Link. They
   had different padding and line-height, so they sat at different
   heights. Same box for both, set in one place. */
.digibro-work .dw-btn .elementor-button,
.digibro-work .dw-link-btn .jet-listing-dynamic-link__link{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;min-width:190px;padding:13px 22px;font-size:.95rem;font-weight:600;line-height:1.2;
  border-radius:var(--r-sm);border-width:1px;border-style:solid;text-decoration:none;
  box-sizing:border-box}

/* --- 2. The CTA eyebrow was a full-width ribbon ---
   .wk-eyebrow landed on the Elementor widget WRAPPER, which is a block
   at 100% width, so the pill stretched the whole card. Move the pill
   onto the paragraph inside and let the wrapper be a plain box. */
.digibro-work .ctacard .wk-eyebrow{display:block;width:auto;align-self:flex-start;
  background:none;padding:0;border-radius:0;letter-spacing:normal;text-transform:none}
.digibro-work .ctacard .wk-eyebrow p{display:inline-flex;align-items:center;gap:8px;
  margin:0;background:rgba(18,185,129,.14);color:#8CE8C4;
  font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;line-height:1.4}

/* --- 3. The screenshot window is now a button ---
   Same look as before; just stripping the browser's button chrome. */
.digibro-work button.wk-shot-frame{padding:0;margin:0;cursor:zoom-in;
  font:inherit;color:inherit;text-align:left;appearance:none;width:100%}
.digibro-work button.wk-shot-frame:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* ============================================================
   SCREENSHOT LIGHTBOX

   Built here rather than handed to Elementor's lightbox, which fits an
   image to the viewport — fatal for a 2560px-tall page capture, where
   the whole point is to read it. This one opens the full-resolution
   file, scrolls it, and toggles between fit-to-width and actual size.
   ============================================================ */
.wk-lb[hidden]{display:none!important}
.wk-lb{position:fixed;inset:0;z-index:99999;background:rgba(8,8,14,.92);
  display:flex;flex-direction:column;backdrop-filter:blur(2px)}
.wk-lb-bar{flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:12px 16px;color:#fff;border-bottom:1px solid rgba(255,255,255,.12)}
.wk-lb-title{font-size:.95rem;font-weight:600;margin-right:auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-lb-bar button{appearance:none;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:.86rem;font-weight:600;
  padding:7px 14px;border-radius:999px;cursor:pointer;line-height:1.2}
.wk-lb-bar button:hover{background:rgba(255,255,255,.18)}
.wk-lb-bar button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.wk-lb-scroll{flex:1 1 auto;overflow:auto;padding:20px;display:flex;justify-content:center;
  align-items:flex-start;-webkit-overflow-scrolling:touch}
.wk-lb-img{display:block;height:auto;border-radius:6px;background:#fff;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7);cursor:zoom-in}
.wk-lb.is-fit .wk-lb-img{width:min(1100px,100%,var(--wk-lb-nat,1100px))}
.wk-lb.is-full .wk-lb-img{width:auto;max-width:none;cursor:zoom-out}
@media (max-width:700px){
  .wk-lb-scroll{padding:10px}
  .wk-lb-bar{padding:10px 12px}
  .wk-lb-title{font-size:.85rem}
  .wk-lb-bar button{padding:6px 11px;font-size:.8rem}
}

@media (max-width:420px){
  .digibro-work .dw-btn .elementor-button,
  .digibro-work .dw-link-btn .jet-listing-dynamic-link__link{min-width:0;width:100%}
  .digibro-work .e-con.row.center>.elementor-widget{width:100%}
}

/* ============================================================
   CARD COVER — scroll on hover, click to zoom

   The grid cards used to show a square crop of the top of the page.
   Now they hold the whole capture in a square window: hover scrolls it,
   click opens the same lightbox the project page uses. Works on the Work
   hub and on the homepage strip, because both render the same card.

   --shot-h is written by digibro-work.js from the measured window, so
   one transform rule serves both grids whatever sizes them.
   ============================================================ */
.digibro-work .wk-cover.wk-cover-shot{position:relative;display:block;overflow:hidden;padding:0}
.digibro-work .wk-cover-frame{position:relative;display:block;width:100%;height:100%;
  padding:0;margin:0;border:0;background:none;overflow:hidden;cursor:zoom-in;appearance:none}
.digibro-work .wk-cover-shot .wk-cover-img{display:block;width:100%;height:auto;max-width:none;
  object-fit:unset;transition:transform var(--shot-dur,5s) cubic-bezier(.33,0,.28,1)}
.digibro-work .wk-cover-shot:hover .wk-cover-img,
.digibro-work .wk-cover-shot:focus-within .wk-cover-img{transform:translateY(calc(var(--shot-h,100%) - 100%))}
.digibro-work .wk-cover-shot.is-static .wk-cover-img{transform:none}

.digibro-work .wk-cover-hint{position:absolute;right:10px;top:10px;display:inline-flex;
  align-items:center;gap:5px;background:rgba(11,11,18,.78);color:#fff;font-size:.7rem;
  font-weight:600;letter-spacing:.02em;padding:4px 9px;border-radius:999px;
  pointer-events:none;opacity:0;transition:opacity .2s ease}
.digibro-work .wk-cover-hint::before{content:"⤢";font-size:.8rem;line-height:1}
.digibro-work .wk-cover-shot:hover .wk-cover-hint,
.digibro-work .wk-cover-frame:focus-visible .wk-cover-hint{opacity:1}
.digibro-work .wk-cover-frame:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}

.digibro-work .wk-cover-shot.is-static{cursor:default}
.digibro-work .wk-cover-shot.is-static .wk-cover-frame{cursor:zoom-in}

@media (hover:none){
  /* No hover on touch, so the hint has to be permanent — tapping still zooms. */
  .digibro-work .wk-cover-hint{opacity:1}
  .digibro-work .wk-cover-shot .wk-cover-img{transition:none}
}
@media (prefers-reduced-motion:reduce){
  .digibro-work .wk-cover-shot .wk-cover-img{transition:none}
  .digibro-work .wk-cover-shot:hover .wk-cover-img{transform:none}
}

/* The delivery-status segment is gone from the filter bar; the count and
   reset now sit on their own row. */
.digibro-work .wk-frow.between:not(:has(.wk-seg)){justify-content:flex-end}

/* ============================================================
   WORK HERO - photo band (12 Sep 2026)
   Background image sits on the container in Elementor (editable in the UI);
   the overlay, white type and glass proof strip live here, so swapping the
   photo never needs a CSS edit.
   ============================================================ */
.digibro-work .e-con.hero.hero-photo{position:relative;isolation:isolate;padding-block:72px 76px;background-color:var(--dark)}
.digibro-work .e-con.hero.hero-photo::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(8,8,20,.80) 0%,rgba(8,8,20,.70) 42%,rgba(8,8,20,.92) 100%)}
.digibro-work .e-con.hero.hero-photo > *{position:relative;z-index:1}
.digibro-work .e-con.hero.hero-photo .elementor-heading-title{color:#fff}
.digibro-work .e-con.hero.hero-photo .dw-lede,
.digibro-work .e-con.hero.hero-photo .dw-lede p{color:rgba(255,255,255,.80)}
.digibro-work .e-con.hero.hero-photo .wk-proof{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.20);backdrop-filter:blur(6px)}
.digibro-work .e-con.hero.hero-photo .wk-proof div{border-left-color:rgba(255,255,255,.18)}
.digibro-work .e-con.hero.hero-photo .wk-proof b{color:#fff}
.digibro-work .e-con.hero.hero-photo .wk-proof span{color:rgba(255,255,255,.70)}
@media (max-width:1024px){.digibro-work .e-con.hero.hero-photo .wk-proof div{border-top-color:rgba(255,255,255,.18)}}
@media (max-width:781px){.digibro-work .e-con.hero.hero-photo{padding-block:52px 56px}}

/* Load more - a <button>, so Astra button rules must be pushed off .wk-btn */
.digibro-work .wk-more{display:flex;justify-content:center;margin-top:34px}
.digibro-work button.wk-more-btn{flex:0 0 auto;min-width:220px;cursor:pointer;font-family:inherit;font-size:.92rem;padding:13px 24px;background:transparent;color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r-sm)}
.digibro-work button.wk-more-btn:hover{background:var(--paper-2);border-color:var(--ink);color:var(--ink)}
.digibro-work button.wk-more-btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.digibro-work .jet-listing-grid .jet-filters-pagination,
.digibro-work .jet-listing-grid__loading{margin-top:12px}

/* ---------- crumb spacing 12 Sep 2026 ----------
   The hero is now a photo band, so the breadcrumb needs real air under it
   instead of sitting flush against the dark edge. */
.digibro-work .e-con.wrap:has(.crumb){padding-block:0}
.digibro-work .crumb{padding-block:22px 20px}
@media (max-width:781px){.digibro-work .crumb{padding-block:16px 14px}}

/* Video showcase section (v5 .vid markup reused on /work/) */
.digibro-work .e-con.sec:has(.vid-frame){border-top:1px solid var(--line)}
.digibro-work .e-con.sec:has(.vid-frame) .head{margin-bottom:26px}

/* hero lede align - .dw-lede has margin:0 auto, which pushed the hero copy
   off the h1 left edge once the photo band went in. */
.digibro-work .e-con.hero.hero-photo .dw-lede,
.digibro-work .e-con.hero.hero-photo .dw-lede p{margin-inline:0;max-width:56ch}