/* ULUARTS / bright ideas, approachable expertise. */

:root {
  color-scheme: light;
  --ink: #1b3150;
  --paper: #f8f8f3;
  --dark: #f8f8f3;
  --dark2: #eef2f8;
  --soft: #eaf0f7;
  --accent: #2858c5;
  --muted: #52647b;
  --line: #d3dce7;
  --strong-line: #8498b1;
  --on-accent: #ffffff;
  --cta: #c74930;
  --cta-hover: #ad3822;
}
body { background: var(--paper); color: var(--ink); }
::selection { background: #edf2f8; color: #4b607b; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline-color: #4b607b; }
.skip-link,.noscript-note { color: var(--on-accent); }
.site-header { background: #edf2f8; border-color: var(--line); height: 88px; }
.site-header .brand { color: var(--ink); }
.desktop-nav { color: #4b607b; }
.button,.hero .button { background: var(--accent); border-color: var(--accent); color: var(--on-accent); border-radius: 5px; box-shadow: none; }
.button:hover,.hero .button:hover { background: #edf2f8; border-color: #cdd8e6; box-shadow: 0 6px 22px #24457512; }
.header-consult { background: #edf2f8; border-color: #cdd8e6; color: #4b607b; }
.header-consult:hover { color: var(--on-accent); }
.status-dot { background: var(--accent); box-shadow: none; }
.menu-toggle>span { background: var(--ink); }
.mobile-nav { background: #edf2f8; border-color: var(--line); color: var(--ink); }
.hero { min-height: 740px; max-width: none; padding: 85px 6% 0; background: radial-gradient(ellipse at 78% 40%,#edf2f8,transparent 48%),linear-gradient(140deg,#edf2f8,#edf2f8); color: var(--ink); grid-template-columns: 1.1fr 1fr; }
.hero-grid { opacity: .23; background-image: linear-gradient(#415969 1px,transparent 1px),linear-gradient(90deg,#415969 1px,transparent 1px); background-size: 76px 76px; mask-image: linear-gradient(90deg,transparent 25%,#0008 70%,transparent); }
.hero-copy { padding-bottom: 75px; }
.hero .eyebrow { color: #4b607b; font-size: 10px; letter-spacing: 1.7px; }
.hero .status-dot { background: var(--accent); box-shadow: none; }
.hero h1 { font-size: clamp(64px,6.5vw,100px); letter-spacing: -.065em; margin: 28px 0 27px; line-height: 1.34; color: var(--ink); }
.hero h1>span { color: #4b607b; white-space: nowrap; }
.hero-lead { color: var(--ink); font-size: 18px; }
.hero-description { color: #4b607b; font-size: 14px; line-height: 2.05; }
.hero-actions { gap: 24px; margin-top: 30px; }
.hero .text-link { color: #4b607b; font-size: 12px; }
.play-icon { border-color: #cdd8e6; }
.hero-note { color: #4b607b; font-size: 11px; }
.hero-note>span { border-color: #cdd8e6; }
.hero-art { margin: -20px -20px 0 0; min-height: 525px; }
.hero-art:before { background: radial-gradient(ellipse,#edf2f8,transparent 68%); }
.art-orbit { border-color: #cdd8e6; width: 85%; height: 73%; left: 8%; top: 10%; }
.orbit-two { border-color: #cdd8e6; width: 108%; height: 33%; top: 33%; left: -4%; }
.art-label { color: #4b607b; border: 0; border-radius: 0; padding: 0; top: 6px; right: 15px; font-size: 9px; transform: none; letter-spacing: 2px; }
.art-coordinate { color: #4b607b; left: 18px; bottom: 32px; font-size: 9px; }
.u-monogram { inset: 35px 0 60px; filter: drop-shadow(10px 30px 20px #050e2266); }
.u-tilt { width: 85%; max-width: 480px; }
.motion-toggle { width: 44px; height: 44px; color: #4b607b; border-color: #cdd8e6; background: #edf2f8; bottom: 25px; right: 5px; }
.work-signal { position: absolute; z-index: 2; display: flex; align-items: flex-start; gap: 13px; padding: 17px 21px; border: 1px solid #cdd8e6; background: #edf2f8; border-radius: 8px; backdrop-filter: blur(16px); box-shadow: 0 16px 40px #24457512; }
.signal-knowledge { left: 0; top: 68px; }
.signal-workflow { right: -5px; bottom: 90px; }
.signal-icon { display: grid; place-items: center; color: #4b607b; background: #edf2f8; border: 1px solid #cdd8e6; width: 30px; height: 30px; border-radius: 5px; font-size: 23px; }
.work-signal>div>span { display: block; font-size: 8px; letter-spacing: 1.5px; color: #4b607b; margin-bottom: 7px; }
.work-signal strong { display: block; font-size: 12px; color: #4b607b; font-weight: 500; }
.signal-lines { display: flex; gap: 4px; margin-top: 12px; }
.signal-lines i { height: 3px; width: 48px; background: #edf2f8; border-radius: 4px; }
.signal-lines i:nth-child(2) { width: 36px; background: #edf2f8; }
.signal-lines i:nth-child(3) { width: 21px; background: #edf2f8; }
.signal-steps { display: flex; align-items: center; margin-top: 13px; }
.signal-steps i { width: 8px; height: 8px; border: 1px solid #cdd8e6; border-radius: 2px; }
.signal-steps i:last-child { background: #edf2f8; }
.signal-steps b { width: 38px; height: 1px; background: #edf2f8; }
.hero-bottom { color: #4b607b; border-color: #cdd8e6; }
.scroll-cue,.scroll-cue span,.hero-bottom i { color: #4b607b; }
.work-principle { padding: 28px 7%; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #edf2f8; border-block: 1px solid #cdd8e6; }
.principle-label { font-size: 10px; letter-spacing: 1.8px; color: #4b607b; }
.work-principle>div { display: flex; align-items: center; gap: 38px; font-size: 15px; letter-spacing: .04em; }
.work-principle i { font-style: normal; color: #4b607b; }
.work-principle strong { font-weight: 500; color: #4b607b; }
.section-light { background: var(--paper); color: var(--ink); }
.services,.experience,.about,.process,.faq { padding-inline: 7%; }
.section-label,.experience .section-label { color: #4b607b; font-size: 11px; }
.section-number { border-color: #cdd8e6; opacity: 1; color: #4b607b; }
.section-intro p,.experience .section-intro p { color: var(--muted); font-size: 14px; }
.section-intro h2 { font-size: clamp(28px,3vw,42px); }
.service-row,.service-row:last-child { border-color: var(--line); }
.service-row:hover { background: #edf2f8; }
.service-no,.service-title>span { color: #4b607b; }
.service-title>span { font-size: 10px; }
.service-row p,.service-foot p { color: #4b607b; font-size: 13px; }
.round-arrow { border-color: #cdd8e6; color: #4b607b; }
.service-row:hover .round-arrow { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.service-glyph span { border-color: #cdd8e6; background: #edf2f8; }
.little-star { color: #4b607b; }
.underlined-link { color: #4b607b; font-size: 12px; min-height: 44px; }
.experience { background: #edf2f8; color: var(--ink); border-block: 1px solid var(--line); }
.accent-text { color: #4b607b; }
.demo-shell { background: #edf2f8; border-color: #cdd8e6; border-radius: 12px; box-shadow: 0 20px 60px #24457512; }
.demo-toolbar { border-color: var(--line); color: #4b607b; background: #edf2f8; font-size: 10px; }
.demo-tag { background: #edf2f8; color: #4b607b; font-size: 10px; }
.demo-tabs,.demo-tabs button+button { border-color: #cdd8e6; }
.demo-tabs button { color: #4b607b; }
.demo-tabs button[aria-selected=true] { background: #edf2f8; color: #4b607b; border-bottom-color: var(--accent); }
.demo-tabs button:hover { background: #edf2f8; }
.demo-story { border-color: #cdd8e6; }
.demo-state-label { color: #4b607b; }
.demo-state-label>span:first-child:before { background: var(--accent); }
.demo-step,.reset-demo { color: #4b607b; }
.demo-story p { color: #4b607b; font-size: 13px; }
.demo-stage { background-color: #edf2f8; background-image: radial-gradient(#6a86974d 1px,transparent 1px); }
.demo-stage:before { background: radial-gradient(ellipse,transparent,#edf2f8); }
.demo-bottom { background: #edf2f8; border-color: #cdd8e6; }
.demo-bottom p { color: #4b607b; font-size: 11px; }
.demo-bottom .underlined-link { color: #4b607b; font-size: 11px; }
.scatter-card { background: #edf2f8; color: #4b607b; border-color: #cdd8e6; box-shadow: 0 9px 30px #24457512; }
.scatter-card:nth-child(2) { background: #edf2f8; }
.scatter-card:nth-child(3) { background: #edf2f8; }
.scatter-card .card-channel { border-color: #cdd8e6; color: #4b607b; }
.scatter-card p { color: #4b607b; font-size: 11px; }
.scatter-card .mini-line { background: #edf2f8; }
.scattered-label { color: #4b607b; }
.dashboard { background: #edf2f8; color: #4b607b; box-shadow: 0 15px 35px #24457512; }
.dashboard-head,.dashboard-metrics { border-color: #cdd8e6; }
.dashboard-head .status-dot { background: var(--accent); }
.dashboard-head small,.dashboard-metrics span { color: #4b607b; }
.dashboard-table th { background: #edf2f8; color: #4b607b; }
.dashboard-table td { border-color: #cdd8e6; }
.dashboard-table td:last-child { color: #4b607b; }
.dashboard-status { background: #edf2f8; color: #4b607b; }
.dashboard-note { color: #4b607b; }
.demo-search { border-color: #cdd8e6; background: #edf2f8; }
.demo-search input { color: var(--ink); }
input::placeholder,textarea::placeholder { color: #4b607b; opacity: 1; }
.knowledge-result { border-color: #cdd8e6; }
.knowledge-result span { color: #4b607b; }
.project-board { background: #edf2f8; }
.board-column { background: #edf2f8; }
.board-column>h4 { color: #4b607b; }
.project-card { background: #edf2f8; border-color: #cdd8e6; }
.project-card small { color: #4b607b; }
.project-card button { background: #edf2f8; color: #4b607b; }
.transforming:after { color: #4b607b; }
.about-copy>p { color: #4b607b; font-size: 14px; }
.about-lead { color: var(--ink)!important; font-size: 25px!important; }
.outlined-word { color: #4b607b; -webkit-text-stroke: 0; }
.values>div { border-color: var(--line); font-size: 14px; }
.values>div>span { color: #4b607b; }
.process,.faq { border-color: var(--line); }
.process { background: #edf2f8; }
.process-grid,.process-grid article+article,.process-grid article:nth-child(3),.process-grid article:nth-child(4) { border-color: #cdd8e6; }
.process-grid article:first-child { background: #edf2f8; }
.process-top,.process-en { color: #4b607b; }
.pill { border-color: #cdd8e6; color: #4b607b; }
.process-grid p { color: #4b607b; font-size: 13px; }
.cost-note p { color: #4b607b; font-size: 13px; }
.cost-note strong { font-size: 13px; }
.faq-list details,.faq-list details:first-child { border-color: #cdd8e6; }
.faq-list summary { font-size: 14px; }
.faq-list summary>span { color: #4b607b; }
.faq-list summary i:before,.faq-list summary i:after { border-color: #cdd8e6; }
.faq-list details>p { color: #4b607b; font-size: 13px; }
.editorial-photo { background: #edf2f8; border-color: #cdd8e6; border-radius: 8px; }
.editorial-photo img { filter: saturate(.48) brightness(.78); }
.editorial-photo figcaption,.about-photo figcaption,.consult-photo figcaption { background: #edf2f8; border-color: #cdd8e6; color: #4b607b; }
.editorial-photo figcaption small { color: #4b607b; font-size: 10px; }
.services-photo { display: grid; grid-template-columns: 1.16fr 1fr; }
.services-photo img { aspect-ratio: 1.7/1; height: 100%; object-position: 50% 35%; }
.services-photo figcaption { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 35px 40px; gap: 15px; border-top: 0; border-left: 1px solid #cdd8e6; background: #edf2f8; }
.services-photo figcaption>span { color: #4b607b; font-size: 10px; }
.services-photo figcaption strong { color: #4b607b; font-size: clamp(24px,2.3vw,33px); line-height: 1.7; }
.services-photo figcaption p { color: #4b607b; font-size: 13px; line-height: 1.95; }
.services-photo figcaption small { align-self: flex-start; margin-top: 6px; }
.about-photo img,.consult-photo img { filter: saturate(.48) brightness(.8); }
.consult-scene { background: #edf2f8; border-color: var(--line); }
.consult-scene .section-label { color: #4b607b; }
.consult-scene-copy>p { color: #4b607b; font-size: 14px; }
.consult-scene .underlined-link { color: #4b607b; font-size: 13px; }
.contact { color: var(--ink); background: radial-gradient(ellipse at 90% 15%,#edf2f8,transparent 55%),#edf2f8; border-top: 1px solid #cdd8e6; }
.contact .section-label { color: #4b607b; }
.contact-kicker,.contact-bottom>p { color: #4b607b; }
.contact-star { color: #4b607b; animation: none; opacity: .7; }
.contact-button { color: var(--on-accent); background: var(--accent); box-shadow: none; }
.contact-button:hover { background: #edf2f8; }
.contact-meta { color: #4b607b; font-size: 10px; }
.site-footer { background: #edf2f8; color: var(--ink); }
.footer-top>p,.footer-bottom,.footer-bottom a { color: #4b607b; font-size: 11px; }
.footer-bottom { border-color: var(--line); }
.back-top { border-color: #cdd8e6; }
dialog { background: #edf2f8; border-color: #cdd8e6; color: var(--ink); box-shadow: 0 40px 120px #24457512; }
dialog::backdrop { background: #edf2f8; }
.dialog-top .eyebrow { color: #4b607b; }
.dialog-close { background: #edf2f8; color: var(--ink); width: 44px; height: 44px; }
.dialog-intro>p { color: #4b607b; font-size: 13px; }
form label,form legend { color: #4b607b; font-size: 13px; }
form input:not([type=checkbox]):not([type=radio]),form textarea { color: var(--ink); border-color: #cdd8e6; background: #edf2f8; font-size: 16px; }
.topic-options span { border-color: #cdd8e6; font-size: 12px; }
.topic-options input:checked+span { background: #edf2f8; border-color: #cdd8e6; color: #4b607b; }
.topic-options input:focus-visible+span { outline-color: #4b607b; }
.required,.optional { color: #4b607b; font-size: 10px; }
.consent { font-size: 12px; }
.consent input { accent-color: var(--accent); }
.form-status { color: #4b607b; font-size: 13px; }
.form-footnote,#review-list dt { color: #4b607b; font-size: 11px; }
.delivery-note { background: #edf2f8; color: #4b607b; font-size: 13px; }
#review-list dd { font-size: 14px; }
.detail-hero { color: var(--ink); background: radial-gradient(ellipse at 80% 20%,#edf2f8,transparent 60%),#edf2f8; border-color: var(--line); }
.detail-hero .breadcrumbs { color: #4b607b; }
.detail-hero .eyebrow { color: #4b607b; }
.detail-hero>p { color: #4b607b; font-size: 14px; }
.detail-content { background: var(--paper); }
.detail-content p,.detail-content li { color: #4b607b; font-size: 14px; }
.detail-features article { border-color: #cdd8e6; }
.detail-features article>span { color: #4b607b; }
.detail-callout { background: #edf2f8; border-color: #cdd8e6; border-radius: 8px; }
.privacy-content .policy-meta { color: #4b607b; }
@media (min-width:1500px) { .hero { min-height: 820px; padding-top: 95px; } .hero-description { font-size: 15px; } }
@media (max-width:1100px) {
  .hero { padding-top: 65px; min-height: 685px; }
  .hero h1 { font-size: clamp(55px,6.5vw,72px); }
  .hero-actions { flex-wrap: wrap; gap: 18px; }
  .hero-art { margin-right: -18px; }
  .signal-knowledge { left: -12px; top: 75px; }
  .signal-workflow { right: 0; bottom: 120px; }
  .work-signal { padding: 14px; gap: 10px; }
  .work-signal strong { font-size: 11px; }
  .work-principle>div { gap: 23px; font-size: 14px; }
  .services-photo figcaption { padding: 25px; }
  .service-row { gap: 15px; grid-template-columns: 30px 1fr 1.25fr 65px 40px; }
  .service-row p { font-size: 12px; }
  .process-grid article { padding-inline: 18px; }
}
@media (max-width:800px) {
  .site-header { height: 80px; }
  .mobile-nav { top: 80px; }
  .hero { grid-template-columns: 1fr 1fr; padding-top: 50px; }
  .hero h1 { font-size: clamp(49px,6.6vw,58px); }
  .hero-lead { font-size: 15px; }
  .hero-art { margin-left: -30px; min-height: 480px; }
  .u-monogram { inset: 80px 0 70px; }
  .u-tilt { width: 94%; }
  .art-label { top: 30px; right: 10px; font-size: 8px; }
  .signal-knowledge { left: 5px; top: 77px; }
  .signal-workflow { right: 0; bottom: 75px; }
  .work-signal { padding: 12px; gap: 9px; }
  .signal-icon { display: none; }
  .work-principle { flex-direction: column; gap: 18px; padding: 25px 6%; }
  .services-photo { grid-template-columns: 1fr 1fr; }
  .services-photo img { aspect-ratio: auto; }
  .services-photo figcaption { padding: 25px 22px; }
  .services-photo figcaption strong { font-size: 24px; }
  .services-photo figcaption p { font-size: 12px; }
  .service-row { grid-template-columns: 25px minmax(0,1fr) 70px 40px; }
  .service-row p { grid-column: 2/3; font-size: 13px; }
  .service-glyph { grid-row: 1/3; grid-column: 3; }
  .service-row .round-arrow { grid-row: 1/3; grid-column: 4; }
  .about { gap: 7%; }
  .about-lead { font-size: 22px!important; }
  .about-copy>p { font-size: 13px; }
  .section-intro p { font-size: 13px; }
  .process-grid p { font-size: 13px; }
}
@media (max-width:540px) {
  .site-header { height: 74px; }
  .mobile-nav { top: 74px; }
  .hero { display: flex; padding: 42px 6% 0; min-height: 0; }
  .hero-copy { padding: 0; }
  .hero .eyebrow { font-size: 9px; letter-spacing: 1.05px; }
  .hero h1 { font-size: clamp(44px,12.5vw,66px); margin: 26px 0 22px; line-height: 1.38; }
  .hero-lead { font-size: clamp(14px,3.7vw,17px); letter-spacing: 0; }
  .hero-description { font-size: 13px; line-height: 2; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 25px; }
  .hero-actions .button { width: 100%; flex: auto; font-size: 13px; padding: 18px 21px; }
  .hero-actions .text-link { font-size: 12px; align-self: flex-start; }
  .hero-note { font-size: 10px; margin-top: 7px; }
  .hero-art { margin: 22px 0 0; min-height: 345px; height: 345px; }
  .u-monogram { inset: 20px 0 25px; }
  .u-tilt { width: 75%; max-width: 290px; }
  .art-label { top: 4px; right: 0; font-size: 8px; }
  .art-coordinate { bottom: 21px; left: 0; font-size: 7px; }
  .art-orbit { top: 12%; height: 75%; left: 8%; width: 85%; }
  .orbit-two { top: 38%; height: 30%; left: 0; width: 100%; }
  .signal-knowledge { left: 0; top: 43px; }
  .signal-workflow { right: 0; bottom: 63px; }
  .work-signal { padding: 12px 13px; border-radius: 6px; }
  .work-signal>div>span { font-size: 7px; margin-bottom: 6px; }
  .work-signal strong { font-size: 10px; }
  .signal-lines { margin-top: 10px; }
  .signal-lines i { width: 31px; }
  .signal-steps { margin-top: 10px; }
  .signal-steps b { width: 27px; }
  .motion-toggle { bottom: 8px; right: 0; }
  .hero-bottom { margin-top: 12px; padding: 19px 0; }
  .work-principle { align-items: flex-start; gap: 14px; padding-block: 23px; }
  .principle-label { font-size: 9px; }
  .work-principle>div { width: 100%; justify-content: space-between; gap: 7px; font-size: 11px; letter-spacing: 0; }
  .services,.experience,.about,.process,.faq,.consult-scene { padding: 66px 6%; }
  .section-label { font-size: 10px; }
  .section-intro h2,.faq h2 { font-size: clamp(24px,6.8vw,29px); }
  .section-intro p { font-size: 13px; }
  .section-intro p br { display: none; }
  .services-photo { display: block; }
  .services-photo img { aspect-ratio: 1.6/1; height: auto; object-position: 50% 36%; }
  .services-photo figcaption { padding: 23px; border-left: 0; border-top: 1px solid #cdd8e6; gap: 10px; }
  .services-photo figcaption strong { font-size: 25px; }
  .services-photo figcaption p { font-size: 13px; }
  .editorial-photo figcaption small { font-size: 10px; }
  .service-row { grid-template-columns: 22px minmax(0,1fr) 32px; gap: 9px; }
  .service-row .round-arrow { grid-column: 3; }
  .service-glyph { display: none; }
  .service-title>span { font-size: 9px; }
  .service-title h3 { font-size: 22px; }
  .service-row p { font-size: 12px; }
  .service-row p br { display: none; }
  .service-foot { flex-wrap: wrap; }
  .service-foot p { font-size: 12px; }
  .service-foot .underlined-link { margin-left: 44px; font-size: 12px; }
  .demo-toolbar { font-size: 8px; letter-spacing: .4px; }
  .demo-tag { font-size: 9px; }
  .demo-tabs button { font-size: 11px; }
  .demo-story p,.demo-bottom p { font-size: 12px; }
  .demo-stage { padding: 22px 14px; }
  .demo-bottom .underlined-link { font-size: 12px; }
  .about h2 { font-size: clamp(28px,8.2vw,35px); }
  .about-copy>p { font-size: 14px; }
  .about-lead { font-size: 23px!important; }
  .values>div { font-size: 13px; }
  .process-grid article { padding: 22px 17px; }
  .process-grid h3 { font-size: 16px; }
  .process-grid p { font-size: 12px; }
  .cost-note p,.faq-list details>p { font-size: 13px; }
  .cost-note p br { display: none; }
  .faq-list summary { font-size: 13px; }
  .consult-scene-copy>p { font-size: 14px; }
  .contact { padding: 45px 6%; }
  .contact h2 { font-size: clamp(35px,10vw,48px); }
  .contact-bottom>p { font-size: 13px; }
  .contact-meta { font-size: 10px; letter-spacing: .6px; }
  .footer-top>p,.footer-bottom,.footer-bottom a { font-size: 10px; }
  .detail-hero>p,.detail-content p,.detail-content li { font-size: 14px; }
  .detail-hero>p br { display: none; }
  .topic-options span { font-size: 12px; }
  .consent { font-size: 12px; }
}
@media(prefers-reduced-motion:reduce) { .work-signal { backdrop-filter: none; } }

/* Clear color roles: blue for expertise, vermilion for consultation. */
::selection { background: #d6e3ff; color: #173779; }
.site-header { position: sticky; top: 0; background: #f8f8f3f5; backdrop-filter: blur(14px); z-index: 20; }
.desktop-nav a:hover,.text-link:hover { color: #2858c5; }
.mobile-nav { position: fixed; top: 88px; z-index: 19; background: #f8f8f3; max-height: calc(100dvh - 88px); overflow-y: auto; }
.mobile-nav a { border-color: #d3dce7; }
.mobile-nav a>span { color: #52647b; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline-color: #2858c5; }
.button,.hero .button { background: var(--accent); border-color: var(--accent); color: white; border-radius: 8px; }
.button:hover,.hero .button:hover { background: #1e439b; border-color: #1e439b; color: white; }
.button.consult-open,.hero .button.consult-open,.contact-button { background: var(--cta); border-color: var(--cta); color: #fff; box-shadow: 0 8px 20px #b13e2020; }
.button.consult-open:hover,.hero .button.consult-open:hover,.contact-button:hover { background: var(--cta-hover); border-color: var(--cta-hover); color: #fff; box-shadow: 0 10px 24px #b13e2030; }
.underlined-link { color: #2858c5; }
.underlined-link.consult-open { color: #a73a25; }
.hero { min-height: 710px; padding: 70px 6% 0; background: #f8f8f3; grid-template-columns: 1.05fr 1fr; gap: 0 5%; }
.hero-grid { background-image: radial-gradient(#96afd352 1px,transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(90deg,transparent 45%,black); opacity: .55; }
.hero-copy { padding-bottom: 63px; }
.hero .eyebrow { color: #2854b7; font-size: 12px; letter-spacing: .05em; }
.hero .status-dot { background: #2858c5; }
.hero h1 { font-size: clamp(49px,4.9vw,76px); line-height: 1.48; letter-spacing: -.065em; margin: 28px 0 25px; }
.hero h1>span { color: #2858c5; position: relative; z-index: 0; }
.hero h1>span:after { content: ''; position: absolute; height: .14em; background: #e8d389; left: 0; right: 0; bottom: .07em; z-index: -1; border-radius: 50%; transform: rotate(-1deg); }
.hero-lead { color: #1b3150; font-size: 17px; letter-spacing: -.02em; }
.hero-description { color: #52647b; font-size: 14px; line-height: 2.05; }
.hero-actions { flex-wrap: wrap; gap: 18px; margin-top: 29px; }
.hero-actions .button { font-size: 14px; min-height: 59px; padding: 19px 25px; }
.hero .text-link { color: #2858c5; font-size: 12px; }
.hero-assurances { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 19px; color: #40566e; font-size: 11px; }
.hero-assurances span:before { content: '✓'; margin-right: 7px; color: #2a6c59; font-weight: 700; }
.hero-note { color: #5b6879; font-size: 11px; margin-top: 9px; }
.hero-art { margin: 0; min-height: 540px; }
.hero-art:before { inset: 50px -25px 40px 0; border-radius: 46% 46% 34% 38%; background: #e3eee9; transform: rotate(-8deg); }
.art-orbit { display: none; }
.art-label { color: #526d8b; top: 3px; right: auto; left: 6px; font-size: 10px; }
.u-monogram { inset: -43px -15px auto auto; width: 150px; height: 160px; z-index: 3; filter: drop-shadow(7px 14px 10px #2445751a); }
.u-tilt { width: 100%; max-width: none; }
.hero-workspace { position: absolute; top: 92px; left: 4%; right: 0; background: #fff; border: 1px solid #c8d5e6; border-radius: 16px; transform: rotate(-3deg); box-shadow: 0 24px 60px #223d7420; overflow: hidden; z-index: 2; }
.workspace-top { display: flex; align-items: center; gap: 13px; padding: 15px 19px; background: #edf2fb; border-bottom: 1px solid #d3deee; }
.workspace-top>strong { color: #2a487e; font-size: 9px; letter-spacing: 1.2px; }
.workspace-top>span:last-child { margin-left: auto; font-size: 9px; color: #5c6e86; white-space: nowrap; }
.workspace-dots { display: flex; gap: 4px; }
.workspace-dots i { width: 5px; height: 5px; border-radius: 50%; background: #97aed1; }
.workspace-content { padding: 20px 23px 6px; }
.workspace-greeting { position: relative; padding: 0 0 15px; }
.workspace-greeting>span:first-child { font-size: 8px; letter-spacing: 1.5px; color: #526d93; }
.workspace-greeting h3 { font-size: 24px; line-height: 1.5; color: #243c63; letter-spacing: -.04em; margin-top: 9px; }
.workspace-spark { position: absolute; right: 14px; top: 17px; font-size: 46px; color: #2a5ac7; }
.workspace-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid #e0e6ef; }
.app-icon { width: 38px; height: 38px; border-radius: 10px; background: #e7edfb; color: #2858c5; display: grid; place-items: center; font-size: 21px; flex-shrink: 0; }
.app-icon-mint { background: #e0f0e7; color: #36715b; }
.app-icon-sand { background: #f7edcf; color: #7a5a20; }
.workspace-row strong { display: block; color: #253c5c; font-size: 12px; font-weight: 600; }
.workspace-row small { display: block; color: #5f6f84; font-size: 10px; margin-top: 6px; }
.workspace-check { color: #376f5e; margin-left: auto; font-size: 13px; }
.workspace-link { display: flex; align-items: center; justify-content: space-between; padding: 17px 24px; font-size: 12px; color: #2858c5; background: #f2f5fc; border-top: 1px solid #dae3f2; font-weight: 600; }
.workspace-link:hover { background: #e5edfb; }
.idea-sticker { position: absolute; z-index: 4; bottom: 46px; left: -30px; display: flex; align-items: center; gap: 13px; padding: 17px 23px; background: #f2d786; border: 1px solid #d9bd6d; border-radius: 10px; transform: rotate(3deg); box-shadow: 0 10px 25px #7f672210; }
.idea-sticker>span { font-size: 32px; color: #685222; }
.idea-sticker small { display: block; font-size: 8px; color: #67532b; letter-spacing: 1px; }
.idea-sticker strong { display: block; font-size: 13px; font-weight: 600; color: #463b25; margin-top: 5px; }
.art-coordinate { display: none; }
.motion-toggle { color: #45617d; background: #f8f8f3; border-color: #9fb1c3; right: 0; bottom: 6px; }
.hero-bottom { border-color: #d3dce7; color: #536880; }
.hero-bottom i,.scroll-cue,.scroll-cue span { color: #2858c5; }
.needs-entry { padding: 33px 7% 39px; background: #edf2fb; border-block: 1px solid #d3dff0; }
.needs-entry>div:first-child { display: flex; align-items: baseline; gap: 25px; margin-bottom: 19px; }
.needs-entry>div>span { color: #526c91; font-size: 9px; letter-spacing: 1.5px; }
.needs-entry h2 { font-size: 18px; font-weight: 600; color: #23416d; }
.needs-links { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.needs-links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px; background: #fff; border: 1px solid #c4d3e9; border-radius: 9px; font-size: 13px; color: #24477d; transition: border-color .2s,transform .2s; }
.needs-links a:hover { border-color: #2858c5; transform: translateY(-2px); }
.needs-links i { font-style: normal; font-size: 19px; color: #2858c5; }
.section-label,.experience .section-label { color: #2858c5; }
.section-number { color: #2858c5; border-color: #9aafd4; }
.service-title>span,.service-no { color: #426495; }
.service-row:hover { background: #eef3fb; }
.service-row:hover .round-arrow { color: #fff; }
.service-glyph span { border-color: #6087ce; background: #dbe6fa70; }
.accent-text,.outlined-word { color: #2858c5; }
.experience { background: #eaf0fa; border-color: #d3deef; }
.demo-shell { background: #fff; border-color: #bbcbe2; box-shadow: 0 16px 45px #2445750d; }
.demo-toolbar { background: #f8faff; }
.demo-tag { background: #e2eaf8; color: #3e5d8c; }
.demo-tabs button[aria-selected=true] { background: #e7efff; color: #244fac; border-bottom-color: #2858c5; }
.demo-stage { background-color: #f3f6fb; background-image: radial-gradient(#a4b9d375 1px,transparent 1px); }
.demo-stage:before { background: radial-gradient(ellipse,transparent,#f3f6fb70); }
.demo-story h3 { color: #243c63; }
.demo-bottom { background: #f2f6fc; }
.scatter-card,.dashboard { background: #fff; color: #243b5c; border-color: #bac9df; }
.scatter-card:nth-child(2) { background: #e9f0ff; }
.scatter-card:nth-child(3) { background: #faf0d2; }
.scatter-card .mini-line { background: #c5d4e7; }
.dashboard-table th { background: #edf3fc; }
.dashboard-table td:last-child { color: #2b6654; }
.dashboard-status { background: #e1f0e8; color: #2b6654; }
.demo-search { background: #fff; border-color: #8a9fbf; }
.board-column { background: #eaf0f9; }
.project-card { background: #fff; border-color: #c0cee1; }
.project-card button { background: #2858c5; color: #fff; }
.about { background: #f8f8f3; }
.editorial-photo img,.about-photo img,.consult-photo img { filter: none; }
.editorial-photo { border-color: #d5ddd9; }
.editorial-photo figcaption,.about-photo figcaption,.consult-photo figcaption,.services-photo figcaption { background: #f0f3eb; color: #496449; border-color: #d5ddd9; }
.services-photo figcaption strong { color: #253d36; }
.services-photo figcaption>span { color: #416a53; }
.services-photo figcaption p,.editorial-photo figcaption small { color: #556759; }
.process { background: #f0f4fa; }
.process-grid article:first-child { background: #e0ebfc; }
.process-top,.process-en { color: #3b5f92; }
.pill { border-color: #95aaca; color: #36578a; }
.consult-scene { background: #edf3ec; }
.consult-scene .section-label { color: #446c50; }
.consult-scene .underlined-link { color: #a73a25; }
.contact { background: #e9effb; border-color: #c5d4ee; color: #1b3150; padding-top: 60px; }
.contact h2 { font-size: clamp(42px,5.6vw,74px); color: #244fac; }
.contact .section-label { color: #2858c5; }
.contact-kicker,.contact-bottom>p,.contact-meta { color: #4c6282; }
.contact-star { color: #2858c5; opacity: 1; }
.consult-benefits { display: flex; flex-wrap: wrap; gap: 14px 27px; margin-bottom: 35px; font-size: 13px; color: #365580; }
.consult-benefits b { color: #2858c5; font-family: monospace; font-size: 11px; margin-right: 7px; }
.site-footer { background: #f8f8f3; }
dialog { background: #f9faf7; color: #1b3150; border-color: #c2cfdd; }
dialog::backdrop { background: #20365380; }
.dialog-close { background: #e6edf5; }
form label,form legend { color: #314864; }
form input:not([type=checkbox]):not([type=radio]),form textarea { background: #fff; border-color: #879ab3; }
input::placeholder,textarea::placeholder { color: #63748b; }
.topic-options span { background: #fff; border-color: #879ab3; }
.topic-options input:checked+span { color: #244fac; background: #e3edff; border-color: #2858c5; }
.topic-options input:focus-visible+span { outline-color: #2858c5; }
.form-submit,#send-consult { background: var(--cta); border-color: var(--cta); color: #fff; }
.form-submit:hover,#send-consult:hover { background: var(--cta-hover); border-color: var(--cta-hover); }
.form-status { color: #a73322; }
.delivery-note { background: #e8effb; color: #344f75; }
.detail-hero { background: #edf2fb; color: #1b3150; }
.detail-hero .eyebrow { color: #2858c5; }
.detail-callout { background: #eaf0fb; border-color: #c2d2eb; }
@media(min-width:1500px) { .hero { min-height: 780px; padding-top: 85px; } .hero h1 { font-size: 78px; } .hero-art { min-height: 570px; } .hero-workspace { top: 100px; left: 6%; right: 5%; } .idea-sticker { bottom: 65px; } }
@media(max-width:1100px) { .hero { gap: 0 4%; padding-top: 60px; } .hero h1 { font-size: clamp(44px,4.9vw,56px); } .hero-lead { font-size: 15px; } .hero-art { min-height: 540px; } .hero-workspace { top: 100px; left: 0; right: 0; } .u-monogram { width: 135px; top: -22px; right: -12px; } .workspace-content { padding-inline: 17px; } .workspace-top { padding-inline: 15px; gap: 8px; } .workspace-top>strong { font-size: 8px; } .workspace-row { gap: 9px; } .workspace-row strong { font-size: 11px; } .workspace-row small { font-size: 9px; } .idea-sticker { left: -12px; bottom: 42px; padding: 15px; } .idea-sticker strong { font-size: 12px; } }
@media(max-width:800px) { .site-header { height: 80px; } .mobile-nav { top: 80px; max-height: calc(100dvh - 80px); } .hero { grid-template-columns: 1fr; padding: 45px 6% 0; } .hero-copy { padding-bottom: 0; } .hero h1 { font-size: clamp(49px,7.7vw,64px); } .hero-art { min-height: 530px; width: 90%; max-width: 520px; margin: 35px auto 18px; } .hero-workspace { top: 90px; left: 3%; right: 0; } .u-monogram { width: 145px; top: -30px; right: -8px; } .workspace-row strong { font-size: 13px; } .workspace-row small { font-size: 11px; } .workspace-content { padding-inline: 24px; } .workspace-top>strong { font-size: 10px; } .idea-sticker { bottom: 22px; left: -5px; } .idea-sticker strong { font-size: 13px; } .motion-toggle { bottom: 0; } .hero-lead { font-size: 18px; } .hero-actions { flex-wrap: nowrap; } .needs-entry { padding-inline: 6%; } .needs-entry>div:first-child { display: block; } .needs-entry h2 { margin-top: 10px; } .needs-links { gap: 10px; } .needs-links a { font-size: 12px; padding: 15px; } }
@media(max-width:540px) { .site-header { height: 74px; } .mobile-nav { top: 74px; max-height: calc(100dvh - 74px); } .hero { padding-top: 35px; } .hero .eyebrow { font-size: 10px; letter-spacing: .01em; } .hero h1 { font-size: clamp(36px,9.9vw,52px); margin: 23px 0 24px; line-height: 1.58; } .hero-lead { font-size: clamp(13px,3.45vw,16px); white-space: nowrap; } .hero-description { font-size: 13px; } .hero-actions { gap: 11px; margin-top: 23px; } .hero-actions .button { min-height: 58px; font-size: 14px; } .hero-assurances { margin-top: 13px; gap: 17px; font-size: 11px; } .hero-note { font-size: 11px; line-height: 1.8; margin-top: 9px; } .hero-art { width: 100%; max-width: none; min-height: 480px; height: 480px; margin: 33px 0 8px; } .u-monogram { inset: -23px -1px auto auto; width: 115px; height: 125px; } .u-tilt { width: 100%; max-width: none; } .art-label { top: 5px; left: 1px; font-size: 8px; letter-spacing: 1.1px; } .hero-workspace { top: 80px; left: 1%; right: 0; border-radius: 12px; transform: rotate(-2deg); } .workspace-top { padding: 13px; gap: 8px; } .workspace-top>strong { font-size: 8px; letter-spacing: .8px; } .workspace-top>span:last-child { font-size: 8px; } .workspace-content { padding: 18px 16px 4px; } .workspace-greeting { padding-bottom: 13px; } .workspace-greeting h3 { font-size: 22px; } .workspace-row { padding: 12px 0; gap: 9px; } .workspace-row strong { font-size: 11px; } .workspace-row small { font-size: 9px; } .app-icon { width: 32px; height: 32px; font-size: 19px; border-radius: 8px; } .workspace-spark { font-size: 39px; } .workspace-link { padding: 15px 17px; font-size: 11px; } .idea-sticker { bottom: 16px; left: 0; padding: 12px 14px; gap: 9px; border-radius: 8px; } .idea-sticker>span { font-size: 24px; } .idea-sticker small { font-size: 7px; } .idea-sticker strong { font-size: 11px; } .motion-toggle { bottom: 4px; right: -1px; } .hero-art:before { inset: 70px -10px 24px; border-radius: 38%; } .needs-entry { padding-block: 25px; } .needs-entry h2 { font-size: 17px; margin-top: 9px; } .needs-links { grid-template-columns: 1fr; gap: 9px; } .needs-links a { font-size: 13px; padding: 15px 18px; } .consult-benefits { display: grid; gap: 12px; font-size: 13px; margin-bottom: 28px; } .contact h2 { font-size: clamp(30px,8.6vw,43px); } .contact-star { top: 90px; font-size: 40px; } }

/* Keep every sample row and the demo link clear of decorative elements. */
.hero-art { min-height: 610px; }
.hero-workspace { top: 130px; }
.idea-sticker { top: 35px; left: 0; bottom: auto; padding: 12px 16px; transform: rotate(-2deg); }
.idea-sticker>span { font-size: 26px; }
.idea-sticker strong { font-size: 11px; }
.u-monogram { top: -8px; right: -8px; width: 125px; height: 140px; }
.motion-toggle { top: 8px; right: 140px; bottom: auto; width: 32px; height: 32px; }
.art-label { max-width: 150px; font-size: 8px; letter-spacing: 1px; }
@media(max-width:800px) { .hero-art { min-height: 605px; } .idea-sticker { top: 40px; } .hero-workspace { top: 135px; } }
@media(max-width:540px) { .hero-art { min-height: 520px; height: 520px; } .hero-workspace { top: 110px; } .u-monogram { width: 105px; height: 118px; top: -16px; right: 0; } .idea-sticker { display: none; } .motion-toggle { width: 44px; height: 44px; top: 42px; right: 120px; } .art-label { font-size: 8px; max-width: 155px; } }