/* ============ RESEARCH HERO: kinetic knowledge lattice ============ */
.res-hero{position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;
  background:#0a1614}
/* Was a three.js wave-grid running an EffectComposer post-processing chain:
   render the scene to a framebuffer, then extra full-screen shader passes,
   every frame, at viewport size, for a hero background. It also pulled the
   whole three.module.js plus three postprocessing modules over the wire.
   That was the bulk of this page's lag.

   The lattice is now CSS: a ruled grid that drifts, and two slow blooms
   over it. One paint, no GL context, no library, and the motion is
   transform-only so the compositor runs it off the main thread. */
.res-hero-grid{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:#EAF2EF}
.res-hero-grid::before{content:"";position:absolute;inset:-20%;
  background-image:
    repeating-linear-gradient(90deg,rgba(14,156,147,.16) 0 1px,transparent 1px 62px),
    repeating-linear-gradient(0deg, rgba(14,156,147,.16) 0 1px,transparent 1px 62px);
  transform-origin:center;will-change:transform;
  animation:resGrid 42s linear infinite alternate}
.res-hero-grid::after{content:"";position:absolute;inset:-30%;
  background:
    radial-gradient(38% 42% at 26% 34%,rgba(95,201,191,.55),transparent 68%),
    radial-gradient(34% 38% at 76% 68%,rgba(240,133,75,.24),transparent 70%),
    radial-gradient(46% 50% at 62% 18%,rgba(14,156,147,.34),transparent 72%);
  will-change:transform;
  animation:resBloom 34s ease-in-out infinite alternate}
@keyframes resGrid{to{transform:translate3d(-58px,-34px,0) scale(1.06)}}
@keyframes resBloom{to{transform:translate3d(4%,-5%,0) scale(1.14)}}
@media(prefers-reduced-motion:reduce){
  .res-hero-grid::before,.res-hero-grid::after{animation:none}
}
/* a quiet pocket on the left so the headline always wins against the lattice */
.res-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,22,20,.9) 0%,rgba(10,22,20,.72) 40%,rgba(10,22,20,.22) 76%,transparent 100%),
    linear-gradient(0deg,rgba(10,22,20,.7) 0%,transparent 32%,transparent 74%,rgba(10,22,20,.5) 100%)}
.res-hero .wrap{position:relative;z-index:2;max-width:var(--maxw);padding-top:var(--nav-h)}
.res-hero .eyebrow{color:var(--teal)}
.res-hero h1{font-family:var(--serif);font-weight:800;font-size:clamp(42px,6.4vw,104px);
  letter-spacing:-.035em;line-height:.98;color:#fff;margin-top:16px}
.res-hero h1 em{font-style:italic;color:#7fe3d9}
.res-hero .lead{font-size:clamp(16px,1.3vw,20px);color:rgba(250,248,243,.86);max-width:56ch;
  margin-top:26px;line-height:1.7;font-weight:300}
.res-hero-meta{display:flex;align-items:center;gap:16px;margin-top:36px;
  font-family:var(--disp);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(250,248,243,.55)}
.res-hero-meta i{width:22px;height:1px;background:rgba(250,248,243,.28)}
@media(max-width:820px){.res-hero{min-height:0;padding:calc(var(--nav-h) + 70px) 0 70px}}

/* ---- LIGHT variant: the wave-grid field is pale, so the copy goes ink ---- */
.res-hero-light{background:#EAF2EF}
/* a soft light pocket on the left so the ink headline holds over the ripple */
.res-hero-light::after{
  background:
    linear-gradient(90deg,rgba(234,242,239,.9) 0%,rgba(234,242,239,.55) 42%,rgba(234,242,239,.12) 74%,transparent 100%),
    linear-gradient(0deg,rgba(234,242,239,.6) 0%,transparent 30%,transparent 76%,rgba(234,242,239,.3) 100%)}
.res-hero-light .eyebrow{color:var(--teal-deep)}
.res-hero-light h1{color:var(--ink)}
.res-hero-light h1 em{color:var(--teal-deep)}
.res-hero-light .lead{color:var(--ink-soft);font-weight:400}
.res-hero-light .res-hero-meta{color:var(--ink-mut)}
.res-hero-light .res-hero-meta i{background:rgba(28,59,56,.24)}

/* ============ THE AI AUDITOR: the feature ============
   The scroll-opened 3D book moved to the home page, where it does the job
   of establishing credibility to a first-time visitor. A reader who has
   navigated to Research has already been convinced to come looking, so
   what serves them here is the book presented plainly and immediately,
   with nothing to scroll through before the buy link. */
.bkf{background:linear-gradient(180deg,var(--surface-2) 0%,var(--ivory) 46%,var(--ivory) 100%);
  padding:clamp(70px,10vh,124px) 0 clamp(30px,4vh,52px)}
.bkf-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(30px,4.6vw,74px);align-items:center;max-width:1040px;margin:0 auto}

.bkf-cover{position:relative;border-radius:8px;overflow:hidden;
  box-shadow:0 40px 70px -34px rgba(12,26,24,.62),0 2px 0 rgba(255,255,255,.5);
  transform:rotate(-1.6deg);transition:transform .6s var(--ease)}
.bkf-cover:hover{transform:rotate(0deg) translateY(-5px)}
.bkf-cover img{width:100%;height:auto;display:block}
/* the spine edge, so it reads as an object rather than a flat picture */
.bkf-cover::after{content:"";position:absolute;left:0;top:0;bottom:0;width:11px;
  background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,.06) 60%,transparent);
  pointer-events:none}

