/* =========================================================================
   PAGE: GATED CASE STUDY (public/cases/case.blade.php) — page-specific CSS.
   Linked from the view's @section('css'). All rules scoped under .page-case-study.
   Dark "one-pager" header card, two-column body (report intro + thumbnail
   detail on the left, lead-capture form on the right), plus tablet + mobile
   overrides. The form reuses the shared library (.ui-form / .field /
   .checkbox / .btn.btn--dark / .form-success-msg in global-2026.css) — not forked.

   Breakpoints (project-wide):
     mobile  : width < 768
     tablet  : 768 .. 1023
     desktop : width >= 1024  (Figma artboard 1512, content 1296)
   ========================================================================= */

/* ---------- Anti-cascade overrides (defeat layout.min.css + bootstrap.min.css) ---------- */
.page-case-study a:link,
.page-case-study a:visited,
.page-case-study a:hover,
.page-case-study a:focus,
.page-case-study a:active { color: inherit; text-decoration: none; }

.page-case-study button {
  font-family: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.page-case-study img { display: block; max-width: 100%; }

.page-case-study .container {
  width: 1320px;
  max-width: 1320px;
  padding-left: 12px;
  padding-right: 12px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* Re-assert shared footer link colors (link reset above beats the shared rule). */
.page-case-study .footer__links a:link,
.page-case-study .footer__links a:visited,
.page-case-study .footer__links a:active { color: var(--color-neutral-lighter); }
.page-case-study .footer__links a:hover,
.page-case-study .footer__links a:focus { color: #ffffff; }

/* ---------- Sticky footer ---------- */
.page-case-study {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page-case-study .case-study-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding-top: 115px;       /* clears the fixed nav — matches the product pages' top clearance */
  padding-bottom: 0;
}
.page-case-study .case-study-main > div.container:first-of-type {
  margin-bottom: 64px;
}
/* The footer comes from @include('blocks.footer-2026') (a .footer-2026 wrapper),
   not the prototype's old .footer-wrap. margin-top:auto pushes it to the bottom. */
.page-case-study .case-study-main > .footer-2026 {
  margin-top: auto;
  margin-bottom: 30px;
}

/* ===========================================================
   HEADER ONE-PAGER — dark card: photo collage + gradient,
   brand icon + name on top, GEO/Platform meta on the bottom
   =========================================================== */
.page-case-study .cs-header {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 290px;
  padding: 32px;
  border-radius: var(--radius-lg);          /* 32px */
  background: var(--mobupps-black);          /* #141414 base behind the photo */
  margin-bottom: 32px;
}
.page-case-study .cs-header__bg { position: absolute; inset: 0; z-index: 0; }
.page-case-study .cs-header__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.page-case-study .cs-header__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #141414 33%, rgba(0, 0, 0, 0) 100%);
}
.page-case-study .cs-header__top,
.page-case-study .cs-header__meta { position: relative; z-index: 1; }
.page-case-study .cs-header__photo { display: none; }   /* mobile-only middle photo */

.page-case-study .cs-header__top {
  display: flex;
  align-items: center;
  gap: 24px;
}
.page-case-study .cs-header__icon {
  flex: 0 0 93px;
  width: 93px;
  height: 93px;
  border-radius: var(--radius-md);          /* 16px */
  overflow: hidden;
}
.page-case-study .cs-header__icon img { width: 100%; height: 100%; object-fit: cover; }
/* Optional stroke — toggled per case study (brand_icon_stroke). Keeps a dark/black
   icon from blending into the dark header. Drawn as an OVERLAY ring (pseudo-element)
   so the box AND the image stay exactly 93×93 whether the stroke is on or off — a
   real border would shrink the image by 4px. border-radius:inherit follows the icon
   radius (16px desktop / 8px mobile). */
.page-case-study .cs-header__icon--stroke { position: relative; }
.page-case-study .cs-header__icon--stroke::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--color-neutral-200);
  border-radius: inherit;
  pointer-events: none;
}
.page-case-study .cs-header__brand { display: flex; flex-direction: column; min-width: 0; }
.page-case-study .cs-header__eyebrow {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-medium);         /* 18 / 16 */
  line-height: 1.5;
  color: rgba(212, 212, 212, 0.6);
}
.page-case-study .cs-header__title {
  margin: 0;
  font-family: var(--font-family-headline);
  font-weight: 500;
  font-size: var(--fs-headline-medium);     /* 45 desktop */
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #cccccc;
}

