/* ============================================================
   WEDEE site stylesheet
   Shared by every page except index.html, which still carries
   its own inline copy of the base system. Values are lifted
   from index.html unchanged so the two cannot drift on colour,
   type scale or spacing.

   Order: tokens, base, layout, components, page furniture.
   ============================================================ */

:root{
  --black:#000;--near:#080808;--panel:#0C0C0C;--line:rgba(255,255,255,.09);
  --purple:#8F44F8;--purple-light:#AF4CFF;--purple-deep:#2B0148;--purple-soft:#c4a6ff;
  --grey:#8A8A8A;--grey-light:#CFCFCF;--white:#fff;
  --head:'Bebas Neue','Bebas Kai','Oswald',Impact,sans-serif;
  --body:'Nunito Sans','Avenir LT Std','Segoe UI',Arial,sans-serif;
  /* fluid container: grows with the viewport, capped so line lengths stay readable on ultrawide */
  --max:min(1720px,94vw);--gut:clamp(20px,4vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--black);color:var(--white);font-family:var(--body);font-weight:300;
  font-size:clamp(15.5px,1.05vw,17px);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* width:100% matters: inside a flex column, `margin:0 auto` alone collapses the box to its
   content width instead of filling the line. This keeps every container the same width. */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-left:var(--gut);padding-right:var(--gut)}
a{color:inherit}
img{max-width:100%;display:block}

h1,h2,h3,h4,.dsp{font-family:var(--head);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.005em}
h1{font-size:clamp(40px,5.4vw,104px)}
h2{font-size:clamp(34px,4.6vw,84px);max-width:17ch}
h3{font-size:clamp(21px,2vw,27px);line-height:1}
h4{font-size:clamp(17px,1.5vw,21px);line-height:1.05}
.accent{color:var(--purple)}
.idx{font-family:var(--head);font-size:13px;letter-spacing:.3em;color:var(--purple-light);display:block;margin-bottom:20px}
.kicker{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);font-weight:600}
.lede{font-size:clamp(16.5px,1.2vw,21px);color:var(--grey-light);max-width:60ch;line-height:1.65}
.small{font-size:14px;color:var(--grey);line-height:1.6}
.body-copy p{color:var(--grey-light);max-width:68ch}
.body-copy p+p{margin-top:18px}
.body-copy strong{color:#fff;font-weight:600}
section{padding:clamp(72px,10vw,140px) 0;position:relative}
/* the fixed header and the jump nav together are about 130px, so an
   anchored section must stop clear of both rather than under them */
section[id]{scroll-margin-top:136px}
.tight{padding-top:clamp(42px,5vw,70px)}

.btn{display:inline-flex;align-items:center;gap:10px;background:var(--purple);color:#fff!important;
  text-decoration:none;font-family:var(--head);font-size:18px;letter-spacing:.08em;padding:15px 30px;
  border-radius:2px;transition:background .2s,transform .2s}
.btn:hover{background:var(--purple-light);transform:translateY(-2px)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.3)}
.btn-ghost:hover{background:rgba(255,255,255,.07);border-color:#fff}
.tlink{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--purple-light);font-weight:700;transition:gap .2s}
.tlink:hover{gap:15px}

/* keyboard users land on the nav otherwise, and this header is fixed, so the
   skip target needs tabindex="-1" on <main> to receive focus */
.skiplink{position:absolute;left:-9999px;top:0;z-index:400;background:var(--purple);color:#fff;
  padding:14px 22px;font-family:var(--head);font-size:17px;letter-spacing:.08em;text-decoration:none}
.skiplink:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--purple-light);outline-offset:3px}
header{position:fixed;inset:0 0 auto;z-index:200;background:rgba(0,0,0,.6);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px}
.nav img{height:38px;width:auto}
.nav ul{display:flex;gap:26px;list-style:none;align-items:center}
.nav ul a{text-decoration:none;font-size:14px;color:var(--grey-light);transition:color .2s}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:#fff}
.nav ul a[aria-current="page"]{color:var(--purple-light)}
@media(max-width:1100px){.nav ul{display:none}}
/* ---------- mobile navigation ----------
   Below 1100px the desktop links are hidden, so without this the only
   way through the site on a phone is the footer. The same markup is
   reused: the list becomes a panel under the header. */
