/*
 * Case Studies 3a — portfolio page.
 *
 * Typography deliberately carries nothing of its own. The 2a stylesheet this
 * replaces self-hosted Instrument Serif and IBM Plex Mono, which no other page
 * on the site uses: measured live, the homepage renders H1 and H2 in DM Sans
 * 700 while /project rendered them in Instrument Serif 400 at 104px. Everything
 * here inherits the site face loaded by includes/enqueue.php
 * (DM Sans 400/500/700) so the page reads as part of the site, not a visitor.
 *
 * Weights stop at 700. The mockup reaches for 800 in places, but the site only
 * downloads 400, 500 and 700 — asking for 800 would either add a font request
 * above the fold or get faux-bolded by the browser.
 */

/* ---------- tokens ---------- */
.cs3a {
  /* Brand blues, taken from the mockup and already in use site-wide. */
  --cs3a-ac: #00acec;
  --cs3a-ac-lt: #4babe7;
  --cs3a-ac-dp: #2481bd;
  --cs3a-ac-ink: #1c6a99;
  --cs3a-ac-tint: #e7f1f8;

  --cs3a-ink: #1B2A3B;
  --cs3a-body: #3C5065;
  --cs3a-soft: #5B7086;
  --cs3a-muted: #8397AA;
  --cs3a-faint: #C2D2DF;

  --cs3a-line: #e2e7ec;
  --cs3a-surface: #f0f2f5;
  --cs3a-panel: #f7fafc;
  --cs3a-dark: #191919;
  --cs3a-darker: #111111;

  --cs3a-radius: 16px;
  --cs3a-radius-sm: 9px;

  /* Content column matches the site's Bootstrap .container (1140px). The
     mockup uses 1240px; 1140 keeps this page aligned with every other one. */
  --cs3a-max: 1140px;
  --cs3a-gutter: 15px;

  display: block;
  color: var(--cs3a-ink);
  background: #fff;
}

.cs3a *,
.cs3a *::before,
.cs3a *::after { box-sizing: border-box; }

.cs3a a { color: inherit; text-decoration: none; }
.cs3a img { max-width: 100%; }
.cs3a h1, .cs3a h2, .cs3a h3, .cs3a h4 { margin: 0; text-wrap: pretty; }
.cs3a p { margin: 0; text-wrap: pretty; }
/* ol as well as ul: the breadcrumb is an ordered list for semantics, and
   without this it renders its decimal markers over the hero. */
.cs3a ul,
.cs3a ol { margin: 0; padding: 0; list-style: none; }
.cs3a li { list-style: none; }