.page-case-study .cs-header__meta {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.page-case-study .cs-meta { display: flex; flex-direction: column; gap: 4px; }
.page-case-study .cs-meta__label {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-medium);         /* 18 / 16 */
  line-height: 1.4;
  color: rgba(212, 212, 212, 0.6);
}
.page-case-study .cs-meta__value {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-large);          /* 22 / 18 */
  line-height: 1.4;
  color: #c1c1c1;
}

/* ===========================================================
   BODY — left column (report intro + thumbnail detail) | form
   =========================================================== */
.page-case-study .cs-body {
  display: flex;
  align-items: flex-start;
  gap: 85px;
}
.page-case-study .cs-body__left {
  flex: 0 0 746px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Report intro */
.page-case-study .cs-intro { display: flex; flex-direction: column; gap: 12px; }
.page-case-study .cs-intro__title {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-title-small);         /* Title-Small: 28 desktop / 25 tablet+mobile (tablet pinned below) */
  line-height: 1.5;
  color: var(--color-neutral-1000);
}
.page-case-study .cs-intro__sub {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-medium);         /* Body-Medium: 18 desktop / 16 tablet+mobile (tablet pinned below) */
  line-height: 1.5;
  color: var(--color-neutral-1000);
}

/* Rich body (gated case study — Laraberg HTML; may contain pasted images).
   Only the /case-study/{slug} view uses .cs-richtext; the legacy .cs-intro__sub
   above is untouched. Paragraphs match Body-Medium; images get a 16px radius and
   scale down to fit (full width on mobile). */
.page-case-study .cs-richtext { display: flex; flex-direction: column; gap: 12px; }
.page-case-study .cs-richtext p,
.page-case-study .cs-richtext li {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-medium);         /* 18 desktop / 16 tablet+mobile (pinned below) */
  line-height: 1.5;
  color: var(--color-neutral-1000);
}
.page-case-study .cs-richtext figure { margin: 0; }
/* Images render at the width the manager set in the editor (the <img> width
   attribute) on EVERY breakpoint. max-width:100% only takes over when an image
   is WIDER than the available column — so on mobile a big picture shrinks to
   full width while a small logo keeps its set size. No forced width:100%. */
.page-case-study .cs-richtext img {
  display: block;
  max-width: 100%;
  height: auto !important;                   /* beat the editor's inline height so aspect stays correct when max-width shrinks it */
  border-radius: 16px;                       /* requested — rounded body images */
}

/* Lead-capture form card (grey → success message uses default white slot) */
.page-case-study .cs-form {
  flex: 0 0 465px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  background: var(--bg-secondary);              /* #f2f2f7 */
  border-radius: var(--radius-md);              /* 16px */
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.18);   /* Figma shadow_XL */
}
.page-case-study .cs-form__title {
  margin: 0;
  font-family: var(--font-family-headline);
  font-weight: 500;
  font-size: 20px;                              /* Figma form heading (one-off, no token) */
  line-height: 1.2;
  color: var(--color-neutral-1000);
}

/* =========================================================================
   TABLET — 768 .. 1023  (two equal columns, stacked thumbnail/desc)
   ========================================================================= */
@media (max-width: 1023px) {
  .page-case-study .container {
    width: 100%;
    max-width: 100%;
    padding-left: 32px;
    padding-right: 32px;
  }

  .page-case-study .case-study-main { padding-top: 96px; }   /* matches product pages (tablet) */
  .page-case-study .case-study-main > div.container:first-of-type { margin-bottom: 48px; }

  .page-case-study .cs-header { margin-bottom: 24px; }

  .page-case-study .cs-body { gap: 20px; }
  .page-case-study .cs-body__left { flex: 1 1 0; min-width: 0; }
  .page-case-study .cs-form { flex: 1 1 0; min-width: 0; }

  /* Title-Small / Body-Medium pinned to their tablet sizes — the global tokens
     only drop at <768, but the design calls for 25 / 16 from tablet down. */
  .page-case-study .cs-intro__title { font-size: 25px; }
  .page-case-study .cs-intro__sub   { font-size: 16px; }
  .page-case-study .cs-richtext p,
  .page-case-study .cs-richtext li  { font-size: 16px; }
}

