/* One commercial story: offer, evidence, buying journey, project enquiry. */
:root { --sales-paper: #f0eee6; --sales-muted: #b3cbd2; --sales-line: #abcbd434; }
.sales-button, .sales-link { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 50px; font: 600 13px/1.4 Manrope, sans-serif; cursor: pointer; text-decoration: none; }
.sales-button { padding: 0 24px; border: 1px solid var(--sales-paper); border-radius: 7px; background: var(--sales-paper); color: #12323d; transition: background 180ms, color 180ms; }
.sales-button:hover { background: #c6e6e9; border-color: #c6e6e9; }
.sales-link { padding: 0; border: 0; background: transparent; color: #d4e7eb; text-underline-offset: 5px; }
.sales-link:hover { color: #fff; text-decoration: underline; }
:is(.sales-button,.sales-link):focus-visible { outline: 2px solid #c4f2f6; outline-offset: 5px; }
.sales-button .ui-icon, .sales-link .ui-icon { width: 18px; height: 18px; }
.desktop-nav .nav-project { display: inline-flex; align-items: center; gap: 14px; margin-left: 16px; padding-inline: 19px; border: 1px solid #c0dfe47a; border-radius: 7px; }
.nav-project .ui-icon { width: 16px; height: 16px; }
.reference-hero .code-fragment { display: none; }
.reference-hero .hero-media::before { content: ''; position: absolute; inset: 0; background: linear-gradient(#041c2940 10%,#041c2980 30%,transparent 66%); }
.sales-hero-copy { position: absolute; z-index: 4; top: 17%; left: 50%; width: min(760px,90%); transform: translateX(-50%); color: #f2f8f8; text-align: center; pointer-events: auto; }
.sales-hero-copy h1 { margin: 0; font: 550 clamp(42px,4.4vw,65px)/1.09 Manrope,sans-serif; letter-spacing: -.04em; color: #f2f8f8; text-transform: none; text-shadow: none; }
.sales-hero-copy h1 em { color: #c1e4e9; font-style: normal; font-weight: inherit; text-shadow: none; }
.sales-hero-copy > p { max-width: 480px; margin: 23px auto 27px; font-size: 15px; line-height: 1.7; color: #d2e5e9; }
.sales-hero-actions { display: flex; justify-content: center; align-items: center; gap: 30px; }
.portfolio-heading h2, #services h2, #contact h2 { letter-spacing: -.04em; }
.conversion-scene { position: relative; overflow: hidden; padding: 110px 0 100px; color: var(--sales-paper); background: #071e28; scroll-margin-top: 75px; }
.conversion-shell { display: grid; grid-template-columns: 43% minmax(0,57%); align-items: center; max-width: 1240px; }
.conversion-copy { position: relative; z-index: 2; }
.conversion-copy h2 { margin: 0; font: 550 clamp(38px,3.9vw,56px)/1.12 Manrope,sans-serif; letter-spacing: -.04em; }
.conversion-copy h2 em { color: #aacbd2; font-style: normal; }
.conversion-copy > p { max-width: 390px; margin: 27px 0 32px; font-size: 16px; line-height: 1.8; color: var(--sales-muted); }
.conversion-actions { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.conversion-actions .sales-link { font-size: 12px; }
.conversion-visual { position: relative; min-width: 0; margin: 0 -9% 0 -7%; }
.conversion-atmosphere { position: relative; width: 100%; aspect-ratio: 16 / 9; background: url('assets/images/studio-commerce-poster-v1.webp') center / contain no-repeat; overflow: hidden; -webkit-mask-image: linear-gradient(to right,transparent,#000 10%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right,transparent,#000 10%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent); mask-composite: intersect; }
.conversion-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.conversion-atmosphere.has-film { background-image: none; }
.conversion-atmosphere.has-film .conversion-film { opacity: 1; }
.conversion-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -6px 12% 0; min-height: 44px; color: #a5c0c9; font-size: 10px; }
.conversion-caption .portfolio-motion-toggle { position: static; flex-shrink: 0; font-size: 10px; }
.conversion-path { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 45px; list-style: none; padding: 0; margin: 70px 0 0; }
.conversion-path li { position: relative; display: flex; gap: 18px; border-top: 1px solid var(--sales-line); padding-top: 27px; }
.conversion-path li::before { position: absolute; content: ''; top: -1px; left: 0; width: 100%; height: 1px; background: #d1e8ea; opacity: 0; transition: opacity 260ms ease-out; }
.conversion-path .is-current::before { opacity: 1; }
.path-index { padding-top: 3px; font-size: 10px; font-variant-numeric: tabular-nums; color: #b5cdd4; }
.conversion-path h3 { margin: 0 0 13px; font: 550 20px/1.3 Manrope,sans-serif; letter-spacing: -.025em; }
.conversion-path p { margin: 0; max-width: 280px; font-size: 13px; line-height: 1.75; color: var(--sales-muted); }
#services { background: #0a242e; border-block: 1px solid #abcbd415; }
#services .services-intro h2 { margin-top: 0; }
#services .services-intro > p { max-width: 375px; color: var(--sales-muted); font-size: 16px; line-height: 1.8; }
#services .services-intro .sales-link { margin-top: 22px; }
#contact { padding-top: 110px; }
#contact .contact-shell { padding: 0; border: 0; border-radius: 0; background: transparent; gap: 90px; }
#contact h2 { margin-top: 0; }
#contact .contact-copy > p { max-width: 370px; }
#contact .form-hint { font-size: 12px; color: #afcbd3; }
::selection { background: #c3e6eb; color: #0a2530; }
@media (min-width: 701px) { .reference-hero { height: max(800px,100svh); } }
@media (max-width: 1050px) {
  .conversion-shell { grid-template-columns: 45% minmax(0,55%); }
  .conversion-copy h2 { font-size: 40px; }
  .conversion-visual { margin-right: -12%; }
  .conversion-path { gap: 28px; }
  .conversion-path li { gap: 12px; }
  .conversion-path h3 { font-size: 18px; }
  #contact .contact-shell { gap: 45px; }
}
@media (max-width: 760px) {
  .conversion-scene { padding: 62px 0 66px; }
  .conversion-shell { display: flex; flex-direction: column; align-items: stretch; }
  .conversion-copy { display: contents; }
  .conversion-copy h2 { order: 0; font-size: clamp(32px,8.3vw,46px); }
  .conversion-visual { order: 1; margin: 12px -20px 15px; }
  .conversion-atmosphere { aspect-ratio: 16 / 9; }
  .conversion-caption { margin: -10px 24px 0; }
  .conversion-copy > p { order: 2; margin: 0 0 24px; max-width: 520px; font-size: 15px; line-height: 1.75; }
  .conversion-actions { order: 3; gap: 10px 24px; }
  .conversion-path { order: 4; display: flex; flex-direction: column; gap: 24px; margin-top: 40px; }
  .conversion-path li { padding-top: 20px; gap: 21px; }
  .conversion-path h3 { font-size: 19px; margin-bottom: 8px; }
  .conversion-path p { max-width: 430px; }
  #services .services-intro > p { font-size: 15px; }
  #services .services-intro .sales-link { margin-top: 8px; }
  #contact { padding-top: 70px; }
  #contact .contact-shell { width: calc(100% - 48px); padding: 0; }
}
@media (max-width: 700px) {
  .sales-hero-copy { top: 132px; left: 24px; right: 24px; width: auto; transform: none; text-align: left; }
  .sales-hero-copy h1 { font-size: clamp(32px,8.5vw,48px); line-height: 1.13; }
  .sales-hero-copy > p { max-width: 385px; margin: 21px 0 23px; font-size: 14px; line-height: 1.75; }
  .sales-hero-actions { justify-content: flex-start; gap: 20px; flex-wrap: wrap; }
  .sales-hero-actions .sales-button { min-height: 46px; padding: 0 17px; gap: 12px; font-size: 12px; }
  .sales-hero-actions .sales-link { font-size: 11px; gap: 7px; }
  .sales-hero-actions .sales-link .ui-icon { width: 15px; }
  .reference-hero { height: calc(460px + 100vw); }
  .reference-hero .key-motion { bottom: 20%; }
  .reference-hero .hero-media::before { background: linear-gradient(#041c2940 10%,#041c2970 30%,transparent 68%); }
}
@media (max-width: 360px) {
  .sales-hero-copy { top: 118px; }
  .sales-hero-copy h1 { font-size: 30px; }
  .sales-hero-actions { gap: 6px 15px; }
  .sales-hero-actions .sales-link { min-height: 38px; }
  .reference-hero .key-motion { bottom: 14%; }
  .conversion-actions { align-items: stretch; flex-direction: column; }
  .conversion-actions .sales-link { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .sales-button, .conversion-path li::before { transition: none; }
  .conversion-film { display: none; }
}