/* ============================================================
   JOSEQUAL — Inner page styles (services / portfolio / about / contact)
   Loads after sections.css, before polish.css.
   ============================================================ */

/* Active nav link */
.nav-links a.active { color: var(--text); }
.nav-links a.active::after { width: 100%; }

/* ============================================================
   PAGE HERO  (compact header for inner pages)
   ============================================================ */
.page-hero {
  position: relative; overflow: hidden;
  padding-top: clamp(130px, 17vh, 190px);
  padding-bottom: clamp(56px, 8vw, 96px);
  text-align: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(28, 60, 215, 0.34), transparent 62%),
    radial-gradient(ellipse 50% 50% at 85% 20%, rgba(96, 28, 220, 0.20), transparent 58%),
    linear-gradient(152deg, #060f2c 0%, #06071e 52%, #040516 100%);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000, transparent 75%);
  opacity: .5;
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .crumb {
  display: inline-flex; gap: 8px; align-items: center;
  font-size: 13px; color: var(--text-faint); margin-bottom: 18px;
}
.page-hero .crumb a { color: var(--blue-bright); }
.page-hero h1 {
  font-size: clamp(38px, 6vw, 78px); line-height: 1.02;
  letter-spacing: -0.03em;
}
.page-hero h1 .accent {
  background: linear-gradient(128deg, #5ba6ff, #9168ff 52%, #c47cff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.page-hero p {
  color: var(--text-dim); font-size: clamp(16px, 1.6vw, 20px);
  max-width: 56ch; margin: 22px auto 0;
}
.page-hero .hero-actions { justify-content: center; margin-top: 32px; }

/* ============================================================
   SERVICES PAGE
   ============================================================ */
.svc-page .svc { cursor: default; }
/* alternating feature rows */
.feature-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.feature-row + .feature-row { margin-top: clamp(44px, 6vw, 80px); }
.feature-row:nth-child(even) .fr-media { order: -1; }
.fr-media {
  aspect-ratio: 4/3; border-radius: 22px; position: relative; overflow: hidden;
  border: 1px solid var(--line); display: grid; place-items: center;
}
.fr-media svg { width: 64px; height: 64px; color: #fff; opacity: .95; position: relative; z-index: 1; }
.fr-media::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000, transparent 75%);
}
.feature-row:nth-child(1) .fr-media { background: linear-gradient(135deg, #2f6bff, #6d3bff); }
.feature-row:nth-child(2) .fr-media { background: linear-gradient(135deg, #0ea5e9, #2f6bff); }
.feature-row:nth-child(3) .fr-media { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.fr-text .num { font-family: var(--display); font-weight: 700; color: var(--blue-bright); font-size: 15px; }
.fr-text h3 { font-size: clamp(24px, 3vw, 36px); margin-top: 10px; }
.fr-text p { color: var(--text-dim); margin-top: 14px; max-width: 46ch; }
.fr-list { margin-top: 20px; display: grid; gap: 10px; }
.fr-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--text); font-size: 15px; }
.fr-list svg { width: 19px; height: 19px; color: var(--blue-bright); flex: none; margin-top: 2px; }

/* ============================================================
   PORTFOLIO PAGE
   ============================================================ */
.pf-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; }
.pf-chip {
  padding: 9px 18px; border-radius: 999px; font-family: var(--display); font-weight: 600; font-size: 14px;
  color: var(--text-dim); background: var(--card); border: 1px solid var(--line);
  transition: color .25s, border-color .25s, background .25s;
}
.pf-chip.is-active, .pf-chip:hover { color: #fff; background: var(--blue); border-color: var(--blue); }
.theme-light .pf-chip, .theme-tint .pf-chip { background: #fff; }
.theme-light .pf-chip.is-active, .theme-tint .pf-chip.is-active,
.theme-light .pf-chip:hover, .theme-tint .pf-chip:hover { color: #fff; }

.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pf-card {
  position: relative; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--line); aspect-ratio: 4/3;
  display: flex; align-items: flex-end; isolation: isolate;
  transition: transform .45s var(--ease), box-shadow .5s;
}
.pf-card:hover { transform: translateY(-6px); }
.theme-light .pf-card:hover, .theme-tint .pf-card:hover { box-shadow: 0 30px 60px -32px rgba(18,38,86,0.4); }
.pf-cover { position: absolute; inset: 0; z-index: 0; }
.pf-cover::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 28px 28px; opacity: .6;
}
.pf-card:nth-child(6n+1) .pf-cover { background: linear-gradient(135deg, #2f6bff, #6d3bff); }
.pf-card:nth-child(6n+2) .pf-cover { background: linear-gradient(135deg, #0ea5e9, #2f6bff); }
.pf-card:nth-child(6n+3) .pf-cover { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.pf-card:nth-child(6n+4) .pf-cover { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.pf-card:nth-child(6n+5) .pf-cover { background: linear-gradient(135deg, #10b981, #0ea5e9); }
.pf-card:nth-child(6n+6) .pf-cover { background: linear-gradient(135deg, #6366f1, #ec4899); }
.pf-meta {
  position: relative; z-index: 1; width: 100%; padding: 24px;
  background: linear-gradient(0deg, rgba(5,9,26,0.92) 8%, transparent 100%);
}
.pf-meta .pf-tag { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #9ec0ff; }
.pf-meta h3 { color: #fff; font-size: 21px; margin-top: 6px; }
.pf-meta .pf-metric { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-family: var(--display); font-weight: 700; font-size: 13.5px; color: #aef0c8; }
.pf-meta .pf-metric svg { width: 14px; height: 14px; }

/* ============================================================
   OUR WORK PAGE
   ============================================================ */
/* 19ch squeezed these headings into four-line columns — and, being more
   specific than `.sec-head--svc h2`, it was silently overriding the wider
   measure the Platforms heading is supposed to get. Both fixed here. */
.ow-section .sec-head h2 { max-width: 32ch; text-wrap: balance; }
.ow-section .sec-head--svc h2 { max-width: 32ch; }
.ow-proof-intro {
  display: grid; gap: 12px; text-align: center; justify-items: center;
  margin-bottom: 28px;
}
.ow-proof-intro h2 {
  font-size: clamp(32px, 4.4vw, 56px);
  max-width: 18ch;
}
.ow-proof-intro p { color: var(--text-dim); max-width: 48ch; }
.ow-empty {
  max-width: 760px; margin: 0 auto; text-align: center;
  padding: clamp(34px, 5vw, 58px);
  border-radius: 26px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 28px 60px -38px rgba(18,38,86,.34);
}
.ow-empty-mark {
  display: grid; place-items: center;
  width: 62px; height: 62px; margin: 0 auto 18px;
  border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--blue), #7c4dff);
  font-family: var(--display); font-weight: 700;
}
.ow-empty h3 { font-size: clamp(24px, 3vw, 34px); }
.ow-empty p { color: var(--text-dim); margin: 12px auto 0; max-width: 62ch; }
.ow-empty .hero-actions { justify-content: center; margin-top: 26px; }
.ow-featured-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
}
.ow-case,
.ow-card,
.ow-answer,
.ow-process-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 24px; overflow: hidden;
  transition: transform .42s var(--ease), border-color .3s, box-shadow .45s;
}
.theme-light .ow-case,
.theme-light .ow-card,
.theme-light .ow-answer,
.theme-light .ow-process-card,
.theme-tint .ow-case,
.theme-tint .ow-card,
.theme-tint .ow-answer,
.theme-tint .ow-process-card { background: #fff; }
.ow-case:hover,
.ow-card:hover,
.ow-answer:hover {
  transform: translateY(-5px);
  border-color: rgba(47,107,255,.36);
  box-shadow: 0 30px 62px -36px rgba(18,38,86,.38);
}
.ow-featured-card { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); min-height: 420px; }
.ow-shot,
.ow-card-img {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #12307e, #2f6bff 58%, #7c4dff);
}
.ow-shot img,
.ow-card-img img { width: 100%; height: 100%; object-fit: cover; }
.ow-placeholder {
  position: relative; min-height: 100%; display: grid; align-content: center; gap: 10px;
  padding: 28px; color: #fff;
}
.ow-placeholder::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, #000, transparent 76%);
}
.ow-placeholder span,
.ow-placeholder strong { position: relative; z-index: 1; }
.ow-placeholder span {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .18em;
  font-size: 12px; color: rgba(255,255,255,.72);
}
.ow-placeholder strong { font-family: var(--display); font-size: clamp(22px, 2.7vw, 34px); line-height: 1.08; max-width: 10ch; }
.ow-placeholder-sm { min-height: 210px; align-content: end; }
.ow-placeholder-sm strong { display: none; }
.ow-case-body,
.ow-card-content { padding: clamp(24px, 3.4vw, 36px); }
.ow-card-kicker {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
.ow-card-kicker span,
.ow-type {
  display: inline-flex; padding: 5px 10px; border-radius: 999px;
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue); background: rgba(47,107,255,.09);
}
.ow-case h3,
.ow-card h3 { font-size: clamp(22px, 2.4vw, 32px); margin-top: 8px; }
.ow-case p,
.ow-card p,
.ow-answer p,
.ow-process-card p { color: var(--text-dim); margin-top: 12px; }
.ow-card-block { margin-top: 20px; }
.ow-card-block strong,
.ow-meta-line strong {
  display: block; font-family: var(--display); font-size: 13px;
  color: var(--text); margin-bottom: 8px;
}
.ow-card-block p { margin-top: 0; }
.ow-mini-tags {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.ow-mini-tags span {
  display: inline-flex; padding: 6px 10px; border-radius: 999px;
  background: rgba(12,24,56,.06); color: var(--text-dim);
  border: 1px solid rgba(12,24,56,.08);
  font-size: 12.5px; font-weight: 600;
}
.ow-case .btn { margin-top: 24px; color: var(--text); }
/* ── Project cards: compact grid ──────────────────────────────────────── */
.ow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 18px;
}
.ow-card {
  display: flex; flex-direction: column;
  border-radius: 16px;
}
.ow-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px -24px rgba(18, 38, 86, .34);
}
.ow-card .ow-card-img { position: relative; aspect-ratio: 16/9; }
/* Card internals live in the "clickable project cards" block further down;
   only the bits that are not restyled there are kept here. */
.ow-card .ow-placeholder-sm { min-height: 0; height: 100%; align-content: center; padding: 16px; }
.ow-card .ow-placeholder-sm span { font-size: 11px; }
.ow-card .ow-mini-tags { gap: 6px; margin: 1px 0 0; }
.ow-card .ow-mini-tags span {
  padding: 3px 8px; font-size: 11px; font-weight: 600; border-radius: 7px;
}
@media (max-width: 640px) {
  .ow-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
}
.ow-service-cloud,
.ow-industries {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
}
.ow-service-pill,
.ow-industries span {
  display: flex; align-items: center; min-height: 64px;
  padding: 16px 18px; border-radius: 16px;
  background: #fff; border: 1px solid var(--line);
  color: var(--text); font-family: var(--display); font-weight: 600;
  transition: transform .35s var(--ease), border-color .3s, box-shadow .35s;
}
.ow-service-pill:hover {
  transform: translateY(-4px); border-color: rgba(47,107,255,.36);
  box-shadow: 0 20px 46px -30px rgba(18,38,86,.34);
}
.ow-answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ow-answer { padding: clamp(28px, 4vw, 44px); }
.ow-answer h2 { font-size: clamp(28px, 3.4vw, 42px); margin-top: 16px; }
.ow-process-card {
  display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(28px, 4vw, 56px);
  padding: clamp(30px, 5vw, 56px);
}
.ow-process-card h2 { font-size: clamp(30px, 4vw, 50px); margin-top: 16px; }
.ow-principles { display: grid; gap: 12px; }
.ow-principles div {
  padding: 18px 20px; border-radius: 16px;
  background: rgba(47,107,255,.06); border: 1px solid rgba(47,107,255,.14);
}
.ow-principles strong { display: block; font-family: var(--display); font-size: 16px; color: var(--text); }
.ow-principles span { display: block; margin-top: 5px; color: var(--text-dim); font-size: 14.5px; }
.section-actions {
  display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 44px);
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.value {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 30px;
  transition: transform .4s var(--ease), border-color .3s, box-shadow .4s;
}
.value:hover { transform: translateY(-5px); border-color: rgba(90,141,255,0.45); }
.theme-light .value:hover, .theme-tint .value:hover { box-shadow: 0 24px 48px -28px rgba(18,38,86,0.3); }
.value .v-ico { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(47,107,255,0.12); border: 1px solid rgba(90,141,255,0.3); color: var(--blue-bright); margin-bottom: 20px; }
.value .v-ico svg { width: 26px; height: 26px; }
.value h3 { font-size: 20px; }
.value p { color: var(--text-dim); font-size: 15px; margin-top: 10px; }

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.member {
  text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 32px 24px; transition: transform .4s var(--ease), border-color .3s, box-shadow .4s;
}
.member:hover { transform: translateY(-5px); border-color: rgba(90,141,255,0.45); }
.theme-light .member:hover, .theme-tint .member:hover { box-shadow: 0 24px 48px -28px rgba(18,38,86,0.3); }
.member .m-av {
  width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 18px;
  display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 30px; color: #fff;
  box-shadow: 0 0 0 4px rgba(90,141,255,0.18);
}
.member:nth-child(4n+1) .m-av { background: linear-gradient(135deg, #2f6bff, #6d3bff); }
.member:nth-child(4n+2) .m-av { background: linear-gradient(135deg, #0ea5e9, #2f6bff); }
.member:nth-child(4n+3) .m-av { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.member:nth-child(4n+4) .m-av { background: linear-gradient(135deg, #10b981, #0ea5e9); }
.member h4 { font-family: var(--display); font-size: 18px; font-weight: 600; }
.member .m-role { color: var(--blue-bright); font-size: 13.5px; margin-top: 4px; font-weight: 600; }
.member .m-bio { color: var(--text-dim); font-size: 14px; margin-top: 12px; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.cform-grid {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 0; align-items: stretch;
  background: #fff; border: 1px solid var(--line); border-radius: 28px; overflow: hidden;
  box-shadow: 0 30px 70px -42px rgba(18, 38, 86, 0.34);
}
.contact-info {
  position: relative; display: flex; flex-direction: column; gap: 28px;
  padding: clamp(28px, 4vw, 48px);
  background:
    radial-gradient(ellipse 90% 70% at 0% 0%, rgba(47, 107, 255, 0.16), transparent 58%),
    radial-gradient(ellipse 55% 45% at 100% 100%, rgba(14, 165, 233, 0.1), transparent 60%),
    linear-gradient(165deg, #f3f7ff 0%, #eef3ff 42%, #f8faff 100%);
  border-inline-end: 1px solid rgba(18, 38, 86, 0.08);
}
.contact-info::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background-image:
    linear-gradient(rgba(47, 107, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 107, 255, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 85% 80% at 20% 15%, #000, transparent 72%);
}
.contact-info > * { position: relative; z-index: 1; }
.contact-info-copy .eyebrow { margin-bottom: 14px; }
.contact-info h2 {
  font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; letter-spacing: -0.02em;
}
.contact-info .lead {
  color: var(--text-dim); margin-top: 14px; max-width: 34ch;
  font-size: clamp(15px, 1.4vw, 17px); line-height: 1.65;
}
.cform-grid .contact-methods { margin-top: 0; gap: 10px; }
.cform-grid .cmethod {
  background: rgba(255, 255, 255, 0.78); border-color: rgba(18, 38, 86, 0.08);
  box-shadow: 0 10px 24px -20px rgba(18, 38, 86, 0.35); backdrop-filter: blur(6px);
}
.cform-grid .cmethod:hover {
  transform: translateY(-2px); border-color: rgba(47, 107, 255, 0.34);
  background: #fff; box-shadow: 0 16px 30px -20px rgba(47, 107, 255, 0.4);
}
.cform-grid .cmethod .cm-copy { display: grid; gap: 2px; min-width: 0; }
.cform-grid .cmethod .cm-lab {
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  font-family: var(--display); font-weight: 700; color: var(--text-faint);
}
.cform-grid .cmethod .cm-val {
  font-size: 15px; font-weight: 600; color: var(--text);
  word-break: break-word; margin-top: 0;
}
.contact-assurance {
  margin-top: auto; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(47, 107, 255, 0.12);
}
.contact-assurance-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16);
}
.contact-assurance p {
  margin: 0; color: var(--text-dim); font-size: 13.5px; font-weight: 600; line-height: 1.4;
}
.cform-card {
  background: #fff; border: 0; border-radius: 0;
  padding: clamp(28px, 4vw, 48px);
}
.cform-card h3 { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.02em; }
.cform-card p.sub { color: var(--text-dim); margin-top: 8px; font-size: 15px; }
.cform-card .form { margin-top: 22px; }
.map-embed {
  margin-top: 30px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line);
  aspect-ratio: 16/9; position: relative; background: linear-gradient(135deg, #0c1b54, #142654);
  display: grid; place-items: center;
}
.map-embed::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(120,160,255,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,255,0.10) 1px, transparent 1px);
  background-size: 30px 30px;
}
.map-embed .map-pin { position: relative; z-index: 1; color: var(--blue-bright); text-align: center; font-family: var(--display); font-weight: 600; }
.map-embed .map-pin svg { width: 38px; height: 38px; display: block; margin: 0 auto 8px; }

/* Real embedded map: drop the decorative grid overlay so it can't paint over the iframe. */
.map-embed.has-map { display: block; background: #eef3ff; border-color: var(--line-2); }
.map-embed.has-map::after { content: none; }
.map-embed.has-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Location map: aligned with .cform-grid above (same .wrap max-width and
   gutters), sitting as its own section above the footer. */
.map-section { padding-bottom: clamp(56px, 7vw, 104px); }
.map-section .map-embed {
  margin-top: 0; width: 100%;
  border-radius: 24px;            /* matches .cform-card beside it */
  aspect-ratio: auto; height: clamp(300px, 30vw, 440px);
}

.form-note { color: var(--text-faint); font-size: 13px; margin-top: 14px; text-align: center; }
.form-ok {
  display: none; margin-top: 16px; padding: 14px 18px; border-radius: 12px;
  background: rgba(54,211,153,0.12); border: 1px solid rgba(54,211,153,0.45); color: #36d399;
  font-size: 14.5px; font-weight: 600;
}
.form-ok.show { display: block; }

/* ============================================================
   CLIENT PORTAL + TECH SUPPORT
   ============================================================ */
.client-auth-hero h1,.client-portal-hero h1{max-width:860px;margin-inline:auto}
.client-portal-hero.compact{padding-bottom:clamp(42px,6vw,72px)}
.client-auth-section .wrap{max-width:920px}
.client-auth-card,.client-panel,.support-entry-card{
  background:#fff;border:1px solid var(--line);border-radius:24px;
  box-shadow:0 28px 60px -38px rgba(18,38,86,.34)
}
.client-auth-card{max-width:620px;margin:0 auto;padding:clamp(28px,5vw,46px)}
.client-auth-card.wide{max-width:860px}
.client-auth-card h2,.client-panel h2,.support-entry-card h3{font-size:clamp(26px,3vw,38px);margin-top:14px}
.client-auth-card p,.client-panel p,.support-entry-card p{color:var(--text-dim);margin-top:10px}
.client-form{display:grid;gap:18px;margin-top:24px}
.client-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.client-form-grid .full{grid-column:1/-1}
.client-form label{display:grid;gap:8px}
.client-form label span{font-family:var(--display);font-size:13px;font-weight:700;color:var(--text);letter-spacing:.02em}
.client-form input,.client-form select,.client-form textarea{
  width:100%;border:1px solid rgba(12,24,56,.12);border-radius:13px;
  background:#f8fbff;color:var(--text);padding:14px 15px;font:inherit;outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s
}
.client-form textarea{resize:vertical;min-height:130px}
.client-form input:focus,.client-form select:focus,.client-form textarea:focus{
  border-color:rgba(47,107,255,.5);background:#fff;box-shadow:0 0 0 4px rgba(47,107,255,.09)
}
.client-form small{color:var(--text-faint);font-size:13px}
.client-check{display:flex!important;grid-template-columns:auto 1fr;align-items:center;gap:10px!important}
.client-check input{width:auto}
.client-alert{margin:20px 0;padding:14px 16px;border-radius:14px;font-weight:700;font-size:14px}
.client-alert.error{background:rgba(239,68,68,.09);color:#b42318;border:1px solid rgba(239,68,68,.2)}
.client-alert.success{background:rgba(34,197,94,.1);color:#087443;border:1px solid rgba(34,197,94,.25)}
.client-auth-foot{margin-top:22px;text-align:center;color:var(--text-dim)}
.client-auth-foot a{color:var(--blue);font-weight:800}
.client-portal-nav{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px;margin-bottom:24px;border:1px solid var(--line);border-radius:20px;
  background:#fff;box-shadow:0 20px 44px -34px rgba(18,38,86,.32)
}
.client-portal-id{display:flex;align-items:center;gap:12px;min-width:220px}
.client-avatar{
  width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center;
  color:#fff;background:linear-gradient(135deg,var(--blue),#7c4dff);font-family:var(--display);font-weight:800
}
.client-portal-id strong,.client-portal-id small{display:block}
.client-portal-id small{color:var(--text-faint);font-size:12.5px}
.client-portal-nav nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.client-portal-nav nav a,.client-portal-nav form button,.client-filter-row a{
  display:inline-flex;align-items:center;justify-content:center;padding:9px 13px;border-radius:999px;
  font-family:var(--display);font-weight:700;font-size:13px;color:var(--text-dim);
  border:1px solid transparent;transition:background .2s,color .2s,border-color .2s
}
.client-portal-nav nav a.active,.client-portal-nav nav a:hover,.client-filter-row a.active,.client-filter-row a:hover{
  color:#fff;background:var(--blue);border-color:var(--blue)
}
.client-portal-nav form button:hover{color:#b42318;background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.18)}
.client-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}
.client-stat{padding:22px;border-radius:20px;color:#fff;background:linear-gradient(150deg,#14275a,#0c193a);border:1px solid rgba(255,255,255,.08)}
.client-stat span{display:block;color:#9fb0d6;font-size:13px;font-weight:700}
.client-stat strong{display:block;margin-top:8px;font-family:var(--display);font-size:34px;line-height:1}
.client-panel{padding:clamp(24px,4vw,34px)}
.client-panel-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.client-ticket-list{display:grid;gap:10px}
.client-ticket-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;
  border:1px solid rgba(12,24,56,.1);border-radius:16px;background:#f8fbff;
  transition:transform .2s,border-color .2s,background .2s
}
.client-ticket-row:hover{transform:translateY(-2px);border-color:rgba(47,107,255,.28);background:#fff}
.client-ticket-row strong,.client-ticket-row small{display:block}
.client-ticket-row small{color:var(--text-faint);margin-top:3px;font-size:13px}
.client-badge{display:inline-flex;align-items:center;white-space:nowrap;padding:6px 10px;border-radius:999px;font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.02em}
.status-new{background:rgba(47,107,255,.1);color:var(--blue)}
.status-in_review{background:rgba(124,77,255,.1);color:#6d3bff}
.status-in_progress{background:rgba(245,158,11,.14);color:#a16207}
.status-waiting_client{background:rgba(12,24,56,.08);color:var(--text-dim)}
.status-resolved{background:rgba(34,197,94,.12);color:#087443}
.status-closed{background:rgba(12,24,56,.08);color:var(--text-faint)}
.client-empty{padding:32px;text-align:center;border:1px dashed rgba(12,24,56,.16);border-radius:18px;background:#f8fbff}
.client-empty.compact{margin-top:22px}
.client-empty h3{font-size:22px}
.client-empty p{margin:8px auto 20px;max-width:48ch}
.client-filter-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.client-ticket-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start}
.client-thread{display:grid;gap:14px}
.client-message{padding:18px;border-radius:18px;border:1px solid rgba(12,24,56,.1);background:#f8fbff}
.client-message.admin{background:rgba(47,107,255,.06);border-color:rgba(47,107,255,.18)}
.client-message-meta{display:flex;justify-content:space-between;gap:14px;color:var(--text-faint);font-size:13px}
.client-message-meta strong{color:var(--text)}
.client-attachment{display:inline-flex;margin-top:12px;color:var(--blue);font-family:var(--display);font-weight:800}
.client-reply-form{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.client-ticket-aside{position:sticky;top:100px}
.client-ticket-aside h3{font-size:20px;margin-bottom:18px}
.client-ticket-aside dl{display:grid;gap:12px}
.client-ticket-aside dt{font-family:var(--display);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint)}
.client-ticket-aside dd{color:var(--text);overflow-wrap:anywhere}
.client-ticket-aside dd a{color:var(--blue);font-weight:700}
.client-screenshot{display:grid;gap:10px;margin-top:22px;color:var(--blue);font-family:var(--display);font-weight:800}
.client-screenshot img{border-radius:14px;border:1px solid var(--line)}
.support-entry-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px}
.support-entry-grid--single{grid-template-columns:minmax(0,720px);justify-content:center}
.support-entry-card{padding:clamp(28px,4vw,42px)}
.support-entry-card ul{display:grid;gap:10px;margin:20px 0 26px}
.support-entry-card li{color:var(--text);font-weight:700}
.support-entry-card li::before{content:"✓";color:var(--blue);margin-right:8px}

.client-project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:8px}
.client-project-grid--compact .client-project-card{padding:24px}
.client-project-card{
  padding:clamp(24px,3vw,32px);border:1px solid var(--line);border-radius:20px;background:#fff;
  box-shadow:0 18px 44px -34px rgba(18,38,86,.28);display:grid;gap:18px
}
.client-project-card--pro{gap:16px}
.client-project-card-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.client-project-card-main{min-width:0}
.client-project-card-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.client-project-card h2{font-size:clamp(22px,2.4vw,30px);margin-top:10px}
.client-project-card p{color:var(--text-dim);margin-top:8px;line-height:1.6}
.client-project-progress{text-align:right}
.client-project-progress strong{display:block;font-family:var(--display);font-size:clamp(28px,3vw,38px);line-height:1;color:var(--blue)}
.client-project-progress span{color:var(--text-faint);font-size:13px}
.client-project-progress strong{display:block;font-family:var(--display);font-size:clamp(28px,3vw,38px);line-height:1;color:var(--blue)}
.client-project-progress span{color:var(--text-faint);font-size:13px}

/* ============================================================
   CLIENT PORTAL — Projects (cp-*)
   ============================================================ */
.cp-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:28px}
.cp-stat{
  padding:22px 24px;border-radius:20px;color:#fff;
  background:linear-gradient(150deg,#14275a 0%,#0c193a 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 44px -28px rgba(12,25,58,.55)
}
.cp-stat span{display:block;color:#9fb0d6;font-size:13px;font-weight:700}
.cp-stat strong{display:block;margin-top:8px;font-family:var(--display);font-size:clamp(28px,3vw,36px);line-height:1}

.cp-section-head{margin-bottom:24px}
.cp-section-head h2{margin:6px 0 8px;font-size:clamp(26px,3vw,34px);letter-spacing:-.02em}
.cp-section-head p{margin:0;max-width:58ch;color:var(--text-dim);line-height:1.65;font-size:15px}

.cp-project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.cp-project-list{display:grid;gap:12px}
.cp-project-list-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,220px) 120px auto;gap:20px;align-items:end;
  padding:0 22px 10px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint)
}
.cp-project-list-head span:last-child{justify-self:end}

.cp-project-row{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,220px) 120px auto;
  gap:20px;align-items:center;padding:20px 22px;border:1px solid rgba(12,24,56,.08);border-radius:18px;
  background:#fff;box-shadow:0 16px 40px -32px rgba(18,38,86,.18);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)
}
.cp-project-row:hover{transform:translateY(-2px);box-shadow:0 22px 48px -28px rgba(18,38,86,.24);border-color:rgba(47,107,255,.2)}
.cp-project-row-accent{position:absolute;top:0;left:0;bottom:0;width:4px;border-radius:18px 0 0 18px;background:var(--blue)}
.cp-project-row--completed .cp-project-row-accent{background:linear-gradient(180deg,#087443,#22c55e)}
.cp-project-row--on_hold .cp-project-row-accent{background:linear-gradient(180deg,#a16207,#f59e0b)}
.cp-project-row--planning .cp-project-row-accent{background:linear-gradient(180deg,#8593b8,#c5cee0)}

.cp-project-row-col{display:grid;gap:10px;min-width:0}
.cp-project-row-col--main{align-content:center;gap:8px;padding-left:6px}
.cp-project-row-col--roadmap{align-self:stretch;display:flex;align-items:center}
.cp-project-row-col--progress{justify-items:center;gap:10px}
.cp-project-row-col--action{justify-self:end}

.cp-project-row-title{display:grid;gap:8px}
.cp-project-row-title h2{margin:0;font-size:clamp(18px,2vw,22px);line-height:1.25;letter-spacing:-.02em}
.cp-project-row-title h2 a{color:inherit;text-decoration:none;transition:color .2s}
.cp-project-row-title h2 a:hover{color:var(--blue)}
.cp-project-row-desc{margin:0;color:var(--text-dim);line-height:1.55;font-size:14px}
.cp-row-placeholder{font-size:13px;font-weight:600;color:var(--text-faint);text-align:center;width:100%}

.cp-next-box--inline{margin-top:2px}
.cp-progress--row{width:100%;max-width:88px}
.cp-mini-roadmap--list{
  width:100%;padding:12px;border-radius:14px;background:linear-gradient(180deg,#f8fbff,#fff);
  border:1px solid rgba(12,24,56,.06);grid-template-columns:repeat(auto-fit,minmax(52px,1fr))
}

.cp-project-card{
  position:relative;display:grid;gap:18px;padding:clamp(22px,3vw,30px);
  border:1px solid rgba(12,24,56,.08);border-radius:22px;background:#fff;
  box-shadow:0 22px 50px -34px rgba(18,38,86,.22);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
  overflow:hidden
}
.cp-project-card:hover{transform:translateY(-3px);box-shadow:0 28px 60px -32px rgba(18,38,86,.28);border-color:rgba(47,107,255,.22)}
.cp-project-card-accent{position:absolute;top:0;left:0;right:0;height:4px;background:var(--blue)}
.cp-project-card--completed .cp-project-card-accent{background:linear-gradient(90deg,#087443,#22c55e)}
.cp-project-card--on_hold .cp-project-card-accent{background:linear-gradient(90deg,#a16207,#f59e0b)}
.cp-project-card--planning .cp-project-card-accent{background:linear-gradient(90deg,#8593b8,#c5cee0)}

.cp-project-card-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.cp-project-card-main{min-width:0;flex:1}
.cp-project-card-main h2{margin:10px 0 0;font-size:clamp(22px,2.4vw,28px);line-height:1.2;letter-spacing:-.02em}
.cp-project-card-main h2 a{color:inherit;text-decoration:none;transition:color .2s}
.cp-project-card-main h2 a:hover{color:var(--blue)}
.cp-project-card-main p{margin:8px 0 0;color:var(--text-dim);line-height:1.6;font-size:14.5px}

.cp-ring{
  --pct:0;width:82px;height:82px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--blue) calc(var(--pct) * 1%), rgba(47,107,255,.1) 0);
  box-shadow:0 0 0 1px rgba(47,107,255,.08)
}
.cp-ring::before{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff}
.cp-ring-inner{position:relative;z-index:1;text-align:center}
.cp-ring-inner strong{display:block;font-family:var(--display);font-size:19px;line-height:1;color:var(--blue)}
.cp-ring-inner span{display:block;margin-top:2px;font-size:9px;color:var(--text-faint);font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.cp-ring--lg{width:112px;height:112px}
.cp-ring--lg::before{inset:10px}
.cp-ring--lg .cp-ring-inner strong{font-size:26px}

.cp-mini-roadmap{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:8px;
  padding:14px;border-radius:16px;background:linear-gradient(180deg,#f8fbff,#fff);border:1px solid rgba(12,24,56,.06)
}
.cp-mini-step{display:grid;gap:6px;justify-items:center;text-align:center}
.cp-mini-dot{width:100%;height:5px;border-radius:999px;background:rgba(47,107,255,.12)}
.cp-mini-step--completed .cp-mini-dot{background:var(--blue)}
.cp-mini-step--in_progress .cp-mini-dot{background:linear-gradient(90deg,var(--blue) 55%,rgba(47,107,255,.12) 55%)}
.cp-mini-step--blocked .cp-mini-dot{background:#a98bff}
.cp-mini-label{font-size:10px;font-weight:700;color:var(--text-faint);line-height:1.25}

.cp-chip-row{display:flex;flex-wrap:wrap;gap:8px}
.cp-chip{
  display:inline-flex;align-items:center;padding:6px 11px;border-radius:999px;
  font-size:12px;font-weight:700;color:var(--text-dim);background:rgba(12,24,56,.04);border:1px solid rgba(12,24,56,.06)
}
.cp-chip--active{color:var(--blue);background:rgba(47,107,255,.08);border-color:rgba(47,107,255,.18)}
.cp-chip--warn{color:#b45309;background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.22)}

.cp-next-box{padding:14px 16px;border-radius:14px;border:1px dashed rgba(47,107,255,.22);background:rgba(47,107,255,.04)}
.cp-next-label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-faint);font-weight:800;margin-bottom:6px}
.cp-next-box p{margin:0;font-size:15px;font-weight:700;color:var(--ink,#0c1838);line-height:1.4}

.cp-project-card-foot{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding-top:4px;border-top:1px solid rgba(12,24,56,.06)}
.cp-progress{height:8px;border-radius:999px;background:rgba(47,107,255,.1);overflow:hidden}
.cp-progress--hero{margin-top:4px}
.cp-progress--sm{height:6px;margin:12px 0 4px}
.cp-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--blue-bright));transition:width .4s var(--ease)}

.cp-empty{
  grid-column:1/-1;padding:56px 28px;text-align:center;border:1px dashed rgba(12,24,56,.14);
  border-radius:22px;background:linear-gradient(180deg,#fff,rgba(246,249,255,.9))
}
.cp-empty-icon{
  width:56px;height:56px;margin:0 auto 16px;border-radius:18px;display:grid;place-items:center;
  font-size:18px;color:var(--blue);background:rgba(47,107,255,.1);font-family:var(--display);font-weight:800
}
.cp-empty h3{margin:0 0 8px;font-size:22px}
.cp-empty p{margin:0 auto 20px;max-width:46ch;color:var(--text-dim);line-height:1.65}

.cp-back-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.cp-back-link{font-family:var(--display);font-weight:700;font-size:14px;color:var(--text-dim);transition:color .2s}
.cp-back-link:hover{color:var(--blue)}

.cp-hero{
  padding:clamp(24px,4vw,32px);margin-bottom:22px;border-radius:24px;border:1px solid rgba(47,107,255,.14);
  background:linear-gradient(165deg,#fff 0%,rgba(246,249,255,.95) 50%,rgba(47,107,255,.04) 100%);
  box-shadow:0 28px 64px -36px rgba(18,38,86,.28)
}
.cp-hero-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center}
.cp-hero-body{display:grid;gap:14px;min-width:0}
.cp-hero-title{margin:4px 0 0;font-family:var(--display);font-size:clamp(24px,3vw,32px);line-height:1.15;letter-spacing:-.02em;color:var(--ink,#0c1838)}

.cp-stat-pills{display:flex;flex-wrap:wrap;gap:10px}
.cp-stat-pill{
  min-width:72px;padding:12px 16px;border-radius:14px;text-align:center;
  background:#fff;border:1px solid rgba(12,24,56,.08);box-shadow:0 8px 24px -18px rgba(18,38,86,.18)
}
.cp-stat-pill strong{display:block;font-family:var(--display);font-size:22px;line-height:1;color:var(--ink,#0c1838)}
.cp-stat-pill span{display:block;margin-top:4px;font-size:11px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:.08em}
.cp-stat-pill--warn{border-color:rgba(245,158,11,.28);background:rgba(245,158,11,.06)}
.cp-stat-pill--warn strong{color:#b45309}

.cp-meta-row{display:flex;flex-wrap:wrap;gap:12px 18px;font-size:13.5px;font-weight:600;color:var(--text-faint)}
.cp-meta-warn{color:#b45309;font-weight:800}

.cp-jump-nav{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;padding:10px;border-radius:16px;
  background:rgba(12,24,56,.03);border:1px solid rgba(12,24,56,.06);position:sticky;top:88px;z-index:5;
  backdrop-filter:blur(10px)
}
.cp-jump-nav a{
  padding:8px 14px;border-radius:999px;font-family:var(--display);font-size:13px;font-weight:700;
  color:var(--text-dim);transition:background .2s,color .2s
}
.cp-jump-nav a:hover{color:#fff;background:var(--blue)}

.cp-panel{
  padding:clamp(22px,3vw,30px);margin-bottom:22px;border:1px solid rgba(12,24,56,.08);border-radius:22px;
  background:#fff;box-shadow:0 20px 50px -36px rgba(18,38,86,.2)
}
.cp-panel--tint{background:linear-gradient(165deg,#fff,rgba(47,107,255,.04));border-color:rgba(47,107,255,.12)}
.cp-panel--timeline{background:linear-gradient(180deg,#fff,rgba(246,249,255,.6))}
.cp-panel-head{margin-bottom:20px}
.cp-panel-head h2{margin:6px 0 8px;font-size:clamp(22px,2.8vw,28px);letter-spacing:-.02em}
.cp-panel-head p{margin:0;max-width:58ch;color:var(--text-dim);line-height:1.65;font-size:14.5px}

.cp-roadmap-track{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;
  position:relative
}
.cp-roadmap-step{
  display:grid;gap:8px;padding:16px;border-radius:16px;border:1px solid rgba(12,24,56,.08);
  background:rgba(246,249,255,.8);text-align:center;transition:all .25s var(--ease)
}
.cp-roadmap-step.is-current,.cp-roadmap-step--in_progress{
  border-color:rgba(47,107,255,.28);background:#fff;box-shadow:0 14px 36px -24px rgba(47,107,255,.35)
}
.cp-roadmap-step--completed{border-color:rgba(34,197,94,.24);background:rgba(34,197,94,.05)}
.cp-roadmap-step--blocked{border-color:rgba(124,77,255,.24);background:rgba(124,77,255,.05)}
.cp-roadmap-num{
  width:36px;height:36px;margin:0 auto;border-radius:999px;display:grid;place-items:center;
  font-family:var(--display);font-size:12px;font-weight:800;color:var(--blue);background:rgba(47,107,255,.1)
}
.cp-roadmap-step--completed .cp-roadmap-num,.cp-roadmap-step--in_progress .cp-roadmap-num,.cp-roadmap-step.is-current .cp-roadmap-num{
  background:var(--blue);color:#fff;box-shadow:0 0 0 5px rgba(47,107,255,.12)
}
.cp-roadmap-step--blocked .cp-roadmap-num{background:#a98bff;color:#fff}
.cp-roadmap-title{font-size:13px;font-weight:800;color:var(--ink,#0c1838);line-height:1.35}
.cp-roadmap-status{font-size:10px;color:var(--text-faint);font-weight:800;text-transform:uppercase;letter-spacing:.08em}

.cp-focus-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.cp-focus-card{
  padding:20px;border-radius:18px;border:1px solid rgba(12,24,56,.06);background:#fff;
  display:grid;gap:10px;align-content:start
}
.cp-focus-tag{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--blue);font-weight:800}
.cp-focus-card h3{margin:0;font-size:clamp(19px,2vw,22px);line-height:1.25}
.cp-focus-card p{margin:0;color:var(--text-dim);line-height:1.65;font-size:14.5px}
.cp-alert{padding:12px 14px;border-radius:12px;font-size:13.5px;font-weight:600;line-height:1.5}
.cp-alert--blocked{background:rgba(124,77,255,.08);color:#6d28d9;border:1px solid rgba(124,77,255,.18)}

.cp-report-list{display:grid;gap:12px}
.cp-report-item{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:16px 18px;border:1px solid rgba(12,24,56,.08);border-radius:16px;
  background:linear-gradient(180deg,#fff,#f8fbff)
}
.cp-report-icon{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;
  font-family:var(--display);font-size:11px;font-weight:800;color:#087443;
  background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.18)
}
.cp-report-body{flex:1;min-width:180px}
.cp-report-body strong{display:block;font-size:15px;color:var(--ink,#0c1838)}
.cp-report-body span{display:block;margin-top:4px;font-size:13px;color:var(--text-faint);font-weight:600}

.cp-timeline{display:grid;gap:12px}
.cp-timeline-phase{position:relative}

.cp-timeline-summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto auto;gap:12px 14px;
  align-items:center;padding:16px 18px;border:1px solid rgba(12,24,56,.08);
  border-radius:18px;background:#fff;transition:border-color .2s,box-shadow .2s
}
.cp-timeline-summary::-webkit-details-marker{display:none}
.cp-timeline-phase[open] .cp-timeline-summary,.cp-timeline-phase.is-current .cp-timeline-summary{
  border-color:rgba(47,107,255,.24);box-shadow:0 16px 40px -28px rgba(47,107,255,.28)
}
.cp-timeline-marker{
  width:28px;height:28px;border-radius:999px;border:2px solid rgba(47,107,255,.2);
  background:#fff;display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--text-faint);flex-shrink:0
}
.cp-timeline-phase--completed .cp-timeline-marker{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 0 5px rgba(47,107,255,.1)}
.cp-timeline-phase--in_progress .cp-timeline-marker,.cp-timeline-phase.is-current .cp-timeline-marker{background:var(--blue);border-color:var(--blue);color:#fff}
.cp-timeline-phase--blocked .cp-timeline-marker{background:#a98bff;border-color:#a98bff;color:#fff}

.cp-timeline-summary-main{display:grid;gap:4px;min-width:0}
.cp-phase-tag{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-faint);font-weight:800}
.cp-timeline-title{font-family:var(--display);font-size:17px;font-weight:700;color:var(--ink,#0c1838);line-height:1.25}
.cp-timeline-sub{font-size:12.5px;color:var(--text-faint);font-weight:600}
.cp-timeline-summary .client-badge{justify-self:end;white-space:nowrap}
.cp-timeline-chevron{
  width:10px;height:10px;border-right:2px solid var(--text-faint);border-bottom:2px solid var(--text-faint);
  transform:rotate(45deg);transition:transform .25s var(--ease);margin-right:4px
}
.cp-timeline-phase[open] .cp-timeline-chevron{transform:rotate(-135deg);margin-top:4px}

.cp-timeline-body{
  display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 14px;
  padding:4px 18px 12px 18px;align-items:start
}
.cp-timeline-body::before{content:"";grid-column:1;grid-row:1/-1;width:2px;margin:0 auto;background:rgba(47,107,255,.12);border-radius:999px}
.cp-timeline-phase--completed .cp-timeline-body::before{background:rgba(47,107,255,.28)}
.cp-timeline-body > *{grid-column:2}
.cp-phase-goal{margin:0 0 12px;color:var(--text-dim);line-height:1.65;font-size:14.5px;white-space:pre-wrap}
.cp-deliverable-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:8px}
.cp-deliverable-col h4{margin:0 0 12px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint)}
.cp-deliverable-col--done{padding:16px;border-radius:14px;background:rgba(34,197,94,.04);border:1px solid rgba(34,197,94,.12)}

.cp-deliverable-list{display:grid;gap:10px;list-style:none;margin:0;padding:0}
.cp-deliverable-list--compact{gap:12px}
.cp-deliverable-item{
  display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;
  padding:12px 14px;border-radius:14px;border:1px solid rgba(12,24,56,.06);background:#f8fbff
}
.cp-deliverable-item--compact{padding:0;border:none;background:transparent;align-items:start}
.cp-deliverable-item--done{background:rgba(34,197,94,.04);border-color:rgba(34,197,94,.12)}
.cp-deliverable-copy{min-width:0;display:grid;gap:4px;align-content:start}
.cp-deliverable-copy strong{display:block;font-size:14.5px;color:var(--ink,#0c1838);line-height:1.35}
.cp-deliverable-item p,.cp-deliverable-copy p{margin:0;color:var(--text-dim);font-size:13.5px;line-height:1.5}
.cp-deliverable-item small,.cp-deliverable-copy small{display:block;margin-top:2px;font-size:12px;color:var(--text-faint);font-weight:600}

.cp-task-list{
  display:grid;gap:6px;margin:0;padding:8px 0 0;list-style:none
}
.cp-deliverable-tasks{
  margin-top:10px;border:1px solid rgba(12,24,56,.06);border-radius:12px;background:rgba(246,249,255,.7);overflow:hidden
}
.cp-deliverable-tasks > summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 12px;font-size:12.5px;font-weight:700;color:var(--text-dim);user-select:none
}
.cp-deliverable-tasks > summary::-webkit-details-marker{display:none}
.cp-deliverable-tasks[open] > summary{border-bottom:1px dashed rgba(12,24,56,.08);background:#fff}
.cp-deliverable-tasks-meta{color:var(--blue);font-family:var(--display);font-size:12px}
.cp-deliverable-tasks .cp-task-list{padding:10px 12px 12px;border-top:none;margin:0}
.cp-task-item{
  display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start;font-size:13.5px;color:var(--text-dim)
}
.cp-task-item--done{color:var(--text-faint)}
.cp-task-check{
  width:18px;height:18px;border-radius:5px;border:2px solid rgba(47,107,255,.2);margin-top:1px;
  display:grid;place-items:center;font-size:10px;font-weight:800;color:#fff;flex-shrink:0
}
.cp-task-check.is-done{background:var(--blue);border-color:var(--blue)}
.cp-task-title{line-height:1.35;color:var(--ink,#0c1838)}
.cp-task-item--done .cp-task-title{text-decoration:line-through;text-decoration-color:rgba(133,147,184,.5)}
.cp-task-item small{grid-column:2;font-size:11px;color:var(--text-faint);margin-top:-2px}
.cp-task-meta{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:var(--blue)}

.cp-check.is-progress{
  border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.08);position:relative
}
.cp-check-spinner{
  width:11px;height:11px;border-radius:50%;border:2px solid rgba(245,158,11,.25);
  border-top-color:#f59e0b;animation:cp-check-spin .8s linear infinite
}
@keyframes cp-check-spin{to{transform:rotate(360deg)}}
/* Manual "in progress" (task-less deliverable set to processing): amber dash. */
.cp-check-dash{width:9px;height:2.5px;border-radius:2px;background:#f59e0b}

.cp-check{
  width:22px;height:22px;border-radius:7px;border:2px solid rgba(47,107,255,.22);margin-top:1px;flex-shrink:0;
  display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;align-self:start
}
.cp-check.is-done{background:var(--blue);border-color:var(--blue)}

.cp-phase-empty,.cp-phase-dates{font-size:13.5px;color:var(--text-faint);font-weight:600}
.cp-phase-dates{display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(12,24,56,.06)}

/* ============================================================
   SERVICE INNER PAGES — use-case chips, compare, process flow
   ============================================================ */
/* ── Service landing pages ────────────────────────────────────────────── */
/* "We are not done" — closes a bullet list by signalling it isn't exhaustive.
   Logical properties throughout so it mirrors correctly in RTL. */
.uc-more {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px;
  margin-top: 16px; padding: 18px 22px;
  border: 1px dashed rgba(90, 141, 255, 0.5); border-radius: 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(47, 107, 255, 0.12), transparent 60%),
    linear-gradient(135deg, rgba(47, 107, 255, 0.07), rgba(124, 77, 255, 0.05));
  transition: border-color .3s var(--ease), transform .35s var(--ease), box-shadow .4s var(--ease);
}
.uc-more:hover {
  border-color: rgba(47, 107, 255, 0.75);
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -28px rgba(47, 107, 255, 0.75);
}
.uc-more-glyph {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #2f6bff, #7c4dff);
  box-shadow: 0 10px 22px -12px rgba(47, 107, 255, 0.85);
  transition: transform .4s var(--ease);
}
.uc-more:hover .uc-more-glyph { transform: rotate(90deg); }
.uc-more-glyph svg { width: 20px; height: 20px; }
.uc-more-text {
  margin: 0; flex: 1 1 260px; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
}
.uc-more-text strong {
  font-family: var(--display); font-weight: 700; font-size: 16.5px;
  color: var(--text); letter-spacing: -0.01em;
}
.uc-more-text span { color: var(--text-dim); font-size: 15px; }
.uc-more-link {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--display); font-weight: 700; font-size: 14px;
  color: var(--blue); text-decoration: none;
}
.uc-more-link .arrow { transition: transform .25s var(--ease); }
.uc-more:hover .uc-more-link .arrow { transform: translateX(4px); }
[dir="rtl"] .uc-more:hover .uc-more-link .arrow { transform: translateX(-4px); }
@media (max-width: 560px) {
  .uc-more { padding: 16px; gap: 12px; }
  .uc-more-link { margin-inline-start: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .uc-more, .uc-more-glyph, .uc-more-link .arrow { transition: none; }
}

/* "Why JoSequal" band. The base .why gives the stats column MORE room than the
   content column (0.9fr / 1.1fr) and centre-aligns them, so the heading floats
   against a taller stat grid. Here the content leads, both columns start at the
   top, and the stat figures are scaled so long values (99.99%) don't crowd
   their box. Scoped with --svc so About / Home / Our Work keep the original. */
.why--svc .grid2 {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(28px, 4vw, 68px);
  align-items: start;
}
/* Stats sit centred against the taller content column instead of top-aligned. */
.why--svc .stats { align-self: center; }
/* Headline runs the full width of its column — the ch cap was binding first. */
.why--svc h2 { font-size: clamp(28px, 3.3vw, 42px); line-height: 1.16; max-width: none; }
.why--svc .sub { max-width: 56ch; margin-top: 18px; }

/* Feature rows: roomier, with the icon responding on hover. */
.why--svc .feat-list { margin-top: 30px; }
.why--svc .feat-item { padding: 18px 0; gap: 16px; align-items: flex-start; }
.why--svc .feat-item .fi-ico {
  width: 42px; height: 42px; border-radius: 11px;
  transition: transform .35s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.why--svc .feat-item:hover .fi-ico {
  transform: translateY(-2px);
  background: rgba(47, 107, 255, 0.16);
  border-color: rgba(47, 107, 255, 0.45);
}
.why--svc .feat-item h4 { font-size: 17px; }
.why--svc .feat-item p { font-size: 14.5px; line-height: 1.65; margin-top: 5px; }

/* Stats: the suffix was rendering at full 60px ("11yrs"); it now reads as a
   unit beside the figure, and the cards lift on hover like the other cards. */
.why--svc .stats { gap: 14px; }
.why--svc .stat {
  padding: 26px 24px; border-radius: 16px;
  transition: transform .35s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease);
}
.why--svc .stat:hover {
  transform: translateY(-3px);
  border-color: rgba(47, 107, 255, 0.35);
  box-shadow: 0 18px 38px -26px rgba(18, 38, 86, 0.45);
}
.why--svc .stat .s-num {
  font-size: clamp(30px, 3.4vw, 44px);
  display: flex; align-items: baseline; gap: 3px;
}
.why--svc .stat .s-num .suf { font-size: 0.46em; font-weight: 600; letter-spacing: 0; }
.why--svc .stat .s-lab { margin-top: 8px; font-size: 13.5px; line-height: 1.45; }

@media (max-width: 900px) {
  .why--svc .grid2 { grid-template-columns: 1fr; gap: 32px; }
}

/* Process steps start collapsed — number, rule and title only — and the step
   under the cursor expands to reveal its description. The height animates via
   the grid 0fr→1fr technique, so it eases smoothly without magic max-heights.
   Scoped to .proc-flow, which only the service pages use, so the process
   sections on /process and the home page are untouched. */
.proc-flow .proc {
  display: grid;
  grid-template-rows: auto auto auto 0fr;
  align-content: start;
  transition: grid-template-rows .5s var(--ease), background .4s var(--ease);
}
.proc-flow .proc > p {
  overflow: hidden; min-height: 0; margin-top: 0;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .28s var(--ease), transform .4s var(--ease), margin-top .5s var(--ease);
}
.proc-flow .proc:hover,
.proc-flow .proc:focus-within { grid-template-rows: auto auto auto 1fr; }
.proc-flow .proc:hover > p,
.proc-flow .proc:focus-within > p {
  opacity: 1; transform: none; margin-top: 12px; transition-delay: .08s;
}
/* Quiet emphasis on the active step (the .bar fill already animates). */
.proc-flow .proc .pn,
.proc-flow .proc h4 { transition: color .3s var(--ease), transform .4s var(--ease); }
.proc-flow .proc:hover .pn { transform: translateY(-2px); }
.proc-flow .proc:hover h4 { color: var(--blue); }

/* Touch devices have no hover — show every description. */
@media (hover: none) {
  .proc-flow .proc { grid-template-rows: auto auto auto 1fr; }
  .proc-flow .proc > p { opacity: 1; transform: none; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .proc-flow .proc,
  .proc-flow .proc > p { transition: none; }
}

/* Section head, redesigned as an editorial header band.
   The base .sec-head caps the title at 16ch while scaling it to 56px, which
   forces the headline into a narrow stacked tower; it also bottom-aligns the
   columns, leaving the supporting copy visually detached. Here the two columns
   are proportional and top-aligned, the headline gets room to breathe, and a
   hairline rule closes the band so it reads as one unit above the content. */
.sec-head--svc {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(18px, 3.2vw, 56px);
  align-items: start;
  padding-bottom: clamp(18px, 2.2vw, 28px);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(30px, 3.6vw, 48px);
}
.sec-head--svc > div { min-width: 0; }
/* Sized from the real content: the longest section title is 60 characters, so
   the measure has to clear ~30 per line to stay within two rows. 32ch at this
   size gives ~37, which keeps every title to two rows with slack to spare. */
.sec-head--svc h2 {
  max-width: 32ch;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.16;
  margin-top: 10px;
}
/* Lead sits at the top of its column, aligned with the eyebrow rather than
   pushed down beside the headline. */
.sec-head--svc p {
  max-width: 46ch;
  margin: 0;
  padding-top: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-dim);
}
@media (max-width: 900px) {
  .sec-head--svc { grid-template-columns: 1fr; gap: 12px; }
  .sec-head--svc h2 { max-width: none; }
  .sec-head--svc p { max-width: 64ch; padding-top: 0; }
}

/* Text-only sections (e.g. the challenge) have no side lead, so the heading
   spans the full width instead of leaving an empty second column. */
.sec-head--solo { grid-template-columns: 1fr; margin-bottom: clamp(28px, 3vw, 40px); }
/* Full width — the base .sec-head h2 caps at 16ch, which is far too narrow here. */
.sec-head--solo h2 { max-width: none; }

/* Prose block for those text-only sections: a lead-in line, then the body,
   spanning the full section width. Replaces the old inline styles. */
.svc-prose { max-width: none; }
.svc-prose p { margin: 0; color: var(--text-dim); font-size: 16.5px; line-height: 1.8; }
.svc-prose p + p { margin-top: 18px; }
.svc-prose .svc-prose-lead {
  color: var(--text); font-weight: 500;
  font-size: clamp(18px, 1.7vw, 21px); line-height: 1.65;
}
.svc-prose .svc-prose-lead:empty { display: none; }

.uc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 8px; }
.uc-item {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; font-size: 15px; font-weight: 500; color: var(--text);
  transition: border-color .3s, box-shadow .35s, transform .3s var(--ease);
}
.uc-item:hover { border-color: rgba(90,141,255,0.45); transform: translateY(-2px); }
.theme-light .uc-item:hover, .theme-tint .uc-item:hover { box-shadow: 0 16px 36px -24px rgba(18,38,86,0.28); }
.uc-item .uc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-bright); flex: none; margin-top: 7px; box-shadow: 0 0 0 4px rgba(47,107,255,0.14); }

.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 8px; }
.compare-col {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(26px, 4vw, 36px);
}
.compare-col.after { border-color: rgba(90,141,255,0.38); background: linear-gradient(160deg, var(--card), rgba(47,107,255,0.06)); }
.compare-col h3 { font-family: var(--display); font-size: 22px; font-weight: 600; margin-bottom: 18px; }
.compare-col.before h3 { color: var(--text-dim); }
.compare-col.after h3 { color: var(--blue-bright); }
.compare-list { display: grid; gap: 12px; }
.compare-list li {
  display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--text-dim); line-height: 1.5;
}
.compare-col.after .compare-list li { color: var(--text); }
.compare-list .ci { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; margin-top: 1px; }
.compare-col.before .compare-list .ci { background: rgba(255,255,255,0.06); color: var(--text-faint); border: 1px solid var(--line); }
.compare-col.after .compare-list .ci { background: rgba(47,107,255,0.14); color: var(--blue-bright); border: 1px solid rgba(90,141,255,0.35); }
.compare-list .ci svg { width: 12px; height: 12px; }

.proc-grid.proc-flow {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0; border-top: 1px solid var(--line);
}
.proc-grid.proc-flow .proc { border-right: none; border-bottom: 1px solid var(--line); }
@media (min-width: 901px) {
  .proc-grid.proc-flow .proc:nth-child(4n) { border-right: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .feature-row { grid-template-columns: 1fr; gap: 28px; }
  .feature-row:nth-child(even) .fr-media { order: 0; }
  .pf-grid { grid-template-columns: 1fr 1fr; }
  .ow-featured-card,
  .ow-process-card,
  .ow-answer-grid { grid-template-columns: 1fr; }
  .ow-shot { min-height: 300px; }
  .ow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ow-service-cloud,
  .ow-industries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .values-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .cform-grid { grid-template-columns: 1fr; }
  .contact-info {
    border-inline-end: 0;
    border-bottom: 1px solid rgba(18, 38, 86, 0.08);
  }
  .uc-grid { grid-template-columns: 1fr 1fr; }
  .compare-grid { grid-template-columns: 1fr; }
  .client-form-grid,
  .client-stat-grid,
  .client-ticket-layout,
  .support-entry-grid { grid-template-columns: 1fr; }
  .client-ticket-aside { position: static; }
  .client-portal-nav { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 600px) {
  .pf-grid { grid-template-columns: 1fr; }
  .ow-empty .hero-actions,
  .cta-box .hero-actions { flex-direction: column; align-items: stretch; }
  .ow-empty .btn,
  .cta-box .btn { width: 100%; }
  .ow-featured-grid,
  .ow-grid,
  .ow-service-cloud,
  .ow-industries { grid-template-columns: 1fr; }
  .ow-shot { min-height: 240px; }
  .team-grid { grid-template-columns: 1fr; }
  .uc-grid { grid-template-columns: 1fr; }
  .client-panel-head,
  .client-ticket-row,
  .client-project-card-head { flex-direction: column; align-items: flex-start; }
  .cp-project-grid { grid-template-columns: 1fr; }
  .cp-project-list-head { display: none; }
  .cp-project-row { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .cp-project-row-col--progress { grid-template-columns: auto 1fr; grid-auto-flow: column; justify-items: start; align-items: center; }
  .cp-progress--row { max-width: none; }
  .cp-project-row-col--action { justify-self: stretch; }
  .cp-project-row-col--action .btn { width: 100%; justify-content: center; }
  .cp-stat-grid { grid-template-columns: 1fr; }
  .cp-hero-grid { grid-template-columns: 1fr; }
  .cp-focus-grid { grid-template-columns: 1fr; }
  .cp-roadmap-track { grid-template-columns: 1fr 1fr; }
  .cp-deliverable-grid { grid-template-columns: 1fr; }
  .cp-project-card-foot { grid-template-columns: 1fr; }
  .cp-timeline-summary { grid-template-columns: auto 1fr auto; }
  .cp-timeline-summary .client-badge { grid-column: 2; justify-self: start; }
  .cp-timeline-chevron { display: none; }
  .client-message-meta { flex-direction: column; align-items: flex-start; }
  .client-portal-nav nav,
  .client-portal-nav form,
  .client-portal-nav form button,
  .client-panel-head .btn { width: 100%; }
  .cp-roadmap-track { grid-template-columns: 1fr; }
  .cp-jump-nav { position: static; }
  .cp-report-item { grid-template-columns: 1fr; }
  .cp-report-item .btn { width: 100%; justify-content: center; }
  .cp-mini-roadmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Collapsible card grid ("Load more") ============================
   Used where a section holds more cards than fit in two rows. The extra
   cards are hidden until the toggle is pressed. Without JS every card is
   visible and the toggle is hidden, so nothing is unreachable. */
.vg-collapse .values-grid .value.is-more { display: none; }
.vg-collapse.is-open .values-grid .value.is-more { display: block; }
.no-js .vg-collapse .values-grid .value.is-more { display: block; }
.no-js .vg-more { display: none; }

.vg-more {
  display: flex; align-items: center; gap: 8px;
  margin: 30px auto 0; padding: 10px 4px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em;
  color: var(--blue-bright);
  transition: color .25s var(--ease), gap .25s var(--ease);
}
.vg-more span[data-vg-label] {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px; background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .3s var(--ease);
  padding-bottom: 2px;
}
.vg-more:hover span[data-vg-label] { background-size: 100% 1.5px; }
.vg-more:hover { gap: 11px; }
.vg-more:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 6px; border-radius: 8px; }

.vg-more-ico {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(90,141,255,0.4); background: rgba(47,107,255,0.1);
  transition: transform .35s var(--ease), background .25s;
}
.vg-more-ico svg { width: 14px; height: 14px; }
.vg-more:hover .vg-more-ico { background: rgba(47,107,255,0.18); }
.vg-collapse.is-open .vg-more-ico { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .vg-more, .vg-more span[data-vg-label], .vg-more-ico { transition: none; }
}

/* ============================================================
   PROCESS PAGE
   ============================================================ */

/* --- "How we make it easy": 2x2 so text-heavy cards stay readable --- */
.promise-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 46px; }

/* --- Weekly agile rhythm --------------------------------------------
   Four stages on a shared track. The track is drawn behind the dots so
   it reads as one continuous loop rather than four separate cards. */
.rhythm-grid {
  list-style: none; margin: 54px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
  position: relative;
}
.rhythm-grid::before {
  content: ""; position: absolute; inset-inline: 8%; top: 11px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--line-2) 12%, var(--line-2) 88%, transparent);
}
.theme-light .rhythm-grid::before,
.theme-tint .rhythm-grid::before {
  background: linear-gradient(90deg, transparent, rgba(12,24,56,0.14) 12%, rgba(12,24,56,0.14) 88%, transparent);
}
.rhythm-step { position: relative; padding-top: 40px; }
.rhythm-step .rs-dot {
  position: absolute; top: 4px; inset-inline-start: 0;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--blue);
  box-shadow: 0 0 0 5px rgba(47,107,255,0.12);
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
.rhythm-step:hover .rs-dot { background: var(--blue); box-shadow: 0 0 0 8px rgba(47,107,255,0.16); }
.rhythm-step .rs-day {
  display: inline-block; font-family: var(--display); font-size: 12.5px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 9px;
}
.rhythm-step h3 { font-family: var(--display); font-size: 20px; font-weight: 600; text-wrap: balance; }
.rhythm-step p { color: var(--ink-dim); font-size: 15px; margin-top: 9px; line-height: 1.65; }
.theme-tint .rhythm-step p { color: var(--ink-dim); }

.rhythm-note {
  display: flex; align-items: center; gap: 16px;
  margin-top: 46px; padding: 22px 26px;
  border: 1px solid rgba(47,107,255,0.28); border-radius: 18px;
  background: linear-gradient(120deg, rgba(47,107,255,0.09), rgba(47,107,255,0.03));
}
.rhythm-note .rn-glyph {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(47,107,255,0.14); color: var(--blue);
}
.rhythm-note .rn-glyph svg { width: 21px; height: 21px; }
.rhythm-note p { font-size: 15.5px; line-height: 1.65; color: var(--ink-dim); text-wrap: pretty; }

/* --- The five phases: a vertical rail with deliverables per phase ---- */
.phase-rail { list-style: none; margin: 52px 0 0; padding: 0; position: relative; }
.phase {
  display: grid; grid-template-columns: 78px 1fr; gap: 26px;
  padding: 0 0 38px; position: relative;
}
/* Connector between the phase numbers. */
.phase::before {
  content: ""; position: absolute; top: 46px; bottom: -6px; inset-inline-start: 27px;
  width: 2px; background: rgba(12,24,56,0.12);
}
.phase:last-child::before { display: none; }
.phase:last-child { padding-bottom: 0; }
.phase .ph-num {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: .02em;
  color: var(--blue); background: rgba(47,107,255,0.1);
  border: 1px solid rgba(47,107,255,0.28);
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.phase:hover .ph-num { background: var(--blue); color: #fff; transform: translateY(-3px); }
.phase .ph-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.phase .ph-head h3 { font-family: var(--display); font-size: 27px; font-weight: 600; letter-spacing: -0.02em; }
.phase .ph-meta {
  font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--blue); background: rgba(47,107,255,0.1);
  border: 1px solid rgba(47,107,255,0.2); border-radius: 999px; padding: 5px 12px;
}
.phase .ph-text { color: var(--ink-dim); font-size: 16px; line-height: 1.7; margin-top: 12px; max-width: 62ch; text-wrap: pretty; }
.phase .ph-items {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 26px;
}
.phase .ph-items li { display: flex; gap: 11px; font-size: 15px; color: var(--ink); line-height: 1.55; }
.phase .ph-tick {
  flex: none; margin-top: 2px; display: grid; place-items: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: rgba(47,107,255,0.13); color: var(--blue);
}
.phase .ph-tick svg { width: 11px; height: 11px; }

/* --- Client account: copy beside an illustration of the real portal -- */
.portal-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 46px; align-items: start; margin-top: 48px; }

.portal-mock {
  border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(12,24,56,0.12);
  background: #fff;
  box-shadow: 0 40px 80px -46px rgba(12,32,80,0.42);
  position: sticky; top: 108px;
}
.portal-mock .pm-chrome {
  display: flex; align-items: center; gap: 7px;
  padding: 13px 16px; background: #eef3ff; border-bottom: 1px solid rgba(12,24,56,0.09);
}
.portal-mock .pm-chrome span { width: 10px; height: 10px; border-radius: 50%; background: rgba(12,24,56,0.16); }
.portal-mock .pm-chrome em {
  margin-inline-start: auto; font-style: normal; font-size: 12.5px;
  font-weight: 600; color: var(--ink-faint); letter-spacing: .02em;
}
.portal-mock .pm-screen { padding: 24px; }
.portal-mock .pm-proj { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.portal-mock .pm-proj h4 { font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--ink); }
.portal-mock .pm-badge {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--blue); background: rgba(47,107,255,0.12); border-radius: 999px; padding: 5px 11px;
}
.portal-mock .pm-prog { margin-top: 20px; }
.portal-mock .pm-prog-top { display: flex; justify-content: space-between; align-items: baseline; }
.portal-mock .pm-prog-top span { font-size: 13px; color: var(--ink-dim); }
.portal-mock .pm-prog-top strong { font-family: var(--display); font-size: 20px; color: var(--ink); }
.portal-mock .pm-track {
  height: 8px; border-radius: 999px; background: rgba(12,24,56,0.09);
  margin-top: 9px; overflow: hidden;
}
.portal-mock .pm-track i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--blue-bright));
}
.portal-mock .pm-phases { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 3px; }
.portal-mock .pm-phases li {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 10px; font-size: 14px; color: var(--ink);
}
.portal-mock .pm-phases li.is-now { background: rgba(47,107,255,0.07); }
.portal-mock .pm-phases .pm-tick {
  flex: none; display: grid; place-items: center;
  width: 19px; height: 19px; border-radius: 50%;
  border: 1.5px solid rgba(12,24,56,0.18); color: #fff;
}
.portal-mock .pm-phases .pm-tick svg { width: 11px; height: 11px; }
.portal-mock .pm-phases li.is-done .pm-tick { background: var(--blue); border-color: var(--blue); }
.portal-mock .pm-phases li.is-now .pm-tick { border-color: var(--blue); border-width: 2.5px; }
.portal-mock .pm-phases .pm-name { flex: 1; }
.portal-mock .pm-phases li.is-next { color: var(--ink-faint); }
.portal-mock .pm-phases em { font-style: normal; font-size: 12px; color: var(--ink-faint); }
.portal-mock .pm-phases li.is-now em { color: var(--blue); font-weight: 600; }
.portal-mock .pm-report {
  display: flex; align-items: center; gap: 12px; margin-top: 18px;
  padding: 14px; border-radius: 13px;
  border: 1px solid rgba(12,24,56,0.1); background: #f7faff;
}
.portal-mock .pm-doc {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 10px; background: rgba(47,107,255,0.1); color: var(--blue);
}
.portal-mock .pm-doc svg { width: 18px; height: 18px; }
.portal-mock .pm-report-txt { flex: 1; display: grid; }
.portal-mock .pm-report-txt strong { font-size: 14px; color: var(--ink); font-weight: 600; }
.portal-mock .pm-report-txt em { font-style: normal; font-size: 12.5px; color: var(--ink-faint); }
.portal-mock .pm-dl { flex: none; color: var(--blue); }
.portal-mock .pm-dl svg { width: 18px; height: 18px; }

.portal-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.portal-feats li { display: flex; gap: 14px; }
.portal-feats .pf-tick {
  flex: none; margin-top: 3px; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 8px;
  background: rgba(47,107,255,0.12); color: var(--blue);
}
.portal-feats .pf-tick svg { width: 13px; height: 13px; }
.portal-feats h3 { font-family: var(--display); font-size: 18px; font-weight: 600; }
.portal-feats p { color: var(--ink-dim); font-size: 15px; line-height: 1.62; margin-top: 5px; text-wrap: pretty; }
.portal-cta { margin-top: 34px; }
.portal-note { font-size: 14px; color: var(--ink-faint); margin-top: 14px; max-width: 46ch; }

@media (max-width: 1024px) {
  .portal-grid { grid-template-columns: 1fr; gap: 38px; }
  .portal-mock { position: static; max-width: 520px; }
}
@media (max-width: 900px) {
  .rhythm-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 26px; }
  .rhythm-grid::before { display: none; }
}
@media (max-width: 680px) {
  .promise-grid { grid-template-columns: 1fr; }
  .rhythm-grid { grid-template-columns: 1fr; }
  .phase { grid-template-columns: 1fr; gap: 16px; }
  .phase::before { display: none; }
  .phase .ph-num { width: 48px; height: 48px; }
  .phase .ph-head h3 { font-size: 23px; }
  .phase .ph-items { grid-template-columns: 1fr; }
  .rhythm-note { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ============================================================
   OUR WORK — STORY CARDS, PLATFORMS & DASHBOARD MOCKUPS
   ============================================================ */

/* --- Case-study beats inside a project card ------------------------- */
.ow-story { display: grid; gap: 14px; margin-top: 14px; }
.ow-beat { position: relative; padding-inline-start: 14px; }
.ow-beat::before {
  content: ""; position: absolute; inset-block: 3px auto; inset-inline-start: 0;
  width: 2px; height: calc(100% - 6px); border-radius: 2px;
  background: rgba(12,24,56,0.14);
}
.ow-beat--impact::before { background: var(--blue); }
.ow-beat-lab {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px;
}
.ow-beat--impact .ow-beat-lab { color: var(--blue); }
.ow-beat p { font-size: 14.5px; line-height: 1.6; color: var(--ink-dim); text-wrap: pretty; }

.ow-results { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.ow-results li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; font-weight: 600; color: var(--ink); }
.ow-res-ico {
  flex: none; margin-top: 1px; display: grid; place-items: center;
  width: 19px; height: 19px; border-radius: 6px;
  background: rgba(47,107,255,0.13); color: var(--blue);
}
.ow-res-ico svg { width: 12px; height: 12px; }

/* --- The two platform cards ------------------------------------------
   Deliberately taller and quieter than the project cards: these are
   products, not case studies, so the mock does the selling and the copy
   sits underneath it on a clean surface. */
.plat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 52px; }
.plat-card {
  --plat-accent: var(--blue);
  --plat-accent-soft: rgba(47,107,255,0.13);
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: 26px;
  background: var(--card);
  text-decoration: none; color: inherit;
  transition: transform .5s var(--ease), border-color .35s, box-shadow .5s var(--ease);
}
.plat-card--omc { --plat-accent: #0a7d6b; --plat-accent-soft: rgba(0,184,156,0.16); }
/* Accent hairline along the top edge, brightening on hover. */
.plat-card::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--plat-accent), transparent);
  opacity: .45; transition: opacity .4s var(--ease);
}
.plat-card:hover {
  transform: translateY(-8px);
  border-color: rgba(90,141,255,0.45); /* fallback where color-mix is unsupported */
  border-color: color-mix(in srgb, var(--plat-accent) 45%, transparent);
  box-shadow: 0 48px 84px -50px rgba(18,38,86,0.5);
}
.plat-card:hover::before { opacity: 1; }
.plat-card:focus-visible { outline: 2px solid var(--plat-accent); outline-offset: 4px; }

/* Fixed height so both cards' text starts on the same line: the two mocks
   have different natural heights (the admin one is the taller). Each mock is
   stretched to fill the box exactly — the taller one clips its last rows at
   the bottom edge (reads as a bleed), the shorter one's backgrounds extend. */
.plat-visual {
  padding: 34px 30px 0; display: grid; place-items: start center; overflow: hidden;
  height: 340px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 8%, var(--plat-accent-soft), transparent 70%),
    linear-gradient(168deg, rgba(12,24,56,0.045), transparent 60%);
  border-bottom: 1px solid var(--line);
}
.plat-visual .jsq-mock,
.plat-visual .omc-mock { height: 100%; }
.plat-visual > * { transition: transform .55s var(--ease); }
.plat-card:hover .plat-visual > * { transform: translateY(-6px) scale(1.02); }
/* Both mocks are now wide dashboards that sit on the bottom edge of the
   visual, so the OmniCart card no longer needs the phone's extra padding. */
.plat-card--omc .plat-visual { padding-bottom: 0; }
.plat-card--omc .omc-mock { border-bottom: 0; border-radius: 14px 14px 0 0; }

.plat-body { padding: 28px 30px 32px; display: flex; flex-direction: column; flex: 1; }
.plat-kicker {
  display: inline-flex; align-self: flex-start; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--plat-accent); background: var(--plat-accent-soft);
  border-radius: 999px; padding: 5px 12px; margin-bottom: 14px;
}
.plat-body h3 { font-family: var(--display); font-size: 29px; font-weight: 600; letter-spacing: -0.025em; }
.plat-body > p { color: var(--text-dim); font-size: 15px; line-height: 1.68; margin-top: 11px; text-wrap: pretty; }
.plat-body > p { margin-bottom: 20px; }
.plat-points {
  list-style: none; margin: auto 0 0; padding: 20px 0 0; display: grid; gap: 10px;
  border-top: 1px solid var(--line);
}
.plat-points li { display: flex; gap: 10px; font-size: 14.5px; color: var(--text); line-height: 1.5; }
.plat-tick {
  flex: none; margin-top: 2px; display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--plat-accent-soft); color: var(--plat-accent);
}
.plat-tick svg { width: 11px; height: 11px; }
.plat-cta {
  padding-top: 24px;
  font-weight: 650; font-size: 15px; color: var(--plat-accent);
  display: inline-flex; align-items: center; gap: 7px;
  transition: gap .25s var(--ease);
}
.plat-card:hover .plat-cta { gap: 12px; }

/* --- Shared hero for the two platform pages --------------------------- */
.plat-hero { text-align: start; padding-bottom: clamp(48px, 6vw, 84px); }
.plat-hero .crumb { margin-bottom: 26px; }
.plat-hero-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 52px; align-items: center; }
.plat-hero-copy .eyebrow { display: block; margin-bottom: 14px; }
.plat-hero h1 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.05; }
.plat-hero p { margin: 20px 0 0; max-width: 54ch; }
.plat-hero .hero-actions { justify-content: flex-start; margin-top: 30px; }
/* Lift the flat mock into the page with a soft glow behind it. */
.plat-hero-vis { display: grid; place-items: center; position: relative; }
.plat-hero-vis::before {
  content: ""; position: absolute; inset: -12% -6%; z-index: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(47,107,255,0.28), transparent 70%);
  filter: blur(12px);
}
.plat-hero--omc .plat-hero-vis::before { background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0,212,180,0.26), transparent 70%); }
.plat-hero-vis > * { position: relative; z-index: 1; }

/* --- JoSequal admin panel mockup ------------------------------------- */
.jsq-mock {
  display: grid; grid-template-columns: 148px 1fr;
  width: 100%; max-width: 560px; border-radius: 14px 14px 0 0; overflow: hidden;
  border: 1px solid rgba(12,24,56,0.14); border-bottom: 0;
  background: #f7f9ff; box-shadow: 0 30px 60px -40px rgba(12,32,80,0.5);
  font-size: 11px; text-align: start;
}
.jsq-side { background: #0e1533; padding: 14px 10px; display: grid; align-content: start; gap: 2px; }
.jsq-grp {
  font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,0.34); padding: 10px 8px 4px;
}
.jsq-nav {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 7px; color: rgba(255,255,255,0.66); font-size: 10.5px;
}
.jsq-nav i { width: 14px; height: 14px; flex: none; display: grid; place-items: center; color: rgba(255,255,255,0.6); }
.jsq-nav i svg { width: 14px; height: 14px; }
.jsq-nav b {
  margin-inline-start: auto; font-size: 8.5px; font-weight: 700;
  background: var(--blue); color: #fff; border-radius: 999px; padding: 1px 5px;
}
.jsq-nav.is-active { background: rgba(255,255,255,0.08); color: #fff; }
.jsq-nav.is-active i { color: rgba(255,255,255,0.92); }
.jsq-nav.is-current { background: var(--blue); color: #fff; }
.jsq-nav.is-current i { color: #fff; }
.jsq-main { padding: 14px; display: grid; align-content: start; gap: 8px; background: #f7f9ff; }
.jsq-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.jsq-head strong { display: block; font-family: var(--display); font-size: 13px; color: var(--ink); }
.jsq-head span { display: block; font-size: 9.5px; color: var(--ink-faint); margin-top: 2px; max-width: 30ch; line-height: 1.4; }
.jsq-btn {
  flex: none; font-size: 9.5px; font-weight: 600; color: var(--ink-dim);
  border: 1px solid rgba(12,24,56,0.14); border-radius: 6px; padding: 4px 9px; background: #fff;
}
.jsq-phase {
  display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: start;
  background: #fff; border: 1px solid rgba(12,24,56,0.09); border-radius: 9px;
  padding: 9px; position: relative; overflow: hidden;
}
.jsq-phase::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: #f0b429; }
.jsq-phase.is-done::before { background: #22c55e; }
.jsq-n {
  width: 21px; height: 21px; border-radius: 6px; display: grid; place-items: center;
  font-size: 9px; font-weight: 700; color: var(--blue); background: rgba(47,107,255,0.1);
}
.jsq-ph-body strong { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink); }
.jsq-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 5px; }
.jsq-tag { font-size: 8.5px; font-weight: 600; border-radius: 999px; padding: 2px 7px; }
.jsq-tag.is-done { background: rgba(34,197,94,0.14); color: #15803d; }
.jsq-tag.is-now { background: rgba(240,180,41,0.18); color: #a16207; }
.jsq-tag.is-hidden { background: rgba(12,24,56,0.07); color: var(--ink-faint); }
.jsq-count { font-size: 8.5px; color: var(--ink-faint); }
.jsq-bar { height: 4px; border-radius: 999px; background: rgba(12,24,56,0.08); margin-top: 7px; overflow: hidden; }
.jsq-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue), #7c5cff); }
.jsq-chev { color: var(--ink-faint); }
.jsq-chev svg { width: 11px; height: 11px; }

/* --- OmniCart dashboard mockup --------------------------------------
   A rendering of the real OmniCart dashboard: icon rail, KPI row, sales
   chart and the live-orders feed. Markup rather than a screenshot so it
   stays sharp, themes correctly and mirrors in RTL. */
.omc-mock {
  display: grid; grid-template-columns: 52px 1fr;
  width: 100%; max-width: 560px;
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(12,24,56,0.12);
  background: #fff; box-shadow: 0 30px 60px -40px rgba(12,32,80,0.5);
  text-align: start;
}
.omc-rail {
  background: #f4f7fc; border-inline-end: 1px solid rgba(12,24,56,0.07);
  padding: 12px 0; display: grid; align-content: start; justify-items: center; gap: 10px;
}
.omc-logo {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(150deg, #0e9c86, #00c9ab); color: #fff; margin-bottom: 4px;
}
.omc-logo svg { width: 16px; height: 16px; }
.omc-rail-i {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  color: #9aa8c2;
}
.omc-rail-i svg { width: 15px; height: 15px; }
.omc-rail-i.is-active { background: #fff; color: #00b89c; box-shadow: 0 4px 12px -6px rgba(12,32,80,0.4); }

.omc-body { padding: 15px 16px 16px; display: grid; align-content: start; gap: 11px; min-width: 0; }
.omc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.omc-head strong { display: block; font-family: var(--display); font-size: 15px; color: #0B1B3B; letter-spacing: -0.01em; }
.omc-head span { display: block; font-size: 9.5px; color: var(--ink-faint); margin-top: 2px; }
.omc-live {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: 9px; font-weight: 700; color: #0a7d6b;
  background: rgba(0,184,156,0.12); border-radius: 999px; padding: 4px 9px;
}
.omc-live i { width: 5px; height: 5px; border-radius: 50%; background: #00b89c; }

.omc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.omc-kpi {
  background: #f7f9fd; border: 1px solid rgba(12,24,56,0.06);
  border-radius: 9px; padding: 8px 9px; display: grid; gap: 2px; min-width: 0;
}
.omc-kpi-lab { font-size: 8px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.omc-kpi strong { font-family: var(--display); font-size: 15px; color: #0B1B3B; letter-spacing: -0.02em; }
.omc-kpi strong.is-mint { color: #00b89c; }
.omc-kpi strong.is-amber { color: #f0a132; }
.omc-kpi em { font-style: normal; font-size: 8px; font-weight: 700; color: #0a7d6b; }

.omc-panels { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 9px; }
.omc-panel { border: 1px solid rgba(12,24,56,0.08); border-radius: 11px; padding: 9px; min-width: 0; }
.omc-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: linear-gradient(100deg, #16244a, #0B1B3B);
  border-radius: 999px; padding: 7px 11px;
}
.omc-panel-head span { font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.omc-panel-head b {
  flex: none; font-size: 8.5px; font-weight: 700; color: #0B1B3B;
  background: #00d4b4; border-radius: 999px; padding: 3px 8px;
}
.omc-pulse { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #00d4b4; }

.omc-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; align-items: end; margin-top: 11px; height: 84px; }
.omc-bar { display: grid; align-content: end; justify-items: center; gap: 5px; height: 100%; }
.omc-bar i {
  width: 100%; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #2fd0b4, #8fe6d3);
}
.omc-bar.is-peak i { background: linear-gradient(180deg, #f7b955, #fbd9a0); }
.omc-bar span { font-size: 7.5px; color: var(--ink-faint); }

.omc-orders { display: grid; gap: 6px; margin-top: 11px; }
.omc-order { display: flex; align-items: center; gap: 8px; min-width: 0; }
.omc-av {
  width: 24px; height: 24px; border-radius: 8px; flex: none; display: grid; place-items: center;
  font-size: 8px; font-weight: 700; color: #fff; background: #0B1B3B;
}
.omc-order-name { flex: 1; font-size: 10px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.omc-state { flex: none; font-size: 7.5px; font-weight: 700; border-radius: 999px; padding: 3px 7px; }
.omc-state.is-new { background: rgba(0,184,156,0.14); color: #0a7d6b; }
.omc-state.is-prep { background: rgba(240,161,50,0.16); color: #b06f10; }
.omc-state.is-ready { background: rgba(0,184,156,0.14); color: #0a7d6b; }

/* --- "Same board" diagram on the admin page -------------------------- */
.conn-lead { max-width: 74ch; font-size: 17px; line-height: 1.7; color: var(--ink-dim); margin-top: 6px; text-wrap: pretty; }
.conn-bridge {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: center;
  margin-top: 40px;
}
.conn-side { background: #fff; border: 1px solid rgba(12,24,56,0.11); border-radius: 18px; padding: 18px; }
.conn-side--client { border-color: rgba(47,107,255,0.32); box-shadow: 0 24px 48px -34px rgba(18,38,86,0.36); }
.conn-lab {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px;
}
.conn-side--client .conn-lab { color: var(--blue); }
.conn-rows { display: grid; gap: 7px; }
.conn-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--ink);
  background: #f7faff; border-radius: 9px; padding: 9px 11px;
}
.conn-row em { margin-inline-start: auto; font-style: normal; font-size: 12px; color: var(--ink-faint); font-weight: 600; }
.conn-row.is-muted { opacity: .55; border: 1px dashed rgba(12,24,56,0.2); background: transparent; }
.conn-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--blue); }
.conn-dot.is-done { background: #22c55e; }
.conn-dot.is-hid { background: var(--ink-faint); }
.conn-link { display: grid; justify-items: center; gap: 7px; }
.conn-arrow {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(47,107,255,0.12); color: var(--blue); border: 1px solid rgba(47,107,255,0.28);
}
.conn-arrow svg { width: 20px; height: 20px; }
.conn-link-lab { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.conn-points { margin-top: 44px; }

/* --- OmniCart page bits ---------------------------------------------- */
.chan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 42px; }
.chan {
  display: flex; align-items: center; gap: 11px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; font-size: 15.5px; font-weight: 600; color: var(--text);
  transition: border-color .3s, transform .35s var(--ease);
}
.chan:hover { border-color: rgba(0,212,180,0.5); transform: translateY(-3px); }
.chan-dot { width: 9px; height: 9px; border-radius: 50%; background: #00b89c; flex: none; }
.chan-partners { margin-top: 34px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.chan-partners-lab { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.chan-partner-row { display: flex; flex-wrap: wrap; gap: 9px; }
.chan-partner-row span {
  font-size: 13.5px; font-weight: 600; color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
}
.omni-more { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.omni-more p { font-size: 15px; color: var(--text-dim); }
.omni-more-link { font-weight: 650; color: var(--blue); text-decoration: none; display: inline-flex; gap: 7px; transition: gap .25s var(--ease); }
.omni-more-link:hover { gap: 11px; }

@media (max-width: 1024px) {
  .plat-grid { grid-template-columns: 1fr; }
  .plat-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .plat-hero { text-align: center; }
  .plat-hero p { margin-inline: auto; }
  .plat-hero .hero-actions { justify-content: center; }
  .conn-bridge { grid-template-columns: 1fr; }
  .conn-link { transform: rotate(90deg); justify-self: center; }
}
@media (max-width: 780px) {
  .chan-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .jsq-mock { grid-template-columns: 108px 1fr; font-size: 10px; }
  .jsq-head span { display: none; }
  .chan-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   OUR WORK — CLICKABLE PROJECT CARDS + CASE STUDY PAGE
   ============================================================ */

/* --- Card is now a link: kill the inherited anchor styling ------------ */
a.ow-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
a.ow-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.ow-card .ow-card-img img { transition: transform .6s var(--ease); }
a.ow-card:hover .ow-card-img img { transform: scale(1.05); }
/* Category badge top-start, headline metric bottom-start. */
.ow-card-badge {
  position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: rgba(8,16,39,0.62); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 5px 11px;
}
.ow-card-metric {
  position: absolute; bottom: 14px; inset-inline-start: 14px; z-index: 2; max-width: calc(100% - 28px);
  font-family: var(--display); font-size: 13px; font-weight: 700; line-height: 1.25;
  color: #08122c; background: #fff; border-radius: 9px; padding: 7px 11px;
  box-shadow: 0 12px 28px -14px rgba(4,12,32,0.6);
}
.ow-card-content { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 22px; }
.ow-card-content .ow-card-industry {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 9px;
}
.ow-card-content h3 {
  font-family: var(--display); font-size: 21px; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.22; text-wrap: balance;
}
.ow-card-teaser {
  color: var(--ink-dim); font-size: 14.5px; line-height: 1.62; margin-top: 9px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ow-card .ow-results { margin-top: 14px; }
.ow-card .ow-results li { font-size: 13.5px; }
.ow-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: auto; padding-top: 18px;
  border-top: 1px solid rgba(12,24,56,0.08);
}
.ow-card .ow-mini-tags { margin: 0; }
.ow-card .ow-read {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 13.5px; font-weight: 700; color: var(--blue);
  transition: gap .25s var(--ease);
}
a.ow-card:hover .ow-read { gap: 10px; }

/* --- Case study page -------------------------------------------------- */
.cs-hero-tags { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; margin-bottom: 20px; }
.cs-chip {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #cfe0ff; background: rgba(47,107,255,0.2);
  border: 1px solid rgba(90,141,255,0.34); border-radius: 999px; padding: 6px 13px;
}
.cs-chip--ghost { color: rgba(234,240,255,.72); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.13); }
.cs-metrics { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cs-metric {
  font-family: var(--display); font-size: 14.5px; font-weight: 700; color: #eaf0ff;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.13);
  border-radius: 12px; padding: 12px 18px;
}

.cs-story { display: grid; gap: 26px; max-width: 940px; margin-inline: auto; }
.cs-beat {
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start;
  background: #fff; border: 1px solid rgba(12,24,56,0.1); border-radius: 20px;
  padding: 30px 32px;
  transition: border-color .3s, box-shadow .4s var(--ease), transform .4s var(--ease);
}
.cs-beat:hover { transform: translateY(-3px); box-shadow: 0 30px 56px -38px rgba(18,38,86,0.34); }
.cs-beat--accent { border-color: rgba(47,107,255,0.3); background: linear-gradient(140deg, rgba(47,107,255,0.05), #fff 55%); }
.cs-beat-n {
  font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: var(--blue); background: rgba(47,107,255,0.1);
  border: 1px solid rgba(47,107,255,0.24); border-radius: 10px;
  width: 44px; height: 44px; display: grid; place-items: center;
}
.cs-beat h2 { font-family: var(--display); font-size: clamp(21px, 2.4vw, 27px); font-weight: 600; letter-spacing: -0.02em; }
.cs-beat p { color: var(--ink-dim); font-size: 16px; line-height: 1.72; margin-top: 10px; text-wrap: pretty; }

.cs-shift { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: stretch; margin-top: 42px; }
.cs-shift-col { border-radius: 20px; padding: 28px 30px; border: 1px solid rgba(12,24,56,0.1); background: #fff; }
.cs-shift--before { opacity: .82; }
.cs-shift--after { border-color: rgba(47,107,255,0.34); box-shadow: 0 30px 60px -40px rgba(18,38,86,0.4); }
.cs-shift-lab {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px;
}
.cs-shift--after .cs-shift-lab { color: var(--blue); }
.cs-shift-col p { color: var(--ink-dim); font-size: 15.5px; line-height: 1.7; text-wrap: pretty; }
.cs-shift--after p { color: var(--ink); }
.cs-shift-arrow {
  align-self: center; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(47,107,255,0.12); color: var(--blue); border: 1px solid rgba(47,107,255,0.28);
}
.cs-shift-arrow svg { width: 22px; height: 22px; }

.cs-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 42px; }
.cs-result {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff; border: 1px solid rgba(12,24,56,0.1); border-radius: 16px; padding: 22px 24px;
  transition: transform .4s var(--ease), border-color .3s;
}
.cs-result:hover { transform: translateY(-4px); border-color: rgba(47,107,255,0.36); }
.cs-result-ico {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; background: rgba(47,107,255,0.12); color: var(--blue);
}
.cs-result-ico svg { width: 18px; height: 18px; }
.cs-result p { font-family: var(--display); font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.4; }

.cs-services { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 34px; }
.cs-service {
  font-size: 14px; font-weight: 600; color: var(--text-dim);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px;
}
.cs-back { display: flex; justify-content: center; margin-top: 40px; }
.cs-back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 650; color: var(--blue); text-decoration: none;
  transition: gap .25s var(--ease);
}
.cs-back-link:hover { gap: 12px; }

@media (max-width: 860px) {
  .cs-shift { grid-template-columns: 1fr; }
  .cs-shift-arrow { transform: rotate(90deg); justify-self: center; }
  .cs-beat { grid-template-columns: 1fr; gap: 16px; padding: 26px 24px; }
}

/* --- Homepage "Selected work": three shared project cards ------------- */
.home-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 980px) { .home-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .home-work-grid { grid-template-columns: 1fr; } }

/* --- Blog & News ------------------------------------------------------ */
.blog-grid--page { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.post-title-link { color: inherit; text-decoration: none; }
.post-title-link:hover { color: var(--blue); }

/* Article page — news layout: the headline is the page, no hero banner. */
.art-page { padding-top: clamp(120px, 15vh, 160px); }
.art { max-width: 740px; margin-inline: auto; }
.art-crumb { display: flex; gap: 8px; font-size: 13px; color: var(--ink-faint); margin-bottom: 22px; }
.art-crumb a { color: var(--blue); text-decoration: none; }
.art-title {
  font-family: var(--display); font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.12; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance;
}
.art-byline-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 22px; padding-block: 14px;
  border-block: 1px solid rgba(12,24,56,0.12);
}
.art-byline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.art-date { font-size: 13.5px; color: var(--ink-faint); }
.art-author { font-size: 13.5px; color: var(--ink-dim); }
.art-author strong { color: var(--ink); font-weight: 700; }
.art-share { display: flex; align-items: center; gap: 8px; }
.art-share-lab {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); margin-inline-end: 2px;
}
.art-share-btn {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(12,24,56,0.14); background: #fff; color: var(--ink-dim);
  cursor: pointer; padding: 0; text-decoration: none;
  transition: color .25s, border-color .25s, background .25s, transform .3s var(--ease);
}
.art-share-btn:hover { color: #fff; background: var(--blue); border-color: var(--blue); transform: translateY(-2px); }
.art-share-btn svg { width: 16px; height: 16px; }
.art-share-btn.is-copied { color: #fff; background: #15803d; border-color: #15803d; }

.art-body { margin-top: 28px; font-size: 17.5px; line-height: 1.85; color: var(--ink-dim); }
.art-lead { font-weight: 700; color: var(--ink); font-size: 18.5px; }
.art-body h2, .art-body h3 { font-family: var(--display); color: var(--ink); margin: 1.5em 0 .5em; letter-spacing: -0.02em; }
.art-body h2 { font-size: 26px; }
.art-body h3 { font-size: 21px; }
.art-body p { margin: 0 0 1.15em; }
.art-body a { color: var(--blue); }
.art-body ul, .art-body ol { padding-inline-start: 1.3em; margin: 0 0 1.15em; }
.art-body li { margin-bottom: .45em; }
/* Images sized in the editor carry width/height attributes. A blanket
   height:auto would silently discard a deliberately stretched height, so
   auto only applies when the author has not set one.
   display:inline-block undoes the site-wide `img { display:block }` reset:
   the editor lays images inline, so two images in one paragraph sit side
   by side — the article must match. They wrap naturally when they don't fit. */
.art-body img {
  max-width: 100%; border-radius: 14px; margin: .5em 0;
  display: inline-block; vertical-align: middle;
}
.art-body img:not([height]) { height: auto; }
/* Breathing room between images sharing a line, without nudging singles. */
.art-body img + img { margin-inline-start: 10px; }
.art-body iframe, .art-body video {
  width: 100%; aspect-ratio: 16/9; height: auto; border: 0;
  border-radius: 14px; margin: .5em 0; display: block;
}
.art-body blockquote {
  margin: 1.4em 0; padding: 4px 0 4px 20px;
  border-inline-start: 3px solid var(--blue); color: var(--ink); font-weight: 500;
}
.art-foot { margin-top: 44px; padding-top: 26px; border-top: 1px solid rgba(12,24,56,0.1); }

@media (max-width: 900px) { .blog-grid--page { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .blog-grid--page { grid-template-columns: 1fr; } }

/* --- Opaque nav for pages that start on a light background ------------
   The default bar is translucent navy and relies on a dark hero behind
   it; over white it washes out. Solid navy keeps every nav colour and
   the logo exactly as designed. */
.nav.nav--solid,
.nav.nav--solid.scrolled {
  background: #0a1430;
  backdrop-filter: none;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* --- Client dashboard: space out and slightly shrink the two panels ----
   Scoped to .client-dash so the ticket pages (which share .client-panel)
   are untouched. The `+` selector adds the gap only between stacked panels. */
.client-dash .client-panel { padding: clamp(20px, 3.2vw, 28px); }
.client-dash .client-panel + .client-panel { margin-top: clamp(18px, 2.6vw, 26px); }
.client-dash .client-panel h2 { font-size: clamp(20px, 2.2vw, 26px); }
.client-dash .client-panel-head { padding-bottom: 16px; margin-bottom: 16px; }

/* --- Client single-project hero: wider intro line ---------------------
   Overrides the global .page-hero p (56ch) for this page only, so the
   project description matches the headline's measure instead of wrapping
   narrow. Scoped to .cp-project-hero — other portal heroes are unchanged. */
.cp-project-hero p { max-width: 860px; }

/* --- Client projects page: compact "Questions from JoSequal" under a row --
   Spans the full width of the row grid, sits below the columns as a tinted
   strip. Deliberately small — it should read as a gentle prompt, not a form. */
.cp-row-questions {
  grid-column: 1 / -1;
  margin-top: 4px; padding-top: 15px;
  border-top: 1px dashed rgba(12,24,56,0.14);
  display: grid; gap: 10px;
}
.cp-rq-head { display: flex; align-items: center; gap: 8px; }
.cp-rq-ico { display: grid; place-items: center; width: 20px; height: 20px; color: var(--blue); flex: none; }
.cp-rq-ico svg { width: 16px; height: 16px; }
.cp-rq-head strong { font-size: 12.5px; font-weight: 700; letter-spacing: .03em; color: var(--ink); text-transform: uppercase; }
.cp-rq-count {
  font-size: 11px; font-weight: 700; line-height: 1;
  color: #b06f10; background: rgba(245,158,11,.15);
  border-radius: 999px; padding: 3px 8px;
}
.cp-rq-list { display: grid; gap: 8px; }
.cp-rq-item {
  background: #f6f9ff; border: 1px solid rgba(12,24,56,0.08);
  border-radius: 12px; padding: 11px 13px; display: grid; gap: 8px;
}
.cp-rq-q { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.45; margin: 0; }
.cp-rq-answer { display: flex; gap: 8px; align-items: flex-start; }
.cp-rq-answer textarea {
  flex: 1; min-width: 0; font: inherit; font-size: 13.5px; color: var(--ink);
  border: 1px solid rgba(12,24,56,0.14); border-radius: 9px; padding: 8px 11px;
  background: #fff; resize: vertical; min-height: 38px; line-height: 1.5;
}
.cp-rq-answer textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,107,255,.12); }
.cp-rq-send { flex: none; white-space: nowrap; align-self: stretch; }
.cp-rq-err { color: #c0362c; font-size: 12px; font-weight: 600; }
@media (max-width: 600px) {
  .cp-rq-answer { flex-direction: column; }
  .cp-rq-send { width: 100%; justify-content: center; }
}