/* =====================================================================
   ERGOSPHERE - IMAGERY LAYER  (.esi_* namespace)
   Treated product screenshots: app-window chrome, glow beds, the
   ErgoDesign 2D -> 3D flip, evidence gallery, detail zoom crops and
   the ErgoSense split band. Self-contained; pairs with
   js/ergosphere-imagery.js. Screenshots live in img/screenshots/web/.

   The chrome (title bar, dots, shadow) is applied by CSS, not baked
   into the images, so screenshots can be swapped at any time.
   ===================================================================== */

/* ---------- section plumbing for the new bands ---------- */
/* #showcase / #evidence / #capture / #library join the homepage section
   system: the same defensive overrides and 80px rhythm the esx_ sections
   get in ergosphere-custom.css. Strict DOM-order background alternation
   is restored around the inserted bands by re-toning the sections after
   each insertion point:
   showcase(B) problem(A) toolkit(B) evidence(A) modules(B) how(A)
   capture(B) library(A) trust(B) maturity(A) pricing(B)
   ergoconnect(A) trial(B), where A = #0a1628 and B = #0d1a2d.
   This file loads after ergosphere-custom.css, so these win the tie. */
#showcase, #evidence, #capture, #library {
  float: none !important; display: block !important; width: 100% !important; clear: both !important;
  padding-top: 80px; padding-bottom: 80px;
}
#showcase .container, #evidence .container, #capture .container, #library .container { display: block !important; }
#showcase, #capture, #trust, #pricing, #trial { background-color: #0d1a2d; }
#evidence, #library, #maturity, #ergoconnect-callout { background-color: #0a1628; }
#modules { background-color: #0d1a2d; }
#how { background-color: #0a1628; }
/* components that hard-code their section's original tone (halo rings) */
#how .esx_node { background: #0a1628; box-shadow: 0 0 0 8px #0a1628; }
#maturity .esx_spine_item::before { background: #0a1628; box-shadow: 0 0 0 4px #0a1628; }

/* ---------- app-window chrome ---------- */
.esi_frame { position: relative; border-radius: 12px; overflow: hidden; background: #0b1626;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 34px 90px -24px rgba(0,0,0,.7), 0 0 70px rgba(0,212,255,.07); }
.esi_bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; flex: none; min-width: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border-bottom: 1px solid rgba(255,255,255,.08); }
.esi_dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.16); flex: none; }
.esi_dot:first-child { background: rgba(0,212,255,.55); }
/* flex: 1 + min-width: 0 lets the nowrap title ellipsise instead of
   forcing the frame (and any grid it sits in) wider than the screen */
.esi_bartitle { margin-left: 10px; flex: 1 1 auto; min-width: 0; font-family: 'Poppins', sans-serif; font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase; color: rgba(255,255,255,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esi_frame img { display: block; width: 100%; height: auto; }

/* ---------- glow bed (soft gradient the shot sits on) ---------- */
.esi_bed { position: relative; }
.esi_bed::before { content: ''; position: absolute; inset: -50px -70px; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% 62%, rgba(0,212,255,.13), transparent 62%); filter: blur(12px); }
.esi_bed > * { position: relative; z-index: 1; }

/* ---------- captions ---------- */
.esi_cap { margin: 22px auto 0; font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,.5); max-width: 760px; }
.esi_cap strong { color: rgba(255,255,255,.75); font-weight: 600; }
.esi_center { text-align: center; }

