/* ==========================================================================
   WeDevelop — homepage styles
   Built on the locked B1 identity. Brand values come from tokens.css;
   this file only adds layout, components, and responsive behaviour.
   ========================================================================== */

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

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; } /* sticky header (72px) + breathing room */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-slate);
  background: var(--color-cloud);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-midnight);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.015em;
}

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--color-midnight); text-decoration-color: var(--color-digital-teal); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--color-deep-slate); }

:focus-visible { outline: 2px solid var(--color-digital-teal); outline-offset: 2px; border-radius: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-midnight); color: var(--color-white);
  padding: var(--space-3) var(--space-4); z-index: 100; border-radius: 0 0 var(--radius-small) 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- Fluid type (mobile-first; token sizes are the desktop ceiling) ---- */

.display    { font-size: clamp(40px, 4.5vw + 24px, var(--fs-display)); line-height: var(--lh-display); font-weight: var(--weight-hero); }
.h1         { font-size: clamp(34px, 3vw + 20px, var(--fs-h1)); line-height: var(--lh-h1); font-weight: var(--weight-hero); }
h2, .h2     { font-size: clamp(28px, 2vw + 18px, var(--fs-h2)); line-height: var(--lh-h2); font-weight: var(--weight-heading); }
h3, .h3     { font-size: clamp(19px, 1vw + 15px, var(--fs-h3)); line-height: var(--lh-h3); font-weight: var(--weight-card); }
.lead       { font-size: clamp(17px, 0.4vw + 15px, var(--fs-body-lg)); }
.small      { font-size: var(--fs-small); }

/* ---- Layout ---- */

.container { max-width: 1216px; margin-inline: auto; padding-inline: var(--space-6); }
@media (max-width: 640px) { .container { padding-inline: 20px; } }

.section { padding-block: clamp(64px, 9vw, 112px); }
.section--tight { padding-block: clamp(40px, 6vw, 64px); }
.section--dark { background: var(--color-midnight); }
.section--dark h2, .section--dark h3 { color: var(--color-text-on-dark); }
.section--dark p { color: var(--color-text-on-dark-secondary); }
.section--white { background: var(--color-white); }

.section-head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }

/* ---- Eyebrow labels ---- */

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: 13px; font-weight: var(--weight-card);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-deep-slate); margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-digital-teal); flex: none;
}
.section--dark .eyebrow, .hero .eyebrow { color: var(--color-digital-teal); }
.section--dark .eyebrow::before, .hero .eyebrow::before { background: var(--color-signal-lime); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--weight-card);
  padding: 14px 24px; min-height: 48px; border-radius: var(--radius-medium);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-action { background: var(--color-signal-lime); color: var(--color-midnight); }
.btn-action:hover { background: #c4f95f; color: var(--color-midnight); }
.btn-primary { background: var(--color-midnight); color: var(--color-white); }
.btn-primary:hover { background: var(--color-deep-slate); color: var(--color-white); }
.btn-secondary { background: transparent; color: var(--color-midnight); border-color: var(--color-mist); }
.btn-secondary:hover { border-color: var(--color-deep-slate); color: var(--color-midnight); }
.btn-ghost-dark { background: transparent; color: var(--color-white); border-color: rgba(255,255,255,0.28); }
.btn-ghost-dark:hover { border-color: rgba(255,255,255,0.6); color: var(--color-white); }

.btn .wa-icon { width: 18px; height: 18px; flex: none; }
.btn .arrow { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

.text-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: var(--weight-card); color: var(--color-midnight);
  text-decoration: none; border-bottom: 2px solid var(--color-digital-teal);
  padding-bottom: 2px;
}
.text-link:hover { color: var(--color-deep-slate); }
.text-link .arrow { transition: transform var(--dur-base) var(--ease-out); }
.text-link:hover .arrow { transform: translateX(3px); }

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

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-midnight);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); min-height: 72px;
}
.site-header__logo { display: inline-flex; align-items: center; flex: none; }
.site-header__logo img { height: 34px; width: auto; }

.site-nav { display: flex; align-items: center; gap: var(--space-8); }
.site-nav__list { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.site-nav__list a {
  color: rgba(255,255,255,0.85); text-decoration: none;
  font-size: 15px; font-weight: var(--weight-label); padding: var(--space-2) 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.site-nav__list a:hover,
.site-nav__list a:focus-visible { color: var(--color-white); border-bottom-color: var(--color-digital-teal); }
.site-nav .btn { padding: 10px 18px; min-height: 44px; font-size: 15px; }

.nav-toggle {
  display: none; background: transparent; border: 1.5px solid rgba(255,255,255,0.28);
  border-radius: var(--radius-small); color: var(--color-white);
  width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: var(--space-4);
    background: var(--color-midnight); border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: var(--space-4) var(--space-6) var(--space-6);
  }
  .site-nav.is-open { display: flex; }
  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav__list a { display: block; padding: 14px 2px; font-size: 17px; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .site-nav .btn { width: 100%; }
}

/* ---- Hero ---- */

.hero { background: var(--color-midnight); overflow: hidden; position: relative; }
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 5vw, 80px); align-items: center;
  padding-block: clamp(56px, 8vw, 104px);
}
.hero h1 { color: var(--color-white); margin-bottom: var(--space-6); }
.hero__copy { color: var(--color-text-on-dark-secondary); font-size: var(--fs-body-lg); max-width: 46ch; margin-bottom: var(--space-8); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-6); }
.hero__trustline { color: var(--color-text-on-dark-secondary); font-size: var(--fs-small); margin: 0; }

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; padding-block: clamp(48px, 7vw, 72px); }
  .hero__ctas .btn { flex: 1 1 auto; }
}

/* ---- Hero journey board (the B1 path, rotated into a working system) ---- */

.journey {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-panel);
  padding: clamp(20px, 2.5vw, 32px);
}
.journey__title {
  font-family: var(--font-body); font-size: 13px; font-weight: var(--weight-card);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-on-dark-secondary); margin: 0 0 var(--space-4);
}
.journey__list { list-style: none; margin: 0; padding: 0; position: relative; }

/* The stepped rail: baseline → indented handled stage → back to baseline */
.journey__step { position: relative; padding: 0 0 var(--space-3) 36px; }
.journey__step:last-child { padding-bottom: 0; }
.journey__step::before {  /* vertical rail segment */
  content: ""; position: absolute; left: 11px; top: 0; bottom: 0;
  width: 2px; background: var(--color-digital-teal); opacity: 0.9;
}
.journey__step:first-child::before { top: 14px; }
.journey__step:last-child::before { bottom: auto; height: 14px; }
.journey__step::after {   /* node */
  content: ""; position: absolute; left: 6px; top: 9px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-digital-teal);
  border: 2px solid var(--color-midnight);
}
.journey__step--origin::after { background: var(--color-white); width: 13px; height: 13px; left: 5.5px; }
.journey__step--action::after {
  background: var(--color-signal-lime); width: 15px; height: 15px; left: 4.5px; top: 8px;
  box-shadow: 0 0 0 4px rgba(183,243,74,0.18);
}

/* Handled stage: cards step inward, echoing the raised middle of the B1 symbol */
.journey__step--stage { padding-left: 60px; }
.journey__step--stage::before { left: 35px; }
.journey__step--stage::after { left: 30px; }
.journey__step--stage-first::before { top: 2px; }

/* Elbow into the stage: previous rail turns right, up a level */
.journey__elbow {
  position: absolute; left: 11px; top: -12px; width: 26px; height: 16px;
  border-left: 2px solid var(--color-digital-teal);
  border-bottom: 2px solid var(--color-digital-teal);
  border-bottom-left-radius: 10px;
  opacity: 0.9;
}