/* =========================================================================
   MOBILE — <768  (single column; form moves between intro and detail)
   ========================================================================= */
@media (max-width: 767px) {
  .page-case-study .container { padding-left: 16px; padding-right: 16px; }

  .page-case-study .case-study-main { padding-top: 80px; }   /* matches product pages (mobile) */
  .page-case-study .case-study-main > div.container:first-of-type { margin-bottom: 32px; }

  /* Header becomes a solid-dark card with the photo as a separate middle band. */
  .page-case-study .cs-header {
    justify-content: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: var(--radius-md);          /* 16px */
    background: #000000;
    margin-bottom: 40px;
  }
  .page-case-study .cs-header__bg { display: none; }
  .page-case-study .cs-header__photo {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 376 / 300;
    border-radius: var(--radius-sm);          /* 8px */
    overflow: hidden;
  }
  .page-case-study .cs-header__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 98% center; }
  .page-case-study .cs-header__icon { flex-basis: 64px; width: 64px; height: 64px; border-radius: var(--radius-sm); }
  .page-case-study .cs-header__title { font-size: var(--fs-title-medium); }   /* 28 */
  .page-case-study .cs-header__meta { gap: 24px; }

  /* Stack the body; the form sits below the intro. */
  .page-case-study .cs-body { flex-direction: column; gap: 40px; }
  .page-case-study .cs-body__left { display: contents; }
  .page-case-study .cs-intro,
  .page-case-study .cs-form { flex: 0 0 auto; width: 100%; }
  .page-case-study .cs-intro { order: 1; }
  .page-case-study .cs-form  { order: 2; padding: 24px; }   /* tighter card padding on mobile */
}

/* =========================================================================
   SHARED FORM + BUTTON LIBRARY (page-neutral, generic classes).
   Still scoped here only because global-2026.css doesn't carry .btn / .ui-form /
   .field* / .checkbox* yet (it does carry .form-success-msg). Same library is
   forked in career-detail.css and home-2026.css — RECOMMEND the backend dev
   promote it to global-2026.css so every page shares one definition.
   ========================================================================= */

/* ---- Buttons (primary CTA = black). Compound .btn.btn--dark (0,2,0) beats
   the page's anti-cascade `.page-case-study button { background:transparent }`
   reset; the :link/:visited/... states (0,3,0) beat the `a { color:inherit }`
   reset so an <a> button keeps its white label. ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  font-family: var(--font-family-body);
  border: 0;
  cursor: pointer;
}
.btn.btn--dark {
  background: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-fg);
  font-weight: 500;
  font-size: var(--fs-body-extra-small);
  line-height: 20px;
  min-height: 36px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, transform 0.05s;
}
.btn.btn--dark:link,
.btn.btn--dark:visited,
.btn.btn--dark:hover,
.btn.btn--dark:focus,
.btn.btn--dark:active { color: var(--color-btn-primary-fg); }
.btn.btn--dark:hover:not(:disabled) { background: var(--color-btn-primary-bg-hover); }
.btn.btn--dark:active:not(:disabled) { transform: scale(0.99); }
.btn.btn--dark:disabled,
.btn.btn--dark[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn--block { width: 100%; }

/* ---- Form controls (shadcn base). ---- */
.ui-form { display: flex; flex-direction: column; gap: 24px; }
/* Honeypot — hidden from real users; bots that fill it are rejected server-side
   (matches the contact-us input[name="surname"] spam trap). */
.ui-form input[name="surname"] { display: none; }

.field { display: flex; flex-direction: column; gap: 4px; }
.field__label {
  font-family: var(--font-family-body);
  font-weight: 500;
  font-size: var(--fs-body-extra-small);   /* 14px */
  line-height: 20px;
  color: #0a0a0a;
}
.field__control {
  width: 100%;
  min-height: 36px;
  padding: 7.5px 12px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: var(--radius-sm);
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-extra-small);   /* 14px */
  line-height: 20px;
  color: #0a0a0a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field__control::placeholder { color: #737373; }