.cs3a-wrap {
  width: 100%;
  max-width: calc(var(--cs3a-max) + var(--cs3a-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--cs3a-gutter);
}

/* Small caps label above a heading. */
.cs3a-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.cs3a-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--cs3a-ac);
  flex: none;
}
.cs3a-eyebrow span {
  color: var(--cs3a-ac-dp);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.cs3a-eyebrow--onDark span { color: var(--cs3a-ac-lt); }

/* ---------- buttons ----------
 * Selectors are qualified with .cs3a a because the `.cs3a a { color: inherit }`
 * reset above scores 0,1,1 and would otherwise beat a bare .cs3a-btn--solid at
 * 0,1,0 — which painted both hero buttons in the dark body ink, on a dark hero.
 */
.cs3a-btn {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  padding: 16px 28px;
  border-radius: var(--cs3a-radius-sm);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.cs3a a.cs3a-btn--solid { background: var(--cs3a-ac); color: #fff; }
.cs3a a.cs3a-btn--solid:hover { background: var(--cs3a-ac-dp); color: #fff; }
.cs3a a.cs3a-btn--ghost { border: 1px solid rgba(255, 255, 255, .35); color: #fff; }
.cs3a a.cs3a-btn--ghost:hover { border-color: var(--cs3a-ac); color: var(--cs3a-ac-lt); }

/* ---------- hero ---------- */
.cs3a-hero {
  position: relative;
  background: var(--cs3a-dark) center / cover no-repeat;
  isolation: isolate;
}
.cs3a-hero__scrim,
.cs3a-hero__scrim2 {
  position: absolute;
  inset: 0;
  z-index: -1;
}
/* The team photo, on the right only. The mask fades it out before it reaches
   the headline, so the copy never sits on faces, and luminosity blending drops
   its colour so it belongs to the dark hero instead of sitting on top of it. */
.cs3a-hero__people {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  z-index: -2;
  background-position: center 22%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .5;
  mix-blend-mode: luminosity;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 26%, rgba(0, 0, 0, .9) 70%, rgba(0, 0, 0, .55) 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 26%, rgba(0, 0, 0, .9) 70%, rgba(0, 0, 0, .55) 100%);
}
/* Below the two-column breakpoint the copy spans the full width, so the photo
   would sit directly behind the headline. Hide it rather than dim it further. */
@media (max-width: 900px) {
  .cs3a-hero__people { display: none; }
}
.cs3a-hero__scrim {
  background: linear-gradient(90deg, rgba(4, 18, 34, .96) 0%, rgba(4, 18, 34, .86) 42%, rgba(4, 18, 34, .5) 72%, rgba(6, 32, 58, .45) 100%);
}
.cs3a-hero__scrim2 {
  background: linear-gradient(180deg, rgba(4, 18, 34, .55) 0%, transparent 35%, rgba(3, 13, 26, .65) 100%);
}
.cs3a-hero__inner { position: relative; padding-block: 96px 72px; }
.cs3a-hero__col { max-width: 760px; }

.cs3a-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, .55);
  font-size: 13px;
  font-weight: 500;
}
.cs3a-crumbs a { color: rgba(255, 255, 255, .7); }
.cs3a-crumbs a:hover { color: #fff; }
.cs3a-crumbs [aria-current] { color: #fff; }

.cs3a-hero h1 {
  color: #fff;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -1.4px;
}
.cs3a-hero h1 em { font-style: normal; color: var(--cs3a-ac-lt); }
.cs3a-hero__sub {
  color: #fff;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.35;
  font-weight: 700;
  margin-top: 22px;
  max-width: 660px;
}
.cs3a-hero__lede {
  color: rgba(255, 255, 255, .82);
  font-size: 18px;
  line-height: 1.65;
  margin-top: 16px;
  max-width: 640px;
}
.cs3a-hero__actions { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.cs3a-hero__awards { display: flex; align-items: center; gap: 28px; margin-top: 52px; flex-wrap: wrap; }
.cs3a-hero__awards img { height: 46px; width: auto; opacity: .95; }

.cs3a-stats {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: rgba(3, 13, 26, .55);
}
.cs3a-stats__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-block: 22px;
}
.cs3a-stats__n { color: #fff; font-size: 26px; font-weight: 700; line-height: 1.1; }
.cs3a-stats__l { color: rgba(255, 255, 255, .6); font-size: 13px; font-weight: 500; margin-top: 2px; }

/* ---------- proof paths ---------- */
.cs3a-paths { background: var(--cs3a-surface); border-bottom: 1px solid var(--cs3a-line); }
.cs3a-paths__inner { padding-block: 64px; }
.cs3a-paths h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -.8px; }
.cs3a-paths__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.cs3a-path {
  background: #fff;
  border: 1px solid var(--cs3a-line);
  border-radius: 14px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--cs3a-ink);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.cs3a-path:hover {
  border-color: var(--cs3a-ac);
  box-shadow: 0 12px 30px rgba(25, 25, 25, .08);
  transform: translateY(-2px);
}
.cs3a-path__kind {
  color: var(--cs3a-ac-dp);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cs3a-path__t { font-size: 19px; font-weight: 700; line-height: 1.3; }
.cs3a-path__d { color: var(--cs3a-soft); font-size: 14px; line-height: 1.55; }
.cs3a-path__more { color: var(--cs3a-ac-dp); font-size: 14px; font-weight: 700; margin-top: 6px; }

/* ---------- featured ---------- */
.cs3a-featured { background: #fff; }
.cs3a-featured__head { padding-block: 88px 40px; }
.cs3a-featured__head h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -1.2px;
  max-width: 820px;
}
.cs3a-featured__list {
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.cs3a-feat {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  border: 1px solid var(--cs3a-line);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.cs3a-feat:hover { border-color: var(--cs3a-ac); box-shadow: 0 14px 34px rgba(25, 25, 25, .09); }
.cs3a-feat__shot {
  background: var(--cs3a-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px;
}
.cs3a-feat__shot img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(25, 25, 25, .14);
}
.cs3a-feat__body { padding: 40px 40px 36px; display: flex; flex-direction: column; gap: 18px; }
.cs3a-feat__logo { height: 34px; width: auto; align-self: flex-start; object-fit: contain; }
.cs3a-feat__name { font-size: 22px; font-weight: 700; letter-spacing: -.4px; }
.cs3a-feat__blurb { color: var(--cs3a-body); font-size: 16px; line-height: 1.65; }
.cs3a-feat__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cs3a-pill {
  background: var(--cs3a-ac-tint);
  color: var(--cs3a-ac-ink);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
}
.cs3a-feat__more { color: var(--cs3a-ac-dp); font-size: 15px; font-weight: 700; margin-top: auto; }

/* ---------- all projects ---------- */
.cs3a-all { background: var(--cs3a-surface); border-top: 1px solid var(--cs3a-line); }
.cs3a-all__inner { padding-block: 80px; }
.cs3a-all__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cs3a-all__head h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 700; letter-spacing: -1px; }
.cs3a-count { color: var(--cs3a-soft); font-size: 15px; font-weight: 700; }

.cs3a-filters { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; }
.cs3a-filters__group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cs3a-filters__label {
  color: var(--cs3a-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  width: 76px;
  flex: none;
}
/* Qualified for the same reason as the buttons: the .cs3a a reset outranks a
   bare .cs3a-chip, which would leave every chip in the default body ink. */
.cs3a .cs3a-chip {
  border: 1px solid var(--cs3a-line);
  background: #fff;
  color: var(--cs3a-body);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cs3a .cs3a-chip:hover { border-color: var(--cs3a-ac); color: var(--cs3a-ac-ink); }
.cs3a .cs3a-chip.is-active { background: var(--cs3a-ac); border-color: var(--cs3a-ac); color: #fff; }

.cs3a-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 34px;
}
.cs3a-empty { margin-top: 28px; color: var(--cs3a-soft); font-size: 16px; }

/* ---------- card ---------- */
.cs3a-card {
  background: #fff;
  border: 1px solid var(--cs3a-line);
  border-radius: var(--cs3a-radius);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  color: var(--cs3a-ink);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.cs3a-card:hover {
  border-color: var(--cs3a-ac);
  box-shadow: 0 14px 34px rgba(25, 25, 25, .09);
  transform: translateY(-2px);
}
/* Screenshot bleeds through the card at low opacity, washed to white so the
   text keeps its contrast ratio whatever the image behind it. */
.cs3a-card__wash,
.cs3a-card__veil { position: absolute; inset: 0; pointer-events: none; }
.cs3a-card__wash { background-size: cover; background-position: top center; opacity: .14; filter: saturate(.7); }
.cs3a-card__veil { background: linear-gradient(180deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .93) 42%, #fff 100%); }

.cs3a-card__body {
  position: relative;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.cs3a-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
}
.cs3a-card__logo { height: 30px; width: auto; max-width: 130px; object-fit: contain; object-position: left center; display: block; }
.cs3a-card__mark { display: inline-flex; align-items: center; gap: 8px; }
.cs3a-card__initials {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--cs3a-ac);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs3a-card__client { font-size: 14px; font-weight: 700; color: var(--cs3a-ac-ink); }
.cs3a-card__num { color: var(--cs3a-faint); font-size: 13px; font-weight: 700; }
.cs3a-card__ind {
  color: var(--cs3a-ac-dp);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cs3a-card__title { font-size: 21px; font-weight: 700; letter-spacing: -.4px; margin-top: -4px; }
.cs3a-card__blurb { color: var(--cs3a-soft); font-size: 14px; line-height: 1.6; }

.cs3a-card__foot { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 12px; }
/* Four platform bars. Lit bars say which platforms the project shipped on, so
   a buyer scanning the grid can see "mobile" without reading the blurb. */
.cs3a-profile { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cs3a-profile__i { display: flex; flex-direction: column; gap: 6px; }
.cs3a-profile__bar { height: 5px; border-radius: 3px; background: var(--cs3a-line); display: block; }
.cs3a-profile__l { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #b6c1cb; }
.cs3a-profile__i.is-on .cs3a-profile__bar { background: var(--cs3a-ac); }
.cs3a-profile__i.is-on .cs3a-profile__l { color: var(--cs3a-ac-ink); }

.cs3a-metric {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: var(--cs3a-panel);
  border: 1px solid var(--cs3a-line);
  border-radius: 8px;
  padding: 10px 12px;
}
.cs3a-metric__n { color: var(--cs3a-ac); font-size: 17px; font-weight: 700; white-space: nowrap; }
.cs3a-metric__l { color: var(--cs3a-soft); font-size: 12px; font-weight: 500; line-height: 1.35; }

.cs3a-card__stack { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 2px; }
.cs3a-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--cs3a-line);
  color: var(--cs3a-soft);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
}
.cs3a-tag__icon { width: 14px; height: 14px; object-fit: contain; }
.cs3a-card__more { color: var(--cs3a-ac-dp); font-size: 14px; font-weight: 700; }

/* ---------- testimonials ---------- */
.cs3a-quotes { background: #fff; }
.cs3a-quotes__inner { padding-block: 84px; }
.cs3a-quotes h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: -1px; }
.cs3a-quotes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.cs3a-quote {
  border: 1px solid var(--cs3a-line);
  border-radius: 14px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--cs3a-panel);
}
.cs3a-quote__text { color: var(--cs3a-body); font-size: 15px; line-height: 1.65; }
.cs3a-quote__who { margin-top: auto; }
.cs3a-quote__n { display: block; font-size: 15px; font-weight: 700; }
.cs3a-quote__r { display: block; color: var(--cs3a-soft); font-size: 13px; margin-top: 2px; }
.cs3a-quote blockquote { margin: 0; }

/* ---------- FAQ ---------- */
.cs3a-faq { background: var(--cs3a-surface); border-top: 1px solid var(--cs3a-line); }
.cs3a-faq__inner { padding-block: 80px; }
.cs3a-faq h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: -1px; }
.cs3a-faq__list { margin-top: 30px; display: flex; flex-direction: column; gap: 12px; }
.cs3a-faq__item { background: #fff; border: 1px solid var(--cs3a-line); border-radius: 12px; overflow: hidden; }
.cs3a-faq__q {
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--cs3a-ink);
  background: none;
  border: 0;
  padding: 20px 56px 20px 22px;
  cursor: pointer;
  position: relative;
}
.cs3a-faq__q::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--cs3a-ac-dp);
  border-bottom: 2px solid var(--cs3a-ac-dp);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.cs3a-faq__item.is-open .cs3a-faq__q::after { transform: translateY(-30%) rotate(-135deg); }
.cs3a-faq__a { padding: 0 22px 22px; color: var(--cs3a-body); font-size: 15px; line-height: 1.7; }

/* ---------- CTA ---------- */
.cs3a-cta { background: var(--cs3a-dark); }
.cs3a-cta__inner { display: grid; grid-template-columns: 1.3fr .7fr; gap: 32px; align-items: end; }
.cs3a-cta__copy { padding-block: 72px; }
.cs3a-cta h2 { color: #fff; font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: -1px; max-width: 560px; }
.cs3a-cta p { color: rgba(255, 255, 255, .75); font-size: 17px; line-height: 1.6; margin-top: 18px; max-width: 520px; }
.cs3a-cta__actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.cs3a-cta__photo { width: 100%; height: auto; align-self: end; display: block; }

/* Three proof points sit between the promise and the form, so the reassurance
   a visitor needs is in view at the moment they decide to fill it in. */
.cs3a-cta__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 22px;
}
.cs3a-cta__proof li {
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cs3a-cta__proof li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cs3a-ac);
  flex: none;
}

/* The BoB widget ships its own light styling and an inline max-width. Give it
   a bounded, light surface so it reads as a form rather than a pale slab on
   the dark section, and let the reply promise inherit the dark treatment. */
.cs3a-cta__form { margin-top: 28px; max-width: 640px; }
.cs3a-cta__form .tateeda-bob-form { background: #fff; border-radius: 12px; overflow: hidden; }
.cs3a-cta__form form.bob-form { max-width: 100% !important; }
.cs3a-cta__form .tateeda-bob-form-reassurance {
  color: rgba(255, 255, 255, .75);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 14px;
}
.cs3a-cta__alt { color: rgba(255, 255, 255, .6); font-size: 14px; margin-top: 18px; }
.cs3a-cta__alt a { color: var(--cs3a-ac-lt); font-weight: 700; }
.cs3a-cta__alt a:hover { color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .cs3a-grid,
  .cs3a-paths__grid,
  .cs3a-quotes__grid { grid-template-columns: repeat(2, 1fr); }
  .cs3a-feat { grid-template-columns: 1fr; }
  .cs3a-feat__body { padding: 28px; }
  .cs3a-cta__inner { grid-template-columns: 1fr; }
  .cs3a-cta__photo { max-width: 320px; }
}

@media (max-width: 720px) {
  .cs3a-grid,
  .cs3a-paths__grid,
  .cs3a-quotes__grid { grid-template-columns: 1fr; }
  .cs3a-stats__row { grid-template-columns: repeat(2, 1fr); }
  .cs3a-hero__inner { padding-block: 56px 44px; }
  .cs3a-featured__head { padding-block: 56px 28px; }
  .cs3a-all__inner,
  .cs3a-faq__inner { padding-block: 56px; }
  .cs3a-quotes__inner { padding-block: 56px; }
  .cs3a-cta__copy { padding-block: 48px; }
  .cs3a-filters__label { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .cs3a-card,
  .cs3a-path,
  .cs3a-feat,
  .cs3a-faq__q::after { transition: none; }
  .cs3a-card:hover,
  .cs3a-path:hover { transform: none; }
}