/* /case-studies — AISHTMLNEWDESIGN-490
   Page-owned styles. EVERY selector is scoped to #page-case-studies or a
   cs- prefixed class: this sheet must never style body, a bare
   element, #ais-header or #ais-footer. The document reset
   (html,body{margin:0}) is owned by the shared layout sheet.
   Font is Inter; no body/UI text below 16px. */

/* ════════════════════════════════════════════════════════════════════════
   VISUAL DIRECTION — "SOPHISTICATED B2B" (2026-09-28 revision)
   The 2026-09-22 pass ("CASE FILE") fixed the layout bug -- a single
   full-width row at every breakpoint -- and the resulting image crop, but
   kept the same cream/manila "records office" skin: hard 1px borders, 2-3px
   corners, a rust-orange tab colour invented just for this page. Client
   feedback, correctly: "design not changed, only bug you have fixed."
   This pass changes the actual look, on top of the working grid:
     - the page's own invented purple (#3e4095) is replaced with the SITE'S
       real primary brand purple, #3b259c -- confirmed via computed style
       on the live header's "Contact Us" button (class `primary_bg`) and
       matched in the shared footer sheet. Previously this page was
       internally consistent with itself but not with the rest of the site.
     - the manila/cream field and hard borders are replaced with a soft
       cool-neutral surface, white card panels, real shadows and generous
       (14-16px) radius -- the "premium neutral/gold" pairing the
       frontend-design skill lists as an iGaming-appropriate palette.
     - the rust-orange "file tab" motif is replaced with a warm bronze/gold
       accent (#92600f) used deliberately (badges, the hero CTA, hover
       states), not as a leftover decorative colour.
     - filter tabs become full pills; the "3px double border" newspaper
       rule under each section heading becomes a short rounded accent bar.
   Nothing structural changes: same hero contract (rule 24), same one-CTA-
   per-section (rule 25), same zero running motion (rule 26), same content,
   same links, same images. Every colour pair below re-checked against
   WCAG AA at the point it's actually used (documented per rule, not just
   asserted) -- see the commit for the full contrast table.
   Palette   ink #0f172a · primary #3b259c · primary-dark #2b1b73
             bg #f6f5fb · paper #ffffff · rule #e6e3f2 · muted #475569
             gold #92600f · gold-soft #fbeed9
   ════════════════════════════════════════════════════════════════════════ */

#page-case-studies{
  --cf-ink:#0f172a;
  --cf-indigo:#3b259c;
  --cf-indigo-dark:#2b1b73;
  --cf-indigo-soft:#eeebfa;
  --cf-bg:#f6f5fb;
  --cf-paper:#ffffff;
  --cf-rule:#e6e3f2;
  --cf-gold:#92600f;
  --cf-gold-soft:#fbeed9;
  --cf-muted:#475569;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--cf-ink);
  background:var(--cf-bg);
}
#page-case-studies *,#page-case-studies *::before,#page-case-studies *::after{box-sizing:border-box;}
#page-case-studies .cf-wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

/* ── hero — rule 24: static gradient, no media, centred ~900px column ────
   Gradient stops now the SITE's actual brand purple (#3b259c, confirmed
   against the live header's "Contact Us" button), not the page's own
   earlier approximation (#3e4095). Border swapped from the old rust tab
   colour to the new bronze/gold accent. */