/* Elbow back to the baseline after the stage */
.journey__elbow--back {
  position: absolute; left: 11px; top: -12px; width: 26px; height: 16px;
  border-right: 2px solid var(--color-digital-teal);
  border-bottom: 2px solid var(--color-digital-teal);
  border-bottom-right-radius: 10px;
  opacity: 0.9;
}
.journey__step--return::before { top: 4px; }

.journey__card {
  display: flex; align-items: center; gap: var(--space-3);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-medium);
  padding: 10px 14px;
}
.journey__card svg { flex: none; width: 20px; height: 20px; stroke: var(--color-digital-teal); }
.journey__card-label { font-size: 14px; font-weight: var(--weight-label); color: var(--color-white); line-height: 1.35; }
.journey__card-meta { display: block; font-size: 13px; font-weight: var(--weight-body); color: var(--color-text-on-dark-secondary); }
.journey__step--action .journey__card { border-color: rgba(183,243,74,0.45); }
.journey__step--action .journey__card svg { stroke: var(--color-signal-lime); }

.journey__caption { color: var(--color-text-on-dark-secondary); font-size: 13px; margin: var(--space-4) 0 0; }

/* One-shot entrance: steps settle into place in sequence, then stay still */
@media (prefers-reduced-motion: no-preference) {
  .journey__step { opacity: 0; transform: translateY(8px); animation: journey-in 480ms var(--ease-out) forwards; }
  .journey__step:nth-child(1) { animation-delay: 150ms; }
  .journey__step:nth-child(2) { animation-delay: 330ms; }
  .journey__step:nth-child(3) { animation-delay: 510ms; }
  .journey__step:nth-child(4) { animation-delay: 690ms; }
  .journey__step:nth-child(5) { animation-delay: 870ms; }
  .journey__step:nth-child(6) { animation-delay: 1050ms; }
  .journey__step:nth-child(7) { animation-delay: 1230ms; }
  @keyframes journey-in { to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .journey__step { opacity: 1; transform: none; }
}

@media (max-width: 960px) {
  .journey { max-width: 480px; }
  .journey__card-meta { display: none; }
  .journey__card { padding: 8px 12px; }
}

/* ---- Trust strip ---- */

.trust-strip { background: var(--color-white); border-bottom: 1px solid var(--color-mist); }
.trust-strip__list {
  list-style: none; margin: 0; padding: var(--space-6) 0;
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8);
  justify-content: space-between;
}
.trust-strip__list li {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-small); font-weight: var(--weight-label); color: var(--color-deep-slate);
}
.trust-strip__list svg { flex: none; width: 18px; height: 18px; stroke: var(--color-digital-teal); }
@media (max-width: 720px) {
  .trust-strip__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); }
}

/* ---- Card grids ---- */

.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--color-white); border: 1px solid var(--color-mist);
  border-radius: var(--radius-card); padding: var(--space-6);
}
.card h3 { margin-bottom: var(--space-2); }
.card > p { color: var(--color-slate); }

.card--icon svg { width: 26px; height: 26px; stroke: var(--color-digital-teal); margin-bottom: var(--space-4); }

/* ---- Transformation columns ---- */

.transform-panel {
  background: var(--color-white); border: 1px solid var(--color-mist);
  border-radius: var(--radius-panel); padding: clamp(24px, 3vw, 40px);
}
.transform-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.transform-list li {
  position: relative; padding: 5px 0 5px 26px; font-size: 15px; color: var(--color-slate);
}
.transform-list li::before {  /* B1 list marker: step + node */
  content: ""; position: absolute; left: 0; top: 13px; width: 12px; height: 2px;
  background: var(--color-digital-teal); border-radius: 1px;
}
.transform-list li::after {
  content: ""; position: absolute; left: 12px; top: 10px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--color-signal-lime);
  border: 1px solid rgba(16,24,40,0.12);
}

/* ---- Service cards ---- */

.service-card { display: flex; flex-direction: column; }
.service-card__price {
  font-family: var(--font-heading); font-weight: var(--weight-heading);
  font-size: var(--fs-h3); color: var(--color-midnight); margin-bottom: var(--space-4);
}
.service-card__price .from { display: block; font-family: var(--font-body); font-size: 13px; font-weight: var(--weight-label); color: var(--color-slate); letter-spacing: 0.04em; text-transform: uppercase; }
.service-card ul { list-style: none; margin: var(--space-4) 0; padding: 0; }
.service-card li { position: relative; padding: 4px 0 4px 24px; font-size: 15px; }
.service-card li::before {
  content: ""; position: absolute; left: 2px; top: 12px; width: 10px; height: 6px;
  border-left: 2px solid var(--color-digital-teal); border-bottom: 2px solid var(--color-digital-teal);
  transform: rotate(-45deg); border-radius: 1px;
}
.service-card__outcome {
  border-top: 1px solid var(--color-mist); padding-top: var(--space-4);
  margin-top: auto; font-size: 15px; color: var(--color-deep-slate);
}
.service-card .text-link { margin-top: var(--space-4); align-self: flex-start; }
.services-note { margin-top: var(--space-8); font-size: var(--fs-small); color: var(--color-slate); max-width: 760px; }

/* ---- Process (How WeDevelop works) ---- */

.process { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 960px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .process { grid-template-columns: 1fr; } }
.process li { counter-increment: step; position: relative; background: var(--color-white); border: 1px solid var(--color-mist); border-radius: var(--radius-card); padding: var(--space-6); }
.process li::before {
  content: counter(step, decimal-leading-zero);
  display: inline-block; font-family: var(--font-heading); font-weight: var(--weight-heading);
  font-size: var(--fs-small); color: var(--color-midnight);
  background: var(--color-cloud); border: 1px solid var(--color-mist);
  border-radius: var(--radius-round); padding: 4px 12px; margin-bottom: var(--space-4);
}
.process li:last-child::before { background: var(--color-signal-lime); border-color: var(--color-signal-lime); }
.process h3 { font-size: 19px; margin-bottom: var(--space-2); }
.process p { font-size: 15px; }

/* ---- Why / reasons ---- */

.reason h3 { display: flex; align-items: baseline; gap: var(--space-3); font-size: 19px; margin-bottom: var(--space-2); }
.reason h3::before { content: ""; flex: none; width: 14px; height: 2px; background: var(--color-digital-teal); border-radius: 1px; transform: translateY(-4px); }
.reason p { font-size: 15px; }

/* ---- Example improvements ---- */

.example { border-top: 2px solid var(--color-mist); padding-top: var(--space-4); position: relative; }
.example::before { content: ""; position: absolute; top: -2px; left: 0; width: 40px; height: 2px; background: var(--color-digital-teal); }
.example h3 { font-size: 18px; margin-bottom: var(--space-2); }
.example p { font-size: 15px; }

/* ---- Work cards ---- */

.work-card { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.work-card__visual {
  background: var(--color-midnight); padding: var(--space-8) var(--space-6);
  display: flex; align-items: center; justify-content: center; min-height: 180px;
}
.work-card__visual svg { width: 100%; max-width: 260px; height: auto; }
.work-card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.badge {
  display: inline-flex; align-self: flex-start; align-items: center;
  font-size: 13px; font-weight: var(--weight-card); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-deep-slate); background: var(--color-cloud);
  border: 1px solid var(--color-mist); border-radius: var(--radius-round); padding: 4px 12px;
}
.work-card h3 { margin: 0; }
.work-card dl { margin: 0; font-size: 15px; }
.work-card dt { font-weight: var(--weight-card); color: var(--color-deep-slate); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; margin-top: var(--space-3); }
.work-card dd { margin: 2px 0 0; color: var(--color-slate); }
.work-note { margin-top: var(--space-8); font-size: var(--fs-small); color: var(--color-slate); }

/* ---- Pricing ---- */

