/* Shared chrome for the static case-study pages (served at /cs/cs.css).
   Loaded LAST so it wins over the WP/Elementor CSS. */

/* ── 16px radius on all content (image-widget) images ── */
.c .c-widget-image img {
  border-radius: 16px !important;
}

/* ── Top bar: logo + 48px hamburger ── */
.cs-bar {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  /* Match the global content container: px-6 / md:px-10 / lg:100px. */
  padding: 16px 24px;
  color: #fff;
}
@media (min-width: 768px) {
  .cs-bar { padding: 20px 40px; }
}
@media (min-width: 1024px) {
  .cs-bar { padding-left: 100px; padding-right: 100px; }
}
.cs-logo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #fff;
  text-decoration: none;
  font-size: clamp(1rem, 1.2vw, 1.375rem);
  letter-spacing: -0.01em;
}
.cs-logo:hover { color: #ff9200; }
.cs-burger {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
}
.cs-burger:hover { color: #ff9200; }

/* ── Full-screen menu ── */
.cs-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  overflow-y: auto;
  background: #000;
  color: #fff;
}
.cs-menu.open { display: block; }
.cs-menu-inner {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: 16px 24px;
}
@media (min-width: 768px) { .cs-menu-inner { padding: 20px 40px; } }
@media (min-width: 1024px) { .cs-menu-inner { padding: 20px 100px; } }
.cs-top { display: flex; align-items: center; justify-content: space-between; }
.cs-close {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 9999px;
  color: #fff;
  cursor: pointer;
}
.cs-close:hover { background: #fff; color: #000; }

.cs-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 64px;
  padding-top: 64px;
}
@media (min-width: 768px) {
  .cs-body {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    padding-top: 80px;
  }
}
.cs-nav-list { display: flex; flex-direction: column; gap: 28px; list-style: none; margin: 0; padding: 0; }
.cs-nav-list li { display: flex; align-items: baseline; gap: 16px; }
.cs-num { flex: none; width: 32px; font-family: ui-monospace, monospace; font-size: 12px; color: rgba(255, 255, 255, 0.4); }
.cs-nav-link {
  font-family: "Avantt", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
  font-size: clamp(2.5rem, 6.5vw, 5.5rem);
  color: #fff;
  text-decoration: none;
}
.cs-nav-link:hover { color: #ff9200; }

.cs-right { display: flex; flex-direction: column; gap: 48px; }
.cs-eyebrow {
  margin: 0 0 16px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.5);
}
/* left column holds the nav + the Let's-talk CTA underneath it */
.cs-left { display: flex; flex-direction: column; gap: 64px; }
@media (min-width: 768px) { .cs-left { gap: 96px; } }

/* Products I built — headline + two stacked thumbs (larger, spaced) */
.cs-products {
  width: 100%;
  max-width: 28rem;
}
@media (min-width: 768px) {
  .cs-products {
    width: clamp(14rem, calc(88.888svh - 12rem), 28rem);
  }
}
.cs-products-heading {
  margin: 0 0 clamp(12px, 2svh, 24px);
  font-family: "Avantt", sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 4svh, 1.875rem);
  color: #fff;
}
.cs-thumbs { display: flex; flex-direction: column; gap: clamp(16px, 3svh, 32px); width: 100%; }
.cs-thumb { display: block; text-decoration: none; color: #fff; }
.cs-thumb-media { overflow: hidden; border-radius: 16px; aspect-ratio: 16 / 9; }
.cs-thumb-media video, .cs-thumb-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-thumb-placeholder { display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.06); }
.cs-thumb-placeholder span { font-family: "Avantt", sans-serif; font-weight: 800; font-size: 14px; color: rgba(255, 255, 255, 0.4); }
.cs-thumb-label { margin: 8px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.8); }
/* Let's-talk CTA block */
.cs-cta-block { display: flex; flex-direction: column; gap: 20px; }
.cs-letstalk {
  font-family: "Avantt", sans-serif;
  font-weight: 800;
  line-height: 1;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  color: #fff;
  text-decoration: none;
}
.cs-letstalk:hover { color: #ff9200; }
.cs-getintouch { display: inline-flex; align-items: center; gap: 16px; font-size: clamp(1.5rem, 2.5vw, 1.875rem); color: #fff; text-decoration: none; }
.cs-arrow { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 9999px; }
.cs-socials { display: flex; align-items: center; gap: 20px; }
.cs-socials a { color: #fff; display: inline-flex; }
.cs-socials a:hover { color: #ff9200; }

/* Global hover: menu items + text buttons turn the hero-headline orange (#ff9200). */
.cs-logo, .cs-burger, .cs-nav-link, .cs-letstalk, .cs-getintouch, .cs-socials a { transition: color 0.2s ease; }
.cs-getintouch:hover { color: #ff9200; }

/* ── Image carousels → modern, scrollbar-free, swipeable sliders ──
   Swiper's JS isn't initialised on these static pages, so each
   .c-image-carousel-wrapper is a plain overflow-x scroller. Hide the OS
   scrollbar, snap to slides, and (via /cs/cs.js) add drag-to-scroll plus a dots
   indicator so visitors can tell it's a swipeable gallery. */
.c-image-carousel-wrapper {
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; /* momentum scroll on touch */
  scrollbar-width: none;             /* Firefox */
  -ms-overflow-style: none;          /* legacy Edge */
  cursor: grab;                      /* signals it's draggable */
}
.c-image-carousel-wrapper::-webkit-scrollbar {
  display: none;                     /* Chrome, Safari, Edge */
  width: 0;
  height: 0;
}
.c-image-carousel-wrapper .swiper-slide { scroll-snap-align: start; }
/* don't let images ghost-drag while you swipe */
.c-image-carousel-wrapper img { -webkit-user-drag: none; }

/* active drag: snap off (no fighting the cursor), grabbing cursor, no selection */
.c-image-carousel-wrapper.cs-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.c-image-carousel-wrapper.cs-dragging .swiper-slide { pointer-events: none; }

/* ── Swipe gesture hint (built in /cs/cs.js) — the "it's swipeable" cue ──
   A small floating pill with an animated hand + horizontal arrows. It loops a
   subtle swipe motion to invite interaction, then fades out the first time the
   visitor scrolls or drags the carousel. */
.cs-carousel-host { position: relative; }
.cs-swipe-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  border-radius: 9999px;
  background: rgba(15, 15, 15, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none; /* never blocks the drag/swipe underneath */
  transform: translateX(-50%);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.cs-swipe-hint.cs-hide {
  opacity: 0;
  transform: translateX(-50%) translateY(6px) scale(0.94);
}
.cs-swipe-hint .cs-swipe-icon { display: block; flex: none; overflow: visible; }

/* looping micro-animations: the hand slides, the arrows pulse outward */
.cs-swipe-hint .cs-hand { animation: cs-hand-swipe 1.8s ease-in-out infinite; }
.cs-swipe-hint .cs-arrow-r { animation: cs-arrow-pulse-r 1.8s ease-in-out infinite; }
.cs-swipe-hint .cs-arrow-l { animation: cs-arrow-pulse-l 1.8s ease-in-out infinite; }
@keyframes cs-hand-swipe {
  0%, 100% { transform: translateX(-2.5px); }
  50% { transform: translateX(2.5px); }
}
@keyframes cs-arrow-pulse-r {
  0%, 100% { opacity: 0.3; transform: translateX(-1px); }
  50% { opacity: 1; transform: translateX(1px); }
}
@keyframes cs-arrow-pulse-l {
  0%, 100% { opacity: 0.3; transform: translateX(1px); }
  50% { opacity: 1; transform: translateX(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-swipe-hint .cs-hand,
  .cs-swipe-hint .cs-arrow-r,
  .cs-swipe-hint .cs-arrow-l { animation: none; }
  .cs-swipe-hint { transition: opacity 0.2s ease; }
}