/* Sites-specific illustration, formats and marketing connection. */
.web-scene { margin: 0; min-width: 0; }
.web-stage { position: relative; height: 486px; display: grid; align-items: center; isolation: isolate; }
.web-stage::before { content: ''; position: absolute; z-index: -1; width: 95%; height: 88%; top: 6%; left: 4%; border-radius: 50%; background: conic-gradient(from 35deg, #D6B16C30, #6772FF28, #54D9C72B, #D6B16C30); filter: blur(55px); }
.web-orbit { position: absolute; width: 94%; height: 73%; border: 1px solid #8A5A2224; border-radius: 50%; transform: rotate(-25deg); }
.web-browser { position: relative; width: 94%; height: 354px; background: #FCFCF9; border: 1px solid #FFFFFF; border-radius: 18px; box-shadow: 0 26px 70px #33344420, 8px 8px 0 #D6B16C30; transform: rotate(-4deg); overflow: hidden; animation: web-float 9s ease-in-out infinite; }
.web-toolbar { height: 35px; background: #EBEBE7; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 4px; padding: 0 13px; }
.web-toolbar > i { width: 5px; height: 5px; border-radius: 50%; background: #9B9B93; }
.web-toolbar > span { display: block; width: 48%; border: 1px solid #00000009; background: #FFFFFF7A; height: 17px; border-radius: 4px; margin-inline: auto; }
.web-screen { padding: 20px 24px; }
.web-screen-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.web-screen-nav > img { width: 21px; height: 21px; }
.web-screen-nav > span { display: flex; gap: 8px; }
.web-screen-nav i { width: 23px; height: 3px; background: #898984; }
.web-screen-hero { display: grid; grid-template-columns: 1.12fr 1fr; gap: 18px; }
.web-screen-copy > small { font: 7px var(--mono); letter-spacing: .05em; color: var(--bronze); }
.web-screen-copy > strong { display: block; font: 550 clamp(22px, 2.4vw, 31px)/1.08 var(--display); letter-spacing: -.065em; margin-block: 12px; }
.web-screen-copy > span:not(.web-demo-button) { display: block; width: 90%; height: 3px; margin-top: 7px; background: #C0C0B8; }
.web-screen-copy > span:nth-last-child(2) { width: 70%; }
.web-demo-button { margin-top: 17px; display: inline-flex; gap: 18px; align-items: center; background: var(--ink); color: var(--pearl); padding: 9px 11px; border-radius: 20px; font-size: 8px; }
.web-screen-art { position: relative; display: grid; place-items: center; border-radius: 70px 70px 16px 16px; background: linear-gradient(140deg, #DDDCEB, #D4E9E4 65%, #E5D2AD); overflow: hidden; }
.web-screen-art::before, .web-screen-art::after { content: ''; position: absolute; width: 96px; height: 160px; border: 18px solid #F5F5F277; border-radius: 60px; transform: rotate(30deg); box-shadow: 0 10px 24px #0000000A; }
.web-screen-art::after { transform: rotate(-35deg); width: 80px; height: 120px; border-color: #8A5A2250; }
.web-screen-bottom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 27px; padding-top: 17px; border-top: 1px solid var(--line); }
.web-screen-bottom > span { display: flex; align-items: center; gap: 6px; font-size: 7px; }
.web-screen-bottom i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.web-phone { position: absolute; z-index: 2; right: 0; bottom: 13px; width: 146px; height: 287px; padding: 7px; background: #252528; border: 1px solid #FFFFFF8C; border-radius: 24px; transform: rotate(7deg); box-shadow: 0 20px 40px #00000025; }
.web-phone-screen { height: 100%; border-radius: 18px; background: var(--pearl); padding: 13px; overflow: hidden; }
.web-phone-screen::before { content: ''; display: block; width: 41px; height: 5px; background: #252528; border-radius: 5px; margin: -7px auto 14px; }
.web-phone-screen > img { width: 15px; height: 15px; }
.web-phone-screen > strong { display: block; font: 550 17px/1.1 var(--display); letter-spacing: -.06em; margin-top: 14px; }
.web-phone-lines { margin-top: 10px; width: 80%; height: 15px; background: repeating-linear-gradient(to bottom, #BBBCB3 0 2px, transparent 2px 7px); }
.web-phone-art { height: 57px; border-radius: 20px 20px 8px 8px; margin-top: 12px; background: linear-gradient(130deg, #DDDCEB, #D4E9E4, #D6B16C90); }
.web-phone-screen > .web-demo-button { font-size: 7px; margin-top: 10px; padding: 8px; gap: 10px; }
.web-label { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; border: 1px solid #FFFFFFB0; background: #F5F5F2D9; backdrop-filter: blur(14px); border-radius: 100px; padding: 12px 17px; font-size: 10px; box-shadow: 0 10px 30px #0000000A; }
.web-label svg { width: 16px; height: 16px; color: var(--bronze); }
.web-label-top { top: 17px; left: 16px; }
.web-label-bottom { bottom: 16px; left: 12px; }
.web-scene > figcaption { text-align: right; font: 8px/1.5 var(--mono); letter-spacing: .08em; color: var(--service-muted); margin-top: 10px; }
@keyframes web-float { 50% { transform: rotate(-2deg) translateY(-7px); } }
.service-formats { position: relative; background: var(--ink); color: var(--pearl); overflow: clip; }
.service-formats::before { content: ''; pointer-events: none; position: absolute; inset: 0; background: radial-gradient(ellipse at 90% 80%, #6772FF12, transparent 55%); }
.service-formats .container { position: relative; }
.service-formats .eyebrow, .service-formats .serif-word { color: var(--gold); }
.service-formats .section-heading > p { color: #ADADB3; }
.format-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.format-card { border: 1px solid #FFFFFF26; border-radius: 22px; padding: 29px; background: #FFFFFF03; transition: border-color 240ms ease, background-color 240ms ease; }
.format-card > .small-label { color: #C6AC80; font-size: 10px; }
.format-art { height: 118px; margin-block: 25px 32px; position: relative; display: grid; place-items: center; border-radius: 12px; background-image: linear-gradient(#FFFFFF05 1px, transparent 1px), linear-gradient(90deg, #FFFFFF05 1px, transparent 1px); background-size: 20px 20px; }
.format-sheet { width: 102px; height: 86px; border: 1px solid #D6B16C70; border-radius: 6px; padding: 10px; background: #232325; display: flex; flex-direction: column; gap: 7px; box-shadow: 0 8px 20px #0003; }
.format-sheet > i { height: 5px; background: #D6B16C80; width: 40%; }
.format-sheet > b { height: 27px; background: #D6B16C20; border-radius: 2px; }
.format-sheet > span { display: flex; gap: 5px; }
.format-sheet em { display: block; height: 20px; background: #FFFFFF12; flex: 1; }
.format-institutional::after { content: ''; position: absolute; bottom: 8px; right: 18%; width: 35px; height: 55px; border: 1px solid #D6B16C80; border-radius: 5px; background: #232325; box-shadow: inset 0 10px #D6B16C20; }
.format-landing .format-sheet > b { height: 37px; background: #54D9C726; }
.format-landing .format-sheet > span { width: 70%; height: 10px; margin-inline: auto; background: var(--gold); border-radius: 10px; }
.format-landing .format-sheet > span > em { display: none; }
.format-redesign { display: flex; justify-content: center; gap: 17px; }
.format-redesign .format-sheet { width: 78px; height: 73px; }
.format-redesign .format-sheet:first-child { opacity: .45; transform: rotate(-7deg); }
.format-redesign .format-sheet:last-child { transform: rotate(5deg); }
.format-redesign > svg { color: var(--gold); width: 16px; }
.format-card h3 { font-size: 28px; line-height: 1.2; margin-bottom: 17px; }
.format-card > p { font-size: 13px; line-height: 1.85; color: #B8B8BE; }
.format-fit { margin-top: 24px; padding-top: 21px; border-top: 1px solid #FFFFFF20; }
.format-fit > span { display: block; font: 9px var(--mono); letter-spacing: .06em; color: var(--gold); margin-bottom: 10px; }
.format-fit p { font-size: 12px; line-height: 1.8; color: #D2D2D7; }
.format-note { margin-top: 27px; font-size: 12px; color: #ADADB3; max-width: 710px; line-height: 1.8; }
@media (hover: hover) and (pointer: fine) {
.format-card:hover { border-color: #D6B16C70; background-color: #D6B16C08; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
html:not(.motion-paused) .format-card:hover .format-institutional .format-sheet > b {
    animation: format-organize 900ms cubic-bezier(.22, 1, .36, 1);
  }
html:not(.motion-paused) .format-card:hover .format-institutional .format-sheet em {
    animation: format-organize 850ms cubic-bezier(.22, 1, .36, 1) backwards;
  }
html:not(.motion-paused) .format-card:hover .format-institutional .format-sheet em:nth-child(2) { animation-delay: 70ms; }
html:not(.motion-paused) .format-card:hover .format-institutional .format-sheet em:nth-child(3) { animation-delay: 140ms; }
.format-landing .format-sheet > b { position: relative; overflow: hidden; }
.format-landing .format-sheet > b::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent, #54D9C740, transparent);
    opacity: 0; pointer-events: none;
  }
html:not(.motion-paused) .format-card:hover .format-landing .format-sheet > b::after {
    animation: format-flow 1100ms ease;
  }
html:not(.motion-paused) .format-card:hover .format-landing .format-sheet > span {
    animation: format-cta 1100ms ease;
  }
html:not(.motion-paused) .format-card:hover .format-redesign .format-sheet:first-child {
    animation: format-before 1100ms ease;
  }
html:not(.motion-paused) .format-card:hover .format-redesign .format-sheet:last-child {
    animation: format-after 1100ms cubic-bezier(.22, 1, .36, 1);
  }
html:not(.motion-paused) .format-card:hover .format-redesign > svg {
    animation: format-direction 1100ms ease;
  }
}
@keyframes format-organize {
  0% { opacity: .35; transform: translateY(5px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes format-flow {
  0% { opacity: 0; transform: translateY(-100%); }
  30% { opacity: 1; }
  85%, 100% { opacity: 0; transform: translateY(100%); }
}
@keyframes format-cta {
  0%, 35%, 100% { box-shadow: 0 0 0 0 #D6B16C00; }
  65% { box-shadow: 0 0 0 3px #D6B16C20, 0 0 12px #D6B16C30; }
}
@keyframes format-before {
  0%, 100% { transform: rotate(-7deg); opacity: .45; }
  45% { transform: translateX(-3px) rotate(-9deg); opacity: .3; }
}
@keyframes format-after {
  0%, 100% { transform: rotate(5deg); }
  45% { transform: translateY(-3px) rotate(2deg); }
}
@keyframes format-direction {
  0%, 100% { transform: translateX(0); }
  45% { transform: translateX(3px); }
}
.service-connection-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: 90px; align-items: center; }
.service-connection h2 { margin-top: 25px; }
.service-connection-copy p { font-size: 15px; line-height: 1.9; color: var(--service-muted); margin-bottom: 18px; }
.service-connection-copy .text-link { margin-top: 4px; border-bottom: 1px solid #8A5A2240; }
.channel-path { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.channel-path span { padding: 8px 13px; border: 1px solid var(--line); border-radius: 30px; font-size: 11px; }
.channel-path span:last-child { color: var(--bronze); background: #D6B16C12; }
@media (max-width: 1100px) {
.web-stage { height: 435px; }
.web-browser { height: 328px; }
.web-screen { padding: 18px; }
.web-screen-copy > strong { font-size: 24px; }
.web-screen-bottom { gap: 5px; }
.web-phone { width: 128px; height: 261px; }
.web-phone-screen { padding-inline: 10px; }
.web-phone-screen > strong { font-size: 15px; }
.service-connection-layout { gap: 50px; }
.format-card { padding: 24px; }
.format-card h3 { font-size: 25px; }
}
@media (max-width: 900px) {
.web-scene { width: min(510px, 100%); margin: 0 auto; }
.web-stage { height: 440px; }
.web-screen-copy > strong { font-size: 29px; }
.format-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.format-card { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 0 26px; padding: 28px; }
.format-card > .small-label { grid-column: 1; }
.format-art { grid-column: 2; grid-row: 1 / span 4; margin-block: 0; height: 100%; min-height: 160px; }
.format-card h3 { grid-column: 1; margin-top: 16px; }
.format-card > p { grid-column: 1; }
.format-fit { grid-column: 1 / -1; }
.service-connection-layout { grid-template-columns: minmax(0, 1fr); gap: 35px; }
}
@media (max-width: 580px) {
.web-stage { height: 340px; }
.web-browser { width: 94%; height: 260px; border-radius: 13px; }
.web-toolbar { height: 27px; padding-inline: 10px; }
.web-screen { padding: 15px; }
.web-screen-nav { margin-bottom: 17px; }
.web-screen-nav > img { width: 17px; height: 17px; }
.web-screen-nav i { width: 13px; }
.web-screen-hero { gap: 10px; }
.web-screen-copy > strong { font-size: 22px; margin-block: 10px; }
.web-screen-copy > small { font-size: 5px; }
.web-screen-copy > span:not(.web-demo-button) { height: 2px; margin-top: 5px; }
.web-demo-button { margin-top: 12px; font-size: 6px; padding: 7px; gap: 9px; }
.web-screen-art::before { width: 57px; height: 110px; border-width: 13px; }
.web-screen-art::after { width: 49px; height: 83px; border-width: 11px; }
.web-screen-bottom { margin-top: 19px; padding-top: 13px; gap: 5px; }
.web-screen-bottom > span { font-size: 5px; gap: 4px; }
.web-screen-bottom i { width: 4px; height: 4px; }
.web-phone { width: 105px; height: 214px; border-radius: 20px; padding: 5px; bottom: 2px; right: 2px; }
.web-phone-screen { padding: 11px 9px; border-radius: 15px; }
.web-phone-screen::before { width: 31px; height: 4px; margin-bottom: 11px; }
.web-phone-screen > strong { font-size: 12px; margin-top: 12px; }
.web-phone-screen > img { width: 12px; height: 12px; }
.web-phone-lines { margin-top: 8px; height: 10px; }
.web-phone-art { height: 37px; margin-top: 9px; }
.web-phone-screen > .web-demo-button { font-size: 5px; padding: 6px; margin-top: 8px; }
.web-label { padding: 9px 12px; font-size: 8px; gap: 7px; }
.web-label svg { width: 13px; height: 13px; }
.web-label-top { top: 2px; left: 8px; }
.web-label-bottom { bottom: 7px; left: 0; }
.web-scene > figcaption { margin-top: 17px; font-size: 7px; }
.format-card { display: block; padding: 26px; }
.format-art { margin-block: 22px; min-height: 0; height: 110px; }
.format-card h3 { font-size: 27px; margin-top: 0; }
.format-card > p, .format-fit p { font-size: 14px; }
.format-fit { margin-top: 20px; padding-top: 18px; }
.format-note { font-size: 12px; }
.service-connection-copy p { font-size: 14px; }
.channel-path { gap: 8px; margin-top: 23px; }
.channel-path span { font-size: 10px; padding: 7px 10px; }
}
@media (prefers-reduced-motion: reduce) {
.web-browser { animation: none; }
}