.bkf-k{font-family:var(--disp);font-size:clamp(9.5px,.85vw,11.5px);letter-spacing:.24em;
  text-transform:uppercase;color:var(--teal-deep)}
.bkf-body h2{font-family:var(--serif);font-weight:800;font-size:clamp(30px,4.2vw,62px);
  letter-spacing:-.035em;line-height:1;margin-top:12px;color:var(--ink)}
.bkf-tag{font-size:clamp(13px,1.1vw,17px);color:var(--ink-soft);margin-top:12px;line-height:1.5}
.bkf-rule{width:52px;height:3px;border-radius:2px;background:var(--amber);margin:clamp(18px,2.4vw,28px) 0}
.bkf-lead{font-family:var(--serif);font-weight:700;font-size:clamp(17px,1.6vw,26px);
  letter-spacing:-.022em;line-height:1.26;color:var(--teal-deep)}
.bkf-body > p:not(.bkf-lead):not(.bkf-tag){font-size:clamp(14px,1.02vw,16.5px);
  color:var(--ink-soft);line-height:1.72;margin-top:16px;max-width:54ch}

.bkf-by{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,34px);margin-top:clamp(20px,2.8vh,30px)}
.bkf-by div{font-family:var(--serif);font-weight:700;font-size:clamp(14px,1.16vw,17px);
  color:var(--ink);line-height:1.25}
.bkf-by span{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(9px,.76vw,10.5px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mut);margin-top:4px}

.bkf-stats{display:flex;flex-wrap:wrap;gap:clamp(16px,2.6vw,38px);
  margin-top:clamp(20px,2.8vh,30px);padding-top:clamp(16px,2.2vh,24px);
  border-top:1px solid var(--line)}
.bkf-stats b{display:block;font-family:var(--serif);font-weight:800;
  font-size:clamp(20px,2.2vw,34px);letter-spacing:-.03em;color:var(--teal-deep);
  line-height:1;white-space:nowrap}
.bkf-stats span{display:block;font-family:var(--disp);font-size:clamp(8px,.74vw,10.5px);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mut);margin-top:7px;white-space:nowrap}

@media(max-width:860px){
  .bkf-grid{grid-template-columns:1fr;gap:32px;max-width:560px}
  .bkf-cover{max-width:280px;margin:0 auto}
}

/* ============ THE AI AUDITOR: standalone buy CTA ============
   Lives in its own section BELOW the pinned book, on static ground, so it is a
   plain always-clickable anchor. No .rv reveal class on purpose: nothing here
   should depend on JS to become visible. */
.bkbuy{background:var(--ivory);text-align:center;
  padding:clamp(6px,1vh,18px) 0 clamp(64px,9vh,120px)}