#page-case-studies .cf-hero{
  background:linear-gradient(107deg,#14103f 0%,#2a1c74 55%,#3b259c 100%);
  padding:88px 24px 92px;
  text-align:center;
  border-bottom:4px solid var(--cf-gold);
}
#page-case-studies .cf-hero__col{max-width:900px;margin:0 auto;}
#page-case-studies .cf-hero__h1{
  margin:0;
  font-size:clamp(2.5rem,6vw,4.25rem);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.02em;
  color:#fffdf8;
}
#page-case-studies .cf-hero__sub{
  margin:20px auto 0;
  max-width:44ch;
  font-size:clamp(1rem,1.5vw,1.2rem);
  font-weight:400;
  line-height:1.6;
  color:#cfcbe4;
}
#page-case-studies .cf-btn{
  display:inline-block;
  margin:34px 0 0;
  padding:15px 32px;
  border:2px solid var(--cf-gold);
  border-radius:10px;
  background:var(--cf-gold);
  color:#fffdf8;
  font:inherit;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 8px 20px -10px rgba(146,96,15,.55);
  transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
}
#page-case-studies .cf-btn:hover,
#page-case-studies .cf-btn:focus-visible{
  background:transparent;color:#f5dfb8;
  transform:translateY(-2px);
  box-shadow:0 10px 24px -10px rgba(146,96,15,.4);
}
#page-case-studies .cf-btn--ghost{
  margin-top:40px;
  background:transparent;
  border-color:var(--cf-indigo);
  color:var(--cf-indigo);
  box-shadow:none;
}
#page-case-studies .cf-btn--ghost:hover,
#page-case-studies .cf-btn--ghost:focus-visible{
  background:var(--cf-indigo);color:#fffdf8;
  transform:none;box-shadow:0 8px 20px -10px rgba(59,37,156,.4);
}

/* ── breadcrumb rail ──────────────────────────────────────────────────── */
#page-case-studies .cf-crumb{background:var(--cf-paper);border-bottom:1px solid var(--cf-rule);}
#page-case-studies .cf-crumb__list{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin:0;padding:14px 0;list-style:none;
  font-size:.95rem;color:var(--cf-muted);
}
#page-case-studies .cf-crumb__list li+li::before{content:"/";margin-right:8px;color:var(--cf-rule);}
#page-case-studies .cf-crumb__list a{color:var(--cf-indigo);font-weight:600;}
#page-case-studies .cf-crumb__list a:hover{text-decoration:underline;}

/* ── the index ────────────────────────────────────────────────────────── */
#page-case-studies .cf-index{padding:72px 0 80px;}
/* The old "3px double border-bottom" ran the full row width -- a print/
   newspaper divider. Replaced with a short gradient accent bar under just
   the heading text, the more common contemporary B2B pattern. */
#page-case-studies .cf-index__head{
  display:flex;flex-wrap:wrap;gap:12px 32px;align-items:baseline;
  padding-bottom:8px;
}
#page-case-studies .cf-index__h2{
  margin:0;flex:1 1 auto;
  font-size:clamp(1.6rem,3vw,2.35rem);font-weight:800;letter-spacing:-.015em;
}
#page-case-studies .cf-index__h2::after{
  content:"";display:block;margin-top:16px;
  width:56px;height:4px;border-radius:999px;
  background:linear-gradient(90deg,var(--cf-indigo),var(--cf-gold));
}
#page-case-studies .cf-index__count{
  margin:0;font-size:.95rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cf-muted);
}

#page-case-studies .cf-cats{
  display:flex;flex-wrap:wrap;gap:10px;
  margin:26px 0 38px;
}
/* Filter tabs are now full pills, not 2px-cornered rectangles. */
#page-case-studies .cf-cat{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 20px;
  font:inherit;font-size:1rem;font-weight:600;
  color:var(--cf-ink);background:var(--cf-paper);
  border:1px solid var(--cf-rule);border-radius:999px;cursor:pointer;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
#page-case-studies .cf-cat__n{
  font-size:.85rem;font-weight:700;line-height:1;
  padding:4px 8px;border-radius:999px;
  background:var(--cf-bg);color:var(--cf-muted);
}
#page-case-studies .cf-cat:hover{border-color:var(--cf-indigo);box-shadow:0 4px 12px -6px rgba(59,37,156,.25);}
#page-case-studies .cf-cat:focus-visible{outline:3px solid var(--cf-indigo);outline-offset:2px;}
#page-case-studies .cf-cat.is-on{background:var(--cf-indigo);color:#fffdf8;border-color:var(--cf-indigo);}
#page-case-studies .cf-cat.is-on .cf-cat__n{background:var(--cf-gold);color:#fffdf8;}

