:root {
  --paper: #f7f8f7;
  --paper-deep: #e9edef;
  --ink: #1c2d36;
  --muted: #5e6c73;
  --line: #cdd6da;
  --blue: #bfd9e6;
  --blue-deep: #326b96;
  --night: #142d3d;
  --night-soft: #214457;
  --charcoal: #26343b;
  --white: #ffffff;
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  scroll-behavior: smooth;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-underline-offset: 5px; }
img { max-width: 100%; }
p { line-height: 1.72; margin: 0 0 20px; }
h1, h2, h3 { margin: 0; font-weight: 500; }
h1, h2 { letter-spacing: -.045em; text-wrap: balance; }
h1 { font-size: clamp(48px, 5.3vw, 76px); line-height: 1.1; max-width: 700px; }
h2 { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.08; }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.025em; }
a:focus-visible, summary:focus-visible { outline: 3px solid #2f77ad; outline-offset: 5px; }
.wrap { width: min(1216px, calc(100% - 100px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 30; top: 10px; left: 10px; padding: 12px; background: var(--white); color: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.eyebrow { margin: 0 0 21px; color: var(--blue-deep); font-size: 11px; line-height: 1.5; font-weight: 650; letter-spacing: .09em; }
.site-header { min-height: 90px; display: flex; align-items: center; gap: 40px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font-size: 24px; font-weight: 650; letter-spacing: -.065em; flex-shrink: 0; }
.brand-mark { width: 54px; height: 36px; display: block; object-fit: contain; }
.site-header nav { display: flex; gap: 30px; margin-left: auto; }
.site-header nav a, .header-cta, .header-login { font-size: 12px; text-decoration: none; }
.site-header nav a { color: var(--muted); }
.site-header nav a:hover, .header-cta:hover, .header-login:hover, .site-footer a:hover { color: var(--blue-deep); }
.header-actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.header-cta { font-weight: 600; white-space: nowrap; }
.header-login { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 17px; border: 1px solid var(--line); color: var(--ink); font-weight: 600; white-space: nowrap; }
.header-login:hover { border-color: var(--blue-deep); }
.decorative-icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.15em; }
.header-cta .decorative-icon { margin-left: 8px; }
.hero { position: relative; width: 100%; min-height: min(760px, calc(100svh - 90px)); display: grid; grid-template-columns: .95fr 1.05fr; grid-template-rows: 1fr auto; background: var(--paper); overflow: hidden; }
.hero-copy { z-index: 2; align-self: center; padding: 75px 5vw 95px max(50px, calc((100vw - 1216px) / 2)); }
.hero .eyebrow { margin-bottom: 25px; }
.hero-lede { max-width: 580px; margin: 26px 0 0; color: var(--muted); font-size: 16px; }
.hero-actions { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; margin-top: 32px; }
.button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 15px 22px; text-decoration: none; font-size: 12px; font-weight: 600; transition: background .18s, color .18s; }
.button-dark { color: var(--white); background: var(--night); }
.button-dark:hover { background: #1e557c; }
.text-link { font-size: 12px; font-weight: 600; text-decoration: none; }
.text-link .decorative-icon { margin-left: 8px; color: var(--blue-deep); }
.hero-note { margin: 24px 0 0; color: #69798c; font-size: 11px; }
.hero-photo { position: relative; min-height: 640px; height: 100%; grid-row: 1; grid-column: 2; overflow: hidden; margin: 0; background: var(--night); }
.hero-photo--video { background: var(--night); }
.hero-photo img, .hero-photo video { display: block; width: 100%; height: 100%; min-height: 640px; object-fit: cover; object-position: center; }
.hero-photo--video video { object-position: 78% center; }
.hero-photo figcaption { position: absolute; z-index: 1; right: 6%; bottom: 48px; left: 7%; display: flex; justify-content: space-between; align-items: end; gap: 20px; color: var(--white); }
.hero-photo figcaption span:first-child { font-size: 17px; }
.hero-photo figcaption span:last-child { max-width: 210px; color: #e2e6e0; font-size: 10px; text-align: right; }
.hero-photo figcaption small { display: block; margin-top: 5px; color: #d7dfdc; font-size: 9px; font-weight: 400; }
.hero-edge { position: absolute; z-index: 2; right: 5vw; bottom: 22px; left: max(50px, calc((100vw - 1216px) / 2)); display: flex; align-items: center; gap: 14px; width: min(500px, 40vw); color: var(--muted); font-size: 10px; }
.hero-edge i { width: 4px; height: 4px; border-radius: 50%; background: var(--blue-deep); }
.problem-section { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: var(--white); }
.problem-section::before { position: absolute; z-index: -2; inset: -8px; content: ""; background: url("assets/atlaz-story-fragmented-work.webp") 64% center / cover no-repeat; filter: blur(2px) saturate(.88); transform: scale(1.015); }
.problem-section::after { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(90deg, #17191ae0 0%, #17191ab8 54%, #17191a78 100%); }
.section-divider { height: 40px; background: var(--paper); }
.problem-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; padding-block: 79px 84px; }
.problem-heading .eyebrow { color: var(--blue); }
.problem-heading h2 { max-width: 570px; color: var(--white); font-size: clamp(35px, 4vw, 53px); }
.problem-copy > p { max-width: 590px; margin: 0; color: #dbe5f0; font-size: 14px; }
.fragment-map { display: grid; grid-template-columns: 1fr 25px 1fr 25px 1fr; align-items: center; gap: 7px; margin-top: 30px; }
.fragment-map > div { min-height: 94px; padding: 12px 13px 13px; border-top: 2px solid #8bb4cf; background: #f5f3ec; color: var(--ink); }
.fragment-map > div:nth-of-type(2) { transform: translateY(9px); }
.fragment-map > div:nth-of-type(3) { transform: translateY(-7px); }
.fragment-map > div > span { display: block; margin-bottom: 8px; color: var(--blue-deep); font-size: 9px; }
.fragment-map strong { display: block; font-size: 11px; font-weight: 600; line-height: 1.3; }
.fragment-map small { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.fragment-map > i { display: block; height: 1px; border-top: 1px dashed #8bb4cf; }
.tool-gap-section { overflow: hidden; background: #c9e5ef; color: var(--night); }
.tool-gap-wrap { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 30px 58px; align-items: center; padding-block: 54px 58px; }
.tool-gap-heading .eyebrow { margin-bottom: 15px; color: var(--blue-deep); }
.tool-gap-heading h2 { max-width: 540px; color: var(--night); font-size: clamp(40px, 4.3vw, 61px); line-height: .98; text-transform: uppercase; }
.tool-gap-intro { max-width: 430px; margin: 17px 0 0; color: #344e5b; font-size: 13px; line-height: 1.6; }
.tool-gap-content { min-width: 0; }
.tool-gap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tool-gap-card { min-height: 140px; padding: 16px 17px 15px; border: 1px solid #8aabb8; background: #f8fbfc; box-shadow: 4px 4px 0 #6f9db2; }
.tool-gap-icon { display: block; width: 31px; height: 31px; margin-bottom: 9px; fill: none; stroke: #28688f; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.tool-gap-card h3 { color: var(--night); font-size: 16px; line-height: 1.18; }
.tool-gap-card p { margin: 7px 0 0; color: #51636c; font-size: 10px; line-height: 1.45; }
.tool-gap-start { display: flex; gap: 15px; align-items: center; margin-top: 14px; padding: 13px 17px; background: var(--night); color: var(--white); }
.tool-gap-start .tool-gap-icon { flex: 0 0 33px; width: 33px; height: 33px; margin: 0; stroke: #b9dce9; }
.tool-gap-start h3 { color: var(--white); font-size: 16px; line-height: 1.2; }
.tool-gap-start p { margin: 5px 0 0; color: #d7e4e9; font-size: 10px; line-height: 1.45; }
.solution-section { background: var(--paper); }
.solution-wrap { padding-block: 96px 102px; }
.solution-heading { display: grid; grid-template-columns: 1fr .72fr; gap: 95px; align-items: end; margin-bottom: 44px; }
.solution-heading h2 { max-width: 630px; }
.solution-heading > p { max-width: 450px; margin: 0 0 4px; color: var(--muted); font-size: 14px; }
.solution-flow { display: grid; grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1.1fr) 42px minmax(0, 1fr); align-items: stretch; }
.flow-stage { display: flex; min-height: 330px; flex-direction: column; padding: 25px 24px 23px; background: var(--paper-deep); }
.flow-stage--core { background: var(--night); color: var(--white); }
.flow-stage-label { display: flex; gap: 10px; align-items: baseline; color: var(--blue-deep); font-size: 10px; }
.flow-stage--core .flow-stage-label { color: var(--blue); }
.flow-stage-label i { color: var(--muted); font-size: 10px; font-style: normal; }
.flow-stage--core .flow-stage-label i { color: #c8d5e5; }
.flow-stage h3 { margin-top: 36px; font-size: clamp(20px, 2vw, 25px); }
.flow-stage > p { margin: 12px 0 20px; color: var(--muted); font-size: 12px; }
.flow-stage--core > p { color: #c8d5e5; }
.flow-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: auto; }
.flow-items > span { display: flex; min-height: 42px; align-items: center; gap: 9px; padding: 8px 10px; border-left: 3px solid #78aeca; background: #fff; color: #263b4a; box-shadow: 0 3px 9px #102c4318; font-size: 11px; font-weight: 600; line-height: 1.3; }
.flow-items svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: #326b96; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.flow-stage--core .flow-items > span { border-left-color: #a4d7ec; background: #28688f; color: #fff; box-shadow: 0 3px 10px #071b2b55; }
.flow-stage--core .flow-items svg { stroke: #c4e5f2; }
.flow-connector { display: grid; place-items: center; color: var(--blue-deep); }
.flow-connector span { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid #95b9cc; border-radius: 50%; background: var(--paper); }
.solution-outcome { display: grid; grid-template-columns: 36px 1fr auto; gap: 17px; align-items: center; margin-top: 18px; padding: 19px 22px; background: var(--paper-deep); }
.solution-outcome-icon { width: 24px; height: 24px; color: var(--blue-deep); }
.solution-outcome p { margin: 0; color: #405869; font-size: 12px; }
.solution-outcome strong { color: var(--ink); font-weight: 650; }
.solution-outcome a { font-size: 10px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.solution-outcome a .decorative-icon { margin-left: 6px; color: var(--blue-deep); }
.workspace-section { position: relative; overflow: hidden; background: #fff; color: var(--ink); }
.workspace-wrap { position: relative; padding-block: 94px 105px; }
.workspace-heading { display: grid; grid-template-columns: 1fr; gap: 0; margin-bottom: 42px; }
.workspace-heading .eyebrow { color: var(--blue-deep); }
.workspace-heading h2 { max-width: 650px; }
.workspace-showcase { display: grid; grid-template-columns: 1.65fr .62fr; gap: 38px; align-items: stretch; }
.walkthrough-frame { position: relative; min-width: 0; overflow: hidden; background: #0b2337; box-shadow: 17px 18px 0 #ffffff0b; }
.walkthrough-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.workspace-index { align-self: stretch; display: flex; width: 100%; flex-direction: column; padding: 25px 24px; color: #f7fafb; background: rgba(41, 52, 58, .96); border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; box-shadow: 0 18px 48px rgba(25, 43, 53, .2), inset 0 1px rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(18px) saturate(125%); backdrop-filter: blur(18px) saturate(125%); }
.workspace-index .eyebrow { margin-bottom: 12px; color: #c6dce5; }
.workspace-index > div { display: grid; grid-template-columns: 31px 1fr; gap: 8px; align-items: start; padding: 15px 0; border-top: 1px solid rgba(255, 255, 255, .24); }
.workspace-index > div > span { color: #a9c8d6; font-size: 9px; }
.workspace-index p { margin: 0; }
.workspace-index strong { display: block; font-size: 12px; font-weight: 550; }
.workspace-index small { display: block; margin-top: 4px; color: #d0dade; font-size: 9px; }
.workspace-index .text-link { margin-top: auto; padding-top: 16px; color: #f7fafb; }
.workspace-index .text-link span { color: #9bc7dc; }
.extensions-section { padding-block: 104px 58px; background: var(--paper-deep); }
.extensions-heading { display: grid; grid-template-columns: 1fr .72fr; gap: 100px; align-items: end; margin-bottom: 48px; }
.extensions-heading .eyebrow { color: var(--blue-deep); }
.extensions-heading h2 { max-width: 690px; }
.extensions-heading > p { max-width: 430px; margin: 0 0 3px; color: #40586a; font-size: 14px; }
.extensions-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(218px, auto); gap: 12px; }
.capability-card { position: relative; display: flex; min-height: 218px; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 22px 23px; color: #fffefa; background: #1b3c56; isolation: isolate; }
.capability-card::before { position: absolute; z-index: -2; inset: -12px; content: ""; background-image: var(--card-image); background-position: var(--card-position, center); background-size: cover; filter: blur(5px) saturate(.82) brightness(.92); transform: scale(1.06); transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .65s; }
.capability-card::after { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(180deg, #17191aa0 0%, #17191a40 42%, #17191af0 100%); transition: background .35s; }
.capability-card:hover::before { filter: blur(2px) saturate(.82) brightness(.92); transform: scale(1.13); }
.capability-card:hover::after { background: linear-gradient(180deg, #17191a8c 0%, #17191a30 42%, #17191af5 100%); }
.capability-number { color: #c4dfeb; font-size: 9px; letter-spacing: .12em; }
.capability-glyph { position: absolute; top: 19px; right: 23px; display: grid; width: 41px; height: 41px; place-items: center; border: 1px solid #c4dfebb0; border-radius: 50%; color: #fff; backdrop-filter: blur(7px); }
.capability-glyph svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.capability-copy { max-width: 400px; }
.capability-card h3 { font-size: clamp(20px, 2vw, 26px); }
.capability-card p { max-width: 340px; margin: 8px 0 0; color: #e0e8f2; font-size: 12px; line-height: 1.55; }
.scope-note { max-width: 820px; margin: 18px 0 0; color: #40586a; font-size: 11px; }
.businesses-section { background: var(--paper-deep); overflow: hidden; }
.businesses-wrap { padding-block: 48px 108px; }
.businesses-heading { display: grid; grid-template-columns: 1fr .65fr; gap: 100px; align-items: end; margin-bottom: 44px; }
.businesses-heading h2 { max-width: 620px; }
.businesses-heading > p { max-width: 430px; margin: 0 0 4px; color: #586b79; font-size: 14px; }
.business-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.business-card { position: relative; display: flex; min-height: 480px; flex-direction: column; justify-content: end; overflow: hidden; background: var(--night); color: var(--white); }
.business-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.business-card:hover img { transform: scale(1.045); }
.business-card::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, #17191af0 0%, #17191a86 38%, #17191a08 83%); }
.business-card > div { position: relative; z-index: 1; max-width: 500px; padding: 35px 34px; }
.business-card span { color: var(--blue); font-size: 9px; letter-spacing: .13em; }
.business-card h3 { max-width: 430px; margin-top: 15px; font-size: clamp(25px, 3vw, 37px); line-height: 1.1; }
.business-card p { max-width: 430px; margin: 13px 0 0; color: #d9e2ed; font-size: 12px; }
.approach-section { position: relative; overflow: hidden; background: rgba(41, 52, 58, .96); border-block: 1px solid rgba(255, 255, 255, .14); color: var(--white); -webkit-backdrop-filter: blur(18px) saturate(125%); backdrop-filter: blur(18px) saturate(125%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.approach-section > .wrap { padding-block: 64px 68px; }
.approach-heading { display: grid; grid-template-columns: 1fr .7fr; gap: 100px; align-items: end; }
.approach-heading .eyebrow { color: var(--blue); }
.approach-heading h2 { max-width: 650px; color: var(--white); }
.approach-heading > p { max-width: 425px; margin: 0 0 4px; color: #d2e0e9; font-size: 14px; }
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 18px 0 0; padding: 0; list-style: none; }
.steps::before { position: absolute; top: 25px; right: 17%; left: 17%; height: 1px; content: ""; background: #72a0bc; }
.steps li { position: relative; min-height: 150px; padding: 14px 20px 17px; background: var(--paper-deep); color: var(--ink); }
.steps li > span { display: flex; align-items: center; gap: 14px; color: var(--ink); font-size: 10px; }
.steps li > span::before { position: relative; z-index: 1; display: grid; width: 17px; height: 17px; place-items: center; border: 1px solid #75858d; border-radius: 50%; background: var(--paper-deep); content: ""; }
.steps li > span i { font-style: normal; }
.steps h3 { margin-top: 17px; color: var(--ink); font-size: 19px; }
.steps p { max-width: 330px; margin: 8px 0 0; color: #52616a; font-size: 11px; line-height: 1.55; }
.faq-section { background: var(--paper); }
.faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 100px; padding-block: 72px; }
.faq-intro { position: sticky; top: 40px; align-self: start; }
.faq-grid h2 { max-width: 420px; font-size: 38px; }
.faq-intro .text-link { display: inline-block; margin-top: 22px; }
.questions { display: grid; grid-template-columns: 1fr; align-content: start; }
.questions details { min-height: 0; padding: 0; border-bottom: 1px solid var(--line); background: transparent; transition: background .2s; }
.questions details[open] { background: #e5edf1; }
.questions summary { display: grid; grid-template-columns: 27px 1fr 17px; align-items: start; gap: 9px; padding: 13px 12px 13px 0; cursor: pointer; font-size: 13px; font-weight: 550; list-style: none; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary b { color: var(--blue-deep); font-size: 20px; font-weight: 300; line-height: .9; transition: transform .18s; }
.questions details[open] summary b { transform: rotate(45deg); }
.faq-number { color: var(--blue-deep); font-size: 9px; font-weight: 500; }
.questions details p { padding: 0 18px 14px 36px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.contact-section { background: #dce8ed; }
.contact-grid { display: grid; grid-template-columns: 1fr auto; gap: 70px; align-items: center; padding-block: 86px; }
.contact-grid h2 { max-width: 700px; }
.contact-grid > div > p:last-child { max-width: 550px; margin: 22px 0 0; color: #43596a; font-size: 14px; }
.button-light { color: var(--night); background: var(--white); white-space: nowrap; }
.button-light:hover { background: #e5edf1; }
.site-footer { background: var(--night); color: #e7edf1; }
.footer-inner { min-height: 105px; display: flex; align-items: center; gap: 28px; }
.site-footer .brand { color: #eff4f7; font-size: 20px; }
.site-footer .brand-mark { width: 45px; height: 30px; }
.site-footer p { margin: 0 auto 0 0; color: #c0d0dc; font-size: 10px; }
.site-footer a:not(.brand) { font-size: 10px; text-decoration: none; }
.site-footer a .decorative-icon { margin-left: 5px; }
@media (max-width: 1050px) {
  .wrap { width: calc(100% - 64px); }
  .site-header { gap: 24px; }
  .site-header nav { gap: 17px; }
  .hero { min-height: 620px; grid-template-columns: .95fr 1.05fr; }
  .hero-copy { padding-left: 32px; padding-right: 32px; }
  .hero-edge { left: 32px; }
  .problem-layout, .solution-heading { gap: 52px; }
  .tool-gap-wrap { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 24px 32px; padding-block: 48px 52px; }
  .tool-gap-card { min-height: 145px; padding: 14px; }
  .tool-gap-card h3 { font-size: 15px; }
  .solution-flow { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.1fr) 28px minmax(0, 1fr); }
  .flow-stage { padding-inline: 18px; }
  .workspace-heading, .businesses-heading, .approach-heading { gap: 60px; }
  .workspace-showcase { grid-template-columns: 1.4fr .7fr; gap: 28px; }
  .faq-grid { gap: 70px; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 40px); }
  .site-header { min-height: 78px; flex-wrap: wrap; gap: 15px; padding-block: 17px; }
  .brand { gap: 8px; font-size: 21px; }
  .brand-mark { width: 47px; height: 31px; }
  .site-header nav { order: 3; width: 100%; justify-content: space-between; gap: 10px; margin: 0; padding: 7px 0 3px; }
  .site-header nav a { font-size: 10px; }
  .header-actions { margin-left: auto; gap: 13px; }
  .header-cta, .header-login { font-size: 10px; }
  .header-login { min-height: 36px; padding-inline: 12px; }
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; }
  .hero-copy { order: 0; padding: 55px 20px 35px; }
  h1 { font-size: clamp(42px, 10.2vw, 62px); }
  .hero-lede { margin-top: 20px; font-size: 14px; }
  .hero-actions { gap: 18px; margin-top: 25px; }
  .button { min-height: 50px; gap: 13px; padding: 13px 17px; font-size: 11px; }
  .text-link { font-size: 11px; }
  .hero-note { margin-top: 19px; font-size: 10px; }
  .hero-photo { order: 1; height: 58svh; min-height: 390px; max-height: 600px; }
  .hero-photo img, .hero-photo video { min-height: 0; }
  .hero-photo--video video { object-position: 68% center; }
  .hero-photo figcaption { right: 20px; bottom: 23px; left: 20px; }
  .hero-photo figcaption span:first-child { font-size: 14px; }
  .hero-photo figcaption span:last-child { max-width: 155px; font-size: 9px; }
  .hero-edge { position: static; order: 2; width: auto; padding: 15px 20px; font-size: 9px; }
  .problem-layout { grid-template-columns: 1fr; gap: 18px; padding-block: 57px 62px; }
  .problem-heading h2 { font-size: 32px; }
  .problem-copy > p { font-size: 13px; }
  .fragment-map { grid-template-columns: 1fr; gap: 8px; margin-top: 23px; }
  .fragment-map > div { min-height: 75px; padding: 10px 12px; }
  .fragment-map > div:nth-of-type(2), .fragment-map > div:nth-of-type(3) { transform: none; }
  .fragment-map > i { justify-self: center; width: 1px; height: 13px; border-top: 0; border-left: 1px dashed #9ab2cb; }
  .tool-gap-wrap { grid-template-columns: 1fr; gap: 25px; padding-block: 48px 50px; }
  .tool-gap-heading .eyebrow { margin-bottom: 13px; }
  .tool-gap-heading h2 { max-width: 560px; font-size: clamp(37px, 10vw, 54px); }
  .tool-gap-intro { margin-top: 14px; font-size: 12px; }
  .tool-gap-grid { grid-template-columns: 1fr; gap: 10px; }
  .tool-gap-card { display: grid; grid-template-columns: 34px 1fr; gap: 0 11px; min-height: 0; padding: 13px; box-shadow: 3px 3px 0 #6f9db2; }
  .tool-gap-icon { grid-row: span 2; width: 29px; height: 29px; margin: 1px 0 0; }
  .tool-gap-card h3 { align-self: end; font-size: 16px; }
  .tool-gap-card p { margin-top: 5px; font-size: 10px; }
  .tool-gap-start { gap: 12px; margin-top: 12px; padding: 13px; }
  .tool-gap-start .tool-gap-icon { flex-basis: 29px; width: 29px; height: 29px; }
  .tool-gap-start h3 { font-size: 15px; }
  .tool-gap-start p { font-size: 10px; }
  .solution-wrap { padding-block: 67px; }
  .solution-heading { grid-template-columns: 1fr; gap: 15px; margin-bottom: 27px; }
  .solution-heading > p { font-size: 13px; }
  .solution-flow { grid-template-columns: 1fr; gap: 7px; }
  .flow-stage { min-height: 0; padding: 20px 18px; }
  .flow-stage h3 { margin-top: 20px; font-size: 21px; }
  .flow-stage > p { margin-bottom: 17px; font-size: 11px; }
  .flow-connector { height: 25px; }
  .flow-connector span { transform: rotate(90deg); }
  .solution-outcome { grid-template-columns: 26px 1fr; gap: 11px; margin-top: 12px; padding: 16px; }
  .solution-outcome p { font-size: 11px; }
  .solution-outcome a { grid-column: 2; white-space: normal; }
  .workspace-wrap { padding-block: 67px; }
  .workspace-heading, .businesses-heading { grid-template-columns: 1fr; gap: 17px; margin-bottom: 30px; }
  .businesses-heading > p { font-size: 13px; }
  .workspace-showcase { grid-template-columns: 1fr; gap: 30px; }
  .workspace-index { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .workspace-index .eyebrow { grid-column: 1 / -1; }
  .workspace-index .text-link { grid-column: 1 / -1; margin-top: 2px; }
  .walkthrough-frame { box-shadow: 9px 10px 0 #ffffff0b; }
  .extensions-section { padding: 68px 0 34px; }
  .extensions-heading, .approach-heading { grid-template-columns: 1fr; gap: 17px; margin-bottom: 32px; }
  .extensions-heading > p, .approach-heading > p { font-size: 13px; }
  .extensions-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(190px, auto); gap: 8px; }
  .capability-card { min-height: 190px; padding: 16px 14px; }
  .motion-ready .capability-card::before { transform: scale(1.09); will-change: auto; }
  .motion-ready .capability-card:hover::before { transform: scale(1.09); }
  .motion-ready [data-seen="true"].capability-card[data-reveal="rise"] { animation-duration: .58s; }
  .capability-number { font-size: 7px; }
  .capability-glyph { top: 12px; right: 12px; width: 31px; height: 31px; }
  .capability-glyph svg { width: 16px; height: 16px; }
  .capability-card h3 { font-size: 17px; }
  .capability-card p { font-size: 10px; }
  .scope-note { font-size: 10px; }
  .businesses-wrap { padding: 34px 0; }
  .business-cards { grid-template-columns: 1fr; gap: 10px; }
  .business-card { min-height: 410px; }
  .business-card > div { padding: 24px 21px; }
  .business-card h3 { font-size: 29px; }
  .business-card p { font-size: 11px; }
  .approach-section > .wrap { padding-block: 48px; }
  .steps { grid-template-columns: 1fr; gap: 8px; margin-top: 16px; }
  .steps::before { top: 26px; bottom: 23px; left: 33px; width: 1px; height: auto; }
  .steps li { min-height: 0; padding: 12px 16px 15px; }
  .steps h3 { margin-top: 12px; font-size: 17px; }
  .steps p { margin-top: 6px; font-size: 11px; }
  .faq-grid { grid-template-columns: 1fr; gap: 22px; padding-block: 56px; }
  .faq-intro { position: static; }
  .questions { grid-template-columns: 1fr; gap: 0; }
  .questions details { min-height: 0; padding: 0; }
  .faq-grid h2 { font-size: 34px; }
  .questions summary { padding-block: 13px; font-size: 12px; }
  .questions details p { padding: 0 13px 14px 36px; font-size: 11px; }
  .contact-grid { grid-template-columns: 1fr; gap: 28px; padding-block: 65px; }
  .contact-grid h2 { font-size: 38px; }
  .contact-grid > div > p:last-child { font-size: 12px; }
  .contact-grid .button { justify-self: start; }
  .footer-inner { min-height: 0; flex-wrap: wrap; gap: 18px; padding-block: 27px; }
  .footer-inner .brand { width: 100%; }
  .site-footer .brand { font-size: 18px; }
  .site-footer .brand-mark { width: 40px; height: 27px; }
  .site-footer p { margin-right: auto; }
  .site-footer a:not(.brand) { font-size: 9px; }
}
@media (max-width: 390px) {
  .site-header nav { gap: 7px; }
  .site-header nav a, .header-cta, .header-login { font-size: 9px; }
  .header-actions { gap: 9px; }
  .header-login { min-height: 32px; padding-inline: 9px; }
  .hero-copy { padding-inline: 20px; }
  .hero-photo { height: 50svh; min-height: 310px; }
  .tool-gap-heading h2 { font-size: 35px; }
  .hero-photo figcaption { flex-direction: column; align-items: start; gap: 4px; }
  .hero-photo figcaption span:last-child { text-align: left; }
  .extensions-grid { grid-template-columns: 1fr; grid-auto-rows: minmax(175px, auto); }
  .capability-card { min-height: 175px; }
  .workspace-index { grid-template-columns: 1fr; }
  .workspace-index .eyebrow, .workspace-index .text-link { grid-column: auto; }
  .contact-grid h2 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Motion has its own vocabulary: type arrives in short beats, the workflow
   connects across the page, and photography shifts gently against the scroll. */
.motion-words { perspective: 800px; }
.motion-word { display: inline-block; margin-right: .22em; }
.motion-word:last-child { margin-right: 0; }
.motion-ready [data-reveal]:not([data-seen="true"]) { opacity: 0; }
.motion-ready [data-reveal="words"] .motion-word,
.motion-ready [data-reveal="words-right"] .motion-word { opacity: 0; }
.motion-ready [data-seen="true"][data-reveal="words"] .motion-word,
.motion-ready [data-seen="true"][data-reveal="words-right"] .motion-word {
  animation: word-arrive .7s cubic-bezier(.2,.72,.18,1) both;
  animation-delay: calc(var(--reveal-delay, 0ms) + var(--word-index, 0) * 32ms);
}
.motion-ready [data-seen="true"][data-reveal="words-right"] .motion-word { animation-name: word-arrive-right; }
.motion-ready [data-seen="true"][data-reveal="rise"] { animation: rise-in .8s cubic-bezier(.2,.72,.18,1) var(--reveal-delay, 0ms) both; }
.motion-ready [data-seen="true"][data-reveal="drop"] { animation: drop-in .82s cubic-bezier(.2,.72,.18,1) var(--reveal-delay, 0ms) both; }
.motion-ready [data-seen="true"][data-reveal="soft"] { animation: soften-in .75s ease var(--reveal-delay, 0ms) both; }
.motion-ready [data-seen="true"][data-reveal="settle"] { animation: settle-in .9s cubic-bezier(.2,.72,.18,1) var(--reveal-delay, 0ms) both; }
.motion-ready [data-seen="true"][data-reveal="from-left"] { animation: enter-left .85s cubic-bezier(.2,.72,.18,1) var(--reveal-delay, 0ms) both; }
.motion-ready [data-seen="true"][data-reveal="from-right"] { animation: enter-right .85s cubic-bezier(.2,.72,.18,1) var(--reveal-delay, 0ms) both; }
.motion-ready [data-seen="true"][data-reveal="image"] { animation: image-open 1.05s cubic-bezier(.2,.72,.18,1) var(--reveal-delay, 0ms) both; }
.motion-ready [data-seen="true"][data-reveal="image-left"] { animation: image-open-left 1.05s cubic-bezier(.2,.72,.18,1) var(--reveal-delay, 0ms) both; }
.motion-ready [data-seen="true"][data-reveal="tick"] { animation: tick-in .55s cubic-bezier(.2,.72,.18,1) var(--reveal-delay, 0ms) both; }
.motion-ready [data-seen="true"][data-reveal="line"] { animation: line-in .7s cubic-bezier(.2,.72,.18,1) var(--reveal-delay, 0ms) both; }
.motion-ready [data-seen="true"][data-reveal="connector"] { animation: connector-in .7s cubic-bezier(.2,.72,.18,1) var(--reveal-delay, 0ms) both; }
.motion-ready [data-seen="true"][data-reveal="tilt-left"] { animation: tilt-in-left .95s cubic-bezier(.2,.72,.18,1) var(--reveal-delay, 0ms) both; }
.motion-ready [data-seen="true"][data-reveal="tilt-right"] { animation: tilt-in-right .95s cubic-bezier(.2,.72,.18,1) var(--reveal-delay, 0ms) both; }
.motion-ready .hero-photo img { transform: translate3d(0, var(--scroll-y, 0px), 0) scale(1.055); will-change: transform; }
.motion-ready .business-card img { transform: translate3d(0, var(--scroll-y, 0px), 0) scale(1.055); will-change: transform; }
.motion-ready .business-card:hover img { transform: translate3d(0, var(--scroll-y, 0px), 0) scale(1.09); }
.motion-ready .capability-card::before { transform: translate3d(0, var(--scroll-y, 0px), 0) scale(1.09); will-change: transform; }
.motion-ready .capability-card:hover::before { transform: translate3d(0, var(--scroll-y, 0px), 0) scale(1.16); }
.motion-ready .flow-stage--core[data-seen="true"] { animation-duration: 1.05s; }
.motion-ready .flow-connector[data-seen="true"] span { animation: connector-pulse .8s ease-out both; animation-delay: calc(var(--reveal-delay, 0ms) + 100ms); }
.motion-ready .fragment-map > i[data-seen="true"] { transform-origin: left center; }
.motion-ready .fragment-map > i:nth-of-type(2)[data-seen="true"] { animation-delay: calc(var(--reveal-delay, 0ms) + 40ms); }

@keyframes word-arrive { from { opacity: 0; transform: translate3d(0, .72em, 0) rotateX(-20deg); filter: blur(5px); } to { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0); filter: blur(0); } }
@keyframes word-arrive-right { from { opacity: 0; transform: translate3d(.5em, .18em, 0) rotateY(-18deg); filter: blur(4px); } to { opacity: 1; transform: translate3d(0, 0, 0) rotateY(0); filter: blur(0); } }
@keyframes rise-in { from { opacity: 0; transform: translate3d(0, 34px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes drop-in { from { opacity: 0; transform: translate3d(0, -28px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes soften-in { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
@keyframes settle-in { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.97); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
@keyframes enter-left { from { opacity: 0; transform: translate3d(-38px, 7px, 0); clip-path: inset(0 10% 0 0); } to { opacity: 1; transform: translate3d(0, 0, 0); clip-path: inset(0); } }
@keyframes enter-right { from { opacity: 0; transform: translate3d(38px, 7px, 0); clip-path: inset(0 0 0 10%); } to { opacity: 1; transform: translate3d(0, 0, 0); clip-path: inset(0); } }
@keyframes image-open { from { opacity: 0; clip-path: inset(0 0 0 12%); transform: scale(1.035); } to { opacity: 1; clip-path: inset(0); transform: scale(1); } }
@keyframes image-open-left { from { opacity: 0; clip-path: inset(0 12% 0 0); transform: scale(1.025); } to { opacity: 1; clip-path: inset(0); transform: scale(1); } }
@keyframes tick-in { from { opacity: 0; transform: scale(.3) rotate(-35deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes line-in { from { opacity: 0; transform: scaleX(.1); } to { opacity: 1; transform: scaleX(1); } }
@keyframes connector-in { from { opacity: 0; transform: scale(.65) translateX(-8px); } to { opacity: 1; transform: scale(1) translateX(0); } }
@keyframes connector-pulse { 0% { transform: scale(.6); } 65% { transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes tilt-in-left { from { opacity: 0; transform: perspective(900px) rotateY(8deg) translate3d(-18px, 22px, 0) scale(.97); } to { opacity: 1; transform: perspective(900px) rotateY(0) translate3d(0, 0, 0) scale(1); } }
@keyframes tilt-in-right { from { opacity: 0; transform: perspective(900px) rotateY(-8deg) translate3d(18px, 22px, 0) scale(.97); } to { opacity: 1; transform: perspective(900px) rotateY(0) translate3d(0, 0, 0) scale(1); } }

@media (max-width: 760px) {
  .motion-word { margin-right: .18em; }
  .motion-ready [data-seen="true"][data-reveal="from-left"],
  .motion-ready [data-seen="true"][data-reveal="from-right"] { animation-duration: .68s; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-words .motion-word { opacity: 1 !important; transform: none !important; filter: none !important; }
  .motion-ready [data-reveal], .motion-ready [data-reveal] .motion-word { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .motion-ready .hero-photo img, .motion-ready .business-card img, .motion-ready .capability-card::before { transform: none !important; }
}