/* Original palette, with the focused story and mature Google Sans typography. */
:root { --navy: #17213a; --blue: #3549cf; --mint: #dff6ed; --paper: #fff; --body: #46516a; --line: #cdd3e3; }
.concept-b { --paper: #fff; }
.concept-b .site-header {
  position: sticky;
  z-index: 70;
  top: 0;
  background: rgb(255 255 255 / .96);
  border-bottom-color: #cdd3e3;
  box-shadow: 0 5px 18px rgb(23 33 58 / .06);
  backdrop-filter: blur(12px);
}
.concept-b .brand > span > span { color: #fff; background: #3549cf; padding: 0 4px; margin-left: 2px; }
.concept-b .button { border-color: #17213a; box-shadow: 3px 3px 0 #b8c8df; }
.concept-b .button:hover { box-shadow: 4px 4px 0 #b8c8df; }
.concept-b .link-arrow,
.concept-b .direction-arrow {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.12em;
}
.concept-b .link-arrow { margin-left: .22em; }
.concept-b .button .link-arrow,
.concept-b .button .direction-arrow { width: 1.08em; height: 1.08em; margin-left: 0; }
.concept-b .story-sent .link-arrow { width: .9em; height: .9em; }
.concept-b .lean-mail-icon {
  width: 34px;
  padding: 7px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lean-hero { background-color: #fff; background-image: linear-gradient(#17213a06 1px, transparent 1px),linear-gradient(90deg,#17213a06 1px,transparent 1px); background-size: 42px 42px; }
.lean-hero-copy h1 { color: #17213a; line-height: .95; }
.lean-hero-copy > .eyebrow { display: inline-block; background: #dff6ed; color: #17213a; padding: 8px 12px; border: 1px solid #17213a; letter-spacing: .09em; font-size: 12px; margin-bottom: 0; }
.lean-visual { border-color: #17213a; box-shadow: 7px 7px 0 #d6d4f5; }
.lean-mail { border-color: #17213a; box-shadow: 4px 4px 0 #dff6ed; }
.c-recognition { background: #dff6ed; border-color: #a5cdbd; }
.concept-b .b-offer { background: #17213a; }
.concept-b .b-connected { background: #fff; }
.story-step { background: #dff6ed; color: #17213a; border: 1px solid #8bafa2; }
.story-message { background: #fff8f1; border-color: #17213a; box-shadow: 5px 5px 0 #ffb6a7; }
.story-avatar { background: #ff765f; color: #17213a; }
.concept-b .b-email-caption { border-color: #cdd3e3; }
.concept-b .b-email-caption {
  display: block;
  padding: 26px 0 24px;
}
.concept-b .b-email-caption p {
  max-width: 940px;
  margin: 0;
  color: #46516a;
  font-size: 16px;
  line-height: 1.6;
}
.concept-b .b-email-caption strong {
  display: block;
  margin-bottom: 12px;
  color: #17213a;
  font-size: 27px;
  line-height: 1.3;
  letter-spacing: normal;
}
.concept-b .inquiry-email-example { background: #dff6ed; border-color: #a4c7ba; }
.concept-b .story-customer { background: #ece9ff; border-color: #c8c0eb; }
.story-customer .story-step { background: #ece9ff; border-color: #b2a5d8; color: #333955; }
.concept-b .b-examples { background: #f4f7fd; }
.concept-b .launch-demo-preview { border-color: #17213a; box-shadow: 5px 5px 0 #cbd5ee; }
.concept-b .launch-demo > .story-demo-type { background: #dff6ed; color: #17213a; width: fit-content; }
.concept-b .launch-demo:nth-child(2) > .story-demo-type { background: #ffe1d9; color: #583c35; }
.concept-b .c-about { background: #f4f7fd; padding-block: 72px; }
.concept-b .c-about .b-section-label { border-color: #c4bde2; color: #46516a; }
.concept-b .c-about-grid { grid-template-columns: .9fr 1.1fr; gap: 76px; align-items: center; }
.concept-b .c-about-copy { grid-column: 2; grid-row: 1; }
.concept-b .c-about-copy > .eyebrow { display: inline-block; color: #17213a; background: #dff6ed; border: 1px solid #17213a; padding: 7px 10px; font-size: 12px; letter-spacing: .08em; }
.concept-b .c-about-copy h2 { font-size: clamp(42px, 4.3vw, 60px); }
.concept-b .c-about-copy .c-about-lede { font-size: 25px !important; }
.hybrid-portrait-scene { grid-column: 1; grid-row: 1; position: relative; isolation: isolate; width: 80%; max-width: 450px; aspect-ratio: 1; justify-self: center; }
.hybrid-portrait-scene::before { content: ''; position: absolute; inset: 3%; border: 1px dashed #c3b9de; border-radius: 50%; }
.hybrid-portrait-scene::after { content: ''; position: absolute; z-index: -1; right: 4%; top: 24%; width: 52%; aspect-ratio: 1; border-radius: 50%; background: #ff765f; border: 2px solid #17213a; box-shadow: 5px 5px 0 #17213a; }
.concept-b .hybrid-portrait { position: absolute; inset: 16% 18% 14% 16%; margin: 0; border: 2px solid #17213a; border-radius: 7px; background: #d8e6f8; box-shadow: 8px 8px 0 #d6a493; transform: rotate(-2deg); overflow: hidden; }
.concept-b .hybrid-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; background: transparent; border-radius: 0; transform: scale(1.28); transform-origin: 50% 20%; }
.hybrid-portrait-label { position: absolute; z-index: 3; top: 10%; left: 20%; padding: 7px 12px; background: #dff6ed; color: #17213a; border: 2px solid #17213a; box-shadow: 3px 3px 0 #17213a; transform: rotate(2deg); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.hybrid-portrait-note { position: absolute; bottom: -4%; left: 32%; right: 0; font-size: 13px; color: #46516a; margin: 0; }
.concept-b .b-faq { background: #fff; }
@media(max-width: 1100px) { .concept-b .c-about-grid { gap: 38px; }.hybrid-portrait-label { font-size: 11px; padding: 6px 8px; }.hybrid-portrait-note { font-size: 12px; bottom: -9%; } }
@media(max-width: 767px) {
  .concept-b .c-about { padding-block: 50px; }
  .concept-b .c-about-grid { display: flex; flex-direction: column; gap: 48px; align-items: stretch; }
  .hybrid-portrait-scene { order: -1; width: min(80%, 300px); align-self: center; }
  .hybrid-portrait-label { font-size: 12px; }
  .hybrid-portrait-note { bottom: -6%; }
  .concept-b .c-about-copy .c-about-lede { font-size: 23px !important; }
  .lean-hero-copy > .eyebrow { font-size: 11px; }
  .lean-hero-copy h1 { line-height: .97; }
}

/* Keep the customer-story introduction in one natural reading column. */
.concept-b .b-connected .b-section-intro { display: block; }
.concept-b .b-connected .b-section-intro > p {
  max-width: 660px;
  margin: 22px 0 0;
}

/* Introduce the examples with the same benefit-first reading flow. */
.concept-b .b-examples .b-section-intro { display: block; }
.concept-b .b-examples .b-section-intro h2 { max-width: 760px; text-wrap: balance; }
.concept-b .b-examples .b-section-intro > p {
  max-width: 660px;
  margin: 22px 0 0;
  font-size: 18px;
}
@media (max-width: 767px) {
  .concept-b .b-examples .b-section-intro > p { font-size: 17px; }
}

/* Make the services easier to scan and give the working example more weight. */
.concept-b .service-outcome {
  margin: 0 0 5px;
  color: #3549cf;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
}
.concept-b .b-service-row h3 { margin-bottom: 8px; }
.concept-b .lean-email-proof {
  grid-template-columns: 154px 1fr;
  gap: 22px;
  padding: 22px;
  margin: 12px 0 16px;
  background: #f4f7fd;
  border: 1px solid #cbd5ee;
  border-radius: 7px;
  box-shadow: 3px 3px 0 #dfe4f3;
}
.concept-b .lean-email-proof img {
  width: 154px;
  height: 112px;
  border: 1px solid #17213a;
  border-radius: 4px;
}
.concept-b .lean-email-proof-copy { min-width: 0; }
.concept-b .lean-email-proof-copy .proof-label {
  display: inline-block;
  padding: 3px 9px;
  margin: 0 0 8px;
  color: #17213a;
  background: #dff6ed;
  border-radius: 999px;
  font-size: 12px;
}
.concept-b .lean-email-proof-copy strong {
  font-size: 24px;
  line-height: 1.35;
}
.concept-b .lean-email-proof-copy > p:not(.proof-label) {
  margin: 5px 0 9px;
  font-size: 14px;
}
.concept-b .lean-email-proof-copy a { font-size: 15px; }
@media (max-width: 767px) {
  .concept-b .lean-email-proof-copy strong { font-size: 20px; }
  .concept-b .lean-email-proof {
    grid-template-columns: 100px 1fr;
    gap: 14px;
    padding: 16px;
  }
  .concept-b .lean-email-proof img { width: 100px; height: 92px; }
}
@media (max-width: 420px) {
  .concept-b .lean-email-proof { grid-template-columns: 1fr; }
  .concept-b .lean-email-proof img { width: 100%; height: 150px; }
}

/* Use the full section width: concise introduction, then balanced service cards. */
@media (min-width: 901px) {
  .concept-b .b-services-grid { display: block; }
  .concept-b .b-services-grid > div:first-child {
    display: grid;
    grid-template-columns: minmax(300px, .75fr) minmax(420px, 1.25fr);
    column-gap: 88px;
    align-items: start;
    padding-bottom: 38px;
  }
  .concept-b .b-services-grid > div:first-child h2 {
    grid-column: 1;
    grid-row: 1 / span 3;
    margin: 0;
  }
  .concept-b .b-services-grid > div:first-child > p {
    grid-column: 2;
    max-width: 650px;
  }
  .concept-b .b-services-grid > div:first-child .c-capabilities {
    margin: 2px 0 8px;
    font-size: 21px;
  }
  .concept-b .b-services-grid > div:first-child .b-caption { margin: 4px 0 0; }
  .concept-b .b-service-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
  .concept-b .b-service-row,
  .concept-b .b-service-row:first-child {
    min-height: 245px;
    padding: 26px;
    background: #fff;
    border: 1px solid #cdd3e3;
    border-radius: 7px;
    box-shadow: 3px 3px 0 #e3e7f2;
  }
  .concept-b .b-service-row > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .concept-b .b-service-row .c-service-examples { margin-top: auto; padding-top: 14px; }
  .concept-b .b-service-row > span { padding-left: 18px; }
  .concept-b .lean-email-proof {
    grid-template-columns: 175px 1fr;
    min-height: 245px;
    padding: 26px;
    margin: 0;
  }
  .concept-b .lean-email-proof img { width: 175px; height: 142px; }
  .concept-b .b-support {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    padding: 4px 2px 0;
  }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .concept-b .b-services-grid > div:first-child {
    grid-template-columns: minmax(260px, .8fr) minmax(360px, 1.2fr);
    column-gap: 46px;
  }
  .concept-b .lean-email-proof { grid-template-columns: 130px 1fr; }
  .concept-b .lean-email-proof img { width: 130px; height: 118px; }
}

/* A small readability lift for supporting copy; heading scale stays unchanged. */
.concept-b { font-size: 18px; }
.concept-b .b-section-label,
.concept-b .b-section-label > span:last-child { font-size: 14px; }
.concept-b .b-offer-grid > div > p:not(.eyebrow),
.concept-b .b-section-intro > p,
.concept-b .launch-demo > p:not(.demo-disclosure):not(.story-demo-type),
.concept-b .b-services-grid > div > p,
.concept-b .b-service-row p,
.concept-b .c-about-copy p:not(.eyebrow),
.concept-b .faq-list p { font-size: 17px; }
.concept-b .story-start p,
.concept-b .story-outcome,
.concept-b .b-faq-grid .c-about-process p { font-size: 16px; }
.concept-b .b-scope li p,
.concept-b .b-scope .b-scope-note,
.concept-b .c-scope-details p,
.concept-b .c-scope-details li,
.concept-b .b-service-row .c-service-examples,
.concept-b .b-support,
.concept-b .b-inbox-stage > .b-caption,
.concept-b .lean-email-proof-copy > p:not(.proof-label) { font-size: 15px; }
.concept-b .service-outcome,
.concept-b .story-step,
.concept-b .story-fiction { font-size: 14px; }
.concept-b .field label,
.concept-b .field-hint,
.concept-b .form-reassurance,
.concept-b .form-privacy { font-size: 15px; }

/* Keep the three inquiry steps on one visual level: labels first, cards second. */
.concept-b .inquiry-email-example {
  position: relative;
  margin-top: 48px;
}
.concept-b .inquiry-email-example > .story-step {
  position: absolute;
  top: -48px;
  left: 0;
  margin: 0;
}

/* Sticky navigation should not cover anchored section headings. */
#website-launch,
#examples-title,
#connected,
#services,
#about,
#process,
#inquiry { scroll-margin-top: 112px; }
@media (max-width: 767px) {
  .concept-b .primary-nav {
    position: fixed;
    top: 73px;
    z-index: 69;
    width: 100%;
  }
  #website-launch,
  #examples-title,
  #connected,
  #services,
  #about,
  #process,
  #inquiry { scroll-margin-top: 88px; }
  .concept-b .inquiry-email-example { margin-top: 44px; }
  .concept-b .inquiry-email-example > .story-step { top: -44px; }
  .concept-b .b-email-caption { padding: 24px 0 22px; }
  .concept-b .b-email-caption p { font-size: 16px; }
  .concept-b .b-email-caption strong { font-size: 25px; }
}

/* Present additional services as one connected, consistent set. */
.concept-b .b-services-grid { display: block; }
.concept-b .b-services-intro {
  display: grid;
  grid-template-columns: minmax(280px, .75fr) minmax(420px, 1.25fr);
  gap: 72px;
  align-items: start;
  padding-bottom: 38px;
}
.concept-b .b-services-grid > div.b-services-intro:first-child h2 {
  grid-column: auto;
  grid-row: auto;
  margin: 0;
}
.concept-b .b-services-intro > div { max-width: 670px; }
.concept-b .b-services-intro .c-capabilities {
  margin: 2px 0 10px;
  color: #17213a;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
}
.concept-b .b-services-intro p { margin-top: 0; }
.concept-b .b-services-intro .b-caption { margin-bottom: 0; }
.concept-b .b-service-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid #cdd3e3;
}
.concept-b .b-service-row,
.concept-b .b-service-row:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 48px;
  min-height: 0;
  padding: 30px 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #cdd3e3;
  border-radius: 0;
  box-shadow: none;
}
.concept-b .b-service-copy { min-width: 0; }
.concept-b .b-service-row h3 {
  margin: 0 0 9px;
  color: #17213a;
  font-size: 26px;
}
.concept-b .b-service-row p { max-width: 760px; }
.concept-b .b-service-row .c-service-note {
  margin-top: 11px;
  color: #46516a;
  font-size: 15px;
  font-style: italic;
}
.concept-b .b-service-row .c-service-examples {
  margin-top: 12px;
  padding-top: 0;
  color: #53666c;
}
.concept-b .c-service-examples strong { color: #17213a; font-weight: 500; }
.concept-b .b-service-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  text-align: right;
}
.concept-b .b-service-action > span { color: #46516a; font-size: 14px; }
.concept-b .b-service-action a {
  color: #3549cf;
  font-size: 16px;
  font-weight: 500;
  text-underline-offset: 4px;
}
.concept-b .b-service-action a:hover { color: #17213a; }
.concept-b .b-services-grid > .lean-email-proof {
  grid-template-columns: 180px minmax(0, 1fr);
  max-width: 900px;
  min-height: 0;
  margin: 38px auto 0;
  padding: 26px;
}
.concept-b .b-services-grid > .lean-email-proof img {
  width: 180px;
  height: 126px;
}
@media (max-width: 900px) {
  .concept-b .b-services-intro {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 30px;
  }
  .concept-b .b-services-intro > div { max-width: 680px; }
}
@media (max-width: 767px) {
  .concept-b .b-services-intro .c-capabilities { font-size: 20px; }
  .concept-b .b-service-row,
  .concept-b .b-service-row:first-child {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 26px 0;
  }
  .concept-b .b-service-row h3 { font-size: 23px; }
  .concept-b .b-service-action {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }
  .concept-b .b-services-grid > .lean-email-proof {
    grid-template-columns: 100px minmax(0, 1fr);
    margin-top: 28px;
  }
  .concept-b .b-services-grid > .lean-email-proof img { width: 100px; height: 92px; }
}
@media (max-width: 420px) {
  .concept-b .b-services-grid > .lean-email-proof { grid-template-columns: 1fr; }
  .concept-b .b-services-grid > .lean-email-proof img { width: 100%; height: 150px; }
}

/* A short hero entrance sequence that preserves the established layout. */
@keyframes ec-hero-copy-in {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes ec-hero-frame-in {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes ec-hero-phone-in {
  from { opacity: 0; translate: 0 24px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes ec-hero-mail-in {
  from { opacity: 0; translate: 0 20px; }
  to { opacity: 1; translate: 0 0; }
}
.concept-b .lean-hero-copy > .eyebrow,
.concept-b .lean-hero-copy > h1,
.concept-b .lean-hero-copy > .lean-hero-lede,
.concept-b .lean-hero-copy > .lean-hero-actions {
  animation: ec-hero-copy-in 560ms cubic-bezier(.22, .7, .25, 1) both;
}
.concept-b .lean-hero-copy > h1 { animation-delay: 90ms; }
.concept-b .lean-hero-copy > .lean-hero-lede { animation-delay: 180ms; }
.concept-b .lean-hero-copy > .lean-hero-actions { animation-delay: 270ms; }
.concept-b .lean-visual {
  animation: ec-hero-frame-in 620ms cubic-bezier(.22, .7, .25, 1) 120ms both;
}
.concept-b .lean-phone {
  animation: ec-hero-phone-in 680ms cubic-bezier(.18, .78, .24, 1) 250ms both;
}
.concept-b .lean-mail {
  transform-origin: 50% 100%;
  animation: ec-hero-mail-in 700ms cubic-bezier(.22, .61, .36, 1) 600ms both;
}
@media (prefers-reduced-motion: reduce) {
  .concept-b .lean-hero-copy > .eyebrow,
  .concept-b .lean-hero-copy > h1,
  .concept-b .lean-hero-copy > .lean-hero-lede,
  .concept-b .lean-hero-copy > .lean-hero-actions,
  .concept-b .lean-visual,
  .concept-b .lean-phone,
  .concept-b .lean-mail {
    animation: none;
    opacity: 1;
    translate: none;
    scale: 1;
  }
}