/* ── the case files — RESPONSIVE CARD GRID ───────────────────────────────
   The original build kept every record as a full-width row (a single
   `1fr` track at every breakpoint, forever), so 70 case studies rendered as
   one ~20,000px scroll and the header comment's own stated intent —
   "a single wide column that pairs up at desktop" — was never implemented.
   That also broke the specimen shots: a fixed 300px-wide column against a
   row whose height was dictated by the longest paragraph forced
   object-fit:cover to crop a 2:1 source down to whatever tall, narrow box
   the text produced — routinely 35-45% of the image's width sliced off.
   This replaces the row with an auto-fill card grid (same mechanism as
   /our-portfolio's .op-grid) with a fixed 16:10 shot so every image gets a
   predictable, mild crop instead of an accidental, severe one. Outlier
   source images (portrait or near-square, see the JS "smart fit" below)
   are switched to object-fit:contain rather than cropped further. */
#page-case-studies .cf-files{
  display:grid;gap:28px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  margin:0;padding:0;list-style:none;
}
#page-case-studies .cf-file{margin:0;}
#page-case-studies .cf-file[hidden]{display:none;}
#page-case-studies .cf-file__a{
  display:flex;flex-direction:column;height:100%;
  background:var(--cf-paper);
  border:1px solid var(--cf-rule);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 1px 1px rgba(15,23,42,.03);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
#page-case-studies .cf-file__a:hover,
#page-case-studies .cf-file__a:focus-visible{
  border-color:var(--cf-indigo);
  transform:translateY(-4px);
  box-shadow:0 20px 38px -22px rgba(43,27,115,.4);
}
#page-case-studies .cf-file__a:focus-visible{outline:3px solid var(--cf-indigo);outline-offset:2px;}

#page-case-studies .cf-file__shot{
  position:relative;display:block;
  /* 2:1, not the 16:10 used elsewhere on the site (e.g. /our-portfolio) —
     65 of these 70 specimen shots are a shared banner template, all exactly
     400x200, with a contact-info bar (phone/email/logo) running edge to
     edge. 16:10 still cropped ~10% off BOTH sides, clipping that bar's
     outermost text. Matching the box to the template's own ratio removes
     the crop entirely for the majority; see the JS "smart fit" below for
     the few sources that aren't 2:1. */
  aspect-ratio:2/1;background:var(--cf-ink);overflow:hidden;
}
#page-case-studies .cf-file__shot img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform .28s ease;
}
#page-case-studies .cf-file__a:hover .cf-file__shot img{transform:scale(1.045);}
/* Set by the page's own JS (no third-party script) once an image's real
   aspect ratio is known to be far from this box's 2:1 — a portrait or
   near-square specimen shot. Shows the whole shot on its own soft field
   instead of cropping it past recognition. */
#page-case-studies .cf-file__shot img.cf-file__shot--contain{
  object-fit:contain;background:var(--cf-bg);padding:12px;
}
#page-case-studies .cf-file__a:hover .cf-file__shot--contain{transform:none;}

#page-case-studies .cf-file__ref{
  /* Solid fill, not translucent — this sits over 70 different photos and a
     glass/blur treatment can't guarantee AA against every one of them
     (the same reason the rule 39A contrast sweep skips image backdrops
     rather than guessing). An opaque badge is contrast-safe regardless of
     what's underneath.
     Anchored top-RIGHT, not top-left: every one of these banner shots has
     the AIS logo baked into its own top-left corner (checked directly on
     the source images, not assumed) -- a left-anchored badge sits on top
     of that logo. Top-right is clear on all 70. */
  position:absolute;top:12px;right:12px;z-index:1;
  min-width:28px;padding:5px 9px;
  background:var(--cf-ink);color:#f8fafc;
  font-size:13px;font-weight:800;line-height:1;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  border-radius:8px;
}
#page-case-studies .cf-file__tag{
  position:absolute;bottom:12px;left:12px;z-index:1;
  padding:5px 10px;
  background:var(--cf-gold);color:#fffdf8;
  font-size:13px;font-weight:700;line-height:1;letter-spacing:.05em;
  text-transform:uppercase;
  border-radius:8px;
}

