@charset "UTF-8";

/* Service cards: 3 + 4 on desktop, paired rows on tablet, one column on phone. */
.services-grid { grid-template-columns:repeat(12,minmax(0,1fr)) }
.services-grid .service-card { grid-column:span 4; min-width:0 }
.services-grid .service-card:nth-child(n+4) { grid-column:span 3 }
.services-grid .service-card:focus-visible { outline-offset:-5px; z-index:1; background:#fff }
.services-grid .service-gift:focus-visible { background:#c9afff }
.service-footer { gap:10px; font-size:11px; color:#45453f }
.service-footer>span:first-child { display:flex; flex-direction:column; gap:6px }
.service-footer small { font-size:10px; color:#62625b }
.service-gift .service-footer small { color:#41354f }
.service-footer>span:last-child { transition:transform .2s }
.service-card:hover .service-footer>span:last-child,.service-card:focus-visible .service-footer>span:last-child { transform:translate(3px,-3px) }
.service-card:focus-visible .service-icon { transform:rotate(7deg) }

.accent-lime { --accent:var(--lime); --accent-soft:#e9efdc }
.accent-lavender { --accent:var(--lavender); --accent-soft:#e9e1f5 }
.accent-coral { --accent:var(--coral); --accent-soft:#f5e1d8 }
.service-page { overflow-wrap:break-word }
.service-page h2 { font-size:clamp(36px,4.5vw,60px); letter-spacing:-2.5px }
.service-page h3 { letter-spacing:-.8px }
.service-page p { line-height:1.75 }
.service-page .eyebrow { line-height:1.5 }
.breadcrumbs { padding:36px 0 32px; font-size:12px; color:#66665e }
.breadcrumbs ol { display:flex; align-items:center; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0 }
.breadcrumbs a { text-decoration:underline; text-underline-offset:4px; text-decoration-color:#b6b6af }
.breadcrumbs a:hover { color:var(--ink) }
.breadcrumbs [aria-current] { color:var(--ink) }
.service-hero { display:grid; grid-template-columns:1fr 1fr; gap:50px; padding:28px 0 62px; align-items:center }
.service-hero-copy { min-width:0 }
.service-hero h1 { font-size:clamp(48px,5.8vw,83px); line-height:1.03; letter-spacing:-4px }
.service-hero h1>span { position:relative; z-index:0 }
.service-hero h1>span::before { content:""; position:absolute; inset:7px -5px 0; background:var(--accent); z-index:-1; border-radius:4px; transform:rotate(-1.5deg) }
.service-lead { max-width:530px; margin-top:30px; font-size:16px; color:#55554d }
.service-actions { display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:30px }
.service-format { margin-top:34px; padding-top:22px; border-top:1px solid var(--line); font-size:11px; color:#66665e }
.service-art { position:relative; padding:65px 28px 100px; border-radius:24px; background:var(--accent-soft); isolation:isolate; min-width:0 }
.service-art::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background-image:linear-gradient(#17171707 1px,transparent 1px),linear-gradient(90deg,#17171707 1px,transparent 1px); background-size:28px 28px }
.art-caption { position:absolute; top:24px; left:28px; font-size:10px; text-transform:uppercase; letter-spacing:1.4px }
.service-art-window { transform:rotate(-4deg); border:1px solid #171717; border-radius:10px; background:#fff; box-shadow:8px 14px 0 #17171712; overflow:hidden }
.service-window-bar { display:flex; justify-content:space-between; padding:11px 14px; font-size:8px; background:var(--paper); border-bottom:1px solid #171717 }
.service-window-bar>span:first-child { letter-spacing:2px }
.service-art-window img { width:100%; height:auto }
.service-art-symbol { position:absolute; bottom:32px; right:25px; display:grid; place-items:center; background:var(--accent); border:1px solid var(--ink); width:90px; height:90px; border-radius:24px; font-size:64px; line-height:1; transform:rotate(9deg) }
.service-art-label { position:absolute; bottom:22px; left:28px; max-width:65%; font-size:11px; line-height:1.7 }
.service-art-label strong { font-size:15px }
.direction-branding .service-art-window { transform:rotate(3deg) }
.direction-branding .service-art-symbol { font-size:42px; letter-spacing:-4px }
.direction-gifts .service-art { background:#e2dcf1 }
.direction-gifts .service-art-symbol { border-radius:50% }
.direction-bots .service-art-window { transform:rotate(1.5deg) }
.direction-bots { --accent:#c2b3ee; --accent-soft:#e5e4f0 }
.direction-redesign { --accent:#ffae96; --accent-soft:#f0e4dc }
.direction-redesign .service-art-window { transform:rotate(-2deg) }
.direction-support { --accent:#d8f393; --accent-soft:#e9eddb }
.direction-support .service-art-symbol { border-radius:50% }
.direction-shops { --accent:#c1abed; --accent-soft:#e8e2ef }
.direction-shops .service-art-window { transform:rotate(3deg) }
.service-jump { display:flex; flex-wrap:wrap; gap:6px 22px; padding:21px 0; border-block:1px solid var(--line) }
.service-jump a { padding:8px 0; font-size:12px; color:#56564e; text-underline-offset:5px }
.service-jump a:hover { color:var(--ink); text-decoration:underline }
.service-section { padding-block:96px }
.service-section-head { margin-bottom:40px }
.service-section-head .eyebrow { margin-bottom:20px }
.task-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px }
.task-grid article { border-top:1px solid var(--ink); padding-top:21px }
.task-number { font-family:monospace; font-size:12px; color:#62625b }
.task-grid h3 { font-size:22px; margin:28px 0 14px; max-width:300px }
.task-grid p { font-size:14px; color:#62625b; max-width:350px }
.service-scope { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; border-top:1px solid var(--line) }
.section-side-note { margin-top:30px; font-size:13px; color:#62625b }
.scope-list { margin:0 }
.scope-list>div { display:grid; grid-template-columns:1fr 1.2fr; gap:22px; padding:23px 0; border-top:1px solid var(--line) }
.scope-list>div:first-child { border-color:var(--ink) }
.scope-list dt { display:flex; align-items:baseline; gap:16px; font-size:17px; font-weight:700; letter-spacing:-.4px }
.scope-list dt>span { font-size:10px; font-family:monospace; font-weight:400; color:#62625b }
.scope-list dd { margin:0; font-size:13px; line-height:1.8; color:#62625b }
.support-packages { padding-bottom:90px }
.package-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.package-grid article { display:flex; flex-direction:column; padding:30px; border:1px solid var(--ink); border-radius:18px; background:var(--white) }
.package-grid article:nth-child(2) { background:var(--lavender) }
.package-grid article:nth-child(3) { background:var(--lime) }
.package-index { display:flex; justify-content:space-between; font-size:12px; margin-bottom:42px }
.package-index span { font-size:24px }
.package-grid h3 { font-size:25px; margin-bottom:18px }
.package-grid p { font-size:14px; margin-bottom:30px }
.package-grid .text-link { margin-top:auto; min-height:40px }
.package-note { font-size:13px; color:#56564e; max-width:800px; margin-top:23px }
.work-section { background:#edede7; padding:86px 0 }
.work-heading { display:flex; justify-content:space-between; align-items:end; gap:30px }
.work-heading>p { color:#62625b; font-size:12px }
.case-overview { display:grid; grid-template-columns:1fr 1.15fr; gap:80px; padding:30px 0 }
.work-demo-label { display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; background:var(--accent); border:1px solid var(--ink); border-radius:5px; padding:7px 10px }
.case-overview h3 { font-size:clamp(32px,3vw,46px); line-height:1.1; margin:19px 0 12px; letter-spacing:-1.8px }
.case-type { font-size:14px; color:#62625b }
.case-story h4 { font-size:12px; margin:0 0 8px }
.case-story p { font-size:14px; color:#56564e; margin-bottom:18px }
.work-preview { position:relative; display:block; border:1px solid var(--ink); border-radius:16px; overflow:hidden; background:#fff; transition:box-shadow .25s,transform .25s }
.work-preview:hover { transform:translateY(-3px); box-shadow:0 6px 0 #171717 }
.work-preview img { width:100%; height:auto }
.preview-hint { position:absolute; bottom:20px; right:20px; display:flex; align-items:center; gap:22px; font-size:12px; background:var(--ink); color:white; border-radius:50px; padding:13px 19px; border:1px solid #fff5 }
.preview-hint>span { font-size:20px }
.case-under { display:flex; align-items:start; justify-content:space-between; gap:40px; padding-top:28px }
.work-features { display:flex; flex-wrap:wrap; gap:9px; max-width:65%; margin:0; padding:0; list-style:none }
.work-features li { padding:8px 11px; border:1px solid #bbbcb3; border-radius:30px; font-size:11px; line-height:1.5 }
.case-links { display:flex; flex-direction:column; align-items:start; gap:18px; min-width:210px }
.case-links p { color:#62625b; font-size:11px }
.service-process { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; list-style:none; margin:0; padding:0 }
.step-index { display:flex; justify-content:space-between; align-items:center; font-family:monospace; font-size:13px; padding:20px 0 26px; border-top:1px solid var(--ink) }
.step-index span { font-size:27px }
.service-process li:last-child .step-index>span { background:var(--accent); border-radius:50%; width:36px; text-align:center }
.service-process h3 { font-size:21px; margin:0 0 14px }
.service-process p { font-size:13px; color:#62625b }
.result-section { display:grid; grid-template-columns:1fr 1fr; gap:70px; border-radius:22px; background:var(--ink); color:var(--paper); padding:64px }
.result-intro { font-size:13px; color:#c4c4bb; margin-top:25px }
.result-list { list-style:none; padding:0; margin:0 }
.result-list li { display:flex; align-items:baseline; gap:22px; padding:20px 0; border-bottom:1px solid #ffffff30; line-height:1.6; font-size:15px }
.result-list li:first-child { padding-top:0 }
.result-list li>span { color:var(--accent); font-size:22px }
.cost-section { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:80px }
.cost-section>* { min-width:0 }
.cost-intro { max-width:390px; font-size:14px; margin-top:27px; color:#62625b }
.cost-card { background:var(--accent-soft); border:1px solid var(--line); padding:38px; border-radius:20px }
.cost-card h3 { font-size:34px; line-height:1.15; margin:25px 0 20px; letter-spacing:-1.5px }
.cost-card p { color:#4e4e46; font-size:14px }
.cost-card .game-price { font-size:17px; color:var(--ink); margin-bottom:20px; font-weight:700 }
.cost-timing { margin:24px 0; border-top:1px solid #17171730; padding-top:22px }
.cost-timing h4 { margin:0 0 9px; font-size:14px }
.service-faq { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; border-top:1px solid var(--line) }
.service-faq .faq-list summary { font-size:16px; line-height:1.5; min-height:72px; gap:20px }
.service-faq .faq-list p { font-size:14px; color:#62625b }
.service-final { background:var(--accent); padding:75px 0 }
.service-final-inner { display:flex; justify-content:space-between; gap:50px; align-items:center }
.service-final h2 { font-size:clamp(40px,5.5vw,76px) }
.service-final p { font-size:15px; max-width:520px; margin-top:25px }
.service-final .button { margin-top:28px }
.service-final .service-final-note { font-size:11px; line-height:1.7; margin-top:20px }
.final-symbol { font-size:220px; line-height:1; transform:rotate(-10deg); padding-right:50px; flex-shrink:0 }
.direction-branding .final-symbol { letter-spacing:-20px; font-size:180px }
.related-section { padding-block:62px 76px }
.related-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px }
.related-top .eyebrow { margin:0 }
.related-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line); border-radius:14px; overflow:hidden }
.related-grid>a { display:grid; grid-template-columns:1fr auto; gap:22px; padding:26px; border-right:1px solid var(--line); transition:background .2s }
.related-grid>a:last-child { border:0 }
.related-grid>a:hover { background:#fff }
.related-grid>a:focus-visible { outline-offset:-5px }
.related-grid>a>span:first-child { grid-column:1/-1; color:#62625b; font:11px monospace }
.related-grid strong { font-size:19px; letter-spacing:-.6px }
.related-grid>a>span:last-child { font-size:22px }
.work-dialog { border:1px solid var(--ink); padding:20px; border-radius:18px; width:min(1440px,94vw); max-width:none; max-height:94dvh; color:var(--ink); background:var(--paper) }
.work-dialog::backdrop { background:#171717b8; backdrop-filter:blur(5px) }
.work-dialog-head { display:flex; gap:20px; align-items:center; justify-content:space-between }
.work-dialog-head h2 { font-size:22px; letter-spacing:-.6px; line-height:1.3 }
.work-dialog-head>div { display:flex; gap:16px; align-items:center; flex-shrink:0 }
.work-dialog-head .button { min-height:42px; padding:10px 14px; font-size:11px }
.work-dialog-close { border:1px solid var(--line); background:#fff; border-radius:50%; width:44px; height:44px; font-size:30px }
.work-dialog-note { color:#62625b; font-size:12px; margin:14px 0 }
.work-dialog-scroll { overflow:auto; max-height:calc(94dvh - 150px); border-radius:10px; background:#fff; overscroll-behavior:contain }
.work-dialog-scroll img { width:100%; height:auto }
.work-dialog-scroll.is-zoomed img { width:1440px; max-width:none }
.work-dialog-scroll:focus-visible { outline:3px solid #7960d7; outline-offset:2px }
@media(prefers-reduced-motion:no-preference) {
  .reveal-ready { opacity:0; transform:translateY(18px); transition:opacity .55s ease,transform .55s ease }
  .reveal-ready.is-visible { opacity:1; transform:none }
}
@media(min-width:1001px) and (max-width:1200px) {
  .services-grid .service-card { padding:22px }
  .services-grid .service-card:nth-child(n+4) h3 { font-size:20px }
}
@media(max-width:1100px) {
  .service-hero { gap:30px }
  .service-hero h1 { font-size:clamp(45px,5.9vw,70px); letter-spacing:-3px }
  .service-lead { font-size:15px }
  .service-scope,.service-faq { gap:35px; grid-template-columns:.7fr 1.3fr }
  .scope-list>div { grid-template-columns:1fr }
  .scope-list dd { padding-left:31px }
  .result-section { padding:40px; gap:35px }
  .cost-section { gap:35px }
  .cost-card h3 { font-size:29px }
  .service-process { gap:20px }
  .service-process h3 { font-size:19px }
  .package-grid article { padding:24px }
}
@media(max-width:1000px) {
  .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .services-grid .service-card,.services-grid .service-card:nth-child(n+4) { grid-column:auto }
  .services-grid .service-card:last-child { grid-column:1/-1; min-height:230px }
  .services-grid .service-card:last-child>p { max-width:550px }
}
@media(max-width:800px) {
  .service-hero { grid-template-columns:1fr; gap:36px }
  .service-hero h1 { font-size:76px; letter-spacing:-4px }
  .service-lead { max-width:620px; font-size:16px }
  .service-art { max-width:620px; width:100%; padding:58px 42px 90px }
  .service-art-window img { max-height:360px; object-fit:cover; object-position:top }
  .service-section { padding-block:68px }
  .task-grid { gap:22px }
  .task-grid h3 { font-size:20px }
  .service-scope,.service-faq { grid-template-columns:1fr; gap:10px }
  .scope-list>div { grid-template-columns:1fr 1.4fr }
  .scope-list dd { padding:0 }
  .section-side-note { max-width:500px }
  .section-side-note br { display:none }
  .work-heading { align-items:start; flex-direction:column; gap:20px }
  .case-overview { gap:35px }
  .case-under { flex-direction:column; gap:24px }
  .work-features { max-width:none }
  .case-links { flex-direction:row; align-items:center; flex-wrap:wrap; gap:22px }
  .service-process { grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px }
  .result-section { grid-template-columns:1fr; padding:35px; gap:30px }
  .cost-section { grid-template-columns:minmax(0,1fr) }
  .cost-intro { max-width:600px }
  .final-symbol { font-size:140px; padding:0 }
  .direction-branding .final-symbol { font-size:110px; letter-spacing:-15px }
  .service-final h2 { font-size:48px }
  .related-grid strong { font-size:16px }
  .related-grid>a { padding:21px; gap:15px }
  .package-grid { grid-template-columns:1fr }
  .package-index { margin-bottom:25px }
  .package-grid p { max-width:650px }
}
@media(max-width:560px) {
  .services-grid { grid-template-columns:1fr }
  .services-grid .service-card:last-child { grid-column:auto; min-height:292px }
  .breadcrumbs { padding-top:23px; padding-bottom:20px; font-size:10px; line-height:1.7 }
  .breadcrumbs ol { gap:8px }
  .service-hero { padding-top:18px; padding-bottom:36px; gap:30px }
  .service-hero h1 { font-size:clamp(40px,11.8vw,64px); letter-spacing:-2.8px }
  .service-hero .eyebrow { font-size:10px; margin-bottom:20px }
  .service-lead { font-size:15px; margin-top:25px }
  .service-actions { gap:20px; margin-top:26px }
  .service-actions .button { padding:16px 18px; gap:18px; font-size:12px }
  .service-actions .text-link { min-height:44px }
  .service-format { font-size:10px; margin-top:22px }
  .service-art { border-radius:17px; padding:56px 24px 90px }
  .service-art-window img { max-height:none }
  .service-art-symbol { width:66px; height:66px; font-size:46px; border-radius:17px; right:18px; bottom:20px }
  .direction-branding .service-art-symbol { font-size:31px; letter-spacing:-3px }
  .art-caption { left:24px; top:22px; font-size:9px }
  .service-art-label { bottom:17px; left:24px; font-size:10px }
  .service-art-label strong { font-size:12px }
  .service-jump { gap:0 20px; padding:12px 0 }
  .service-jump a { min-height:44px; display:flex; align-items:center; font-size:11px }
  .service-section { padding-block:56px }
  .service-page h2 { font-size:38px; letter-spacing:-1.8px }
  .service-section-head { margin-bottom:30px }
  .task-grid { grid-template-columns:1fr; gap:28px }
  .task-grid h3 { margin-top:16px; max-width:none; font-size:22px }
  .task-grid p { max-width:none; font-size:14px }
  .scope-list>div { grid-template-columns:1fr; gap:12px; padding:22px 0 }
  .scope-list dt { font-size:18px }
  .scope-list dd { padding-left:31px; font-size:14px }
  .support-packages { padding-bottom:56px }
  .package-note { font-size:13px }
  .work-section { padding:56px 0 }
  .work-heading>p { font-size:12px }
  .case-overview { grid-template-columns:1fr; gap:23px; padding-top:12px }
  .case-overview h3 { font-size:35px }
  .case-story p { font-size:14px }
  .work-preview { border-radius:10px; padding-bottom:42px; background:var(--ink) }
  .preview-hint { right:12px; bottom:4px; padding:8px 0; font-size:10px; border:0; background:transparent }
  .work-features li { font-size:11px }
  .case-links { align-items:start; flex-direction:column; gap:18px }
  .case-links>.text-link { min-height:40px }
  .service-process { grid-template-columns:1fr; gap:26px }
  .step-index { padding:16px 0; font-size:12px }
  .service-process h3 { font-size:22px }
  .service-process p { font-size:14px }
  .result-section { padding:28px 24px; border-radius:16px }
  .result-list li { font-size:14px; gap:15px }
  .result-intro { font-size:13px }
  .cost-card { padding:28px 24px }
  .cost-card h3 { font-size:30px }
  .service-faq .faq-list summary { font-size:15px; padding-block:20px }
  .service-faq .faq-list p { font-size:14px }
  .service-final { padding:52px 0 }
  .service-final-inner { display:block; position:relative }
  .service-final h2 { font-size:43px; padding-right:12px }
  .service-final p { font-size:14px }
  .final-symbol { display:none }
  .service-final .service-final-note { font-size:11px }
  .service-final-note br { display:none }
  .related-section { padding-block:42px 50px }
  .related-grid { grid-template-columns:1fr }
  .related-grid>a { grid-template-columns:30px 1fr auto; align-items:center; border-right:0; border-bottom:1px solid var(--line); min-height:80px }
  .related-grid>a>span:first-child { grid-column:auto }
  .related-grid strong { font-size:18px }
  .related-top { gap:20px }
  .related-top .eyebrow { font-size:9px }
  .work-dialog { padding:16px; width:96vw; border-radius:12px }
  .work-dialog-head { align-items:start }
  .work-dialog-head h2 { font-size:17px; letter-spacing:-.4px }
  .work-dialog-head>div { gap:8px }
  .work-dialog-head .button { max-width:100px; font-size:10px; padding:8px }
  .work-dialog-close { width:40px; height:40px; font-size:27px }
  .work-dialog-note { font-size:11px }
}
@media print {
  .reveal-ready { opacity:1; transform:none }
  .service-art,.service-jump,.site-header,.service-actions,.service-final,.related-section { display:none }
  .work-section { background:none }
  .work-preview { break-inside:avoid }
}
@media(max-width:380px) {
  .cost-card h3 { font-size:26px }
}