/* =============================================================================
   HOME PAGE — WHAT WE DO (four pillars)
   -----------------------------------------------------------------------------
   Small label, headline and one-line intro, then four cards in the navy
   family used by the KPI cards above: full-bleed photo on top, a navy icon
   beside the title, one line of copy, the pillar's services in one line
   and an "Explore" link. Each card links to the Expertise page. Call to action below.
   Text, photos and icons: "services" in content/site_content.py.
   (Design copied from v8, recoloured to the v17 navy / blue palette.)
   ============================================================================= */

.page-home .svc {
  --svc-navy: #031130;     /* site navy */
  --svc-mid: #4F6079;   /* was #596C87 (4.48:1 on #E8EBF1); darkened to pass 4.5:1 */
  --svc-tint: #D9DEEA;      /* card background -- the site's card blue */
  --svc-line: #C9D0DE;      /* card outline, tag background */
  background: var(--sand);
  padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 96px);
}

/* ---- Header ---------------------------------------------------------------- */
.page-home .svc-head {
  max-width: 760px;
  margin: 0 auto clamp(36px, 4.5vw, 56px);
  text-align: center;
}
.page-home .svc-eyebrow {
  margin: 0 0 14px;
  font-family: "Public Sans", "Source Sans 3", var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--svc-mid);
}
.page-home h2.svc-title {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 2.625rem);   /* 42px on desktop, same as the impact heading */
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--svc-navy);
}
.page-home .svc-intro {
  margin: 16px auto 0;
  font-family: "Source Sans 3", var(--font-body);
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  line-height: 1.55;
  color: var(--svc-mid);
}

/* ---- Cards ------------------------------------------------------------------- */
.page-home .svc-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.page-home .svc-cards > li { display: flex; }

/* icon circles: one navy for all four cards */
.page-home .svc-cards > li { --svc-icon: #031130; }

.page-home .svc-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--svc-line);
  border-radius: 16px;
  background: var(--svc-tint);
  color: var(--svc-navy);
  text-decoration: none;
  transition: border-color .35s, box-shadow .35s, transform .35s cubic-bezier(.2, .7, .2, 1);
}
.page-home .svc-card:hover {
  border-color: #B7C4DA;
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -24px rgba(3, 17, 48, .35);
}
/* full-bleed photo across the top of the card */
.page-home .svc-card-media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.page-home .svc-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.page-home .svc-card:hover .svc-card-media img { transform: scale(1.05); }

.page-home .svc-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 20px 18px;
}
.page-home .svc-card-headrow {
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-home .svc-card-icon {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--svc-icon);
}
.page-home .svc-card-icon::before {
  content: "";
  position: absolute;
  inset: 10px;
  background: #FFFFFF;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.page-home .svc-card-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--svc-navy);
}
.page-home .svc-card-text {
  margin-top: 10px;
  font-family: "Source Sans 3", var(--font-body);
  font-size: .95rem;
  line-height: 1.55;
  color: #3C4E6B;
}
/* the pillar's services, written as one compact line */
.page-home .svc-card-services {
  margin-top: 10px;
  font-family: "Source Sans 3", var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--svc-mid);
}
.page-home .svc-dot { color: #B7C4DA; }
.page-home .svc-card-more {
  margin-top: auto;
  padding-top: 12px;
  font-family: "Public Sans", "Source Sans 3", var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--svc-navy);
}
.page-home .svc-card-more span { display: inline-block; transition: transform .3s; }
.page-home .svc-card:hover .svc-card-more span { transform: translateX(4px); }

/* ---- Call to action ------------------------------------------------------------ */
.page-home .svc-foot {
  margin-top: clamp(36px, 4vw, 52px);
  text-align: center;
}
.page-home .svc-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--svc-navy);
  color: #FFFFFF;
  font-family: "Public Sans", "Source Sans 3", var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .3s;
}
.page-home .svc-cta:hover { background: #0A1F4D; }
.page-home .svc-cta span { display: inline-block; transition: transform .3s; }
.page-home .svc-cta:hover span { transform: translateX(4px); }

/* ---- Smaller screens --------------------------------------------------------- */
@media (max-width: 1100px) {
  .page-home .svc-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .page-home .svc-cards { grid-template-columns: 1fr; }
}

/* ---- Header in the site's own font (Mulish, like every other section) ---- */
.page-home .svc-eyebrow,
.page-home h2.svc-title,
.page-home .svc-intro { font-family: var(--font-display); }
.page-home h2.svc-title { font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.35rem); letter-spacing: -.015em; }