.pricing { border-top: 1px solid var(--color-mist); }
.pricing__row {
  display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,0.6fr) minmax(0,2fr);
  gap: var(--space-6); align-items: center;
  padding: var(--space-6) 0; border-bottom: 1px solid var(--color-mist);
}
.pricing__row h3 { margin: 0; font-size: 20px; }
.pricing__price { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: 22px; color: var(--color-midnight); white-space: nowrap; }
.pricing__price .from { display: block; font-family: var(--font-body); font-size: 13px; font-weight: var(--weight-label); color: var(--color-slate); text-transform: uppercase; letter-spacing: 0.05em; }
.pricing__row p { margin: 0; font-size: 15px; }
@media (max-width: 720px) {
  .pricing__row { grid-template-columns: 1fr; gap: var(--space-2); }
}
.pricing-note { margin-top: var(--space-6); font-size: var(--fs-small); color: var(--color-slate); max-width: 680px; }

/* ---- Founder ---- */

.founder { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .founder { grid-template-columns: 1fr; } }
.founder__portrait {
  background: var(--color-midnight); border-radius: var(--radius-panel);
  aspect-ratio: 4 / 4.6; overflow: hidden;
}
.founder__portrait picture { display: block; width: 100%; height: 100%; }
.founder__portrait img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 55% 25%; /* keeps the face framed as the panel crops */
}

/* ---- FAQ ---- */

.faq { max-width: 800px; margin-inline: auto; }
.faq details {
  background: var(--color-white); border: 1px solid var(--color-mist);
  border-radius: var(--radius-medium); margin-bottom: var(--space-3);
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-weight: var(--weight-card); font-size: 17px;
  color: var(--color-midnight); padding: var(--space-4) var(--space-6); min-height: 56px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--color-deep-slate); border-bottom: 2px solid var(--color-deep-slate);
  transform: rotate(45deg); transition: transform var(--dur-base) var(--ease-out);
  margin-right: 4px;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details > p { padding: 0 var(--space-6) var(--space-6); margin: 0; }

/* ---- Final CTA ---- */

.final-cta { text-align: center; position: relative; }
.final-cta__path { margin: 0 auto var(--space-6); width: 96px; height: auto; }
.final-cta .section-head { margin-inline: auto; }
.final-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-top: var(--space-8); }
.final-cta__email { color: var(--color-text-on-dark-secondary); margin-top: var(--space-6); font-size: 15px; }
.final-cta__email a { color: var(--color-white); text-decoration-color: var(--color-digital-teal); }

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

.site-footer { background: var(--color-midnight); border-top: 1px solid rgba(255,255,255,0.08); padding-block: var(--space-16) var(--space-24); /* extra bottom space keeps legal text clear of the WhatsApp button */ }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-8); margin-bottom: var(--space-12); }
@media (max-width: 860px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer img { height: 30px; width: auto; margin-bottom: var(--space-4); }
.site-footer p { color: var(--color-text-on-dark-secondary); font-size: 15px; }
.site-footer__title { color: var(--color-white); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--font-body); font-weight: var(--weight-card); margin: 0 0 var(--space-4); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--space-2); }
.site-footer a { color: var(--color-text-on-dark-secondary); text-decoration: none; font-size: 15px; }
.site-footer a:hover { color: var(--color-white); }
.site-footer__legal {
  border-top: 1px solid rgba(255,255,255,0.08); padding-top: var(--space-6);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); justify-content: space-between;
  color: var(--color-text-on-dark-secondary); font-size: 13px;
}
.site-footer__legal p { font-size: 13px; margin: 0; }
.site-footer__legal a { font-size: 13px; text-decoration: underline; text-decoration-color: var(--color-digital-teal); text-underline-offset: 3px; }

/* ---- Legal / prose pages ---- */

.prose { max-width: 720px; }
.prose h2 { margin-top: var(--space-12); font-size: clamp(20px, 1vw + 16px, 26px); }
.prose ul { padding-left: 22px; margin: 0 0 var(--space-4); }
.prose li { margin-bottom: var(--space-2); }
.prose .page-updated { font-size: var(--fs-small); color: var(--color-slate); }

/* ---- Floating WhatsApp contact ---- */

.whatsapp-fab {
  position: fixed;
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: max(20px, calc(16px + env(safe-area-inset-bottom, 0px)));
  z-index: 40; /* above content, below the sticky header (50) */
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 52px; padding: 13px 20px;
  background: #25D366; /* recognised WhatsApp green; Midnight text for contrast */
  color: var(--color-midnight);
  font-family: var(--font-body); font-size: 15px; font-weight: var(--weight-card);
  border-radius: var(--radius-round);
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.28);
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.whatsapp-fab svg { width: 22px; height: 22px; flex: none; }
.whatsapp-fab:hover { background: #1EBE5B; color: var(--color-midnight); box-shadow: 0 8px 24px rgba(16, 24, 40, 0.32); }
.whatsapp-fab:active { background: #1AB055; transform: translateY(1px); }

@media (max-width: 640px) {
  .whatsapp-fab { width: 56px; min-height: 56px; padding: 0; }
  .whatsapp-fab__label { display: none; } /* aria-label keeps the name for screen readers */
  .whatsapp-fab svg { width: 26px; height: 26px; }
}

/* With JavaScript, the floating button stays out of the way while the hero
   (which already offers the same actions) is on screen, then fades and rises
   in once the visitor scrolls past it. Without JavaScript there is no .js
   class, so the button simply keeps its static corner position. */
.js .whatsapp-fab {
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out), visibility 0s linear 260ms;
}
.js .whatsapp-fab.is-visible {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .js .whatsapp-fab { transform: none; transition: none; }
  .js .whatsapp-fab.is-visible { transition: none; }
}

/* ==========================================================================
   Case studies (/work/…) — extends the homepage system; Bonelo brand colours
   appear only inside project-specific panels, never in WeDevelop chrome.
   ========================================================================== */

/* ---- Breadcrumb ---- */

.cs-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-8); padding: 0; font-size: var(--fs-small); }
.cs-breadcrumb li { color: var(--color-text-on-dark-secondary); }
.cs-breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--color-text-on-dark-secondary); }
.cs-breadcrumb a { color: rgba(255,255,255,0.85); text-decoration: none; }
.cs-breadcrumb a:hover { color: var(--color-white); text-decoration: underline; text-decoration-color: var(--color-digital-teal); }

/* ---- Case-study hero ---- */

.cs-hero { background: var(--color-midnight); padding-block: clamp(48px, 7vw, 88px) 0; overflow: hidden; }
.cs-hero h1 { color: var(--color-white); max-width: 20ch; margin-bottom: var(--space-6); }
.cs-hero__intro { color: var(--color-text-on-dark-secondary); font-size: var(--fs-body-lg); max-width: 62ch; margin-bottom: var(--space-6); }
.cs-tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-8); padding: 0; }
.cs-tags li {
  font-size: 13px; font-weight: var(--weight-label); color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radius-round); padding: 5px 14px;
}
.cs-hero__link { margin-bottom: clamp(40px, 5vw, 64px); }

.cs-hero__figure { margin: 0; }
.cs-hero__figure img {
  width: 100%; height: auto; aspect-ratio: 1672 / 941;
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  object-fit: cover;
}
.cs-hero__figure figcaption {
  font-size: 13px; color: var(--color-text-on-dark-secondary);
  padding: var(--space-3) 0;
}

/* ---- Case-study figures ---- */

.cs-figure { margin: var(--space-6) 0 0; }
.cs-figure img {
  width: 100%; height: auto;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-mist);
}
.cs-figure figcaption { font-size: 13px; color: var(--color-slate); margin-top: var(--space-2); }
.cs-figure--phone { max-width: 400px; }
.cs-journey ~ .cs-figure--phone { margin: clamp(32px, 5vw, 48px) auto 0; text-align: center; }
.cs-experience { align-items: start; }

/* ---- Snapshot ---- */