.navtoggle{display:none;width:44px;height:44px;flex:none;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);border-radius:3px;cursor:pointer;padding:0}
.navtoggle i{display:block;position:relative;width:19px;height:1.5px;background:#fff;transition:background .2s}
.navtoggle i::before,.navtoggle i::after{content:'';position:absolute;left:0;width:19px;height:1.5px;
  background:#fff;transition:transform .25s}
.navtoggle i::before{top:-6px}.navtoggle i::after{top:6px}
header.open .navtoggle i{background:transparent}
header.open .navtoggle i::before{transform:translateY(6px) rotate(45deg)}
header.open .navtoggle i::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1100px){
  .navtoggle{display:flex}
  .nav ul{display:none;position:fixed;top:78px;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;padding:4px var(--gut) 20px;background:rgba(0,0,0,.97);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);max-height:calc(100vh - 78px);overflow-y:auto}
  header.open .nav ul{display:flex}
  .nav ul li{border-top:1px solid var(--line)}
  .nav ul a{display:block;padding:16px 2px;font-size:16px;color:#fff}
}
@media(max-width:700px){
  .nav ul{top:68px;max-height:calc(100vh - 68px)}
}
/* on a phone the call button wraps onto two lines and collides with
   the wordmark, so it shrinks and stays on one line */
@media(max-width:700px){
  .nav{height:68px;gap:12px}
  .nav img{height:30px}
  .nav .btn{font-size:15px;letter-spacing:.06em;padding:11px 16px;white-space:nowrap}
  .jump{top:68px}
  section[id]{scroll-margin-top:124px}
}

/* ---------- service / location / industry page hero ----------
   No video here. The homepage hero carries the showreel; inner
   pages load fast and put the proof numbers above the fold. */
.phero{padding-top:clamp(132px,15vw,190px);padding-bottom:clamp(44px,5vw,70px);
  position:relative;overflow:hidden;isolation:isolate}
.phero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse at 82% 6%,rgba(143,68,248,.26),transparent 56%),
    radial-gradient(ellipse at 6% 90%,rgba(143,68,248,.10),transparent 60%)}
.phero h1{max-width:19ch}
.phero .sub{margin-top:26px;font-size:clamp(18px,1.9vw,27px);line-height:1.35;color:#fff;
  font-weight:300;max-width:34ch;border-left:2px solid var(--purple);padding-left:clamp(18px,2.4vw,28px)}
.phero .lede{margin-top:26px}
.phero-actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.phero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,5vw,72px);align-items:end}
@media(max-width:1040px){.phero-grid{grid-template-columns:1fr;gap:38px;align-items:start}}