.bkbuy-k{font-family:var(--disp);font-size:clamp(9.5px,.85vw,11.5px);letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-mut);margin-bottom:clamp(16px,2vh,24px)}
.bkbuy-btn{position:relative;display:inline-flex;align-items:center;text-align:left;
  gap:clamp(13px,1.5vw,20px);padding:clamp(13px,1.4vw,19px) clamp(20px,2.2vw,30px);
  border-radius:999px;text-decoration:none;color:#fff;background:var(--grad);
  box-shadow:0 22px 46px -20px rgba(11,133,125,.62),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .42s var(--ease),box-shadow .42s var(--ease)}
.bkbuy-btn:hover{transform:translateY(-3px);
  box-shadow:0 30px 60px -20px rgba(11,133,125,.76),inset 0 1px 0 rgba(255,255,255,.28)}
.bkbuy-btn:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
/* the amber hairline keeps it in the brand's two-colour logic */
.bkbuy-btn::after{content:"";position:absolute;left:50%;right:50%;bottom:-9px;height:2px;
  border-radius:2px;background:var(--amber);transition:left .42s var(--ease),right .42s var(--ease)}
.bkbuy-btn:hover::after{left:26%;right:26%}
.bkbuy-ic{display:grid;place-items:center;width:clamp(34px,3.2vw,42px);height:clamp(34px,3.2vw,42px);
  flex:none;border-radius:50%;background:rgba(255,255,255,.16)}
.bkbuy-ic svg{width:54%;height:54%}
.bkbuy-tx b{display:block;font-family:var(--serif);font-weight:700;
  font-size:clamp(15px,1.35vw,19px);letter-spacing:-.01em;line-height:1.15}
.bkbuy-tx span{display:block;font-family:var(--disp);font-size:clamp(9.5px,.82vw,11.5px);
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:5px}
.bkbuy-go{display:grid;place-items:center;width:clamp(26px,2.2vw,30px);height:clamp(26px,2.2vw,30px);
  flex:none;transition:transform .42s var(--ease)}
.bkbuy-go svg{width:100%;height:100%}
.bkbuy-btn:hover .bkbuy-go{transform:translateX(5px)}
@media(max-width:560px){
  .bkbuy-btn{width:min(92vw,420px)}
  .bkbuy-tx{flex:1}
}

/* ============ THE OTHER TWO WORKS ============ */
.works{background:var(--ivory);padding:clamp(70px,11vh,130px) 0}
.works .wrap{max-width:var(--maxw)}
.works-intro{max-width:620px;margin-bottom:clamp(36px,5vh,64px)}
.works-intro .eyebrow{color:var(--teal-deep)}
.works-intro h2{font-family:var(--serif);font-weight:800;font-size:clamp(28px,3.8vw,50px);
  letter-spacing:-.03em;line-height:1.05;color:var(--ink);margin-top:14px}
.works-intro h2 em{font-style:italic;color:var(--teal-deep)}

.works-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,34px)}
.wk{--c:#0E9C93;position:relative;overflow:hidden;isolation:isolate;
  border-radius:22px;padding:clamp(26px,3vw,40px);
  background:var(--surface-2);border:1px solid var(--line);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .45s}
/* a subject photo sits under each card, held right back so the copy stays first */
/* No photograph here on purpose. The card already carries a live
   fluid-morph field (.wk-morph); a stock image behind it fought that
   field for the same space and left the copy sitting on busy ground. */
.wk::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(165deg,color-mix(in srgb,var(--c) 10%,transparent),transparent 58%);
  opacity:1;transition:opacity .7s var(--ease)}
.wk::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(155deg,color-mix(in srgb,var(--c) 12%,transparent),transparent 46%),
             linear-gradient(180deg,rgba(241,237,228,.82),rgba(241,237,228,.93))}
.wk:hover::before{opacity:1}
/* the morphing field sits under the photo and the ivory wash */
/* Was a WebGL fluid-morph per card. Two more GL contexts on a page that
   already ran three, for what is a slow wash of colour behind a card.
   This is the same wash from two drifting radial gradients: one paint,
   no context, and the movement is a transform the compositor owns. */
.wk-morph{position:absolute;inset:0;z-index:-3;overflow:hidden;border-radius:22px;
  opacity:.55;transition:opacity .7s var(--ease)}
.wk:hover .wk-morph{opacity:.8}
.wk-morph::before,.wk-morph::after{content:"";position:absolute;
  width:78%;aspect-ratio:1;border-radius:50%;will-change:transform}