.cs-snapshot { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); margin: 0; }
.cs-snapshot dt { font-size: 13px; font-weight: var(--weight-card); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-deep-slate); margin-bottom: var(--space-1); }
.cs-snapshot dd { margin: 0; color: var(--color-slate); }
.cs-snapshot__services { grid-column: 1 / -1; border-top: 1px solid var(--color-mist); padding-top: var(--space-4); }
@media (max-width: 860px) { .cs-snapshot { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cs-snapshot { grid-template-columns: 1fr; } }

/* ---- Two-column editorial split ---- */

.cs-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .cs-split { grid-template-columns: 1fr; } }
.cs-split__lead h2 { margin-bottom: 0; }

.cs-points { list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.cs-points li { position: relative; padding: 5px 0 5px 26px; color: var(--color-slate); }
.cs-points li::before {
  content: ""; position: absolute; left: 0; top: 13px; width: 12px; height: 2px;
  background: var(--color-digital-teal); border-radius: 1px;
}
.cs-points li::after {
  content: ""; position: absolute; left: 12px; top: 10px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--color-signal-lime);
  border: 1px solid rgba(16,24,40,0.12);
}

/* ---- Identity substories (name and logo narrative) ---- */

.cs-substory { margin-top: clamp(40px, 6vw, 72px); }
.cs-substory__heading { font-size: clamp(22px, 1.4vw + 16px, 28px); margin-bottom: 0; }
.cs-substory > .eyebrow + .cs-substory__heading,
.cs-split__lead .cs-substory__heading { margin-bottom: 0; }

.cs-points--flush { margin-top: 0; }

.cs-pullquote {
  margin-top: var(--space-6);
  padding: var(--space-4) 0 var(--space-4) var(--space-6);
  border-left: 3px solid var(--color-digital-teal);
  font-family: var(--font-heading); font-weight: var(--weight-card);
  font-size: clamp(18px, 0.6vw + 15px, 21px); line-height: 1.45;
  color: var(--color-midnight);
}

.cs-anatomy {
  margin: 0; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 960px) { .cs-anatomy { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cs-anatomy { grid-template-columns: 1fr; } }
.cs-anatomy > div {
  background: var(--color-white); border: 1px solid var(--color-mist);
  border-radius: var(--radius-card); padding: var(--space-6);
}
.cs-anatomy dt {
  font-family: var(--font-heading); font-weight: var(--weight-card);
  font-size: 17px; color: var(--color-midnight); margin-bottom: var(--space-2);
  position: relative; padding-left: 22px;
}
.cs-anatomy dt::before {  /* presence-dot marker in Bonelo clay, confined to this project panel */
  content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px;
  border-radius: 50%; background: #C96F4A;
}
.cs-anatomy dd { margin: 0; font-size: 15px; color: var(--color-slate); }
.cs-anatomy__wide { grid-column: 1 / -1; }

/* ---- Bonelo approved logo presentation (locked SVG assets) ---- */

.cs-logo-figure { margin: var(--space-6) 0 0; }
.cs-logo-panel {
  display: flex; align-items: center; justify-content: center;
  background: #F7F1E8;  /* Bonelo Warm Sand, confined to this project panel */
  border: 1px solid var(--color-mist); border-radius: var(--radius-card);
  padding: clamp(28px, 4vw, 52px);
}
.cs-logo-panel img { max-width: 100%; height: auto; }
.cs-logo-figure figcaption { font-size: 13px; color: var(--color-slate); margin-top: var(--space-2); }
.cs-logo-figure--symbol .cs-logo-panel img,
.cs-logo-figure--anatomy .cs-logo-panel img { width: auto; height: clamp(120px, 12vw, 170px); }
.cs-logo-figure--wordmark .cs-logo-panel img { width: min(400px, 100%); }
.cs-logo-figure--wordmark { max-width: 720px; }

.cs-anatomy-layout {
  margin-top: clamp(24px, 3vw, 40px);
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.7fr);
  gap: clamp(24px, 4vw, 56px); align-items: start;
}
.cs-anatomy-layout .cs-logo-figure { margin-top: 0; }
.cs-anatomy-layout .cs-anatomy { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) { .cs-anatomy-layout { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .cs-anatomy-layout .cs-logo-figure--anatomy { max-width: 320px; } }
@media (max-width: 640px) { .cs-anatomy-layout .cs-anatomy { grid-template-columns: 1fr; } }

/* ---- Concept cards ---- */

.cs-concept svg { width: 26px; height: 26px; stroke: var(--color-digital-teal); margin-bottom: var(--space-4); }
.cs-concept p { font-size: 15px; }

/* ---- Brand system (palette + type) ---- */

.cs-brand {
  margin-top: clamp(32px, 5vw, 56px);
  background: var(--color-white); border: 1px solid var(--color-mist);
  border-radius: var(--radius-panel); padding: clamp(24px, 3vw, 40px);
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px);
}
@media (max-width: 860px) { .cs-brand { grid-template-columns: 1fr; } }
.cs-swatches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (max-width: 480px) { .cs-swatches { grid-template-columns: 1fr; } }
.cs-swatches li { display: flex; align-items: center; gap: var(--space-3); font-size: 15px; color: var(--color-deep-slate); font-weight: var(--weight-label); }
.cs-swatches code { font-size: 13px; color: var(--color-slate); font-weight: var(--weight-body); }
.cs-swatch { flex: none; width: 44px; height: 44px; border-radius: var(--radius-medium); border: 1px solid rgba(16,24,40,0.12); }
.cs-type p { font-size: 15px; color: var(--color-slate); margin-bottom: var(--space-2); }
.cs-type .cs-brandline {
  margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-mist);
  font-family: var(--font-heading); font-weight: var(--weight-heading);
  font-size: var(--fs-h3); color: var(--color-midnight);
}

/* ---- Numbered product journey ---- */

