:root { --surface: #121a29; --stroke: rgba(181,201,242,.14); --text-muted: #a0acc2; --accent: #a4bdff; }
html { scroll-behavior: smooth; scroll-padding-top: 105px; }
body { background: #060910; line-height: 1.7; }
a { color: inherit; text-decoration: none; }
button, a { touch-action: manipulation; }
button, input, select, textarea { font-family: inherit; }
::selection { background: #4b63bf; color: white; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #a4bbff; outline-offset: 4px; }
.section-shell { width: min(1180px, calc(100% - 96px)); margin-inline: auto; }
.section-space { padding-block: 112px; }
.eyebrow { color: #93acdf; font-size: 12px; font-weight: 500; letter-spacing: .12em; line-height: 1.8; margin: 0 0 22px; }
.muted { color: #9caac7; }
.section-title { color: #f4f7ff; font-size: clamp(34px, 3.7vw, 52px); font-weight: 600; line-height: 1.35; letter-spacing: -.04em; margin: 0; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 56px; margin-bottom: 54px; }
.section-heading-aside { max-width: 440px; font-size: 14px; line-height: 1.95; color: var(--text-muted); margin: 0 0 5px; }
.section-heading-aside p { margin: 0; }
.button { min-height: 48px; padding: 12px 22px; display: inline-flex; align-items: center; justify-content: center; gap: 24px; border: 1px solid transparent; border-radius: 9px; font-size: 14px; font-weight: 500; line-height: 1.7; cursor: pointer; transition: background .2s, border-color .2s, transform .2s, box-shadow .2s; }
.button span { font-family: Inter, sans-serif; font-size: 18px; line-height: 1; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: linear-gradient(155deg,#647fff,#3e59e5); border-color: #a9bdff38; box-shadow: inset 0 1px 0 #dce6ff55, 0 8px 24px #203ab62b; }
.button-primary:hover { background: linear-gradient(155deg,#7a92ff,#4b68ef); box-shadow: inset 0 1px 0 #e7eeff66, 0 12px 32px #3155ff3d; }
.button-secondary { background: linear-gradient(155deg,#1d2638,#111824); border-color: #b5c9f126; color: #e0e8f8; box-shadow: inset 0 1px 0 #d3dfff08; }
.button-secondary:hover { background: linear-gradient(155deg,#28344b,#172132); border-color: #b5c9f14d; }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; color: #c3ceff; background: none; padding: 0; font-size: 13px; font-weight: 500; }
.text-link span { font-size: 20px; transition: transform .2s; }
.text-link:hover span { transform: translate(2px, -2px); }
.arrow-icon, .service-symbol { display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; pointer-events: none; }
.button > span[aria-hidden], .text-link > span[aria-hidden], .nav-contact > span[aria-hidden] { display: inline-grid; place-items: center; line-height: 1; }
.button .arrow-icon, .text-link .arrow-icon { width: 18px; height: 18px; }
.button-primary > span[aria-hidden] { width: 25px; height: 25px; border: 1px solid #e8efff2e; border-radius: 7px; background: #eef3ff12; box-shadow: inset 0 1px 0 #fff1; }
.button-primary > span[aria-hidden] .arrow-icon { width: 15px; height: 15px; stroke-width: 1.8; }
.nav-contact .arrow-icon { width: 16px; height: 16px; }
.arrow-icon--diagonal { transition: transform .22s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) {
  .button:hover .arrow-icon--diagonal, .nav-contact:hover .arrow-icon--diagonal, .project-cover:hover .project-open .arrow-icon--diagonal { transform: translate(1.5px,-1.5px); }
}
.project-open .arrow-icon { width: 17px; height: 17px; }
.concept-navigation .arrow-icon { width: 10px; height: 10px; margin-left: 4px; }
.service-icon svg { width: 24px; height: 24px; stroke-width: 1.5; }
.speed-core .arrow-icon { width: 29px; height: 29px; }
.back-top .arrow-icon { width: 17px; height: 17px; }
.form-heading > span .arrow-icon { width: 12px; height: 12px; margin-left: 4px; }
.contact-direct a { display: inline-flex; align-items: center; gap: 9px; }
.status-dot { display: inline-block; width: 5px; height: 5px; background: #a4b8ff; border-radius: 50%; box-shadow: 0 0 12px #6b8bff; margin-right: 5px; vertical-align: 2px; }
.skip-link { position: fixed; z-index: 200; top: -100px; left: 16px; background: #354fe1; color: #fff; padding: 10px 20px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* One quiet navigation bar anchors the longer page. */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; width: 100%; margin: 0; padding: 0; border-bottom: 1px solid transparent; transition: background .2s, border-color .2s; }
.site-header.is-scrolled, .site-header.menu-is-open { background: #090e19e8; border-color: var(--stroke); backdrop-filter: blur(18px); box-shadow: 0 8px 30px #00000012; }
.nav-shell { width: min(1180px, calc(100% - 96px)); height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 30px; margin: auto; }
.brand { flex: 0 0 auto; }
.nav-links { display: flex; align-items: center; gap: 27px; }
.nav-links a { color: #a6a6b4; font-size: 13px; padding-block: 15px; transition: color .2s; }
.nav-links a:hover, .nav-links a.is-active { color: #fff; }
.nav-actions { display: flex; align-items: center; gap: 15px; }
.nav-contact { display: flex; align-items: center; gap: 14px; font-size: 12px; color: #e9edff; background: #ffffff0a; border: 1px solid #ffffff1a; padding: 9px 14px; border-radius: 7px; transition: background .2s; }
.nav-contact:hover { background: #ffffff14; }
.nav-contact span { font-size: 17px; }
.menu-toggle { display: none; width: 36px; height: 40px; background: transparent; padding: 10px 5px; }
.menu-toggle span { display: block; height: 1px; width: 23px; margin: 6px auto; background: #e5e9ff; transition: transform .2s; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* Keep the original neon editor, then let a finished website emerge behind it. */
.hero { background: #05080f; min-height: 0; padding-bottom: 0; }
.hero::before { background: radial-gradient(ellipse 850px 430px at 50% 180px,#23365b33,transparent 80%), radial-gradient(ellipse 780px 550px at 45% 720px,#10205c99,transparent 80%); }
.hero::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background-image: linear-gradient(#a6bfff08 1px,transparent 1px),linear-gradient(90deg,#a6bfff08 1px,transparent 1px); background-size: 96px 96px; mask-image: linear-gradient(transparent 35%,#000 70%,transparent); }
.hero .ambient-halo { left: calc(50% - 545px); top: 480px; width: 870px; height: 460px; opacity: .65; }
.hero .ambient-core { left: calc(50% - 515px); top: 560px; width: 650px; height: 260px; }
.hero-content { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding-top: 150px; text-align: center; }
.hero-eyebrow { margin-bottom: 22px; font-size: 11px; color: #a7afcf; }
.hero h1 { width: max-content; margin-inline: auto; font-size: clamp(32px, 4.2vw, 60px); line-height: 1.35; letter-spacing: -.025em; }
.hero-description { color: #a5b2ca; font-size: 15px; line-height: 1.95; margin: 22px auto 0; }
.hero-actions { display: flex; justify-content: center; gap: 12px; margin-top: 28px; }
.hero-stage { --u: 1px; position: relative; width: min(1060px, calc(100% - 96px)); height: 510px; margin: 66px auto 0; }
.hero-stage .editor-scene { position: absolute; z-index: 2; left: 0; top: 72px; width: calc(372 * var(--u)); height: calc(312 * var(--u)); margin: 0; }
.hero-stage .editor { background: linear-gradient(130deg, #101048, #090824 43%, #080715); }
.hero-stage .editor-scene.is-interacting .editor { mask-image: linear-gradient(#000 0%, #000 88%, transparent 100%); }
.hero-preview { position: absolute; z-index: 1; right: 0; top: 0; width: 760px; border: 1px solid #6376d14d; border-radius: 13px; overflow: hidden; background: #14151b; box-shadow: -20px 20px 90px #11155835, 0 40px 80px #0008; transform: perspective(1400px) rotateY(-5deg) rotateX(2deg); transition: width .6s cubic-bezier(.2,.8,.2,1), transform .6s, right .6s; }
.preview-bar { height: 37px; background: #13131e; display: flex; align-items: center; padding: 0 14px; gap: 18px; font-size: 9px; color: #86869b; }
.window-dots { display: flex; gap: 4px; }
.window-dots i { width: 5px; height: 5px; border-radius: 50%; background: #545464; }
.preview-badge { margin-left: auto; font-size: 8px; padding: 2px 5px; border: 1px solid #ffffff18; border-radius: 4px; }
.preview-content { height: 365px; position: relative; color: #fff9ed; overflow: hidden; }
.preview-content > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.preview-content::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #18161085, transparent 80%); pointer-events: none; }
.preview-site-nav { position: absolute; inset: 20px 26px auto; z-index: 1; display: flex; justify-content: space-between; align-items: center; font-family: Inter, sans-serif; font-size: 13px; letter-spacing: -.5px; }
.preview-nav-links { font-size: 8px; font-family: inherit; letter-spacing: 0; }
.preview-nav-links b { margin-left: 14px; font-size: 16px; }
.preview-copy { position: absolute; z-index: 1; left: 42px; top: 112px; }
.preview-copy > span:first-child { font-size: 9px; letter-spacing: .12em; }
.preview-copy h3 { font-size: 45px; font-weight: 400; line-height: 1.25; margin: 13px 0 21px; letter-spacing: -.06em; }
.preview-small-link { font-size: 8px; display: inline-flex; align-items: center; gap: 36px; border-bottom: 1px solid #fff6; padding-bottom: 7px; }
.preview-small-link b { font-size: 13px; }
.preview-location { position: absolute; z-index: 1; bottom: 17px; right: 24px; font: 7px Inter, sans-serif; letter-spacing: .08em; color: #e4dfd0; }
.preview-footer { min-height: 46px; display: flex; justify-content: space-between; align-items: center; padding: 0 25px; color: #585044; background: #e7e2d7; font-size: 8px; }
.preview-footer span:last-child { font-size: 20px; }
.hero-stage[data-device="mobile"] .hero-preview { width: 260px; right: 160px; transform: none; border-radius: 23px; border: 5px solid #282934; }
.hero-stage[data-device="mobile"] .preview-bar { height: 33px; font-size: 7px; gap: 7px; padding: 0 8px; }
.hero-stage[data-device="mobile"] .preview-badge { display: none; }
.hero-stage[data-device="mobile"] .preview-content { height: 365px; }
.hero-stage[data-device="mobile"] .preview-nav-links { display: none; }
.hero-stage[data-device="mobile"] .preview-site-nav { inset: 18px 17px auto; font-size: 11px; }
.hero-stage[data-device="mobile"] .preview-copy { left: 21px; top: 127px; }
.hero-stage[data-device="mobile"] .preview-copy h3 { font-size: 37px; }
.hero-stage[data-device="mobile"] .preview-footer { padding-inline: 15px; font-size: 7px; gap: 10px; }
.hero-stage[data-device="mobile"] .preview-location { display: none; }
.stage-caption { position: absolute; left: 13px; bottom: 54px; color: #8d90a4; font-size: 10px; line-height: 2; }
.stage-caption > span { display: block; color: #55586d; font-size: 9px; }
.hero-pillars { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--stroke); border-bottom: 1px solid var(--stroke); padding-block: 28px; margin-top: 5px; color: #c0cce2; background: linear-gradient(180deg,#b2c9ff07,transparent); }
.hero-pillars > span { display: flex; justify-content: center; align-items: center; gap: 14px; font-size: 12px; border-right: 1px solid var(--stroke); }
.hero-pillars > span:last-child { border-right: 0; }
.hero-pillars i { font-style: normal; font-family: Inter, sans-serif; color: #8f9ac7; font-size: 18px; }

/* Each concept gets its own visual vocabulary. */
.concept-note { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; color: #717185; margin-top: 14px; }
.concept-note > span { color: #8a9cdd; font-size: 16px; }
.work-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 25px; }
.filter-list { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px; border: 1px solid #a4bde21c; border-radius: 10px; background: #101724; }
.filter-list button { color: #858598; background: none; border: 1px solid transparent; border-radius: 6px; font-size: 11px; padding: 7px 13px; transition: background .2s, color .2s; }
.filter-list button[aria-pressed="true"] { color: #e8f0ff; background: linear-gradient(145deg,#2e405e,#1d2a42); border-color: #b7d0ff33; box-shadow: inset 0 1px 0 #d0e0ff12; }
.filter-list button:hover { color: #e4e4ed; }
.work-count { color: #6c6c80; font-size: 10px; }
.projects-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 38px 28px; }
.project-card { min-width: 0; padding: 10px; border: 1px solid #a9c2ef24; border-radius: 18px; background: linear-gradient(145deg,#141d2d,#0b111d); box-shadow: inset 0 1px 0 #d1e1ff08,0 16px 40px #00000026; }
.project-card:focus-within { border-color: #9ab8ff66; }
.project-digital { grid-column: 1 / -1; }
.projects-grid.is-filtered { grid-template-columns: 1fr; }
.project-cover { width: 100%; display: block; position: relative; overflow: hidden; border: 1px solid #ffffff0d; border-radius: 12px; padding: 0; background: #15151c; color: #fff; text-align: left; }
.project-visual { position: relative; height: 390px; overflow: hidden; isolation: isolate; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.project-cover:hover .project-visual { transform: scale(1.025); }
.project-visual > img { position: absolute; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.project-visual::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.visual-architecture::after { background: linear-gradient(0deg, #10100d99, transparent 60%); }
.visual-lifestyle::after { background: linear-gradient(90deg, #23060085, transparent 75%); }
.concept-navigation { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 26px 27px; color: #fff5df; }
.concept-navigation b { font: 500 13px Inter, sans-serif; letter-spacing: -.5px; }
.concept-navigation > span { font: 7px Inter, sans-serif; letter-spacing: .03em; }
.concept-title { position: absolute; left: 29px; bottom: 62px; font-size: 33px; font-weight: 450; line-height: 1.35; letter-spacing: -.05em; color: #fff7e6; }
.visual-lifestyle .concept-title { top: 114px; bottom: auto; font-size: 30px; }
.visual-lifestyle > img { object-position: 56% center; }
.cover-concept-label { position: absolute; bottom: 22px; left: 29px; font-size: 8px; letter-spacing: .08em; color: #ffffff8c; }
.project-open { position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #e2ecff55; background: #10182780; backdrop-filter: blur(8px); color: #fff; border-radius: 50%; font-size: 18px; box-shadow: inset 0 1px 0 #ffffff17,0 4px 16px #0002; transition: background .2s; }
.project-cover:hover .project-open { background: #fff; color: #15151c; }
.project-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 8px 10px; }
.project-meta h3 { margin: 0 0 5px; font-size: 16px; font-weight: 500; }
.project-meta p { color: #848498; margin: 0; font-size: 12px; }
.project-meta > span { flex: 0 0 auto; color: #8e8e9f; font-size: 9px; border: 1px solid var(--stroke); border-radius: 20px; padding: 3px 9px; }
.visual-digital { height: 355px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 40px; background: radial-gradient(ellipse at 74% 70%, #28215499, transparent 60%), #101018; padding: 35px 55px; }
.digital-wordmark { font: 600 17px Inter, sans-serif; color: #d4c9ff; letter-spacing: -.03em; }
.digital-copy h3 { font-size: 34px; line-height: 1.45; letter-spacing: -.06em; margin: 24px 0 11px; font-weight: 500; }
.digital-copy em { color: #ac9bf4; font-style: normal; }
.digital-copy > p { color: #9591a9; font-size: 11px; margin: 0 0 18px; }
.digital-pill { color: #e1d9ff; font-size: 9px; padding: 6px 11px; background: #ffffff0b; border: 1px solid #b3a2ff24; border-radius: 5px; }
.visual-digital .cover-concept-label { left: auto; right: 30px; bottom: 15px; }
.dashboard-art { background: linear-gradient(130deg, #232132, #191822); border: 1px solid #a59ae729; box-shadow: 0 20px 60px #0005; border-radius: 10px; padding: 20px; transform: perspective(800px) rotateY(-8deg); }
.dashboard-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #d2cde1; font-size: 10px; padding-bottom: 17px; border-bottom: 1px solid #ffffff0a; }
.dashboard-top span:last-child { color: #868097; font-size: 8px; }
.dashboard-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-block: 18px 10px; }
.dashboard-stats > span { display: block; color: #9791a8; font-size: 8px; }
.dashboard-stats strong { display: block; color: #e5e2f0; font-size: 16px; font-weight: 500; margin-top: 7px; }
.dashboard-stats i { color: #a89ae1; font-style: normal; font-size: 13px; padding-left: 6px; }
.dashboard-chart { height: 115px; position: relative; }
.dashboard-chart > svg { position: absolute; width: 100%; height: 100%; }
.chart-lines { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, #ffffff09 0 1px, transparent 1px 37px); }
.dashboard-bottom { display: flex; justify-content: space-between; gap: 8px; font-size: 8px; color: #8b869c; margin-top: 15px; }
.dashboard-bottom i { width: 4px; height: 4px; display: inline-block; border-radius: 50%; background: #8c7fc2; vertical-align: 2px; margin-right: 3px; }

.services-section { background: radial-gradient(ellipse 900px 500px at 100% 0,#314e7c28,transparent),linear-gradient(135deg,#111824,#0a101b); border-block: 1px solid #a7c2ef1a; }
.services-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.service-card { min-width: 0; position: relative; border: 1px solid #a9c1e82b; border-radius: 16px; padding: 30px 26px 25px; background: linear-gradient(150deg,#202b3d,#111926 65%); box-shadow: inset 0 1px 0 #d0e1ff0d,0 12px 30px #0002; transition: border-color .25s, transform .25s; }
.service-card::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg,transparent,#b4cbff66,transparent); }
.service-card:first-child { background: radial-gradient(ellipse at 0 0,#526ca43d,transparent 70%),linear-gradient(150deg,#202b3d,#111926 65%); border-color: #a9c1e84d; }
.service-card:hover { border-color: #657bd555; transform: translateY(-5px); }
.service-index { position: absolute; right: 24px; top: 28px; color: #8092b1; font: 11px Inter,sans-serif; }
.service-icon { display: grid; place-items: center; width: 48px; height: 48px; color: #bfd2ff; line-height: 1; margin: 0 0 28px; border: 1px solid #b0c9ff2e; border-radius: 13px; background: linear-gradient(140deg,#5b78a640,#20304a); box-shadow: inset 0 1px 0 #d6e6ff1a,0 6px 16px #0002; }
.service-icon-grid { font-size: 44px; }
.service-card h3 { margin: 0 0 12px; font-size: 20px; font-weight: 500; letter-spacing: -.04em; }
.service-card > p { color: #abb8ce; font-size: 14px; line-height: 1.95; margin: 0; min-height: 110px; }
.service-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 24px 0 28px; }
.service-tags > span { font-size: 9px; color: #93a5c3; border: 1px solid #b0c8ed1a; border-radius: 4px; padding: 3px 6px; background: #cadcff04; }
.service-card .text-link { font-size: 12px; width: 100%; border-top: 1px solid #ffffff0a; padding-top: 17px; }

/* Small, concrete demonstrations support each capability. */
.capability-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 18px; }
.capability-card { grid-column: span 2; border: 1px solid #a9c1e829; border-radius: 16px; overflow: hidden; background: linear-gradient(150deg,#172131,#0d1521); min-width: 0; box-shadow: inset 0 1px 0 #d1e1ff0c,0 10px 30px #0002; }
.capability-copy { padding: 25px 27px 28px; }
.feature-label { display: block; color: #94aee0; font-size: 10px; letter-spacing: .04em; margin-bottom: 10px; }
.capability-copy h3 { font-size: 20px; font-weight: 500; letter-spacing: -.04em; line-height: 1.5; margin: 0 0 11px; }
.capability-copy p { font-size: 14px; color: #a2afc6; line-height: 1.95; margin: 0; }
.capability-responsive, .capability-speed { grid-column: span 3; }
.capability-responsive { position: relative; height: 448px; background: radial-gradient(ellipse at 60% 100%,#3c537b66,transparent 70%),#121b2b; }
.capability-responsive .capability-copy { padding: 32px 32px 0; max-width: 380px; }
.capability-responsive .capability-copy h3 { font-size: 25px; }
.capability-responsive .capability-copy p { max-width: 300px; }
.device-switcher { position: absolute; right: 25px; top: 33px; display: flex; padding: 3px; border: 1px solid #ffffff0c; border-radius: 6px; background: #06060966; }
.device-switcher button { background: none; color: #74748c; padding: 5px 8px; font-size: 9px; border-radius: 4px; }
.device-switcher button[aria-pressed="true"] { color: #e0eaff; background: linear-gradient(145deg,#405779,#25364f); box-shadow: inset 0 1px 0 #bbd5ff1a; }
.responsive-demo { width: 79%; height: 225px; position: absolute; left: 10.5%; bottom: -12px; background: #2c2c32; padding: 5px 5px 0; border-radius: 10px 10px 0 0; border: 1px solid #4d4d5c; box-shadow: 0 0 50px #5d79ff0c; transition: width .5s, left .5s, border-radius .5s, height .5s; }
.demo-browser-bar { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px 8px; height: 25px; font: 6px Inter,sans-serif; color: #b0acb4; }
.demo-browser-bar .window-dots i { width: 4px; height: 4px; }
.demo-screen { position: relative; height: calc(100% - 25px); overflow: hidden; color: #fff6e5; }
.demo-screen > img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.8); }
.demo-screen > div { position: absolute; inset: 34px 20px auto; }
.demo-screen small { font-size: 6px; }
.demo-screen strong { display: block; font-size: 23px; font-weight: 450; letter-spacing: -.05em; line-height: 1.4; margin: 7px 0; }
.demo-screen > div > span { font-size: 6px; border-bottom: 1px solid #fff7; padding-bottom: 4px; }
.responsive-demo[data-device="mobile"] { width: 155px; left: calc(50% - 77.5px); border-radius: 18px 18px 0 0; height: 236px; padding: 6px 5px 0; }
.responsive-demo[data-device="mobile"] .demo-browser-bar { height: 20px; padding: 0 4px 5px; font-size: 5px; }
.responsive-demo[data-device="mobile"] .demo-screen { height: calc(100% - 20px); }
.responsive-demo[data-device="mobile"] .demo-screen > div { inset: 53px 13px auto; }
.responsive-demo[data-device="mobile"] .demo-screen strong { font-size: 20px; }
.capability-speed { position: relative; }
.capability-speed .capability-copy { padding: 12px 32px 20px; max-width: 430px; }
.capability-speed .capability-copy h3 { font-size: 25px; }
.speed-art { position: relative; height: 210px; display: grid; place-items: center; background: radial-gradient(ellipse at center,#1b2c6655,transparent 60%); }
.speed-core { position: absolute; z-index: 1; display: grid; place-items: center; width: 67px; height: 67px; border: 1px solid #7388df44; border-radius: 18px; color: #b2c4ff; font: 40px Inter,sans-serif; background: linear-gradient(135deg,#292e4f,#121322); box-shadow: inset 0 0 20px #7790ff0a,0 0 50px #3151c533; transform: rotate(-9deg); }
.speed-orbit { position: absolute; width: 135px; height: 135px; border: 1px solid #5966b921; border-radius: 50%; }
.orbit-two { width: 205px; height: 205px; border-color: #5966b916; }
.orbit-three { width: 275px; height: 275px; border-color: #5966b90a; }
.orbit-one::after { content: ""; position: absolute; left: 17px; top: 13px; width: 5px; height: 5px; border-radius: 50%; background: #829fff; box-shadow: 0 0 12px #5574f7; }
.orbit-one { animation: orbit-spin 16s linear infinite; }
.feature-checks { display: flex; flex-wrap: wrap; gap: 15px; padding: 0 32px 30px; color: #7c86ad; font-size: 9px; }
.mini-editor, .search-preview, .connection-art { margin: 26px 25px 0; height: 130px; }
.mini-editor { border: 1px solid #ffffff0c; border-radius: 7px; background: #15151f; padding: 12px 14px; }
.mini-editor > span { display: flex; justify-content: space-between; align-items: center; color: #7e7e94; font-size: 7px; }
.mini-editor b { font-weight: 400; font-size: 6px; color: #6f967f; }
.mini-editor b i { display: inline-block; width: 3px; height: 3px; background: #80a58c; border-radius: 50%; vertical-align: 1px; margin-left: 3px; }
.mini-editor > strong { font-size: 10px; font-weight: 450; color: #c6c4d6; display: block; margin: 13px 0 10px; }
.mini-editor-line { height: 3px; width: 90%; border-radius: 2px; background: #ffffff0b; margin-bottom: 6px; }
.mini-editor-line.short { width: 65%; }
.mini-editor-controls { font: 8px Inter,sans-serif; color: #77758b; border-top: 1px solid #ffffff09; padding-top: 8px; margin-top: 10px; }
.search-preview { display: flex; flex-direction: column; justify-content: center; }
.search-preview > span { display: flex; align-items: center; gap: 7px; font-size: 7px; color: #a4a2b5; }
.search-preview > strong { font-size: 12px; font-weight: 450; color: #a1b4ff; margin: 11px 0 7px; }
.search-preview > p { font-size: 8px; color: #69697f; line-height: 1.8; margin: 0; }
.connection-art { display: flex; justify-content: center; align-items: center; gap: 9px; background: radial-gradient(ellipse,#1a214c55,transparent 70%); }
.connection-art > span { font-size: 8px; color: #9294b1; padding: 8px; border: 1px solid #59608627; border-radius: 5px; background: #12131e; }
.connection-art > i { font-style: normal; color: #616b9d; font-size: 15px; }
.connection-art > svg { width: 35px; height: 35px; color: #aec3ff; flex: 0 0 auto; }

.process-section { background: linear-gradient(130deg,#111a29,#090f19); border-block: 1px solid #b3ceff17; }
.process-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; }
.process-intro { align-self: start; position: sticky; top: 130px; }
.process-intro > p:not(.eyebrow) { color: #9393a8; font-size: 14px; line-height: 2; margin: 25px 0; }
.process-decoration { position: relative; display: flex; align-items: center; gap: 9px; margin-top: 70px; color: #7e86af; font-size: 9px; width: max-content; padding: 23px 0; }
.process-decoration > span { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #6377c736; border-radius: 50%; background: #161829; }
.process-decoration > i { width: 21px; height: 1px; background: linear-gradient(90deg,#738cda88,#738cda11); }
.process-decoration > b { position: absolute; font-size: 28px; color: #536aab; right: -35px; top: 3px; font-weight: 400; }
.process-steps { position: relative; padding: 28px 30px; margin: 0; list-style: none; border: 1px solid #a9c1e82b; border-radius: 18px; background: linear-gradient(145deg,#1b2638,#101925); box-shadow: inset 0 1px 0 #d1e1ff0c,0 20px 50px #0002; }
.process-steps::before { content: ""; position: absolute; left: 46px; top: 50px; bottom: 70px; width: 1px; background: linear-gradient(#7b9ac766,#7b9ac711); }
.process-steps > li { display: grid; grid-template-columns: 34px 1fr; gap: 26px; padding: 0 0 31px; margin-bottom: 31px; border-bottom: 1px solid var(--stroke); }
.process-steps > li:last-child { margin-bottom: 0; border: 0; padding-bottom: 0; }
.process-steps > li > span { position: relative; display: grid; place-items: center; width: 32px; height: 32px; color: #bbd0f5; font: 11px Inter,sans-serif; border: 1px solid #98b8ec38; border-radius: 9px; background: #22324b; }
.process-steps h3 { font-size: 19px; letter-spacing: -.04em; font-weight: 500; margin: 0 0 11px; }
.process-steps p { font-size: 14px; line-height: 2; color: #a5b3cb; margin: 0 0 12px; }
.process-steps small { font-size: 9px; color: #64647b; }

.delivery-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 110px; align-items: center; }
.delivery-visual { position: relative; height: 500px; isolation: isolate; display: grid; place-items: center; }
.delivery-orbit { position: absolute; z-index: -1; width: 420px; height: 420px; border: 1px solid #6a74b715; border-radius: 50%; background: radial-gradient(ellipse,#202b6355,transparent 70%); }
.delivery-orbit::before { content: ""; position: absolute; inset: 35px; border: 1px solid #6a74b719; border-radius: 50%; }
.handoff-card { position: absolute; width: 288px; height: 330px; border: 1px solid #7583c72e; border-radius: 13px; background: linear-gradient(130deg,#20243c,#10121f 70%); box-shadow: 0 20px 60px #0005; }
.handoff-back { transform: translate(-26px,-25px) rotate(-9deg); padding: 20px; font-size: 9px; color: #7882aa; display: flex; justify-content: space-between; }
.handoff-front { transform: translate(16px,10px) rotate(5deg); padding: 23px; background: linear-gradient(145deg,#35476b,#17253e 70%); border-color: #bdcfff55; box-shadow: inset 0 1px 0 #e6f0ff33,0 24px 60px #0006; }
.handoff-top { display: flex; align-items: center; gap: 7px; color: #8e9bc6; font-size: 8px; }
.handoff-top svg { width: 20px; height: 20px; color: #b3c5ff; }
.handoff-top i { font-size: 14px; margin-left: auto; font-style: normal; }
.handoff-front > strong { display: block; font-size: 25px; font-weight: 500; line-height: 1.55; letter-spacing: -.05em; margin: 26px 0 23px; color: #dee5ff; }
.handoff-row { display: flex; justify-content: space-between; align-items: center; padding-block: 11px; border-top: 1px solid #ffffff0a; color: #969fbd; font-size: 9px; }
.handoff-row b { color: #8ca3f5; font-size: 12px; font-weight: 400; }
.delivery-label { position: absolute; bottom: 10px; font-size: 10px; color: #656b89; letter-spacing: .1em; }
.delivery-copy > p:not(.eyebrow) { color: #9797ac; font-size: 14px; line-height: 2; max-width: 400px; margin: 23px 0 28px; }
.delivery-list { padding: 0; margin: 0; list-style: none; }
.delivery-list > li { display: flex; gap: 14px; margin-block: 20px; }
.delivery-list > li > span { color: #8ba2fc; font-size: 12px; margin-top: 4px; }
.delivery-list h3 { font-size: 13px; font-weight: 500; color: #c2c2d0; margin: 0 0 3px; }
.delivery-list p { font-size: 12px; color: #85859b; line-height: 1.85; margin: 0; }

.plans-section { background: linear-gradient(180deg,#09090f,#08080d); border-block: 1px solid #ffffff06; }
.plans-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; padding-top: 10px; }
.plan-card { display: flex; flex-direction: column; position: relative; background: linear-gradient(145deg,#17202f,#0e1622); border: 1px solid #a9c1e829; border-radius: 16px; padding: 31px 27px 27px; box-shadow: inset 0 1px 0 #d1e1ff0c,0 18px 40px #0002; }
.plan-featured { background: radial-gradient(ellipse at 50% 0,#688ed13b,transparent 65%),linear-gradient(155deg,#293f69,#14223b 70%); border-color: #a9c4ff80; box-shadow: inset 0 1px 0 #d9e6ff38,0 24px 70px #294fa229; }
.plan-label { color: #96abcd; font-size: 11px; }
.plan-card h3 { margin: 16px 0 12px; font-size: 26px; font-weight: 500; letter-spacing: -.05em; }
.plan-card > p { color: #a4b3cb; font-size: 14px; line-height: 1.95; min-height: 55px; margin: 0; }
.plan-price { margin-top: 26px; padding-bottom: 24px; border-bottom: 1px solid #ffffff0d; font-size: 17px; letter-spacing: -.02em; color: #c4c7db; }
.plan-price > span { display: block; font-size: 9px; color: #71738c; letter-spacing: 0; margin-top: 5px; }
.plan-card ul { list-style: none; padding: 22px 0 24px; margin: 0 0 auto; color: #b5c3da; font-size: 13px; line-height: 1.9; }
.plan-card li { margin-bottom: 9px; display: flex; gap: 10px; }
.plan-card li::before { content: "✓"; color: #7e8dce; }
.plan-card .button { width: 100%; margin-top: 7px; font-size: 11px; min-height: 44px; }
.plan-recommend { position: absolute; top: -13px; left: 25px; font-size: 10px; font-weight: 600; background: linear-gradient(135deg,#dae7ff,#a7c0f5); color: #203658; border: 1px solid #eef4ff80; padding: 3px 12px; border-radius: 20px; box-shadow: 0 4px 14px #0002; }
.cost-note { margin-top: 33px; padding: 25px 20px 0; text-align: center; }
.cost-note > span { font-size: 12px; color: #a4a4b7; }
.cost-note > div { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 12px 0 9px; color: #858598; font-size: 10px; }
.cost-note i { color: #48516b; font-style: normal; }
.cost-note > p { font-size: 11px; color: #7c8ea9; margin: 0; }

.faq-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; }
.faq-intro > p:not(.eyebrow) { font-size: 12px; color: #7c7c90; line-height: 2; margin: 24px 0; }
.faq-list > details { border-bottom: 1px solid var(--stroke); }
.faq-list > details:first-child { border-top: 1px solid var(--stroke); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 25px; font-size: 14px; font-weight: 450; padding: 23px 0; color: #bebecd; list-style: none; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary > span { font: 21px Inter,sans-serif; color: #767c9c; transition: transform .2s; }
.faq-list details[open] summary > span { transform: rotate(45deg); }
.faq-list details[open] summary { color: #eeeff9; }
.faq-list details[open] { padding-inline: 20px; margin-block: 10px; border: 1px solid #91acd83b; border-radius: 12px; background: linear-gradient(145deg,#172234,#101925); box-shadow: inset 0 1px 0 #d1e1ff08; }
.faq-list details > p { color: #9494aa; font-size: 14px; line-height: 2.05; margin: -4px 29px 24px 0; }

.contact-section { position: relative; overflow: hidden; border-block: 1px solid #a4c0ef29; background: radial-gradient(ellipse 900px 700px at 0 0,#3f629d3d,transparent),linear-gradient(140deg,#111e33,#090f1a); }
.contact-section::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg,transparent,#b7d2ff99,transparent); }
.contact-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: start; }
.contact-intro { padding-top: 20px; }
.contact-intro .section-title { font-size: clamp(30px,3vw,41px); white-space: nowrap; letter-spacing: -.045em; }
.contact-intro .gradient-text { display: inline-block; padding-bottom: .12em; margin-bottom: -.12em; }
.contact-intro > p:not(.eyebrow) { font-size: 15px; line-height: 2; color: #a5b6d1; margin: 26px 0; }
.contact-principles { display: flex; gap: 12px; flex-wrap: wrap; color: #7e88ad; font-size: 10px; }
.contact-principles > span + span::before { content: "/"; color: #3e445d; padding-right: 12px; }
.contact-mark { display: flex; align-items: center; gap: 13px; margin-top: 80px; font-size: 10px; color: #4d577f; }
.contact-mark svg { width: 29px; height: 29px; color: #778cbf; opacity: .7; }
.contact-direct { margin-top: 27px; display: flex; gap: 18px; flex-wrap: wrap; color: #b2beeb; font-size: 12px; }
.contact-direct button, .contact-direct a { background: transparent; padding: 0; color: inherit; }
.project-form { border: 1px solid #b2ccff38; background: linear-gradient(155deg,#24324b,#131e31 70%); border-radius: 18px; padding: 30px; box-shadow: inset 0 1px 0 #e0ebff21,0 24px 65px #0004; }
.project-form.is-selected { border-color: #7287e0; box-shadow: 0 0 30px #4563df12; }
.form-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 26px; }
.form-heading h3 { font-size: 17px; font-weight: 500; margin: 0; letter-spacing: -.04em; }
.form-heading > span { font-size: 9px; color: #5f6685; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 15px; }
.project-form label { display: block; color: #bfcee5; font-size: 12px; line-height: 1.8; }
.required { color: #6e83c4; padding-left: 2px; }
.project-form input:not([type="hidden"]), .project-form select, .project-form textarea { display: block; width: 100%; min-width: 0; color: #dce8fa; background: #0b1423; border: 1px solid #a5c1eb26; border-radius: 8px; padding: 11px 12px; margin-top: 7px; font-size: 13px; line-height: 1.6; outline: 0; box-shadow: inset 0 2px 5px #0002; transition: border-color .2s; }
.project-form input:focus, .project-form select:focus, .project-form textarea:focus { border-color: #5066bd; }
.project-form input::placeholder, .project-form textarea::placeholder { color: #7c8ca7; opacity: 1; }
.project-form select { min-height: 42px; appearance: auto; color-scheme: dark; }
.project-form textarea { resize: vertical; min-height: 115px; }
.description-field { margin-top: 21px; }
.form-submit { width: 100%; margin-top: 24px; font-size: 12px; }
.form-note { color: #606076; font-size: 9px; line-height: 1.9; margin: 12px 0 0; }
.plan-field { margin-top: 20px; }
.optional { color: #787f9d; font-size: 10px; margin-left: 9px; }
.field-meta { display: flex; justify-content: space-between; gap: 15px; margin-top: 8px; color: #8a8a9f; font-size: 10px; line-height: 1.8; }
#description-count { flex-shrink: 0; font-family: Inter,sans-serif; font-variant-numeric: tabular-nums; }
.project-form [aria-invalid="true"] { border-color: #d78694; }
.field-error { color: #efacb7; margin: 6px 0 0; font-size: 11px; line-height: 1.8; }
.form-errors { color: #efacb7; margin: 15px 0 -8px; font-size: 11px; line-height: 1.8; }
.project-form input, .project-form select, .project-form textarea { scroll-margin-block: 110px; }
.form-note { color: #9292aa; }

/* Help visitors choose a direction without adding another full-page section. */
.plan-help { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 30px; padding: 25px 28px; border: 1px solid #5668ac30; border-radius: 10px; background: linear-gradient(110deg,#151a2c,#101017); }
.plan-help .feature-label { color: #d1d8f6; font-size: 15px; }
.plan-help p { margin: 8px 0 0; color: #9699ae; font-size: 13px; line-height: 1.8; }
.plan-help .button { font-size: 12px; flex-shrink: 0; }
.plan-comparison { border-bottom: 1px solid var(--stroke); margin-top: 14px; }
.plan-comparison summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 23px 4px; color: #b0b5cf; font-size: 13px; cursor: pointer; list-style: none; }
.plan-comparison summary::-webkit-details-marker { display: none; }
.plan-comparison summary > span { font: 21px Inter,sans-serif; color: #8e9ac5; transition: transform .2s; }
.plan-comparison[open] summary > span { transform: rotate(45deg); }
.comparison-scroll { overflow-x: auto; border: 1px solid var(--stroke); border-radius: 8px; scrollbar-width: thin; scrollbar-color: #3b4260 #101017; }
.plan-comparison table { width: 100%; min-width: 690px; border-collapse: collapse; font-size: 12px; line-height: 1.9; text-align: left; }
.plan-comparison th, .plan-comparison td { padding: 17px 20px; border-bottom: 1px solid var(--stroke); }
.plan-comparison thead { background: #151725; color: #cad4ff; }
.plan-comparison th { font-weight: 500; }
.plan-comparison tbody th { color: #b1b5cb; white-space: nowrap; }
.plan-comparison td { color: #9399b1; }
.plan-comparison tr:last-child > * { border-bottom: 0; }
.plan-comparison > p { color: #858aa2; font-size: 11px; line-height: 1.9; margin: 15px 0 22px; }
.plan-comparison > p > span { display: none; }

.site-footer { padding-block: 45px 25px; background: #060a12; }
.footer-main { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding-bottom: 39px; border-bottom: 1px solid var(--stroke); }
.footer-main .brand { font-size: 21px; }
.footer-main .brand-mark { width: 29px; height: 26px; }
.footer-main p { margin: 10px 0 0; font-size: 10px; color: #636378; }
.footer-main nav { display: flex; flex-wrap: wrap; gap: 30px; margin-left: auto; }
.footer-main nav a { font-size: 11px; color: #88889b; }
.footer-main nav a:hover { color: #cdd3ed; }
.back-top { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #ffffff15; border-radius: 50%; color: #9ca7d3; font: 19px Inter,sans-serif; }
.back-top:hover { background: #151725; }
.footer-bottom { padding-top: 22px; display: flex; justify-content: space-between; align-items: center; gap: 20px; color: #515166; font-size: 9px; }
.footer-bottom button { padding: 0; background: transparent; color: #77778f; font-size: 9px; }

/* Native dialogs keep keyboard focus and Escape behavior predictable. */
html.modal-open, body.modal-open { overflow: hidden; overscroll-behavior: none; }
.site-dialog { --dialog-height: min(88svh,1000px); position: fixed; max-width: calc(100vw - 32px); max-height: var(--dialog-height); overflow: hidden; width: 860px; padding: 0; border: 1px solid #abc5f542; border-radius: 16px; color: #ececf6; background: #141f31; box-shadow: inset 0 1px 0 #d1e1ff17,0 25px 100px #0009; }
.dialog-scroll { max-height: calc(var(--dialog-height) - 2px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; }
.site-dialog::backdrop { background: #020308c9; backdrop-filter: blur(7px); }
.site-dialog[open] { animation: dialog-enter .22s ease-out; }
.dialog-close { position: absolute; z-index: 5; right: 12px; top: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #b0c9ff33; border-radius: 50%; background: #111b2bed; color: #e8efff; line-height: 1; box-shadow: inset 0 1px 0 #e3ecff12; }
.dialog-close .arrow-icon { width: 18px; height: 18px; }
.dialog-close:hover { background: #252536; }
.dialog-art { overflow: hidden; border-bottom: 1px solid var(--stroke); }
.dialog-art .project-visual { height: 350px; }
.dialog-art .concept-navigation { padding-top: 65px; }
.dialog-art .visual-digital { padding: 30px 45px; gap: 25px; }
.dialog-art .digital-copy h3 { font-size: 29px; }
.dialog-content { padding: 35px 38px; }
.dialog-content > h2 { font-size: 27px; font-weight: 500; letter-spacing: -.045em; line-height: 1.5; margin: 0 0 15px; }
.dialog-content > .eyebrow { font-size: 9px; margin-bottom: 13px; }
.dialog-description { color: #a1a1b7; font-size: 14px; line-height: 2; margin: 0 0 25px; }
.project-detail-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 25px 0 30px; }
.project-detail-columns h3 { font-size: 12px; color: #c5c9dd; font-weight: 500; margin: 0 0 12px; }
.project-detail-columns ul { color: #9797ae; font-size: 13px; line-height: 1.95; margin: 0; padding-left: 16px; }
.brief-dialog { width: 650px; }
.brief-dialog .dialog-content { padding-top: 42px; }
#brief-output { width: 100%; resize: vertical; min-height: 240px; max-height: 40svh; border: 1px solid #ffffff13; border-radius: 7px; background: #090910; color: #aeb3d0; padding: 18px; font-size: 11px; font-family: inherit; line-height: 1.9; }
.brief-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.brief-actions .button { font-size: 11px; min-height: 43px; padding: 9px 15px; gap: 15px; }
.guide-dialog { --dialog-height: min(94svh,1000px); width: 720px; }
.guide-dialog .dialog-content { padding-top: 35px; padding-bottom: 28px; }
.guide-dialog .eyebrow { margin-bottom: 10px; }
.guide-dialog .dialog-content > h2 { font-size: 25px; margin-bottom: 8px; }
.guide-dialog .dialog-description { margin-bottom: 20px; font-size: 13px; }
.guide-question { border: 0; margin: 0 0 19px; padding: 0; min-width: 0; }
.guide-question legend { color: #d6daed; font-size: 14px; margin-bottom: 14px; }
.guide-question legend > span { color: #758acb; font: 11px Inter,sans-serif; margin-right: 10px; }
.guide-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.guide-options label { position: relative; cursor: pointer; }
.guide-options input { position: absolute; top: 17px; left: 14px; width: 15px; height: 15px; margin: 0; accent-color: #7d98ff; appearance: auto; -webkit-appearance: auto; }
.guide-options label > span { display: block; height: 100%; padding: 14px 13px 14px 39px; border: 1px solid #ffffff15; border-radius: 8px; color: #b6bad0; font-size: 13px; line-height: 1.7; background: #0b0b12; }
.guide-options small { display: block; margin-top: 4px; color: #80879f; font-size: 10px; }
.guide-options input:checked + span { background: #202a4a77; border-color: #7b94f18c; color: #e3eaff; }
.guide-options input:focus-visible + span { outline: 2px solid #9eb3ff; outline-offset: 3px; }
.guide-scopes { grid-template-columns: repeat(3,1fr); }
.guide-scopes small { display: block; margin-top: 4px; }
.guide-result { background: linear-gradient(125deg,#1b2547,#121724); border: 1px solid #6f88d947; border-radius: 9px; padding: 16px 22px; }
.guide-result > span { font-size: 10px; color: #8f9dcb; }
.guide-result h3 { color: #dbe5ff; font-size: 25px; font-weight: 500; margin: 9px 0; }
.guide-result p { font-size: 13px; line-height: 1.9; margin: 0; color: #a5b1d4; }
.guide-submit { width: 100%; margin-top: 22px; font-size: 13px; }
.guide-back { display: block; margin: 10px auto -10px; min-height: 40px; padding: 8px 15px; background: transparent; color: #a0a7c0; font-size: 12px; }
.brief-edit { margin-top: 18px; font-size: 12px; }
.info-dialog { width: 530px; }
.info-dialog .dialog-content { padding-top: 45px; }
.info-dialog p:not(.eyebrow) { color: #9292a8; font-size: 12px; line-height: 2.1; margin: 17px 0; }
.info-dialog .button { margin-top: 15px; }
.site-notice { position: fixed; z-index: 100; left: 50%; bottom: 30px; max-width: calc(100% - 32px); width: max-content; padding: 12px 19px; border: 1px solid #7185da45; border-radius: 8px; background: #181c32f2; backdrop-filter: blur(10px); color: #d7dfff; font-size: 12px; box-shadow: 0 10px 45px #0006; opacity: 0; pointer-events: none; transform: translate(-50%,10px); transition: transform .2s, opacity .2s; }
.site-notice.is-visible { opacity: 1; transform: translate(-50%,0); }
.js-ready .reveal { opacity: 0; transform: translateY(19px); transition: opacity .65s, transform .65s cubic-bezier(.2,.7,.2,1); }
.js-ready .reveal.is-visible { opacity: 1; transform: none; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1600px) { .section-space { padding-block: 125px; } }
@media (max-width: 1100px) {
  .section-shell, .nav-shell { width: calc(100% - 64px); }
  .nav-links { gap: 20px; }
  .nav-shell { gap: 20px; }
  .hero-stage { width: calc(100% - 70px); }
  .hero-preview { width: 72%; }
  .hero-stage[data-device="mobile"] .hero-preview { right: 10%; }
  .section-heading { gap: 35px; }
  .section-heading-aside { max-width: 370px; font-size: 13px; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .service-card { padding: 28px; }
  .service-card > p { min-height: 48px; }
  .service-icon { margin-bottom: 25px; }
  .service-tags { margin-top: 20px; }
  .project-visual { height: 345px; }
  .visual-digital { height: 330px; padding-inline: 35px; gap: 20px; }
  .digital-copy h3 { font-size: 29px; }
  .capability-copy { padding: 22px; }
  .capability-copy h3 { font-size: 17px; }
  .capability-responsive .capability-copy { padding: 28px 26px 0; }
  .device-switcher { right: 19px; top: 27px; }
  .process-layout, .faq-layout { gap: 60px; }
  .delivery-layout { gap: 45px; }
  .delivery-orbit { width: 350px; height: 350px; }
  .plans-grid { gap: 13px; }
  .plan-card { padding: 28px 22px; }
  .contact-layout { gap: 45px; }
  .contact-intro .section-title { font-size: 32px; }
  .project-form { padding: 25px; }
  .connection-art { margin-inline: 12px; gap: 6px; }
  .connection-art > span { padding: 6px; font-size: 7px; }
}
@media (max-width: 850px) {
  .nav-shell { height: 74px; }
  .menu-toggle { display: block; }
  .nav-links { display: none; position: absolute; left: 0; right: 0; top: 74px; max-height: calc(100svh - 74px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; background: #0b0b12fa; border-bottom: 1px solid #ffffff12; padding: 12px 32px 24px; }
  .menu-toggle { width: 44px; height: 44px; flex: 0 0 44px; }
  .brand { min-height: 44px; }
  .text-link { min-height: 44px; }
  .footer-main nav a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
  .back-top { width: 44px; height: 44px; }
  .footer-bottom button, .brief-actions .button, .guide-back { min-height: 44px; }
  .filter-list button { min-height: 44px; }
  .device-switcher button { min-width: 64px; min-height: 44px; font-size: 11px; }
  .hero-stage .search-field { min-height: 44px; }
  .hero-stage .search-field input { min-height: 44px; font-size: 16px; }
  .hero-stage .editor-scene, .hero-stage .editor { height: 284px; }
  .hero-stage .toolbar { height: 60px; padding-inline: 8px; gap: 4px; }
  .hero-stage .canvas-switcher { flex: 1; min-width: 0; }
  .hero-stage .canvas-button { width: 100%; height: 44px; padding: 0; gap: 5px; font-size: 14px; }
  .hero-stage .canvas-mark { width: 18px; height: 18px; }
  .hero-stage .chevron { width: 12px; height: 12px; flex-shrink: 0; }
  .hero-stage .tool-buttons { gap: 0; }
  .hero-stage .tool-button { width: 44px; height: 44px; }
  .hero-stage .panel-tabs { height: 60px; margin-right: 0; padding-inline: 12px; }
  .hero-stage .panel-tab { min-width: 64px; height: 44px; font-size: 14px; }
  .hero-stage .search-row { margin-right: 0; padding: 10px 12px; }
  .hero-stage .search-field { width: 100%; height: 44px; }
  .hero-stage .panel-content { height: 100px; padding: 15px 12px; overscroll-behavior: contain; }
  .hero-stage .panel-content h2 { font-size: 14px; }
  .hero-stage .panel-item { min-height: 44px; font-size: 14px; }
  .hero-stage .canvas-menu { top: 50px; width: 185px; }
  .hero-stage .canvas-menu button { min-height: 44px; font-size: 14px; }
  .project-form input:not([type="hidden"]), .project-form select, .project-form textarea, #brief-output { font-size: 16px; }
  .site-dialog { --dialog-height: calc(100svh - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  .dialog-content { padding-top: 60px; }
  .brief-dialog .dialog-content, .guide-dialog .dialog-content, .info-dialog .dialog-content { padding-top: 60px; }
  .site-header.menu-is-open .nav-links { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a { font-size: 14px; padding: 12px 2px; border-bottom: 1px solid #ffffff08; }
  .nav-actions { gap: 12px; }
  .hero-content { padding-top: 135px; }
  .hero-stage { height: 470px; }
  .hero-preview { top: 20px; width: 75%; }
  .hero-stage .editor-scene { --u: .9px; top: 80px; }
  .preview-content { height: 320px; }
  .preview-copy h3 { font-size: 35px; }
  .preview-copy { left: 30px; top: 105px; }
  .preview-nav-links { display: none; }
  .stage-caption { bottom: 35px; }
  .section-space { padding-block: 88px; }
  .section-heading { align-items: flex-start; }
  .section-heading-aside { max-width: 300px; font-size: 12px; }
  .section-title { font-size: 34px; }
  .projects-grid { gap: 30px 20px; }
  .project-visual { height: 300px; }
  .concept-navigation { padding: 20px; }
  .concept-navigation > span { display: none; }
  .concept-title { left: 20px; font-size: 27px; }
  .visual-lifestyle .concept-title { font-size: 26px; }
  .cover-concept-label { left: 20px; }
  .visual-digital { height: 310px; padding: 25px 28px; }
  .digital-copy h3 { font-size: 25px; }
  .dashboard-art { padding: 13px; }
  .dashboard-stats strong { font-size: 12px; }
  .capability-responsive { grid-column: span 4; }
  .capability-speed { grid-column: span 2; }
  .capability-speed .capability-copy { padding: 14px 21px; }
  .capability-speed .capability-copy h3 { font-size: 21px; }
  .feature-checks { padding: 10px 21px 22px; gap: 7px; }
  .capability-grid > .capability-card:not(.capability-responsive):not(.capability-speed) { grid-column: span 3; }
  .capability-grid > .capability-contact { grid-column: 1 / -1 !important; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .connection-art { margin: 15px 20px; }
  .process-layout { grid-template-columns: .8fr 1.2fr; gap: 35px; }
  .process-steps > li { gap: 12px; }
  .process-intro .section-title { font-size: 29px; }
  .delivery-layout { gap: 25px; }
  .delivery-visual { transform: scale(.88); }
  .delivery-copy .section-title { font-size: 30px; }
  .plans-grid { grid-template-columns: 1fr; gap: 28px; }
  .plan-card { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; padding: 27px 30px; }
  .plan-card > .plan-label, .plan-card > h3, .plan-card > p, .plan-card > .plan-price { grid-column: 1; }
  .plan-card > h3 { margin-top: 10px; }
  .plan-card > ul { grid-column: 2; grid-row: 1 / 5; padding-top: 3px; }
  .plan-card > .button { grid-column: 2; grid-row: 5; align-self: end; }
  .plan-price { margin-top: 15px; border-bottom: 0; padding-bottom: 0; }
  .faq-layout { gap: 45px; grid-template-columns: .75fr 1.25fr; }
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .contact-intro { position: relative; padding: 0; }
  .contact-intro .section-title { font-size: 39px; }
  .contact-mark { position: absolute; right: 0; bottom: 4px; margin: 0; }
  .project-form { padding: 32px; }
  .footer-main { gap: 25px; }
  .footer-main nav { gap: 17px; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 90px; }
  .section-shell, .nav-shell { width: calc(100% - 44px); }
  .nav-shell { height: 72px; }
  .brand { font-size: 20px; gap: 2px; line-height: 24px; min-height: 44px; }
  .brand-mark { width: 28px; height: 24px; }
  .nav-contact { font-size: 12px; gap: 9px; padding: 7px 10px; min-height: 44px; white-space: nowrap; }
  .nav-contact span { font-size: 15px; }
  .nav-actions { gap: 10px; }
  .nav-links { top: 72px; padding-inline: 24px; max-height: calc(100svh - 72px - env(safe-area-inset-bottom, 0px)); }
  .section-space { padding-block: 73px; }
  .eyebrow { font-size: 11px; margin-bottom: 18px; }
  .section-title { font-size: 31px; line-height: 1.45; }
  .section-heading { display: block; margin-bottom: 30px; }
  .section-heading-aside { max-width: none; margin-top: 22px; font-size: 13px; }
  .button { min-height: 45px; font-size: 12px; padding: 10px 17px; gap: 19px; }
  .hero-content { width: calc(100% - 36px); padding-top: 122px; }
  .hero-eyebrow { font-size: 9px; letter-spacing: .06em; margin-bottom: 20px; }
  .hero h1 { font-size: clamp(25px, 7.45vw, 38px); line-height: 1.4; letter-spacing: -.04em; }
  .hero-description { font-size: 13px; margin-top: 20px; line-height: 2; }
  .hero-actions { gap: 9px; margin-top: 23px; }
  .hero-actions .button { font-size: 11px; gap: 18px; }
  .hero-stage { width: calc(100% - 44px); height: 540px; margin-top: 50px; }
  .hero-stage .editor-scene { --u: min(1px, calc((100vw - 44px) / 372)); top: 0; left: 0; }
  .hero-preview { width: calc(100% - 16px); right: 0; top: 200px; transform: none; border-radius: 9px; }
  .preview-bar { height: 29px; font-size: 7px; padding-inline: 10px; gap: 10px; }
  .preview-badge { font-size: 6px; }
  .preview-content { height: 230px; }
  .preview-site-nav { inset: 16px 18px auto; font-size: 10px; }
  .preview-copy { top: 70px; left: 23px; }
  .preview-copy > span:first-child { font-size: 7px; }
  .preview-copy h3 { font-size: 29px; margin: 9px 0 13px; }
  .preview-small-link { font-size: 6px; gap: 25px; padding-bottom: 4px; }
  .preview-location { font-size: 5px; bottom: 12px; right: 12px; }
  .preview-footer { min-height: 32px; font-size: 6px; padding-inline: 17px; }
  .preview-footer span:last-child { font-size: 14px; }
  .stage-caption { bottom: 7px; left: 0; font-size: 8px; }
  .stage-caption > span { font-size: 7px; display: inline; padding-left: 10px; }
  .hero-stage[data-device="mobile"] { height: 680px; }
  .hero-stage[data-device="mobile"] .hero-preview { width: 190px; right: 12px; top: 304px; border-width: 3px; border-radius: 16px; }
  .hero-stage[data-device="mobile"] .preview-content { height: 270px; }
  .hero-stage[data-device="mobile"] .preview-bar { height: 24px; }
  .hero-stage[data-device="mobile"] .preview-copy { top: 90px; left: 17px; }
  .hero-stage[data-device="mobile"] .preview-copy h3 { font-size: 30px; }
  .hero-stage[data-device="mobile"] .preview-site-nav { font-size: 8px; inset: 12px 13px auto; }
  .hero-stage[data-device="mobile"] .preview-footer { font-size: 5px; padding-inline: 10px; }
  .hero .ambient-halo { top: 410px; left: -140px; width: 600px; height: 360px; }
  .hero .ambient-core { top: 430px; left: -85px; width: 430px; height: 230px; }
  .hero::before { background: radial-gradient(ellipse 420px 280px at 50% 190px,#1e315733,transparent 90%),radial-gradient(ellipse 400px 430px at 50% 590px,#0d1749,#070d20 65%,transparent); }
  .hero::after { background-size: 64px 64px; }
  .hero-pillars { grid-template-columns: 1fr 1fr; row-gap: 20px; margin-top: 20px; padding-block: 22px; }
  .hero-pillars > span { font-size: 10px; gap: 12px; }
  .hero-pillars > span:nth-child(2) { border-right: 0; }
  .hero-pillars i { font-size: 16px; }
  .concept-note { font-size: 9px; margin-top: 12px; }
  .work-toolbar { gap: 10px; margin-bottom: 20px; }
  .filter-list { gap: 2px; }
  .filter-list button { font-size: 11px; padding: 7px 9px; min-height: 44px; }
  .work-count { display: none; }
  .projects-grid { grid-template-columns: 1fr; gap: 30px; }
  .project-digital { grid-column: auto; }
  .project-visual { height: 310px; }
  .concept-title { font-size: 28px; left: 23px; bottom: 53px; }
  .concept-navigation { padding: 22px; }
  .concept-navigation b { font-size: 12px; }
  .concept-navigation > span { display: block; font-size: 6px; }
  .visual-lifestyle .concept-title { top: 95px; }
  .project-meta { padding-top: 16px; }
  .project-meta { gap: 10px; padding: 18px 5px 8px; }
  .project-meta h3 { font-size: 15px; }
  .project-meta p { font-size: 11px; }
  .project-meta > span { font-size: 8px; padding: 3px 7px; }
  .visual-digital { display: block; height: 390px; padding: 24px; }
  .digital-wordmark { font-size: 13px; }
  .digital-copy h3 { font-size: 25px; margin: 18px 0 10px; }
  .digital-copy > p, .digital-pill { display: none; }
  .dashboard-art { position: absolute; width: 75%; right: -6px; top: 172px; transform: perspective(800px) rotateY(-7deg) rotate(-3deg); padding: 16px; }
  .dashboard-chart { height: 84px; }
  .dashboard-stats { margin-block: 13px 6px; }
  .dashboard-stats strong { font-size: 13px; }
  .dashboard-bottom { margin-top: 7px; font-size: 6px; }
  .visual-digital .cover-concept-label { left: 24px; right: auto; bottom: 16px; font-size: 7px; }
  .services-grid { grid-template-columns: 1fr; gap: 14px; }
  .service-card { padding: 25px; }
  .service-card h3 { font-size: 21px; }
  .service-card > p { min-height: 0; max-width: 290px; }
  .service-icon { margin: 0 0 24px; width: 48px; height: 48px; }
  .service-tags { margin: 20px 0 22px; }
  .service-tags > span { font-size: 9px; padding-inline: 7px; }
  .service-card .text-link { font-size: 12px; }
  .capability-grid { display: block; }
  .capability-card { margin-bottom: 15px; }
  .capability-responsive { height: auto; }
  .capability-responsive .capability-copy { padding: 27px 25px 0; }
  .capability-responsive .capability-copy p { max-width: none; }
  .capability-responsive .capability-copy h3 { font-size: 24px; }
  .device-switcher { position: static; width: max-content; margin: 20px 25px 0; }
  .device-switcher button { font-size: 12px; padding: 7px 13px; min-width: 64px; min-height: 44px; }
  .responsive-demo, .responsive-demo[data-device="mobile"] { position: relative; left: auto; bottom: -10px; margin: 24px auto 0; }
  .capability-speed { padding-bottom: 8px; }
  .speed-art { height: 180px; }
  .capability-speed .capability-copy { max-width: none; padding: 12px 25px 20px; }
  .capability-speed .capability-copy h3 { font-size: 23px; }
  .feature-checks { padding: 0 25px 24px; gap: 18px; }
  .capability-copy { padding: 23px 25px 27px; }
  .capability-copy h3 { font-size: 20px; }
  .capability-grid > .capability-contact { display: block; }
  .mini-editor, .search-preview, .connection-art { max-width: 310px; margin-inline: auto; width: calc(100% - 50px); }
  .mini-editor { height: 138px; }
  .mini-editor > span { font-size: 8px; }
  .mini-editor > strong { font-size: 12px; }
  .mini-editor-controls { font-size: 9px; }
  .search-preview { height: 125px; }
  .search-preview > span { font-size: 9px; }
  .search-preview > strong { font-size: 15px; }
  .search-preview > p { font-size: 9px; }
  .connection-art { margin-block: 25px 0; }
  .connection-art > span { font-size: 9px; padding: 9px; }
  .process-layout { grid-template-columns: 1fr; gap: 43px; }
  .process-intro { position: static; }
  .process-steps { padding: 24px 20px; border-radius: 16px; }
  .process-steps::before { left: 34px; top: 44px; bottom: 65px; }
  .process-steps > li > span { width: 28px; height: 28px; font-size: 10px; }
  .process-intro .section-title { font-size: 31px; }
  .process-decoration { display: none; }
  .process-intro > p:not(.eyebrow) { font-size: 12px; margin-block: 20px; }
  .process-steps > li { gap: 14px; padding-bottom: 26px; margin-bottom: 26px; grid-template-columns: 28px 1fr; }
  .process-steps h3 { font-size: 18px; }
  .process-steps small { font-size: 9px; }
  .delivery-layout { display: flex; flex-direction: column; gap: 45px; padding-top: 50px; }
  .delivery-visual { order: 1; width: 100%; height: 365px; transform: scale(.93); }
  .delivery-orbit { width: 330px; height: 330px; }
  .handoff-card { width: 250px; height: 292px; }
  .handoff-front { padding: 20px; transform: translate(12px,0) rotate(5deg); }
  .handoff-front > strong { font-size: 23px; margin: 19px 0 17px; }
  .handoff-row { font-size: 8px; padding-block: 10px; }
  .handoff-back { transform: translate(-16px,-23px) rotate(-9deg); }
  .delivery-label { bottom: -8px; }
  .delivery-copy { order: 0; width: 100%; }
  .delivery-copy .section-title { font-size: 31px; }
  .delivery-copy > p:not(.eyebrow) { font-size: 13px; margin-bottom: 25px; }
  .delivery-list > li { margin-block: 20px; }
  .delivery-list h3 { font-size: 13px; }
  .delivery-list p { font-size: 12px; }
  .plans-grid { gap: 25px; }
  .plan-card { display: flex; padding: 28px; }
  .plan-card h3 { font-size: 27px; margin-top: 14px; }
  .plan-card > p { min-height: 0; }
  .plan-price { margin-top: 23px; padding-bottom: 22px; border-bottom: 1px solid var(--stroke); font-size: 18px; }
  .plan-card ul { padding: 21px 0; font-size: 12px; }
  .plan-card li { margin-bottom: 10px; }
  .plan-card .button { font-size: 12px; margin-top: 5px; }
  .cost-note { padding-inline: 0; margin-top: 25px; }
  .cost-note > div { gap: 7px; font-size: 8px; line-height: 2; }
  .cost-note > span { font-size: 11px; }
  .cost-note > p { font-size: 10px; line-height: 1.8; }
  .plan-help { align-items: flex-start; flex-direction: column; gap: 18px; padding: 23px; }
  .plan-help p { font-size: 12px; }
  .plan-help .button { width: 100%; }
  .plan-comparison summary { font-size: 12px; line-height: 1.9; }
  .plan-comparison th, .plan-comparison td { padding: 14px 17px; }
  .plan-comparison > p { font-size: 10px; }
  .plan-comparison > p > span { display: block; margin-top: 7px; color: #b2bddd; }
  .faq-layout { grid-template-columns: 1fr; gap: 30px; }
  .faq-intro > p:not(.eyebrow) { margin-block: 20px; font-size: 13px; }
  .faq-list summary { padding-block: 21px; gap: 14px; font-size: 13px; }
  .faq-list details > p { font-size: 13px; line-height: 2.05; margin-right: 20px; }
  .faq-list details[open] { padding-inline: 16px; }
  .contact-layout { gap: 32px; }
  .contact-intro .section-title { font-size: 30px; }
  .contact-intro > p:not(.eyebrow) { font-size: 13px; margin-block: 22px; }
  .contact-principles { font-size: 9px; gap: 8px; }
  .contact-principles > span + span::before { padding-right: 8px; }
  .contact-mark { display: none; }
  .project-form { padding: 24px 21px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-heading { margin-bottom: 24px; }
  .form-heading h3 { font-size: 16px; }
  .form-heading > span { font-size: 10px; }
  .form-heading > span { display: none; }
  .form-grid { gap: 16px 11px; }
  .project-form label { font-size: 12px; }
  .project-form input:not([type="hidden"]), .project-form select, .project-form textarea { font-size: 16px; padding: 11px 10px; }
  .form-submit { font-size: 13px; }
  .form-note { font-size: 10px; }
  .field-meta { gap: 8px; font-size: 9px; }
  .site-footer { padding-block: 37px calc(25px + env(safe-area-inset-bottom, 0px)); }
  .footer-main { flex-wrap: wrap; align-items: flex-start; gap: 28px; padding-bottom: 30px; }
  .footer-main nav { order: 2; margin: 0; width: 100%; gap: 0; justify-content: space-between; }
  .footer-main nav a { display: inline-flex; align-items: center; font-size: 12px; min-height: 44px; min-width: 44px; }
  .back-top { margin-left: auto; width: 44px; height: 44px; font-size: 19px; }
  .footer-bottom { font-size: 11px; gap: 10px; flex-wrap: wrap; }
  .footer-bottom > span:nth-child(2) { display: none; }
  .footer-bottom button { font-size: 11px; min-height: 44px; }
  .text-link { min-height: 44px; }
  .site-dialog { max-width: calc(100vw - 22px); border-radius: 11px; }
  .dialog-content { padding: 60px 25px 25px; }
  .dialog-content > h2 { font-size: 23px; }
  .dialog-content > .eyebrow { font-size: 8px; }
  .dialog-art .project-visual { height: 270px; }
  .dialog-art .concept-navigation { padding-top: 65px; }
  .dialog-art .visual-digital { height: 365px; padding: 23px; }
  .dialog-art .digital-copy h3 { font-size: 25px; }
  .dialog-art .dashboard-art { top: 165px; }
  .project-detail-columns { grid-template-columns: 1fr; gap: 19px; }
  .project-detail-columns ul { font-size: 11px; }
  .project-dialog .button { width: 100%; }
  .brief-dialog .dialog-content { padding: 60px 23px 25px; }
  .guide-dialog .dialog-content { padding: 60px 23px 25px; }
  .info-dialog .dialog-content { padding-top: 60px; }
  .info-dialog p:not(.eyebrow) { font-size: 13px; }
  .guide-dialog .dialog-content > h2 { font-size: 22px; }
  .guide-question legend { font-size: 13px; }
  .guide-options { grid-template-columns: 1fr 1fr; }
  .guide-scopes { grid-template-columns: 1fr; }
  .guide-options label > span { padding-block: 13px; }
  .guide-options small { display: block; margin: 3px 0 0; }
  .guide-result { padding: 18px; }
  .guide-result p { font-size: 12px; }
  .brief-actions { gap: 8px; }
  .brief-actions .button { flex: 1; min-width: 120px; min-height: 44px; font-size: 12px; gap: 8px; padding-inline: 12px; }
  #brief-output { font-size: 16px; padding: 13px; }
  .guide-back { min-height: 44px; }
  .site-notice { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); font-size: 11px; padding: 10px 15px; }
}
@media (max-width: 360px) {
  .section-shell, .nav-shell { width: calc(100% - 36px); }
  .hero h1 { font-size: 25px; }
  .hero-eyebrow { font-size: 8px; }
  .nav-contact { font-size: 11px; padding: 7px 8px; }
  .nav-actions { gap: 4px; }
  .hero-stage { width: calc(100% - 36px); }
  .hero-stage .editor-scene { --u: calc((100vw - 36px) / 372); }
  .hero-stage .canvas-button { font-size: 12px; gap: 4px; }
  .hero-stage .canvas-mark { width: 16px; height: 16px; }
  .hero-actions .button { padding-inline: 12px; gap: 12px; font-size: 10px; }
  .hero-actions .button-primary > span[aria-hidden] { width: 20px; height: 20px; border-radius: 6px; }
  .section-title, .process-intro .section-title, .delivery-copy .section-title { font-size: 28px; }
  .contact-intro .section-title { font-size: 26px; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-principles { font-size: 8px; }
  .hero-pillars > span { font-size: 9px; }
  .project-visual { height: 280px; }
  .visual-digital { height: 370px; }
  .concept-navigation > span { font-size: 5px; }
  .service-card { padding: 23px; }
  .capability-responsive .capability-copy h3 { font-size: 22px; }
  .device-switcher { right: 13px; }
  .device-switcher button { font-size: 12px; }
  .guide-options:not(.guide-scopes) label > span { padding: 12px 9px 12px 30px; font-size: 12px; }
  .guide-options:not(.guide-scopes) input { left: 9px; width: 13px; height: 13px; }
  .guide-options:not(.guide-scopes) small { font-size: 9px; }
  .delivery-orbit { width: 280px; height: 280px; }
  .handoff-card { width: 232px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-ready .reveal { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 319px) {
  .nav-shell { gap: 12px; }
  .nav-contact { font-size: 10px; gap: 5px; padding-inline: 7px; }
  .hero-stage .canvas-button { font-size: 11px; white-space: nowrap; }
  .hero-stage .canvas-mark, .hero-stage .canvas-button .chevron { display: none; }
}

/* Keep readable text inputs when a phone rotates beyond the compact layout. */
@media (pointer: coarse) {
  .project-form input:not([type="hidden"]), .project-form select, .project-form textarea, #brief-output, .search-field input { font-size: 16px; }
  .brand, .text-link, .button, .panel-tab, .canvas-button, .tool-button, .panel-item, .filter-list button, .device-switcher button, .footer-bottom button, .guide-back { min-height: 44px; }
  .tool-button, .device-switcher button { min-width: 44px; }
  .footer-main nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .back-top { width: 44px; height: 44px; }
}