.field__control:focus {
  border-color: var(--color-blue-300);
  box-shadow: 0 0 0 3px rgba(106, 102, 228, 0.15);
}
.field__control:invalid:not(:placeholder-shown),
.field__control.is-invalid {
  border-color: var(--color-red-400);
  box-shadow: 0 0 0 3px rgba(228, 37, 33, 0.10);
}

/* Checkbox — 16px box, custom check, shadcn look. */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.checkbox__box {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1px solid #d4d4d4;
  border-radius: var(--radius-xs);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.checkbox input:checked + .checkbox__box {
  background: var(--color-btn-primary-bg);
  border-color: var(--color-btn-primary-bg);
}
.checkbox input:checked + .checkbox__box::after {
  content: "";
  display: block;
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(0, -1px);
}
.checkbox.is-invalid .checkbox__box { border-color: var(--color-red-400); }
.checkbox__label {
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-extra-small);
  line-height: 20px;
  color: #404040;
}

/* =========================================================================
   LEGACY CASE STUDY BODY (the 5 case_articles only) — restores the real
   {!! $case->article !!} body, styled like the BLOG ARTICLE body. No form,
   no subscribe, no social. Body wrapper matches the blog article body width
   (856px), centered (no sidebar); full width on tablet/mobile.
   ========================================================================= */
/* Two-column: body (left, 856px) + related sidebar (right, desktop-only) —
   same layout as the blog article. */