.cs-journey { counter-reset: cs-step; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 960px) { .cs-journey { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cs-journey { grid-template-columns: 1fr; } }
.cs-journey li { counter-increment: cs-step; background: var(--color-cloud); border: 1px solid var(--color-mist); border-radius: var(--radius-card); padding: var(--space-6); }
.cs-journey li::before {
  content: counter(cs-step, decimal-leading-zero);
  display: inline-block; font-family: var(--font-heading); font-weight: var(--weight-heading);
  font-size: var(--fs-small); color: var(--color-midnight);
  background: var(--color-white); border: 1px solid var(--color-mist);
  border-radius: var(--radius-round); padding: 4px 12px; margin-bottom: var(--space-4);
}
.cs-journey li:last-child::before { background: var(--color-signal-lime); border-color: var(--color-signal-lime); }
.cs-journey h3 { font-size: 19px; margin-bottom: var(--space-2); }
.cs-journey p { font-size: 15px; }

/* ---- Website-experience features ---- */

.cs-feature { border-top: 2px solid var(--color-mist); padding-top: var(--space-4); position: relative; }
.cs-feature::before { content: ""; position: absolute; top: -2px; left: 0; width: 40px; height: 2px; background: var(--color-digital-teal); }
.cs-feature h3 { font-size: 19px; margin-bottom: var(--space-2); }
.cs-feature p { font-size: 15px; }
/* ---- Deliverables grid (dark section) ---- */

.cs-deliverables { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 960px) { .cs-deliverables { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .cs-deliverables { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .cs-deliverables { grid-template-columns: 1fr; } }
.cs-deliverables li {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-medium); padding: var(--space-4);
  color: var(--color-white); font-size: 15px; font-weight: var(--weight-label);
  position: relative; padding-left: 40px;
}
.cs-deliverables li::before {
  content: ""; position: absolute; left: 16px; top: 22px; width: 10px; height: 6px;
  border-left: 2px solid var(--color-signal-lime); border-bottom: 2px solid var(--color-signal-lime);
  transform: rotate(-45deg); border-radius: 1px;
}

/* ---- Homepage featured case study ---- */

.work-featured {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  overflow: hidden; padding: 0; margin-bottom: var(--space-6);
}
@media (max-width: 860px) { .work-featured { grid-template-columns: 1fr; } }
.work-featured__visual {
  background: #F7F1E8; /* Bonelo Warm Sand behind the presentation image */
  aspect-ratio: 1672 / 941; overflow: hidden;
}
.work-featured__visual img { width: 100%; height: 100%; object-fit: cover; object-position: left center; /* keeps the wordmark and headline visible as the panel crops */ }
@media (max-width: 860px) { .work-featured__visual img { object-fit: contain; object-position: center; } }
.work-featured__body { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.work-featured__body h3 { margin: 0; font-size: var(--fs-h3); }
.work-featured__body p { color: var(--color-slate); margin: 0; }
.work-featured .text-link { margin-top: var(--space-2); }

/* ==========================================================================
   Service pages (/services/…) — extends the homepage system. These pages
   reuse the shared sections, grids, cards, process list, FAQ, breadcrumb and
   footer; svc-* adds the service-specific heroes, diagrams and layouts.
   Every diagram is plain HTML + CSS borders/pseudo-elements: no images,
   no SVG illustrations, no JavaScript.
   ========================================================================== */

/* ---- Shared service hero base ---- */

.svc-hero { background: var(--color-midnight); padding-block: clamp(48px, 7vw, 88px); }
.svc-hero h1 { color: var(--color-white); max-width: 24ch; margin-bottom: var(--space-6); }
.svc-hero__intro { color: var(--color-text-on-dark-secondary); font-size: var(--fs-body-lg); max-width: 62ch; margin-bottom: var(--space-8); }
.svc-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.svc-hero__support { color: var(--color-text-on-dark-secondary); font-size: var(--fs-small); margin: var(--space-6) 0 0; }
.svc-hero .eyebrow { color: var(--color-digital-teal); }
.svc-hero .eyebrow::before { background: var(--color-signal-lime); }
@media (max-width: 640px) { .svc-hero__ctas .btn { flex: 1 1 auto; } }

/* Light hero variant (website design): white canvas, structured grid cues */
.svc-hero--light { background: var(--color-white); border-bottom: 1px solid var(--color-mist); }
.svc-hero--light h1 { color: var(--color-midnight); }
.svc-hero--light .svc-hero__intro,
.svc-hero--light .svc-hero__support { color: var(--color-slate); }
.svc-hero--light .eyebrow { color: var(--color-deep-slate); }
.svc-hero--light .eyebrow::before { background: var(--color-digital-teal); }
.svc-hero--light .cs-breadcrumb li { color: var(--color-slate); }
.svc-hero--light .cs-breadcrumb li + li::before { color: var(--color-slate); }
.svc-hero--light .cs-breadcrumb a { color: var(--color-deep-slate); }
.svc-hero--light .cs-breadcrumb a:hover { color: var(--color-midnight); }

/* ---- Hub hero: connected system map ---- */

.svc-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(40px, 5vw, 72px); align-items: center;
}
@media (max-width: 960px) { .svc-hero__grid { grid-template-columns: 1fr; } }

.svc-map {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-panel); padding: clamp(20px, 2.5vw, 32px);
}
@media (max-width: 960px) { .svc-map { max-width: 480px; } }
.svc-map__title {
  font-family: var(--font-body); font-size: 13px; font-weight: var(--weight-card);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-on-dark-secondary); margin: 0 0 var(--space-4);
}
.svc-map__core {
  position: relative; text-align: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(31,183,166,0.55);
  border-radius: var(--radius-medium); padding: var(--space-4);
}
.svc-map__core strong {
  display: block; font-family: var(--font-heading); font-weight: var(--weight-card);
  color: var(--color-white); font-size: 17px;
}
.svc-map__core::after { /* trunk down to the service bus */
  content: ""; position: absolute; left: 50%; bottom: -20px;
  width: 2px; height: 20px; margin-left: -1px; background: var(--color-digital-teal);
}
.svc-map__tags { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.svc-map__tags li {
  font-size: 12px; font-weight: var(--weight-label); color: var(--color-text-on-dark-secondary);
  border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-round); padding: 3px 10px;
}
.svc-map__nodes {
  list-style: none; margin: 20px 0 0; padding: 20px 0 0; position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
}
.svc-map__nodes::before { /* horizontal bus */
  content: ""; position: absolute; top: 0; left: 16.66%; right: 16.66%; height: 2px;
  background: var(--color-digital-teal);
}
.svc-map__nodes li {
  position: relative; text-align: center;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-medium); padding: var(--space-3) var(--space-2);
  color: var(--color-white); font-size: 14px; font-weight: var(--weight-label); line-height: 1.35;
}
.svc-map__nodes li::before { /* riser from the bus */
  content: ""; position: absolute; top: -20px; left: 50%; width: 2px; height: 20px;
  margin-left: -1px; background: var(--color-digital-teal);
}
.svc-map__nodes li::after { /* junction node */
  content: ""; position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%; background: var(--color-signal-lime);
  border: 1px solid var(--color-midnight);
}
@media (max-width: 560px) {
  .svc-map__core::after { display: none; }
  .svc-map__nodes { grid-template-columns: 1fr; margin-top: var(--space-4); padding: 0 0 0 24px; }
  .svc-map__nodes::before { top: -8px; bottom: 10px; left: 11px; right: auto; width: 2px; height: auto; }
  .svc-map__nodes li { text-align: left; padding-left: var(--space-4); }
  .svc-map__nodes li::before { top: 50%; left: -13px; width: 13px; height: 2px; margin: -1px 0 0; }
  .svc-map__nodes li::after { top: 50%; left: -17px; transform: translateY(-50%); }
}

/* ---- Website-design hero: wireframe-to-interface composition ---- */

.svc-compose { margin-top: clamp(32px, 4vw, 56px); }
.svc-compose__label {
  font-family: var(--font-body); font-size: 13px; font-weight: var(--weight-card);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-deep-slate);
  margin: 0 0 var(--space-4);
}
.svc-compose__stage { position: relative; max-width: 860px; padding-bottom: 44px; }
@media (min-width: 961px) { .svc-compose__stage { margin-left: auto; margin-right: 4%; } }
.svc-frame {
  background: var(--color-cloud); border: 1px solid var(--color-mist);
  border-radius: var(--radius-card); overflow: hidden;
  box-shadow: 0 12px 32px rgba(16,24,40,0.08);
}
.svc-frame__bar { display: flex; gap: 6px; padding: 10px 14px; background: var(--color-white); border-bottom: 1px solid var(--color-mist); }
.svc-frame__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--color-mist); }
.svc-frame__body { padding: clamp(16px, 2.5vw, 28px); display: grid; gap: var(--space-3); }
.svc-ui-label { font-size: 12px; font-weight: var(--weight-card); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-deep-slate); }
.svc-ui-bar { display: block; height: 8px; border-radius: 4px; background: var(--color-mist); }
.svc-ui-bar--strong { height: 16px; background: var(--color-midnight); border-radius: 5px; }
.svc-ui-bar--nav { height: 12px; background: var(--color-midnight); opacity: 0.92; }
.svc-ui-cta {
  display: inline-block; justify-self: start; padding: 8px 16px; border-radius: var(--radius-small);
  background: var(--color-signal-lime); color: var(--color-midnight);
  font-size: 12px; font-weight: var(--weight-card);
}
.svc-ui-group { display: grid; gap: 8px; }
.svc-ui-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.svc-ui-cards i { display: block; height: 52px; border: 1px solid var(--color-mist); border-radius: 8px; background: var(--color-white); }
.svc-ui-trust { display: flex; align-items: center; gap: 8px; }
.svc-ui-trust i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--color-digital-teal); opacity: 0.7; flex: none; }
.svc-w-85 { width: 85%; } .svc-w-70 { width: 70%; } .svc-w-50 { width: 50%; }
.svc-frame--phone {
  position: absolute; right: -8px; bottom: 0; width: clamp(120px, 18vw, 190px);
  border-radius: 18px; box-shadow: 0 16px 36px rgba(16,24,40,0.14);
  background: var(--color-white);
}
.svc-frame--phone .svc-frame__bar { justify-content: center; padding: 8px; }
.svc-frame--phone .svc-frame__bar i { width: 30px; height: 5px; border-radius: 999px; }
.svc-frame--phone .svc-frame__body { padding: 12px; gap: 8px; }
.svc-frame--phone .svc-ui-cards { grid-template-columns: 1fr; gap: 6px; }
.svc-frame--phone .svc-ui-cards i { height: 22px; }
@media (max-width: 640px) {
  .svc-frame--phone { right: 0; width: 112px; }
  .svc-compose__stage { padding-bottom: 32px; }
}

