:root {
  color-scheme: light;
  --navy: #071321;
  --navy-soft: #0b1b2c;
  --ink: #101e2c;
  --muted: #64717e;
  --cyan: #66e1e8;
  --blue: #4888ff;
  --line: #e4e9ed;
  --paper: #fff;
  --tint: #f5f8fa;
  --font-body: "DM Sans", "Segoe UI", sans-serif;
  --font-display: "Manrope", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.65 var(--font-body); -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #54bfce; outline-offset: 4px; }
.container { width: min(1160px, calc(100% - 56px)); margin-inline: auto; }
.section-pad { padding: 112px 0; }
.section-dark { color: #f5f8fb; background: var(--navy); }
.section-tint { background: var(--tint); }
.skip-link { position: fixed; z-index: 1000; top: 12px; left: 12px; padding: 10px 16px; color: var(--navy); background: white; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.site-header { height: 78px; position: sticky; top: 0; z-index: 100; background: rgba(7,19,33,.96); color: #f5f8fb; border-bottom: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(14px); }
.nav { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-mark { width: 30px; height: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; transform: rotate(-8deg); }
.brand-mark span, .brand-mark i { display: block; border-radius: 2px 7px 2px 7px; background: linear-gradient(145deg, #76e8e8, #458cff); }
.brand-mark span:nth-child(2), .brand-mark i:nth-child(2) { opacity: .68; transform: translateY(3px); }
.brand-mark span:nth-child(3), .brand-mark i:nth-child(3) { opacity: .84; transform: translateX(3px); }
.brand-mark span:nth-child(4), .brand-mark i:nth-child(4) { background: #6984ff; }
.brand-name { font: 800 16px/1 var(--font-display); letter-spacing: -.55px; }
.brand-name > span { display: block; margin-top: 5px; color: #97a8b9; font: 600 9px/1 var(--font-body); letter-spacing: 2.35px; text-transform: uppercase; }
.nav-menu { display: flex; align-items: center; gap: 30px; font-size: 13px; color: #c5d0db; }
.nav-menu > a:not(.button) { transition: color .2s; }
.nav-menu > a:not(.button):hover { color: var(--cyan); }
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { padding: 10px 0; display: inline-flex; align-items: center; gap: 7px; border: 0; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.nav-dropdown-toggle > span { width: 8px; height: 8px; border-right: 1.5px solid var(--cyan); border-bottom: 1.5px solid var(--cyan); font-size: 0; line-height: 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.nav-dropdown.is-open .nav-dropdown-toggle > span { transform: translateY(2px) rotate(225deg); }
.nav-dropdown-panel { position: absolute; top: calc(100% + 11px); left: -18px; z-index: 10; width: 290px; padding: 9px; display: grid; gap: 2px; border: 1px solid rgba(191,220,233,.15); border-radius: 8px; background: #0b1b2b; box-shadow: 0 20px 45px rgba(0,0,0,.3); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; }
.nav-dropdown:hover .nav-dropdown-panel, .nav-dropdown.is-open .nav-dropdown-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-panel a { padding: 9px 10px; border-radius: 5px; color: #c8d5df; font-size: 11px; line-height: 1.45; transition: background .16s, color .16s; }
.nav-dropdown-panel a:hover, .nav-dropdown-panel a:focus-visible { color: #fff; background: rgba(102,225,232,.1); }
.nav-dropdown-panel a.dropdown-all { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.1); border-radius: 4px 4px 0 0; color: var(--cyan); font-weight: 700; }
.button { min-height: 52px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; border: 1px solid transparent; border-radius: 7px; font-size: 14px; line-height: 1; font-weight: 700; transition: transform .2s, background .2s, box-shadow .2s; cursor: pointer; }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 40px; padding: 0 16px; font-size: 12px; }
.nav-cta { color: var(--navy); background: var(--cyan); }
.nav-cta:hover { background: #92f2f1; }
.button-primary { color: #061522; background: var(--cyan); box-shadow: 0 8px 28px rgba(102,225,232,.16); }
.button-primary:hover { background: #8cf1ed; box-shadow: 0 10px 34px rgba(102,225,232,.26); }
.button-dark { color: white; background: var(--navy); }
.button-dark:hover { background: #16314a; }
.menu-toggle { display: none; }

.hero { overflow: hidden; position: relative; min-height: 642px; background: radial-gradient(ellipse at 77% 41%, rgba(37,91,131,.2), transparent 36%), var(--navy); }
.hero-grid { min-height: 567px; padding-top: 61px; padding-bottom: 36px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 30px; }
.hero-copy { position: relative; z-index: 2; padding-bottom: 13px; }
.eyebrow { margin: 0 0 19px; color: #8da5ba; font: 700 11px/1.4 var(--font-body); letter-spacing: 2px; text-transform: uppercase; }
.eyebrow-dark { color: #52818b; }
.eyebrow-line { display: inline-block; width: 27px; height: 1px; margin: 0 9px 3px 0; background: var(--cyan); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); }
h1 { max-width: 630px; margin-bottom: 22px; font-size: clamp(43px, 5vw, 65px); line-height: 1.11; letter-spacing: -3.7px; font-weight: 700; }
h1 > span, h2 > span { color: #69dfe8; }
.hero-description { max-width: 510px; margin-bottom: 30px; color: #adbac7; font-size: 16px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: #d6e2ec; font-size: 13px; font-weight: 600; }
.text-link span, .card-link span, .footer-email span { transition: transform .2s; }
.text-link:hover span, .card-link:hover span, .footer-email:hover span { transform: translate(3px, -2px); }
.hero-note { margin-top: 41px; color: #91a3b4; font-size: 11px; letter-spacing: .3px; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px rgba(102,225,232,.6); }
.hero-art { position: relative; overflow: hidden; min-height: 438px; display: grid; place-items: center; isolation: isolate; }
.ecosystem-halo { position: absolute; z-index: -1; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(37,131,179,.2), rgba(49,72,147,.09) 48%, transparent 72%); filter: blur(8px); }
.ecosystem-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ecosystem-hub { position: relative; z-index: 1; width: 182px; height: 182px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(134,220,232,.32); border-radius: 50%; background: radial-gradient(circle at 40% 28%, #193b52, #0d2034 68%); box-shadow: 0 0 0 9px rgba(79,173,196,.035), 0 0 55px rgba(59,157,191,.14), inset 0 1px rgba(255,255,255,.08); text-align: center; }
.hub-mark { width: 27px; height: 27px; margin-bottom: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; transform: rotate(-8deg); }
.hub-mark i { border-radius: 2px 6px 2px 6px; background: linear-gradient(145deg, #76e8e8, #458cff); }.hub-mark i:nth-child(2) { opacity: .7; transform: translateY(2px); }.hub-mark i:nth-child(3) { opacity: .85; transform: translateX(2px); }.hub-mark i:nth-child(4) { background: #6984ff; }
.hub-name { color: #afc2cf; font-size: 14px; line-height: 1.45; }.hub-name strong { color: #f4f8fb; font: 700 17px var(--font-display); }
.hub-caption { margin-top: 11px; color: #80b6c0; font-size: 7px; font-weight: 700; letter-spacing: 1.15px; }
.ecosystem-node { position: absolute; z-index: 2; width: 166px; min-height: 60px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(175,218,234,.16); border-radius: 8px; background: linear-gradient(145deg, rgba(20,43,62,.98), rgba(11,27,43,.97)); box-shadow: 0 14px 35px rgba(0,0,0,.23), inset 0 1px rgba(255,255,255,.035); }
.node-web { top: 39px; left: 1%; }.node-mobile { top: 39px; right: 1%; }.node-software { bottom: 48px; left: 1%; }.node-ai { right: 1%; bottom: 48px; }
.node-icon { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border: 1px solid rgba(102,225,232,.18); border-radius: 7px; color: #78e3e7; background: rgba(102,225,232,.08); font: 700 11px var(--font-body); }
.phone-icon { position: relative; width: 14px; height: 21px; flex-basis: 32px; }.phone-icon:before { width: 11px; height: 19px; border: 1px solid #a4aaff; border-radius: 3px; content: ""; }.phone-icon i { position: absolute; bottom: 8px; width: 2px; height: 2px; border-radius: 50%; background: #a4aaff; }
.software-icon { color: #a6a2ff; border-color: rgba(158,145,255,.2); background: rgba(142,127,255,.09); font-size: 17px; }.ai-icon { color: #a9a0ff; border-color: rgba(158,145,255,.2); background: rgba(142,127,255,.09); font-size: 18px; }
.ecosystem-node > span:nth-child(2) { min-width: 0; }.ecosystem-node strong, .ecosystem-node small { display: block; white-space: nowrap; }.ecosystem-node strong { color: #eaf2f6; font: 650 10px var(--font-display); }.ecosystem-node small { margin-top: 4px; color: #8ea3b3; font-size: 8px; }
.node-signal { width: 5px; height: 5px; flex: 0 0 5px; margin-left: auto; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px rgba(102,225,232,.7); }
.ecosystem-caption { position: absolute; bottom: 6px; left: 50%; display: flex; align-items: center; gap: 7px; color: #8ea4b5; font-size: 8px; letter-spacing: .4px; white-space: nowrap; transform: translateX(-50%); }
.ecosystem-caption span { width: 4px; height: 4px; border-radius: 50%; background: #748bff; }
.hero-bottom { min-height: 75px; display: flex; align-items: center; gap: 19px; border-top: 1px solid rgba(255,255,255,.1); color: #8ea1b3; font-size: 10px; letter-spacing: .5px; }
.hero-bottom-line { flex: 1; height: 1px; background: rgba(255,255,255,.1); }
.hero-bottom a { color: #c5d3df; }.hero-bottom a span { margin-left: 8px; color: var(--cyan); }

.section-heading { margin-bottom: 48px; }
.heading-split { display: grid; grid-template-columns: 1.15fr .7fr; align-items: end; gap: 50px; }
.section-heading h2, .why-copy h2, .expertise-intro h2, .about-copy h2, .faq-intro h2, .testimonial-inner h2 { max-width: 690px; margin-bottom: 0; font-size: clamp(34px, 3.8vw, 48px); line-height: 1.17; letter-spacing: -2px; }
.section-heading h2 > span, .why-copy h2 > span, .expertise-intro h2 > span, .about-copy h2 > span, .faq-intro h2 > span, .testimonial-inner h2 > span { color: #478d9d; }
.heading-split > p { max-width: 420px; margin-bottom: 4px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.service-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.service-card { grid-column: span 2; min-height: 290px; padding: 24px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 9px; background: white; transition: transform .24s, border-color .24s, box-shadow .24s; }
.service-card:nth-child(1), .service-card:nth-child(2) { grid-column: span 3; }
.service-card:hover { transform: translateY(-4px); border-color: #c9dce1; box-shadow: 0 18px 36px rgba(17,48,67,.07); }
.service-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.icon-box { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 8px; font-size: 20px; }
.icon-cyan { color: #168691; background: #e0f7f6; }.icon-violet { color: #715ac6; background: #eee9ff; }.icon-blue { color: #3978d7; background: #e6f0ff; }.icon-green { color: #3c9674; background: #e5f5ed; }.icon-orange { color: #c37b36; background: #fff1e0; }
.card-index { color: #9ba7b1; font-size: 10px; letter-spacing: .7px; }
.service-card h3 { margin: 0 0 9px; font-size: 19px; letter-spacing: -.55px; }
.service-card > p { margin-bottom: 18px; color: #6a7681; font-size: 13px; line-height: 1.7; }
.service-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 20px; padding: 0; list-style: none; }
.service-tags li { padding: 4px 8px; border-radius: 4px; color: #53636f; background: #f3f6f7; font-size: 10px; }
.card-link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: #244f5d; font-size: 12px; font-weight: 700; }

.why-layout { display: grid; grid-template-columns: .87fr 1fr; align-items: center; gap: 90px; }
.why-visual { min-height: 470px; display: grid; place-items: center; }
.visual-frame { position: relative; overflow: hidden; width: 100%; max-width: 452px; min-height: 390px; padding: 34px; border-radius: 8px; color: white; background: linear-gradient(145deg, #17344b, #101d33 74%); box-shadow: 0 25px 65px rgba(15,37,59,.11); }
.visual-frame:before, .visual-frame:after { position: absolute; content: ""; border: 1px solid rgba(123,207,224,.14); border-radius: 50%; }
.visual-frame:before { width: 400px; height: 400px; top: 95px; right: -184px; }
.visual-frame:after { width: 280px; height: 280px; top: 154px; right: -121px; }
.visual-kicker { position: relative; z-index: 1; color: #9bb0bf; font-size: 10px; letter-spacing: .9px; text-transform: uppercase; }
.visual-big { position: relative; z-index: 1; margin-top: 64px; font: 700 clamp(30px, 4vw, 44px)/1.23 var(--font-display); letter-spacing: -2px; }
.visual-big span { color: var(--cyan); }
.visual-route { position: absolute; right: 32px; bottom: 31px; left: 32px; display: flex; align-items: center; gap: 11px; color: #abc1ce; font-size: 9px; }
.visual-route i { height: 1px; flex: 1; background: linear-gradient(90deg, var(--cyan), #6789ff); }
.visual-corner { position: absolute; right: 28px; top: 24px; color: rgba(210,233,240,.25); font: 700 11px var(--font-display); letter-spacing: 2px; }.visual-corner span { color: var(--cyan); }
.visual-orb { position: absolute; top: 146px; right: 42px; width: 94px; height: 94px; border: 1px solid rgba(116,223,231,.27); border-radius: 50%; box-shadow: inset -16px -9px 26px rgba(81,183,209,.16), 0 0 38px rgba(54,163,202,.1); }
.visual-orb:before, .visual-orb:after { position: absolute; content: ""; border: 1px solid rgba(116,223,231,.25); border-radius: 50%; transform: rotate(34deg); }
.visual-orb:before { inset: 19px -9px; }.visual-orb:after { inset: -12px 27px; }
.why-copy h2 { font-size: clamp(33px, 3.3vw, 44px); }
.why-intro { margin: 20px 0 25px; color: #677580; font-size: 14px; line-height: 1.8; }
.benefit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.benefit-grid > div { display: flex; gap: 10px; }
.check-mark { flex-shrink: 0; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; color: #298390; background: #def4f3; font-size: 11px; font-weight: 700; }
.benefit-grid h3 { margin: 0 0 4px; font-size: 13px; letter-spacing: -.2px; }
.benefit-grid p { margin: 0; color: #78848d; font-size: 11px; line-height: 1.55; }

.heading-centered { max-width: 720px; margin: 0 auto 45px; text-align: center; }
.heading-centered .eyebrow { margin-bottom: 15px; }
.heading-centered h2 { margin-inline: auto; }
.heading-centered > p:last-child { max-width: 540px; margin: 16px auto 0; color: #74808a; font-size: 14px; }
.solution-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.solution-card { position: relative; min-height: 229px; padding: 25px 24px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .2s; }
.solution-card:hover { background: #f7fbfb; }
.solution-num { color: #99a6ae; font-size: 10px; letter-spacing: 1px; }
.solution-icon { position: absolute; top: 23px; right: 24px; color: #5595a0; font-size: 21px; }
.solution-card h3 { max-width: 240px; margin: 25px 0 7px; font-size: 17px; letter-spacing: -.5px; }
.solution-card p { max-width: 280px; margin-bottom: 15px; color: #75818b; font-size: 12px; line-height: 1.65; }
.solution-service { color: #4b7b84; font-size: 10px; font-weight: 600; }

.process { background: radial-gradient(ellipse at 50% 94%, rgba(34,90,123,.18), transparent 45%), var(--navy); }
.process-heading { margin-bottom: 64px; }.process-heading > p { color: #a6b5c2; }
.process-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 27px; margin: 0; padding: 0; list-style: none; }
.process-list li { position: relative; padding-top: 23px; }
.process-step { position: absolute; top: -7px; left: 0; color: var(--cyan); font: 700 12px var(--font-display); letter-spacing: 1px; }
.process-line { height: 1px; margin-bottom: 23px; background: linear-gradient(90deg, rgba(102,225,232,.7), rgba(255,255,255,.12)); }
.process-label { margin-bottom: 11px; color: #88dce0; font-size: 10px; font-weight: 700; letter-spacing: 1.15px; text-transform: uppercase; }
.process-list h3 { margin-bottom: 9px; font-size: 19px; letter-spacing: -.5px; }
.process-list li > p:last-child { max-width: 240px; margin: 0; color: #a5b3c0; font-size: 12px; line-height: 1.8; }

.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 23px; }
.work-grid.ourwork-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.work-card { min-width: 0; }
.work-preview { position: relative; overflow: hidden; width: 100%; height: 315px; padding: 0; display: flex; flex-direction: column; align-items: center; border: 1px solid #e3e8eb; border-radius: 7px; cursor: pointer; transition: transform .25s, box-shadow .25s; }
.work-preview:hover { transform: translateY(-3px); box-shadow: 0 16px 35px rgba(20,49,67,.1); }
.project-preview { height: 335px; padding: 0; border: 1px solid #e0e8eb; border-radius: 10px; background: #e8eef1; text-decoration: none; }
.project-preview iframe { position: absolute; inset: 0; width: 400%; height: 400%; border: 0; background: white; pointer-events: none; transform: scale(.25); transform-origin: top left; }
.project-live { position: absolute; right: 0; bottom: 0; left: 0; min-height: 29px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; color: #f4f8fa; background: linear-gradient(transparent, rgba(7,19,33,.78)); font-size: 8px; font-weight: 700; letter-spacing: .85px; }
.project-live i { font-size: 13px; font-style: normal; transition: transform .2s; }
.project-preview:hover .project-live i { transform: translate(2px, -2px); }
.project-preview:focus-visible, .work-open:focus-visible { outline: 3px solid #438995; outline-offset: 4px; }
.preview-shop { background: linear-gradient(135deg, #e6ece3, #f5eee5); }
.preview-saas { background: radial-gradient(ellipse at 81% 77%, #d0d5fb, transparent 55%), #e6e9f2; }
.mock-browser { z-index: 1; width: 82%; height: 28px; margin-top: 27px; padding: 0 9px; display: flex; align-items: center; gap: 4px; border-radius: 5px 5px 0 0; color: #88939b; background: rgba(255,255,255,.84); box-shadow: 0 4px 20px rgba(32,45,44,.08); font-size: 7px; }
.mock-browser i { width: 5px; height: 5px; border-radius: 50%; background: #c5cbc8; }.mock-browser span { margin-left: 9px; }
.shop-mock { position: relative; overflow: hidden; width: 82%; height: 225px; padding: 28px 22px; text-align: left; background: #f8f6ef; box-shadow: 0 12px 30px rgba(50,56,41,.08); }
.shop-title { position: relative; z-index: 1; display: block; color: #2d4036; font: 600 28px/1.1 Georgia, serif; letter-spacing: -1px; }
.shop-button { position: relative; z-index: 1; display: inline-block; margin-top: 16px; padding: 8px 10px; border: 1px solid #667464; color: #435446; font-size: 7px; letter-spacing: .8px; }
.shop-shapes i, .shop-shapes b, .shop-shapes em { position: absolute; display: block; border-radius: 50%; }
.shop-shapes i { width: 144px; height: 144px; right: 13px; bottom: -34px; background: radial-gradient(circle at 39% 34%, #f2c4a4, #c67850 60%, #8a6149); }
.shop-shapes b { width: 75px; height: 112px; right: 102px; bottom: -16px; border-radius: 48% 48% 6px 6px; background: linear-gradient(110deg,#d7dfc8,#899776); transform: rotate(-15deg); }
.shop-shapes em { width: 12px; height: 120px; right: 173px; bottom: 7px; border-radius: 80% 0; background: #849674; transform: rotate(17deg); }
.preview-label { position: absolute; z-index: 2; right: 13px; bottom: 12px; padding: 5px 8px; border: 1px solid rgba(10,25,37,.15); border-radius: 3px; color: #56656b; background: rgba(255,255,255,.78); font-size: 8px; font-weight: 700; letter-spacing: .65px; }
.saas-mock { overflow: hidden; width: 82%; height: 225px; display: flex; border-radius: 0 0 3px 3px; background: #fff; text-align: left; box-shadow: 0 12px 30px rgba(41,48,71,.12); }
.saas-sidebar { width: 37px; flex-shrink: 0; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 11px; background: #222945; }
.saas-sidebar b { margin-bottom: 3px; color: #9ea6ff; font: 700 13px var(--font-display); }.saas-sidebar i { width: 11px; height: 11px; border-radius: 3px; background: rgba(255,255,255,.2); }
.saas-content { flex: 1; padding: 14px 16px; color: #2c3247; }
.saas-content > b { display: block; font: 700 12px var(--font-display); }.saas-content > small { display: block; margin-top: 4px; color: #9298a7; font-size: 7px; }
.saas-cards { display: flex; gap: 7px; margin-top: 13px; }.saas-cards i { flex: 1; padding: 7px; border: 1px solid #eceef3; border-radius: 4px; font-style: normal; }.saas-cards small, .saas-cards b { display: block; }.saas-cards small { color: #989eac; font-size: 6px; }.saas-cards b { margin-top: 4px; font: 700 13px var(--font-display); }
.saas-bars { height: 75px; margin-top: 11px; padding: 7px; display: flex; align-items: end; gap: 7px; border: 1px solid #eceef3; border-radius: 4px; }.saas-bars i { flex: 1; height: 45%; border-radius: 2px 2px 0 0; background: linear-gradient(#8e99f5,#ccd0ff); }.saas-bars i:nth-child(2) { height: 68%; }.saas-bars i:nth-child(3) { height: 54%; }.saas-bars i:nth-child(4) { height: 82%; }.saas-bars i:nth-child(5) { height: 63%; }.saas-bars i:nth-child(6) { height: 94%; }.saas-bars i:nth-child(7) { height: 74%; }
.work-info { padding: 19px 3px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.work-category { margin-bottom: 5px; color: #53808a; font-size: 10px; font-weight: 700; letter-spacing: .55px; text-transform: uppercase; }
.work-info h3 { margin-bottom: 5px; font-size: 19px; letter-spacing: -.5px; }
.work-info p:last-child { max-width: 410px; margin-bottom: 0; color: #78838c; font-size: 12px; }
.work-open { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: #325b68; background: white; cursor: pointer; text-decoration: none; transition: background .2s, color .2s; }.work-open:hover { color: white; background: var(--navy); }
.portfolio-note { margin: 30px 0 0; color: #77838d; text-align: center; font-size: 11px; }.portfolio-note span { margin-right: 5px; color: #578e99; }

.expertise-layout { display: grid; grid-template-columns: .7fr 1fr; gap: 95px; }
.expertise-intro h2 { font-size: 42px; }.expertise-intro > p:not(.eyebrow) { margin: 20px 0 20px; color: #6e7b85; font-size: 14px; line-height: 1.8; }
.dark-link { color: #294f5b; }
.expertise-categories { display: grid; grid-template-columns: 1fr 1fr; }
.expertise-categories > div { min-height: 97px; padding: 17px 13px 15px 0; border-bottom: 1px solid #dce4e7; }
.expertise-categories > div:nth-last-child(-n+1) { border-bottom: 0; }
.expertise-symbol { display: block; margin-bottom: 7px; color: #5e9da7; font-size: 9px; font-weight: 700; letter-spacing: .8px; }
.expertise-categories h3 { margin: 0 0 3px; font-size: 13px; letter-spacing: -.3px; }.expertise-categories p { margin: 0; color: #849099; font-size: 10px; }
.expertise-note { margin-top: 29px; color: #7b8791; font-size: 10px; text-align: right; }

.about-layout { display: grid; grid-template-columns: .8fr 1fr; align-items: center; gap: 100px; }
.about-mark { min-height: 350px; display: grid; place-items: center; background: linear-gradient(145deg,#eef6f7,#f8f9fb 60%,#ecf0fb); }
.about-mark-inner { width: 72%; min-height: 245px; padding: 34px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border: 1px solid rgba(77,140,153,.16); background: rgba(255,255,255,.66); box-shadow: 0 17px 48px rgba(40,71,88,.08); }
.brand-mark.large { width: 43px; height: 43px; gap: 4px; }.about-mark-name { margin-top: 20px; font: 700 24px/1.2 var(--font-display); letter-spacing: -1px; }.about-mark-caption { margin-top: 13px; color: #5e9097; font-size: 8px; font-weight: 700; letter-spacing: 1.3px; }
.about-copy h2 { font-size: 42px; }.about-copy > p:not(.eyebrow) { margin: 19px 0 0; color: #6b7882; font-size: 14px; line-height: 1.85; }.about-copy .button { margin-top: 26px; }

.testimonial-inner { max-width: 840px; }.testimonial-inner h2 { max-width: 650px; }
.testimonial-placeholder { position: relative; min-height: 150px; margin-top: 32px; padding: 28px 30px; display: flex; align-items: center; gap: 18px; border: 1px dashed #b9cbd0; border-radius: 8px; background: rgba(255,255,255,.65); }
.quote-mark { align-self: flex-start; color: #7db5b9; font: 700 55px/.8 Georgia, serif; }.testimonial-placeholder p { margin-bottom: 5px; color: #31434d; font: 600 17px var(--font-display); }.testimonial-placeholder div > span { color: #7a8790; font-size: 11px; }.placeholder-badge { position: absolute; right: 17px; top: 15px; color: #84959a; font-size: 8px; font-weight: 700; letter-spacing: .8px; }

.faq-layout { display: grid; grid-template-columns: .68fr 1fr; gap: 100px; align-items: start; }
.faq-intro { position: sticky; top: 112px; }.faq-intro h2 { font-size: 41px; }.faq-intro > p:not(.eyebrow) { margin: 18px 0; color: #75808a; font-size: 13px; }
.faq-list { border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); }.faq-list summary { position: relative; padding: 20px 40px 20px 0; color: #243541; font: 650 14px/1.5 var(--font-display); cursor: pointer; list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary:after, .faq-list summary:before { position: absolute; content: ""; top: 50%; right: 5px; width: 13px; height: 1px; background: #4e7e87; transition: transform .2s; }.faq-list summary:after { transform: rotate(90deg); }.faq-list details[open] summary:after { transform: rotate(0); }.faq-list details > p { max-width: 580px; margin: -3px 35px 20px 0; color: #74808a; font-size: 12px; line-height: 1.8; }

.contact { background: radial-gradient(ellipse at 0% 100%, rgba(29,81,119,.25), transparent 45%), var(--navy); }
.contact-layout { display: grid; grid-template-columns: .72fr 1fr; align-items: start; gap: 80px; }
.contact-copy { padding-top: 9px; }.contact-copy h2 { margin-bottom: 18px; font-size: clamp(40px, 4.2vw, 55px); line-height: 1.13; letter-spacing: -2.5px; }.contact-copy h2 span { color: var(--cyan); }.contact-copy > p:not(.eyebrow):not(.contact-hint) { max-width: 390px; color: #aab8c5; font-size: 14px; line-height: 1.8; }
.contact-detail { display: flex; align-items: center; gap: 13px; margin-top: 27px; }.contact-detail-icon { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 7px; color: var(--cyan); }.contact-detail small, .contact-detail strong { display: block; }.contact-detail small { color: #8ea1b3; font-size: 10px; }.contact-detail strong { margin-top: 2px; color: #d4dfe7; font-size: 12px; font-weight: 500; }
.contact-hint { margin: 18px 0 0; color: #8397a8; font-size: 10px; }
.contact-form { padding: 29px; border: 1px solid rgba(215,234,243,.13); border-radius: 9px; background: rgba(255,255,255,.045); }
.contact-start-card { padding: 32px; border: 1px solid rgba(215,234,243,.13); border-radius: 9px; background: linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); }
.contact-start-kicker { margin: 0 0 12px; color: var(--cyan); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.contact-start-card h3 { max-width: 360px; margin: 0 0 10px; color: #f0f5f7; font: 700 23px/1.3 var(--font-display); letter-spacing: -.6px; }
.contact-start-card > p:not(.contact-start-kicker) { max-width: 410px; margin: 0; color: #aab8c5; font-size: 12px; line-height: 1.8; }
.contact-start-steps { margin: 25px 0; border-top: 1px solid rgba(255,255,255,.12); }
.contact-start-steps span { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.1); color: #d5e0e7; font-size: 11px; }
.contact-start-steps b { color: var(--cyan); font: 600 9px var(--font-display); }
.contact-start-card .button { min-height: 44px; font-size: 11px; }
.contact-start-card > .contact-start-note { margin-top: 17px; color: #8397a8; font-size: 9px; }
.form-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 21px; }.form-heading h3 { margin: 0; font-size: 18px; }.form-heading p { margin: 0; color: #94a6b5; font-size: 9px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form label { display: block; margin-bottom: 15px; color: #d7e0e8; font-size: 10px; font-weight: 600; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; min-height: 43px; margin-top: 6px; padding: 10px 12px; border: 1px solid rgba(220,234,242,.15); border-radius: 5px; color: #eaf0f4; background: rgba(4,15,27,.48); font-size: 11px; font-weight: 400; }
.contact-form textarea { min-height: 100px; resize: vertical; }.contact-form input::placeholder, .contact-form textarea::placeholder { color: #75899a; }.contact-form select:invalid { color: #879aa9; }.contact-form select option { color: #182938; background: white; }.contact-form input[aria-invalid="true"], .contact-form select[aria-invalid="true"], .contact-form textarea[aria-invalid="true"] { border-color: #ff9999; }
.optional { color: #8799a8; font-size: 9px; font-weight: 400; }.field-hint { display: block; margin-top: 5px; color: #889cac; font-size: 9px; font-weight: 400; }
.form-bottom { display: flex; align-items: center; gap: 15px; }.submit-button { min-height: 45px; flex-shrink: 0; padding-inline: 17px; font-size: 11px; }.submit-button:disabled { cursor: wait; opacity: .7; }.form-bottom > p { margin: 0; color: #91a4b4; font-size: 9px; line-height: 1.5; }.form-error { margin: 12px 0 0; color: #ffb2b2; font-size: 11px; }

.site-footer { padding: 61px 0 22px; color: #d6dfe6; background: #050e18; }
.footer-main { padding-bottom: 44px; display: grid; grid-template-columns: 1.45fr .7fr .85fr .9fr; gap: 45px; }
.footer-brand-col > p { max-width: 250px; margin: 20px 0 13px; color: #8798a7; font-size: 11px; line-height: 1.8; }.footer-email { display: inline-flex; align-items: center; gap: 8px; color: var(--cyan); font-size: 11px; font-weight: 600; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }.footer-links h2 { margin: 2px 0 9px; color: #f1f5f7; font: 700 11px var(--font-display); }.footer-links a, .footer-links p, .footer-links > span { margin: 0; color: #8798a7; font-size: 10px; }.footer-links a:hover { color: var(--cyan); }.footer-contact a { color: #a9c9d1; }
.footer-bottom { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid rgba(255,255,255,.1); color: #7d8b98; font-size: 9px; }.footer-bottom > div { display: flex; align-items: center; gap: 19px; }.footer-bottom a:hover { color: var(--cyan); }.footer-bottom .back-top { color: #bdc9d2; }
.legal-details { padding: 16px 0 5px; border-top: 1px solid rgba(255,255,255,.08); scroll-margin-top: 90px; }.legal-details h2 { margin-bottom: 4px; color: #bdc9d2; font-size: 11px; }.legal-details p { max-width: 790px; margin: 0; color: #7d8b98; font-size: 10px; }
.js-ready .reveal { opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s ease; }
.js-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }
.js-ready .ourwork-grid .work-card:nth-child(2).reveal { transition-delay: .12s; }
.js-ready .ourwork-grid .work-card:nth-child(3).reveal { transition-delay: .24s; }

@media (max-width: 950px) {
  .container { width: min(100% - 44px, 760px); }
  .nav-menu { gap: 18px; font-size: 12px; }.nav-menu .button { padding-inline: 12px; }
  .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 10px; }.hero-art { transform: scale(.92); }
  .why-layout { gap: 48px; }.why-visual { min-height: 405px; }.visual-frame { min-height: 350px; padding: 27px; }.visual-big { margin-top: 55px; }
  .expertise-layout, .about-layout { gap: 55px; }.faq-layout { gap: 55px; }.contact-layout { gap: 42px; }.footer-main { gap: 25px; }
}
@media (max-width: 720px) {
  html { scroll-padding-top: 72px; }
  .container { width: calc(100% - 40px); }
  .section-pad { padding: 79px 0; }
  .site-header { height: 68px; backdrop-filter: none; }
  .menu-toggle { width: 42px; height: 42px; padding: 12px 9px; display: flex; flex-direction: column; justify-content: center; gap: 6px; border: 1px solid rgba(255,255,255,.16); border-radius: 5px; background: transparent; cursor: pointer; }
  .menu-toggle span { width: 21px; height: 1.5px; display: block; background: #f3f7fa; transition: transform .2s; }.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .nav-menu { position: fixed; top: 68px; right: 0; bottom: 0; left: 0; padding: 35px 25px 45px; display: flex; flex-direction: column; align-items: stretch; gap: 0; background: #081522; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility 0s; }
  .nav-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-menu > a:not(.button) { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.1); color: #e4ebf0; font: 600 19px var(--font-display); }
  .nav-menu .nav-cta { margin-top: 27px; align-self: flex-start; min-height: 47px; }
  .hero-grid { min-height: 0; padding-top: 69px; padding-bottom: 10px; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero-copy { padding: 0; }.eyebrow { font-size: 9px; letter-spacing: 1.7px; }
  h1 { max-width: 580px; margin-bottom: 17px; font-size: clamp(42px, 10.4vw, 58px); letter-spacing: -2.8px; }
  .hero-description { max-width: 560px; margin-bottom: 23px; font-size: 14px; }
  .hero-actions { gap: 18px; }.button { min-height: 48px; padding-inline: 17px; font-size: 12px; }.text-link { font-size: 11px; }
  .hero-note { margin-top: 25px; font-size: 10px; }
  .hero-art { width: 100%; min-height: 335px; margin: 3px 0 -3px; transform: none; }.ecosystem-hub { width: 154px; height: 154px; }.ecosystem-lines { inset: 8px 0; height: calc(100% - 16px); }.ecosystem-node { width: 148px; min-height: 55px; padding: 8px 9px; gap: 8px; }.node-web, .node-mobile { top: 22px; }.node-software, .node-ai { bottom: 33px; }.ecosystem-caption { bottom: 6px; font-size: 7px; }
  .hero-bottom { min-height: 59px; gap: 10px; font-size: 8px; }.hero-bottom a { white-space: nowrap; font-size: 8px; }
  .section-heading { margin-bottom: 34px; }.heading-split { grid-template-columns: 1fr; gap: 16px; }.section-heading h2, .why-copy h2, .expertise-intro h2, .about-copy h2, .faq-intro h2, .testimonial-inner h2 { font-size: clamp(32px, 8vw, 42px); letter-spacing: -1.6px; }.heading-split > p { font-size: 13px; }
  .service-grid { grid-template-columns: 1fr; gap: 12px; }.service-card, .service-card:nth-child(1), .service-card:nth-child(2) { grid-column: auto; min-height: 0; padding: 21px; }.service-card-top { margin-bottom: 17px; }.service-card h3 { font-size: 18px; }
  .why-layout { grid-template-columns: 1fr; gap: 30px; }.why-visual { min-height: 330px; }.visual-frame { max-width: 100%; min-height: 310px; }.visual-big { margin-top: 45px; font-size: 37px; }.visual-orb { right: 51px; width: 76px; height: 76px; }.why-copy h2 { font-size: 36px; }.benefit-grid { gap: 19px 12px; }.benefit-grid p { font-size: 10px; }
  .heading-centered { margin-bottom: 32px; }.solution-grid { grid-template-columns: 1fr; }.solution-card { min-height: 0; padding: 21px; }.solution-card h3 { margin-top: 17px; }.solution-card p { margin-bottom: 10px; }
  .process-heading { margin-bottom: 39px; }.process-list { grid-template-columns: 1fr; gap: 25px; }.process-list li { padding: 0 0 0 40px; }.process-step { top: 1px; }.process-line { position: absolute; top: 6px; bottom: -31px; left: 25px; width: 1px; height: auto; margin: 0; background: linear-gradient(rgba(102,225,232,.65),rgba(255,255,255,.1)); }.process-list li:last-child .process-line { display: none; }.process-label { margin-bottom: 7px; }.process-list h3 { font-size: 17px; }.process-list li > p:last-child { max-width: 450px; font-size: 11px; }
  .work-grid { grid-template-columns: 1fr; gap: 33px; }.work-preview { height: 270px; }.shop-mock, .saas-mock { height: 188px; }.shop-title { font-size: 25px; }.saas-bars { height: 56px; }.work-info h3 { font-size: 17px; }
  .expertise-layout { grid-template-columns: 1fr; gap: 32px; }.expertise-intro h2 { max-width: 520px; font-size: 37px; }.expertise-categories > div { min-height: 94px; }.expertise-categories h3 { font-size: 12px; }.expertise-categories p { font-size: 9px; }.expertise-note { text-align: left; }
  .about-layout { grid-template-columns: 1fr; gap: 34px; }.about-mark { min-height: 280px; }.about-mark-inner { min-height: 210px; }.about-copy h2 { font-size: 37px; }.about-copy > p:not(.eyebrow) { font-size: 13px; }
  .testimonial-placeholder { min-height: 0; padding: 25px 18px; align-items: flex-start; gap: 9px; }.placeholder-badge { right: 12px; top: 12px; font-size: 7px; }.quote-mark { font-size: 42px; }.testimonial-placeholder p { margin-top: 25px; font-size: 15px; }.testimonial-placeholder div > span { font-size: 10px; }
  .faq-layout { grid-template-columns: 1fr; gap: 32px; }.faq-intro { position: static; }.faq-intro h2 { max-width: 520px; font-size: 37px; }.faq-list summary { padding-block: 17px; font-size: 12px; }.faq-list details > p { font-size: 11px; }
  .contact-layout { grid-template-columns: 1fr; gap: 38px; }.contact-copy h2 { font-size: 45px; }.contact-copy > p:not(.eyebrow):not(.contact-hint) { font-size: 13px; }.contact-detail { margin-top: 20px; }.contact-form { padding: 22px 17px; }.form-heading { align-items: flex-start; flex-direction: column; gap: 3px; }.form-heading h3 { font-size: 17px; }.form-row { gap: 10px; }.contact-form label { font-size: 9px; }.contact-form input, .contact-form select, .contact-form textarea { padding-inline: 9px; font-size: 10px; }.form-bottom { align-items: flex-start; flex-direction: column; }.form-bottom > p { max-width: 290px; }
  .site-footer { padding-top: 48px; }.footer-main { grid-template-columns: 1fr 1fr; gap: 31px 20px; padding-bottom: 34px; }.footer-brand-col { grid-column: 1/-1; }.footer-bottom { align-items: flex-start; flex-direction: column; padding-top: 16px; padding-bottom: 12px; }.footer-bottom > div { gap: 14px; }.legal-details { scroll-margin-top: 78px; }
}
@media (max-width: 390px) {
  .container { width: calc(100% - 32px); }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 15px; }
  .hero-art { min-height: 290px; }.ecosystem-hub { width: 132px; height: 132px; }.hub-mark { width: 22px; height: 22px; margin-bottom: 8px; }.hub-name { font-size: 12px; }.hub-name strong { font-size: 14px; }.hub-caption { margin-top: 8px; font-size: 6px; }.ecosystem-node { width: 135px; min-height: 51px; padding: 7px; gap: 6px; }.node-web, .node-mobile { top: 14px; }.node-software, .node-ai { bottom: 25px; }.node-icon { width: 27px; height: 27px; flex-basis: 27px; }.ecosystem-node strong { font-size: 9px; }.ecosystem-node small { font-size: 7px; }.ecosystem-caption { display: none; }
  .form-row { grid-template-columns: 1fr; gap: 0; }.form-row label { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js-ready .reveal { opacity: 1; transform: none; }
}

/* Services pages */
.breadcrumbs { margin: 0 0 48px; display: flex; align-items: center; gap: 10px; color: #8599aa; font-size: 10px; }
.breadcrumbs a:hover { color: var(--cyan); }.breadcrumbs [aria-current="page"] { color: #cbd7df; }
.service-overview-hero, .detail-hero { position: relative; overflow: hidden; background: radial-gradient(ellipse at 79% 45%, rgba(41,104,142,.2), transparent 37%), var(--navy); }
.overview-hero-layout { min-height: 555px; padding-top: 50px; padding-bottom: 48px; display: grid; grid-template-columns: 1fr .83fr; align-items: center; gap: 55px; }
.overview-hero-layout h1, .service-hero-copy h1 { max-width: 700px; margin-bottom: 20px; font-size: clamp(43px, 4.7vw, 62px); line-height: 1.1; letter-spacing: -3.4px; }
.overview-hero-layout h1 span, .service-hero-copy h1 span { color: var(--cyan); }
.overview-visual { position: relative; min-height: 380px; display: grid; place-items: center; }
.overview-visual-orbit { position: absolute; width: 285px; height: 285px; border: 1px solid rgba(124,211,227,.16); border-radius: 50%; box-shadow: 0 0 0 32px rgba(124,211,227,.025), 0 0 0 68px rgba(124,211,227,.02); }
.overview-visual-center { position: relative; z-index: 1; width: 177px; height: 177px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 1px solid rgba(122,219,230,.3); border-radius: 50%; background: linear-gradient(145deg,#173a50,#102337); box-shadow: 0 20px 55px rgba(0,0,0,.24); text-align: center; }
.overview-visual-center strong { color: #edf4f7; font: 700 15px/1.35 var(--font-display); }.overview-visual-center small { color: #8ab8c1; font-size: 6px; letter-spacing: 1px; }
.overview-visual-center .brand-mark { width: 22px; height: 22px; gap: 2px; }
.overview-chip { position: absolute; z-index: 2; min-width: 95px; padding: 10px 13px; border: 1px solid rgba(196,225,236,.17); border-radius: 6px; color: #dbe6ed; background: #10283c; box-shadow: 0 10px 25px rgba(0,0,0,.2); font-size: 10px; font-weight: 600; }
.overview-chip i { margin-right: 8px; color: var(--cyan); font-style: normal; }.overview-chip-one { top: 20px; left: 7%; }.overview-chip-two { top: 90px; right: 0; }.overview-chip-three { right: 3%; bottom: 54px; }.overview-chip-four { bottom: 13px; left: 16%; }.overview-chip-five { top: 45%; left: -2%; }
.service-catalog { background: #fff; }
.service-overview-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.overview-service-card { grid-column: span 2; min-height: 395px; padding: 25px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 9px; background: #fff; transition: transform .22s, box-shadow .22s, border-color .22s; }
.overview-service-card:nth-child(1), .overview-service-card:nth-child(2) { grid-column: span 3; min-height: 365px; }
.overview-service-card:hover { transform: translateY(-4px); border-color: #b8d4da; box-shadow: 0 18px 38px rgba(13,41,59,.08); }
.overview-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 19px; }.overview-card-top .card-index { font-size: 9px; letter-spacing: .6px; }
.overview-service-card h2 { margin-bottom: 10px; font-size: 20px; line-height: 1.35; letter-spacing: -.6px; }
.overview-service-card > p { margin-bottom: 15px; color: #6d7a84; font-size: 12px; line-height: 1.75; }
.overview-service-card ul { margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; list-style: none; }
.overview-service-card li { position: relative; padding-left: 13px; color: #53636d; font-size: 10px; line-height: 1.5; }
.overview-service-card li:before { position: absolute; top: 6px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #58a8b1; content: ""; }
.button-outline { min-height: 42px; margin-top: auto; align-self: flex-start; border-color: #d4e0e4; color: #254a56; background: transparent; font-size: 11px; }
.button-outline:hover { border-color: #6aaeb7; background: #f3fbfb; }
.overview-why-layout { display: grid; grid-template-columns: .75fr 1fr; gap: 85px; align-items: start; }
.overview-why-layout h2, .overview-process h2, .overview-faq-layout h2 { margin-bottom: 14px; font-size: clamp(33px, 3.7vw, 45px); line-height: 1.2; letter-spacing: -1.7px; }
.overview-why-layout h2 span, .overview-process h2 span, .overview-faq-layout h2 span { color: #478d9d; }
.overview-lead, .overview-faq-layout > div:first-child > p:not(.eyebrow) { max-width: 360px; color: #6f7b85; font-size: 13px; line-height: 1.8; }
.overview-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 23px 25px; }
.overview-why-grid article { padding-top: 11px; border-top: 1px solid #dce5e8; }
.overview-why-grid b { color: #548e99; font: 700 10px var(--font-display); }
.overview-why-grid h3 { margin: 9px 0 5px; font-size: 14px; }.overview-why-grid p { margin: 0; color: #75828a; font-size: 11px; line-height: 1.65; }
.overview-process { background: #fff; }
.overview-steps { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 26px; margin: 48px 0 0; padding: 0; list-style: none; }
.overview-steps:before { position: absolute; top: 15px; right: 7%; left: 7%; height: 1px; background: linear-gradient(90deg,#62c9d1,#dae4e8); content: ""; }
.overview-steps li { position: relative; z-index: 1; padding-top: 43px; }.overview-steps li > b { position: absolute; top: 0; left: 0; width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #a6d8dc; border-radius: 50%; color: #347d87; background: #f5fbfb; font-size: 9px; }
.overview-steps h3 { margin-bottom: 7px; font-size: 15px; }.overview-steps p { margin: 0; color: #71808a; font-size: 11px; line-height: 1.7; }
.overview-faq-layout { display: grid; grid-template-columns: .65fr 1fr; gap: 90px; align-items: start; }.overview-faq-layout .faq-list { border-top-color: #dae3e6; }
.overview-cta { padding: 70px 0; background: radial-gradient(ellipse at 75% 50%,rgba(49,121,153,.2),transparent 40%),var(--navy); }
.overview-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }.overview-cta h2 { margin-bottom: 8px; font-size: 36px; letter-spacing: -1.4px; }.overview-cta p:not(.eyebrow) { margin: 0; color: #a9bac6; font-size: 13px; }

.detail-hero-layout { min-height: 565px; padding: 44px 0 55px; display: grid; grid-template-columns: 1fr .92fr; align-items: center; gap: 55px; }
.service-hero-copy .breadcrumbs { margin-bottom: 38px; }.service-hero-copy .eyebrow { margin-bottom: 14px; }
.service-hero-copy > p:not(.eyebrow) { max-width: 550px; margin-bottom: 27px; color: #adbac7; font-size: 14px; line-height: 1.8; }
.service-hero-copy .hero-actions { gap: 20px; }
.detail-visual { position: relative; min-height: 395px; display: grid; place-items: center; }
.service-visual-glow { position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle,rgba(63,161,184,.19),rgba(63,106,184,.07) 50%,transparent 72%); }
.detail-art-window { position: relative; z-index: 1; overflow: hidden; width: 90%; max-width: 420px; border: 1px solid rgba(210,233,240,.2); border-radius: 9px; background: #f8fbfc; box-shadow: 0 28px 70px rgba(0,0,0,.3); transform: rotate(-2deg); }
.detail-window-top { height: 31px; padding: 0 12px; display: flex; align-items: center; gap: 5px; border-bottom: 1px solid #e8edf0; color: #8596a1; background: #fff; font-size: 7px; }
.detail-window-top i { width: 5px; height: 5px; border-radius: 50%; background: #b9c6cd; }.detail-window-top span { margin-left: 6px; }
.web-art-content { position: relative; min-height: 230px; padding: 24px; color: #123044; background: linear-gradient(120deg,#f6fbf9,#ecf2ed); }
.web-art-content strong { display: block; font: 700 22px/1.12 Georgia,serif; }.web-art-content small { display: block; margin-top: 10px; color: #70817c; font-size: 8px; }.web-art-content b { display: inline-block; margin-top: 14px; padding: 7px 10px; color: #fff; background: #18443f; font-size: 7px; letter-spacing: .5px; }
.web-art-swatch { position: absolute; right: 23px; bottom: -14px; width: 130px; height: 132px; border-radius: 49% 49% 10px 10px; background: radial-gradient(circle at 37% 28%,#f1d3b7,#b77554 67%,#6d5147); box-shadow: -68px 21px 0 -25px #9ba78f; }
.mobile-art-device { position: relative; z-index: 1; width: 205px; height: 365px; padding: 8px; border: 2px solid rgba(214,238,245,.63); border-radius: 31px; background: linear-gradient(145deg,#243c54,#101b2b); box-shadow: 0 30px 65px rgba(0,0,0,.33); transform: rotate(5deg); }
.mobile-art-screen { position: relative; overflow: hidden; width: 100%; height: 100%; padding: 21px 14px; border-radius: 23px; color: #233342; background: #f5f8fa; }.mobile-art-notch { position: absolute; top: 7px; left: 50%; width: 63px; height: 11px; border-radius: 0 0 9px 9px; background: #1a2939; transform: translateX(-50%); }
.mobile-art-screen > small { display: block; margin-top: 12px; color: #73818c; font-size: 7px; }.mobile-art-screen > strong { display: block; margin-top: 18px; font: 700 17px/1.25 var(--font-display); }.mobile-art-screen > p { margin: 6px 0 11px; color: #85919a; font-size: 7px; }.mobile-app-card { height: 96px; padding: 12px; border-radius: 9px; color: white; background: linear-gradient(135deg,#3a8eaa,#596ed0); }.mobile-app-card span { display: block; font-size: 7px; }.mobile-app-card b { display: block; margin-top: 12px; font-size: 15px; }.mobile-art-row { margin-top: 9px; padding: 10px; border: 1px solid #e3e9ed; border-radius: 7px; background: white; font-size: 7px; }
.saas-art-panel { position: relative; z-index: 1; width: 92%; max-width: 430px; min-height: 276px; padding: 17px; border: 1px solid rgba(219,231,244,.25); border-radius: 9px; color: #263144; background: #fff; box-shadow: 0 28px 65px rgba(0,0,0,.27); transform: rotate(-2deg); }.saas-art-title { display: flex; align-items: center; justify-content: space-between; font: 700 12px var(--font-display); }.saas-art-title span { color: #8a91a2; font: 8px var(--font-body); }.saas-art-stats { margin-top: 16px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.saas-art-stats div { padding: 10px; border: 1px solid #e8ebf0; border-radius: 5px; }.saas-art-stats small, .saas-art-stats b { display: block; }.saas-art-stats small { color: #8891a1; font-size: 6px; }.saas-art-stats b { margin-top: 5px; font: 700 15px var(--font-display); }.saas-art-chart { height: 105px; margin-top: 14px; padding: 12px; display: flex; align-items: end; gap: 9px; border: 1px solid #e8ebf0; border-radius: 5px; }.saas-art-chart i { flex: 1; height: 45%; border-radius: 3px 3px 0 0; background: linear-gradient(#64c9d4,#7c88e8); }.saas-art-chart i:nth-child(2) { height: 73%; }.saas-art-chart i:nth-child(3) { height: 57%; }.saas-art-chart i:nth-child(4) { height: 88%; }.saas-art-chart i:nth-child(5) { height: 67%; }.saas-art-chart i:nth-child(6) { height: 96%; }
.ai-art-flow { position: relative; z-index: 1; width: 100%; max-width: 430px; min-height: 310px; padding: 20px; display: grid; grid-template-columns: 1fr 46px 1fr; grid-template-rows: 1fr 1fr; align-items: center; gap: 17px 6px; border: 1px solid rgba(183,218,237,.18); border-radius: 12px; background: rgba(16,38,57,.85); box-shadow: 0 27px 65px rgba(0,0,0,.23); }.ai-flow-card { min-height: 76px; padding: 12px; border: 1px solid rgba(174,218,235,.17); border-radius: 7px; background: rgba(255,255,255,.04); }.ai-flow-card small, .ai-flow-card b { display: block; }.ai-flow-card small { color: #8ca2b3; font-size: 7px; text-transform: uppercase; letter-spacing: .8px; }.ai-flow-card b { margin-top: 9px; color: #e5edf3; font: 600 10px var(--font-display); }.ai-flow-card.is-ai { border-color: rgba(111,167,255,.35); background: rgba(95,119,224,.12); }.ai-flow-card.is-ai b { color: #b6cbff; }.ai-flow-arrow { color: #73dce3; text-align: center; }.ai-flow-footer { position: absolute; right: 18px; bottom: 11px; left: 18px; color: #88a3b4; font-size: 7px; text-align: center; }
.brand-art-board { position: relative; z-index: 1; width: 90%; max-width: 410px; min-height: 325px; padding: 17px; display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: 1.2fr .8fr; gap: 10px; transform: rotate(2deg); }.brand-art-tile { position: relative; overflow: hidden; padding: 16px; border: 1px solid rgba(255,255,255,.17); border-radius: 6px; background: #162d43; box-shadow: 0 20px 44px rgba(0,0,0,.2); }.brand-art-tile:first-child { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; background: #f0eee6; }.brand-art-tile:first-child strong { color: #1f392e; font: 700 25px/1.1 Georgia,serif; }.brand-art-tile:first-child small { margin-top: 10px; color: #68766c; font-size: 7px; letter-spacing: 1px; }.brand-art-tile:nth-child(2) { background: linear-gradient(145deg,#7566d8,#e0a5a5); }.brand-art-tile:nth-child(3) { background: #e7f1ef; }.brand-art-monogram { position: absolute; right: 10px; bottom: -17px; color: rgba(255,255,255,.74); font: 800 82px var(--font-display); }.brand-art-tile:nth-child(3) .brand-art-monogram { color: #37665f; font-size: 48px; }
.service-intro-band { padding: 55px 0; border-bottom: 1px solid #e7ecef; background: #fff; }.service-intro-layout { display: grid; grid-template-columns: .62fr 1fr; gap: 80px; align-items: start; }.service-intro-layout h2 { margin: 0; font-size: 30px; line-height: 1.25; letter-spacing: -1px; }.service-intro-layout h2 span { color: #478d9d; }.service-intro-layout p { margin: 0 0 12px; color: #6d7a84; font-size: 13px; line-height: 1.8; }.service-intro-layout p:last-child { margin-bottom: 0; }
.detail-section { padding: 82px 0; }.detail-section.tinted { background: #f5f8fa; }.detail-section-heading { max-width: 690px; margin-bottom: 36px; }.detail-section-heading h2 { margin-bottom: 12px; font-size: clamp(32px,3.6vw,43px); line-height: 1.2; letter-spacing: -1.7px; }.detail-section-heading h2 span { color: #478d9d; }.detail-section-heading > p:last-child { margin: 0; color: #71808a; font-size: 13px; line-height: 1.75; }
.capability-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }.capability-card { min-height: 140px; padding: 19px; border: 1px solid #e0e7ea; border-radius: 7px; background: #fff; }.capability-card > span { color: #5898a1; font: 700 10px var(--font-display); }.capability-card h3 { margin: 15px 0 7px; font-size: 15px; }.capability-card p { margin: 0; color: #78848d; font-size: 11px; line-height: 1.65; }
.benefit-list { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }.benefit-item { padding: 19px 0 0; border-top: 1px solid #dfe7e9; }.benefit-item > span { color: #5698a2; font-size: 10px; font-weight: 700; }.benefit-item h3 { margin: 11px 0 6px; font-size: 14px; }.benefit-item p { margin: 0; color: #75828b; font-size: 11px; line-height: 1.7; }
.detail-process { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }.detail-process article { padding: 19px 0 0; border-top: 1px solid #bcd5da; }.detail-process b { color: #528f99; font: 700 10px var(--font-display); }.detail-process h3 { margin: 10px 0 6px; font-size: 15px; }.detail-process p { margin: 0; color: #75818a; font-size: 11px; line-height: 1.7; }
.detail-note { max-width: 850px; padding: 17px 20px; border-left: 3px solid #65b6bf; color: #5d6d77; background: #eef6f7; font-size: 11px; line-height: 1.75; }.detail-note strong { color: #244a57; }
.tech-pills { display: flex; flex-wrap: wrap; gap: 9px; }.tech-pills span { padding: 8px 12px; border: 1px solid #dbe5e8; border-radius: 20px; color: #4b6670; background: #fff; font-size: 10px; }
.usecase-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }.usecase-card { padding: 20px; border: 1px solid #e0e7ea; border-radius: 7px; background: #fff; }.usecase-card > span { color: #5696a0; font-size: 18px; }.usecase-card h3 { margin: 12px 0 6px; font-size: 14px; }.usecase-card p { margin: 0; color: #75818a; font-size: 11px; line-height: 1.7; }
.related-services { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }.related-service-link { padding: 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #e1e8eb; border-radius: 7px; background: #fff; transition: border-color .2s, transform .2s; }.related-service-link:hover { transform: translateY(-2px); border-color: #8fbcc3; }.related-service-link span { color: #4b5d68; font: 650 12px var(--font-display); }.related-service-link b { color: #528f99; }
.detail-faq { display: grid; grid-template-columns: .65fr 1fr; gap: 80px; align-items: start; }.detail-faq .detail-section-heading { margin: 0; }
.detail-cta { padding: 68px 0; color: white; background: radial-gradient(ellipse at 80% 50%,rgba(39,116,151,.22),transparent 45%),var(--navy); }.detail-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }.detail-cta h2 { margin-bottom: 9px; font-size: 36px; letter-spacing: -1.4px; }.detail-cta p:not(.eyebrow) { margin: 0; color: #afbdc8; font-size: 13px; }

@media (max-width: 950px) {
  .overview-hero-layout, .detail-hero-layout { gap: 28px; }.overview-visual { transform: scale(.9); }.overview-why-layout { gap: 45px; }.service-intro-layout { gap: 42px; }.detail-faq { gap: 45px; }
}
@media (max-width: 720px) {
  .nav-dropdown { width: 100%; }.nav-dropdown-toggle { width: 100%; padding: 16px 0; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.1); color: #e4ebf0; font: 600 19px var(--font-display); }
  .nav-dropdown-panel { position: static; width: 100%; max-height: 0; overflow: hidden; padding: 0 0 0 12px; display: grid; border: 0; border-radius: 0; background: transparent; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: max-height .25s, padding .25s; }
  .nav-dropdown.is-open .nav-dropdown-panel { max-height: 420px; padding: 7px 0 12px 12px; }
  .nav-dropdown-panel a { padding: 9px 10px; color: #b7c5d0; font-size: 12px; }.nav-dropdown-panel a.dropdown-all { border-bottom-color: rgba(255,255,255,.08); }
  .overview-hero-layout { min-height: auto; padding-top: 35px; padding-bottom: 34px; grid-template-columns: 1fr; gap: 4px; }.overview-hero-layout .breadcrumbs { margin-bottom: 34px; }.overview-hero-layout h1, .service-hero-copy h1 { font-size: clamp(39px,9vw,53px); letter-spacing: -2.6px; }.overview-visual { min-height: 310px; transform: none; }.overview-visual-orbit { width: 235px; height: 235px; }.overview-chip-one { top: 8px; left: 3%; }.overview-chip-two { top: 52px; right: 0; }.overview-chip-three { right: 0; bottom: 31px; }.overview-chip-four { bottom: 4px; left: 13%; }.overview-chip-five { top: 46%; left: 0; }.overview-visual-center { width: 145px; height: 145px; }
  .service-overview-grid { grid-template-columns: 1fr; gap: 12px; }.overview-service-card, .overview-service-card:nth-child(1), .overview-service-card:nth-child(2) { grid-column: auto; min-height: 0; padding: 21px; }.overview-service-card h2 { font-size: 18px; }.overview-service-card > p { font-size: 11px; }.overview-service-card ul { gap: 7px; }
  .overview-why-layout { grid-template-columns: 1fr; gap: 30px; }.overview-why-grid { gap: 19px 14px; }.overview-why-grid h3 { font-size: 12px; }.overview-why-grid p { font-size: 10px; }
  .overview-steps { grid-template-columns: 1fr 1fr; gap: 25px 18px; margin-top: 33px; }.overview-steps:before { display: none; }
  .overview-faq-layout, .detail-faq { grid-template-columns: 1fr; gap: 28px; }.overview-cta-inner, .detail-cta-inner { align-items: flex-start; flex-direction: column; }.overview-cta h2, .detail-cta h2 { font-size: 30px; }
  .detail-hero-layout { min-height: auto; padding: 34px 0 40px; grid-template-columns: 1fr; gap: 8px; }.service-hero-copy .breadcrumbs { margin-bottom: 33px; }.detail-visual { min-height: 340px; }.detail-art-window { width: min(90%,410px); }.mobile-art-device { width: 180px; height: 320px; }.mobile-art-screen { padding: 17px 12px; }.mobile-app-card { height: 77px; }.ai-art-flow { min-height: 280px; padding: 13px; }.brand-art-board { min-height: 290px; }.service-intro-layout { grid-template-columns: 1fr; gap: 18px; }.service-intro-layout h2 { font-size: 26px; }
  .detail-section { padding: 64px 0; }.detail-section-heading { margin-bottom: 25px; }.detail-section-heading h2 { font-size: 34px; }.capability-grid, .usecase-grid { grid-template-columns: 1fr 1fr; gap: 10px; }.capability-card { min-height: 125px; padding: 15px; }.capability-card h3 { font-size: 13px; }.capability-card p, .usecase-card p { font-size: 10px; }.benefit-list { grid-template-columns: 1fr 1fr; gap: 18px 14px; }.detail-process { grid-template-columns: 1fr 1fr; gap: 21px 16px; }.detail-faq .detail-section-heading { margin: 0; }.related-services { grid-template-columns: 1fr; gap: 9px; }
}
@media (max-width: 390px) {
  .overview-chip { min-width: 85px; padding: 8px 9px; font-size: 9px; }.overview-visual-center { width: 130px; height: 130px; }
  .capability-grid, .usecase-grid { grid-template-columns: 1fr; }.capability-card { min-height: 0; }.detail-visual { min-height: 305px; }.ai-art-flow { grid-template-columns: 1fr 30px 1fr; gap: 12px 3px; }.ai-flow-card { min-height: 69px; padding: 8px; }
}

.solutions-hero { overflow: hidden; position: relative; background: radial-gradient(ellipse at 77% 45%,rgba(37,91,131,.2),transparent 37%),var(--navy); }
.solutions-hero-layout { min-height: 535px; padding: 45px 0 34px; display: grid; grid-template-columns: 1fr .88fr; align-items: center; gap: 42px; }
.solutions-hero-copy .breadcrumbs { margin-bottom: 37px; }.solutions-hero-copy .eyebrow { margin-bottom: 15px; }
.solutions-hero-copy h1 { max-width: 640px; margin-bottom: 19px; font-size: clamp(44px,4.8vw,63px); line-height: 1.1; letter-spacing: -3.4px; }.solutions-hero-copy h1 span { color: var(--cyan); }
.solutions-hero-copy > p:not(.eyebrow) { max-width: 540px; margin-bottom: 26px; color: #adbac7; font-size: 14px; line-height: 1.8; }
.solutions-hero-art { position: relative; min-height: 390px; display: grid; place-items: center; }
.solutions-art-orbit { position: absolute; border: 1px solid rgba(132,210,227,.13); border-radius: 50%; }
.orbit-outer { width: 330px; height: 330px; box-shadow: 0 0 0 34px rgba(132,210,227,.022); }.orbit-inner { width: 218px; height: 218px; border-style: dashed; }
.solutions-art-center { position: relative; z-index: 2; width: 154px; height: 154px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(117,220,231,.35); border-radius: 50%; background: linear-gradient(145deg,#193c52,#0b1d30); box-shadow: 0 0 55px rgba(60,165,195,.17),inset 0 1px rgba(255,255,255,.08); text-align: center; }
.art-target { margin-bottom: 6px; color: var(--cyan); font-size: 24px; line-height: 1; }.solutions-art-center strong { color: #f1f6f8; font: 700 14px/1.35 var(--font-display); }.solutions-art-center small { margin-top: 9px; color: #83b5be; font-size: 6px; letter-spacing: 1.1px; }
.solutions-art-label { position: absolute; z-index: 3; min-width: 129px; padding: 11px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(173,219,234,.17); border-radius: 7px; color: #d8e5ec; background: linear-gradient(145deg,#153149,#0d2134); box-shadow: 0 12px 30px rgba(0,0,0,.22); font-size: 9px; font-weight: 600; }
.solutions-art-label i { color: var(--cyan); font-size: 15px; font-style: normal; }.label-web { top: 31px; left: 2%; }.label-flow { top: 67px; right: 0; }.label-product { right: 2%; bottom: 42px; }.label-brand { bottom: 11px; left: 9%; }
.art-connector { position: absolute; z-index: 1; width: 82px; height: 1px; background: linear-gradient(90deg,rgba(104,223,230,.7),rgba(104,223,230,.08)); transform-origin: left; }.connector-one { top: 104px; left: 27%; transform: rotate(38deg); }.connector-two { top: 112px; right: 24%; transform: rotate(143deg); }.connector-three { right: 25%; bottom: 110px; transform: rotate(-144deg); }.connector-four { bottom: 100px; left: 28%; transform: rotate(-38deg); }
.solutions-hero-foot { min-height: 54px; display: flex; align-items: center; gap: 14px; border-top: 1px solid rgba(255,255,255,.09); color: #91a5b6; font-size: 9px; letter-spacing: .6px; }.solutions-hero-foot span:nth-child(2) { height: 1px; flex: 1; background: rgba(255,255,255,.1); }
.solution-path-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.solution-path-card { position: relative; min-height: 230px; padding: 23px 24px 20px; display: flex; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .2s,transform .2s; }.solution-path-card:hover { background: #f6fbfb; transform: translateY(-2px); }
.solution-path-number { color: #608b94; font-size: 9px; font-weight: 700; letter-spacing: .8px; }.solution-path-icon { position: absolute; top: 19px; right: 23px; color: #5296a0; font-size: 20px; }.solution-path-card h3 { max-width: 245px; margin: 27px 0 7px; font-size: 17px; letter-spacing: -.5px; }.solution-path-card p { max-width: 290px; margin: 0 0 15px; color: #74818b; font-size: 11px; line-height: 1.7; }.path-link { margin-top: auto; display: flex; align-items: center; justify-content: space-between; color: #416d77; font-size: 10px; font-weight: 700; }.path-link b { font-size: 14px; }
.solution-detail-section { padding: 86px 0; scroll-margin-top: 78px; }.solution-detail-tint { background: #f5f8fa; }
.solution-detail-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 82px; }.solution-detail-layout.reverse > :first-child { order: 2; }.solution-detail-layout.reverse > :last-child { order: 1; }
.solution-story-copy .eyebrow { margin-bottom: 15px; }.solution-story-copy h2 { max-width: 505px; margin: 0 0 15px; font-size: clamp(32px,3.5vw,43px); line-height: 1.2; letter-spacing: -1.7px; }.solution-story-copy h2 span { color: #478d9d; }.solution-story-copy > p:not(.eyebrow):not(.solution-caveat) { margin: 0; color: #6c7983; font-size: 13px; line-height: 1.85; }
.story-outcomes { margin: 23px 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.story-outcomes > div { padding-top: 10px; border-top: 1px solid #dfe7e9; }.story-outcomes b, .story-outcomes span { display: block; }.story-outcomes b { margin-bottom: 4px; color: #315c67; font: 700 11px var(--font-display); }.story-outcomes span { color: #7a858d; font-size: 9px; line-height: 1.5; }
.solution-service-links { display: flex; flex-wrap: wrap; gap: 8px; }.solution-service-links a { padding: 8px 10px; display: inline-flex; align-items: center; gap: 9px; border: 1px solid #dbe5e8; border-radius: 5px; color: #315964; background: #fff; font-size: 9px; font-weight: 600; transition: border-color .2s,background .2s; }.solution-service-links a:hover { border-color: #8bbcc3; background: #f4fbfb; }.solution-service-links a span { color: #4d98a2; }
.solution-caveat { margin: 14px 0 0; color: #78858d; font-size: 9px; line-height: 1.6; }
.solution-story-visual { position: relative; min-height: 365px; padding: 27px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #e3e9eb; border-radius: 8px; background: linear-gradient(145deg,#edf3f1,#f2f0e9); }
.solution-story-visual:before { position: absolute; width: 310px; height: 310px; border: 1px solid rgba(59,119,128,.1); border-radius: 50%; content: ""; }.story-kicker { position: absolute; z-index: 3; top: 17px; left: 19px; color: #73858a; font-size: 7px; font-weight: 700; letter-spacing: 1px; }.story-caption { position: absolute; right: 17px; bottom: 13px; color: #718087; font-size: 8px; }
.story-browser, .commerce-window { position: relative; z-index: 1; overflow: hidden; width: 84%; max-width: 350px; border: 1px solid #e5e8e4; border-radius: 6px; background: #fff; box-shadow: 0 20px 45px rgba(30,53,53,.13); transform: rotate(-2deg); }
.story-browser-top { height: 25px; padding: 0 9px; display: flex; align-items: center; gap: 4px; color: #8b9696; background: #fff; font-size: 6px; }.story-browser-top i { width: 5px; height: 5px; border-radius: 50%; background: #c8d0cd; }.story-browser-top span { margin-left: 6px; }
.story-browser-body { position: relative; min-height: 205px; padding: 24px 19px; overflow: hidden; color: #213b34; background: #f2f4ee; }.story-browser-body > small { position: relative; z-index: 1; color: #648078; font-size: 6px; letter-spacing: 1px; }.story-browser-body > strong { position: relative; z-index: 1; display: block; margin-top: 12px; font: 700 25px/1.05 Georgia,serif; }.story-browser-body > i { position: relative; z-index: 1; width: 87px; height: 20px; margin-top: 15px; display: block; border: 1px solid #436960; }.story-browser-shape { position: absolute; right: -11px; bottom: -35px; width: 139px; height: 149px; border-radius: 50% 50% 8px 8px; background: radial-gradient(circle at 38% 30%,#f2d4b6,#c17f61 67%,#7e5b4c); box-shadow: -68px 27px 0 -25px #9da991; }
.story-commerce { background: linear-gradient(135deg,#e8ede4,#f4eee5); }.commerce-window { transform: rotate(1deg); }.commerce-window-body { position: relative; min-height: 213px; padding: 20px 18px; overflow: hidden; color: #233b32; background: #f7f6ef; }.commerce-window-body > small { color: #748278; font-size: 6px; letter-spacing: 1.2px; }.commerce-window-body > strong { display: block; margin-top: 9px; font: 700 23px/1.05 Georgia,serif; }.commerce-window-body > b { position: absolute; bottom: 19px; left: 18px; padding: 7px 9px; border: 1px solid #79877b; color: #526454; font-size: 6px; letter-spacing: .6px; }.commerce-swatch { position: absolute; width: 91px; height: 91px; right: 15px; border-radius: 50%; }.swatch-one { top: 41px; background: radial-gradient(circle at 38% 28%,#f0c6a4,#c87b55 70%); }.swatch-two { top: 92px; right: 77px; width: 63px; height: 84px; border-radius: 48% 48% 6px 6px; background: #a2ac91; }.swatch-three { top: 83px; right: 100px; width: 7px; height: 93px; border-radius: 80%; background: #78876c; transform: rotate(18deg); }
.story-automation { background: linear-gradient(145deg,#e9eff2,#e8eafa); }.workflow-board { position: relative; z-index: 1; width: 100%; max-width: 440px; min-height: 215px; padding: 22px 16px 30px; display: grid; grid-template-columns: 1fr 20px 1fr 20px 1fr; align-items: center; gap: 7px; border: 1px solid rgba(54,90,125,.15); border-radius: 8px; background: rgba(255,255,255,.76); box-shadow: 0 18px 42px rgba(44,61,94,.1); }.workflow-step { position: relative; z-index: 1; min-height: 86px; padding: 12px 9px; border: 1px solid #e0e7ec; border-radius: 6px; background: #fff; }.workflow-step small, .workflow-step b { display: block; }.workflow-step small { color: #82929e; font-size: 6px; letter-spacing: .7px; }.workflow-step b { margin-top: 11px; color: #344854; font: 600 9px var(--font-display); }.workflow-highlight { border-color: #bdc8f0; background: #f6f6ff; }.workflow-highlight b { color: #565f9a; }.workflow-board > span { color: #518b96; text-align: center; }.workflow-track { position: absolute; top: 50%; right: 14%; left: 14%; height: 1px; background: #b7d9dc; }.workflow-note { position: absolute; right: 10px; bottom: 11px; left: 10px; color: #71828e; font-size: 7px; text-align: center; }
.story-saas { background: radial-gradient(ellipse at 76% 72%,#d9dcf5,transparent 60%),#e9ebf2; }.product-blueprint { position: relative; z-index: 1; width: 91%; max-width: 390px; min-height: 245px; display: flex; overflow: hidden; border: 1px solid #e6e8ef; border-radius: 6px; background: white; box-shadow: 0 20px 45px rgba(44,48,78,.15); transform: rotate(2deg); }.blueprint-sidebar { width: 42px; padding: 13px 10px; display: flex; flex-direction: column; align-items: center; gap: 13px; background: #222945; }.blueprint-sidebar b { margin-bottom: 6px; color: #a4a8ff; font: 700 14px var(--font-display); }.blueprint-sidebar i { width: 12px; height: 12px; border-radius: 3px; background: rgba(255,255,255,.18); }.blueprint-main { flex: 1; padding: 19px; }.blueprint-main > small { color: #8891a3; font-size: 6px; letter-spacing: .8px; }.blueprint-main > strong { display: block; margin-top: 8px; color: #2e354a; font: 700 17px/1.2 var(--font-display); }.blueprint-cards { margin-top: 12px; display: flex; gap: 8px; }.blueprint-cards i { flex: 1; padding: 8px; border: 1px solid #e7eaf0; border-radius: 4px; }.blueprint-cards b { height: 4px; margin: 3px 0; display: block; border-radius: 3px; background: #e8eaf0; }.blueprint-cards b:first-child { width: 55%; background: #aeb3f1; }.blueprint-flow { margin-top: 13px; display: flex; align-items: center; gap: 7px; color: #6d778c; font-size: 7px; }.blueprint-flow i { height: 1px; flex: 1; background: #b9d9dd; }
.story-integration { background: linear-gradient(145deg,#e9f0f1,#eef1f7); }.integration-map { position: relative; z-index: 1; width: 100%; max-width: 440px; padding: 23px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid rgba(48,95,119,.15); border-radius: 8px; background: rgba(255,255,255,.78); box-shadow: 0 18px 40px rgba(36,65,85,.1); }.integration-app { width: 110px; min-height: 100px; padding: 12px 10px; border: 1px solid #e0e7e9; border-radius: 6px; background: white; }.integration-app > i { width: 24px; height: 24px; margin-bottom: 9px; display: grid; place-items: center; border-radius: 5px; color: #277b87; background: #e3f4f3; font: 700 10px var(--font-display); font-style: normal; }.integration-app > b, .integration-app > small { display: block; }.integration-app > b { color: #304652; font: 650 9px var(--font-display); }.integration-app > small { margin-top: 4px; color: #809099; font-size: 6px; }.integration-app-alt > i { color: #63599e; background: #eeeafe; }.integration-bridge { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; color: #4f8994; }.integration-bridge > span { height: 1px; flex: 1; background: #7bbdc4; }.integration-bridge > i { font-size: 16px; font-style: normal; }.integration-bridge > small { position: absolute; top: 25px; color: #7d8f97; font-size: 5px; white-space: nowrap; letter-spacing: .6px; }.integration-sync { position: absolute; right: 10px; bottom: 8px; left: 10px; color: #6f8089; font-size: 6px; text-align: center; }
.story-identity { background: linear-gradient(145deg,#e9e9f1,#f2ece8); }.identity-board { position: relative; z-index: 1; width: 95%; max-width: 390px; min-height: 260px; padding: 13px; display: grid; grid-template-columns: 1.1fr .9fr; grid-template-rows: 1fr 42px; gap: 8px; transform: rotate(-1deg); }.identity-main, .identity-side, .identity-footer { position: relative; overflow: hidden; border-radius: 5px; }.identity-main { padding: 18px; display: flex; flex-direction: column; justify-content: center; color: #294437; background: #f7f5ed; box-shadow: 0 14px 25px rgba(52,60,51,.1); }.identity-main small { color: #7f8b7c; font-size: 6px; letter-spacing: .8px; }.identity-main strong { margin-top: 12px; font: 700 23px/1.08 Georgia,serif; }.identity-main > span { margin-top: 15px; color: #829087; font-size: 5px; letter-spacing: .7px; }.identity-side { padding: 13px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(150deg,#7770ba,#d899a3); }.identity-symbol { color: rgba(255,255,255,.9); font: 700 29px var(--font-display); }.identity-symbol span { color: #d4ede3; }.identity-colors { display: flex; gap: 5px; }.identity-colors i { width: 18px; height: 18px; border-radius: 50%; background: #273f34; }.identity-colors i:nth-child(2) { background: #e1c29f; }.identity-colors i:nth-child(3) { background: #81927d; }.identity-colors i:nth-child(4) { background: #f1eee2; }.identity-footer { grid-column: span 2; padding: 0 12px; display: flex; align-items: center; gap: 10px; color: #51615c; background: #e0ebe7; }.identity-footer > span { color: #72857e; font-size: 5px; letter-spacing: .8px; }.identity-footer > b { flex: 1; font: 600 8px var(--font-display); }.identity-footer > i { width: 12px; height: 12px; border-radius: 50%; background: #4b6f5a; }.identity-footer > i:nth-last-child(2) { background: #c28d70; }.identity-footer > i:last-child { background: #8480bf; }
.solution-approach { padding: 78px 0; background: radial-gradient(ellipse at 82% 45%,rgba(42,114,146,.2),transparent 43%),var(--navy); }.solution-approach-layout { display: grid; grid-template-columns: .9fr 1fr; align-items: center; gap: 90px; }.solution-approach-layout h2 { max-width: 480px; margin: 0 0 15px; font-size: clamp(34px,3.8vw,46px); line-height: 1.18; letter-spacing: -1.8px; }.solution-approach-layout h2 span { color: var(--cyan); }.solution-approach-layout > div > p:not(.eyebrow) { max-width: 450px; margin-bottom: 22px; color: #aebdc8; font-size: 12px; line-height: 1.8; }.solution-approach-layout .button { min-height: 46px; font-size: 11px; }
.solution-approach-steps { margin: 0; padding: 0; list-style: none; }.solution-approach-steps li { padding: 17px 0; display: flex; gap: 18px; border-bottom: 1px solid rgba(255,255,255,.11); }.solution-approach-steps li:first-child { border-top: 1px solid rgba(255,255,255,.11); }.solution-approach-steps li > b { color: var(--cyan); font: 700 10px var(--font-display); }.solution-approach-steps h3 { margin: 0 0 4px; font-size: 14px; }.solution-approach-steps p { margin: 0; color: #98aaba; font-size: 10px; }
.solutions-faq { background: #fff; }
@media (max-width: 950px) {
  .solutions-hero-layout { grid-template-columns: 1fr .85fr; gap: 20px; }.solutions-hero-art { transform: scale(.9); }.solution-detail-layout { gap: 42px; }.solution-approach-layout { gap: 50px; }
}
@media (max-width: 720px) {
  .solutions-hero-layout { min-height: auto; padding-top: 32px; padding-bottom: 18px; grid-template-columns: 1fr; gap: 0; }.solutions-hero-copy .breadcrumbs { margin-bottom: 33px; }.solutions-hero-copy h1 { font-size: clamp(40px,9vw,54px); letter-spacing: -2.7px; }.solutions-hero-copy > p:not(.eyebrow) { font-size: 13px; }.solutions-hero-art { min-height: 320px; transform: none; }.orbit-outer { width: 270px; height: 270px; }.orbit-inner { width: 185px; height: 185px; }.solutions-art-center { width: 135px; height: 135px; }.solutions-art-label { min-width: 115px; padding: 9px; font-size: 8px; }.label-web { top: 19px; left: 2%; }.label-flow { top: 54px; right: 0; }.label-product { right: 1%; bottom: 28px; }.label-brand { bottom: 3px; left: 6%; }.connector-one { top: 77px; left: 26%; }.connector-two { top: 85px; right: 22%; }.connector-three { right: 23%; bottom: 85px; }.connector-four { bottom: 76px; left: 27%; }
  .solution-path-grid { grid-template-columns: 1fr; }.solution-path-card { min-height: 0; padding: 20px; }.solution-path-card h3 { margin-top: 17px; }.solution-path-card p { margin-bottom: 13px; }
  .solution-detail-section { padding: 63px 0; }.solution-detail-layout { grid-template-columns: 1fr; gap: 30px; }.solution-detail-layout.reverse > :first-child, .solution-detail-layout.reverse > :last-child { order: initial; }.solution-story-visual { min-height: 300px; padding: 20px; }.solution-story-copy h2 { font-size: 36px; }.solution-story-copy > p:not(.eyebrow):not(.solution-caveat) { font-size: 12px; }.story-outcomes { gap: 8px; }.story-outcomes span { font-size: 8px; }.story-caption { right: 11px; bottom: 10px; font-size: 7px; }
  .workflow-board { min-height: 190px; padding-inline: 10px; gap: 4px; }.workflow-step { min-height: 74px; padding: 9px 6px; }.workflow-step b { font-size: 8px; }.integration-map { padding-inline: 8px; gap: 5px; }.integration-app { width: 92px; min-height: 90px; padding: 9px 7px; }.integration-app > b { font-size: 8px; }.integration-bridge > i { font-size: 13px; }.identity-board { min-height: 238px; }
  .solution-approach { padding: 62px 0; }.solution-approach-layout { grid-template-columns: 1fr; gap: 34px; }.solution-approach-layout h2 { font-size: 37px; }
}
@media (max-width: 390px) {
  .solutions-art-label { min-width: 103px; gap: 6px; padding: 8px 7px; font-size: 7px; }.solutions-art-label i { font-size: 13px; }.label-web { left: 0; }.label-flow { right: -3px; }.label-product { right: -3px; }.label-brand { left: 1%; }
  .solution-story-visual { min-height: 270px; padding: 14px; }.story-browser, .commerce-window { width: 89%; }.story-browser-body { min-height: 183px; }.workflow-board { grid-template-columns: 1fr 15px 1fr 15px 1fr; }.workflow-step { padding: 7px 4px; }.workflow-step small { font-size: 5px; }.workflow-step b { font-size: 7px; }.story-outcomes { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 720px) {
  .solutions-site .container { width: calc(100% - 40px); }
  .solutions-site .solutions-hero-layout { min-height: auto; padding: 32px 0 18px; grid-template-columns: 1fr; gap: 0; }
  .solutions-site .solutions-hero-art { min-height: 320px; overflow: hidden; transform: none; }
  .solutions-site .solution-approach-layout { grid-template-columns: 1fr; gap: 34px; }
  .solutions-site .solution-approach-layout > *, .solutions-site .solution-approach-steps, .solutions-site .solution-approach-steps li > div { min-width: 0; }
  .solutions-site .solution-approach-layout h2 span { overflow-wrap: anywhere; }
}
@media (max-width: 390px) {
  .solutions-site .container { width: calc(100% - 32px); }
}

.aboutus-hero { overflow: hidden; background: radial-gradient(ellipse at 78% 39%,rgba(38,100,139,.22),transparent 39%),var(--navy); }
.aboutus-hero-layout { min-height: 560px; padding: 53px 0 34px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 42px; }
.aboutus-hero-copy { position: relative; z-index: 2; padding: 12px 0 20px; }
.aboutus-hero-copy .breadcrumbs { margin-bottom: 36px; }
.aboutus-hero-copy .eyebrow { margin-bottom: 18px; }
.aboutus-hero-copy h1 { max-width: 610px; margin-bottom: 19px; font-size: clamp(46px,5vw,65px); letter-spacing: -3.5px; }
.aboutus-hero-copy > p:not(.eyebrow) { max-width: 500px; margin-bottom: 27px; color: #adbac7; font-size: 14px; line-height: 1.85; }
.aboutus-hero-art { position: relative; min-height: 390px; display: grid; place-items: center; }
.aboutus-art-ring { position: absolute; border: 1px solid rgba(132,210,227,.14); border-radius: 50%; }
.aboutus-ring-outer { width: 342px; height: 342px; box-shadow: 0 0 0 33px rgba(132,210,227,.025); }
.aboutus-ring-inner { width: 242px; height: 242px; border-style: dashed; }
.aboutus-art-core { position: relative; z-index: 2; width: 188px; height: 188px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(117,220,231,.32); border-radius: 50%; background: linear-gradient(145deg,#193c52,#0b1d30); box-shadow: 0 0 55px rgba(60,165,195,.16),inset 0 1px rgba(255,255,255,.08); text-align: center; }
.aboutus-art-core .brand-mark { width: 29px; height: 29px; margin-bottom: 12px; }
.aboutus-art-core strong { color: #eff9fa; font: 650 13px/1.35 var(--font-display); }
.aboutus-art-core small { margin-top: 10px; color: #86aeb9; font-size: 6px; letter-spacing: 1px; }
.aboutus-orbit-label { position: absolute; z-index: 3; min-width: 119px; padding: 10px 13px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(187,221,230,.17); border-radius: 5px; color: #d9e8ef; background: #10263a; box-shadow: 0 12px 28px rgba(0,0,0,.2); font: 600 10px var(--font-display); }
.aboutus-orbit-label i { color: var(--cyan); font: 700 8px var(--font-body); font-style: normal; }
.aboutus-label-ideas { top: 35px; left: 9%; }.aboutus-label-people { top: 91px; right: 0; }.aboutus-label-design { right: 3%; bottom: 52px; }.aboutus-label-tech { bottom: 14px; left: 13%; }
.aboutus-art-caption { position: absolute; bottom: -3px; display: flex; align-items: center; gap: 8px; color: #8fa7b7; font-size: 8px; letter-spacing: .3px; }
.aboutus-art-caption > span { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px rgba(102,225,232,.6); }
.aboutus-hero-foot { min-height: 52px; display: flex; align-items: center; gap: 17px; border-top: 1px solid rgba(255,255,255,.09); color: #92a6b7; font-size: 9px; letter-spacing: .4px; }
.aboutus-hero-foot > span:nth-child(2) { height: 1px; flex: 1; background: rgba(255,255,255,.13); }
.aboutus-story-layout { display: grid; grid-template-columns: .85fr 1fr; align-items: center; gap: 92px; }
.aboutus-story-mark { position: relative; min-height: 376px; display: grid; place-items: center; background: linear-gradient(145deg,#edf5f6,#f8f9fb 60%,#edf0fa); }
.aboutus-story-mark-card { width: 70%; min-height: 260px; padding: 34px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border: 1px solid rgba(77,140,153,.16); background: rgba(255,255,255,.76); box-shadow: 0 18px 46px rgba(40,71,88,.09); }
.aboutus-story-mark-card > strong { margin-top: 18px; color: #172c39; font: 750 25px/1.15 var(--font-display); letter-spacing: -1px; }
.aboutus-story-mark-card > small { margin-top: 12px; color: #5e9097; font-size: 7px; font-weight: 700; letter-spacing: 1px; }
.aboutus-story-line { width: 100%; height: 1px; margin: 18px 0 10px; background: #e2eaec; }
.aboutus-story-note { color: #849099; font-size: 9px; }
.aboutus-story-index { position: absolute; bottom: 15px; left: 17px; color: #78909a; font-size: 7px; font-weight: 700; letter-spacing: 1px; }.aboutus-story-index i { margin: 0 5px; color: #4e9aa5; font-style: normal; }
.aboutus-story-copy h2, .aboutus-approach-copy h2 { margin: 0 0 17px; color: #122330; font-size: clamp(34px,3.8vw,46px); line-height: 1.18; letter-spacing: -1.9px; }
.aboutus-story-copy h2 span, .aboutus-approach-copy h2 span { color: #478d9d; }
.aboutus-story-copy > p:not(.eyebrow) { margin: 17px 0 0; color: #6b7882; font-size: 13px; line-height: 1.85; }
.aboutus-story-copy .text-link { margin-top: 24px; }
.aboutus-values .section-heading { margin-bottom: 37px; }
.aboutus-values-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.aboutus-value-card { position: relative; min-height: 226px; padding: 24px 20px; border: 1px solid #e1e9eb; border-radius: 6px; background: rgba(255,255,255,.78); transition: transform .2s,border-color .2s,box-shadow .2s; }
.aboutus-value-card:hover { transform: translateY(-4px); border-color: #bed8dc; box-shadow: 0 13px 28px rgba(39,75,85,.07); }
.aboutus-value-number { position: absolute; top: 23px; right: 19px; color: #8b9ba1; font-size: 8px; font-weight: 700; letter-spacing: .7px; }
.aboutus-value-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #d8e8e9; border-radius: 6px; color: #438995; background: #f1f8f8; font-size: 19px; }
.aboutus-value-card h3 { margin: 23px 0 8px; color: #1d303b; font-size: 15px; letter-spacing: -.3px; }
.aboutus-value-card p { margin: 0; color: #77858d; font-size: 10px; line-height: 1.75; }
.aboutus-approach { background: #fff; }
.aboutus-approach-layout { display: grid; grid-template-columns: .8fr 1fr; align-items: start; gap: 100px; }
.aboutus-approach-copy { position: sticky; top: 115px; }
.aboutus-approach-copy > p:not(.eyebrow) { max-width: 410px; margin: 0 0 23px; color: #71808a; font-size: 13px; line-height: 1.8; }
.aboutus-approach-copy .button { min-height: 46px; font-size: 11px; }
.aboutus-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid #e1e8ea; }
.aboutus-steps li { padding: 22px 0; display: grid; grid-template-columns: 38px 1fr; gap: 16px; border-bottom: 1px solid #e1e8ea; }
.aboutus-steps li > span { padding-top: 3px; color: #4c929c; font: 700 10px var(--font-display); }
.aboutus-steps h3 { margin: 0 0 5px; color: #22333d; font-size: 15px; }
.aboutus-steps p { margin: 0; color: #77858d; font-size: 11px; line-height: 1.7; }
@media (max-width: 950px) {
  .aboutus-hero-layout { grid-template-columns: 1fr .9fr; gap: 16px; }.aboutus-hero-art { transform: scale(.9); }
  .aboutus-story-layout { gap: 52px; }.aboutus-approach-layout { gap: 55px; }.aboutus-values-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .aboutus-hero-layout { min-height: auto; padding: 32px 0 20px; grid-template-columns: 1fr; gap: 3px; }
  .aboutus-hero-copy .breadcrumbs { margin-bottom: 31px; }.aboutus-hero-copy h1 { font-size: clamp(40px,9vw,55px); letter-spacing: -2.8px; }.aboutus-hero-copy > p:not(.eyebrow) { font-size: 13px; }
  .aboutus-hero-art { min-height: 340px; overflow: hidden; transform: none; }.aboutus-ring-outer { width: 280px; height: 280px; }.aboutus-ring-inner { width: 205px; height: 205px; }.aboutus-art-core { width: 155px; height: 155px; }.aboutus-orbit-label { min-width: 110px; padding: 9px 10px; font-size: 9px; }.aboutus-label-ideas { top: 18px; left: 1%; }.aboutus-label-people { top: 58px; right: 0; }.aboutus-label-design { right: 0; bottom: 40px; }.aboutus-label-tech { bottom: 8px; left: 3%; }.aboutus-art-caption { bottom: -3px; font-size: 7px; }
  .aboutus-hero-foot { gap: 10px; font-size: 8px; }
  .aboutus-story-layout { grid-template-columns: 1fr; gap: 34px; }.aboutus-story-mark { min-height: 280px; }.aboutus-story-mark-card { min-height: 210px; }.aboutus-story-copy h2, .aboutus-approach-copy h2 { font-size: 37px; }
  .aboutus-values-grid { gap: 10px; }.aboutus-value-card { min-height: 205px; padding: 20px 16px; }.aboutus-value-card h3 { margin-top: 20px; font-size: 14px; }
  .aboutus-approach-layout { grid-template-columns: 1fr; gap: 32px; }.aboutus-approach-copy { position: static; }
}
@media (max-width: 390px) {
  .aboutus-hero-layout, .aboutus-story-layout, .aboutus-values > .container, .aboutus-approach-layout, .aboutus-hero-foot { width: calc(100% - 32px); }
  .aboutus-hero-copy h1 { letter-spacing: -2.4px; }.aboutus-orbit-label { min-width: 100px; padding-inline: 8px; font-size: 8px; }.aboutus-label-people { right: -1px; }.aboutus-label-design { right: -1px; }
  .aboutus-values-grid { grid-template-columns: 1fr; }.aboutus-value-card { min-height: 0; padding: 20px; }.aboutus-value-card h3 { margin-top: 16px; }.aboutus-value-card p { max-width: 290px; }
}

.ourwork-hero { overflow: hidden; background: radial-gradient(ellipse at 78% 40%,rgba(40,93,133,.22),transparent 39%),var(--navy); }
.ourwork-hero-layout { min-height: 555px; padding: 52px 0 34px; display: grid; grid-template-columns: 1fr .95fr; align-items: center; gap: 48px; }
.ourwork-hero-copy { position: relative; z-index: 2; padding-bottom: 12px; }
.ourwork-hero-copy .breadcrumbs { margin-bottom: 35px; }.ourwork-hero-copy .eyebrow { margin-bottom: 17px; }
.ourwork-hero-copy h1 { max-width: 620px; margin-bottom: 19px; font-size: clamp(44px,5vw,64px); letter-spacing: -3.5px; }
.ourwork-hero-copy > p:not(.eyebrow):not(.ourwork-hero-note) { max-width: 510px; margin-bottom: 26px; color: #adbac7; font-size: 14px; line-height: 1.85; }
.ourwork-hero-note { margin: 27px 0 0; color: #91a6b7; font-size: 9px; }.ourwork-hero-note span { margin-right: 5px; color: var(--cyan); }
.ourwork-hero-art { position: relative; min-height: 390px; display: grid; place-items: center; }
.ourwork-art-glow { position: absolute; width: 330px; height: 330px; border-radius: 50%; background: radial-gradient(circle,rgba(70,147,169,.17),transparent 69%); }
.ourwork-art-window { position: relative; z-index: 1; width: min(340px,84%); min-height: 300px; overflow: hidden; border: 1px solid rgba(191,221,230,.21); border-radius: 7px; background: #f5f5ef; box-shadow: 0 26px 70px rgba(0,0,0,.28); transform: rotate(-3deg); }
.ourwork-window-bar { height: 33px; padding: 0 12px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid #e4e7e2; background: #fff; }.ourwork-window-bar > span { display: flex; gap: 4px; }.ourwork-window-bar i { width: 5px; height: 5px; border-radius: 50%; background: #bbc5c3; }.ourwork-window-bar small { flex: 1; color: #81908f; font-size: 6px; letter-spacing: 1px; }.ourwork-window-bar b { color: #598c92; font: 500 12px var(--font-body); }
.ourwork-window-body { position: relative; min-height: 267px; padding: 28px 30px; overflow: hidden; color: #223d38; background: linear-gradient(135deg,#f0f2e9,#e8efed); }.ourwork-window-body:after { position: absolute; right: -44px; bottom: -80px; width: 220px; height: 220px; border: 1px solid rgba(80,133,126,.18); border-radius: 50%; box-shadow: 0 0 0 22px rgba(80,133,126,.035),0 0 0 46px rgba(80,133,126,.025); content: ""; }
.ourwork-window-body > span { color: #66827c; font-size: 7px; font-weight: 700; letter-spacing: 1.3px; }.ourwork-window-body > strong { position: relative; z-index: 1; margin-top: 23px; display: block; font: 700 37px/.99 Georgia,serif; letter-spacing: -1.6px; }.ourwork-window-body > strong em { color: #50847d; font-weight: 400; }.ourwork-window-body > div { position: relative; z-index: 1; margin-top: 21px; display: flex; gap: 6px; }.ourwork-window-body > div i { width: 34px; height: 3px; background: #a1b0a4; }.ourwork-window-body > div i:first-child { background: #528b8b; }.ourwork-window-body > small { position: absolute; z-index: 1; bottom: 17px; left: 30px; color: #72817c; font-size: 6px; letter-spacing: .8px; }
.ourwork-art-chip { position: absolute; z-index: 2; padding: 10px 13px; display: inline-flex; align-items: center; gap: 9px; border: 1px solid rgba(186,219,229,.19); border-radius: 5px; color: #d8e7ee; background: #10263a; box-shadow: 0 13px 28px rgba(0,0,0,.2); font: 600 9px var(--font-display); }.ourwork-art-chip i { color: var(--cyan); font: 700 8px var(--font-body); font-style: normal; }.chip-shop { top: 31px; left: 0; }.chip-product { right: -3px; bottom: 39px; }
.ourwork-hero-foot { min-height: 52px; display: flex; align-items: center; gap: 17px; border-top: 1px solid rgba(255,255,255,.09); color: #92a6b7; font-size: 9px; letter-spacing: .4px; }.ourwork-hero-foot > span:nth-child(2) { height: 1px; flex: 1; background: rgba(255,255,255,.13); }
.ourwork-projects .section-heading { margin-bottom: 46px; }.ourwork-grid { gap: 23px; }.ourwork-grid .project-preview { height: 320px; }.ourwork-grid .work-info { min-height: 112px; align-items: flex-start; }.ourwork-project-meta { margin: 17px 3px 0; padding-top: 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #e4e9ed; }.ourwork-project-meta > span { color: #809096; font-size: 8px; font-weight: 700; letter-spacing: .8px; }.ourwork-project-meta a { color: #386b76; font-size: 10px; font-weight: 600; }.ourwork-project-meta a span { margin-left: 3px; color: #5595a0; }
@media (max-width: 950px) {
  .ourwork-hero-layout { grid-template-columns: 1fr .9fr; gap: 18px; }.ourwork-hero-art { transform: scale(.92); }.work-grid.ourwork-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 23px; }.ourwork-grid .project-preview { height: 300px; }
}
@media (max-width: 720px) {
  .ourwork-hero-layout { min-height: auto; padding: 32px 0 19px; grid-template-columns: 1fr; gap: 0; }.ourwork-hero-copy .breadcrumbs { margin-bottom: 31px; }.ourwork-hero-copy h1 { font-size: clamp(40px,9vw,55px); letter-spacing: -2.7px; }.ourwork-hero-copy > p:not(.eyebrow):not(.ourwork-hero-note) { font-size: 13px; }.ourwork-hero-note { margin-top: 19px; }
  .ourwork-hero-art { min-height: 330px; transform: none; }.ourwork-art-window { width: min(315px,80%); min-height: 270px; }.ourwork-window-body { min-height: 237px; padding: 24px; }.ourwork-window-body > strong { font-size: 33px; }.ourwork-window-body > small { left: 24px; }.chip-shop { top: 23px; left: 1%; }.chip-product { right: 0; bottom: 27px; }.ourwork-hero-foot { gap: 10px; font-size: 8px; }
  .ourwork-projects .section-heading { margin-bottom: 34px; }.work-grid.ourwork-grid { grid-template-columns: 1fr; gap: 35px; }.ourwork-grid .project-preview { height: 315px; }.ourwork-grid .work-info { min-height: 0; }
}
@media (max-width: 390px) {
  .ourwork-hero-layout, .ourwork-hero-foot, .ourwork-projects > .container { width: calc(100% - 32px); }
  .ourwork-hero-copy h1 { letter-spacing: -2.4px; }.ourwork-art-chip { padding: 8px 9px; font-size: 8px; }.chip-product { right: -1px; }.ourwork-grid .project-preview { height: 275px; }.ourwork-window-body > strong { font-size: 29px; }
  .ourwork-project-meta { align-items: flex-start; flex-direction: column; }
}

.contact-page-hero { overflow: hidden; background: radial-gradient(ellipse at 78% 42%,rgba(42,102,139,.22),transparent 39%),var(--navy); }
.contact-page-hero-layout { min-height: 495px; padding: 47px 0 29px; display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: 48px; }
.contact-page-copy { position: relative; z-index: 2; padding: 8px 0 17px; }.contact-page-copy .breadcrumbs { margin-bottom: 34px; }.contact-page-copy .eyebrow { margin-bottom: 17px; }
.contact-page-copy h1 { max-width: 610px; margin-bottom: 17px; font-size: clamp(44px,5vw,64px); letter-spacing: -3.5px; }.contact-page-copy h1 span { color: var(--cyan); }
.contact-page-copy > p:not(.eyebrow) { max-width: 485px; margin-bottom: 25px; color: #adbac7; font-size: 14px; line-height: 1.85; }
.contact-page-visual { position: relative; min-height: 355px; display: grid; place-items: center; }
.contact-visual-orbit { position: absolute; border: 1px solid rgba(132,210,227,.13); border-radius: 50%; }.contact-visual-orbit-outer { width: 315px; height: 315px; box-shadow: 0 0 0 30px rgba(132,210,227,.023); }.contact-visual-orbit-inner { width: 222px; height: 222px; border-style: dashed; }
.contact-visual-card { position: relative; z-index: 1; width: 218px; min-height: 242px; padding: 22px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border: 1px solid rgba(193,223,231,.24); border-radius: 7px; background: linear-gradient(145deg,#193348,#0d1d2d); box-shadow: 0 24px 58px rgba(0,0,0,.25); transform: rotate(-3deg); }
.contact-visual-mark { color: #e4f6f5; font: 800 22px var(--font-display); letter-spacing: -2px; }.contact-visual-mark span { color: var(--cyan); }.contact-visual-card > small { margin-top: 17px; color: #82b7c0; font-size: 6px; font-weight: 700; letter-spacing: 1.2px; }.contact-visual-card > strong { margin-top: 9px; color: #eff6f8; font: 650 22px/1.12 var(--font-display); letter-spacing: -.7px; }.contact-visual-card > strong em { color: var(--cyan); font-style: normal; }.contact-visual-line { width: 100%; height: 1px; margin-top: 14px; background: rgba(255,255,255,.13); }.contact-visual-caption { margin-top: 9px; color: #9bb0bc; font-size: 6px; letter-spacing: .7px; }
.contact-visual-note { position: absolute; z-index: 2; padding: 10px 12px; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(186,219,229,.17); border-radius: 5px; color: #d8e7ee; background: #10263a; box-shadow: 0 12px 27px rgba(0,0,0,.2); font: 600 8px var(--font-display); }.contact-visual-note i { color: var(--cyan); font: 700 7px var(--font-body); font-style: normal; }.contact-note-one { top: 27px; left: 0; }.contact-note-two { right: -4px; bottom: 36px; }
.contact-page-hero-foot { min-height: 50px; display: flex; align-items: center; gap: 17px; border-top: 1px solid rgba(255,255,255,.09); color: #92a6b7; font-size: 9px; letter-spacing: .4px; }.contact-page-hero-foot > span:nth-child(2) { height: 1px; flex: 1; background: rgba(255,255,255,.13); }
.contact-page-main { background: #fff; }.contact-page-layout { display: grid; grid-template-columns: .72fr 1fr; align-items: start; gap: 80px; }.contact-page-aside { padding-top: 8px; }.contact-page-aside h2 { margin: 0 0 17px; color: #142633; font-size: clamp(34px,3.8vw,45px); line-height: 1.18; letter-spacing: -1.9px; }.contact-page-aside h2 span { color: #478d9d; }.contact-page-aside > p:not(.eyebrow):not(.contact-hint) { max-width: 390px; color: #6e7b85; font-size: 13px; line-height: 1.8; }.contact-page-details { margin-top: 28px; }.contact-page-details .contact-detail-icon { border-color: #dce7e9; color: #438995; background: #f2f8f8; }.contact-page-details .contact-detail small { color: #83919a; }.contact-page-details .contact-detail strong { color: #334b57; }.contact-page-aside .contact-hint { color: #75828b; }
.contact-page-expectation { margin-top: 25px; padding: 14px; display: flex; align-items: flex-start; gap: 11px; border: 1px solid #dce8eb; border-radius: 5px; background: #f5f9fa; }.contact-page-expectation > span { width: 18px; height: 18px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #528d98; font: 700 11px Georgia,serif; }.contact-page-expectation p { margin: 0; color: #647780; font-size: 9px; line-height: 1.7; }
.contact-page .contact-form { border-color: #dce5e9; background: #f8fafb; box-shadow: 0 17px 42px rgba(27,58,73,.06); }.contact-page .form-heading h3 { color: #203542; }.contact-page .form-heading p, .contact-page .contact-form label { color: #576a75; }.contact-page .contact-form input, .contact-page .contact-form select, .contact-page .contact-form textarea { border-color: #d7e1e5; color: #203642; background: #fff; }.contact-page .contact-form input::placeholder, .contact-page .contact-form textarea::placeholder { color: #84939a; }.contact-page .contact-form select:invalid { color: #84939a; }.contact-page .contact-form select option { color: #182938; }.contact-page .field-hint { color: #74848c; }.contact-page .form-bottom > p { color: #75848c; }.contact-page .form-error { color: #a02f2f; }.contact-page .contact-form input[aria-invalid="true"], .contact-page .contact-form select[aria-invalid="true"], .contact-page .contact-form textarea[aria-invalid="true"] { border-color: #bd5555; }
.contact-page-next-layout { display: grid; grid-template-columns: .85fr 1fr; align-items: center; gap: 88px; }.contact-page-next-layout h2 { max-width: 460px; margin: 0 0 14px; color: #172a36; font-size: clamp(33px,3.5vw,43px); line-height: 1.2; letter-spacing: -1.7px; }.contact-page-next-layout h2 span { color: #478d9d; }.contact-page-next-layout > div:first-child > p:last-child { max-width: 430px; margin: 0; color: #71808a; font-size: 12px; line-height: 1.8; }
.contact-page-links { border-top: 1px solid #dce5e7; }.contact-page-links > a { padding: 17px 2px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid #dce5e7; transition: padding .2s,color .2s; }.contact-page-links > a:hover { padding-inline: 8px; color: #347985; }.contact-page-links b, .contact-page-links small { display: block; }.contact-page-links b { color: #253944; font: 650 13px var(--font-display); }.contact-page-links small { margin-top: 4px; color: #7b8991; font-size: 9px; }.contact-page-links i { color: #528d98; font-size: 15px; font-style: normal; }
@media (max-width: 950px) {
  .contact-page-hero-layout { grid-template-columns: 1fr .86fr; gap: 20px; }.contact-page-visual { transform: scale(.92); }.contact-page-layout { gap: 42px; }.contact-page-next-layout { gap: 55px; }
}
@media (max-width: 720px) {
  .contact-page-hero-layout { min-height: auto; padding: 32px 0 19px; grid-template-columns: 1fr; gap: 0; }.contact-page-copy .breadcrumbs { margin-bottom: 31px; }.contact-page-copy h1 { font-size: clamp(40px,9vw,55px); letter-spacing: -2.7px; }.contact-page-copy > p:not(.eyebrow) { font-size: 13px; }
  .contact-page-visual { min-height: 315px; transform: none; }.contact-visual-orbit-outer { width: 260px; height: 260px; }.contact-visual-orbit-inner { width: 190px; height: 190px; }.contact-visual-card { width: 196px; min-height: 218px; }.contact-note-one { top: 19px; left: 1%; }.contact-note-two { right: 0; bottom: 25px; }.contact-page-hero-foot { gap: 10px; font-size: 8px; }
  .contact-page-layout { grid-template-columns: 1fr; gap: 34px; }.contact-page-aside h2 { max-width: 510px; font-size: 37px; }.contact-page-aside > p:not(.eyebrow):not(.contact-hint) { font-size: 12px; }.contact-page .contact-form { padding: 22px 17px; }.contact-page .form-heading { align-items: flex-start; flex-direction: column; gap: 3px; }.contact-page .form-heading h3 { font-size: 17px; }.contact-page .form-row { gap: 10px; }.contact-page .contact-form label { font-size: 9px; }.contact-page .contact-form input, .contact-page .contact-form select, .contact-page .contact-form textarea { padding-inline: 9px; font-size: 10px; }.contact-page .form-bottom { align-items: flex-start; flex-direction: column; }.contact-page .form-bottom > p { max-width: 290px; }
  .contact-page-next-layout { grid-template-columns: 1fr; gap: 28px; }.contact-page-next-layout h2 { font-size: 37px; }
}
@media (max-width: 390px) {
  .contact-page-hero-layout, .contact-page-hero-foot, .contact-page-layout, .contact-page-next-layout { width: calc(100% - 32px); }.contact-page-copy h1 { letter-spacing: -2.4px; }.contact-visual-note { padding: 8px 9px; font-size: 7px; }.contact-note-one { left: 0; }.contact-note-two { right: -1px; }.contact-page .contact-form { padding: 20px 14px; }
}

.contact.section-pad, .contact-page-main { color: #172934; background: radial-gradient(ellipse at 7% 15%,rgba(127,198,201,.14),transparent 36%),#f1f6f6; }
.contact-layout, .contact-page-layout { grid-template-columns: .78fr 1fr; align-items: stretch; gap: 54px; }
.contact-copy, .contact-page-aside { position: relative; isolation: isolate; overflow: hidden; padding: 41px 35px; border: 1px solid rgba(162,218,223,.14); border-radius: 9px; color: #f3f8fa; background: radial-gradient(ellipse at 15% 100%,rgba(53,121,152,.28),transparent 56%),linear-gradient(145deg,#11293a,#071522 78%); box-shadow: 0 18px 48px rgba(17,49,63,.12); }
.contact-copy:before, .contact-page-aside:before { position: absolute; z-index: -1; right: -111px; bottom: -145px; width: 310px; height: 310px; border: 1px solid rgba(135,221,229,.14); border-radius: 50%; box-shadow: 0 0 0 25px rgba(135,221,229,.025),0 0 0 51px rgba(135,221,229,.02); content: ""; }
.contact-copy:after, .contact-page-aside:after { position: absolute; z-index: -1; top: 0; right: 0; width: 100%; height: 3px; background: linear-gradient(90deg,transparent,var(--cyan),rgba(72,136,255,.65),transparent); content: ""; }
.contact-copy .eyebrow, .contact-page-aside .eyebrow { color: #86cdd1; }
.contact-copy h2 { max-width: 410px; font-size: clamp(38px,4vw,52px); letter-spacing: -2.5px; }
.contact-copy > p:not(.eyebrow):not(.contact-hint), .contact-page-aside > p:not(.eyebrow):not(.contact-hint) { color: #b7c6ce; }
.contact-copy .contact-detail-icon, .contact-page-details .contact-detail-icon { border-color: rgba(222,242,244,.17); color: var(--cyan); background: rgba(255,255,255,.045); }
.contact-copy .contact-detail small, .contact-page-details .contact-detail small { color: #9db2be; }
.contact-copy .contact-detail strong, .contact-page-details .contact-detail strong { color: #edf4f6; }
.contact-copy .contact-hint, .contact-page-aside .contact-hint { color: #90a7b3; }
.contact-start-card { border-color: #dce5e9; color: #21343e; background: #fff; box-shadow: 0 18px 48px rgba(17,49,63,.08); }
.contact-start-kicker { color: #438995; }
.contact-start-card h3 { color: #203542; }
.contact-start-card > p:not(.contact-start-kicker) { color: #647780; }
.contact-start-steps { border-color: #dce5e7; }
.contact-start-steps span { border-color: #dce5e7; color: #334b57; }
.contact-start-steps b { color: #438995; }
.contact-start-card > .contact-start-note { color: #75848c; }
.contact-form, .contact-page .contact-form { padding: 32px; border: 1px solid #e0e9eb; border-radius: 9px; color: #21343e; background: #fff; box-shadow: 0 18px 48px rgba(17,49,63,.08); }
.form-heading h3 { color: #172d39; }.form-heading p { color: #788890; }
.contact-form label, .contact-page .contact-form label { color: #455c67; }
.contact-form input, .contact-form select, .contact-form textarea, .contact-page .contact-form input, .contact-page .contact-form select, .contact-page .contact-form textarea { border-color: #d7e2e5; color: #203642; background: #f9fbfb; }
.contact-form input::placeholder, .contact-form textarea::placeholder, .contact-page .contact-form input::placeholder, .contact-page .contact-form textarea::placeholder { color: #89979d; }
.contact-form select:invalid, .contact-page .contact-form select:invalid { color: #89979d; }.contact-form select option, .contact-page .contact-form select option { color: #182938; background: #fff; }
.optional { color: #819098; }.field-hint { color: #778990; }.form-bottom > p, .contact-page .form-bottom > p { color: #718189; }.form-error, .contact-page .form-error { color: #a02f2f; }
.contact-form input[aria-invalid="true"], .contact-form select[aria-invalid="true"], .contact-form textarea[aria-invalid="true"], .contact-page .contact-form input[aria-invalid="true"], .contact-page .contact-form select[aria-invalid="true"], .contact-page .contact-form textarea[aria-invalid="true"] { border-color: #bd5555; }
.contact-page .contact-page-layout { gap: 54px; }.contact-page-aside { padding-top: 38px; }.contact-page-aside h2 { color: #f3f8fa; font-size: clamp(36px,3.9vw,48px); }.contact-page-aside h2 span { color: var(--cyan); }.contact-page-aside .contact-page-details { margin-top: 30px; }.contact-page .contact-page-expectation { border-color: rgba(224,244,245,.15); background: rgba(255,255,255,.06); }.contact-page .contact-page-expectation > span { color: #102534; background: var(--cyan); }.contact-page .contact-page-expectation p { color: #b3c3cc; }
@media (max-width: 950px) {
  .contact-layout, .contact-page-layout { gap: 30px; }.contact-copy, .contact-page-aside { padding: 31px 25px; }.contact-form, .contact-page .contact-form { padding: 26px; }
}
@media (max-width: 720px) {
  .contact-layout, .contact-page-layout { grid-template-columns: 1fr; gap: 23px; }.contact-copy, .contact-page-aside { padding: 30px 24px; }.contact-copy h2, .contact-page-aside h2 { font-size: 39px; }.contact-form, .contact-page .contact-form { padding: 24px 19px; }
}
@media (max-width: 390px) {
  .contact-copy, .contact-page-aside { padding: 27px 20px; }.contact-copy h2, .contact-page-aside h2 { font-size: 35px; }.contact-form, .contact-page .contact-form { padding: 21px 15px; }
}

.talk-dialog { position: fixed; width: min(900px,calc(100% - 36px)); max-width: none; max-height: min(780px,calc(100dvh - 36px)); padding: 0; overflow: auto; border: 1px solid rgba(199,222,230,.32); border-radius: 12px; color: var(--ink); background: #fff; box-shadow: 0 30px 100px rgba(0,12,22,.4); }
.talk-dialog[open] { animation: talk-dialog-enter .24s ease-out both; }
.talk-dialog::backdrop { background: rgba(3,13,22,.76); backdrop-filter: blur(7px); animation: talk-backdrop-enter .2s ease-out both; }
.talk-dialog-layout { position: relative; min-height: 570px; display: grid; grid-template-columns: .87fr 1fr; }
.talk-dialog-intro { position: relative; isolation: isolate; overflow: hidden; min-height: 100%; padding: 43px 36px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; color: #f3f8fa; background: radial-gradient(ellipse at 17% 100%,rgba(50,129,157,.29),transparent 55%),linear-gradient(150deg,#10283a,#071522 80%); }
.talk-dialog-close { position: absolute; z-index: 3; top: 17px; right: 17px; width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid rgba(232,245,248,.2); border-radius: 50%; color: #e6f1f3; background: rgba(255,255,255,.06); font: 300 24px/1 var(--font-body); cursor: pointer; transition: background .18s,transform .18s; }
.talk-dialog-close:hover { background: rgba(255,255,255,.15); transform: rotate(90deg); }
.talk-dialog-kicker { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; color: #91cdd1; font-size: 8px; font-weight: 700; letter-spacing: 1.4px; }.talk-dialog-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px rgba(102,225,232,.6); }
.talk-dialog-mark { position: relative; z-index: 1; width: 35px; height: 35px; margin-top: 37px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; transform: rotate(-8deg); }.talk-dialog-mark b { border-radius: 2px 7px 2px 7px; background: linear-gradient(145deg,#76e8e8,#458cff); }.talk-dialog-mark b:nth-child(2) { opacity: .68; transform: translateY(3px); }.talk-dialog-mark b:nth-child(3) { opacity: .84; transform: translateX(3px); }.talk-dialog-mark b:nth-child(4) { background: #6984ff; }
.talk-dialog-intro h2 { position: relative; z-index: 1; max-width: 360px; margin: 22px 0 13px; color: #f2f7f9; font: 700 clamp(30px,3.4vw,40px)/1.14 var(--font-display); letter-spacing: -1.7px; }.talk-dialog-intro h2 span { color: var(--cyan); }
.talk-dialog-intro > p { position: relative; z-index: 1; max-width: 330px; margin: 0; color: #afc0ca; font-size: 11px; line-height: 1.8; }
.talk-dialog-points { position: relative; z-index: 1; width: 100%; margin-top: 34px; padding-top: 17px; display: grid; gap: 12px; border-top: 1px solid rgba(255,255,255,.13); }.talk-dialog-points span { color: #c7d5dc; font-size: 9px; }.talk-dialog-points i { margin-right: 9px; color: var(--cyan); font: 700 8px var(--font-body); font-style: normal; }
.talk-dialog-orbit { position: absolute; z-index: 0; right: -106px; bottom: -128px; width: 300px; height: 300px; border: 1px solid rgba(121,215,225,.12); border-radius: 50%; box-shadow: 0 0 0 23px rgba(121,215,225,.025),0 0 0 47px rgba(121,215,225,.02); }.talk-orbit-two { right: -63px; bottom: -85px; width: 215px; height: 215px; border-style: dashed; }
.talk-dialog-form-panel { padding: 39px 37px 31px; background: #fff; }.talk-dialog-form-heading .eyebrow { margin-bottom: 9px; font-size: 8px; letter-spacing: 1.3px; }.talk-dialog-form-heading h3 { margin: 0 0 5px; color: #182d39; font-size: 21px; letter-spacing: -.6px; }.talk-dialog-form-heading > p:last-child { margin: 0 0 22px; color: #7a8990; font-size: 10px; }
.talk-dialog .contact-form { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }.talk-dialog .contact-form label { margin-bottom: 12px; color: #455c67; font-size: 9px; }.talk-dialog .contact-form input, .talk-dialog .contact-form select, .talk-dialog .contact-form textarea { min-height: 39px; margin-top: 5px; padding: 9px 10px; border-color: #d7e2e5; color: #203642; background: #f8fafb; font-size: 10px; }.talk-dialog .contact-form textarea { min-height: 70px; }.talk-dialog .contact-form input::placeholder, .talk-dialog .contact-form textarea::placeholder { color: #89979d; }.talk-dialog .contact-form select:invalid { color: #89979d; }.talk-dialog .contact-form select option { color: #182938; background: #fff; }.talk-dialog .field-hint { color: #778990; font-size: 8px; }.talk-dialog .talk-form-bottom { display: flex; align-items: center; gap: 13px; }.talk-dialog .talk-form-bottom .button { min-height: 42px; padding-inline: 15px; font-size: 10px; }.talk-dialog-privacy { color: #849199; font-size: 8px; line-height: 1.5; }.talk-dialog .form-status { margin: 11px 0 0; color: #6c7c84; font-size: 8px; line-height: 1.6; }.talk-dialog .form-error { margin: 9px 0 0; color: #a02f2f; font-size: 9px; }.talk-dialog .contact-form [aria-invalid="true"] { border-color: #bd5555; }
@keyframes talk-dialog-enter { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes talk-backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 700px) {
  .talk-dialog { width: min(520px,calc(100% - 28px)); max-height: calc(100dvh - 28px); border-radius: 10px; }.talk-dialog-layout { min-height: 0; grid-template-columns: 1fr; }.talk-dialog-intro { min-height: 0; padding: 18px 22px 15px; justify-content: flex-start; }.talk-dialog-close { position: absolute; top: 12px; right: 12px; width: 31px; height: 31px; }.talk-dialog-mark, .talk-dialog-points { display: none; }.talk-dialog-intro h2 { max-width: 390px; margin: 14px 38px 6px 0; font-size: 25px; letter-spacing: -1px; }.talk-dialog-intro > p { max-width: 400px; font-size: 9px; }.talk-dialog-orbit { right: -75px; bottom: -177px; width: 260px; height: 260px; }.talk-orbit-two { right: -38px; bottom: -138px; width: 185px; height: 185px; }.talk-dialog-form-panel { padding: 18px 22px 18px; }.talk-dialog-form-heading .eyebrow { margin-bottom: 6px; }.talk-dialog-form-heading h3 { font-size: 18px; }.talk-dialog-form-heading > p:last-child { margin-bottom: 11px; }.talk-dialog .contact-form label { margin-bottom: 8px; }.talk-dialog .contact-form input, .talk-dialog .contact-form select { min-height: 36px; }.talk-dialog .contact-form textarea { min-height: 54px; }.talk-dialog .form-status { margin-top: 7px; }
}
@media (max-width: 390px) {
  .talk-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); }.talk-dialog-intro { padding: 15px 18px 12px; }.talk-dialog-intro h2 { margin-top: 10px; font-size: 23px; }.talk-dialog-intro > p { max-width: 310px; font-size: 8px; }.talk-dialog-form-panel { padding: 16px 18px 15px; }.talk-dialog .contact-form label { margin-bottom: 7px; }.talk-dialog .contact-form input, .talk-dialog .contact-form select { min-height: 34px; }.talk-dialog .contact-form textarea { min-height: 48px; }
}
@media (max-width: 700px) and (max-height: 680px) {
  .talk-dialog-intro { padding: 12px 18px 9px; }.talk-dialog-intro h2 { margin-top: 7px; font-size: 21px; }.talk-dialog-intro > p { display: none; }
  .talk-dialog-form-panel { padding-top: 12px; padding-bottom: 12px; }.talk-dialog-form-heading .eyebrow { margin-bottom: 4px; }.talk-dialog-form-heading > p:last-child { margin-bottom: 8px; }
  .talk-dialog .contact-form label { margin-bottom: 5px; }.talk-dialog .contact-form input, .talk-dialog .contact-form select { min-height: 32px; padding-block: 7px; }.talk-dialog .contact-form textarea { min-height: 40px; padding-block: 7px; }.talk-dialog .field-hint { display: none; }.talk-dialog .talk-form-bottom .button { min-height: 38px; }.talk-dialog .form-status { margin-top: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .talk-dialog[open], .talk-dialog::backdrop { animation: none; }
}

/* Premium services experience */
.service-site .service-overview-hero,
.service-site .detail-hero { isolation: isolate; background: radial-gradient(circle at 86% 18%, rgba(81,190,205,.2), transparent 27%), radial-gradient(circle at 15% 88%, rgba(66,104,211,.16), transparent 30%), #071321; }
.service-site .service-overview-hero::before,
.service-site .detail-hero::before { position: absolute; z-index: -1; top: -28%; right: -8%; width: 620px; height: 620px; border: 1px solid rgba(113,224,229,.13); border-radius: 50%; box-shadow: 0 0 0 38px rgba(93,199,217,.035), 0 0 0 82px rgba(93,199,217,.025); content: ""; animation: service-orbit 18s linear infinite; }
.service-site .service-overview-hero::after,
.service-site .detail-hero::after { position: absolute; z-index: -1; right: 10%; bottom: 7%; width: 90px; height: 90px; border: 1px solid rgba(111,225,231,.28); border-radius: 18px; content: ""; transform: rotate(24deg); animation: service-float 7s ease-in-out infinite; }
.service-site .overview-hero-layout { min-height: 620px; }
.service-site .overview-hero-layout h1 { max-width: 760px; font-size: clamp(46px, 5.3vw, 72px); letter-spacing: -4px; }
.service-site .overview-hero-layout h1 span { background: linear-gradient(100deg,#8cf0e9,#6caaff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.service-site .hero-description { max-width: 585px; font-size: 15px; line-height: 1.85; }
.service-site .overview-hero-layout > div:first-child { animation: service-hero-in .7s .08s both; }
.service-site .overview-visual { animation: service-hero-in .8s .2s both; }
.service-site .overview-visual-center { width: 205px; height: 205px; border-color: rgba(125,232,233,.45); background: linear-gradient(145deg,rgba(25,70,94,.92),rgba(10,28,48,.94)); box-shadow: 0 0 0 15px rgba(98,213,221,.035), 0 24px 70px rgba(0,0,0,.4); }
.service-site .overview-chip { border-color: rgba(126,225,230,.25); border-radius: 11px; background: rgba(16,42,63,.78); backdrop-filter: blur(10px); }
.service-site .service-catalog { background: linear-gradient(180deg,#fff 0%,#f5fafb 100%); }
.service-site .service-overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.service-site .overview-service-card,
.service-site .overview-service-card:nth-child(1),
.service-site .overview-service-card:nth-child(2) { grid-column: auto; min-height: 480px; padding: 0 26px 26px; overflow: hidden; border: 1px solid #dce9ec; border-radius: 18px; background: rgba(255,255,255,.92); box-shadow: 0 16px 42px rgba(18,57,76,.06); }
.service-site .overview-service-card:hover { border-color: #8dcbd1; box-shadow: 0 25px 55px rgba(25,87,105,.14); transform: translateY(-8px); }
.service-site .overview-service-card::before { display: block; height: 142px; margin: 0 -26px 24px; border-bottom: 1px solid rgba(137,205,211,.2); background: radial-gradient(circle at 75% 25%,rgba(124,235,227,.42),transparent 22%), linear-gradient(135deg,#12354e,#0a1c30 62%,#163b54); content: ""; }
.service-site .overview-service-card::after { position: absolute; top: 43px; right: 36px; color: rgba(211,248,249,.9); font: 800 48px/1 var(--font-display); letter-spacing: -5px; content: "</>"; }
.service-site .overview-service-card:nth-child(2)::before { background: radial-gradient(circle at 24% 30%,rgba(175,143,255,.5),transparent 23%), linear-gradient(135deg,#281c52,#17284b 62%,#21486b); }
.service-site .overview-service-card:nth-child(2)::after { right: 40px; content: "◉"; }
.service-site .overview-service-card:nth-child(3)::before { background: radial-gradient(circle at 72% 28%,rgba(105,170,255,.5),transparent 23%), linear-gradient(135deg,#132d50,#0b1d37 62%,#244977); }
.service-site .overview-service-card:nth-child(3)::after { content: "▦"; }
.service-site .overview-service-card:nth-child(4)::before { background: radial-gradient(circle at 26% 28%,rgba(102,230,192,.48),transparent 23%), linear-gradient(135deg,#103e48,#102a43 62%,#1e625f); }
.service-site .overview-service-card:nth-child(4)::after { content: "✦"; }
.service-site .overview-service-card:nth-child(5)::before { background: radial-gradient(circle at 76% 26%,rgba(255,191,130,.5),transparent 22%), linear-gradient(135deg,#4d2d36,#252843 62%,#635244); }
.service-site .overview-service-card:nth-child(5)::after { content: "✳"; }
.service-site .overview-card-top { margin-bottom: 15px; }
.service-site .overview-service-card h2 { font-size: 22px; }
.service-site .overview-service-card > p { font-size: 12.5px; }
.service-site .overview-service-card .button { margin-top: auto; border-radius: 8px; }
.service-site .overview-why-layout { padding: 10px 0; }
.service-site .overview-why-grid article { padding: 20px; border: 1px solid #dce8eb; border-radius: 14px; background: rgba(255,255,255,.68); transition: transform .25s, box-shadow .25s, border-color .25s; }
.service-site .overview-why-grid article:hover { border-color: #94cdd2; box-shadow: 0 16px 30px rgba(28,83,101,.09); transform: translateY(-4px); }
.service-site .overview-steps li { padding: 50px 20px 0 0; }
.service-site .overview-steps li > b { width: 36px; height: 36px; color: #fff; border: 0; background: linear-gradient(135deg,#397c91,#6679dd); box-shadow: 0 7px 18px rgba(53,115,143,.22); }
.service-site .overview-steps:before { top: 18px; height: 2px; opacity: .55; }
.service-site .overview-cta,
.service-site .detail-cta { position: relative; overflow: hidden; }
.service-site .overview-cta::after,
.service-site .detail-cta::after { position: absolute; right: 8%; bottom: -90px; width: 280px; height: 280px; border: 1px solid rgba(117,225,229,.2); border-radius: 50%; content: ""; }
.service-site .detail-hero-layout { min-height: 620px; }
.service-site .service-hero-copy h1 { font-size: clamp(43px,4.9vw,68px); }
.service-site .detail-visual { filter: drop-shadow(0 25px 45px rgba(0,0,0,.18)); }
.service-site .service-intro-band { background: linear-gradient(110deg,#f7fbfc,#edf6f7); }
.service-site .capability-card,
.service-site .usecase-card,
.service-site .related-service-link { border-radius: 15px; border-color: #dbe8eb; box-shadow: 0 10px 28px rgba(17,57,73,.045); transition: transform .25s, box-shadow .25s, border-color .25s; }
.service-site .capability-card:hover,
.service-site .usecase-card:hover,
.service-site .related-service-link:hover { border-color: #8ecbd1; box-shadow: 0 18px 35px rgba(20,80,98,.1); transform: translateY(-5px); }
.service-site .capability-card > span { display: inline-grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; color: #176675; background: #e7f7f7; }
.service-site .detail-process article { padding: 22px; border: 1px solid #dbe7ea; border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgba(17,57,73,.04); }
.service-site .detail-process h3 { margin-top: 15px; }
.service-site .js-ready .overview-service-card,
.service-site .js-ready .overview-why-grid article,
.service-site .js-ready .overview-steps li,
.service-site .js-ready .capability-card,
.service-site .js-ready .usecase-card,
.service-site .js-ready .detail-process article,
.service-site .js-ready .related-service-link { transition-delay: calc(var(--stagger, 0) * 80ms); }
@keyframes service-hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes service-orbit { to { transform: rotate(360deg); } }
@keyframes service-float { 50% { transform: translateY(-16px) rotate(42deg); } }
@media (max-width: 950px) {
  .service-site .service-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-site .overview-service-card, .service-site .overview-service-card:nth-child(1), .service-site .overview-service-card:nth-child(2) { min-height: 460px; }
}
@media (max-width: 720px) {
  .service-site .service-overview-grid { grid-template-columns: 1fr; }
  .service-site .overview-service-card, .service-site .overview-service-card:nth-child(1), .service-site .overview-service-card:nth-child(2) { min-height: 0; padding-bottom: 22px; }
  .service-site .overview-service-card::before { height: 120px; }
  .service-site .overview-hero-layout h1 { font-size: clamp(40px,10vw,56px); letter-spacing: -2.8px; }
  .service-site .overview-visual-center { width: 160px; height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-site .service-overview-hero::before, .service-site .service-overview-hero::after, .service-site .detail-hero::before, .service-site .detail-hero::after, .service-site .overview-hero-layout > div:first-child, .service-site .overview-visual { animation: none; }
}

/* Individual service pages: full premium layout */
.service-site:has(.detail-hero) { background: #f7fafb; }
.service-site:has(.detail-hero) .site-header { background: rgba(5,18,31,.88); backdrop-filter: blur(16px); }
.service-site .detail-hero { min-height: 720px; background: linear-gradient(125deg,#061321 0%,#0a2138 52%,#102d45 100%); }
.service-site .detail-hero::before { top: -15%; right: 35%; width: 760px; height: 760px; opacity: .7; }
.service-site .detail-hero::after { right: 7%; bottom: 16%; width: 130px; height: 130px; border-radius: 32px; }
.service-site .detail-hero-layout { min-height: 720px; padding: 76px 0 92px; grid-template-columns: minmax(0,1.02fr) minmax(390px,.98fr); gap: 70px; }
.service-site .service-hero-copy { position: relative; z-index: 2; }
.service-site .service-hero-copy::before { display: block; width: 52px; height: 3px; margin-bottom: 30px; border-radius: 3px; background: linear-gradient(90deg,#8deee8,#6e94ff); content: ""; }
.service-site .service-hero-copy .breadcrumbs { margin-bottom: 28px; opacity: .8; }
.service-site .service-hero-copy .eyebrow { color: #91dce0; letter-spacing: 2.4px; }
.service-site .service-hero-copy h1 { max-width: 700px; margin: 0 0 25px; font-size: clamp(48px,5.2vw,76px); line-height: 1.04; letter-spacing: -4.8px; }
.service-site .service-hero-copy h1 span { background: linear-gradient(105deg,#8cece8,#83aaff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.service-site .service-hero-copy > p:not(.eyebrow) { max-width: 590px; margin-bottom: 34px; color: #b5c8d4; font-size: 15px; line-height: 1.9; }
.service-site .detail-visual { min-height: 470px; isolation: isolate; }
.service-site .detail-visual::before { position: absolute; z-index: -1; width: 430px; height: 430px; border: 1px solid rgba(124,226,229,.22); border-radius: 50%; box-shadow: 0 0 0 28px rgba(124,226,229,.035),0 0 0 75px rgba(124,226,229,.025); content: ""; animation: service-ring 20s linear infinite; }
.service-site .detail-visual::after { position: absolute; z-index: -1; width: 560px; height: 210px; border: 1px solid rgba(111,159,255,.16); border-radius: 50%; content: ""; transform: rotate(-25deg); }
.service-site .detail-art-window,
.service-site .saas-art-panel,
.service-site .mobile-art-device,
.service-site .ai-art-flow,
.service-site .brand-art-board { box-shadow: 0 35px 90px rgba(0,0,0,.42), 0 0 0 1px rgba(177,231,239,.18); }
.service-site .detail-art-window { width: 94%; max-width: 500px; border-radius: 18px; transform: rotate(-3deg); }
.service-site .detail-window-top { height: 39px; padding-inline: 18px; font-size: 8px; }
.service-site .web-art-content { min-height: 355px; padding: 48px 38px; }
.service-site .web-art-content strong { font-size: 34px; }
.service-site .saas-art-panel { max-width: 500px; min-height: 330px; border-radius: 18px; transform: rotate(-3deg); }
.service-site .mobile-art-device { transform: rotate(7deg) translateY(8px); }
.service-site .ai-art-flow { max-width: 500px; min-height: 350px; border-radius: 18px; background: linear-gradient(145deg,rgba(23,57,80,.96),rgba(7,20,36,.96)); }
.service-site .brand-art-board { max-width: 475px; border-radius: 20px; background: rgba(16,39,59,.54); }
.service-site .service-intro-band { position: relative; overflow: hidden; padding: 96px 0; border: 0; color: #e9f5f6; background: linear-gradient(115deg,#0a1b2d,#123b50); }
.service-site .service-intro-band::after { position: absolute; right: -100px; bottom: -200px; width: 500px; height: 500px; border: 1px solid rgba(125,232,233,.16); border-radius: 50%; box-shadow: 0 0 0 32px rgba(125,232,233,.025); content: ""; }
.service-site .service-intro-layout { position: relative; z-index: 1; grid-template-columns: .78fr 1fr; gap: 110px; }
.service-site .service-intro-layout h2 { max-width: 470px; color: #f2fbfc; font-size: clamp(34px,4vw,54px); line-height: 1.08; letter-spacing: -2.6px; }
.service-site .service-intro-layout h2 span { color: #83e4e5; }
.service-site .service-intro-layout p { color: #b1c5d0; font-size: 14px; line-height: 1.95; }
.service-site .detail-section { padding: 112px 0; background: #f7fafb; }
.service-site .detail-section.tinted { background: linear-gradient(125deg,#071523,#0d273d); }
.service-site .detail-section-heading { max-width: 760px; margin-bottom: 48px; }
.service-site .detail-section-heading .eyebrow { color: #5799a4; }
.service-site .detail-section-heading h2 { margin-bottom: 17px; font-size: clamp(36px,4.4vw,58px); letter-spacing: -2.8px; }
.service-site .detail-section-heading h2 span { color: #428e9c; }
.service-site .detail-section-heading > p:last-child { max-width: 580px; font-size: 14px; line-height: 1.85; }
.service-site .capability-grid { grid-template-columns: repeat(3,1fr); gap: 20px; }
.service-site .capability-card { position: relative; min-height: 205px; padding: 28px; overflow: hidden; border-radius: 18px; border-color: #dce9ec; background: #fff; }
.service-site .capability-card::after { position: absolute; right: -30px; bottom: -45px; width: 130px; height: 130px; border: 1px solid rgba(86,178,187,.18); border-radius: 50%; content: ""; }
.service-site .capability-card h3 { margin-top: 20px; font-size: 18px; }
.service-site .capability-card p { max-width: 260px; font-size: 12px; line-height: 1.8; }
.service-site .detail-section.tinted .detail-section-heading .eyebrow { color: #83dce0; }
.service-site .detail-section.tinted .detail-section-heading h2 { color: #f2f8fa; }
.service-site .detail-section.tinted .detail-section-heading h2 span { color: #83e4e5; }
.service-site .detail-section.tinted .detail-section-heading > p:last-child { color: #acc0cc; }
.service-site .detail-section.tinted .detail-process article,
.service-site .detail-section.tinted .usecase-card { border-color: rgba(173,224,231,.16); color: #eaf5f7; background: rgba(255,255,255,.06); }
.service-site .detail-section.tinted .detail-process p,
.service-site .detail-section.tinted .usecase-card p { color: #acc2cc; }
.service-site .detail-process { grid-template-columns: repeat(4,1fr); gap: 16px; }
.service-site .detail-process article { min-height: 205px; padding: 26px; border-radius: 16px; border-top: 2px solid #69d8db; background: #fff; }
.service-site .detail-process b { letter-spacing: 1px; }
.service-site .detail-process h3 { font-size: 18px; }
.service-site .detail-note { max-width: 920px; margin-inline: auto; padding: 23px 26px; border: 1px solid #b9dfe2; border-left: 4px solid #4fb6bf; border-radius: 12px; color: #48626d; background: #edf9f9; font-size: 12px; }
.service-site .usecase-grid { grid-template-columns: repeat(3,1fr); gap: 20px; }
.service-site .usecase-card { min-height: 190px; padding: 28px; border-radius: 18px; }
.service-site .usecase-card h3 { font-size: 18px; }
.service-site .related-services { gap: 18px; }
.service-site .related-service-link { min-height: 78px; padding: 22px 24px; border-radius: 14px; background: #fff; }
.service-site .detail-faq { gap: 100px; }
.service-site .detail-cta { padding: 100px 0; background: radial-gradient(circle at 82% 35%,rgba(102,190,207,.24),transparent 30%),linear-gradient(120deg,#061321,#12354c); }
.service-site .detail-cta h2 { max-width: 650px; font-size: clamp(36px,4vw,54px); letter-spacing: -2.4px; }
.service-site .detail-cta p:not(.eyebrow) { color: #b5c9d4; font-size: 14px; }
@keyframes service-ring { to { transform: rotate(360deg); } }
@media (max-width: 950px) {
  .service-site .detail-hero-layout { gap: 35px; grid-template-columns: 1fr .9fr; }
  .service-site .service-intro-layout { gap: 50px; }
  .service-site .capability-grid { grid-template-columns: repeat(2,1fr); }
  .service-site .detail-process { grid-template-columns: repeat(2,1fr); }
  .service-site .usecase-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 720px) {
  .service-site .detail-hero { min-height: 0; }
  .service-site .detail-hero-layout { min-height: 0; padding: 52px 0 64px; grid-template-columns: 1fr; gap: 35px; }
  .service-site .service-hero-copy h1 { font-size: clamp(42px,11vw,60px); letter-spacing: -3px; }
  .service-site .service-hero-copy > p:not(.eyebrow) { font-size: 13px; }
  .service-site .detail-visual { min-height: 345px; }
  .service-site .detail-visual::before { width: 280px; height: 280px; }
  .service-site .service-intro-band { padding: 68px 0; }
  .service-site .service-intro-layout { grid-template-columns: 1fr; gap: 25px; }
  .service-site .service-intro-layout h2 { font-size: 37px; }
  .service-site .detail-section { padding: 75px 0; }
  .service-site .detail-section-heading h2 { font-size: 38px; letter-spacing: -1.8px; }
  .service-site .capability-grid, .service-site .detail-process, .service-site .usecase-grid { grid-template-columns: 1fr; }
  .service-site .capability-card, .service-site .detail-process article, .service-site .usecase-card { min-height: 0; }
  .service-site .detail-cta { padding: 75px 0; }
  .service-site .detail-cta-inner { gap: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-site .detail-visual::before { animation: none; }
}

/* Service-page considerations and FAQs */
.service-site .premium-considerations { position: relative; overflow: hidden; background: linear-gradient(135deg,#0b1e31,#123d50 70%,#15334b); }
.service-site .premium-considerations::before { position: absolute; top: -130px; left: -90px; width: 340px; height: 340px; border: 1px solid rgba(133,233,232,.18); border-radius: 50%; box-shadow: 0 0 0 25px rgba(133,233,232,.03),0 0 0 60px rgba(133,233,232,.02); content: ""; }
.service-site .premium-considerations .container { position: relative; z-index: 1; }
.service-site .premium-considerations .detail-section-heading { display: grid; grid-template-columns: .9fr 1.1fr; align-items: end; gap: 65px; max-width: none; margin-bottom: 45px; }
.service-site .premium-considerations .detail-section-heading .eyebrow { grid-column: 1/-1; margin-bottom: -42px; color: #83e4e5; }
.service-site .premium-considerations .detail-section-heading h2 { margin: 0; color: #f0f8f9; font-size: clamp(34px,4vw,54px); }
.service-site .premium-considerations .detail-section-heading h2 span { color: #83e4e5; }
.service-site .premium-considerations .detail-section-heading > p:last-child { margin: 0 0 5px; color: #b2c8d2; font-size: 14px; line-height: 1.85; }
.service-site .premium-considerations .tech-pills { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; }
.service-site .premium-considerations .tech-pills span { position: relative; min-height: 94px; padding: 22px 18px 16px 42px; display: flex; align-items: center; border: 1px solid rgba(166,224,230,.18); border-radius: 14px; color: #e5f4f5; background: rgba(255,255,255,.065); font: 600 12px/1.4 var(--font-display); transition: border-color .25s, background .25s, transform .25s; }
.service-site .premium-considerations .tech-pills span::before { position: absolute; top: 19px; left: 17px; color: #83e4e5; font: 700 10px var(--font-body); content: counter(consideration); counter-increment: consideration; }
.service-site .premium-considerations .tech-pills { counter-reset: consideration; }
.service-site .premium-considerations .tech-pills span:hover { border-color: rgba(142,237,234,.62); background: rgba(111,221,222,.12); transform: translateY(-4px); }
.service-site .premium-faq-section { background: #f4f8f9 !important; }
.service-site .premium-faq-section .detail-faq { grid-template-columns: .72fr 1.28fr; gap: 90px; align-items: start; }
.service-site .premium-faq-section .detail-section-heading { position: sticky; top: 105px; max-width: 420px; margin: 0; padding: 30px; border: 1px solid #d9e8eb; border-radius: 20px; background: linear-gradient(145deg,#fff,#edf7f8); box-shadow: 0 18px 42px rgba(22,73,88,.08); }
.service-site .premium-faq-section .detail-section-heading::after { display: block; width: 52px; height: 52px; margin-top: 36px; border: 1px solid #a9d9dd; border-radius: 15px; color: #3a8b95; background: #e8f7f7; content: "?"; font: 800 28px/52px var(--font-display); text-align: center; }
.service-site .premium-faq-section .detail-section-heading .eyebrow { color: #39838e; }
.service-site .premium-faq-section .detail-section-heading h2 { color: #102b39; font-size: clamp(34px,3.7vw,51px); }
.service-site .premium-faq-section .detail-section-heading h2 span { color: #398c98; }
.service-site .premium-faq-section .detail-section-heading > p:last-child { color: #6f8189; }
.service-site .premium-faq-list { display: grid; gap: 10px; border: 0; counter-reset: faq; }
.service-site .premium-faq-list details { position: relative; padding: 0 23px; border: 1px solid #dbe8eb; border-radius: 14px; background: #fff; box-shadow: 0 7px 20px rgba(20,72,88,.035); counter-increment: faq; transition: border-color .25s, box-shadow .25s, transform .25s; }
.service-site .premium-faq-list details:hover { border-color: #91cbd0; box-shadow: 0 14px 27px rgba(20,72,88,.08); transform: translateX(4px); }
.service-site .premium-faq-list summary { padding: 23px 45px 23px 38px; color: #163442; font: 700 15px/1.45 var(--font-display); }
.service-site .premium-faq-list summary::before { position: absolute; top: 23px; left: 23px; color: #58a4ad; font: 700 10px var(--font-body); content: "0" counter(faq); }
.service-site .premium-faq-list summary::after, .service-site .premium-faq-list summary::before { box-sizing: border-box; }
.service-site .premium-faq-list summary::after { right: 22px; width: 24px; height: 24px; border: 1px solid #bfdee1; border-radius: 50%; background: #f1faf9; }
.service-site .premium-faq-list details > p { max-width: 620px; margin: -2px 35px 22px 38px; color: #70818a; font-size: 12px; line-height: 1.85; }
@media (max-width: 950px) {
  .service-site .premium-considerations .detail-section-heading { grid-template-columns: 1fr; gap: 17px; }
  .service-site .premium-considerations .detail-section-heading .eyebrow { margin-bottom: 0; }
  .service-site .premium-considerations .tech-pills { grid-template-columns: repeat(2,1fr); }
  .service-site .premium-faq-section .detail-faq { gap: 40px; }
}
@media (max-width: 720px) {
  .service-site .premium-considerations .tech-pills { grid-template-columns: 1fr; }
  .service-site .premium-faq-section .detail-faq { grid-template-columns: 1fr; }
  .service-site .premium-faq-section .detail-section-heading { position: static; padding: 24px; }
  .service-site .premium-faq-section .detail-section-heading::after { display: none; }
  .service-site .premium-faq-list summary { padding: 20px 38px 20px 33px; font-size: 13px; }
  .service-site .premium-faq-list summary::before { top: 20px; left: 18px; }
  .service-site .premium-faq-list details > p { margin-left: 33px; }
}

/* Related services and FAQ refresh */
.service-site .detail-section:has(.related-services) { position: relative; overflow: hidden; background: linear-gradient(135deg,#eaf8f8 0%,#f7fbfc 52%,#e9f0fb 100%) !important; }
.service-site .detail-section:has(.related-services)::before { position: absolute; top: -150px; right: -90px; width: 420px; height: 420px; border: 1px solid rgba(73,151,168,.18); border-radius: 50%; box-shadow: 0 0 0 28px rgba(73,151,168,.035),0 0 0 65px rgba(73,151,168,.025); content: ""; }
.service-site .detail-section:has(.related-services) > .container { position: relative; z-index: 1; }
.service-site .detail-section:has(.related-services) .detail-section-heading .eyebrow { color: #3b8e98; }
.service-site .detail-section:has(.related-services) .detail-section-heading h2 { color: #102b39; }
.service-site .detail-section:has(.related-services) .detail-section-heading h2 span { color: #398e9a; }
.service-site .detail-section:has(.related-services) .related-services { grid-template-columns: repeat(3,1fr); gap: 18px; }
.service-site .detail-section:has(.related-services) .related-service-link { min-height: 112px; align-items: flex-end; border: 1px solid #c8e1e4; border-radius: 18px; background: rgba(255,255,255,.78); box-shadow: 0 14px 34px rgba(46,112,126,.08); }
.service-site .detail-section:has(.related-services) .related-service-link::before { position: absolute; top: 19px; left: 23px; width: 28px; height: 28px; border: 1px solid #9ed4d7; border-radius: 9px; color: #398e98; background: #e7f8f7; content: "↗"; font-size: 14px; line-height: 27px; text-align: center; }
.service-site .detail-section:has(.related-services) .related-service-link { position: relative; padding-top: 58px; }
.service-site .detail-section:has(.related-services) .related-service-link b { display: none; }
.service-site .detail-section:has(.related-services) .related-service-link:hover { border-color: #62b3ba; background: #fff; box-shadow: 0 20px 42px rgba(40,117,132,.15); transform: translateY(-7px); }

.service-site .premium-faq-section { position: relative; overflow: hidden; background: linear-gradient(125deg,#071523 0%,#0d293e 65%,#12384b 100%) !important; }
.service-site .premium-faq-section::before { position: absolute; right: -170px; bottom: -220px; width: 500px; height: 500px; border: 1px solid rgba(126,231,229,.16); border-radius: 50%; box-shadow: 0 0 0 30px rgba(126,231,229,.025),0 0 0 72px rgba(126,231,229,.018); content: ""; }
.service-site .premium-faq-section > .container { position: relative; z-index: 1; }
.service-site .premium-faq-section .detail-faq { position: relative; }
.service-site .premium-faq-section .detail-section-heading { border: 0; background: transparent; box-shadow: none; }
.service-site .premium-faq-section .detail-section-heading .eyebrow { color: #83e4e5; }
.service-site .premium-faq-section .detail-section-heading h2 { color: #f1f9fa; }
.service-site .premium-faq-section .detail-section-heading h2 span { color: #83e4e5; }
.service-site .premium-faq-section .detail-section-heading > p:last-child { color: #aec2cd; }
.service-site .premium-faq-section .detail-section-heading::after { border-color: rgba(131,228,229,.42); color: #83e4e5; background: rgba(131,228,229,.08); }
.service-site .premium-faq-list details { border-color: rgba(168,224,230,.2); background: rgba(255,255,255,.075); box-shadow: 0 10px 25px rgba(0,0,0,.12); }
.service-site .premium-faq-list details:hover,
.service-site .premium-faq-list details[open] { border-color: rgba(131,228,229,.7); background: rgba(105,215,218,.12); box-shadow: 0 16px 32px rgba(0,0,0,.2); transform: translateX(5px); }
.service-site .premium-faq-list summary { color: #edf8f9; }
.service-site .premium-faq-list summary::before { color: #83e4e5; }
.service-site .premium-faq-list summary::after { border-color: rgba(131,228,229,.5); color: #83e4e5; background: rgba(131,228,229,.1); }
.service-site .premium-faq-list details > p { color: #b4cbd3; }
@media (max-width: 720px) {
  .service-site .detail-section:has(.related-services) .related-services { grid-template-columns: 1fr; }
  .service-site .detail-section:has(.related-services) .related-service-link { min-height: 92px; }
}

.floating-message-button { position: fixed; z-index: 40; right: 24px; bottom: 24px; width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(123,226,232,.65); border-radius: 50%; color: #f4ffff; background: linear-gradient(145deg,#12354b,#071522); box-shadow: 0 10px 28px rgba(0,12,25,.34), 0 0 0 5px rgba(93,207,219,.12); font: 400 25px/1 Arial,sans-serif; cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s; }
.floating-message-button:hover { transform: translateY(-3px) scale(1.04); border-color: var(--cyan); box-shadow: 0 14px 32px rgba(0,12,25,.4), 0 0 0 7px rgba(93,207,219,.16); }
.footer-bottom { position: relative; justify-content: center; text-align: center; }
.footer-bottom > span { flex: 1; text-align: center; }
.footer-bottom > div { position: absolute; right: 0; }
@media (max-width: 720px) {
  .floating-message-button { right: 16px; bottom: 16px; width: 52px; height: 52px; font-size: 22px; }
  .footer-bottom { position: relative; align-items: center; }
  .footer-bottom > span { width: 100%; }
  .footer-bottom > div { position: static; }
}