.page-case-study .cs-layout {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}
.page-case-study .cs-article {
  flex: 0 0 856px;
  max-width: 856px;
  min-width: 0;
}
.page-case-study .cs-aside {
  flex: 0 0 296px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.page-case-study .cs-aside__title {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-body);
  font-weight: 500;
  font-size: var(--fs-body-large);      /* 22 */
  line-height: normal;
  color: var(--color-neutral-1000);
}
.page-case-study .cs-related {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
@media (max-width: 1023px) {
  .page-case-study .cs-layout { display: block; }
  .page-case-study .cs-article { flex: none; width: 100%; max-width: 100%; }
  .page-case-study .cs-aside { display: none; }   /* sidebar is desktop-only, like the blog */
}

/* ===========================================================
   ARTICLE BODY (legacy case studies) — same rules as the blog
   article body, re-scoped to .page-case-study. Styles the real
   {!! $case->article !!} Gutenberg HTML. (5 legacy cases only.)
   =========================================================== */
.page-case-study .article-body {
  display: flow-root;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-medium);
  line-height: 1.6;
  color: var(--color-neutral-1000);
  /* Long unbroken URLs used as link text (e.g. https://…/chatwithchase/) must
     wrap, or they overflow the column on narrow screens. */
  overflow-wrap: break-word;
  word-break: break-word;
}
.page-case-study .article-body h2 {
  margin: 40px 0 12px;
  font-family: var(--font-family-headline);
  font-weight: 500;
  font-size: var(--fs-title-small);     /* 28 → 25 (mobile) */
  line-height: 1.3;
  color: var(--color-neutral-1000);
}
.page-case-study .article-body h3 {
  margin: 32px 0 12px;
  font-family: var(--font-family-headline);
  font-weight: 500;
  font-size: var(--fs-body-large);      /* 22 */
  line-height: 1.35;
  color: var(--color-neutral-1000);
}
.page-case-study .article-body h4 {
  margin: 24px 0 10px;
  font-family: var(--font-family-headline);
  font-weight: 500;
  font-size: var(--fs-body-medium);     /* 18 */
  line-height: 1.4;
  color: var(--color-neutral-1000);
}
.page-case-study .article-body > h2:first-child,
.page-case-study .article-body > h3:first-child { margin-top: 0; }
.page-case-study .article-body p {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-medium);     /* 18 → 16 (mobile) */
  line-height: 1.6;
  color: var(--color-neutral-1000);
}
.page-case-study .article-body p + p { margin-top: 1em; }
.page-case-study .article-body a:link,
.page-case-study .article-body a:visited {
  color: var(--color-neutral-1000);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-case-study .article-body a:hover,
.page-case-study .article-body a:focus { color: var(--color-blue-300); }
.page-case-study .article-body strong { font-weight: 600; }
.page-case-study .article-body em { font-style: italic; }
.page-case-study .article-body ul,
.page-case-study .article-body ol {
  margin: 16px 0;
  padding-left: 1.5em;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-medium);
  line-height: 1.6;
  color: var(--color-neutral-1000);
}
.page-case-study .article-body ul { list-style: disc; }
.page-case-study .article-body ol { list-style: decimal; }
.page-case-study .article-body li { margin: 6px 0; }
.page-case-study .article-body li::marker { color: var(--color-neutral-600); }
.page-case-study .article-body figure,
.page-case-study .article-body__figure { margin: 32px 0; }
.page-case-study .article-body figure.aligncenter { text-align: center; }
.page-case-study .article-body img,
.page-case-study .article-body__figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);      /* 16 */
}
.page-case-study .article-body figcaption {
  margin-top: 8px;
  font-family: var(--font-family-body);
  font-size: var(--fs-body-extra-small);
  line-height: 1.4;
  color: var(--color-neutral-600);
  text-align: center;
}
.page-case-study .article-body__figure + h2 { margin-top: 8px; }
.page-case-study .article-body iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 32px 0;
  border: 0;
  border-radius: var(--radius-md);
}
.page-case-study .article-body blockquote {
  margin: 24px 0;
  padding: 8px 0 8px 20px;
  border-left: 3px solid var(--color-neutral-300);
  font-style: italic;
  color: var(--color-neutral-600);
}
.page-case-study .article-body hr {
  margin: 32px 0;
  border: 0;
  border-top: 1px solid var(--color-neutral-200);
}
.page-case-study .article-body figure.aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.page-case-study .article-body .aligncenter { text-align: center; }
.page-case-study .article-body .wp-block-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
}
.page-case-study .article-body .wp-block-file a { text-decoration: underline; }
.page-case-study .article-body .wp-block-file .wp-block-file__button {
  display: inline-block;
  padding: 8px 18px;
  background: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-fg);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.page-case-study .article-body figure.alignleft {
  float: left; max-width: 45%; margin: 6px 28px 18px 0;
}
.page-case-study .article-body figure.alignright {
  float: right; max-width: 45%; margin: 6px 0 18px 28px;
}
.page-case-study .article-body figure.alignleft img,
.page-case-study .article-body figure.alignright img { width: 100%; }
.page-case-study .article-body figure.is-resized { display: inline-block; max-width: 100%; }
.page-case-study .article-body figure.is-resized img { width: 100%; height: auto; }
.page-case-study .article-body figure.aligncenter.is-resized { display: block; }
.page-case-study .article-body .flbox {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 36px 0;
}
.page-case-study .article-body .flbox-pic {
  flex: 0 0 280px;
  width: 280px;
  max-width: 280px;
}
.page-case-study .article-body .flbox-pic figure { margin: 0; }
.page-case-study .article-body .flbox-pic img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 50%;        /* round portrait, like the live article */
}
.page-case-study .article-body .flbox > div:last-child { flex: 1 1 0; min-width: 0; }
.page-case-study .article-body .wp-block-columns {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  margin: 24px 0;
}
.page-case-study .article-body .wp-block-column { flex: 1 1 0; min-width: 0; }
.page-case-study .article-body .wp-block-column > *:first-child { margin-top: 0; }
.page-case-study .article-body .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0;
  list-style: none;
  padding: 0;
}
.page-case-study .article-body .wp-block-button__link,
.page-case-study .article-body .wp-block-button a {
  display: inline-block;
  padding: 12px 24px;
  background: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-fg);
  border-radius: var(--radius-sm);
  font-weight: 500;
  text-decoration: none;
}
.page-case-study .article-body .wp-block-button__link:hover,
.page-case-study .article-body .wp-block-button a:hover { background: var(--color-btn-primary-bg-hover); }
.page-case-study .article-body .wp-block-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0;
  list-style: none;
  padding: 0;
}
.page-case-study .article-body .wp-block-gallery figure { flex: 1 1 220px; margin: 0; }
.page-case-study .article-body .wp-block-cover { margin: 24px 0; border-radius: var(--radius-md); overflow: hidden; }
.page-case-study .article-body .wp-block-group { margin: 24px 0; }
.page-case-study .article-body .wp-block-separator {
  margin: 32px auto;
  border: 0;
  border-top: 1px solid var(--color-neutral-200);
  max-width: 100px;
}
@media (max-width: 767px) {
  .page-case-study .article-body__figure { margin: 24px 0; }
  .page-case-study .article-body .flbox { flex-direction: column; align-items: flex-start; gap: 16px; }
  .page-case-study .article-body .flbox-pic { flex: 0 0 auto; width: 160px; max-width: 160px; }
  .page-case-study .article-body .wp-block-columns { flex-direction: column; gap: 16px; }
  .page-case-study .article-body figure.alignleft,
    .page-case-study .article-body figure.alignright { float: none; max-width: 100%; margin: 16px 0; }
}
/* Related-case cards — the cases-hub .case-card look (image · brand logo · title
   · circular arrow), re-scoped for the sidebar on the detail page. */
