/* ==========================================================================
   Slipstream.agency — component styles
   Design tokens live in theme.json; this file builds the components on top.
   ========================================================================== */

/* --- Base ---------------------------------------------------------------- */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  position: relative;
  overflow-x: clip;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(38, 70, 255, 0.5); color: #fff; }
:focus-visible { outline: 2px solid #35e2a2; outline-offset: 2px; border-radius: 4px; }

.wp-site-blocks { position: relative; z-index: 1; }

img { max-width: 100%; height: auto; }

.ss-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ss-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 20px; border-radius: 0 0 10px 0;
  background: #0a1130; color: #eef1ff; font-weight: 600;
}
.ss-skip-link:focus { left: 0; }

/* --- Atmosphere: grid lines + drifting glows ----------------------------- */

.ss-atmos { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip; }

.ss-atmos__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 255, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, #000 0, #000 900px, transparent 1400px);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 900px, transparent 1400px);
}

.ss-atmos__glow { position: absolute; border-radius: 50%; }

.ss-atmos__glow--blue {
  top: -220px; left: -160px; width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(38, 70, 255, 0.38), transparent 65%);
  filter: blur(20px);
  animation: ss-drift 14s ease-in-out infinite;
}

.ss-atmos__glow--green {
  top: -80px; right: -240px; width: 780px; height: 780px;
  background: radial-gradient(circle, rgba(14, 224, 138, 0.22), transparent 62%);
  filter: blur(24px);
  animation: ss-drift 18s ease-in-out infinite reverse;
}