/* ---------- signature: ErgoDesign 2D -> 3D flip ---------- */
.esi_showcase { max-width: 1120px; margin: 56px auto 0; }
.esi_flipwrap { position: relative; width: 100%; aspect-ratio: 1914 / 1224; perspective: 1800px; cursor: pointer; outline: none; }
.esi_flipwrap:focus-visible { outline: 2px solid rgba(0,212,255,.6); outline-offset: 6px; border-radius: 12px; }
.esi_flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform 1.5s cubic-bezier(.36,.06,.18,1); }
.esi_flipwrap.is-flipped .esi_flip { transform: rotateY(180deg); }
.esi_face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.esi_face_back { transform: rotateY(180deg); }
.esi_face .esi_frame { display: flex; flex-direction: column; height: 100%; }
.esi_face .esi_frame img { flex: 1; min-height: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.esi_flipbtn { position: absolute; left: 50%; bottom: -21px; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 22px; border-radius: 100px;
  font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: #00d4ff; background: #0b1a2b; border: 1px solid rgba(0,212,255,.4);
  box-shadow: 0 12px 34px -10px rgba(0,0,0,.8), 0 0 24px rgba(0,212,255,.12); white-space: nowrap; }
.esi_flipbtn svg { width: 14px; height: 14px; stroke: #00d4ff; fill: none; transition: transform .8s ease; }
.esi_flipwrap.is-flipped .esi_flipbtn svg { transform: rotate(180deg); }
.esi_flipwrap:hover .esi_flipbtn { border-color: rgba(0,212,255,.8); box-shadow: 0 12px 34px -10px rgba(0,0,0,.8), 0 0 34px rgba(0,212,255,.25); }
/* the flip button hangs 21px below the frame; keep the caption clear of it */
.esi_showcase + .esi_cap { margin-top: 48px; }

/* ---------- mid-section sub-header (above an exhibit inside a section) ---------- */
.esi_subhead { text-align: center; margin-top: 76px; }
.esi_subhead .esx_kicker::before { display: none; }
.esi_subhead h4 { font-family: 'Poppins', sans-serif; font-size: 26px; font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: 2.5px; line-height: 1.3; margin: 0; }
.esi_subhead h4 span { color: #00d4ff; }

/* ---------- evidence gallery (3-up cropped cards, lightbox to full) ---------- */
.esi_gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
.esi_card { display: block; text-decoration: none; }
.esi_card .esi_frame { transition: transform .45s ease, box-shadow .45s ease; }
.esi_card:hover .esi_frame { transform: translateY(-6px);
  box-shadow: 0 40px 90px -24px rgba(0,0,0,.8), 0 0 60px rgba(0,212,255,.16); }
/* Crop window: tune per card with --crop (focus point) and --zoom (magnification).
   --crop is an object-position pair: "x% y%" of the source screenshot. */
.esi_crop { aspect-ratio: 16 / 10; overflow: hidden; }
.esi_crop img { width: 100%; height: 100%; object-fit: cover; object-position: var(--crop, 50% 50%);
  transform: scale(var(--zoom, 1)); transform-origin: var(--crop, 50% 50%); transition: transform .6s ease; }
.esi_card:hover .esi_crop img { transform: scale(calc(var(--zoom, 1) * 1.045)); }
.esi_cardcap { padding: 18px 6px 0; }
.esi_cardkick { display: block; font-family: 'Poppins', sans-serif; font-size: 10.5px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: #00d4ff; margin-bottom: 8px; }
.esi_cardcap p { font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,.6); margin: 0; }
.esi_expand { position: absolute; top: 50px; right: 12px; z-index: 2; width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; background: rgba(6,15,28,.72);
  border: 1px solid rgba(255,255,255,.18); opacity: 0; transition: opacity .35s ease; }
.esi_expand svg { width: 15px; height: 15px; stroke: rgba(255,255,255,.85); fill: none; }
.esi_card:hover .esi_expand { opacity: 1; }
.esi_card .esi_frame { position: relative; }

/* ---------- hero shot with floating detail zoom ---------- */
/* .esi_zoom is a magnified window onto the SAME image (no extra download).
   The screenshot is set as an inline background-image on the element
   (NOT via a custom property - url() inside a CSS variable resolves
   against this stylesheet in some browsers, i.e. css/img/..., and the
   panel renders blank). Tune with:
     --zs   background-size, e.g. 260%  (bigger = closer in)
     --zp   background-position, e.g. 82% 80%  (region of interest) */
.esi_heroshot { position: relative; max-width: 1040px; margin: 56px auto 0; }
.esi_report { max-width: 1120px; margin-top: 64px; }
.esi_subhead + .esi_report { margin-top: 44px; }
.esi_report a { display: block; text-decoration: none; }
.esi_report a:hover .esi_frame { box-shadow: 0 40px 96px -24px rgba(0,0,0,.8), 0 0 60px rgba(0,212,255,.15); }
.esi_report .esi_cap { padding-right: 0; text-align: center; margin-left: auto; margin-right: auto; max-width: none; }
.esi_report .esi_note { max-width: 860px; margin: 26px auto 0; }
/* compiled close-out TOC overlaid on the session-report spread */
.esi_overdoc { position: absolute; right: -36px; top: 12%; width: 40%; z-index: 3; display: block; text-decoration: none;
  transform: rotate(1.6deg); transition: transform .5s ease; }
.esi_overdoc:hover { transform: rotate(0deg) translateY(-4px); }
.esi_overdoc .esi_frame { box-shadow: 0 36px 90px -18px rgba(0,0,0,.85), 0 0 44px rgba(0,212,255,.16); }
.esi_overdoc_tag { top: 48px; }
.esi_zoom { position: absolute; right: -34px; bottom: -44px; width: 44%; aspect-ratio: 16 / 7.4; z-index: 2;
  border-radius: 10px; overflow: hidden; border: 1px solid rgba(0,212,255,.4); background-color: #0b1626;
  background-repeat: no-repeat;
  background-size: var(--zs, 240%); background-position: var(--zp, 80% 80%);
  box-shadow: 0 28px 70px -18px rgba(0,0,0,.8), 0 0 34px rgba(0,212,255,.18); }
.esi_zoomtag { position: absolute; top: 10px; left: 12px; padding: 4px 11px; border-radius: 4px;
  font-family: 'Poppins', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: #00d4ff; background: rgba(6,15,28,.82); border: 1px solid rgba(0,212,255,.3); }
.esi_zoom ~ .esi_cap { padding-right: 40%; }

/* ---------- inline detail card (static zoom crop, e.g. maturity pills) ---------- */
/* background-image set inline on the element, same reason as .esi_zoom */
.esi_zoomcard { position: relative; margin-top: 34px; aspect-ratio: 16 / 6.4; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(0,212,255,.32); background-color: #0b1626;
  background-repeat: no-repeat;
  background-size: var(--zs, 300%); background-position: var(--zp, 30% 26%);
  box-shadow: 0 22px 60px -20px rgba(0,0,0,.75), 0 0 28px rgba(0,212,255,.12); }

/* ---------- module-row exhibit ---------- */
/* Image block as a third grid child of an .esx_modrow, spanning both
   columns so each module's screenshot visually belongs to ITS row
   (not the next one). Bottom margin clears the hanging zoom panel
   before the row's border-bottom. */
/* min-width:0 is load-bearing: as a grid item this defaults to min-width:auto, and the
   nowrap window title bars inside give it a ~358px min-content, which refuses to shrink
   and pushes the whole page wider than a 360px phone. */
.esi_modshot { grid-column: 1 / -1; margin-top: 44px; min-width: 0; }
.esi_modshot .esi_heroshot { margin: 0 auto 54px; }
.esi_modshot .esi_duo { margin-top: 0; }

/* ---------- layered duo (two overlapping shots) ---------- */
.esi_duo { position: relative; margin-top: 60px; padding-bottom: 90px; }
.esi_duo_main { width: 76%; }
.esi_duo_off { position: absolute; right: 0; bottom: 0; width: 46%; transform: rotate(1.2deg);
  transition: transform .5s ease; }
.esi_duo_off:hover { transform: rotate(0deg) translateY(-4px); }
.esi_duo_off .esi_frame { box-shadow: 0 40px 90px -20px rgba(0,0,0,.85), 0 0 50px rgba(0,212,255,.12); }

/* ---------- split band (ErgoSense hardware-in-the-loop) ---------- */
.esi_split { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 64px; align-items: center; }
.esi_split_text p { font-size: 16px; line-height: 1.85; color: rgba(255,255,255,.7); margin: 24px 0 0; }
.esi_split_text strong { color: #fff; font-weight: 600; }
.esi_split_cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px;
  font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: #00d4ff; text-decoration: none; border-bottom: 1px solid rgba(0,212,255,.4); padding-bottom: 6px;
  transition: border-color .3s ease, gap .3s ease; }
.esi_split_cta:hover { border-color: #00d4ff; gap: 16px; color: #00d4ff; }
.esi_split_shot { transform: perspective(1600px) rotateY(-5deg) rotateX(1.5deg); transition: transform .7s ease; }
.esi_split_shot:hover { transform: perspective(1600px) rotateY(0deg) rotateX(0deg); }

/* ---------- knowledge-base doc pair (Library band, image-left split) ---------- */
.esi_split_rev { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.esi_docduo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.esi_docduo a { display: block; min-width: 0; text-decoration: none; transition: transform .45s ease; }
.esi_docduo a:nth-child(2) { margin-top: 38px; }
.esi_docduo a:hover { transform: translateY(-6px); }
.esi_docduo .esi_frame:hover { box-shadow: 0 40px 90px -24px rgba(0,0,0,.8), 0 0 50px rgba(0,212,255,.16); }

/* ---------- trust-row inline link (documentation on request) ---------- */
.esx_trustrow p a { color: #00d4ff; text-decoration: none; border-bottom: 1px solid rgba(0,212,255,.4); transition: border-color .3s ease; }
.esx_trustrow p a:hover { color: #00d4ff; border-color: #00d4ff; }

/* ---------- quiet callout note (ErgoLens no-hardware path) ---------- */
.esi_note { margin-top: 32px; padding: 18px 22px; border: 1px solid rgba(0,212,255,.22); border-left: 3px solid #00d4ff;
  border-radius: 8px; background: rgba(0,212,255,.05); font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.7); }
.esi_note strong { color: #fff; font-weight: 600; }

/* ---------- small stat strip (maturity personality numbers) ---------- */
.esi_statrow { display: flex; gap: 34px; margin-top: 34px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1); }
.esi_statrow .esi_sn { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 30px; line-height: 1; color: #00d4ff; }
.esi_statrow .esi_sl { font-family: 'Poppins', sans-serif; font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-top: 7px; }
/* grand variant: full-width, centred, larger (maturity section) */
.esi_statrow_grand { justify-content: center; text-align: center; gap: 96px; border-top: none; padding-top: 0; margin-top: 70px; }
.esi_statrow_grand .esi_sn { font-size: 58px; }
.esi_statrow_grand .esi_sl { font-size: 12px; letter-spacing: 2.4px; margin-top: 10px; }

/* ---------- motion restraint ---------- */
@media (prefers-reduced-motion: reduce) {
  .esi_flip { transition: none; }
  .esi_crop img, .esi_card .esi_frame, .esi_split_shot, .esi_duo_off { transition: none; }
  .esi_split_shot { transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .esi_zoom { right: -10px; bottom: -34px; }
}
@media (max-width: 1040px) {
  /* tablet section-padding convention (matches ergosphere-mobile.css) */
  #showcase, #evidence, #capture, #library { padding-top: 40px !important; }
  /* keep the glow bed inside the viewport on narrow screens */
  .esi_bed::before { inset: -30px -12px; }
  .esi_overdoc { position: static; width: 82%; margin: 24px 0 0 auto; transform: rotate(0deg); }
  .esi_gallery { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .esi_split, .esi_split_rev { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .esi_split_shot { transform: none; }
  .esi_duo_main { width: 100%; }
  .esi_duo { padding-bottom: 0; }
  .esi_duo_off { position: static; width: 82%; margin: 26px 0 0 auto; transform: rotate(0deg); }
}
@media (max-width: 768px) {
  /* phone section-padding convention (matches ergosphere-mobile.css) */
  #showcase, #evidence, #capture, #library { padding-top: 0 !important; }
  .esi_docduo { gap: 14px; }
  .esi_docduo a:nth-child(2) { margin-top: 22px; }
  .esi_gallery { grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: 40px; }
  .esi_subhead { margin-top: 50px; }
  .esi_subhead h4 { font-size: 19px; letter-spacing: 2px; }
  .esi_showcase { margin-top: 40px; }
  .esi_bar { height: 30px; padding: 0 12px; }
  .esi_bartitle { font-size: 9.5px; letter-spacing: 1px; }
  .esi_flipbtn { bottom: -18px; padding: 9px 16px; font-size: 10px; }
  .esi_zoom ~ .esi_cap { padding-right: 0; }
  .esi_zoom { position: static; width: 100%; margin-top: 18px; aspect-ratio: 16 / 8; }
  .esi_duo_off { width: 100%; margin-top: 20px; }
  .esi_overdoc { width: 100%; }
  .esi_statrow { gap: 24px; flex-wrap: wrap; }
  .esi_statrow_grand { gap: 26px; margin-top: 44px; flex-wrap: nowrap; }
  .esi_statrow_grand .esi_sn { font-size: 34px; }
  .esi_statrow_grand .esi_sl { font-size: 10px; letter-spacing: 1.6px; }
  .esi_cap { font-size: 12.5px; }
}

/* =====================================================================
   10. ORIGINALS LIGHTBOX (.eso_*)
   One reusable modal for the five featured Originals. Triggers are the
   highlighted tool names inside the toolkit cards.
   ===================================================================== */

/* ---------- trigger links ---------- */
.eso_link { font: inherit; font-weight: inherit; color: #00d4ff; background: none; border: 0; padding: 0;
  cursor: pointer; border-bottom: 1px dotted rgba(0,212,255,.55);
  transition: color .2s ease, border-color .2s ease; }
.eso_link::after { content: '+'; display: inline-block; margin-left: 5px; width: 13px; height: 13px;
  line-height: 12px; font-size: 10px; font-weight: 700; text-align: center; vertical-align: 2px;
  color: rgba(0,212,255,.85); border: 1px solid rgba(0,212,255,.45); border-radius: 50%;
  transition: background .2s ease, color .2s ease, border-color .2s ease; }
.eso_link:hover, .eso_link:focus-visible { color: #7ce7ff; border-bottom-style: solid; border-bottom-color: #7ce7ff; outline: none; }
.eso_link:hover::after, .eso_link:focus-visible::after { background: #00d4ff; color: #06121f; border-color: #00d4ff; }

.eso_hint { margin: 14px 0 0; font-size: 12.5px; letter-spacing: .3px; color: rgba(255,255,255,.45); }

/* ---------- overlay + card ---------- */
.eso_overlay { position: fixed; inset: 0; z-index: 99990; display: none; align-items: center; justify-content: center; padding: 26px; }
.eso_overlay.is-shown { display: flex; }
.eso_backdrop { position: absolute; inset: 0; background: rgba(4,10,20,.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .25s ease; }
.eso_overlay.is-open .eso_backdrop { opacity: 1; }

.eso_card { position: relative; width: min(920px, 100%); max-height: min(88vh, 900px);
  display: flex; flex-direction: column; overflow: hidden;
  background: #0b1626; border: 1px solid rgba(0,212,255,.2); border-radius: 18px;
  box-shadow: 0 60px 140px -30px rgba(0,0,0,.9), 0 0 80px rgba(0,212,255,.12);
  opacity: 0; transform: translateY(16px) scale(.97);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,.8,.3,1); }
.eso_overlay.is-open .eso_card { opacity: 1; transform: none; }

.eso_x { position: absolute; top: 14px; right: 14px; z-index: 5; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  background: rgba(10,20,34,.85); border: 1px solid rgba(255,255,255,.16); border-radius: 50%;
  color: rgba(255,255,255,.7); transition: color .2s ease, border-color .2s ease, transform .2s ease; }
.eso_x svg { width: 16px; height: 16px; }
.eso_x:hover, .eso_x:focus-visible { color: #00d4ff; border-color: rgba(0,212,255,.6); transform: rotate(90deg); outline: none; }

.eso_scroll { overflow-y: auto; overscroll-behavior: contain; padding: 34px 38px 26px; }
.eso_scroll::-webkit-scrollbar { width: 10px; }
.eso_scroll::-webkit-scrollbar-track { background: transparent; }
.eso_scroll::-webkit-scrollbar-thumb { background: rgba(0,212,255,.18); border-radius: 5px; }

.eso_main { transition: opacity .18s ease, transform .18s ease; }
.eso_main.is-swapping { opacity: 0; transform: translateY(8px); }

/* ---------- head ---------- */
.eso_kicker { display: block; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase; color: rgba(0,212,255,.75);
  padding-right: 48px; /* clears the close button, which sits over this line */ }
.eso_head h3 { margin: 10px 0 6px; font-family: 'Poppins', sans-serif; font-size: 30px; font-weight: 600;
  line-height: 1.2; color: #fff; padding-right: 44px; }
.eso_tagline { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.55); }

/* ---------- shots ---------- */
.eso_shots { display: grid; gap: 18px; margin: 22px 0 24px; }
.eso_shots_pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* A real photograph, not an app window: it gets no fake title-bar chrome.
   Narrower column because the shot is portrait. */
.eso_shots_photo { grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); align-items: center; }
.eso_photoframe { position: relative; border-radius: 12px; overflow: hidden; background: #eef2f6;
  box-shadow: 0 26px 64px -18px rgba(0,0,0,.75), 0 0 34px rgba(0,212,255,.10); }
.eso_photoframe img { display: block; width: 100%; height: auto; }
.eso_photoframe .eso_ph { aspect-ratio: 4 / 5; }
.eso_shot { margin: 0; min-width: 0; }
.eso_shot .esi_frame { box-shadow: 0 24px 60px -18px rgba(0,0,0,.75), 0 0 34px rgba(0,212,255,.08); }
.eso_shotcap { margin: 9px 2px 0; font-size: 12px; line-height: 1.55; color: rgba(255,255,255,.42); }

.eso_ph { position: relative; aspect-ratio: 16 / 9; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 18px;
  background: radial-gradient(ellipse at 30% 20%, rgba(0,212,255,.07), transparent 60%), #0a1422; }
.eso_ph::before { content: ''; position: absolute; inset: 13px; border: 1px dashed rgba(0,212,255,.28); border-radius: 8px; }
.eso_ph svg { width: 34px; height: 34px; color: rgba(0,212,255,.5); }
.eso_ph_t { font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: rgba(0,212,255,.75); }
.eso_ph_s { font-size: 12px; color: rgba(255,255,255,.35); max-width: 30ch; }

/* ---------- copy ---------- */
/* Paragraphs run the full width of the card. The bullets keep their measure cap:
   they are short, indented lines and read better without stretching. */
.eso_copy p { margin: 0 0 14px; font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.62); }
.eso_copy ul { margin: 16px 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; }
.eso_copy li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.65;
  color: rgba(255,255,255,.62); max-width: 72ch; }
.eso_copy li::before { content: ''; position: absolute; left: 3px; top: 8px; width: 7px; height: 7px;
  background: rgba(0,212,255,.6); transform: rotate(45deg); }
.eso_copy .eso_last { margin-bottom: 0; padding-left: 14px; border-left: 2px solid rgba(0,212,255,.5);
  color: rgba(255,255,255,.8); font-weight: 500; }

/* ---------- footer nav ---------- */
.eso_nav { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.07); background: rgba(8,16,28,.6); }
.eso_arrow { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; cursor: pointer;
  background: none; border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  color: rgba(255,255,255,.72); font-family: 'Poppins', sans-serif; font-size: 12px; letter-spacing: 1px;
  transition: color .2s ease, border-color .2s ease; }
.eso_arrow svg { width: 14px; height: 14px; flex: none; }
.eso_arrow:hover, .eso_arrow:focus-visible { color: #00d4ff; border-color: rgba(0,212,255,.55); outline: none; }
.eso_dots { display: flex; gap: 8px; }
.eso_dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.18); transition: background .2s ease, transform .2s ease; }
.eso_dot:hover { background: rgba(0,212,255,.55); }
.eso_dot:focus-visible { outline: 2px solid #00d4ff; outline-offset: 2px; }
.eso_dot.is-on { background: #00d4ff; transform: scale(1.3); }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .eso_scroll { padding: 28px 26px 22px; }
  .eso_head h3 { font-size: 26px; }
}

@media (max-width: 768px) {
  .eso_overlay { padding: 10px; }
  .eso_card { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); border-radius: 14px; }
  .eso_scroll { padding: 22px 16px 18px; }
  .eso_head h3 { font-size: 22px; padding-right: 40px; }
  .eso_tagline { font-size: 14px; }
  .eso_shots_pair, .eso_shots_photo { grid-template-columns: minmax(0, 1fr); }
  .eso_photoframe { max-width: 290px; margin: 0 auto; }
  .eso_copy p { font-size: 14px; }
  .eso_copy li { font-size: 13.5px; }
  .eso_nav { padding: 10px 12px; }
  .eso_arrow { padding: 8px 12px; }
}

@media (max-width: 560px) {
  .eso_arrow span { display: none; }
  .eso_dots { gap: 4px; }
  .eso_dot { width: 5px; height: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .eso_backdrop, .eso_card, .eso_main, .eso_arrow, .eso_dot, .eso_link, .eso_x { transition: none; }
  .eso_card { transform: none; }
}