/* ============================================================
   Lucid Motion Studio — /industries/ landing pages
   Loaded ONLY by the industry pages. css/style.css is untouched,
   so nothing here can affect an existing page.

   Every colour, radius and font comes from the tokens already
   declared in style.css (:root). No new brand values are invented.
   ============================================================ */

/* ---------- Breadcrumbs band ---------- */
.ind-crumbs { padding: 18px 0 0; margin-bottom: -6px; }

/* ---------- Hero extras ---------- */
.ind-chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin-top: 26px;
}
.ind-chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line);
  background: rgba(14, 24, 38, .6);
  border-radius: 999px;
  padding: 8px 16px;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 500;
}
.ind-chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); flex: none;
}

/* ---------- Optional hero background media (see js/hero-media.js) ----------
   A full-bleed layer behind BOTH the breadcrumb strip and the hero section
   that follows it -- not a separate block underneath the text, and not
   confined to the hero section on its own, so there is no gap under the
   header where the old dark background would otherwise show through.
   Empty and invisible by default -- the page looks exactly as it does
   today when no file has been placed.

   shell.py's render() wraps the breadcrumb strip and the hero section in
   one <div class="hero-band">, with this layer as that band's first
   child. .hero-band is the positioning context; the media layer is
   absolutely inset over the whole band, painted at z-index 0. Both the
   breadcrumb strip's own .container and the hero section itself are
   promoted to z-index 1/2 above it so their content stays on top. A dark
   overlay (::after, z-index 1, between the media and the text) keeps
   everything readable against any photo or footage placed here.

   The image path is applied as a CSS background-image (never an <img>
   tag) and the video is rendered non-interactive -- see js/hero-media.js
   for the drag/right-click/picture-in-picture deterrents applied to the
   <video> element itself. pointer-events:none here means neither ever
   intercepts a click, so it behaves like wallpaper, not a page asset. */
/* The band wraps the breadcrumb strip and the hero section. `isolation`
   makes it a stacking context of its own, so nothing inside it can ever
   paint over the sticky site header (z-index 100) or any other page
   furniture, whatever z-index is used in here. */
.hero-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background-image .6s ease;
}

/* style.css hangs the hero's teal glow off .page-hero, anchored to that
   section's own top edge. Inside a band that section starts BELOW the
   breadcrumb row, so the glow began part-way down and drew a visible
   horizontal edge right across the band: the breadcrumb row read as a
   flat strip sitting above the picture, with the picture apparently
   starting underneath it.

   So the glow moves up to the band, where it belongs: it now starts at
   the top of the band, immediately under the site header, exactly as it
   does on a page whose hero has no breadcrumb row above it. The band is
   clipped so the glow cannot reach the header, and sits at z-index -1 so
   it stays behind the breadcrumbs and every other piece of content. The
   geometry and colour are copied from style.css unchanged. */
.hero-band > .page-hero::before { content: none; }
.hero-band::before {
  content: '';
  position: absolute;
  top: -260px; left: 50%; transform: translateX(-50%);
  width: 800px; height: 500px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(16, 208, 208, .16), transparent 70%);
}

/* A STILL IMAGE is painted as this band's own CSS background (set by
   js/hero-media.js), layered under a dark gradient in the same shorthand.
   An element's own background always paints behind its own content and all
   of its descendants' content, so the breadcrumbs and the hero text are on
   top by construction -- no z-index involved, nothing to get wrong, and it
   is impossible for the image to spill out of the band and reach the
   header. Nothing here is needed for that to work, which is deliberate:
   it renders correctly even against a stale or missing stylesheet.

   A VIDEO needs a real element, so it goes in .hero-media below. */

/* The video layer. z-index:-1 puts it behind every piece of content in the
   band (negative-z descendants paint before in-flow content) while still
   sitting above the band's own background, so text stays readable without
   any of the band's children needing a z-index of their own. */
.hero-media {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
}
.hero-media.is-ready { opacity: 1; }
.hero-media::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 12, 22, .45) 0%, rgba(5, 12, 22, .72) 65%, rgba(5, 12, 22, .88) 100%),
    radial-gradient(ellipse at 30% 15%, rgba(255, 255, 255, .05), transparent 60%);
}
.hero-media-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; pointer-events: none;
}