/* ---- Redesign hero: before/after comparison panel ---- */

.svc-ba { margin: clamp(36px, 5vw, 56px) 0 0; }
.svc-ba__panes {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-panel); overflow: hidden;
}
.svc-ba__pane { padding: clamp(16px, 2.5vw, 28px); display: grid; gap: 10px; align-content: start; }
.svc-ba__pane--before { background: rgba(255,255,255,0.03); gap: 6px; }
.svc-ba__pane--after { background: rgba(255,255,255,0.07); border-left: 2px solid var(--color-digital-teal); }
.svc-ba__tag {
  justify-self: start; font-size: 12px; font-weight: var(--weight-card); letter-spacing: 0.08em;
  text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-round);
  margin-bottom: var(--space-2);
}
.svc-ba__pane--before .svc-ba__tag { color: var(--color-text-on-dark-secondary); border: 1px solid rgba(255,255,255,0.22); }
.svc-ba__pane--after .svc-ba__tag { color: var(--color-midnight); background: var(--color-signal-lime); }
.svc-ba .svc-ui-bar { background: rgba(255,255,255,0.14); }
.svc-ba .svc-ui-bar--strong { background: rgba(255,255,255,0.88); }
.svc-ba__pane--before .svc-ui-bar--strong { background: rgba(255,255,255,0.22); height: 12px; }
.svc-ba__pane--after .svc-ui-bar { background: rgba(255,255,255,0.30); }
.svc-ba .svc-ui-cta--muted { background: rgba(255,255,255,0.10); color: var(--color-text-on-dark-secondary); }
.svc-ba .svc-ui-cards i { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.22); }
.svc-ba figcaption { color: var(--color-text-on-dark-secondary); font-size: 13px; padding-top: var(--space-3); }
@media (max-width: 640px) {
  .svc-ba__panes { grid-template-columns: 1fr; }
  .svc-ba__pane--after { border-left: none; border-top: 2px solid var(--color-digital-teal); }
}

/* ---- Automation hero: workflow rail ---- */

.svc-flow-wrap { margin-top: clamp(36px, 5vw, 56px); }
.svc-flow__note {
  font-family: var(--font-body); font-size: 13px; font-weight: var(--weight-card);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-on-dark-secondary); margin: 0 0 var(--space-4);
}
.svc-flow {
  list-style: none; counter-reset: flow; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-6);
}
.svc-flow li {
  counter-increment: flow; position: relative;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-medium); padding: var(--space-4) var(--space-3) var(--space-3);
}
.svc-flow li::before {
  content: counter(flow, decimal-leading-zero);
  display: inline-block; font-family: var(--font-heading); font-weight: var(--weight-heading);
  font-size: 12px; color: var(--color-digital-teal); margin-bottom: var(--space-2);
}
.svc-flow li:not(:last-child)::after { /* connector arrow */
  content: ""; position: absolute; top: 50%; right: -17px; width: 9px; height: 9px;
  border-top: 2px solid var(--color-digital-teal); border-right: 2px solid var(--color-digital-teal);
  transform: translateY(-50%) rotate(45deg);
}
.svc-flow strong { display: block; color: var(--color-white); font-size: 14px; font-weight: var(--weight-label); line-height: 1.35; margin-bottom: var(--space-2); }
.svc-flow span { display: block; font-size: 12px; color: var(--color-text-on-dark-secondary); }
.svc-flow li:last-child { border-color: rgba(183,243,74,0.45); }
.svc-flow li:last-child::before { color: var(--color-signal-lime); }
@media (max-width: 1100px) and (min-width: 761px) {
  .svc-flow { grid-template-columns: repeat(3, 1fr); }
  .svc-flow li:nth-child(3n)::after { display: none; }
}
@media (max-width: 760px) {
  .svc-flow { grid-template-columns: 1fr; max-width: 420px; }
  .svc-flow li:not(:last-child)::after { top: auto; right: auto; bottom: -17px; left: 24px; transform: rotate(135deg); }
}

/* ---- Service choice cards (services hub) ---- */

.svc-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.svc-card__top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-6) 0;
}
.svc-card__num {
  font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--fs-small);
  color: var(--color-deep-slate); background: var(--color-cloud);
  border: 1px solid var(--color-mist); border-radius: var(--radius-round); padding: 4px 12px;
}
.svc-card__body { padding: var(--space-4) var(--space-6) var(--space-6); }
.svc-card__body h3 { margin-bottom: var(--space-2); }
.svc-card__body p { font-size: 15px; color: var(--color-slate); margin: 0; }
.svc-card__cta {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-mist);
  font-weight: var(--weight-card); font-size: 15px; color: var(--color-midnight);
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out);
}
.svc-card__cta:hover,
.svc-card__cta:focus-visible { background: var(--color-cloud); color: var(--color-midnight); }
.svc-card__arrow {
  flex: none; width: 34px; height: 34px; border-radius: var(--radius-round);
  border: 1.5px solid var(--color-mist); display: grid; place-items: center;
  font-size: 16px; line-height: 1; color: var(--color-midnight);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.svc-card:hover .svc-card__arrow,
.svc-card:focus-within .svc-card__arrow { border-color: var(--color-digital-teal); background: var(--color-white); }
.svc-card:hover,
.svc-card:focus-within { border-color: rgba(16,24,40,0.22); box-shadow: 0 12px 28px rgba(16,24,40,0.10); }
@media (prefers-reduced-motion: no-preference) {
  .svc-card:hover .svc-card__arrow,
  .svc-card:focus-within .svc-card__arrow { transform: translateX(3px); }
}

/* Card motifs: tiny decorative CSS diagrams (aria-hidden in the markup) */
.svc-card__motif { position: relative; flex: none; width: 52px; height: 40px; opacity: 0.85; transition: opacity var(--dur-base) var(--ease-out); }
.svc-card:hover .svc-card__motif,
.svc-card:focus-within .svc-card__motif { opacity: 1; }
.svc-card__motif i { position: absolute; display: block; }

/* Structure / layout motif (website design) */
.svc-card__motif--design { border: 1.5px solid var(--color-mist); border-radius: 8px; background: var(--color-white); }
.svc-card__motif--design i:nth-child(1) { top: 5px; left: 5px; right: 5px; height: 5px; border-radius: 2px; background: var(--color-midnight); opacity: 0.85; }
.svc-card__motif--design i:nth-child(2) { top: 15px; left: 5px; width: 24px; bottom: 5px; border-radius: 3px; background: var(--color-mist); }
.svc-card__motif--design i:nth-child(3) { top: 15px; right: 5px; width: 12px; height: 8px; border-radius: 2px; background: var(--color-signal-lime); }

/* Before / after transformation motif (website redesign) */
.svc-card__motif--redesign { border: 1.5px solid var(--color-mist); border-radius: 8px; background: var(--color-white); }
.svc-card__motif--redesign::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 50%; width: 2px; margin-left: -1px; background: var(--color-digital-teal); border-radius: 1px; }
.svc-card__motif--redesign i:nth-child(1) { top: 8px; left: 5px; width: 15px; height: 4px; border-radius: 2px; background: var(--color-mist); box-shadow: 0 7px 0 var(--color-mist), 0 14px 0 var(--color-mist); }
.svc-card__motif--redesign i:nth-child(2) { top: 8px; right: 5px; width: 17px; height: 6px; border-radius: 2px; background: var(--color-deep-slate); }
.svc-card__motif--redesign i:nth-child(3) { top: 20px; right: 5px; width: 10px; height: 7px; border-radius: 2px; background: var(--color-signal-lime); }