#page-case-studies .cf-file__body{
  display:flex;flex-direction:column;gap:10px;
  padding:20px 22px 22px;flex:1 1 auto;
}
#page-case-studies .cf-file__name{
  margin:0;
  font-size:1.1rem;font-weight:700;line-height:1.35;letter-spacing:-.01em;
  color:var(--cf-ink);
}
#page-case-studies .cf-file__desc{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  line-clamp:3;overflow:hidden;
  font-size:1rem;line-height:1.6;color:var(--cf-muted);
}
#page-case-studies .cf-file__desc div,
#page-case-studies .cf-file__desc span,
#page-case-studies .cf-file__desc p{margin:0;font-size:inherit;color:inherit;display:inline;}
#page-case-studies .cf-file__more{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:auto;padding-top:8px;
  font-size:.95rem;font-weight:700;color:var(--cf-indigo);
}
#page-case-studies .cf-file__more img{display:block;transition:transform .18s ease;}
#page-case-studies .cf-file__a:hover .cf-file__more{text-decoration:underline;}
#page-case-studies .cf-file__a:hover .cf-file__more img{transform:translateX(4px);}
#page-case-studies .cf-empty{
  margin:36px 0 0;padding:22px;
  background:var(--cf-paper);border:1px dashed var(--cf-rule);border-radius:12px;
  font-size:1rem;color:var(--cf-muted);text-align:center;
}

/* ── customer success stories ─────────────────────────────────────────── */
#page-case-studies .cf-voices{
  padding:76px 0 84px;
  background:var(--cf-ink);
  color:#e2e8f0;
  text-align:center;
}
#page-case-studies .cf-voices__h2{
  margin:0 0 44px;
  font-size:clamp(1.6rem,3vw,2.35rem);font-weight:800;letter-spacing:-.015em;
  color:#fffdf8;
}
#page-case-studies .cf-stories{
  display:grid;grid-template-columns:1fr;gap:34px;
  margin:0;padding:0;list-style:none;text-align:left;
}
#page-case-studies .cf-story{
  display:flex;flex-direction:column;gap:18px;
  padding:26px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(226,232,240,.14);
  border-radius:14px;
}
#page-case-studies .cf-story__facade{
  /* centred in the card, per the user's request (2026-09-22) — on the facade
     itself, not via align-items on .cf-story, which would shrink-to-fit and
     centre the quote text with it. */
  margin-left:auto;margin-right:auto;
  position:relative;display:block;
  width:120px;height:120px;padding:0;
  border:2px solid var(--cf-gold);border-radius:50%;
  background:transparent;cursor:pointer;overflow:hidden;
  /* font:inherit — a bare <button> otherwise takes the UA's 13.33px, which
     trips the "no UI text below 16px" floor even though the only glyph in
     here is the ▶ overlay. */
  font:inherit;
}
#page-case-studies .cf-story__facade:focus-visible{outline:3px solid #f5dfb8;outline-offset:3px;}
#page-case-studies .cf-story__face{display:block;width:100%;height:100%;object-fit:cover;}
#page-case-studies .cf-story__play{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(15,23,42,.45);
  font-size:1.6rem;color:#fffdf8;
}
#page-case-studies .cf-story__facade:hover .cf-story__play{background:rgba(146,96,15,.6);}
#page-case-studies .cf-story__frame{
  width:100%;aspect-ratio:16/9;border:0;border-radius:12px;
}
#page-case-studies .cf-story__quote{margin:0;}
#page-case-studies .cf-story__quote p{
  margin:0;font-size:1rem;line-height:1.66;color:#d6dce6;
}
/* Pre-existing defect, found and fixed in the same pass as the record-grid
   rework: .cf-btn--ghost's resting state is --cf-indigo text on transparent,
   which is legible on the paper backgrounds it was designed for but sits
   here on .cf-voices' dark ink background — #3e4095 on #181a2b measures
   1.94:1 (need 4.5:1), effectively invisible. Scoped to this section rather
   than changed at the base rule, since .cf-btn--ghost may still be used on a
   light background elsewhere. Reuses #cfcbe4, already this page's own
   light-on-ink tone (the hero subtitle), rather than a new colour. */
#page-case-studies .cf-voices .cf-btn--ghost{border-color:#cfcbe4;color:#cfcbe4;}
#page-case-studies .cf-voices .cf-btn--ghost:hover,
#page-case-studies .cf-voices .cf-btn--ghost:focus-visible{border-color:var(--cf-indigo);}