/* ---------- "What a camera cannot show" — the signature block ---------- */
.hard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hard-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px 24px;
  position: relative;
  overflow: hidden;
  transition: transform .25s, border-color .25s;
}
.hard-card:hover { transform: translateY(-4px); border-color: rgba(16, 208, 208, .45); }
.hard-card::after {
  content: ''; position: absolute; right: -50px; top: -50px;
  width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(48, 144, 224, .12), transparent 65%);
  pointer-events: none;
}
.hard-card { display: flex; flex-direction: column; }
.hard-card h3 { font-size: 1.06rem; margin-bottom: 10px; }
.hard-card .hc-why { color: var(--muted); font-size: .93rem; margin-bottom: 14px; }
.hard-card .hc-fix {
  display: block;
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 13px;
  font-size: .89rem;
  color: var(--text);
}
.hard-card .hc-fix b {
  display: block;
  font-family: var(--font-head);
  font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--green); margin-bottom: 5px; font-weight: 700;
}

/* ---------- Problem strip ---------- */
.prob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.prob {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
}
.prob b { display: block; font-family: var(--font-head); font-size: 1.04rem; margin-bottom: 8px; }
.prob p { color: var(--muted); font-size: .93rem; }
.prob .x { color: #e06a6a; font-weight: 700; margin-right: 6px; }

/* ---------- Format tiles ---------- */
.fmt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.fmt {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--card);
  transition: transform .25s, border-color .25s;
  display: flex; flex-direction: column;
}
.fmt:hover { transform: translateY(-5px); border-color: rgba(16, 208, 208, .45); }
.fmt .thumb { aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.fmt .thumb img, .fmt .thumb video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 1;
}
/* Seats light footage on the dark page and keeps the format number legible
   whatever the frame underneath is doing. */
.fmt .thumb.has-media::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to top, rgba(7, 12, 18, .80) 0%, rgba(7, 12, 18, .30) 20%, rgba(7, 12, 18, 0) 44%),
    radial-gradient(125% 95% at 50% 42%, rgba(7, 12, 18, 0) 56%, rgba(7, 12, 18, .38) 100%);
}
.fmt .thumb span {
  position: absolute; bottom: 12px; left: 14px; z-index: 3;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62); font-weight: 600;
}
.fmt .thumb.has-media span { color: rgba(255, 255, 255, .82); }
.fmt .body { padding: 20px 22px 24px; }
.fmt .body h3 { font-size: 1.06rem; margin-bottom: 8px; }
.fmt .body p { color: var(--muted); font-size: .92rem; }

/* ---------- Alternating copy / media blocks ---------- */
.svc-block {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 50px; align-items: center; padding: 62px 0;
}
.svc-block.flip .svc-visual { order: 2; }
.svc-visual {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem; position: relative; overflow: hidden;
}
.svc-visual::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .07), transparent 60%);
  pointer-events: none;
}
.svc-visual img, .svc-visual video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1; border-radius: var(--radius);
}
.svc-visual.has-media::after {
  background: radial-gradient(125% 95% at 50% 40%, rgba(7, 12, 18, 0) 55%, rgba(7, 12, 18, .40) 100%);
  z-index: 2; border-radius: var(--radius);
}
.svc-visual.fintech-square-media {
  aspect-ratio: 1 / 1;
}
.svc-visual.fintech-square-media img {
  object-fit: contain;
}
.svc-block ul { list-style: none; margin-top: 20px; }
.svc-block li { padding: 7px 0; color: var(--muted); font-size: .95rem; }
.svc-block li::before { content: '✓  '; color: var(--green); font-weight: 700; }

/* ---------- Buyer / sub-sector segment cards ---------- */
.seg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.seg {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid rgba(16, 208, 208, .55);
  border-radius: var(--radius);
  padding: 28px 28px 24px;
}
.seg .seg-tag {
  font-family: var(--font-head);
  font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--teal); font-weight: 700; display: block; margin-bottom: 9px;
}
.seg h3 { font-size: 1.1rem; margin-bottom: 10px; }
.seg p { color: var(--muted); font-size: .93rem; margin-bottom: 14px; }
.seg ul { list-style: none; margin: 0; }
.seg li { padding: 5px 0; color: var(--muted); font-size: .9rem; }
.seg li::before { content: '—  '; color: var(--teal); }

/* ---------- Stakeholder / audience rows ---------- */
.aud-list { display: grid; gap: 14px; }
.aud-row {
  display: grid; grid-template-columns: 250px 1fr;
  gap: 24px; align-items: start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 24px;
}
.aud-row b { font-family: var(--font-head); font-size: .98rem; color: var(--text); }
.aud-row p { color: var(--muted); font-size: .93rem; }

