/* Work index (wk2-*). Paste into /work → Page settings → Custom code → Head.
   Full-fidelity layer over the native basic styles. Fonts inherit the site. */
.wk2-container { max-width: 1240px; margin: 0 auto; padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); }
@media (max-width: 767px) { .wk2-container { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } }

/* Head */
.wk2-head { text-align: center; padding-block: clamp(48px, 7vw, 104px) clamp(28px, 3vw, 40px); }
.wk2-head .wk2-container { display: grid; justify-items: center; gap: clamp(18px, 2vw, 24px); }
.wk2-eyebrow { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #0B0B0C; }
.wk2-title { margin: 0; font-size: clamp(42px, 6.3vw, 84px); font-weight: 500; letter-spacing: -0.045em; line-height: 1; max-width: 20ch; text-wrap: balance; }
/* Desktop: 2 lines, broken after "AI," by the <br> in the H1. Below 900px: 3 balanced lines. */
@media (min-width: 900px) { .wk2-title { max-width: none; } }
@media (max-width: 899px) { .wk2-title br { display: none; } }
/* Type-out (js/work-typeout.js). Hidden until the script takes over; the animation is a
   safety net that shows the heading anyway if the script never runs. */
@keyframes wk2-tw-safe { to { opacity: 1; } }
@keyframes wk2-tw-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .wk2-title:not([data-typed]) { opacity: 0; animation: wk2-tw-safe 0s 2.5s forwards; }
}
.wk2-tw-word { display: inline !important; white-space: nowrap; }
.wk2-tw-char { display: inline !important; }
.wk2-title.is-typing .wk2-tw-char:not(.is-on) { visibility: hidden; }
.wk2-tw-caret { display: inline-block; position: relative; width: 0; height: .78em; vertical-align: -0.04em; }
.wk2-tw-caret::after { content: ""; position: absolute; left: .04em; top: 0; width: .09em; height: 100%; background: #1257E8; }
.wk2-title.is-typed .wk2-tw-caret::after { animation: wk2-tw-blink 1s steps(1) infinite; }
.wk2-intro { margin: 0; color: #6A6A72; font-size: clamp(15.5px, 1.3vw, 18px); line-height: 1.5; max-width: 60ch; text-wrap: pretty; }
.wk2-filters-wrap { width: 100%; }
.wk2-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.wk2-filter { font: inherit; color: #0B0B0C; padding: 9px 18px; border-radius: 999px; border: 1px solid #E2E2E6; background: #fff; font-size: 14.5px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.wk2-filter:hover { border-color: #0B0B0C; }
.wk2-filter[aria-pressed="true"] { background: #0B0B0C; color: #fff; border-color: #0B0B0C; }
.wk2-filter:focus-visible, .wk2-card:focus-visible, .wk2-cta-card:focus-visible { outline: 2px solid #1257E8; outline-offset: 3px; }

/* Grid: collection wrappers are flattened so CMS items and the static CTA card share one grid */
.wk2-list-title { display: inline-block; margin: 0 0 18px; font-size: 13px; font-weight: 500; letter-spacing: 0; padding-bottom: 8px; border-bottom: 2px solid #0B0B0C; }
.wk2-grid { --gap: clamp(14px, 1.4vw, 18px); display: grid; gap: clamp(28px, 3vw, 40px) var(--gap); grid-template-columns: 1fr; container-type: inline-size; padding-bottom: clamp(72px, 9vw, 130px); }
.wk2-grid .wk2-cl, .wk2-grid .wk2-cl-items, .wk2-grid .wk2-empty-wrap { display: contents; }
/* Webflow gives embeds a clearfix (::before/::after display: table). Under display: contents
   those pseudo-elements become grid items and take the first cell. */
.wk2-grid .wk2-empty-wrap::before, .wk2-grid .wk2-empty-wrap::after,
.wk2-grid .wk2-cl::before, .wk2-grid .wk2-cl::after,
.wk2-grid .wk2-cl-items::before, .wk2-grid .wk2-cl-items::after { content: none !important; display: none !important; }
@media (min-width: 640px) { .wk2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) {
  .wk2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wk2-item:has(.wk2-flag-wide:not(.w-condition-invisible)) { grid-column: span 2; }
  .wk2-grid.is-filtered .wk2-item { grid-column: auto; }
}
.wk2-item { min-width: 0; }
.wk2-item[hidden] { display: none !important; }
.wk2-flag-wide { display: none !important; }

/* Card */
.wk2-card { display: grid; gap: 14px; align-content: start; color: inherit; text-decoration: none; min-width: 0; }
.wk2-card:hover { text-decoration: none; }
.wk2-media { position: relative; overflow: hidden; border-radius: 14px; background: #F3F3F5; aspect-ratio: 4 / 5.6; max-width: 100%; isolation: isolate; }
@media (min-width: 992px) { .wk2-media { aspect-ratio: auto; height: calc((100cqw - 2 * var(--gap)) / 3 * 1.4); } }
.wk2-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 26%); pointer-events: none; }
.wk2-img, .wk2-video, .wk2-video-wrap { position: absolute; inset: 0; width: 100%; height: 100%; }
.wk2-img, .wk2-video { object-fit: cover; transition: transform 1.1s cubic-bezier(.16,.84,.28,1), opacity .6s ease; }
.wk2-img-hover { opacity: 0; }
.wk2-card:hover .wk2-img-hover { opacity: 1; }
.wk2-card:hover .wk2-img, .wk2-card:hover .wk2-video { transform: scale(1.04); }
.wk2-typo { position: absolute; inset: 0; background: #041C2C; display: grid; align-content: center; padding: clamp(16px, 1.8vw, 24px); }
.wk2-typo::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(224,214,196,.07) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, rgba(224,214,196,.07) 0 1px, transparent 1px 32px); transition: transform 1.2s cubic-bezier(.16,.84,.28,1); }
.wk2-card:hover .wk2-typo::before { transform: scale(1.08); }
.wk2-typo-name { position: relative; font-size: clamp(44px, 4.6vw, 64px); font-weight: 500; letter-spacing: -0.045em; line-height: .95; color: #E0D6C4; text-wrap: balance; }
.wk2-tags { position: absolute; left: clamp(16px, 1.8vw, 24px); right: clamp(16px, 1.8vw, 24px); bottom: clamp(16px, 1.8vw, 24px); z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.wk2-tag { background: #fff; color: #0B0B0C; font-size: 12.5px; padding: 5px 13px; border-radius: 999px; }
.wk2-body { display: grid; gap: 10px; }
.wk2-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #6A6A72; }
.wk2-card-title { margin: 0; font-size: clamp(20px, 1.7vw, 23px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; color: #0B0B0C; }
.wk2-line { margin: 0; font-size: 15.5px; line-height: 1.45; color: #35353C; max-width: 46ch; }
.wk2-deliv { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.wk2-chip { font-size: 12.5px; padding: 5px 11px; border-radius: 999px; background: #F3F3F5; color: #35353C; }
.wk2-result { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: #0B0B0C; margin-top: 2px; }
.wk2-result::before { content: ""; width: 16px; height: 2px; background: #1257E8; flex: 0 0 auto; }

/* Static CTA card */
.wk2-cta-card { display: grid; align-content: space-between; gap: 28px; min-height: 360px; padding: clamp(24px, 2.6vw, 34px); border-radius: 14px; background: #1257E8; color: #fff; text-decoration: none; }
.wk2-cta-card:hover { text-decoration: none; }
@media (min-width: 992px) { .wk2-cta-card { min-height: 0; } }
.wk2-grid.is-filtered .wk2-cta-card { display: none; }
.wk2-cta-say { margin: 0; font-size: clamp(22px, 2vw, 27px); line-height: 1.22; letter-spacing: -0.02em; font-weight: 500; }
.wk2-cta-link { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #0B0B0C; padding: 12px 20px; border-radius: 999px; font-size: 14.5px; font-weight: 500; width: max-content; transition: gap .3s; }
.wk2-cta-card:hover .wk2-cta-link { gap: 16px; }
.wk2-empty { grid-column: 1 / -1; border: 1px dashed #D2D2D8; border-radius: 14px; padding: 36px; text-align: center; color: #35353C; }
.wk2-empty[hidden] { display: none; }
.wk2-empty button { font: inherit; background: none; border: 0; padding: 0; color: #1257E8; text-decoration: underline; cursor: pointer; }

/* FAQ */
.wk2-faq { border-top: 1px solid #ECECEE; }
.wk2-faq-grid { display: grid; gap: clamp(24px, 4vw, 64px); padding-block: clamp(56px, 7vw, 96px); }
@media (min-width: 992px) { .wk2-faq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } }
.wk2-faq-title { margin: 0; font-size: clamp(28px, 3.4vw, 44px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; max-width: 14ch; }
.wk2-faq-list { border-top: 1px solid #E2E2E6; min-width: 0; }
.wk2-faq-list details { border-bottom: 1px solid #E2E2E6; }
.wk2-faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 20px 0; font-size: clamp(17px, 1.5vw, 19px); font-weight: 500; letter-spacing: -0.015em; }
.wk2-faq-list summary::-webkit-details-marker { display: none; }
.wk2-pm { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #E2E2E6; position: relative; transition: background .25s, border-color .25s; }
.wk2-pm::before, .wk2-pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; background: #0B0B0C; transform: translate(-50%, -50%); transition: transform .25s, background .25s; }
.wk2-pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.wk2-faq-list details[open] .wk2-pm { background: #0B0B0C; border-color: #0B0B0C; }
.wk2-faq-list details[open] .wk2-pm::before, .wk2-faq-list details[open] .wk2-pm::after { background: #fff; }
.wk2-faq-list details[open] .wk2-pm::after { transform: translate(-50%, -50%) rotate(0); }
.wk2-faq-list details p { margin: 0; padding: 0 44px 22px 0; color: #35353C; font-size: 16px; line-height: 1.6; max-width: 64ch; }

@media (prefers-reduced-motion: reduce) { .wk2-head *, .wk2-list *, .wk2-faq * { transition: none !important; animation: none !important; } }