.wk-morph::before{left:-14%;top:-24%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 62%,transparent),transparent 72%);
  animation:wkDriftA 19s ease-in-out infinite alternate}
.wk-morph::after{right:-18%;bottom:-26%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 38%,transparent),transparent 74%);
  animation:wkDriftB 23s ease-in-out infinite alternate}
@keyframes wkDriftA{to{transform:translate(26%,18%) scale(1.18)}}
@keyframes wkDriftB{to{transform:translate(-22%,-16%) scale(1.12)}}
@media(prefers-reduced-motion:reduce){
  .wk-morph::before,.wk-morph::after{animation:none}
}
.wk:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--c) 40%,var(--line));
  box-shadow:0 40px 80px -46px rgba(28,42,40,.6)}

/* selective-disclosure motif: one shard lit, the rest closed */
.wk-fig{position:relative;height:clamp(90px,9vw,120px);margin-bottom:26px;
  display:grid;grid-template-columns:repeat(6,1fr);gap:7px;align-items:end}
.wk-shard{display:block;height:38%;border-radius:5px;background:color-mix(in srgb,var(--c) 16%,transparent);
  transition:height .6s var(--ease),background .5s var(--ease)}
.wk-shard.on{height:100%;background:var(--c)}
.wk:hover .wk-shard{height:52%}
.wk:hover .wk-shard.on{height:100%}
/* the exponential curve motif */
.wk-fig-curve{display:block}
.wk-fig-curve svg{width:100%;height:100%;fill:none;stroke-linecap:round}
.wk-lin{stroke:var(--ink-mut);stroke-width:2;opacity:.4;stroke-dasharray:4 5}
.wk-exp{stroke:var(--c);stroke-width:3;stroke-dasharray:240;stroke-dashoffset:240;
  transition:stroke-dashoffset 1.2s var(--ease)}
.wk.in .wk-exp{stroke-dashoffset:0}

/* the raw accent is only 2.9:1 on this ground at 11px; mixing it toward ink
   keeps the card's colour identity while clearing 4.5:1 */
.wk-k{font-family:var(--disp);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--c) 58%,var(--ink))}
.wk h3{font-family:var(--serif);font-weight:700;font-size:clamp(24px,2.6vw,36px);letter-spacing:-.026em;
  line-height:1.06;color:var(--ink);margin-top:10px}
.wk p{font-size:clamp(14.5px,1.05vw,16.5px);color:var(--ink-soft);line-height:1.72;margin-top:14px;max-width:46ch}
.wk-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.wk-tags span{font-family:var(--disp);font-size:11px;letter-spacing:.03em;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;background:var(--ivory)}
.wk-cta{display:inline-flex;align-items:center;gap:9px;margin-top:26px;padding:0;cursor:pointer;
  background:none;border:0;font-family:var(--disp);font-size:13.5px;font-weight:600;letter-spacing:.02em;
  color:var(--c);transition:gap .35s var(--ease)}
.wk-cta svg{width:17px;height:17px}
.wk-cta:hover{gap:15px}

@media(max-width:880px){.works-grid{grid-template-columns:1fr}}

/* ============ THE LAB ============ */
/* ============ THE LAB ============
   The photograph bleeds off the right edge of the section and is feathered on
   its left, so the ship appears to emerge out of the page rather than sitting
   inside a frame. The copy keeps its own clean ground on the left. */
.lab{position:relative;overflow:hidden;background:var(--ivory);
  padding:clamp(70px,11vh,130px) 0 clamp(60px,9vh,110px)}
.lab .wrap{position:relative;z-index:2;max-width:var(--maxw)}
.lab-in{display:grid;grid-template-columns:minmax(0,min(52%,560px));
  gap:clamp(32px,5vw,80px);align-items:center}