/* Node / workflow motif (AI automation) */
.svc-card__motif--automation::before { content: ""; position: absolute; top: 50%; left: 4px; right: 4px; height: 2px; margin-top: -1px; background: var(--color-digital-teal); border-radius: 1px; }
.svc-card__motif--automation i { top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--color-white); border: 2px solid var(--color-digital-teal); }
.svc-card__motif--automation i:nth-child(1) { left: 2px; }
.svc-card__motif--automation i:nth-child(2) { left: 50%; margin-left: -6px; }
.svc-card__motif--automation i:nth-child(3) { right: 2px; background: var(--color-signal-lime); border-color: var(--color-signal-lime); }

/* ---- Hub decision paths ---- */

.svc-paths { border-top: 1px solid var(--color-mist); }
.svc-path {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  padding: clamp(20px, 3vw, 32px) 0; border-bottom: 1px solid var(--color-mist);
  text-decoration: none;
}
.svc-path__num {
  flex: none; font-family: var(--font-heading); font-weight: var(--weight-heading);
  font-size: var(--fs-small); color: var(--color-midnight);
  background: var(--color-cloud); border: 1px solid var(--color-mist);
  border-radius: var(--radius-round); padding: 4px 12px;
}
.svc-path__body { flex: 1; }
.svc-path__body strong {
  display: block; font-family: var(--font-heading); font-weight: var(--weight-card);
  color: var(--color-midnight); font-size: clamp(19px, 1.2vw + 14px, 24px); line-height: 1.3;
}
.svc-path__body span { display: block; margin-top: 4px; font-size: 14px; font-weight: var(--weight-label); color: var(--color-deep-slate); }
.svc-path .arrow { flex: none; color: var(--color-midnight); font-size: 22px; transition: transform var(--dur-base) var(--ease-out); }
.svc-path:hover .arrow { transform: translateX(4px); }
.svc-path:hover strong { color: var(--color-deep-slate); }
.svc-paths__aside { margin-top: var(--space-6); font-size: 15px; color: var(--color-slate); }
@media (max-width: 560px) { .svc-path { align-items: flex-start; } }

/* ---- Website-design question framework ---- */

.svc-questions { list-style: none; counter-reset: q; margin: 0; padding: 0; }
.svc-questions li {
  counter-increment: q; position: relative;
  font-family: var(--font-heading); font-weight: var(--weight-heading);
  font-size: clamp(24px, 2.4vw + 12px, 40px); line-height: 1.2; color: var(--color-midnight);
  padding: clamp(20px, 3vw, 32px) 0 clamp(20px, 3vw, 32px) clamp(56px, 6vw, 88px);
  border-top: 1px solid var(--color-mist);
}
.svc-questions li::before {
  content: counter(q, decimal-leading-zero);
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  font-size: var(--fs-small); font-weight: var(--weight-heading);
  color: var(--color-digital-teal); letter-spacing: 0.06em;
}
.svc-questions li:nth-child(2) { margin-left: 6%; }
.svc-questions li:nth-child(3) { margin-left: 12%; }
.svc-questions li:nth-child(4) { margin-left: 18%; }
@media (max-width: 760px) {
  .svc-questions li:nth-child(2),
  .svc-questions li:nth-child(3),
  .svc-questions li:nth-child(4) { margin-left: 0; }
}

/* ---- Redesign diagnostic audit panel ---- */

.svc-audit {
  background: var(--color-white); border: 1px solid var(--color-mist);
  border-radius: var(--radius-panel); overflow: hidden;
}
.svc-audit__head {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-4) clamp(20px, 3vw, 32px); background: var(--color-midnight);
}
.svc-audit__head p {
  margin: 0; font-size: 13px; font-weight: var(--weight-card); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text-on-dark-secondary);
}
.svc-audit__list { margin: 0; }
.svc-audit__row {
  display: grid; grid-template-columns: 200px 1fr; gap: var(--space-2) var(--space-4);
  padding: var(--space-4) clamp(20px, 3vw, 32px); border-top: 1px solid var(--color-mist);
}
.svc-audit__row:first-of-type { border-top: none; }
.svc-audit dt {
  grid-column: 1; grid-row: 1; padding-top: 2px;
  font-size: 13px; font-weight: var(--weight-card); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--color-deep-slate);
}
.svc-audit dd { grid-column: 2; margin: 0; position: relative; padding-left: 22px; color: var(--color-slate); }
.svc-audit dd::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--color-amber);
}
@media (max-width: 640px) {
  .svc-audit__row { grid-template-columns: 1fr; }
  .svc-audit dt, .svc-audit dd { grid-column: 1; }
  .svc-audit dt { grid-row: auto; }
}

/* ---- Automation contrast panel ---- */

.svc-contrast {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--color-mist); border-radius: var(--radius-panel); overflow: hidden;
}
.svc-contrast__col { padding: clamp(24px, 3vw, 40px); }
.svc-contrast__col--noise { background: var(--color-cloud); }
.svc-contrast__col--signal { background: var(--color-white); border-left: 1px solid var(--color-mist); }
.svc-contrast__col h3 { font-size: 19px; margin-bottom: var(--space-4); }
.svc-contrast__col--noise h3 { color: var(--color-deep-slate); }
.svc-contrast ul { list-style: none; margin: 0; padding: 0; }
.svc-contrast li { position: relative; padding: 8px 0 8px 28px; font-size: 15px; color: var(--color-slate); }
.svc-contrast__col--noise li::before { /* dash marker */
  content: ""; position: absolute; left: 2px; top: 18px; width: 12px; height: 2px;
  border-radius: 1px; background: var(--color-deep-slate); opacity: 0.5;
}
.svc-contrast__col--signal li::before { /* check marker */
  content: ""; position: absolute; left: 2px; top: 13px; width: 10px; height: 6px;
  border-left: 2px solid var(--color-digital-teal); border-bottom: 2px solid var(--color-digital-teal);
  transform: rotate(-45deg); border-radius: 1px;
}
@media (max-width: 760px) {
  .svc-contrast { grid-template-columns: 1fr; }
  .svc-contrast__col--signal { border-left: none; border-top: 1px solid var(--color-mist); }
}

/* ---- Vertical numbered timeline (design + automation processes) ---- */

.svc-steps { list-style: none; counter-reset: sstep; margin: 0; padding: 0; max-width: 760px; }
.svc-steps li { counter-increment: sstep; position: relative; padding: 0 0 clamp(24px, 3.5vw, 40px) 64px; }
.svc-steps li::before {
  content: counter(sstep, decimal-leading-zero);
  position: absolute; left: 0; top: -2px; width: 44px; height: 44px;
  display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--fs-small);
  color: var(--color-midnight); background: var(--color-cloud); border: 1px solid var(--color-mist);
  border-radius: var(--radius-round);
}
.svc-steps li::after {
  content: ""; position: absolute; left: 21px; top: 48px; bottom: 6px; width: 2px;
  background: var(--color-mist);
}
.svc-steps li:last-child { padding-bottom: 0; }
.svc-steps li:last-child::after { display: none; }
.svc-steps li:last-child::before { background: var(--color-signal-lime); border-color: var(--color-signal-lime); }
.svc-steps h3 { font-size: 19px; margin-bottom: var(--space-2); }
.svc-steps p { font-size: 15px; max-width: 60ch; }
.section--white .svc-steps li::before { background: var(--color-cloud); }
.section--white .svc-steps li:last-child::before { background: var(--color-signal-lime); }

