/* MOKAF v3. Adaptasi komposisi Ailene, dengan identitas Anyam MOKAF. */
:root { --font: "Segoe UI", Arial, sans-serif; --container: 1240px; --section: clamp(4.5rem, 8vw, 7.5rem); --radius: 22px; --ink: #202331; --paper: #f2f3ff; --lift: 5px 6px 0 rgba(32,35,49,.16); }
body { font-size: 1rem; }
h1,h2,h3 { letter-spacing: -.045em; font-weight: 750; }
.h2 { font-size: clamp(2.2rem,4.2vw,3.7rem); max-width: 19ch; line-height: 1.08; }

/* Ilustrasi memiliki bidang sendiri; teks tidak diletakkan di atas gambar. */
.brand-illustration { margin: 2rem 0 0; overflow: hidden; background: #f2f3ff; border: 1.5px solid var(--line-strong); border-radius: 20px; box-shadow: var(--lift); }
.brand-illustration img { width: 100%; height: auto; }
.brand-illustration figcaption { padding: .85rem 1.1rem; background: var(--surface); color: var(--text-2); border-top: 1px solid var(--line); font-size: .8rem; line-height: 1.55; }
.svc-pin--illustrated { aspect-ratio: auto; display: block; padding-bottom: 1rem; border-radius: 20px; overflow: hidden; background: var(--surface); border: 1.5px solid var(--line-strong); box-shadow: var(--lift); }
.svc-pin--illustrated img { width: 100%; height: auto; background: #f2f3ff; }
.svc-pin__caption { color: var(--text-2); font-size: .85rem; line-height: 1.5; margin: 1rem 4rem 0 1rem; }
.svc-pin--illustrated .svc-pin__num { position: absolute; right: .8rem; bottom: 1rem; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--indigo); color: #fff; font-size: 1rem; letter-spacing: 0; }
/* Kontras teks: warna solid dan fase nonaktif tetap terbaca. */
html[data-theme="dark"] { --text-2: #c6c8de; }
.section--dark .eyebrow, .story__count, .story__day, .step__day, .footer h4 { color: #c4b5fd; }
.section--dark a:not(.btn) { color: #c4b5fd; }
.step { opacity: 1; }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--text-2); opacity: 1; }
::selection { background: #3730a3; color: #fff; }
.section { border-bottom: 1px solid var(--line); }
.header { transition: background .3s, box-shadow .3s; }
.header.is-scrolled { box-shadow: 0 4px 24px #15161f12; }
.brand svg,.brand__img { height: 48px; }
.nav__link { font-size: .84rem; font-weight: 650; padding-inline: .65rem; }
.btn { border: 2px solid var(--ink); min-height: 52px; box-shadow: 3px 4px 0 var(--ink); font-size: .93rem; transition: transform .22s var(--ease),box-shadow .22s var(--ease),background .22s; }
.btn:hover { transform: translate(-1px,-3px); box-shadow: 5px 7px 0 var(--ink); }
.btn:active { transform: translate(2px,3px); box-shadow: 0 0 0 var(--ink); }
.btn--primary::before { display: none; }
.btn--primary:hover { background: var(--indigo-deep); border-color: var(--ink); }
.btn--ghost { box-shadow: none; }
.nav__cta { min-height: 44px; box-shadow: none; }
.eyebrow { font-size: .73rem; letter-spacing: .11em; }
.eyebrow::before { border-radius: 50%; clip-path: none; width: 7px; height: 7px; }
.eyebrow.in::before,.eyebrow:hover::before { clip-path: none; }
.hero { background: #202331; color: #f2f3ff; padding-top: clamp(3.5rem,7vw,6rem); min-height: 0; }
.hero::before,.page-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(#a99bff0a 1px,transparent 1px),linear-gradient(90deg,#a99bff0a 1px,transparent 1px),linear-gradient(#a99bff08 1px,transparent 1px),linear-gradient(90deg,#a99bff08 1px,transparent 1px); background-size: 32px 32px,32px 32px,160px 160px,160px 160px; mask-image: linear-gradient(black,transparent); }
.hero::before { inset: -160px; animation: gridDrift 16s linear infinite; }
@keyframes gridDrift { to { transform: translate(160px,160px); } }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(220px circle at var(--mx,65%) var(--my,35%),#8b5cf619,transparent); opacity: var(--glow,0); transition: opacity .4s; }
.hero__grid { z-index: 1; }
.studio { translate: var(--dx,0px) var(--dy,0px); transition: translate .6s var(--ease-out); }
.fit .h2 em { font-style: normal; color: var(--accent-text); }
.fit .lead { margin-top: 1.5rem; }
.no-js .fit__tabs { display: none; }
.no-js .fit__panel[hidden] { display: block; margin-top: 1rem; }
.hero__grid { position: relative; grid-template-columns: 1.1fr 1fr; gap: 3.5rem; padding-bottom: 4.5rem; align-items: center; }
.hero .eyebrow { color: #c4b5fd; letter-spacing: .025em; text-transform: none; font-size: .8rem; }
.hero .eyebrow::after { content: ""; width: 35px; height: 2px; background: #a78bfa; }
.hero__title { font-size: clamp(2.8rem,5.3vw,4.65rem); max-width: 14ch; line-height: 1.08; }
.hero__title em { color: #fff; background: var(--indigo); border-radius: 7px; padding: .015em .12em .065em; box-decoration-break: clone; -webkit-box-decoration-break: clone; box-shadow: 3px 4px 0 #15161f; }
.hero__lead { color: #d0cfdf; font-size: 1.08rem; line-height: 1.75; max-width: 49ch; }
.hero__actions { gap: 1.2rem; margin-top: 1.8rem; align-items: center; }
.hero .btn--primary { background: #7c3aed; border-color: #15161f; color: #fff; box-shadow: 4px 5px 0 #15161f; }
.hero .btn--primary:hover { background: #6d28d9; }
.hero .btn--ghost { color: #f2f3ff; border: 0; border-radius: 0; padding: .5rem 0; min-height: 0; text-decoration: underline; text-decoration-color: #a78bfa; text-underline-offset: .55em; }
.hero__meta { display: grid; gap: .35rem; margin-top: 1.7rem; color: #bfbed1; font-size: .78rem; }
.hero__meta li::before { clip-path: none; border-radius: 50%; width: 5px; height: 5px; }
.hero__scroll { color: #b7b5cc; margin-top: 2rem; font-size: .65rem; }
.hero__scroll i { height: 24px; background: #c4b5fd66; }
.studio { position: relative; min-height: 470px; isolation: isolate; }
.studio__orbit { position: absolute; inset: 1rem -1rem; border: 1px dashed #a78bfa40; border-radius: 50%; transform: rotate(-20deg); }
.studio__note { position: absolute; right: 0; top: -45px; font: italic 1.15rem Georgia,serif; color: #c4b5fd; transform: rotate(-6deg); }
.studio__note::after { content: "↘"; display: block; text-align: center; font-size: 2.4rem; }
.desk-card { position: absolute; display: block; color: var(--ink); text-decoration: none; background: #fff; border: 2px solid #15161f; border-radius: 17px; box-shadow: 5px 7px 0 #15161f; padding: 1.25rem; transition: transform .35s var(--ease-out),box-shadow .35s; }
.desk-card:hover { z-index: 4; transform: translateY(-9px) rotate(0); box-shadow: 8px 12px 0 #15161f; }
.desk-card__top { display: flex; justify-content: space-between; align-items: center; font-size: .65rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; padding-bottom: .75rem; border-bottom: 1px solid #20233122; }
.desk-card__top span:last-child { font-size: 1.2rem; }
.desk-card h2 { font-size: 1.5rem; margin: 1rem 0 .5rem; }
.desk-card p { font-size: .76rem; color: #5b5f75; margin-bottom: .7rem; }
.desk-card--web { top: 16px; left: 0; width: 62%; transform: rotate(-5deg); z-index: 2; }
.mini-browser { border: 1.5px solid #202331; border-radius: 8px; overflow: hidden; margin-top: 1rem; }
.mini-browser__bar { padding: .2rem .5rem; background: #f2f3ff; border-bottom: 1px solid #202331; font-size: .65rem; letter-spacing: .18em; }
.mini-browser__body { padding: .8rem; display: grid; grid-template-columns: 1.2fr 1fr; gap: .6rem; align-items: center; }
.mini-browser__body b { font-size: .95rem; line-height: 1.2; }
.mini-browser__body i { display: block; width: 70%; height: 5px; background: #d9d5f5; margin-top: 7px; }
.mini-browser__body img { height: 62px; width: 100%; }
.mini-browser__btn { background: #3730a3; width: 48%; height: 13px; margin-top: 10px; border-radius: 3px; }
.desk-card--permit { width: 42%; top: 155px; right: 0; background: #e9e3ff; transform: rotate(7deg); z-index: 3; }
.check-line { display: flex; align-items: center; gap: .5rem; margin-top: .65rem; font-size: .7rem; }
.check-line::before { content: "✓"; color: #fff; background: #3730a3; border-radius: 50%; width: 19px; height: 19px; text-align: center; }
.desk-card--plan { width: 57%; bottom: 12px; left: 0; transform: rotate(-3deg); z-index: 3; }
.plan-track { display: flex; align-items: center; margin: 1rem 0; }
.plan-track span { border: 1.5px solid #3730a3; border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; font-size: .7rem; font-weight: 700; }
.plan-track span:first-child { background: #3730a3; color: #fff; }
.plan-track i { height: 1px; flex: 1; background: #a78bfa; }
.desk-tag { display: inline-flex; background: #202331; color: #fff; padding: .25rem .65rem; border-radius: 100px; font-size: .65rem; }
.marquee { margin-top: 0; background: #2b2d40; border-color: #f2f3ff16; transform: none; }
.marquee__track span { color: #d3d0e9; font-size: .84rem; padding-block: .9rem; font-weight: 500; }
.fit { background: var(--bg-2); }
.hand-note { font: italic 1.2rem/1.4 Georgia,serif; color: var(--accent-text); margin: 1.25rem 0; }
.fit .layout-split { align-items: center; }
.fit__tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.fit__tabs button { min-height: 44px; padding: .55rem .95rem; background: var(--surface); border: 1.5px solid var(--text); color: var(--text); border-radius: 100px; font-size: .8rem; font-weight: 650; cursor: pointer; transition: transform .2s,background .2s,color .2s; }
.fit__tabs button:hover { transform: translateY(-2px); }
.fit__tabs button[aria-selected="true"] { background: var(--accent); color: #fff; box-shadow: 2px 3px 0 var(--ink); }
.fit__panel { border: 2px solid var(--text); border-radius: 22px; background: var(--surface); box-shadow: var(--lift); overflow: hidden; }
.fit__panel[hidden] { display: none; }
.fit__panel.is-entering { animation: fitEnter .35s var(--ease-out); }
@keyframes fitEnter { from { opacity: .3; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fit__head { background: var(--accent); color: #fff; padding: 1rem 1.5rem; font-size: .9rem; display: flex; align-items: center; gap: .7rem; }
.fit__head::before { content: ""; border: 2px solid #fff; width: 17px; height: 17px; border-radius: 50%; background: #a78bfa; }
.fit__body { padding: 1.5rem; }
.fit__label { display: inline-block; font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); margin-bottom: .45rem; }
.fit__body p { font-size: .95rem; }
.fit__answer { padding: 1rem 1.15rem; background: var(--bg-2); border-left: 3px solid #8b5cf6; border-radius: 0 12px 12px 0; }
.fit__result { margin: 1.25rem 0 0; }
.fit__result a { font-size: .85rem; font-weight: 700; }
.name-card,.svc-card,.aside-card,.form,.mock,.stack__card { border: 1.5px solid var(--line-strong); box-shadow: var(--lift); }
.name-grid { gap: .75rem; }
.name-card { padding: 1.2rem; }
.name-card b { font-size: 1.4rem; }
.name-card span { font-size: .85rem; }
.svc-layout { grid-template-columns: 220px 1fr; }
.svc-layout:has(.svc-pin--illustrated) { grid-template-columns: 280px minmax(0,1fr); }
.svc-list { border: 0; gap: 1.1rem; }
.svc { background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 20px; padding: 1.8rem; box-shadow: var(--lift); grid-template-columns: 2rem 1fr 40px; transition: transform .3s,box-shadow .3s; }
.svc:hover { transform: translateY(-4px); box-shadow: 7px 9px 0 #3730a322; }
.svc::before { display: none; }
.svc__glyph { width: 38px; height: 38px; }
.svc__links { gap: .45rem; }
.svc__links a { display: inline-block; font-size: .74rem; border: 1px solid var(--line); border-radius: 100px; padding: .25rem .65rem; text-decoration: none; transition: background .2s,color .2s; }
.svc__links a:hover { background: var(--accent); color: #fff; }
.section--dark { background: #202331; }
.story__pin { border: 1.5px solid #f2f3ff33; border-radius: 24px; padding: 2rem; background-image: linear-gradient(#a78bfa0a 1px,transparent 1px),linear-gradient(90deg,#a78bfa0a 1px,transparent 1px); background-size: 24px 24px; }
.story__visual { width: min(100%,240px); margin-inline: auto; }
.step { border-radius: 18px; padding: 2rem; margin-bottom: 1.25rem; border: 1px solid #f2f3ff25; transition: opacity .45s,background .45s,border-color .45s; }
.step.is-active { background: #3730a333; border-color: #a78bfa; }
.stack { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.stack__card { position: relative; top: auto; grid-template-columns: 44px 1fr; padding: 2rem; animation: none; }
.stack__card p { font-size: .9rem; }
.stack__tile { width: 44px; height: 44px; }
.stack__idx { font-size: .65rem; }
.home-faq { max-width: 900px; margin-inline: auto; }
.home-faq .h2 { max-width: none; }
.faq details { background: var(--surface); padding: 1.25rem 1.5rem; margin-bottom: .75rem; border: 1.5px solid var(--line-strong); border-radius: 16px; }
.faq details:last-child { border-bottom: 1.5px solid var(--line-strong); }
.faq details[open] { box-shadow: var(--lift); }
.faq summary { font-size: 1rem; }
.faq p { font-size: .95rem; }
.page-hero { background: var(--bg-2); }
.page-hero > .container { position: relative; }
.chip { border: 1px solid var(--line-strong); border-radius: 100px; }
.svc-card:hover { box-shadow: 6px 8px 0 #3730a326; }
.contact { background: var(--bg-2); }
.giant { display: none; }
.below-fold { content-visibility: visible; }
html[data-theme="dark"] { --lift: 5px 6px 0 #0006; --accent-text: #b5a0ff; }
html[data-theme="dark"] .btn { border-color: #b9b5dc; }
html[data-theme="dark"] .btn--primary { box-shadow: 3px 4px 0 #000; }
@media (min-width:1101px) { .header__inner { gap: .5rem; } .header__right { gap: .35rem; } .nav { margin-right: .25rem; } .lang button { min-width: 30px; padding-inline: .3rem; } }
@media (max-width:1100px) { .hero__grid { gap: 2rem; } .hero__title { font-size: clamp(2.6rem,5.3vw,4.5rem); } .studio { min-height: 440px; } .nav:not(.is-open) { visibility: hidden; } .nav.is-open { visibility: visible; } }
@media (max-width:960px) { .hero__grid { grid-template-columns: 1fr; } .hero__title { max-width: 17ch; font-size: clamp(3rem,7vw,4.8rem); } .studio { width: min(100%,500px); margin: 1rem auto 0; min-height: 460px; } .hero__lead { max-width: 55ch; } .hero__meta { display: flex; } .svc-layout { grid-template-columns: 1fr; } .stack { grid-template-columns: 1fr; } }
@media (max-width:640px) { :root { --gutter: 1.2rem; } .brand svg,.brand__img { height: 38px; } .header__inner { gap: .3rem; } .header__right { gap: .3rem; } .lang { gap: 0; padding: 2px; } .lang button { min-width: 30px; font-size: .68rem; padding: 0 .25rem; } .theme,.nav-toggle { width: 38px; height: 38px; flex: none; } .hero { padding-top: 3rem; } .hero__title { font-size: clamp(2.65rem,10.8vw,3.7rem); max-width: 15ch; } .hero__lead { font-size: 1rem; } .hero__grid { padding-bottom: 2.5rem; } .hero__actions { gap: 1.2rem; } .hero__meta { display: grid; } .studio { min-height: 430px; } .studio__note { font-size: 1rem; right: 1rem; } .desk-card { padding: 1rem; } .desk-card--web { top: 18px; width: 68%; } .desk-card--permit { top: 160px; right: 0; width: 51%; } .desk-card--plan { bottom: 0; left: 0; width: 61%; } .desk-card h2 { font-size: 1.2rem; } .desk-card__top { font-size: .55rem; } .check-line { font-size: .62rem; gap: .3rem; } .fit__tabs { gap: .4rem; } .fit__tabs button { font-size: .73rem; padding-inline: .7rem; } .fit__body { padding: 1.2rem; } .svc { grid-template-columns: 1.5rem 1fr; gap: .5rem; padding: 1.3rem; } .svc__glyph { display: none; } .story__pin { position: static; padding: 1.25rem; } .step { padding: 1.4rem; } .stack__card { padding: 1.5rem; grid-template-columns: 1fr; } .home-faq .h2 { font-size: 2.3rem; } }
@media (prefers-reduced-motion:reduce) { .studio__orbit { transform: none; } .hero__scroll { opacity: 1; } .desk-card:hover,.btn:hover,.svc:hover { transform: none; } }
@media (max-width:960px) {
  .svc-layout:has(.svc-pin--illustrated) { grid-template-columns: 1fr; }
  .svc-pin--illustrated { display: block; position: relative; top: auto; width: min(100%,380px); margin-inline: auto; }
  .brand-illustration { max-width: 560px; }
}

/* V4: layout, title motion, and form fields have separate namespaces. */
.layout-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem,5vw,4rem); }
.layout-split > *, .hero__grid > *, .story > *, .form__row > * { min-width: 0; }
.h2, .motion-heading { display: block; grid-template-columns: none; gap: 0; }
.h2 { font-size: clamp(2rem,3.65vw,3rem); line-height: 1.13; letter-spacing: -.04em; max-width: 21ch; text-wrap: balance; overflow-wrap: normal; }
.h2 .w { max-width: 100%; vertical-align: baseline; }
.w > .word-run { display: inline; transform: none; transition: none; will-change: auto; }
.word-run .char { display: inline-block; transform: translateY(110%); transition: transform .55s cubic-bezier(.16,1,.3,1) var(--char-delay,0ms); }
.in .word-run .char { transform: translateY(0); }
.no-js .word-run .char { transform: none; }
.section { padding-block: clamp(3.5rem,6.5vw,6rem); scroll-margin-top: calc(var(--header-h) + 1rem); }
.section > .container > .layout-split { align-items: start; }
.section > .container > .layout-split > .lead { padding-top: 2.6rem; max-width: 52ch; font-size: clamp(1.05rem,1.45vw,1.22rem); line-height: 1.65; }
.eyebrow { margin-bottom: 1rem; }
#tentang > .container { align-items: start; }
#tentang .sticky { position: relative; top: auto; }
#tentang .brand-illustration { margin-top: 1.75rem; }
.brand-illustration img { transform: translateY(var(--art-y,0px)) scale(1.08); }
.brand-illustration figcaption { position: relative; z-index: 1; }
.name-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.name-card { padding: 1.2rem 1rem; }
.name-card b { font-size: 1.3rem; }
.name-card span { font-size: .88rem; line-height: 1.6; }
.hero { padding-top: clamp(3.5rem,5vw,5rem); }
.hero__title { font-size: clamp(2.8rem,4.5vw,4rem); max-width: 16ch; line-height: 1.1; }
.hero__grid { gap: 2rem; padding-bottom: 3rem; }
.hero__lead { font-size: 1.02rem; }
.hero__meta { display: flex; flex-wrap: wrap; max-width: 50ch; }
.hero__scroll { margin-top: 1.5rem; }
.studio { min-height: 380px; margin: 1rem 0; }
.studio__canvas { position: absolute; inset: 0; overflow: hidden; border: 1px solid #c4b5fd35; border-radius: 30px; transform: translateY(var(--scene-y,0px)); box-shadow: 0 30px 60px #080a1440; }
.studio__scene { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.studio__note { top: -40px; right: 1rem; }
.studio__note::after { display: inline; margin-left: .5rem; font-size: 1.4rem; }
.studio-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border: 2px solid #15161f; border-radius: 12px; background: #f2f3ff; color: #202331; box-shadow: 4px 5px 0 #15161f; font-size: .8rem; font-weight: 650; text-decoration: none; transition: transform .3s,box-shadow .3s; }
.studio-chip__icon { display: grid; place-items: center; background: #3730a3; color: #fff; width: 24px; height: 24px; border-radius: 50%; font-size: 1rem; }
.studio-chip--digital { left: -15px; top: 13%; rotate: -5deg; }
.studio-chip--compliance { right: -8px; bottom: 17%; rotate: 4deg; }
.studio-chip--process { left: 10%; bottom: -12px; rotate: -3deg; }
.studio-chip:hover { transform: translateY(-5px); box-shadow: 6px 8px 0 #15161f; }
.hero .studio.in .studio-chip { animation: cardArrive .75s cubic-bezier(.16,1.35,.35,1) both; }
.hero .studio.in .studio-chip:nth-of-type(1) { animation-delay: .2s; }
.hero .studio.in .studio-chip:nth-of-type(2) { animation-delay: .32s; }
.hero .studio.in .studio-chip:nth-of-type(3) { animation-delay: .44s; }
.motion-card.in { animation: cardArrive .75s cubic-bezier(.16,1.35,.35,1) both; animation-delay: var(--card-delay,0ms); }
@keyframes cardArrive { from { opacity: 0; transform: translateY(40px) rotate(-1.8deg) scale(.96); } to { opacity: 1; transform: translateY(0) rotate(0) scale(1); } }
.svc-layout, .story, .stack { margin-top: 2.5rem; }
.svc-layout:has(.svc-pin--illustrated) { grid-template-columns: 300px minmax(0,1fr); gap: 2.5rem; }
.svc-pin--illustrated { top: calc(var(--header-h) + 1.5rem); }
.svc-pin--illustrated img { transition: transform .8s cubic-bezier(.16,1,.3,1); transform-origin: 50% 50%; }
.svc-pin[data-active="2"] img { transform: scale(1.12) translate(-2%,2%); }
.svc-pin[data-active="3"] img { transform: scale(1.12) translate(2%,-2%); }
.svc-pin[data-active="4"] img { transform: scale(1.12) translate(-2%,-2%); }
.svc { padding: 1.5rem; }
.svc h3 { font-size: 1.35rem; }
.svc.is-active { border-color: var(--accent-text); }
.story { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 2.5rem; }
.story__steps { order: 1; }
.story__pin { order: 2; top: calc(var(--header-h) + 1.25rem); padding: 1.25rem; gap: .7rem; overflow: hidden; }
.story__count { font-size: .72rem; }
.story__visual { width: 100%; aspect-ratio: auto; margin: 0; }
.story__visual img { width: 100%; height: auto; object-fit: contain; border-radius: 14px; background: #f2f3ff; }
.phase-dots { display: flex; align-items: center; position: relative; width: 100%; margin: 1rem 0 .3rem; }
.phase-dots span { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 50%; border: 1px solid #f2f3ff66; color: #f2f3ff; font-size: .65rem; transition: background .4s,scale .4s; }
.phase-dots i { flex: 1; height: 2px; background: #f2f3ff33; }
.phase-dots .is-current { background: #c4b5fd; color: #202331; border-color: #c4b5fd; scale: 1.13; box-shadow: 0 0 0 4px #c4b5fd20; }
.phase-dots .is-done { background: #3730a3; border-color: #c4b5fd; }
.story__title { font-size: clamp(1.2rem,1.8vw,1.5rem); line-height: 1.25; min-height: 2.5em; }
.story__day { font-size: .72rem; }
.story__pin::after { content: ""; height: 3px; background: #c4b5fd; transform: scaleX(var(--phase-progress,0)); transform-origin: left; border-radius: 4px; }
.step { min-height: 50vh; padding: 1.8rem; margin-bottom: 2rem; justify-content: center; }
.step::before { display: none; }
.step h3 { font-size: 1.5rem; line-height: 1.2; }
.step p { line-height: 1.7; }
.mock__trend { padding: .7rem 1rem; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.mock__trend svg { width: 100%; height: 70px; }
.trend-grid { stroke: var(--line); stroke-width: 1; fill: none; }
.trend-area { fill: #8b5cf618; }
.trend-line { fill: none; stroke: var(--accent-text); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s .4s; }
.mock.in .trend-line { stroke-dashoffset: 0; }
.mock-wrap { position: sticky; top: calc(var(--header-h) + 1.25rem); }
.features { gap: 1.2rem; }
.stack__card { padding: 1.6rem; }
.form { position: relative; display: grid; grid-template-columns: minmax(0,1fr); gap: 1.1rem; transform: none; }
.form__row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.form .form-field { position: static; inset: auto; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto; align-content: start; gap: .45rem; padding: 0; min-width: 0; }
.form-field input, .form-field select, .form-field textarea { display: block; width: 100%; max-width: 100%; min-width: 0; }
.form .form-field textarea { min-height: 150px; }
.form > .btn { justify-content: center; }
.contact .weave { opacity: .07; }
.contact .h2 { max-width: 17ch; }
@media (max-height:700px) and (min-width:961px) {
  .story__pin { padding: 1rem; gap: .5rem; }
  .story__title { min-height: 0; }
  .svc-pin--illustrated { max-width: 270px; }
  .mock-wrap { position: relative; top: auto; }
}
@media (max-width:960px) {
  .layout-split, .layout-split--rev { grid-template-columns: minmax(0,1fr); gap: 2rem; }
  .section > .container > .layout-split > .lead { padding-top: 0; }
  .svc-layout:has(.svc-pin--illustrated) { grid-template-columns: minmax(0,1fr); }
  .story { grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
  .story__pin { display: grid; position: sticky; top: var(--header-h); order: 1; z-index: 3; background: #202331; padding: .75rem 1rem; grid-template-columns: 1fr auto; align-items: center; border-radius: 16px; }
  .story__visual { grid-column: 1 / -1; }
  .phase-dots { margin: .5rem 0 0; }
  .story__count { grid-column: 1; }
  .story__day { grid-column: 2; grid-row: 1; }
  .story__title { display: none; }
  .story__steps { order: 2; }
  .step { min-height: 40vh; padding: 1.5rem; }
  .mock-wrap { position: relative; top: auto; }
  .studio { width: min(100%,580px); min-height: 370px; margin: 2rem auto 1rem; }
}
@media (max-width:640px) {
  .section { padding-block: 3.5rem; }
  .h2 { font-size: clamp(1.9rem,8vw,2.5rem); max-width: 21ch; line-height: 1.15; }
  .hero__title { font-size: clamp(2.6rem,10vw,3.3rem); }
  .studio { min-height: 300px; }
  .studio__canvas { border-radius: 20px; }
  .studio-chip { padding: .55rem .65rem; font-size: .65rem; gap: .4rem; }
  .studio-chip--digital { left: -4px; }
  .studio-chip--compliance { right: -3px; }
  .studio-chip__icon { width: 20px; height: 20px; }
  .hero__meta { display: grid; }
  .name-grid { grid-template-columns: 1fr; }
  .name-card { display: grid; grid-template-columns: 85px minmax(0,1fr); gap: 1rem; }
  .name-card span { margin: 0; }
  .svc { padding: 1.3rem; }
  .form__row { grid-template-columns: minmax(0,1fr); }
  .form { padding: 1.3rem; }
}
@media (prefers-reduced-motion:reduce) {
  .word-run .char, .brand-illustration img, .studio__canvas { transform: none; }
  .motion-card.in, .hero .studio.in .studio-chip { animation: none; }
  .trend-line { stroke-dashoffset: 0; }
}
/* V5: alternate artwork follows the active service / phase in both directions. */
.scroll-art { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; background: #f2f3ff; isolation: isolate; }
.scroll-art.scroll-art--phase { width: 82%; max-width: 360px; margin-inline: auto; justify-self: center; aspect-ratio: auto; height: clamp(140px,36vh,360px); height: clamp(140px,36svh,360px); border-radius: 14px; }
.svc-pin--illustrated .scroll-art img, .story__visual .scroll-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .4s ease,transform .55s cubic-bezier(.16,1,.3,1); background: #f2f3ff; border-radius: 0; }
.svc-pin--illustrated .scroll-art img.is-current, .story__visual .scroll-art img.is-current { opacity: 1; transform: translateY(0) scale(1); z-index: 1; }
@media (max-width:960px) {
  .svc-pin--illustrated { position: sticky; top: var(--header-h); z-index: 4; width: 100%; max-width: none; display: grid; grid-template-columns: 130px minmax(0,1fr); align-items: center; padding: .6rem; gap: 1rem; background: var(--surface); }
  .svc-pin--illustrated .scroll-art { border-radius: 12px; }
  .svc-pin__caption { margin: 0 3rem 0 0; font-size: .95rem; }
  .svc-pin--illustrated .svc-pin__num { bottom: 1rem; }
  .story__visual .scroll-art--phase { height: clamp(120px,23vh,240px); height: clamp(120px,23svh,240px); }
}
/* Keep the complete source inside a safe inset, including during crossfades.
   Explicit sizes avoid intrinsic image dimensions stretching grid tracks. */
.story__pin, .story__visual, .story__visual .scroll-art { min-width: 0; }
.story__visual .scroll-art img,
.story__visual .scroll-art img.is-current {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  padding: 10px;
  object-fit: contain;
  object-position: center;
  transform: none;
  transition: opacity .4s ease;
}
@media (max-height:500px) {
  .story__pin { position: static; }
}
.solution-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; margin-bottom: 2.5rem; }
.solution-intro .h2 { max-width: 19ch; }
.solution-intro .lead { margin: 0; }
.solution-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; }
.solution-card { border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--surface); }
.solution-card__art { position: relative; height: 220px; background: #f2f3ff; padding: 12px; }
.solution-card__art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.story__visual .scroll-art--phase,
.story__visual .scroll-art img { background: transparent; }
.solution-card__art { background: transparent; }
.solution-card__art > span { position: absolute; top: 1rem; left: 1.2rem; color: #3730a3; font-size: .8rem; font-weight: 700; }
.solution-card__body { display: flex; flex-direction: column; align-items: start; padding: 1.75rem; }
.solution-card h3 { font-size: 1.5rem; line-height: 1.25; margin-bottom: .75rem; }
.solution-card p { color: var(--text-2); margin-bottom: 1.25rem; }
.solution-card__link { color: var(--accent-text); font-weight: 700; text-underline-offset: 5px; }
.solution-card__link:hover { text-decoration: underline; }
@media (max-width:640px) {
  .solution-intro { grid-template-columns: minmax(0,1fr); gap: 1.25rem; }
  .solution-grid { grid-template-columns: minmax(0,1fr); }
  .solution-card__body { padding: 1.3rem; }
  .solution-card__art { height: 190px; }
}
@media (prefers-reduced-motion:reduce) {
  .story__visual .scroll-art img { transition: none; }
}
@media (prefers-reduced-motion:reduce) {
  .svc-pin--illustrated .scroll-art img, .story__visual .scroll-art img { transition: none; transform: none; }
}