/* ---------- Asset slots (swap in real footage / stills later) ---------- */
.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.slot-grid.two { grid-template-columns: repeat(2, 1fr); }
.aslot {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
  overflow: hidden;
  transition: transform .25s, border-color .25s;
  display: flex; flex-direction: column;
}
.aslot:hover { transform: translateY(-5px); border-color: rgba(16, 208, 208, .45); }
.aslot .aframe {
  aspect-ratio: 16 / 9;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: pointer;
}
.aslot .aframe.tall { aspect-ratio: 9 / 16; }
.aslot .aframe img, .aslot .aframe video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.aslot .aframe .play {
  position: absolute; z-index: 3;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(7, 12, 18, .65);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .25);
  display: flex; align-items: center; justify-content: center;
  transition: .25s;
}
.aslot:hover .aframe .play { background: var(--teal); }
.aslot .aframe .play svg { width: 19px; height: 19px; fill: #fff; margin-left: 3px; }
.aslot:hover .aframe .play svg { fill: #06131a; }
.aslot .atag {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--text);
  background: rgba(7, 12, 18, .7);
  border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 11px;
}
.aslot .abody { padding: 17px 20px 20px; }
.aslot .abody h3 { font-size: 1rem; margin-bottom: 5px; }
.aslot .abody p { color: var(--muted); font-size: .88rem; }
/* An empty slot still has to look deliberate, never like a broken image. */
.aslot.is-empty .aframe::before {
  content: attr(data-label);
  position: absolute; z-index: 3;
  font-family: var(--font-head);
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72); font-weight: 600;
  text-align: center; padding: 0 18px;
}
.aslot.is-empty .aframe::after {
  content: ''; position: absolute; inset: 12px; z-index: 2;
  border: 1px dashed rgba(255, 255, 255, .18); border-radius: 12px;
}
.aslot.is-empty { cursor: default; }
.aslot.is-empty:hover { transform: none; border-color: var(--line); }
.aslot.is-empty .aframe { cursor: default; }

.slot-note {
  color: var(--muted); font-size: .86rem; text-align: center; margin-top: 22px;
}

/* ---------- Vertical / short-form placeholders ---------- */
.reels-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.reel-phone {
  aspect-ratio: 9 / 16; border-radius: 20px;
  border: 1px solid var(--line); position: relative; overflow: hidden;
}
.reel-phone span {
  position: absolute; bottom: 12px; left: 12px; right: 12px; z-index: 3;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72); font-weight: 600;
}
.reel-phone::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent 55%);
}

/* ---------- Camera vs animation comparison ---------- */
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.vs-col {
  border-radius: var(--radius); border: 1px solid var(--line);
  padding: 30px 30px 26px; background: var(--card);
}
.vs-col.b { border-color: rgba(16, 208, 208, .4); background: var(--bg-3); }
.vs-col h3 { font-size: 1.06rem; margin-bottom: 16px; }
.vs-col ul { list-style: none; }
.vs-col li { padding: 8px 0; color: var(--muted); font-size: .93rem; }
.vs-col.a li::before { content: '✕  '; color: #e06a6a; font-weight: 700; }
.vs-col.b li::before { content: '✓  '; color: var(--green); font-weight: 700; }

/* ---------- Small tag list ---------- */
.tag-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.tag-row span {
  border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 12px; font-size: .82rem; color: var(--muted);
  background: rgba(14, 24, 38, .5);
}

/* ---------- Related links row ---------- */
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rel-card {
  display: block;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px 24px;
  transition: transform .22s, border-color .22s;
}
.rel-card:hover { transform: translateY(-3px); border-color: rgba(16, 208, 208, .45); }
.rel-card b { display: block; font-family: var(--font-head); font-size: 1rem; margin-bottom: 6px; }
.rel-card span { color: var(--muted); font-size: .88rem; }
.rel-card .rel-go { color: var(--teal); font-size: .84rem; font-weight: 600; display: block; margin-top: 10px; }

/* ---------- Hub page cards ---------- */
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hub-card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .25s, border-color .25s;
}
.hub-card:hover { transform: translateY(-5px); border-color: rgba(16, 208, 208, .45); }
.hub-card .hub-top {
  aspect-ratio: 16 / 7;
  position: relative;
  flex: none;
  overflow: hidden;
}
.hub-card .hub-top img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}
.hub-card .hub-top img[data-protected-thumbnail] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.hub-card .hub-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.hub-card h3 { font-size: 1.08rem; margin-bottom: 9px; }
.hub-card p { color: var(--muted); font-size: .91rem; flex: 1; }
.hub-card .hub-go { color: var(--teal); font-weight: 600; font-size: .86rem; margin-top: 16px; }
.hub-grid > .hub-card:last-child { grid-column: 2; }