.page-case-study .case-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* when a row grows (a title wraps), the extra
                                       height opens between image and logo+text */
  padding: 20px 20px 0;
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);   /* #dad9d9 */
  border-radius: var(--radius-md);              /* 16px */
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.page-case-study .case-card:hover {
  /* Figma shadow_XL — the elevated state previewed on one card in the mockup */
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.18);
  transform: translateY(-4px);
}

.page-case-study .case-card__media {
  width: 100%;
  aspect-ratio: 376 / 300;
  border-radius: var(--radius-sm);              /* 8px */
  overflow: hidden;
}
.page-case-study .case-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-case-study .case-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
}
.page-case-study .case-card__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.page-case-study .case-card__logo {
  display: flex;
  align-items: center;
  height: 35px;
}
.page-case-study .case-card__logo img {
  width: auto;
  height: auto;
  max-height: 30px;
  max-width: 125px;         /* logo box 125x30 (@2x = 250x60 upload) — wider wordmarks fit to width */
  object-fit: contain;
  object-position: left center;
}
.page-case-study .case-card__title {
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-medium);             /* 18px */
  line-height: 1.3;
  color: var(--color-neutral-1000);
}
.page-case-study .case-card__arrow {
  flex: 0 0 auto;
  margin-bottom: 5px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-case-study .case-card__arrow img { width: 28px; height: 28px; }
.page-case-study .case-card:hover .case-card__arrow { transform: translate(3px, -3px); }

/* =========================================================================
   OUR LATEST CASE STUDIES (gated /case-study/{slug} only) — a 3-up grid of
   the .case-card component, revealed a few seconds AFTER a successful form
   submit (JS adds .is-revealed + scrolls here). Hidden on load so it only
   appears once the visitor has converted. Grid columns mirror the cases hub
   (3 desktop → 2 tablet → 1 mobile). scroll-margin-top clears the fixed nav
   so the title isn't hidden under it when we scroll to the block.
   ========================================================================= */
.page-case-study .cs-latest {
  display: none;                 /* revealed on successful form submit */
  flex-direction: column;
  gap: 32px;
  margin-top: 80px;
  scroll-margin-top: 115px;      /* matches .case-study-main top clearance */
  /* Fade + slide target. The reveal is a TWO-STEP handoff (see the JS): the
     block is first put into layout still invisible (.is-revealed), then one
     frame later .is-visible triggers this transition — a smooth fade-in
     instead of a sharp display:block pop. */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-case-study .cs-latest.is-revealed { display: flex; }   /* step 1: in layout, still invisible */
.page-case-study .cs-latest.is-visible { opacity: 1; transform: translateY(0); }   /* step 2: fade + slide in */
.page-case-study .cs-latest__title { margin: 0; }
.page-case-study .cs-latest__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (prefers-reduced-motion: reduce) {
  .page-case-study .cs-latest { transition: none; transform: none; }
}

@media (max-width: 1023px) {
  .page-case-study .cs-latest { margin-top: 64px; scroll-margin-top: 96px; gap: 24px; }
  .page-case-study .cs-latest__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 767px) {
  .page-case-study .cs-latest { margin-top: 48px; scroll-margin-top: 80px; }
  .page-case-study .cs-latest__grid { grid-template-columns: repeat(1, 1fr); }
}