.lab-media{position:absolute;top:0;right:0;bottom:0;z-index:1;width:min(62%,980px);
  pointer-events:none;
  /* feather the inner edge into the page, and just kiss the top and bottom so
     the crop never reads as a hard rectangle */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 18%,#000 46%),
                     linear-gradient(180deg,transparent 0%,#000 9%,#000 91%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 18%,#000 46%),
             linear-gradient(180deg,transparent 0%,#000 9%,#000 91%,transparent 100%);
  mask-composite:intersect}
.lab-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

.lab-copy h2{font-family:var(--serif);font-weight:800;font-size:clamp(30px,4.2vw,56px);
  letter-spacing:-.03em;line-height:1.03;color:var(--ink)}
.lab-copy h2 em{font-style:normal;color:var(--teal-deep)}
.lab-copy > p{font-size:clamp(15px,1.1vw,17.5px);color:var(--ink-soft);max-width:46ch;
  margin-top:18px;line-height:1.72}

/* the three steps, strung on a single rail */
.lab-pts{list-style:none;padding:0;margin:clamp(28px,3.8vh,42px) 0 0;
  display:grid;gap:clamp(18px,2.4vh,26px);position:relative}
.lab-pts li{position:relative;display:grid;grid-template-columns:auto 1fr;
  gap:clamp(14px,1.5vw,20px);align-items:start}
/* the rail: drawn between consecutive chips only, so it never overshoots */
.lab-pts li:not(:last-child)::before{content:"";position:absolute;left:calc(clamp(40px,3.6vw,50px) / 2);
  top:clamp(40px,3.6vw,50px);bottom:calc(-1 * clamp(18px,2.4vh,26px));width:1.5px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--teal) 34%,transparent),color-mix(in srgb,var(--teal) 10%,transparent))}
.lab-ic{display:grid;place-items:center;flex:none;
  width:clamp(40px,3.6vw,50px);height:clamp(40px,3.6vw,50px);border-radius:50%;
  background:color-mix(in srgb,var(--teal) 11%,#fff);
  border:1px solid color-mix(in srgb,var(--teal) 22%,transparent);
  box-shadow:0 10px 22px -16px rgba(14,156,147,.7)}
.lab-ic svg{width:45%;height:45%;fill:none;stroke:var(--teal-deep);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.lab-tx b{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(15px,1.2vw,17.5px);
  color:var(--ink);letter-spacing:-.015em;line-height:1.2}
.lab-tx > span{display:block;font-size:clamp(13px,1vw,14.5px);color:var(--ink-soft);
  margin-top:6px;line-height:1.6;max-width:42ch}

@media(max-width:900px){
  .lab{padding-bottom:0}
  .lab-in{grid-template-columns:1fr}
  /* stack: copy first, then the picture as a full width band underneath */
  .lab-media{position:relative;width:100%;height:clamp(260px,42vh,380px);
    margin-top:clamp(34px,5vh,54px);
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%);
    mask-image:linear-gradient(180deg,transparent 0%,#000 16%);
    -webkit-mask-composite:source-over;mask-composite:add}
}

/* ============ HANDOVER TO ENGAGEMENTS (gradient flow, light) ============ */
.to-eng{position:relative;overflow:hidden;background:var(--surface-2);
  padding:clamp(70px,11vh,132px) 0 clamp(70px,11vh,130px)}
/* Was a WebGL gradient-wave. It is a soft moving wash, which two drifting
   gradient blobs give for free; the GL context did not earn its keep on a
   page that was already running one. */
.eng-wave{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:linear-gradient(120deg,#F1EDE4,#E7F1EE 46%,#F6E3D6)}
.eng-wave::before,.eng-wave::after{content:"";position:absolute;
  width:60%;aspect-ratio:1.4;border-radius:50%;will-change:transform}
.eng-wave::before{left:-8%;top:-30%;
  background:radial-gradient(closest-side,rgba(95,201,191,.55),transparent 72%);
  animation:ewDriftA 26s ease-in-out infinite alternate}
.eng-wave::after{right:-10%;bottom:-34%;
  background:radial-gradient(closest-side,rgba(240,133,75,.34),transparent 74%);
  animation:ewDriftB 31s ease-in-out infinite alternate}
@keyframes ewDriftA{to{transform:translate(22%,26%) scale(1.2)}}
@keyframes ewDriftB{to{transform:translate(-20%,-22%) scale(1.15)}}
@media(prefers-reduced-motion:reduce){
  .eng-wave::before,.eng-wave::after{animation:none}
}
/* soften the flow so the ink type reads cleanly over it */
.to-eng::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(250,248,243,.58),rgba(250,248,243,.34))}
.to-eng .wrap{position:relative;z-index:2;max-width:var(--maxw)}

.eng-head{max-width:660px}
.eng-head h2{font-family:var(--serif);font-weight:800;font-size:clamp(30px,4.2vw,56px);
  letter-spacing:-.03em;line-height:1.04;color:var(--ink)}
.eng-head h2 em{font-style:italic;color:var(--teal-deep)}
.eng-head p{font-size:clamp(15.5px,1.15vw,18px);color:var(--ink-soft);max-width:56ch;
  margin-top:18px;line-height:1.72}

.eng-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);
  margin-top:clamp(38px,5.5vh,64px)}