/* ---------- Footer Industries strip ---------- */
/* The other English pages carry these two rules in a small inline <style>;
   the industry pages load this file, so they get them from here instead. */
.footer-industries a { transition: color .2s; }
.footer-industries a:hover { color: var(--teal) !important; }

/* ---------- Split "why animation" block ---------- */
/* Used on the industry pages to break up consecutive centred card grids:
   left column carries the section head, right column a short numbered list. */
.why-split {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 52px; align-items: start;
}
.why-split .sec-head { max-width: 460px; }
.why-list { display: grid; gap: 14px; }
.why-row {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px 24px;
  transition: transform .22s, border-color .22s;
}
.why-row:hover { transform: translateY(-3px); border-color: rgba(16, 208, 208, .45); }
.why-row .n {
  font-family: var(--font-head); font-size: .82rem; font-weight: 700;
  color: var(--teal); letter-spacing: .08em; padding-top: 3px;
}
.why-row b { display: block; font-family: var(--font-head); font-size: 1.02rem; margin-bottom: 6px; }
.why-row p { color: var(--muted); font-size: .92rem; }

@media (max-width: 960px) {
  .why-split { grid-template-columns: 1fr; gap: 30px; }
  .why-split .sec-head { max-width: none; }
}
@media (max-width: 640px) {
  .why-row { padding: 20px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .why-row { transition: none; }
  .why-row:hover { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hard-grid, .fmt-grid, .slot-grid, .rel-grid, .hub-grid { grid-template-columns: repeat(2, 1fr); }
  .hub-grid > .hub-card:last-child { grid-column: auto; }
  .prob-grid { grid-template-columns: repeat(2, 1fr); }
  .reels-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .svc-block { grid-template-columns: 1fr; gap: 26px; padding: 44px 0; }
  .svc-block.flip .svc-visual { order: 0; }
  .seg-grid, .vs-grid { grid-template-columns: 1fr; }
  .aud-row { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 640px) {
  .hard-grid, .fmt-grid, .prob-grid, .slot-grid, .slot-grid.two, .rel-grid, .hub-grid {
    grid-template-columns: 1fr;
  }
  .ind-crumbs { font-size: .8rem; }
  .hard-card, .prob, .seg, .vs-col { padding: 22px 20px; }
  .ind-chips { gap: 8px; }
  .ind-chip { font-size: .78rem; padding: 7px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .hard-card, .fmt, .aslot, .rel-card, .hub-card { transition: none; }
  .hard-card:hover, .fmt:hover, .aslot:hover, .rel-card:hover, .hub-card:hover { transform: none; }
}

/* ============================================================
   Zoom / extreme-scale stability
   Page (browser) zoom scales CSS pixels uniformly, so proportions between
   text and its box normally hold on their own. The two ways that breaks are
   an element that stops scaling with its content (a fixed px height, or a
   background-image box with no intrinsic size) and text with nothing to
   stop it from overflowing a fixed-size container. The rules below close
   both gaps for the pieces this stylesheet added; style.css's own
   "No horizontal cut-off anywhere" block (search that phrase) already
   covers the rest of the site the same way. */
.hero-media, .fmt .thumb, .svc-visual, .aframe {
  min-width: 0; /* a flex/grid item's implicit min-width can otherwise
                   outgrow its aspect-ratio box and force a scrollbar */
}
.page-hero h1, .sec-head h2, .hard-card h3, .fmt h3, .abody h3,
.hub-card h3, .aud-row b {
  overflow-wrap: break-word;
  word-break: break-word;
}
.ind-chip, .mini-stat, .atag {
  overflow-wrap: anywhere; /* a long chip/stat label wraps instead of
                               stretching its pill or overlapping a neighbour */
}

/* ---------- Featured case study ----------
   Deliberately not another bordered card: larger media, gradient ground and
   a split composition, so the portfolio section does not read as a third
   identical grid of dark rectangles. */
.case-feature {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 44px;
  align-items: center;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(48, 144, 224, .22), transparent 58%),
    radial-gradient(ellipse at 88% 100%, rgba(112, 208, 80, .16), transparent 58%),
    var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 30px;
  margin-bottom: 34px;
}
.case-media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.case-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.case-media:hover {
  transform: translateY(-4px);
  border-color: rgba(16, 208, 208, .45);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .5);
}
.case-media .play {
  position: absolute; z-index: 3;
  width: 66px; height: 66px; border-radius: 50%;
  background: rgba(7, 12, 18, .65);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .25);
  display: flex; align-items: center; justify-content: center;
  transition: .25s;
}
.case-media:hover .play { background: var(--teal); }
.case-media .play svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
.case-media:hover .play svg { fill: #06131a; }
.case-copy .case-tag {
  display: inline-block;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  color: var(--teal);
  border: 1px solid rgba(16, 208, 208, .4);
  border-radius: 999px; padding: 5px 13px; margin-bottom: 14px;
}
.case-copy h3 { font-size: 1.5rem; margin-bottom: 12px; }
.case-copy p { color: var(--muted); font-size: .95rem; margin-bottom: 16px; }
.case-copy ul { list-style: none; margin: 0 0 20px; }
.case-copy li { padding: 6px 0; color: var(--muted); font-size: .9rem; }
.case-copy li::before { content: '—  '; color: var(--teal); }

/* ---------- Hover parity for the remaining card-like containers ---------- */
.aud-row, .seg, .vs-col {
  transition: transform .22s, border-color .22s;
}
.aud-row:hover, .seg:hover, .vs-col:hover {
  transform: translateY(-3px);
  border-color: rgba(16, 208, 208, .45);
}
.ind-chip { transition: border-color .22s, color .22s; }
.ind-chip:hover { border-color: rgba(16, 208, 208, .5); color: var(--text); }

@media (max-width: 960px) {
  .case-feature { grid-template-columns: 1fr; gap: 26px; padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .case-media, .aud-row, .seg, .vs-col { transition: none; }
  .case-media:hover, .aud-row:hover, .seg:hover, .vs-col:hover { transform: none; }
}

/* A lone copy/media block inside its own <section> does not need the 62px
   that separates stacked blocks: the section padding already provides it. */
.svc-block.solo { padding: 0; }

/* ---------- One hover behaviour (industry-page panels) ----------
   Same lift, border and shadow as .card in style.css, so no panel on the
   page moves a different distance or sits still while its neighbours move. */
.hard-card, .prob, .fmt, .aslot, .rel-card, .hub-card,
.aud-row, .seg, .vs-col, .why-row, .case-media {
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.hard-card:hover, .prob:hover, .fmt:hover, .aslot:not(.is-empty):hover,
.rel-card:hover, .hub-card:hover, .aud-row:hover, .seg:hover,
.vs-col:hover, .why-row:hover, .case-media:hover {
  transform: translateY(-6px);
  border-color: rgba(16, 208, 208, .45);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}
/* Reserved slots are not clickable, so they must not invite a click. */
.aslot.is-empty:hover { transform: none; box-shadow: none; border-color: var(--line); }

@media (prefers-reduced-motion: reduce) {
  .hard-card, .prob, .fmt, .aslot, .rel-card, .hub-card,
  .aud-row, .seg, .vs-col, .why-row, .case-media { transition: none; }
  .hard-card:hover, .prob:hover, .fmt:hover, .aslot:hover, .rel-card:hover,
  .hub-card:hover, .aud-row:hover, .seg:hover, .vs-col:hover,
  .why-row:hover, .case-media:hover { transform: none; }
}

/* ---------- Portfolio CTA ----------
   Replaces the plain "See the full portfolio" text link under each industry
   portfolio. Deep-links to the matching Our Work category. Visible at rest
   (cyan-tinted border and fill), lifts with the site-wide .btn hover, and
   carries a keyboard focus ring. */
.portfolio-cta {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; margin-top: 36px; text-align: center;
}
.portfolio-cta .slot-note { margin-top: 0; }
.btn-portfolio {
  gap: 10px;
  border-color: rgba(16, 208, 208, .45);
  background: rgba(16, 208, 208, .07);
  color: var(--text);
}
.btn-portfolio .arr { display: inline-block; color: var(--teal); transition: transform .25s; }
.btn-portfolio:hover { color: var(--teal); background: rgba(16, 208, 208, .12); }
.btn-portfolio:hover .arr { transform: translateX(4px); }
.btn-portfolio:focus-visible,
.case-copy .btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* Poster-less thumbnails: the frame comes from the video itself (see main.js) */
.case-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.case-media video.vthumb,
.aslot .aframe video.vthumb { background: var(--bg-3); }

@media (prefers-reduced-motion: reduce) {
  .btn-portfolio .arr { transition: none; }
  .btn-portfolio:hover .arr { transform: none; }
}