/* ── area we serve ────────────────────────────────────────────────────── */
#page-case-studies .cf-area{padding:72px 0 88px;background:var(--cf-paper);}
#page-case-studies .cf-area__h2{
  margin:0 0 34px;
  font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.015em;
}
#page-case-studies .cf-regions{
  display:grid;grid-template-columns:1fr;gap:26px;
  margin:0;padding:0;list-style:none;
}
#page-case-studies .cf-region{
  padding:22px 0 0;border-top:3px solid var(--cf-indigo);
}
#page-case-studies .cf-region h3{
  display:flex;align-items:center;gap:9px;
  margin:0 0 10px;
  font-size:.95rem;font-weight:800;letter-spacing:.1em;color:var(--cf-gold);
}
#page-case-studies .cf-region__tel{
  display:inline-block;margin-bottom:8px;
  font-size:1.05rem;font-weight:700;color:var(--cf-indigo);
}
#page-case-studies .cf-region__tel:hover{text-decoration:underline;}
#page-case-studies .cf-region p{margin:0;font-size:1rem;line-height:1.6;color:var(--cf-muted);}

/* ── CTA modal — shared shell, identical on every CTA page ──────────────────
   Taken VERBATIM from /about-us, which took it from
   /online-sweepstakes-gambling-software via design-clone's extract_design.py.
   Values are PINNED, not re-tuned per page: the Get In Touch form must present
   the same on every URL, so this shell deliberately does not inherit CASE
   FILE's ink, type scale or radius.
   🔴 This replaces a hand-rolled shell whose iframe min-height was 560px —
   the survey is two slides of different heights and 560px clips slide 2's
   SUBMIT bar. The pinned value is 860px. */
#page-case-studies .cf-modal{
  color:#2c2419;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.72;
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding: 100px 20px 20px 20px;
  overflow-y:auto;
  background:rgba(20,13,7,.72);
}
#page-case-studies .cf-modal.is-open{display:flex;}
#page-case-studies .cf-modal__box{
  color:#2c2419;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.72;
  position:relative;
  width:100%;
  max-width:620px;
  margin:auto;
  border-radius:16px;
  background:#fff;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
  /* hidden, not auto: clips the embedded form's square-cornered white
     document to the panel radius, so all FOUR corners stay rounded. */
  overflow:hidden;
}
#page-case-studies .cf-modal__x{
  position:absolute;
  top:12px;right:12px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border:1px solid #ddd2ba;
  border-radius:50%;
  background:#fff;
  color:#1d1509;
  cursor:pointer;
  transition:background-color .16s ease,color .16s ease;
}
#page-case-studies .cf-modal__x:hover{background:#2b1c12;color:#fbf6ec;}
#page-case-studies .cf-modal__x:focus-visible{outline:3px solid var(--cf-gold);outline-offset:2px;}
#page-case-studies .cf-modal iframe{
  display:block;
  width:100%;
  min-height:860px;
  border:0;
}

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width:900px){
  #page-case-studies .cf-files{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;}
}
@media (min-width:861px){
  #page-case-studies .cf-stories{grid-template-columns:repeat(3,1fr);}
  #page-case-studies .cf-regions{grid-template-columns:repeat(2,1fr);gap:30px 40px;}
}
@media (min-width:1200px){
  #page-case-studies .cf-regions{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:640px){
  #page-case-studies .cf-files{grid-template-columns:1fr;}
}
@media (max-width:520px){
  #page-case-studies .cf-hero{padding:64px 20px 68px;}
  #page-case-studies .cf-index{padding:52px 0 60px;}
  #page-case-studies .cf-cats{gap:8px;}
  #page-case-studies .cf-cat{padding:0 14px;}
  /* Keep the radius on phones too — the panel is a card at every width. */
  #page-case-studies .cf-modal{padding: 100px 12px 12px 12px;}
  #page-case-studies .cf-modal__box{max-width:none;border-radius:14px;}
}
@media (prefers-reduced-motion:reduce){
  #page-case-studies .cf-file__a,#page-case-studies .cf-btn{transition:none;}
  #page-case-studies .cf-file__a:hover,
  #page-case-studies .cf-btn:hover{transform:none;}
}