/* ---- Two-column marker lists for longer checklists ---- */

.svc-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-8); }
@media (max-width: 640px) { .svc-cols { grid-template-columns: 1fr; } }

/* ---- Compact service-hero rhythm for common laptop heights ----
   Tightens vertical spacing so the full hero composition (copy, CTAs and
   the page's diagram) fits comfortably at 1366×768 and 1280×720 without
   shrinking the concept or hiding content. */

@media (min-width: 861px) and (max-height: 820px) {
  .svc-hero { padding-block: 32px 44px; }
  .svc-hero .cs-breadcrumb ol { margin-bottom: var(--space-4); }
  .svc-hero .eyebrow { margin-bottom: var(--space-3); }
  .svc-hero h1 { font-size: clamp(30px, 2vw + 14px, 38px); margin-bottom: var(--space-4); }
  .svc-hero__intro { font-size: var(--fs-body); margin-bottom: var(--space-6); max-width: 66ch; }
  .svc-hero__support { margin-top: var(--space-4); }

  /* Hub system map */
  .svc-map { padding: var(--space-4); }
  .svc-map__title { margin-bottom: var(--space-3); }
  .svc-map__core { padding: var(--space-3); }
  .svc-map__core::after { bottom: -18px; height: 18px; }
  .svc-map__nodes { margin-top: 18px; padding-top: 18px; }
  .svc-map__nodes li::before { top: -18px; height: 18px; }
  .svc-map__nodes li::after { top: -22px; }

  /* Website-design composition */
  .svc-compose { margin-top: var(--space-6); }
  .svc-compose__label { margin-bottom: var(--space-3); }
  .svc-compose__stage { padding-bottom: 32px; }
  .svc-frame__body { padding: 14px; gap: 8px; }
  .svc-ui-group { gap: 6px; }
  .svc-ui-cards i { height: 34px; }
  .svc-frame--phone { width: 150px; }

  /* Redesign before/after comparison */
  .svc-ba { margin-top: var(--space-6); }
  .svc-ba__pane { padding: 14px 18px; gap: 7px; }
  .svc-ba__pane--before { gap: 4px; }
  .svc-ba .svc-ui-cards i { height: 26px; }
  .svc-ba__tag { margin-bottom: 4px; }
  .svc-ba figcaption { padding-top: var(--space-2); }

  /* Automation workflow rail */
  .svc-flow-wrap { margin-top: var(--space-6); }
  .svc-flow__note { margin-bottom: var(--space-3); }
  .svc-flow { gap: var(--space-4); }
  .svc-flow li { padding: 10px 10px 8px; }
  .svc-flow li::before { margin-bottom: 4px; }
  .svc-flow strong { font-size: 13px; margin-bottom: 4px; }
  .svc-flow span { font-size: 11px; }
  .svc-flow li:not(:last-child)::after { right: -12px; width: 8px; height: 8px; }
}

/* ==========================================================================
   Motion system — restrained, one-shot, progressive enhancement only.
   Content is fully visible without JavaScript (no .js class) and under
   prefers-reduced-motion. Only opacity and transform are animated.
   ========================================================================== */

/* ---- Scroll reveal (JS adds .is-visible; batches are staggered in JS) ---- */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out); }
  .js .reveal.is-visible {
    opacity: 1; transform: none;
    /* Once revealed, shorter transitions keep hover/focus lifts responsive */
    transition: opacity 480ms var(--ease-out), transform 320ms var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  }
}

/* ---- Interaction polish: cards lift gently on hover and keyboard focus ---- */

.service-card:hover, .work-card:hover, .work-featured:hover,
.svc-card:hover, .svc-card:focus-within {
  border-color: rgba(16,24,40,0.22);
  box-shadow: 0 12px 28px rgba(16,24,40,0.10);
}
@media (prefers-reduced-motion: no-preference) {
  .service-card, .work-card, .work-featured, .svc-card {
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  }
  .service-card:hover, .work-card:hover, .work-featured:hover,
  .svc-card:hover, .svc-card:focus-within { transform: translateY(-3px); }
}

/* ---- One-shot hero entrance (page load only, gated on .js) ---- */

@media (prefers-reduced-motion: no-preference) {
  .js .svc-hero .cs-breadcrumb, .js .cs-hero .cs-breadcrumb,
  .js .svc-hero .eyebrow, .js .hero .eyebrow, .js .cs-hero .eyebrow,
  .js .svc-hero h1, .js .hero h1, .js .cs-hero h1,
  .js .svc-hero__intro, .js .hero__copy, .js .cs-hero__intro,
  .js .svc-hero__ctas, .js .hero__ctas, .js .cs-tags, .js .cs-hero__link,
  .js .svc-hero__support, .js .hero__trustline,
  .js .svc-map__core, .js .svc-map__nodes li,
  .js .svc-compose__label, .js .svc-compose .svc-frame,
  .js .svc-ba figcaption,
  .js .svc-flow__note, .js .svc-flow li,
  .js .cs-hero__figure {
    opacity: 0;
    animation: svc-rise 560ms var(--ease-out) forwards;
  }
  .js .svc-ba__pane--before,
  .js .svc-ba__pane--after { opacity: 0; animation: svc-rise 560ms var(--ease-out) forwards; }

  .js .svc-hero .cs-breadcrumb, .js .cs-hero .cs-breadcrumb { animation-delay: 0ms; }
  .js .svc-hero .eyebrow, .js .hero .eyebrow, .js .cs-hero .eyebrow { animation-delay: 70ms; }
  .js .svc-hero h1, .js .hero h1, .js .cs-hero h1 { animation-delay: 140ms; }
  .js .svc-hero__intro, .js .hero__copy, .js .cs-hero__intro { animation-delay: 210ms; }
  .js .svc-hero__ctas, .js .hero__ctas, .js .cs-tags, .js .cs-hero__link { animation-delay: 280ms; }
  .js .svc-hero__support, .js .hero__trustline { animation-delay: 340ms; }

  /* Diagram entrances — one time, layered */
  .js .svc-map__core { animation-delay: 360ms; }
  .js .svc-map__nodes li:nth-child(1) { animation-delay: 440ms; }
  .js .svc-map__nodes li:nth-child(2) { animation-delay: 510ms; }
  .js .svc-map__nodes li:nth-child(3) { animation-delay: 580ms; }

  .js .svc-compose__label { animation-delay: 340ms; }
  .js .svc-compose .svc-frame { animation-delay: 400ms; }
  .js .svc-compose .svc-frame--phone { animation-delay: 560ms; }

  .js .svc-ba__pane--before { animation-name: svc-slide-l; animation-delay: 380ms; }
  .js .svc-ba__pane--after { animation-name: svc-slide-r; animation-delay: 480ms; }
  .js .svc-ba figcaption { animation-delay: 600ms; }

  .js .svc-flow__note { animation-delay: 340ms; }
  .js .svc-flow li:nth-child(1) { animation-delay: 400ms; }
  .js .svc-flow li:nth-child(2) { animation-delay: 460ms; }
  .js .svc-flow li:nth-child(3) { animation-delay: 520ms; }
  .js .svc-flow li:nth-child(4) { animation-delay: 580ms; }
  .js .svc-flow li:nth-child(5) { animation-delay: 640ms; }
  .js .svc-flow li:nth-child(6) { animation-delay: 700ms; }

  .js .cs-hero__figure { animation-delay: 380ms; }

  @keyframes svc-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes svc-slide-l {
    from { opacity: 0; transform: translateX(-14px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes svc-slide-r {
    from { opacity: 0; transform: translateX(14px); }
    to { opacity: 1; transform: none; }
  }
}