/* Half the empty space above the header: (36px under the line above +
   80px top padding = 116px) -> 36px + 22px = 58px on desktop. */
.page-home .svc { padding-top: clamp(12px, 1.8vw, 22px); }

/* ---- 8 simple cards: placeholder image area + title -------------------- */
.page-home .svc-cards--simple .svc-card { cursor: default; }
.page-home .svc-cards--simple .svc-card:hover { transform: none; box-shadow: none; border-color: var(--svc-line); }
.page-home .svc-card-media--empty {
  background: linear-gradient(135deg, #C9D0DE 0%, #E8EBF1 100%);
}
.page-home .svc-cards--simple .svc-card-body { padding: 16px 20px 18px; }
.page-home .svc-cards--simple .svc-card-title { font-family: var(--font-display); font-weight: 500; }
@media (max-width: 560px) {
  .page-home .svc-cards--simple { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .page-home .svc-cards--simple .svc-card-body { padding: 12px 14px 14px; }
  .page-home .svc-cards--simple .svc-card-title { font-size: 1rem; }
}

/* ---- Slider: 4 cards visible at a time, arrows for the next set ---------- */
.page-home .svc-slider { position: relative; }
.page-home .svc-viewport { overflow: hidden; }
.page-home .svc-track {
  --per: 4;
  display: flex;
  gap: 18px;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.page-home .svc-track > li { flex: 0 0 calc((100% - (var(--per) - 1) * 18px) / var(--per)); }
.page-home .svc-arrow {
  position: absolute; top: 50%; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--svc-navy); color: #fff; font-size: 1.1rem; cursor: pointer;
  transform: translateY(-50%);
  box-shadow: 0 10px 24px -10px rgba(3, 17, 48, .5);
  transition: background .3s, transform .3s;
}
.page-home .svc-arrow:hover { background: #0A1F4D; transform: translateY(-50%) scale(1.08); }
.page-home .svc-arrow--prev { left: -23px; }
.page-home .svc-arrow--next { right: -23px; }
.page-home .svc-slider.is-single .svc-arrow { display: none; }
/* 4 cards in view on every laptop (down to 1024px), 3 on small tablets
   in landscape, 2 on tablets -- so small laptops look like large ones. */
@media (max-width: 1023px) {
  .page-home .svc-track { --per: 3; }
}
@media (max-width: 860px) {
  .page-home .svc-track { --per: 2; }
}
@media (max-width: 560px) {
  .page-home .svc-track { gap: 12px; }
  .page-home .svc-track > li { flex-basis: calc((100% - (var(--per) - 1) * 12px) / var(--per)); }
  .page-home .svc-arrow { width: 38px; height: 38px; }
  .page-home .svc-arrow--prev { left: -12px; }
  .page-home .svc-arrow--next { right: -12px; }
}
@media (prefers-reduced-motion: reduce) { .page-home .svc-track { transition: none; } }

/* ---- Cards v3 (reference design): photo on top, a white text card
   overlapping its bottom -- orange icon tile, big faded number, bold
   title, short description. Hover = orange highlight. ----------------- */
.page-home .svc-cards--simple .svc-card {
  position: relative; display: block; overflow: visible;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding-bottom: 6px;
}
.page-home .svc-cards--simple .svc-card:hover { transform: none; box-shadow: none; }
.page-home .svc-cards--simple .svc-card-media {
  display: block; aspect-ratio: 1 / 0.95; border-radius: 14px; overflow: hidden;
}
.page-home .svc-cards--simple .svc-card-media img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.page-home .svc-cards--simple .svc-card:hover .svc-card-media img { transform: scale(1.05); }
.page-home .svc-cards--simple .svc-card-body {
  position: relative; z-index: 1;
  display: block; margin: -64px 0 0 16px; padding: 16px 18px 18px;
  background: #fff; border-radius: 12px;
  box-shadow: 0 18px 40px -22px rgba(3, 17, 48, .35);
  transition: background .35s, box-shadow .35s, transform .35s;
}
.page-home .svc-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.page-home .svc-card-ico {
  width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: #FDECE3; color: #F0602A; transition: background .35s, color .35s;
}
.page-home .svc-card-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.page-home .svc-card-num {
  font-family: "Manrope", var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px #E3E6EE; transition: -webkit-text-stroke-color .35s;
}
.page-home .svc-cards--simple .svc-card-title {
  display: block; font-family: "Manrope", var(--font-display); font-weight: 700;
  font-size: clamp(1.02rem, 1.3vw, 1.15rem); color: var(--navy); line-height: 1.25; margin: 0 0 6px;
  transition: color .35s;
}
.page-home .svc-card-desc { display: block; font-size: .84rem; line-height: 1.5; color: #5C6479; transition: color .35s; }
/* Hover: the orange highlighted card */
.page-home .svc-cards--simple .svc-card:hover .svc-card-body {
  background: linear-gradient(135deg, #FF8A4C 0%, #F0602A 100%);
  box-shadow: 0 22px 44px -18px rgba(240, 96, 42, .55); transform: translateY(-4px);
}
.page-home .svc-cards--simple .svc-card:hover .svc-card-ico { background: rgba(255,255,255,.2); color: #fff; }
.page-home .svc-cards--simple .svc-card:hover .svc-card-num { -webkit-text-stroke-color: rgba(255,255,255,.55); }
.page-home .svc-cards--simple .svc-card:hover .svc-card-title,
.page-home .svc-cards--simple .svc-card:hover .svc-card-desc { color: #fff; }
@media (max-width: 560px) {
  .page-home .svc-cards--simple .svc-card-body { margin: -48px 0 0 10px; padding: 12px 12px 14px; }
  .page-home .svc-card-num { font-size: 1.5rem; }
  .page-home .svc-card-desc { font-size: .78rem; }
}
/* room so the cards' soft shadows aren't cut off by the slider edge */
.page-home .svc-viewport { padding: 6px 0 28px; margin-bottom: -22px; }
/* Text card: no number, 20% narrower, centred under the photo. */
.page-home .svc-cards--simple .svc-card-body {
  width: calc((100% - 16px) * .8); margin-left: auto; margin-right: auto;
}
@media (max-width: 560px) {
  .page-home .svc-cards--simple .svc-card-body { width: calc((100% - 10px) * .8); margin-left: auto; margin-right: auto; }
}
/* Text card 10% wider (0.8 -> 0.88 of the photo width), still centred. */
.page-home .svc-cards--simple .svc-card-body { width: calc((100% - 16px) * .88); }
@media (max-width: 560px) {
  .page-home .svc-cards--simple .svc-card-body { width: calc((100% - 10px) * .88); }
}
/* Photo area 10% smaller (width, and height via its aspect ratio), centred. */
.page-home .svc-cards--simple .svc-card-media { width: 90%; margin: 0 auto; }
/* Photo area 5% wider only (90% -> 94.5%); height unchanged. */
.page-home .svc-cards--simple .svc-card-media { width: 94.5%; aspect-ratio: 0.945 / 0.855; }
.page-home .svc-cards--simple a.svc-card { cursor: pointer; text-decoration: none; color: inherit; }

/* ---- Service pills under the cards: rounded navy panel of pills -------- */
.page-home .svc-tags {
  list-style: none; margin: clamp(28px, 3vw, 40px) 0 0; padding: clamp(18px, 2vw, 26px);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  background: var(--navy); border: 1px solid rgba(255,255,255,.08); border-radius: 26px;
}
.page-home .svc-tags li {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 64px; padding: 10px 26px; min-width: 150px;
  font-family: "Manrope", var(--font-display); font-weight: 700; font-size: .95rem; line-height: 1.3;
  color: #E3E8F4; background: #0A1F4D; border: 1px solid rgba(255,255,255,.1); border-radius: 999px;
  transition: background .25s, border-color .25s, transform .25s;
}
.page-home .svc-tags li:hover { background: #13295C; border-color: rgba(255,255,255,.22); transform: translateY(-2px); }
@media (max-width: 560px) {
  .page-home .svc-tags { gap: 10px; border-radius: 20px; }
  .page-home .svc-tags li { min-height: 48px; min-width: 0; padding: 8px 16px; font-size: .85rem; }
}
/* Smaller pills + tighter panel. */
.page-home .svc-tags { padding: 14px 16px; gap: 10px; border-radius: 22px; }
.page-home .svc-tags li { min-height: 42px; min-width: 0; padding: 6px 18px; font-size: .82rem; }
@media (max-width: 560px) {
  .page-home .svc-tags { padding: 12px; gap: 8px; }
  .page-home .svc-tags li { min-height: 36px; padding: 5px 13px; font-size: .76rem; }
}
/* Pill text smaller. */
.page-home .svc-tags li { font-size: .74rem; min-height: 38px; padding: 5px 16px; }
@media (max-width: 560px) { .page-home .svc-tags li { font-size: .7rem; min-height: 34px; padding: 4px 12px; } }
/* Pills start from the left (rows no longer centred). */
.page-home .svc-tags { justify-content: flex-start; }

/* ---- Flowing strip (replaces the arrow slider): cards drift left -> right
   continuously, 4 in view (2 on tablet/phone), pause on hover. ---------- */
.page-home .svc-flow { --gap: 18px; --view: min(var(--container), calc(100vw - 48px)); }
.page-home .svc-flow .svc-track {
  width: max-content; gap: var(--gap); transform: none;
  animation: svcFlow 48s linear infinite; transition: none;
}
.page-home .svc-flow .svc-track > li {
  flex: 0 0 calc((var(--view) - (var(--per) - 1) * var(--gap)) / var(--per));
}
.page-home .svc-flow:hover .svc-track { animation-play-state: paused; }
@keyframes svcFlow {
  from { transform: translateX(calc(-50% - var(--gap) / 2)); }
  to   { transform: translateX(0); }
}
@media (max-width: 560px) { .page-home .svc-flow { --gap: 12px; } }
.page-home .svc-flow .svc-viewport {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
/* Flow direction: right -> left. */
.page-home .svc-flow .svc-track { animation-direction: reverse; }
/* Service pills: no navy panel behind them -- just the pills on the page. */
.page-home .svc-tags { background: none; border: 0; border-radius: 0; padding: 0; }

/* ---- Case Studies cards (home): photo fading into navy, orange tag,
   client name, big serif result, 3 stat boxes, "Read case study". ------ */
.page-home .cs2-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(20px, 2.6vw, 34px);
}
.page-home .cs2-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 600px; border-radius: 22px; overflow: hidden; text-decoration: none; color: #fff;
  background: linear-gradient(180deg, #12294A 0%, #0B1A36 55%, #081430 100%);
  box-shadow: 0 24px 50px -30px rgba(3, 17, 48, .55);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
}
.page-home .cs2-card:hover { transform: translateY(-6px); box-shadow: 0 32px 60px -28px rgba(3, 17, 48, .65); }
.page-home .cs2-media { position: absolute; inset: 0 0 auto 0; height: 62%; overflow: hidden; }
.page-home .cs2-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.page-home .cs2-card:hover .cs2-media img { transform: scale(1.05); }
.page-home .cs2-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 48, .15) 0%, rgba(8, 20, 48, .35) 45%, #0B1A36 100%);
}
.page-home .cs2-tag {
  position: absolute; top: 0; left: 22px; z-index: 2;
  padding: 9px 20px 10px; border-radius: 0 0 10px 10px;
  background: #E2672E; color: #fff;
  font-family: "Manrope", var(--font-display); font-weight: 800; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
}
.page-home .cs2-body { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 0 20px 24px; }
.page-home .cs2-client {
  font-family: "Manrope", var(--font-display); font-weight: 700; font-size: .95rem;
  letter-spacing: .06em; text-transform: uppercase; color: #8FA9D6; margin-bottom: 22px;
}
.page-home .cs2-headline {
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: clamp(1.4rem, 2vw, 1.75rem);
  line-height: 1.2; color: #fff; margin-bottom: 26px; min-height: 2.4em;
}
.page-home .cs2-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.page-home .cs2-stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 12px 6px; min-height: 84px; border-radius: 12px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
}
.page-home .cs2-stat b { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.45rem; line-height: 1.1; color: #E2672E; }
.page-home .cs2-stat small {
  margin-top: 4px; font-family: "Manrope", var(--font-display); font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255, 255, 255, .7); line-height: 1.25;
}
.page-home .cs2-more { font-family: "Manrope", var(--font-display); font-weight: 700; font-size: 1rem; color: #fff; }
.page-home .cs2-more span { display: inline-block; transition: transform .3s; }
.page-home .cs2-card:hover .cs2-more span { transform: translateX(4px); }
@media (max-width: 1024px) { .page-home .cs2-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) {
  .page-home .cs2-grid { grid-template-columns: 1fr; }
  .page-home .cs2-card { min-height: 540px; }
}
/* Case cards 30% shorter (600 -> 420px; phones 540 -> 378px), tighter text. */
.page-home .cs2-card { min-height: 420px; }
.page-home .cs2-media { height: 66%; }
.page-home .cs2-body { padding-bottom: 18px; }
.page-home .cs2-client { margin-bottom: 10px; font-size: .86rem; }
.page-home .cs2-headline { margin-bottom: 14px; font-size: clamp(1.25rem, 1.7vw, 1.5rem); min-height: 0; }
.page-home .cs2-stats { margin-bottom: 14px; gap: 10px; }
.page-home .cs2-stat { min-height: 64px; padding: 8px 6px; }
.page-home .cs2-stat b { font-size: 1.25rem; }
.page-home .cs2-stat small { font-size: .68rem; }
.page-home .cs2-more { font-size: .92rem; }
@media (max-width: 680px) { .page-home .cs2-card { min-height: 378px; } }
/* Case cards 10% narrower (row width shrunk so each card is 10% less), centred. */
@media (min-width: 681px) {
  .page-home .cs2-grid.container { width: calc(min(var(--container), 100vw - 48px) * .9 + 6px); margin-inline: auto; }
}
/* Case cards 10% taller (420 -> 462px; phones 378 -> 416px), a 2-line
   summary under the headline, and smaller stat boxes. */
.page-home .cs2-card { min-height: 462px; }
@media (max-width: 680px) { .page-home .cs2-card { min-height: 416px; } }
.page-home .cs2-headline { margin-bottom: 8px; }
.page-home .cs2-summary {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .8rem; line-height: 1.45; color: rgba(255, 255, 255, .62); margin-bottom: 12px;
}
.page-home .cs2-stats { gap: 8px; margin-bottom: 12px; }
.page-home .cs2-stat { min-height: 50px; padding: 6px 4px; border-radius: 10px; }
.page-home .cs2-stat b { font-size: 1.05rem; }
.page-home .cs2-stat small { font-size: .72rem; margin-top: 2px; }
/* Card tag: text only, no orange badge (a soft shadow keeps it readable on the photo). */
.page-home .cs2-tag { background: none; border-radius: 0; padding: 0; top: 18px; left: 20px; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }

/* Service pills: one line, flowing right -> left, pause on hover. */
.page-home .svc-tags-flow {
  overflow: hidden; margin-top: clamp(28px, 3vw, 40px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.page-home .svc-tags-flow .svc-tags {
  --gap: 10px;
  margin: 0; flex-wrap: nowrap; width: max-content; gap: var(--gap);
  padding: 4px 0; animation: svcTagsFlow 38s linear infinite;
}
.page-home .svc-tags-flow .svc-tags li { flex: 0 0 auto; white-space: nowrap; }
.page-home .svc-tags-flow:hover .svc-tags { animation-play-state: paused; }
@keyframes svcTagsFlow {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--gap) / 2)); }
}
/* No hairline at the bottom of the photo on hover: the photo fades out to
   transparent (no hard bottom edge), the overlay overhangs it, and the zoom
   runs on its own GPU layer so there are no sub-pixel gaps. */
.page-home .cs2-media {
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  transform: translateZ(0);
}
.page-home .cs2-media::after { inset: 0 0 -2px 0; }
.page-home .cs2-media img { backface-visibility: hidden; will-change: transform; }
/* 4 case study cards in one row on desktop (full content width). */
@media (min-width: 1025px) {
  .page-home .cs2-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .page-home .cs2-grid.container { width: min(var(--container), calc(100vw - 48px)); }
  .page-home .cs2-body { padding: 0 16px 16px; }
  .page-home .cs2-tag { left: 16px; }
  .page-home .cs2-headline { font-size: clamp(1.1rem, 1.45vw, 1.3rem); }
  .page-home .cs2-stat small { font-size: .7rem; letter-spacing: .01em; }
}

/* ---- Mobile pass (home services + case cards) ------------------------ */
@media (max-width: 560px) {
  /* What We Do flow: ~1.4 cards in view instead of 2 squeezed ones. */
  .page-home .svc-flow .svc-track { --per: 1.4; }
  .page-home .cs2-stat small { font-size: .7rem; }
  .page-home .cs2-stat b { font-size: 1.1rem; }
}
@media (max-width: 560px) {
  /* Our Clients rows: smaller logo boxes so more logos show per row. */
  .page-home .portfolio-track .client-cell { width: 128px; padding: 10px 12px; }
  .page-home .portfolio-track .client-cell img { max-height: 52px; }
  .page-home .portfolio-marquee + .portfolio-marquee { margin-top: 6px; }
}
@media (max-width: 560px) {
  body.page-home .portfolio-track .client-cell { width: 128px; padding: 10px 12px; }
  body.page-home .portfolio-track .client-cell img { max-height: 52px; }
  body.page-home .portfolio-marquee + .portfolio-marquee { margin-top: 6px; }
}

/* Flow strip driven by main.js (adds .is-js): CSS animation off, arrows on. */
.page-home .svc-flow.is-js .svc-track { animation: none; will-change: transform; }
.page-home .svc-flow .svc-arrow { display: none; }
.page-home .svc-flow.is-js .svc-arrow { display: flex; top: 40%; z-index: 3; }
.page-home .svc-flow .svc-arrow--prev { left: -22px; }
.page-home .svc-flow .svc-arrow--next { right: -22px; }
@media (max-width: 560px) {
  .page-home .svc-flow .svc-arrow--prev { left: -8px; }
  .page-home .svc-flow .svc-arrow--next { right: -8px; }
  .page-home .svc-flow.is-js .svc-arrow { background: rgba(232, 235, 241, .9) !important; }
}

/* Testimonial names in the same signature style as the founder's name. */
.page-home .testi-stack-info strong.testi-sign {
  font-family: "Mrs Saint Delafield", cursive; font-weight: 400;
  font-size: 1.7rem; line-height: 1.1; letter-spacing: 0; text-transform: none;
  color: #fff; margin-bottom: 2px;
}
@media (max-width: 600px) { .page-home .testi-stack-info strong.testi-sign { font-size: 1.5rem; } }
.page-home .testi-stack-info strong.testi-sign { color: var(--navy); font-size: 2rem; }
@media (max-width: 600px) { .page-home .testi-stack-info strong.testi-sign { font-size: 1.7rem; } }

/* ---- Testimonials: short preview + "Read More" + wavy line + popup ---- */
.page-home .testi-stack-card blockquote {
  overflow: hidden; flex: 0 1 auto; margin-bottom: 12px; padding-right: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8;
}
.page-home .testi-more {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 0 0 3px; margin: auto 0 0; cursor: pointer;
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: .95rem; letter-spacing: .08em;
  color: var(--navy); border-bottom: 2px solid var(--navy);
}
.page-home .testi-more-ico {
  width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #CC5500;
  display: inline-flex; align-items: center; justify-content: center; transform: translateY(1px);
  transition: transform .3s;
}
.page-home .testi-more-ico svg { width: 15px; height: 15px; fill: none; stroke: #CC5500; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.page-home .testi-more:hover .testi-more-ico { transform: translate(3px, 1px); }
.page-home .testi-wave { display: block; width: 100%; height: 12px; margin: 12px 0 14px; }
.page-home .testi-wave path { fill: none; stroke: rgba(204, 85, 0, .35); stroke-width: 3; stroke-linecap: round; }
.page-home .testi-stack-foot { margin-top: 0; }
@media (max-width: 1024px) { .page-home .testi-stack-card blockquote { -webkit-line-clamp: 6; } }
@media (max-width: 600px)  { .page-home .testi-stack-card blockquote { -webkit-line-clamp: 5; } .page-home .testi-more { font-size: .85rem; } }

.testi-modal { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: 16px; }
.testi-modal[hidden] { display: none; }
.testi-modal-backdrop { position: absolute; inset: 0; background: rgba(3, 17, 48, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.testi-modal-panel {
  position: relative; width: min(680px, 100%); max-height: min(86vh, 760px); overflow-y: auto;
  background: var(--light-blue); color: var(--ink); border-radius: 20px; padding: 34px 32px 28px;
  box-shadow: 0 30px 70px -20px rgba(3, 17, 48, .6);
}
.testi-modal-close { position: absolute; top: 12px; right: 16px; border: 0; background: none; font-size: 1.8rem; line-height: 1; color: var(--navy); cursor: pointer; opacity: .6; }
.testi-modal-close:hover { opacity: 1; }
.testi-modal-quote { white-space: pre-line; font-size: .98rem; line-height: 1.7; color: #2F3A52; margin-bottom: 22px; }
.testi-modal-foot { display: flex; align-items: center; gap: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.testi-modal-avatar img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; }
.testi-modal-who { display: flex; flex-direction: column; }
.testi-modal-who .testi-sign { font-family: "Mrs Saint Delafield", cursive; font-weight: 400; font-size: 2rem; line-height: 1.1; color: var(--navy); }
.testi-modal-role { font-size: .85rem; font-style: italic; color: var(--ink-soft); }
@media (max-width: 600px) { .testi-modal-panel { padding: 30px 20px 22px; } .testi-modal-quote { font-size: .92rem; } }
/* Smaller "Read More". */
.page-home .testi-more { font-size: .78rem; letter-spacing: .06em; gap: 8px; }
.page-home .testi-more-ico { width: 22px; height: 22px; }
.page-home .testi-more-ico svg { width: 12px; height: 12px; }
@media (max-width: 600px) { .page-home .testi-more { font-size: .74rem; } }
/* Divider: straight line, thick on the left tapering to thin on the right. */
.page-home .testi-wave path { fill: rgba(204, 85, 0, .55); stroke: none; }
/* Testimonial cards 15% narrower (437 -> 371px; tablet/phone scaled too). */
.page-home .testi-stack-card { width: 371px; padding-left: 26px; padding-right: 26px; }
@media (max-width: 768px) { .page-home .testi-stack-card { width: min(49vw, 323px); } }
@media (max-width: 600px) { .page-home .testi-stack-card { width: min(71vw, 289px); padding-left: 20px; padding-right: 20px; } }
/* Testimonial card hover: pops up with a soft burnt-orange glow. */
.page-home .testi-marquee { padding-top: 14px; padding-bottom: 22px; }
.page-home .testi-stack-card { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }
.page-home .testi-stack-card:hover {
  transform: translateY(-8px) scale(1.03); z-index: 2;
  border-color: rgba(204, 85, 0, .35);
  box-shadow: 0 0 0 1px rgba(204, 85, 0, .18), 0 18px 40px -14px rgba(204, 85, 0, .45), 0 0 34px rgba(204, 85, 0, .22);
}
@media (prefers-reduced-motion: reduce) { .page-home .testi-stack-card:hover { transform: none; } }
.page-home .testi-marquee { padding-top: 22px; padding-bottom: 44px; margin-bottom: -22px; }
/* Testimonial cards 5% wider (371 -> 390px; tablet/phone scaled too). */
.page-home .testi-stack-card { width: 390px; }
@media (max-width: 768px) { .page-home .testi-stack-card { width: min(51.5vw, 339px); } }
@media (max-width: 600px) { .page-home .testi-stack-card { width: min(74.5vw, 303px); } }
/* Testimonial hover glow in navy (was burnt orange). */
.page-home .testi-stack-card:hover {
  border-color: rgba(3, 17, 48, .35);
  box-shadow: 0 0 0 1px rgba(3, 17, 48, .18), 0 18px 40px -14px rgba(3, 17, 48, .45), 0 0 34px rgba(3, 17, 48, .22);
}
/* All What We Do text boxes the same height (longer titles no longer
   make some boxes taller than others). */
.page-home .svc-flow .svc-track { align-items: stretch; }
.page-home .svc-flow .svc-track > li { display: flex; }
.page-home .svc-cards--simple .svc-card { display: flex; flex-direction: column; width: 100%; }
.page-home .svc-cards--simple .svc-card-body { flex: 1 1 auto; }

/* Testimonial cards: a share of the content width (~3 in view) on every
   laptop, instead of a fixed 390px that looked bigger on small laptops. */
@media (min-width: 769px) {
  .page-home .testi-stack-card { width: clamp(300px, calc(min(var(--container), 100vw - 48px) / 3.1), 420px); }
}

/* ---- Case studies: phone slider (one swipe row + < > arrows) ---------- */
.page-home .cs2-slider { position: relative; }
.page-home .cs2-arrow { display: none; }
@media (max-width: 600px) {
  .page-home .cs2-grid.container {
    display: flex; grid-template-columns: none; gap: 24px;
    width: 100%; margin: 0; padding: 4px 24px 18px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 24px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .page-home .cs2-grid.container::-webkit-scrollbar { display: none; }
  /* One full card in view: card = row width, gap = side padding, so the
     next card starts exactly at the screen edge (no peek). */
  .page-home .cs2-grid .cs2-card { flex: 0 0 100%; scroll-snap-align: center; }
  html body.page-home .cs2-arrow {
    display: flex; top: calc(50% - 7px); width: 36px; height: 36px; z-index: 6; opacity: 1;
    background: rgba(3, 17, 48, .35) !important; color: #fff !important;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    border: 1.6px solid #fff !important; box-shadow: none !important;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.45));  /* readable over photos */
  }
  html body.page-home .cs2-arrow:hover, html body.page-home .cs2-arrow:active { background: rgba(255,255,255,.14) !important; transform: translateY(-50%); }
  /* centred on the card edges, outside the text area */
  .page-home .cs2-arrow--prev { left: 6px; }
  .page-home .cs2-arrow--next { right: 6px; }
  .page-home .cs2-arrow .chev { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}

/* ---- News: phone slider (same as Case Studies) ----------------------- */
.page-home .news-slider { position: relative; }
@media (max-width: 600px) {
  .page-home .news-slider .news-grid {
    display: flex; grid-template-columns: none; gap: 24px; max-width: none;
    margin: 0 -24px; padding: 4px 24px 18px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 24px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .page-home .news-slider .news-grid::-webkit-scrollbar { display: none; }
  .page-home .news-slider .news-grid > .cs-card { flex: 0 0 100%; scroll-snap-align: center; }
  .page-home .news-slider .cs2-arrow--prev { left: -18px; }
  .page-home .news-slider .cs2-arrow--next { right: -18px; }
}

/* ---- Testimonials: phone flow + < > arrows (main.js drives the drift) -- */
.page-home .testi-marquee { position: relative; }
@media (max-width: 600px) {
  html body.page-home .testi-marquee.is-js-flow .testi-track { animation: none !important; will-change: transform; }
  html body.page-home .testi-marquee .cs2-arrow { top: calc(50% - 11px); }
  html body.page-home .testi-marquee .cs2-arrow--prev { left: 8px; }
  html body.page-home .testi-marquee .cs2-arrow--next { right: 8px; }
}

/* Full-Spectrum arrows: same glass style as the Case Studies / News /
   Testimonials arrows (see-through dark tint, white outline + chevron). */
html body.page-home .svc-flow .svc-arrow,
html body.page-home .svc-flow.is-js .svc-arrow {
  background: rgba(3, 17, 48, .35) !important; color: #fff !important;
  border: 1.6px solid #fff !important; box-shadow: none !important;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.45));
}
html body.page-home .svc-flow .svc-arrow:hover,
html body.page-home .svc-flow .svc-arrow:active { background: rgba(3, 17, 48, .5) !important; }