/* each tile is a small case study: subject photo, dark scrim, number, sector, title */
.ep{--c:#0E9C93;position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;
  min-height:clamp(340px,34vw,420px);padding:clamp(24px,2.4vw,32px);border-radius:22px;
  text-decoration:none;color:#fff;
  background:#0e1a18;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 34px 64px -44px rgba(28,42,40,.6);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .5s var(--ease)}
/* the photo, held back and desaturated so the copy always wins */
/* The stock photographs here (dollar bills for BFSI, and so on) were
   literal, tonally random against each other, and busy enough that the
   white copy on top could not be read. Replaced with the card's own
   accent over a deep neutral: one calm ground per card, three cards that
   finally look like a set. */
.ep-shot{position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(120% 90% at 78% 8%,color-mix(in srgb,var(--c) 62%,transparent),transparent 62%),
    linear-gradient(168deg,#12312D 0%,#0C1F1D 58%,#081513 100%);
  transition:transform 1.2s var(--ease)}
/* accent-tinted scrim: dark at the foot for the title, coloured at the top */
.ep::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,17,15,0) 0%,rgba(8,17,15,.42) 54%,rgba(8,17,15,.88) 100%);
  transition:opacity .5s var(--ease)}
.ep:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--c) 55%,transparent);
  box-shadow:0 46px 80px -40px rgba(28,42,40,.7),0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent)}
.ep:hover .ep-shot{transform:scale(1.1);filter:grayscale(.15) contrast(1.05) brightness(.95)}

.ep-top{display:flex;align-items:center;justify-content:space-between}
.ep-n{font-family:var(--serif);font-weight:800;font-size:clamp(30px,3.4vw,46px);letter-spacing:-.04em;
  line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.72)}
.ep-k{font-family:var(--disp);font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:#fff;background:color-mix(in srgb,var(--c) 78%,transparent);
  padding:6px 12px;border-radius:999px}
.ep-mid{margin-top:auto}
.ep b{display:block;font-family:var(--serif);font-weight:750;font-size:clamp(19px,1.8vw,24px);
  letter-spacing:-.024em;line-height:1.16;color:#fff}
.ep-d{display:block;font-size:13.5px;color:rgba(250,248,243,.82);line-height:1.6;margin-top:12px}
.ep-go{display:flex;align-items:center;gap:8px;margin-top:22px;
  font-family:var(--disp);font-size:12.5px;font-weight:600;letter-spacing:.02em;color:#fff;
  opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),gap .35s var(--ease)}
.ep-go svg{width:16px;height:16px}
.ep:hover .ep-go{opacity:1;transform:none;gap:13px}

.eng-go{display:block;width:fit-content;margin:clamp(38px,5vh,58px) auto 0;border-radius:999px;
  text-decoration:none;transition:transform .45s var(--ease)}
.eng-go:hover{transform:translateY(-3px)}
.eng-go-in{display:flex;align-items:center;gap:12px;padding:18px 40px;border-radius:999px;
  color:var(--ink);font-family:var(--disp);font-size:15px;font-weight:600;letter-spacing:.03em;
  background:rgba(255,255,255,.82);border:1px solid rgba(28,59,56,.16);
  box-shadow:0 20px 50px -22px rgba(28,42,40,.42),inset 0 1px 0 rgba(255,255,255,.9);
  transition:background .4s var(--ease),border-color .4s var(--ease),color .35s}
.eng-go:hover .eng-go-in{background:var(--teal);border-color:var(--teal);color:#fff}
.eng-go-in svg{width:19px;height:19px}

@media(max-width:880px){.eng-proof{grid-template-columns:1fr}}