/* Three case-study hero card repairs.
   Work scoped to hero visuals only: no homepage, provider or Figma changes. */

/* Each illustration owns its layout instead of borrowing the old rotated cards. */
.case-body .case-visual.case-visual--record,
.case-body[data-theme="jewellery"] .case-visual.case-visual--jewel,
.case-body[data-theme="backoffice"] .case-visual.case-visual--office {
  box-sizing:border-box;
  display:block;
  min-width:0;
  min-height:0;
  width:100%;
  padding:clamp(14px,2vw,22px);
  border-radius:15px;
  overflow:hidden;
  justify-content:initial;
  box-shadow:12px 14px 0 color-mix(in srgb,var(--cas-ink) 9%,transparent);
}
.case-body .case-visual.case-visual--record{background:#e6edf5;color:#192a44}
.case-body[data-theme="jewellery"] .case-visual.case-visual--jewel{background:#0d1624;color:#f8f2eb}
.case-body[data-theme="backoffice"] .case-visual.case-visual--office{background:#eaf5bd;color:#183538}
.case-visual--record:before,.case-visual--record:after,
.case-visual--jewel:before,.case-visual--jewel:after,
.case-visual--office:before,.case-visual--office:after{display:none!important}
.case-visual .case-art.record-showcase,
.case-visual .case-art.jewel-showcase,
.case-visual .case-art.office-showcase{
  box-sizing:border-box;width:100%;height:auto;min-width:0;
  overflow:visible;padding:0;position:relative;transform:none
}

/* TRENIC: legible separated record, evidence and review. */
.case-visual .record-showcase{
  display:flex;flex-direction:column;min-height:427px;gap:16px
}
.record-showcase__heading{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:29px;line-height:1.35;
  color:#243552;font-size:10px;font-weight:850;letter-spacing:.085em
}
.record-showcase__heading span{min-width:0}
.record-showcase__heading span:last-child{text-align:right}
.record-showcase__body{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.84fr);
  gap:14px;flex:1;min-height:0
}
.record-showcase .record-sheet,
.record-showcase .evidence-sheet{
  box-sizing:border-box;min-width:0;border-radius:9px;padding:clamp(17px,1.7vw,23px)
}
.record-showcase .record-sheet{
  background:#fff;box-shadow:0 6px 20px #1c345118;
  display:flex;flex-direction:column
}
.record-sheet__eyebrow,.evidence-sheet__eyebrow{
  font-size:10px;line-height:1.35;font-weight:850;letter-spacing:.08em
}
.record-sheet__eyebrow{color:#4b6285}
.record-sheet__title{
  display:block;font-family:var(--cas-font);
  font-size:clamp(23px,2.5vw,34px);
  font-weight:900;line-height:1.09;letter-spacing:-.052em;
  color:#192a44;margin:19px 0 12px
}
.record-sheet__description{
  color:#4f647f;margin:0;
  font-size:13px;line-height:1.5;max-width:30ch
}
.record-sheet__facts{margin-top:auto;padding-top:19px}
.record-sheet__fact{
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:8px;align-items:center;border-top:1px solid #dbe2ec;padding:10px 0
}
.record-sheet__fact small{font-size:9px;font-weight:850;color:#728099;letter-spacing:.065em}
.record-sheet__fact b{
  color:#294262;font-size:11px;font-weight:750;
  text-align:right;line-height:1.35;overflow-wrap:break-word
}
.record-showcase .evidence-sheet{
  background:#15243c;color:#f3f7f8;
  display:flex;flex-direction:column;align-items:flex-start
}
.evidence-sheet__eyebrow{color:#bfcee4}
.evidence-sheet__icon{
  display:block;flex:none;margin:31px 0 24px;
  width:52px;height:65px;border:1px solid #92b4d2;
  background:#d2e5f3;border-radius:4px;
  position:relative;box-shadow:5px 6px 0 #091625
}
.evidence-sheet__icon:before{
  content:"";position:absolute;top:18px;left:9px;width:29px;height:2px;
  background:#91b2ce;box-shadow:0 9px #91b2ce,0 18px #91b2ce
}
.evidence-sheet__title{
  display:block;color:#f3f7f8;
  font-size:clamp(19px,1.75vw,24px);letter-spacing:-.035em;
  line-height:1.17;margin:0 0 11px
}
.evidence-sheet__description{
  color:#bfcbda;margin:0;font-size:12px;line-height:1.5
}
.evidence-sheet__bottom{
  display:block;margin-top:auto;padding-top:24px;width:100%;
  color:#bad4c4;font-size:10px;letter-spacing:.055em;line-height:1.35
}

/* Jewellery: the entire original video stays visible.
   A purposeful side narrative replaces the broad unused black field. */
.case-visual .jewel-showcase{
  display:grid;grid-template-columns:minmax(0,1.10fr) minmax(0,.86fr);
  gap:clamp(16px,2vw,23px);align-items:stretch;min-height:430px;
  background:#0d1624;border-radius:10px
}
.jewel-showcase__media{
  position:relative;min-width:0;min-height:405px;
  border-radius:9px;background:#050709;overflow:hidden;
  display:grid;place-items:center
}
.jewel-showcase__media .jewel-video-surface{
  position:absolute;inset:0;
  background:#050709;overflow:hidden;
  transform:none;transition:transform .4s ease;
  border-radius:9px
}
.case-body[data-theme="jewellery"] .jewel-showcase .jewel-showreel{
  display:block;width:100%;height:100%;
  object-fit:contain!important;object-position:center;
  background:#050709;border:0
}
.jewel-showcase__media .jewel-video-control{
  right:12px;bottom:12px;z-index:5;min-height:38px;
  padding:9px 12px;background:#142235ed;color:#fff;
  border:1px solid #b6c4d9;border-radius:5px;
  font-size:12px
}
.jewel-showcase__media .jewel-video-error{
  z-index:5;left:12px;bottom:12px
}
.jewel-showcase__story{
  display:flex;flex-direction:column;min-width:0;
  padding:22px 0
}
.jewel-showcase__eyebrow{
  color:#f0c18a;font-size:10px;font-weight:850;
  letter-spacing:.085em;line-height:1.4
}
.jewel-showcase__title{
  display:block;color:#f8f2eb;
  font-family:var(--cas-font);font-size:clamp(25px,2.4vw,34px);
  font-weight:900;letter-spacing:-.05em;line-height:1.13;
  margin:clamp(23px,2.6vw,33px) 0 16px
}
.jewel-showcase__description{
  color:#cad3de;font-size:14px;line-height:1.5;margin:0
}
.jewel-showcase__stages{display:grid;gap:0;margin-top:auto;padding-top:24px}
.jewel-showcase__stages span{
  display:block;color:#e2e8ed;font-size:12px;line-height:1.32;
  border-top:1px solid #ffffff3d;padding:10px 0
}

/* BackOfficeKeeper: cards are parallel grid children.
   No absolute positions, rotations, clipped labels, or fake overlap. */
.case-visual .office-showcase{
  display:flex;flex-direction:column;min-height:413px;gap:16px
}
.office-showcase__head{
  display:flex;justify-content:space-between;align-items:center;
  gap:15px;min-height:28px;color:#183538;
  font-size:10px;font-weight:850;line-height:1.35;letter-spacing:.065em
}
.office-showcase__head span{min-width:0}
.office-showcase__head span:last-child{text-align:right}
.office-showcase__cards{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;align-items:stretch;flex:1;min-height:0
}
.office-message,.office-quote{
  box-sizing:border-box;min-width:0;
  display:flex;flex-direction:column;
  padding:clamp(17px,1.65vw,22px);
  border-radius:10px
}
.office-message{background:#153339;color:#f8fbf8}
.office-quote{background:#fffdf5;color:#183538;box-shadow:5px 6px 0 #8a9b6863}
.office-message__eyebrow,.office-quote__eyebrow{
  font-size:10px;font-weight:850;letter-spacing:.075em;line-height:1.34
}
.office-message__eyebrow{color:#9dd9c7}
.office-quote__eyebrow{color:#386e62}
.office-message__title,.office-quote__title{
  display:block;font-family:var(--cas-font);
  font-size:clamp(23px,2.52vw,34px);
  line-height:1.13;letter-spacing:-.052em;
  font-weight:900;margin:clamp(21px,2.4vw,32px) 0 12px
}
.office-message__description,.office-quote__description{
  font-size:13px;line-height:1.5;margin:0
}
.office-message__description{color:#c6d7d4}
.office-quote__description{color:#4f625b}
.office-message__foot,.office-quote__foot{
  display:block;margin-top:auto;padding-top:20px;
  font-size:10px;letter-spacing:.055em;line-height:1.35
}
.office-message__foot{color:#b5e4d5}
.office-quote__foot{color:#3e7768}
.office-showcase__stages{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px
}
.office-showcase__stages span{
  display:flex;align-items:center;justify-content:center;
  min-width:0;min-height:32px;
  font-size:11px;font-weight:850;text-align:center;line-height:1.3;
  padding:7px 5px;border:1px solid #7e986b70;border-radius:4px
}

/* Compact layouts stay readable rather than squeezing two paper sheets
   into a third of the available width. */
@media(max-width:560px){
  .case-body .case-visual.case-visual--record,
  .case-body[data-theme="jewellery"] .case-visual.case-visual--jewel,
  .case-body[data-theme="backoffice"] .case-visual.case-visual--office{
    padding:13px;min-height:0
  }
  .case-visual .record-showcase,.case-visual .office-showcase{min-height:0}
  .record-showcase__body{grid-template-columns:minmax(0,1fr);gap:10px}
  .record-showcase .record-sheet,.record-showcase .evidence-sheet{padding:18px}
  .record-sheet__title{font-size:27px;margin:14px 0 10px}
  .record-sheet__facts{margin-top:22px}
  .record-showcase .evidence-sheet{
    display:grid;grid-template-columns:52px minmax(0,1fr);gap:7px 12px;align-items:start
  }
  .evidence-sheet__eyebrow{grid-column:1/-1}
  .evidence-sheet__icon{grid-row:2/5;margin:9px 0 5px;width:43px;height:53px}
  .evidence-sheet__icon:before{top:14px;left:7px;width:28px}
  .evidence-sheet__title{grid-column:2;font-size:20px;margin:4px 0}
  .evidence-sheet__description{grid-column:2}
  .evidence-sheet__bottom{grid-column:1/-1;padding-top:12px}
  .case-visual .jewel-showcase{
    grid-template-columns:minmax(0,1fr);min-height:0;gap:0
  }
  .jewel-showcase__media{min-height:315px}
  .jewel-showcase__story{padding:20px 12px 11px}
  .jewel-showcase__title{font-size:28px;margin:13px 0}
  .jewel-showcase__stages{
    grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;
    margin-top:22px;padding-top:0
  }
  .jewel-showcase__stages span{
    font-size:10px;text-align:center;
    border:1px solid #ffffff3d;border-radius:3px;padding:9px 3px
  }
  .office-showcase__cards{grid-template-columns:minmax(0,1fr);gap:10px}
  .office-message,.office-quote{min-height:165px;padding:17px}
  .office-message__title,.office-quote__title{font-size:25px;margin:16px 0 10px}
  .office-message__foot,.office-quote__foot{padding-top:14px}
  .office-showcase__head{font-size:10px}
  .office-showcase__stages{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .jewel-showcase__media .jewel-video-surface{
    transform:none!important;transition:none!important
  }
}