/* Auraa Case Studies — front-end styles */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap');

:root{
  --acs-font: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --acs-blue: #0047AB;
  --acs-badge: #1f52d6;
  --acs-gutter: 5.56%;
  --acs-header-h: 104px;   /* height of the fixed site header — adjust to yours */
}

/* ============ GRID CARDS (shortcode) ============ */
.auraa-cases__grid{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; align-items:start; gap: clamp(16px,1.6vw,26px); font-family: var(--acs-font); }
.auraa-cases__grid .case{
  position:relative; display:block; overflow:hidden; border-radius:12px;
  background:#0d0d0d; text-decoration:none;
}
/* image sets the card height → full image shown, nothing cropped */
.case__media{ position:relative; overflow:hidden; transition: filter .45s ease, transform .6s ease; }
.case__media img{ width:100%; height:auto; display:block; }
.case__grad{ position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,0) 62%); transition: opacity .4s ease; }
.case__foot{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding: clamp(20px,2vw,30px); transition: opacity .35s ease; }
.case__title{ margin:0 0 14px; color:#fff; font-weight:700; font-size: clamp(20px,1.9vw,30px); }
.case__tags{ display:flex; flex-wrap:wrap; gap:8px; }
.case__tags span{ background:#fff; color:#111; font-size: clamp(12px,.9vw,14px); padding:6px 13px; border-radius:6px; white-space:nowrap; }
.case__hover{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; pointer-events:none; transition: opacity .4s ease, visibility .4s ease; }
.case__logo{ max-width:48%; max-height:54%; object-fit:contain; display:block; }
.case__badge{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width: clamp(108px,11vw,150px); height: clamp(108px,11vw,150px); border-radius:50%; background: var(--acs-badge); color:#fff; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:500; font-size: clamp(14px,1.05vw,17px); line-height:1.2; padding:10px; pointer-events:none; transition: left .18s ease-out, top .18s ease-out, opacity .3s ease; }
@media (hover: hover) and (pointer: fine){
  .case:hover .case__media{ filter: blur(8px) brightness(.5) grayscale(.35); transform:scale(1.06); }
  .case:hover .case__grad{ opacity:0; }
  .case:hover .case__foot{ opacity:0; }
  .case:hover .case__hover{ opacity:1; visibility:visible; }
}
@media (max-width:820px){
  .auraa-cases__grid{ grid-template-columns:1fr; }
  /* touch: never show the hover overlay; keep image + title + tags visible */
  .case__hover{ display:none; }
  .case__media{ filter:none !important; transform:none !important; }
  .case__grad, .case__foot{ opacity:1 !important; }
}

/* ============ SINGLE CASE STUDY ============ */
.cs{ font-family: var(--acs-font); color:#0a0a0a; }
.cs *{ box-sizing:border-box; }

.cs-hero{
  position:relative; min-height: 500px;
  background-color:#0b1730;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding: calc(var(--acs-header-h) + 20px) var(--acs-gutter) 44px; overflow:hidden;
}
.cs-hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.cs-hero__tint{ position:absolute; inset:0; z-index:1; background: linear-gradient(120deg, rgba(6,12,30,.72), rgba(20,50,140,.45) 60%, rgba(30,120,150,.30)); }
.cs-back{ position:absolute; top: calc(var(--acs-header-h) + 20px); left:var(--acs-gutter); z-index:2; width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.35); color:#fff; display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:20px; }
@media (max-width:768px){
  :root{ --acs-header-h: 84px; }
  .cs-hero{ min-height:400px; }
}
.cs-hero__mid{ position:relative; z-index:2; color:#fff; }
.cs-hero__eyebrow{ font-size: clamp(14px,1.1vw,18px); opacity:.9; }
.cs-hero__eyebrow sup{ font-size:.6em; }
.cs-hero__title{ margin:.2em 0 .35em; font-weight:700; text-transform:uppercase; letter-spacing:-.01em; font-size: clamp(34px,5.5vw,80px); line-height:1; }
.cs-hero__tags{ font-size: clamp(14px,1.2vw,19px); opacity:.92; }

.cs-wrap{ padding: clamp(50px,7vh,90px) var(--acs-gutter) clamp(60px,9vh,120px); }

/* section labels */
.cs-label{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:18px; margin-top:34px; border-top:1px solid rgba(0,0,0,.12); color: var(--acs-blue); font-weight:500; font-size: clamp(14px,1vw,17px); }
.cs-label:first-child{ margin-top:0; }
.cs-label__i{ display:inline-flex; align-items:center; gap:9px; }
.cs-spin{ width:18px; height:18px; animation: acsSpin 4s linear infinite; }
@keyframes acsSpin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .cs-spin{ animation:none; } }

/* headings + reveal */
.cs-h{ margin:26px 0 18px; font-weight:700; font-size: clamp(24px,3vw,42px); line-height:1.12; letter-spacing:-.01em; }
.cs-h.reveal-armed{ clip-path: inset(0 0 100% 0); transition: clip-path .9s cubic-bezier(.22,1,.36,1); }
.cs-h.reveal-armed.is-revealed{ clip-path: inset(0 0 0 0); }
.cs-p{ margin:0 0 10px; max-width:640px; color:#3a3a3a; font-size: clamp(15px,1.1vw,17px); line-height:1.6; }

/* two-column top */
.cs-body{ display:grid; grid-template-columns: 1fr 340px; gap: clamp(30px,4vw,64px); }
.cs-side{ align-self:start; }
.cs-meta{ border:1px solid rgba(0,0,0,.14); border-radius:10px; overflow:hidden; }
.cs-meta__row{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:16px 18px; border-bottom:1px solid rgba(0,0,0,.1); font-size: clamp(13px,.95vw,15px); }
.cs-meta__row:last-child{ border-bottom:0; }
.cs-meta__row span{ color:#555; }
.cs-meta__row b{ font-weight:600; text-align:right; }
.cs-meta__svc{ max-width:190px; }
.cs-meta__row a{ color: var(--acs-blue); text-decoration:none; }
.cs-side__img{ width:100%; height:auto; border-radius:10px; margin-top:16px; display:block; }

/* results */
.cs-results{ margin-top:10px; }
.cs-stats{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; margin-top:26px; }
.cs-stat{ border:1px solid rgba(0,0,0,.14); border-radius:10px; padding:22px; }
.cs-stat__v{ font-weight:700; font-size: clamp(24px,2.4vw,34px); line-height:1; }
.cs-stat__v sup{ font-size:.5em; }
.cs-stat__line{ display:block; height:1px; background:rgba(0,0,0,.12); margin:14px 0; }
.cs-stat__l{ color:#666; font-size: clamp(13px,.95vw,15px); line-height:1.45; }
.cs-results__p{ margin-top:30px; max-width:640px; }

/* quote / testimonial section */
.cs-quote{ border:1px solid rgba(0,0,0,.14); border-radius:10px; padding:clamp(24px,2.4vw,36px); margin-top:26px; max-width:900px; }
.cs-quote__text{ margin:0; color:#0a0a0a; font-size:clamp(16px,1.3vw,20px); line-height:1.55; }
.cs-quote__line{ display:block; height:1px; background:rgba(0,0,0,.12); margin:clamp(18px,2vw,26px) 0; }
.cs-quote__by{ color:#0a0a0a; font-weight:600; font-size:clamp(14px,1vw,16px); }

/* CTAs */
.cs-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top: clamp(36px,5vh,60px); }
.cs-btn{ display:inline-flex; align-items:center; gap:10px; padding:15px 28px; border-radius:999px; text-decoration:none; font-weight:500; font-size: clamp(14px,1vw,17px); transition: transform .2s ease; }
.cs-btn:hover{ transform:translateY(-1px); }
.cs-btn img{ width:15px; height:15px; }
.cs-btn--blue{ background: var(--acs-blue); color:#fff; }
.cs-btn--blue img{ filter: brightness(0) invert(1); }
.cs-btn--ghost{ background:transparent; color:#0a0a0a; border:1px solid rgba(0,0,0,.35); }

@media (max-width:860px){
  .cs-body{ grid-template-columns:1fr; }
  .cs-stats{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .cs-stats{ grid-template-columns:1fr; }
}

/* ============ ARCHIVE ============ */
.cs-archive{ font-family: var(--acs-font); }
.cs-archive__inner{ max-width:1300px; margin:0 auto; padding: clamp(60px,9vh,120px) var(--acs-gutter); }
.cs-archive__title{ font-weight:700; font-size: clamp(30px,4vw,56px); margin:0 0 clamp(30px,5vh,60px); letter-spacing:-.01em; }