/* breadcrumbs: visible trail, and BreadcrumbList schema sits in the JSON-LD block */
.crumbs{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-bottom:22px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:9px}
.crumbs li+li::before{content:'/';margin-right:9px;color:rgba(255,255,255,.26)}
.crumbs a{text-decoration:none;color:var(--grey)}
.crumbs a:hover{color:#fff}
.crumbs [aria-current="page"]{color:var(--purple-light)}

/* on-page jump nav, sticky under the header. Doubles as a contents list for AI answer engines. */
.jump{position:sticky;top:78px;z-index:120;background:rgba(0,0,0,.72);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.jump ul{list-style:none;display:flex;gap:clamp(16px,2.4vw,34px);overflow-x:auto;padding:15px 0;
  scrollbar-width:none;-ms-overflow-style:none}
.jump ul::-webkit-scrollbar{display:none}
.jump a{text-decoration:none;white-space:nowrap;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grey);font-weight:600;transition:color .2s}
.jump a:hover{color:#fff}

.statstrip{margin:clamp(30px,4vw,48px) auto 0;max-width:calc(var(--max) - (var(--gut) * 2));
  border:1px solid var(--line);border-radius:4px;background:var(--near);display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden}
.statstrip>div{padding:clamp(20px,2.4vw,30px);border-right:1px solid var(--line)}
.statstrip>div:last-child{border-right:0}
.statstrip b{font-family:var(--head);font-size:clamp(30px,3.6vw,46px);display:block;line-height:1}
.statstrip span{display:block;margin-top:9px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
@media(max-width:860px){.statstrip{grid-template-columns:1fr 1fr}.statstrip>div:nth-child(2n){border-right:0}.statstrip>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:440px){.statstrip{grid-template-columns:1fr}.statstrip>div{border-right:0;border-bottom:1px solid var(--line)}.statstrip>div:last-child{border-bottom:0}}

/* ---------- layout helpers ---------- */
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,6vw,90px);align-items:start}
@media(max-width:940px){.split{grid-template-columns:1fr;gap:34px}}
.sticky{position:sticky;top:150px}
@media(max-width:940px){.sticky{position:static}}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- channel fit: the qualify-out block ----------
   Two columns, one for "this service suits you", one for
   "it does not". Naming real clients on the NO side is the
   point of the section, so the no column is styled as
   seriously as the yes column, not as a warning. */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
@media(max-width:780px){.fit{grid-template-columns:1fr}}
.fitcol{border:1px solid var(--line);border-radius:5px;padding:clamp(22px,2.6vw,32px);background:var(--panel)}
.fitcol.yes{border-color:rgba(143,68,248,.42);background:linear-gradient(165deg,var(--purple-deep),#0b0010)}
.fitcol h3{margin-bottom:14px}
.fitcol .mark{font-family:var(--head);font-size:13px;letter-spacing:.2em;display:block;margin-bottom:16px;color:var(--purple-light)}
.fitcol.no .mark{color:var(--grey)}
.fitcol p{font-size:15.5px;color:var(--grey-light)}
.fitcol ul{list-style:none;margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.fitcol li{font-size:14.5px;color:var(--grey-light);padding:8px 0 8px 20px;position:relative}
.fitcol li::before{content:'';position:absolute;left:0;top:17px;width:7px;height:7px;background:var(--purple)}
.fitcol.no li::before{background:var(--grey)}
.fitcol li b{color:#fff;font-weight:600}

/* ---------- client story block ----------
   A narrative column plus a metric rail. Used for the two or
   three proof stories a service page carries. */
.story{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(26px,4vw,60px);
  align-items:start;padding:clamp(34px,4vw,56px) 0;border-top:1px solid var(--line)}
.story:last-of-type{border-bottom:1px solid var(--line)}
@media(max-width:940px){.story{grid-template-columns:1fr;gap:28px}}
.story .who{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--purple-light);font-weight:700;margin-bottom:14px}
.story h3{margin-bottom:18px;max-width:22ch}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.metrics>div{background:var(--panel);padding:clamp(18px,2.2vw,26px)}
.metrics b{font-family:var(--head);font-size:clamp(26px,3vw,40px);line-height:1;display:block}
.metrics span{display:block;margin-top:8px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);line-height:1.5}
.metrics .hero-metric{grid-column:1/-1;background:linear-gradient(150deg,var(--purple-deep),#120020)}
.metrics .hero-metric b{color:#fff}
.metrics .hero-metric span{color:var(--purple-soft)}
@media(max-width:420px){.metrics{grid-template-columns:1fr}}

.pf{background:linear-gradient(160deg,var(--purple-deep),#120020);border:1px solid rgba(143,68,248,.35);
  padding:clamp(22px,2.6vw,30px);border-radius:4px}
.pf .n{font-family:var(--head);font-size:clamp(34px,4.4vw,54px);line-height:1}
.pf .l{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--purple-soft);margin-top:8px}
.pf .c{margin-top:16px;padding-top:15px;border-top:1px solid rgba(255,255,255,.15);font-size:14.5px;color:var(--grey-light)}

.pull{border-left:2px solid var(--purple);padding-left:clamp(20px,3vw,32px);margin:38px 0;
  font-size:clamp(17px,1.9vw,23px);line-height:1.5;color:#fff;font-weight:300}
.pull b{color:var(--purple-light);font-weight:600}

/* ---------- method: numbered rows, same rhythm as the homepage service rows ---------- */
.srow{display:grid;grid-template-columns:70px 1fr auto;gap:clamp(18px,3vw,44px);align-items:baseline;
  padding:clamp(26px,3vw,40px) 0;border-top:1px solid var(--line);text-decoration:none;transition:padding-left .25s}
.srow:last-child{border-bottom:1px solid var(--line)}
a.srow:hover{padding-left:12px}
.srow .no{font-family:var(--head);font-size:15px;color:var(--purple-light);letter-spacing:.2em}
.srow h3{margin-bottom:10px}
.srow p{color:var(--grey-light);max-width:56ch;font-size:15.5px}
.srow .go{font-family:var(--head);font-size:15px;letter-spacing:.12em;color:var(--purple-light);white-space:nowrap}
/* a method row has no destination, so it drops the third column and
   lets the copy run wider than a linked row would */
.srow.plain{grid-template-columns:70px 1fr}
.srow.plain p{max-width:78ch}
@media(max-width:700px){.srow,.srow.plain{grid-template-columns:1fr;gap:8px}}

/* ---------- pricing ---------- */
.price{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:40px}
.pricecard{border:1px solid var(--line);border-radius:5px;background:var(--panel);padding:clamp(24px,2.8vw,34px)}
.pricecard.lead{border-color:rgba(143,68,248,.42);background:linear-gradient(165deg,var(--purple-deep),#0b0010)}
.pricecard .l{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);font-weight:700}
.pricecard .f{font-family:var(--head);font-size:clamp(32px,3.6vw,46px);line-height:1;margin:14px 0 4px}
.pricecard .u{font-size:13px;color:var(--grey)}
.pricecard p{font-size:14.5px;color:var(--grey-light);margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.pricecard.lead .l{color:var(--purple-soft)}
.pricenote{margin-top:22px;font-size:13.5px;color:var(--grey)}

/* ---------- person ---------- */
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:clamp(24px,2.6vw,30px)}
.pcard .av{width:86px;height:86px;border-radius:50%;background:linear-gradient(140deg,var(--purple),var(--purple-deep));
  display:flex;align-items:center;justify-content:center;font-family:var(--head);font-size:32px;margin-bottom:20px;
  overflow:hidden;border:2px solid rgba(143,68,248,.45);flex:none}
.pcard .av img{width:100%;height:100%;object-fit:cover;object-position:center top}
.pcard .role{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--purple-light);margin:6px 0 12px}
.pcard p{font-size:14.5px;color:var(--grey-light)}
.pcard a.li{display:inline-block;margin-top:14px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}

/* ---------- case study teaser cards ---------- */
.cs{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:clamp(22px,2.6vw,30px);
  text-decoration:none;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.cs:hover{border-color:var(--purple);transform:translateY(-3px)}
.cs .tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--purple-light);font-weight:700}
.cs h3{margin:12px 0 10px}
.cs .ind{font-size:12.5px;color:var(--grey);letter-spacing:.08em;text-transform:uppercase}
.cs p{font-size:14.5px;color:var(--grey-light);margin-top:12px;flex:1}
.cs .res{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-family:var(--head);
  font-size:21px;color:#fff;letter-spacing:.02em}
.cs .res small{display:block;font-family:var(--body);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-top:5px}

/* ---------- reviews ---------- */
.grev{display:inline-flex;align-items:center;gap:11px;text-decoration:none;border:1px solid var(--line);
  background:var(--panel);padding:10px 16px;border-radius:40px;transition:border-color .2s}
.grev:hover{border-color:var(--purple)}
.grev .g{font-family:Arial,sans-serif;font-weight:700;font-size:17px;letter-spacing:-.5px}
.grev .g b:nth-child(1){color:#4285F4}.grev .g b:nth-child(2){color:#EA4335}
.grev .g b:nth-child(3){color:#FBBC05}.grev .g b:nth-child(4){color:#4285F4}
.grev .g b:nth-child(5){color:#34A853}.grev .g b:nth-child(6){color:#EA4335}
.grev .stars{color:#FBBC05;letter-spacing:1.5px;font-size:13px}
.grev .txt{font-size:13.5px;color:var(--grey-light)}.grev .txt b{color:#fff;font-weight:700}
.rc{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:24px}
.rc .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.rc .stars{color:#FBBC05;letter-spacing:2px;font-size:14px}
.rc .gicon{font-family:Arial,sans-serif;font-weight:700;font-size:15px;color:#4285F4}
.rc p{font-size:14.5px;color:var(--grey-light)}
.rc .who{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:13px;font-size:13.5px;font-weight:700;color:#fff}
.rc .who img{height:26px;width:auto;max-width:96px;object-fit:contain;opacity:.85;flex:none}
.rc .who span{display:block;font-weight:300;font-size:12.5px;color:var(--grey);margin-top:2px}

.pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:32px}
.pills a{background:var(--panel);border:1px solid var(--line);padding:11px 19px;border-radius:40px;
  text-decoration:none;font-size:14px;color:var(--grey-light);transition:.2s}
.pills a:hover{border-color:var(--purple);color:#fff}

/* ---------- FAQ ---------- */
details{border-bottom:1px solid var(--line)}
summary{font-family:var(--head);font-size:clamp(19px,1.9vw,25px);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;padding:24px 0}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';color:var(--purple);font-size:26px;line-height:1;flex:none}
details[open] summary::after{content:'\2013'}
details .a{padding:0 0 26px;color:var(--grey-light);max-width:74ch;font-size:15.5px}

/* ---------- CTA band, footer, WhatsApp ---------- */
.band{background:linear-gradient(120deg,var(--purple),#6C25D0);padding:clamp(60px,8vw,110px) 0}
.band h2{color:#fff;max-width:19ch}.band .lede{color:rgba(255,255,255,.92)}
.band .btn{background:#000}.band .btn:hover{background:#151515}

footer{background:#040404;border-top:1px solid var(--line);padding:clamp(52px,6vw,78px) 0 30px;color:var(--grey-light);font-size:14.5px}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(26px,4vw,48px)}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
footer img{height:48px;margin-bottom:20px}
footer h4{font-family:var(--head);font-size:16px;letter-spacing:.14em;color:#fff;margin-bottom:16px;text-transform:uppercase}
footer ul{list-style:none}footer li{margin-bottom:10px}
footer a{color:var(--grey-light);text-decoration:none}footer a:hover{color:#fff}
.fbot{margin-top:46px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--grey)}

.wa{position:fixed;right:clamp(16px,2vw,26px);bottom:clamp(16px,2vw,26px);z-index:300;
  width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(37,211,102,.42),0 2px 10px rgba(0,0,0,.4);
  transition:transform .25s cubic-bezier(.2,.8,.25,1),box-shadow .25s}
.wa::before{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid rgba(37,211,102,.55);
  animation:waPulse 2.6s ease-out infinite}
@keyframes waPulse{0%{transform:scale(1);opacity:.75}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.wa:hover{transform:scale(1.1);box-shadow:0 10px 30px rgba(37,211,102,.6),0 3px 14px rgba(0,0,0,.5)}
.wa svg{width:31px;height:31px;fill:#fff;position:relative;z-index:1}

/* ---------- motion ---------- */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1!important;transform:none!important}
  .wa::before{animation:none}
}

/* ---------- branded results graphic ----------
   Used for the proof image a service page carries. Always captioned
   with the source and the permission, because an uncaptioned numbers
   graphic is the thing prospects discount fastest. */
.proofshot{margin-top:clamp(28px,3.4vw,44px);border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--panel)}
.proofshot img{width:100%;height:auto}
.proofshot figcaption{padding:16px clamp(18px,2vw,26px);font-size:13px;color:var(--grey);
  border-top:1px solid var(--line);line-height:1.6}