@keyframes ss-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(40px, -30px) scale(1.08); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes ss-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ss-rise { animation: ss-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.ss-rise-1 { animation-delay: 0.08s; }
.ss-rise-2 { animation-delay: 0.16s; }
.ss-rise-3 { animation-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .ss-atmos__glow { animation: none; }
  .ss-rise { animation: none; }
}

/* --- Shell and sections -------------------------------------------------- */

.ss-sec {
  position: relative;
  max-width: var(--wp--custom--shell--max, 1200px);
  margin-inline: auto;
  padding-inline: var(--wp--custom--shell--gutter, clamp(20px, 5vw, 48px));
  padding-block-end: clamp(56px, 7vw, 96px);
}

.ss-sec--head    { padding-block-start: clamp(48px, 8vw, 96px); padding-block-end: clamp(40px, 5vw, 72px); }
.ss-sec--hero    { padding-block-start: clamp(64px, 10vw, 130px); padding-block-end: clamp(56px, 7vw, 96px); }
.ss-sec--tight   { padding-block-end: clamp(48px, 6vw, 80px); }
.ss-sec--roomy   { padding-block-end: clamp(64px, 8vw, 110px); }
.ss-sec--last    { padding-block-end: clamp(72px, 9vw, 120px); }
.ss-sec--center  { text-align: center; }
.ss-sec--narrow  { max-width: calc(var(--wp--custom--shell--form, 720px) + 2 * clamp(20px, 5vw, 48px)); }
.ss-sec--measure { max-width: calc(var(--wp--custom--shell--measure, 760px) + 2 * clamp(20px, 5vw, 48px)); }
.ss-sec--quote   { max-width: calc(900px + 2 * clamp(20px, 5vw, 48px)); text-align: center; }

/* --- Grids --------------------------------------------------------------- */

.ss-g2, .ss-g3, .ss-g4, .ss-split, .ss-case-grid, .ss-logos { display: grid; }

.ss-g2 { grid-template-columns: repeat(2, 1fr); gap: 24px 48px; }
.ss-g3 { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ss-g4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ss-g4--wide-gap { gap: 24px; }
.ss-split { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.ss-split--tight { gap: 48px; }
.ss-case-grid { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.ss-logos { grid-template-columns: repeat(6, 1fr); gap: 20px; align-items: center; }

@media (max-width: 1024px) {
  .ss-g3 { grid-template-columns: 1fr 1fr; }
  .ss-g4, .ss-logos { grid-template-columns: repeat(3, 1fr); }
  .ss-g4--wide-gap { grid-template-columns: 1fr 1fr; }
  .ss-split { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 900px) {
  .ss-case-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 700px) {
  .ss-g2, .ss-g3, .ss-g4 { grid-template-columns: 1fr; }
  .ss-logos { grid-template-columns: 1fr 1fr; }
}

/* The image column always follows the text column on small screens, whichever
   side the design alternates it to on desktop. */
@media (max-width: 900px) {
  .ss-case-grid > .ss-case-media { order: 2; }
  .ss-case-grid > .ss-case-body  { order: 1; }
}

/* --- Type helpers -------------------------------------------------------- */

.ss-eyebrow {
  margin: 0 0 14px;
  font-size: 13.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0ee08a;
  font-weight: 600;
}

.ss-eyebrow--muted { color: #8a95c8; font-weight: 400; }
.ss-eyebrow--center { text-align: center; }

.ss-grad {
  background: linear-gradient(90deg, #4f6bff 10%, #0ee08a 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ss-lead {
  font-size: 18px;
  line-height: 1.6;
  color: #b8c0e8;
  max-width: 58ch;
  margin: 24px 0 0;
}

.ss-lead--wide  { max-width: 62ch; }
.ss-lead--large { font-size: 19px; max-width: 56ch; margin-top: 28px; }
.ss-sec--center .ss-lead, .ss-lead--center { margin-inline: auto; }

/* The AEO answer paragraph: 40–60 declarative words under every commercial
   heading, set brighter than surrounding body copy. */
.ss-answer {
  color: #dfe5ff;
  font-size: 16.5px;
  line-height: 1.7;
  margin: 14px 0 0;
}

.ss-h1-hero {
  font-size: clamp(48px, 7.2vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 13ch;
  margin: 0;
}

.ss-h1 { max-width: 15ch; margin: 0; }
.ss-h2-large { font-size: clamp(32px, 4vw, 48px); }
.ss-title-gap { margin-bottom: 40px; max-width: 20ch; }

/* --- Buttons ------------------------------------------------------------- */

.wp-block-button__link { transition: filter 180ms ease, background-color 180ms ease, border-color 180ms ease; }

.wp-block-button.is-style-ss-gradient > .wp-block-button__link,
.ss-btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(90deg, #2646ff, #0ee08a);
  color: #04101c;
  font-weight: 700;
  font-size: 16px;
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
}

.wp-block-button.is-style-ss-gradient > .wp-block-button__link:hover,
.ss-btn:hover { filter: brightness(1.12); color: #04101c; }

.ss-btn--glow { box-shadow: 0 10px 40px rgba(38, 70, 255, 0.35); }
.ss-btn--sm { padding: 11px 22px; font-size: 15px; border-radius: 10px; font-weight: 600; }

.wp-block-button.is-style-ss-ghost > .wp-block-button__link,
.ss-btn-ghost {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 12px;
  border: 1px solid rgba(143, 163, 255, 0.35);
  background: transparent;
  color: #eef1ff;
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
}

.wp-block-button.is-style-ss-ghost > .wp-block-button__link:hover,
.ss-btn-ghost:hover { background: rgba(143, 163, 255, 0.12); color: #eef1ff; }

.wp-block-button.is-style-ss-ghost-green > .wp-block-button__link,
.ss-btn-ghost-green {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 12px;
  border: 1px solid rgba(14, 224, 138, 0.5);
  background: transparent;
  color: #35e2a2;
  font-weight: 600;
  font-size: 15.5px;
  text-decoration: none;
}

.wp-block-button.is-style-ss-ghost-green > .wp-block-button__link:hover,
.ss-btn-ghost-green:hover { background: rgba(14, 224, 138, 0.12); color: #7ff0c6; }

.wp-block-button.is-style-ss-ghost-blue > .wp-block-button__link,
.ss-btn-ghost-blue {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 10px;
  border: 1px solid rgba(79, 107, 255, 0.5);
  background: transparent;
  color: #a7b4f5;
  font-weight: 600;
  font-size: 14.5px;
  white-space: nowrap;
  text-decoration: none;
}

.wp-block-button.is-style-ss-ghost-blue > .wp-block-button__link:hover,
.ss-btn-ghost-blue:hover { background: rgba(79, 107, 255, 0.15); color: #c3ccf5; }

.ss-btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
.ss-sec--center .ss-btn-row { justify-content: center; }

/* --- Cards --------------------------------------------------------------- */

.ss-card {
  border: 1px solid rgba(143, 163, 255, 0.18);
  border-radius: 16px;
  padding: 26px;
  background: rgba(13, 20, 48, 0.5);
  transition: border-color 200ms ease, transform 200ms ease;
}

.ss-card:hover { border-color: rgba(79, 107, 255, 0.55); transform: translateY(-3px); }
.ss-card > :first-child { margin-top: 0; }
.ss-card > :last-child { margin-bottom: 0; }
.ss-card p { margin: 10px 0 0; color: #b8c0e8; font-size: 15px; line-height: 1.6; }
.ss-card h3, .ss-card h4 { margin: 0; color: #fff; font-size: 19px; }

/* Pillar cards carry the tint, the numeral tile and the chip list. */
.ss-pillar {
  border: 1px solid rgba(143, 163, 255, 0.18);
  border-radius: 18px;
  padding: 30px;
  background: linear-gradient(180deg, rgba(38, 70, 255, 0.12), rgba(13, 20, 48, 0.4));
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: border-color 200ms ease, transform 200ms ease;
}

.ss-pillar:hover { border-color: rgba(79, 107, 255, 0.6); transform: translateY(-4px); }
.ss-pillar h3 { margin: 6px 0 0; color: #fff; font-size: 23px; }
.ss-pillar p { margin: 0; color: #b8c0e8; font-size: 15.5px; line-height: 1.6; }

.ss-pillar--green {
  border-color: rgba(14, 224, 138, 0.35);
  background: linear-gradient(180deg, rgba(14, 224, 138, 0.12), rgba(13, 20, 48, 0.4));
}

.ss-pillar--green:hover { border-color: rgba(14, 224, 138, 0.7); }

.ss-pillar__num {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2646ff, #4f6bff);
  display: grid; place-items: center;
  font-size: 20px; color: #fff;
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
}

.ss-pillar__num--green { background: linear-gradient(135deg, #0ee08a, #17c8a5); color: #04101c; }
.ss-pillar__num--mix   { background: linear-gradient(135deg, #4f6bff, #17c8a5); color: #fff; }

.ss-flagship {
  position: absolute; top: 20px; right: 20px;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2646ff, #0ee08a);
  color: #04101c;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
}

/* AI-enablement offering cards: green-tinted, no numeral. */
.ss-card--ai {
  border: 1px solid rgba(14, 224, 138, 0.3);
  border-radius: 18px;
  padding: 30px;
  background: linear-gradient(180deg, rgba(14, 224, 138, 0.1), rgba(13, 20, 48, 0.4));
}

.ss-card--ai:hover { border-color: rgba(14, 224, 138, 0.6); }
.ss-card--ai h3 { font-size: 21px; }
.ss-card--ai p { margin: 12px 0 0; font-size: 15.5px; }

/* --- Chips and pills ----------------------------------------------------- */

.ss-chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }

.ss-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(79, 107, 255, 0.15);
  border: 1px solid rgba(79, 107, 255, 0.3);
  font-size: 13px;
  color: #c3ccf5;
}

.ss-chip--green {
  background: rgba(14, 224, 138, 0.14);
  border-color: rgba(14, 224, 138, 0.35);
  color: #bdf3dd;
}

.ss-sector-chips { display: flex; flex-wrap: wrap; gap: 10px; }

.ss-sector-chip {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(143, 163, 255, 0.25);
  color: #c3ccf5;
  font-size: 14.5px;
}

.ss-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(79, 107, 255, 0.4);
  color: #a7b4f5;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.ss-pill--green { border-color: rgba(14, 224, 138, 0.45); color: #6fe6b6; }

.ss-pill--featured {
  border: 0;
  background: linear-gradient(90deg, #2646ff, #0ee08a);
  color: #04101c;
  font-size: 12.5px;
  font-weight: 700;
}

.ss-pillar-label {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2646ff, #4f6bff);
  color: #fff;
  white-space: nowrap;
}

.ss-pillar-label--green { background: linear-gradient(135deg, #0ee08a, #17c8a5); color: #04101c; }
.ss-pillar-label--mix   { background: linear-gradient(135deg, #4f6bff, #17c8a5); color: #fff; }

.ss-pillar-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.ss-pillar-head h2 { margin: 0; font-size: clamp(28px, 3.5vw, 40px); }

/* --- Live-dot eyebrow ---------------------------------------------------- */

.ss-live {
  margin: 0 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid rgba(143, 163, 255, 0.28);
  border-radius: 999px;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #aeb9f0;
}

.ss-live::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #0ee08a;
  box-shadow: 0 0 12px #0ee08a;
  flex: 0 0 auto;
}

/* --- Stats --------------------------------------------------------------- */

.ss-statpanel {
  border: 1px solid rgba(143, 163, 255, 0.18);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 36px);
  background: rgba(13, 20, 48, 0.6);
  backdrop-filter: blur(12px);
}

.ss-stat__num {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
}

.ss-stat__num--grad {
  background: linear-gradient(90deg, #7d92ff, #0ee08a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ss-stat__label { color: #aeb9f0; font-size: 14.5px; margin-top: 6px; }

.ss-statpanel--ai .ss-stat__num { font-size: 36px; }
.ss-statpanel--ai .ss-stat__label { font-size: 14px; }

/* Inline stat row (featured result, case studies) */
.ss-statrow { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 26px; }
.ss-statrow .ss-stat__num { font-size: 26px; }
.ss-statrow .ss-stat__label { color: #8a95c8; font-size: 13.5px; margin-top: 2px; }
.ss-statrow--case .ss-stat__num { font-size: 34px; }

.ss-bignum {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(72px, 9vw, 120px);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(90deg, #4f6bff, #0ee08a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Gradient frame panel ------------------------------------------------ */

.ss-frame {
  border-radius: 24px;
  padding: 2px;
  background: linear-gradient(120deg, #2646ff, #0ee08a);
}

.ss-frame__inner {
  border-radius: 22px;
  background: #0a1130;
  padding: clamp(32px, 5vw, 64px);
  text-align: center;
}

.ss-frame__inner > :first-child { margin-top: 0; }
.ss-frame__inner > :last-child { margin-bottom: 0; }
.ss-frame__inner h2 { margin: 0; font-size: clamp(30px, 4vw, 46px); }
.ss-frame__inner p { margin: 18px auto 0; color: #b8c0e8; font-size: 16.5px; line-height: 1.6; max-width: 52ch; }

.ss-frame--banner { border-radius: 20px; }
.ss-frame--banner .ss-frame__inner {
  border-radius: 18px;
  padding: clamp(28px, 4vw, 48px);
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.ss-frame--banner .ss-frame__inner p { margin: 14px 0 0; font-size: 16px; max-width: 60ch; }
.ss-frame--banner .ss-frame__inner h2 { font-size: clamp(26px, 3vw, 36px); }
.ss-frame__body { max-width: 60ch; }

/* --- Found / Did / Returned --------------------------------------------- */

.ss-fdd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; }

@media (max-width: 900px) { .ss-fdd { grid-template-columns: 1fr; } }

.ss-fdd__col { padding-top: 16px; border-top: 2px solid #4f6bff; }
.ss-fdd__col:nth-child(2) { border-top-color: #17c8a5; }
.ss-fdd__col:nth-child(3) { border-top-color: #0ee08a; }

.ss-fdd__label {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #7d92ff;
}

.ss-fdd__col:nth-child(2) .ss-fdd__label { color: #3fe0bf; }
.ss-fdd__col:nth-child(3) .ss-fdd__label { color: #35e2a2; }

.ss-fdd__col p { margin: 8px 0 0; color: #b8c0e8; font-size: 15px; line-height: 1.6; }

/* Four-step process columns: blue -> cyan -> teal -> green */
.ss-steps .ss-step { padding-top: 18px; border-top: 2px solid #4f6bff; }
.ss-steps .ss-step:nth-child(2) { border-top-color: #35b9d9; }
.ss-steps .ss-step:nth-child(3) { border-top-color: #17c8a5; }
.ss-steps .ss-step:nth-child(4) { border-top-color: #0ee08a; }

.ss-step__label {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #7d92ff;
}

.ss-steps .ss-step:nth-child(2) .ss-step__label { color: #5fd0e8; }
.ss-steps .ss-step:nth-child(3) .ss-step__label { color: #3fe0bf; }
.ss-steps .ss-step:nth-child(4) .ss-step__label { color: #35e2a2; }

.ss-step p { margin: 10px 0 0; color: #b8c0e8; font-size: 15px; line-height: 1.6; }

/* --- Media frames -------------------------------------------------------- */

.ss-media {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(143, 163, 255, 0.2);
  background: linear-gradient(135deg, rgba(38, 70, 255, 0.25), rgba(14, 224, 138, 0.15));
}

.ss-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-media.wp-block-image { margin: 0; }
.ss-media--4x3 { aspect-ratio: 4 / 3; }
.ss-media--16x10 { aspect-ratio: 16 / 10; border-radius: 14px; }
.ss-media--16x9 { aspect-ratio: 16 / 9; border-radius: 16px; }
.ss-media--4x5 { aspect-ratio: 4 / 5; border-radius: 16px; background: linear-gradient(160deg, rgba(38, 70, 255, 0.2), rgba(13, 20, 48, 0.6)); }
.ss-media--4x5-green { background: linear-gradient(160deg, rgba(14, 224, 138, 0.15), rgba(13, 20, 48, 0.6)); }

/* Empty image slots still hold their shape while the client supplies artwork. */
.ss-media:empty::after,
.ss-media--placeholder::after {
  content: attr(data-placeholder);
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  color: #6b77ad;
  font-size: 13.5px;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

.ss-logo-slot {
  height: 52px;
  border-radius: 10px;
  border: 1px dashed rgba(143, 163, 255, 0.25);
  display: grid;
  place-items: center;
  color: #6b77ad;
  font-size: 12.5px;
  opacity: 0.7;
}

.ss-logo-slot img { max-height: 52px; width: auto; object-fit: contain; }

/* --- Team ---------------------------------------------------------------- */

.ss-team-card { margin: 0; }
.ss-team-card figcaption, .ss-team-card__caption { margin-top: 12px; }
.ss-team-card__name {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600; font-size: 16.5px; color: #fff;
}
.ss-team-card__role { color: #8a95c8; font-size: 13.5px; margin-top: 2px; }

/* --- Quotes -------------------------------------------------------------- */

.ss-quote {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.4;
  letter-spacing: -0.02em;
  margin: 0;
  color: #dfe5ff;
}

.ss-quote__source { margin: 18px 0 0; color: #8a95c8; font-size: 14.5px; }

.ss-pullquote {
  margin: 32px 0 0;
  border-left: 3px solid #0ee08a;
  padding: 4px 0 4px 22px;
}

.ss-pullquote p {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: 21px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin: 0;
  color: #dfe5ff;
}

/* --- Post cards / insights ---------------------------------------------- */

.ss-post-card {
  border: 1px solid rgba(143, 163, 255, 0.18);
  border-radius: 16px;
  padding: 26px;
  background: rgba(13, 20, 48, 0.5);
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: border-color 180ms ease, transform 180ms ease;
}

.ss-post-card:hover { border-color: rgba(79, 107, 255, 0.55); transform: translateY(-3px); }

.ss-post-card__kicker {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7d92ff;
}

.ss-post-card__kicker--green { color: #35e2a2; }
.ss-post-card__kicker--cyan  { color: #5fd0e8; }
.ss-post-card__kicker--teal  { color: #3fe0bf; }

.ss-post-card h3, .ss-post-card h2 {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  margin: 12px 0 0;
}

.ss-post-card h3 a, .ss-post-card h2 a { color: #fff; }
.ss-post-card h3 a:hover, .ss-post-card h2 a:hover { color: #fff; }
.ss-post-card p { margin: 10px 0 0; color: #b8c0e8; font-size: 14.5px; line-height: 1.6; }

/* Whole-card link overlay keeps one accessible link per card. */
.ss-post-card { position: relative; }
.ss-post-card__link::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }

.ss-featured {
  border: 1px solid rgba(143, 163, 255, 0.18);
  border-radius: 20px;
  padding: clamp(24px, 3.5vw, 44px);
  background: rgba(13, 20, 48, 0.5);
}

.ss-featured h2 {
  font-size: clamp(24px, 2.8vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 18px 0 0;
}

.ss-featured h2 a { color: #fff; }
.ss-featured p { margin: 14px 0 0; color: #b8c0e8; font-size: 15.5px; line-height: 1.65; }

/* --- Article ------------------------------------------------------------- */

.ss-article { position: relative; }
.ss-article__meta { margin: 20px 0 0; color: #8a95c8; font-size: 14px; }

.ss-kicker {
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

.ss-kicker a { color: #7d92ff; }
.ss-kicker a:hover { color: #a7b4f5; }
.ss-kicker__sep { color: #4a5480; }
.ss-kicker__current { color: #35e2a2; }

.ss-takeaways {
  margin-top: 36px;
  border: 1px solid rgba(14, 224, 138, 0.3);
  border-radius: 16px;
  padding: 26px;
  background: rgba(14, 224, 138, 0.06);
}

.ss-takeaways__label {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #35e2a2;
}

.ss-takeaways ol, .ss-takeaways ul {
  margin: 14px 0 0;
  padding-left: 20px;
  color: #cfd6f5;
  font-size: 15.5px;
  line-height: 1.7;
}

.ss-toc { margin-top: 28px; color: #8a95c8; font-size: 14px; }
.ss-toc__label { font-weight: 700; letter-spacing: 0.08em; font-size: 12.5px; }

.ss-case-banner {
  margin-top: 36px;
  border: 1px solid rgba(79, 107, 255, 0.35);
  border-radius: 16px;
  padding: 22px 26px;
  background: rgba(38, 70, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.ss-case-banner__label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #7d92ff;
}

.ss-case-banner__title {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #fff;
  margin-top: 6px;
}

.ss-author {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid rgba(143, 163, 255, 0.15);
}

.ss-author__label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; color: #8a95c8; }
.ss-author p { margin: 10px 0 0; color: #b8c0e8; font-size: 15px; line-height: 1.65; }

/* Post content typography inside the 760px measure */
.ss-article .ss-content > h2 { font-size: 26px; letter-spacing: -0.02em; margin: 44px 0 0; }
.ss-article .ss-content > h3 { font-size: 21px; margin: 32px 0 0; }
.ss-article .ss-content > p  { margin: 16px 0 0; color: #b8c0e8; font-size: 16px; line-height: 1.7; }
.ss-article .ss-content > h2 + p { color: #dfe5ff; font-size: 16.5px; margin-top: 14px; }
.ss-article .ss-content > figure { margin: 28px 0 0; }
.ss-article .ss-content > ul, .ss-article .ss-content > ol { margin: 16px 0 0; color: #b8c0e8; line-height: 1.7; }

/* --- Header -------------------------------------------------------------- */

.ss-header {
  position: relative;
  z-index: 20;
  max-width: var(--wp--custom--shell--max, 1200px);
  margin-inline: auto;
  padding: 22px var(--wp--custom--shell--gutter, clamp(20px, 5vw, 48px));
}

.ss-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.ss-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; }
.ss-brand:hover { color: #fff; }
.ss-brand img, .ss-brand .custom-logo { width: 26px; height: auto; display: block; }

.ss-brand__word {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: #fff;
}

.ss-brand__word .ss-grad { background: linear-gradient(90deg, #4f6bff, #0ee08a); -webkit-background-clip: text; background-clip: text; color: transparent; }

.ss-nav { display: flex; gap: 28px; align-items: center; }

.ss-nav .wp-block-navigation__container { gap: 28px; }
.ss-nav .wp-block-navigation-item__content { color: #b8c0e8; font-size: 15px; }
.ss-nav .wp-block-navigation-item__content:hover { color: #fff; }
.ss-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content { color: #fff; }

/* Mobile overlay menu, styled to the brand. */
.ss-nav .wp-block-navigation__responsive-container.is-menu-open {
  background: #070c22;
  padding: 24px clamp(20px, 5vw, 48px);
}

.ss-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: #eef1ff; font-size: 22px; }
.ss-nav .wp-block-navigation__responsive-container-open,
.ss-nav .wp-block-navigation__responsive-container-close { color: #eef1ff; }

.ss-header__cta { display: inline-block; }

@media (max-width: 700px) {
  .ss-header { padding-block: 16px; }
  .ss-header__cta .ss-btn { padding: 10px 16px; font-size: 14px; }
}

/* --- Footer -------------------------------------------------------------- */

.ss-footer {
  position: relative;
  border-top: 1px solid rgba(143, 163, 255, 0.15);
  padding: 32px var(--wp--custom--shell--gutter, clamp(20px, 5vw, 48px));
  max-width: var(--wp--custom--shell--max, 1200px);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: #8a95c8;
  font-size: 14px;
}

.ss-footer p { margin: 0; color: #8a95c8; font-size: 14px; }

/* --- Forms --------------------------------------------------------------- */

.ss-inline-form {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}

.ss-input, .ss-select, .ss-textarea,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="url"],
.fluentform input[type="tel"],
.fluentform select,
.fluentform textarea {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(143, 163, 255, 0.3);
  background: rgba(13, 20, 48, 0.7);
  color: #eef1ff;
  font-size: 15.5px;
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  line-height: 1.4;
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

.ss-inline-form .ss-input { width: auto; min-width: 220px; }

.ss-input::placeholder, .ss-textarea::placeholder,
.fluentform input::placeholder, .fluentform textarea::placeholder { color: #6b77ad; }

.ss-input:focus, .ss-select:focus, .ss-textarea:focus,
.fluentform input:focus, .fluentform select:focus, .fluentform textarea:focus {
  border-color: rgba(14, 224, 138, 0.55);
  outline: 2px solid #35e2a2;
  outline-offset: 2px;
}

.ss-textarea, .fluentform textarea { min-height: 110px; resize: vertical; }

.ss-select, .fluentform select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238a95c8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  padding-right: 42px;
}

.ss-select option, .fluentform select option { background: #0a1130; color: #eef1ff; }

/* --- Fluent Forms: the audit form, restyled to the design --------------- */

.ss-form-wrap { margin-top: 40px; }

.fluentform .ff-el-group { margin-bottom: 20px; }

.fluentform .ff-el-input--label label,
.fluentform .ff-el-input--label > label {
  font-size: 14px;
  font-weight: 600;
  color: #cfd6f5;
  margin-bottom: 8px;
  display: block;
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}

.fluentform .ff-el-is-required.asterisk-right label:after { color: #35e2a2; }

.fluentform .ff-el-form-hint,
.fluentform .ff-el-help-message { color: #8a95c8; font-size: 13px; }

.fluentform .ff-t-container { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.fluentform .ff-t-cell { padding: 0; }

@media (max-width: 700px) { .fluentform .ff-t-container { grid-template-columns: 1fr; } }

.fluentform .ff-btn-submit,
.fluentform .ff_btn_style {
  width: 100%;
  padding: 16px 28px;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(90deg, #2646ff, #0ee08a);
  color: #04101c;
  font-weight: 700;
  font-size: 16.5px;
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  transition: filter 180ms ease;
}

.fluentform .ff-btn-submit:hover, .fluentform .ff_btn_style:hover { filter: brightness(1.12); }

.fluentform .ff-message-success,
.ff-message-success {
  border: 1px solid rgba(14, 224, 138, 0.4);
  background: rgba(14, 224, 138, 0.08);
  color: #cfe9dd;
  border-radius: 14px;
  padding: 20px 24px;
}

.fluentform .error, .fluentform .text-danger, .fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error select, .fluentform .ff-el-is-error textarea { border-color: #ff7a7a; }
.fluentform .error.text-danger { color: #ff9f9f; font-size: 13.5px; }

.ss-form-note {
  margin: 0;
  text-align: center;
  color: #8a95c8;
  font-size: 13.5px;
}

/* Newsletter form sits inline and centered. */
.ss-subscribe .fluentform .ff-t-container { grid-template-columns: 1fr auto; gap: 12px; align-items: end; justify-content: center; }
.ss-subscribe .fluentform .ff-el-group { margin-bottom: 0; }
.ss-subscribe .fluentform .ff-btn-submit { width: auto; padding: 14px 28px; font-size: 15.5px; }
.ss-subscribe .fluentform input[type="email"] { min-width: 260px; }

@media (max-width: 700px) {
  .ss-subscribe .fluentform .ff-t-container { grid-template-columns: 1fr; }
  .ss-subscribe .fluentform .ff-btn-submit { width: 100%; }
}

/* --- Archive / pagination ----------------------------------------------- */

.ss-pagination { margin-top: 48px; display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.ss-pagination .page-numbers {
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(143, 163, 255, 0.25);
  color: #c3ccf5;
}
.ss-pagination .page-numbers:hover { border-color: rgba(79, 107, 255, 0.6); color: #fff; }
.ss-pagination .page-numbers.current { background: linear-gradient(90deg, #2646ff, #0ee08a); color: #04101c; border-color: transparent; font-weight: 700; }

.ss-catnav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.ss-catnav a {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(143, 163, 255, 0.25);
  color: #c3ccf5;
  font-size: 14px;
}
.ss-catnav a:hover, .ss-catnav a[aria-current="page"] { border-color: rgba(14, 224, 138, 0.5); color: #35e2a2; }

/* --- Utility ------------------------------------------------------------- */

.ss-stack-sm > * + * { margin-top: 10px; }
.ss-mt-0 { margin-top: 0 !important; }
.ss-mt-sm { margin-top: 14px; }
.ss-mt-md { margin-top: 26px; }
.ss-mt-lg { margin-top: 36px; }
.ss-center { text-align: center; }
.ss-measure { max-width: 52ch; }
.ss-sec--center .ss-measure { margin-inline: auto; }

/* Editor parity: give the canvas the same ground so contrast reads true. */
.editor-styles-wrapper { background: #070c22; }

/* --- Block-layout reconciliation ----------------------------------------
   Core's flow layout puts a blockGap margin between every child. Inside the
   theme's own components the spacing is set by the component itself, so the
   gap variable is zeroed on those containers rather than fought with
   !important further down the cascade.
   ------------------------------------------------------------------------ */

.ss-g2, .ss-g3, .ss-g4, .ss-split, .ss-case-grid, .ss-logos, .ss-fdd, .ss-steps,
.ss-statrow, .ss-chips, .ss-sector-chips, .ss-btn-row, .ss-stat, .ss-card,
.ss-pillar, .ss-post-card, .ss-fdd__col, .ss-step, .ss-takeaways, .ss-case-banner,
.ss-author, .ss-frame__inner, .ss-featured, .ss-statpanel, .ss-team-card,
.ss-inline-form, .ss-header__inner, .ss-nav, .ss-footer, .ss-pillar-head {
  --wp--style--block-gap: 0px;
}

.ss-g2 > *, .ss-g3 > *, .ss-g4 > *, .ss-split > *, .ss-case-grid > *,
.ss-logos > *, .ss-fdd > *, .ss-steps > *, .ss-statrow > *,
.ss-header__inner > *, .ss-nav > *, .ss-footer > * {
  margin-block-start: 0;
}

/* Section groups keep their own vertical rhythm. */
.ss-sec > * { margin-block-start: 0; }
.ss-sec > * + * { margin-block-start: 0; }

/* Core adds .wp-block-heading; the design's margins come from the helpers. */
.wp-block-heading.ss-title-gap { margin-top: 0; }
.ss-pillar-head .wp-block-heading { margin: 0; }

/* Header CTA is the small button variant. */
.ss-header__cta { margin: 0; }
.ss-header__cta > .wp-block-button > .wp-block-button__link {
  padding: 11px 22px;
  font-size: 15px;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 8px 30px rgba(14, 224, 138, 0.25);
}

/* Buttons block spacing matches the design's 14px row gap. */
.wp-block-buttons.ss-btn-row { gap: 14px; }

/* Core list resets inside chip rows. */
.wp-block-list.ss-chips, .wp-block-list.ss-sector-chips { margin: 0; padding: 0; list-style: none; }
.wp-block-list.ss-chips li, .wp-block-list.ss-sector-chips li { list-style: none; }

/* Post title in cards and articles. */
.ss-post-card .wp-block-post-title { margin: 12px 0 0; font-size: 19px; line-height: 1.3; }
.ss-post-card .wp-block-post-title a { color: #fff; }
.ss-post-card .wp-block-post-excerpt { margin: 10px 0 0; }
.ss-post-card .wp-block-post-excerpt__excerpt { color: #b8c0e8; font-size: 14.5px; line-height: 1.6; margin: 0; }
.ss-post-card .wp-block-post-terms { display: block; }
.ss-post-card .wp-block-post-terms a { color: inherit; }

.ss-article .wp-block-post-title { margin: 0; font-size: clamp(32px, 4.5vw, 52px); line-height: 1.08; }

/* Featured image on a case study single. */
.wp-block-post-featured-image.ss-media img { border-radius: inherit; }

/* Search form, styled with the rest of the inputs. */
.wp-block-search__input {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(143, 163, 255, 0.3);
  background: rgba(13, 20, 48, 0.7);
  color: #eef1ff;
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}
.wp-block-search__button {
  border-radius: 12px;
  border: 0;
  background: linear-gradient(90deg, #2646ff, #0ee08a);
  color: #04101c;
  font-weight: 700;
  padding: 14px 24px;
}
.wp-block-search { margin-top: 24px; max-width: 520px; }

/* Query pagination inherits the pill treatment. */
.wp-block-query-pagination.ss-pagination { gap: 12px; margin-top: 48px; }
.wp-block-query-pagination.ss-pagination a,
.wp-block-query-pagination.ss-pagination .page-numbers {
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(143, 163, 255, 0.25);
  color: #c3ccf5;
}
.wp-block-query-pagination.ss-pagination .current {
  background: linear-gradient(90deg, #2646ff, #0ee08a);
  color: #04101c;
  border-color: transparent;
  font-weight: 700;
}

/* Post template renders a <ul>; the grid classes go on it. */
ul.wp-block-post-template.ss-g3 { margin: 0; padding: 0; list-style: none; }
ul.wp-block-post-template.ss-g3 > li { list-style: none; margin: 0; }

/* Term description under an archive title. */
.wp-block-term-description.ss-lead p { margin: 0; }

/* Four-column rows that read better as a 2×2 on tablets. */
@media (max-width: 1024px) { .ss-g4--pair { grid-template-columns: 1fr 1fr; } }