@font-face{font-family:Figtree;src:url('./fonts/figtree.ttf') format('truetype');font-weight:300 900;font-display:swap}
:root{--primary:#6863F6;--action:#625CEC;--hover:#554FE0;--rose:#F04C78;--citrus:#FFBE26;--green:#76C961;--ink:#29262D;--muted:#726B76;--paper:#FFFEFA;--white:#FFFEFF;--line:color-mix(in srgb,var(--primary) 18%,var(--paper));--shadow:0 18px 55px color-mix(in srgb,var(--ink) 8%,transparent);--settle:3.4s;--ease:cubic-bezier(.22,.61,.25,1)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Figtree,Arial,sans-serif}button{font:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:3px solid var(--primary);outline-offset:5px}a{color:inherit;text-decoration:none}
.nav{max-width:1320px;height:88px;padding:0 48px;margin:auto;display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:9px;font-size:30px;line-height:1;font-weight:750;letter-spacing:-1.2px}.brand-logo{position:relative;display:block;width:40px;height:30px;overflow:hidden;flex:none}.brand-logo img{position:absolute;width:59.72px;height:59.72px;max-width:none;left:-9.72px;top:-14.39px}.navlinks{display:flex;align-items:center;gap:32px;font-size:14px}.navlinks button{background:none;color:var(--ink)}.nav .contact{border:1px solid var(--line);border-radius:28px;padding:12px 21px;transition:border-color .25s}.nav .contact:hover{border-color:var(--primary)}
.hero{max-width:1320px;margin:auto;padding:62px 48px 44px;min-height:calc(100svh - 88px);text-align:center;overflow:hidden}.eyebrow{display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px;font-weight:500;color:var(--muted)}.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 5px color-mix(in srgb,var(--primary) 8%,transparent)}h1{position:relative;z-index:3;font-size:clamp(52px,5.25vw,72px);line-height:1.04;font-weight:550;letter-spacing:-.048em;margin:22px auto 20px}h1 em{font-style:normal;color:var(--primary)}.lead{position:relative;z-index:3;font-size:20px;line-height:1.5;color:var(--muted);margin:0 auto;max-width:540px}.actions{position:relative;z-index:3;display:flex;justify-content:center;margin-top:27px}.primary{display:inline-flex;align-items:center;justify-content:center;gap:24px;background:var(--action);color:var(--white);border-radius:30px;padding:16px 24px;font-size:15px;font-weight:600;box-shadow:0 8px 24px color-mix(in srgb,var(--primary) 16%,transparent);transition:background .25s,transform .25s}.primary:hover{background:var(--hover);transform:translateY(-2px)}
.b-stage{position:relative;max-width:1140px;height:288px;margin:91px auto 0}.b-line{position:absolute;left:8%;right:8%;top:112px;height:2px;background:var(--line);transform-origin:left;transition:opacity 1.4s ease 2s,transform 1.8s var(--ease) 1.6s}.b-node{position:absolute;top:16px;width:22%;min-height:204px;padding:22px;text-align:left;border:1px solid color-mix(in srgb,var(--white) 32%,transparent);border-radius:22px;background:var(--card-color);color:var(--ink);box-shadow:0 18px 35px -18px color-mix(in srgb,var(--card-color) 45%,transparent),inset 0 1px 0 color-mix(in srgb,var(--white) 30%,transparent);transition:transform var(--settle) var(--ease),translate 1.3s var(--ease);z-index:2}.b-node:nth-of-type(2){left:0;--card-color:var(--rose);transform:rotate(-4deg)}.b-node:nth-of-type(3){left:26%;--card-color:var(--citrus);transform:rotate(3deg);transition-delay:.14s}.b-node:nth-of-type(4){left:52%;--card-color:var(--green);transform:rotate(-3deg);transition-delay:.28s}.b-node:nth-of-type(5){right:0;--card-color:var(--primary);transform:rotate(4deg);transition-delay:.42s}.tool-icon{display:grid;place-items:center;width:39px;height:39px;margin-bottom:24px;border-radius:11px;font-size:21px;background:color-mix(in srgb,var(--white) 19%,transparent);border:1px solid color-mix(in srgb,var(--white) 24%,transparent)}.b-node strong{display:block;font-size:16px;line-height:1.25;letter-spacing:-.3px;font-weight:600}.b-node p{font-size:12px;line-height:1.45;margin:8px 0 16px}.mini-status{position:absolute;right:20px;top:23px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;font-size:13px;background:color-mix(in srgb,var(--white) 22%,transparent);border:1px solid color-mix(in srgb,var(--white) 25%,transparent)}.node-detail{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid color-mix(in srgb,var(--white) 28%,transparent);background:color-mix(in srgb,var(--white) 18%,transparent);border-radius:9px;padding:9px 10px;font-size:10px}.node-detail b{font-weight:600}.node-detail span{white-space:nowrap}.b-end{position:absolute;bottom:0;left:0;right:0;font-size:12px;color:var(--muted);transition:opacity 1.4s ease 2.2s}.scattered .b-line{opacity:0;transform:scaleX(.7)}.scattered .b-end{opacity:0}.scattered .b-node:nth-of-type(2){transform:translate(-45px,-330px) rotate(-12deg)}.scattered .b-node:nth-of-type(3){transform:translate(-230px,-85px) rotate(8deg)}.scattered .b-node:nth-of-type(4){transform:translate(275px,-320px) rotate(11deg)}.scattered .b-node:nth-of-type(5){transform:translate(0,-68px) rotate(-8deg)}
.hero.entering .eyebrow,.hero.entering h1,.hero.entering .lead,.hero.entering .actions{animation:reveal .7s var(--ease) both}.hero.entering h1{animation-delay:.12s}.hero.entering .lead{animation-delay:.24s}.hero.entering .actions{animation-delay:.36s}.hero.entering .b-stage{animation:reveal 1.6s var(--ease) .15s both}@keyframes reveal{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
dialog{border:1px solid var(--line);border-radius:22px;max-width:420px;padding:32px;background:var(--paper);color:var(--ink);box-shadow:var(--shadow)}dialog::backdrop{background:color-mix(in srgb,var(--ink) 22%,transparent);backdrop-filter:blur(5px)}dialog h2{font-size:24px;font-weight:600;margin:0 0 12px}dialog p{font-size:15px;line-height:1.6;color:var(--muted)}dialog button{margin-top:12px}
@media(max-width:1100px) and (min-width:761px){.nav{padding:0 32px}.hero{padding-left:32px;padding-right:32px}.b-node{padding:16px}.b-node strong{font-size:14px}.node-detail{padding:8px 5px;font-size:9px;gap:3px}.mini-status{right:12px}}
@media(max-width:760px){.nav{height:78px;padding:0 24px}.brand{font-size:27px}.brand-logo{width:36px;height:27px}.brand-logo img{width:53.75px;height:53.75px;left:-8.75px;top:-12.95px}.navlinks>button:not(.contact){display:none}.nav .contact{font-size:13px;padding:10px 16px}.hero{padding:38px 24px 36px;min-height:calc(100svh - 78px);text-align:left}.eyebrow{justify-content:flex-start;font-size:12px}h1{font-size:clamp(39px,10.4vw,64px);letter-spacing:-.046em;line-height:1.06;margin:21px 0 18px}.lead{font-size:18px;max-width:330px;margin:0}.actions{justify-content:flex-start;margin-top:24px}.primary{font-size:14px;padding:15px 22px}.b-stage{margin-top:64px;height:510px}.b-line{display:none}.b-node{width:46%;padding:15px;min-height:205px;border-radius:18px}.b-node:nth-of-type(2){left:0;top:0}.b-node:nth-of-type(3){left:auto;right:0;top:9px}.b-node:nth-of-type(4){left:0;top:238px}.b-node:nth-of-type(5){right:0;top:245px}.tool-icon{width:33px;height:33px;margin-bottom:20px}.b-node strong{font-size:15px}.b-node p{font-size:11px;min-height:32px}.mini-status{right:11px;top:19px;width:20px;height:20px}.node-detail{padding:8px 5px;font-size:9px;gap:4px}.b-end{max-width:260px;margin:auto;line-height:1.5;text-align:center}.scattered .b-node:nth-of-type(2){transform:translate(3px,-12px) rotate(-10deg)}.scattered .b-node:nth-of-type(3){transform:translate(-3px,12px) rotate(10deg)}.scattered .b-node:nth-of-type(4){transform:translate(4px,-8px) rotate(8deg)}.scattered .b-node:nth-of-type(5){transform:translate(-4px,12px) rotate(-9deg)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.scattered .b-node{transform:none!important}.scattered .b-end,.scattered .b-line{opacity:1;transform:none}.primary:hover{transform:none}}



@media(min-width:761px) and (max-width:1100px){.scattered .b-node:nth-of-type(2){transform:translate(-5px,-200px) rotate(-12deg)}.scattered .b-node:nth-of-type(3){transform:translate(-80px,-40px) rotate(8deg)}.scattered .b-node:nth-of-type(4){transform:translate(145px,-190px) rotate(11deg)}.scattered .b-node:nth-of-type(5){transform:translate(10px,-30px) rotate(-8deg)}}

/* Floating scene: foreground copy, translucent colored surfaces, quiet idle motion. */
.hero{position:relative;isolation:isolate}
.eyebrow{position:relative;z-index:3}
.b-stage{z-index:0}
.b-node{background:color-mix(in srgb,var(--card-color) 90%,transparent);backdrop-filter:blur(12px) saturate(115%);-webkit-backdrop-filter:blur(12px) saturate(115%);border-color:color-mix(in srgb,var(--white) 40%,transparent);box-shadow:0 18px 35px -18px color-mix(in srgb,var(--card-color) 38%,transparent),inset 0 1px 0 color-mix(in srgb,var(--white) 48%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--card-color) 22%,transparent)}
.b-node::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,color-mix(in srgb,var(--white) 8%,transparent),transparent 48%)}

.floating .b-node{animation:levitate 6.8s ease-in-out infinite}
.floating .b-node:nth-of-type(3){animation-duration:7.6s;animation-delay:-2.3s}
.floating .b-node:nth-of-type(4){animation-duration:7.1s;animation-delay:-4.2s}
.floating .b-node:nth-of-type(5){animation-duration:8.2s;animation-delay:-1.2s}
@keyframes levitate{0%,100%{translate:0 -7px}50%{translate:0 7px}}
@media(prefers-reduced-motion:reduce){.floating .b-node{animation:none;translate:none}}

/* A taller central message, framed by the floating workflow. */
@media(min-width:1101px){
.nav{max-width:1440px;height:92px;padding:0 56px}
.hero{max-width:1440px;padding:48px 56px 40px;min-height:calc(100svh - 92px)}
h1{font-size:clamp(78px,6.4vw,96px);line-height:.99;letter-spacing:-.052em;margin:24px auto 25px;max-width:780px}
.eyebrow{font-size:14px}.lead{font-size:21px}.actions{margin-top:27px}.primary{font-size:16px;padding:18px 27px}
.b-stage{max-width:1240px;margin-top:62px;height:302px}
.b-node{width:22%;min-height:218px;padding:24px}.b-node strong{font-size:17px}.b-node p{font-size:13px}.node-detail{font-size:11px;padding:10px}
.scattered .b-node:nth-of-type(2){transform:translate(-36px,-428px) rotate(-12deg)}
.scattered .b-node:nth-of-type(3){transform:translate(-85%,-124px) rotate(8deg)}
.scattered .b-node:nth-of-type(4){transform:translate(calc(118% + 12px),-410px) rotate(11deg)}
.scattered .b-node:nth-of-type(5){transform:translate(-12px,-116px) rotate(-8deg)}
}
@media(min-width:761px) and (max-width:1100px){
.hero{padding-top:46px}h1{font-size:clamp(60px,7.6vw,80px);line-height:1.02;max-width:630px}
.b-stage{margin-top:68px}.b-node{width:23%}
.scattered .b-node:nth-of-type(2){transform:translate(-12px,-320px) rotate(-12deg)}
.scattered .b-node:nth-of-type(3){transform:translate(-105px,-45px) rotate(8deg)}
.scattered .b-node:nth-of-type(4){transform:translate(205px,-300px) rotate(11deg)}
.scattered .b-node:nth-of-type(5){transform:translate(5px,-35px) rotate(-8deg)}
}
@media(max-width:760px){
.hero{padding-top:30px}h1{font-size:clamp(39px,11.4vw,68px);line-height:1.02;margin:22px 0}.lead{font-size:18px}.b-stage{margin-top:54px}
}
.b-node:nth-of-type(5){--card-color:var(--action);color:var(--white);background:color-mix(in srgb,var(--action) 97%,transparent)}
.b-node:nth-of-type(5) .node-detail,.b-node:nth-of-type(5) .tool-icon,.b-node:nth-of-type(5) .mini-status{background:color-mix(in srgb,var(--action) 92%,var(--ink))}

.scattered .b-line,.scattered .b-end{transition:none}

/* First-screen composition: the header is included in the viewport budget. */
.navlinks{gap:18px;font-size:15px;font-weight:550}
.navlinks>button{min-height:44px;padding:12px 14px;border-radius:24px}
.navlinks>button:not(.contact):hover{background:color-mix(in srgb,var(--primary) 7%,transparent)}
.nav .contact{min-height:46px;padding:12px 23px;background:var(--action);color:var(--white);border-color:var(--action);font-weight:650;box-shadow:0 5px 16px color-mix(in srgb,var(--primary) 16%,transparent)}
.nav .contact:hover{background:var(--hover);border-color:var(--hover)}
.actions .primary{min-height:56px;font-weight:650;box-shadow:0 9px 25px color-mix(in srgb,var(--primary) 23%,transparent)}
@media(min-width:761px) and (min-height:650px){
.nav{height:88px}
.hero{height:calc(100svh - 88px);min-height:0;padding-top:clamp(26px,5svh,60px);padding-bottom:0}
h1{margin:0 auto 21px;line-height:.99}
.lead{font-size:20px}.actions{margin-top:24px}
.b-stage{position:absolute;left:56px;right:56px;bottom:22px;height:270px;margin:0 auto;max-width:1240px}
.scattered .b-node:nth-of-type(2){transform:translate(-28px,calc(500px - 100svh)) rotate(-12deg)}
.scattered .b-node:nth-of-type(3){transform:translate(-85%,-80px) rotate(8deg)}
.scattered .b-node:nth-of-type(4){transform:translate(calc(118% + 12px),calc(514px - 100svh)) rotate(11deg)}
.scattered .b-node:nth-of-type(5){transform:translate(-12px,-72px) rotate(-8deg)}
}
@media(min-width:761px) and (max-width:1100px) and (min-height:650px){
.b-stage{left:32px;right:32px}
.scattered .b-node:nth-of-type(2){transform:translate(-10px,calc(515px - 100svh)) rotate(-12deg)}
.scattered .b-node:nth-of-type(4){transform:translate(108%,calc(529px - 100svh)) rotate(11deg)}
}
@media(max-width:760px){.navlinks{gap:0}.nav .contact{min-height:44px;font-size:14px;padding:11px 18px}.actions .primary{min-height:52px}.hero{padding-top:28px}h1{margin-top:0}}

@media(max-width:760px) and (min-height:600px){
.hero{height:calc(100svh - 78px);min-height:0;display:flex;flex-direction:column;padding-bottom:22px}
h1{flex:none;margin:0 0 18px}.lead{flex:none}.actions{flex:none;margin-top:22px}
.b-stage{flex:1;width:100%;height:auto;min-height:0;margin-top:38px}
.b-node{height:calc((100% - 26px)/2);min-height:0;padding:13px}
.b-node:nth-of-type(2),.b-node:nth-of-type(3){top:0}
.b-node:nth-of-type(4),.b-node:nth-of-type(5){top:calc(50% + 13px)}
.tool-icon{width:28px;height:28px;font-size:18px;margin-bottom:12px}.b-node strong{font-size:14px}.b-node p{font-size:10px;min-height:0;margin:6px 0 10px}.node-detail{font-size:8px;padding:6px 5px}.b-end{display:none}
}
@media(max-width:760px) and (min-height:600px) and (max-height:760px){
.hero{padding-top:20px}h1{font-size:clamp(39px,11.4vw,68px)}.lead{font-size:18px}.b-stage{margin-top:28px}.b-node p,.node-detail{display:none}.b-node strong{font-size:13px}.tool-icon{margin-bottom:10px}
}

@media(min-width:761px) and (min-height:650px) and (max-height:820px){
.hero{padding-top:22px}h1{margin-bottom:16px}.actions{margin-top:20px}
.b-stage{height:244px}.b-node{min-height:190px;padding:18px}.b-node .tool-icon{margin-bottom:17px}.b-node p{margin-bottom:12px}
}
@media(max-width:760px) and (min-height:600px){.hero{padding-bottom:44px}}

/* Scroll owns the card poses; no timed settle or scroll interception. */
.hero.entering .b-stage{animation:none}
.scroll-driven .b-node{transition:none;animation:none;translate:none}
.scroll-driven .b-line,.scroll-driven .b-end{transition:none}
.hero-scroll-space{pointer-events:none}

/* A single load sequence; the final word remains the accessible headline. */
.word-window{display:inline-grid;vertical-align:top;overflow:hidden;perspective:700px;padding:.06em .04em;margin:-.06em -.04em;line-height:1.05}
.hero-word{grid-area:1/1;white-space:nowrap;opacity:0;transform-origin:50% 50%;backface-visibility:hidden}
.word-rose{color:var(--rose)}.word-citrus{color:var(--citrus)}.word-green{color:var(--green)}.word-final{color:var(--primary);opacity:1}
.intro-running .hero-word{opacity:0;animation:word-pass .95s cubic-bezier(.22,.61,.25,1) both}
.intro-running .hero-word:nth-child(1){animation-delay:.1s}
.intro-running .hero-word:nth-child(2){animation-delay:.8s}
.intro-running .hero-word:nth-child(3){animation-delay:1.5s}
.intro-running .word-final{animation:word-arrive .45s cubic-bezier(.22,.61,.25,1) 2.2s both}
@keyframes word-pass{0%{opacity:0;transform:translateY(-105%) rotateX(-55deg)}28%,73%{opacity:1;transform:translateY(0) rotateX(0)}100%{opacity:0;transform:translateY(105%) rotateX(45deg)}}
@keyframes word-arrive{from{opacity:0;transform:translateY(-105%) rotateX(-55deg)}to{opacity:1;transform:translateY(0) rotateX(0)}}
.actions .primary{position:relative;isolation:isolate;overflow:hidden}
.actions .primary::before{content:"";position:absolute;inset:-1px;z-index:-1;pointer-events:none;background:linear-gradient(105deg,var(--citrus) 0%,var(--rose) 42%,var(--primary) 76%,var(--action) 100%);opacity:0;transform:translateX(-105%)}
.actions .primary.cta-highlight::before{animation:cta-fade-sweep .7s linear both}
@keyframes cta-fade-sweep{from{opacity:1;transform:translateX(-105%)}to{opacity:1;transform:translateX(105%)}}
@media(prefers-reduced-motion:reduce){.intro-running .hero-word{animation:none;opacity:0}.intro-running .word-final{opacity:1}.actions .primary::before{display:none}}

.actions .primary::before{mask-image:linear-gradient(90deg,transparent,black 14%,black 86%,transparent)}

/* Preserve the approved type scale; card placement handles viewport fit. */
@media(min-width:1101px){.lead{font-size:21px}}
.hero{overflow:visible}

/* Give the workflow more weight beside the large headline. */
@media(min-width:1101px){
.b-node{width:24%;min-height:236px;padding:25px;border-radius:24px}
.b-node:nth-of-type(3){left:25.333%}.b-node:nth-of-type(4){left:50.667%}
.b-node .tool-icon{width:44px;height:44px;font-size:23px;margin-bottom:24px}
.b-node strong{font-size:18px}.b-node p{font-size:13px;margin-bottom:17px}
.node-detail{font-size:11px;padding:11px}.b-stage{height:286px}
}
@media(min-width:761px) and (max-width:1100px){
.b-node{width:24%;min-height:220px;padding:18px}
.b-node:nth-of-type(3){left:25.333%}.b-node:nth-of-type(4){left:50.667%}
.b-stage{height:270px}
}

/* Restore the approved text spacing independently of card geometry. */
@media(min-width:1101px){
.hero{padding-top:48px}h1{margin:24px auto 25px}.lead{font-size:21px}.actions{margin-top:27px}
}
@media(min-width:761px) and (max-width:1100px){
.hero{padding-top:46px}h1{margin:22px auto 20px}.actions{margin-top:27px}
}

/* Service cards: one clear title and one useful sentence. */
.service-card{display:flex;flex-direction:column;justify-content:flex-start}
.service-card .tool-icon{margin-bottom:0;flex:none}
.service-card .tool-icon svg{width:25px;height:25px}
.b-node.service-card strong{margin-top:24px}
.b-node.service-card p{display:block;font-size:14px;line-height:1.45;margin:9px 0 0;min-height:0}
@media(max-width:1100px){.b-node.service-card p{font-size:12px}}
@media(max-width:760px){.b-node.service-card strong{margin-top:14px}.b-node.service-card p{font-size:11px;margin-top:7px}.service-card .tool-icon svg{width:20px;height:20px}}
@media(max-width:760px) and (min-height:600px) and (max-height:760px){.service-card .tool-icon{display:none}.b-node.service-card strong{margin-top:0}.service-card{justify-content:center}}

/* Service names carry the card; descriptions stay comfortably readable. */
.b-node.service-card strong{font-size:26px;font-weight:650;line-height:1.08;letter-spacing:-.65px;margin-top:14px}
.b-node.service-card p{font-size:16px;line-height:1.35;margin-top:9px}
@media(min-width:761px) and (max-width:1100px){.b-node.service-card strong{font-size:21px;letter-spacing:-.4px;margin-top:13px}.b-node.service-card p{font-size:14px}}
@media(max-width:760px){.b-node.service-card strong{font-size:18px;letter-spacing:-.3px;margin-top:12px}.b-node.service-card p{font-size:13px;line-height:1.3;margin-top:8px}}
@media(max-width:760px) and (min-height:600px) and (max-height:760px){.b-node.service-card strong{font-size:17px;margin-top:0}.b-node.service-card p{font-size:12px;margin-top:6px}}

/* Section two draft: show the handoff, rather than repeat the service list. */
.workflow-section{max-width:1440px;margin:0 auto;padding:250px 72px 130px;display:grid;grid-template-columns:.95fr 1.05fr;gap:72px;align-items:center;position:relative}
.section-label{font-size:12px;letter-spacing:.12em;font-weight:650;color:var(--muted)}
.workflow-copy h2{font-size:clamp(44px,4.5vw,66px);line-height:1.04;letter-spacing:-.045em;font-weight:550;margin:25px 0}
.workflow-copy h2 em{font-style:normal;color:var(--primary)}
.workflow-copy>p{font-size:20px;line-height:1.55;color:var(--muted);margin:0;max-width:430px}
.workflow-note{display:flex;align-items:center;gap:12px;font-size:15px;margin-top:38px;font-weight:550}.workflow-note>span{width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--primary) 9%,var(--paper));color:var(--action);display:grid;place-items:center;font-size:20px}
.workflow-illustration{margin:0;padding:30px 30px 24px;border-radius:30px;background:color-mix(in srgb,var(--primary) 5%,var(--paper));border:1px solid color-mix(in srgb,var(--primary) 12%,var(--paper))}
.workflow-illustration figcaption{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.1em;font-weight:650;color:var(--muted);margin:0 0 30px}.example-dot{width:6px;height:6px;border-radius:50%;background:var(--primary)}
.workflow-steps{list-style:none;padding:0;margin:0;position:relative}.workflow-steps::before{content:"";position:absolute;left:29px;top:38px;bottom:38px;width:2px;background:color-mix(in srgb,var(--primary) 20%,var(--paper))}
.flow-step{position:relative;display:grid;grid-template-columns:60px 1fr 24px;gap:18px;align-items:center;padding:16px 0 28px}.flow-step:last-child{padding-bottom:16px}
.flow-icon{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);box-shadow:0 5px 14px color-mix(in srgb,var(--ink) 4%,transparent);position:relative}.flow-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.flow-inquiry .flow-icon{color:var(--rose)}.flow-crm .flow-icon{background:var(--action);color:var(--white);border-color:var(--action)}.flow-followup .flow-icon{color:var(--ink);background:var(--green);border-color:var(--green)}
.flow-source{font-size:9px;letter-spacing:.1em;font-weight:650;color:var(--muted)}.flow-step h3{font-size:23px;line-height:1.15;letter-spacing:-.025em;font-weight:600;margin:6px 0}.flow-step p{font-size:13px;line-height:1.45;color:var(--muted);margin:0}.flow-tick{color:var(--action);font-size:16px}
.flow-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}.flow-auto{display:flex;align-items:center;gap:6px;color:var(--ink);font-weight:600}.flow-auto>span{color:var(--action);font-size:20px}
@media(max-width:1100px){.workflow-section{padding:210px 40px 100px;gap:36px}.workflow-illustration{padding:24px}.flow-step{gap:12px;grid-template-columns:50px 1fr 16px}.flow-icon{width:50px;height:50px;border-radius:15px}.workflow-steps::before{left:24px}.flow-step h3{font-size:20px}.workflow-copy>p{font-size:18px}.desktop-break{display:none}}
@media(max-width:760px){.workflow-section{grid-template-columns:1fr;padding:140px 24px 70px;gap:38px}.workflow-copy h2{font-size:46px;margin:20px 0}.workflow-copy>p{font-size:18px}.workflow-note{margin-top:24px;font-size:14px}.workflow-illustration{padding:23px 18px;border-radius:24px}.flow-step h3{font-size:20px}.flow-step p{font-size:12px}.flow-footer{font-size:9px}.flow-step{grid-template-columns:44px 1fr 14px;gap:12px}.flow-icon{width:44px;height:44px;border-radius:13px}.flow-icon svg{width:24px;height:24px}.workflow-steps::before{left:21px}.workflow-illustration figcaption{font-size:9px}}

/* Scan-first section: clear step names, icons and a connecting path. */
.workflow-illustration{padding:42px 34px}
.flow-step{min-height:112px;padding:22px 0}
.flow-step:last-child{padding-bottom:22px}
.flow-step h3{font-size:25px;margin:0}
.workflow-steps::before{top:52px;bottom:52px}
@media(max-width:760px){.workflow-illustration{padding:24px 20px}.flow-step{min-height:102px}.flow-step h3{font-size:21px}}

/* Give each section a clear pause, and keep the workflow panel compact. */
.workflow-section{padding-top:330px;padding-bottom:180px;grid-template-columns:1fr 500px;gap:90px}
.workflow-illustration{width:100%;max-width:500px;justify-self:end;padding:34px 28px}
.flow-step{grid-template-columns:60px 1fr 30px;gap:16px}.flow-tick{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--action);color:var(--white)}
.flow-tick svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round}
.fit-section{max-width:1440px;margin:auto;padding:150px 72px 180px;display:grid;grid-template-columns:1.1fr 1fr;gap:100px;align-items:center}
.fit-copy h2{font-size:clamp(44px,4.5vw,66px);font-weight:550;line-height:1.04;letter-spacing:-.045em;margin:0 0 25px}.fit-copy h2 em{font-style:normal;color:var(--primary)}.fit-copy p{font-size:20px;line-height:1.55;color:var(--muted);margin:0}
.fit-illustration{margin:0;min-width:0}.fit-switch{display:flex;gap:5px;width:fit-content;margin:0 auto 32px;border:1px solid var(--line);padding:5px;border-radius:30px}.fit-switch button{font-size:15px;padding:12px 22px;border-radius:25px;background:transparent;color:var(--muted);min-height:44px}.fit-switch button[aria-pressed=true]{background:var(--action);color:var(--white)}
.fit-canvas{position:relative;height:330px}.fit-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.fit-path path{fill:none;stroke:var(--line);stroke-width:3;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.fit-block{position:absolute;width:170px;height:96px;display:flex;align-items:center;gap:12px;padding:18px;border-radius:18px;box-shadow:0 12px 28px color-mix(in srgb,var(--ink) 8%,transparent);transition:transform .6s var(--ease),background .4s;transform:rotate(-3deg)}
.fit-block strong{font-size:20px;font-weight:600;letter-spacing:-.4px}.fit-block>span{font-size:24px}
.fit-first{top:24px;left:0;background:var(--rose)}.fit-second{top:120px;left:calc(50% - 85px);background:var(--action);color:var(--white);transform:rotate(3deg)}.fit-third{bottom:24px;right:0;background:var(--citrus)}
.fit-canvas[data-business=consultancy] .fit-first{transform:translateY(8px) rotate(2deg)}.fit-canvas[data-business=consultancy] .fit-second{transform:translateY(-6px) rotate(-3deg)}.fit-canvas[data-business=consultancy] .fit-third{transform:translateY(5px) rotate(2deg);background:var(--green)}
@media(max-width:1100px){.workflow-section{grid-template-columns:1fr 440px;gap:36px;padding-top:280px;padding-bottom:130px}.workflow-illustration{padding:28px 22px}.flow-step{grid-template-columns:50px 1fr 28px;gap:12px}.flow-step h3{font-size:23px}.fit-section{padding:110px 40px 140px;gap:50px}.fit-block{width:148px;height:86px;padding:15px;gap:9px}.fit-block strong{font-size:18px}.fit-second{left:calc(50% - 74px)}}
@media(max-width:900px) and (min-width:761px){.workflow-section{grid-template-columns:1fr 390px;gap:24px;padding-left:28px;padding-right:28px}.workflow-copy h2{font-size:43px}.flow-step h3{font-size:21px}.workflow-illustration{padding:28px 18px}.fit-section{gap:32px;padding-left:28px;padding-right:28px}.fit-copy h2{font-size:44px}}
@media(max-width:760px){.workflow-section{grid-template-columns:1fr;gap:38px;padding:200px 24px 100px}.workflow-illustration{max-width:500px;justify-self:center;padding:24px 18px}.flow-step{grid-template-columns:44px 1fr 26px;gap:10px}.flow-step h3{font-size:20px}.flow-tick{width:25px;height:25px}.fit-section{grid-template-columns:1fr;padding:100px 24px 100px;gap:44px}.fit-copy{grid-row:1}.fit-copy h2{font-size:46px}.fit-copy p{font-size:18px}.fit-block{width:146px;height:82px}.fit-second{left:calc(50% - 73px)}.fit-canvas{height:310px}.fit-switch button{font-size:14px;padding:10px 20px}}

/* A substantial, interactive example of a connected client workflow. */
.fit-section{display:block;padding:150px 72px 180px}
.fit-heading{display:flex;justify-content:space-between;align-items:end;gap:48px;margin-bottom:64px}
.fit-copy h2{font-size:clamp(52px,5.6vw,82px);margin:0;line-height:1.02}
.fit-intro{padding-bottom:4px;min-width:270px}.fit-intro>p{font-size:23px;line-height:1.35;margin:0 0 28px;color:var(--muted)}
.fit-switch{margin:0;background:var(--paper)}.fit-switch button{cursor:pointer;transition:background .2s,color .2s}
.workspace-demo{border-radius:30px;background:color-mix(in srgb,var(--primary) 5%,var(--paper));border:1px solid var(--line);overflow:hidden;box-shadow:0 24px 65px -38px color-mix(in srgb,var(--primary) 30%,transparent)}
.workspace-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 30px;border-bottom:1px solid var(--line);background:var(--paper)}
.workspace-name{display:flex;align-items:center;gap:13px;font-size:20px}.workspace-name strong{font-weight:600}.workspace-symbol{display:grid;place-items:center;background:var(--action);color:white;width:36px;height:36px;border-radius:11px;font-size:27px;font-weight:650;line-height:1}.example-label{font-size:14px;color:var(--muted)}
.workspace-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:410px}.pipeline{padding:30px;min-width:0}.pipeline-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.pipeline-heading h3{font-size:25px;letter-spacing:-.7px;margin:0;font-weight:600}.pipeline-view svg{width:22px;height:22px;stroke:var(--muted);fill:none;stroke-width:1.5}
.pipeline-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.pipeline-column{min-width:0}.pipeline-column h4{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:600;margin:0 0 17px;white-space:nowrap}.pipeline-column h4>span{margin-left:auto;color:var(--muted);font-weight:400}.stage-dot{width:8px;height:8px;border-radius:50%;flex:none}.dot-rose{background:var(--rose)}.dot-citrus{background:var(--citrus)}.dot-green{background:var(--green)}
.opportunity{padding:17px 15px;background:var(--paper);border:1px solid color-mix(in srgb,var(--ink) 9%,var(--paper));border-radius:12px;box-shadow:0 5px 12px color-mix(in srgb,var(--ink) 3%,transparent);margin-bottom:12px}.project-type{display:block;font-size:12px;color:var(--muted);margin-bottom:10px}.opportunity strong{display:block;font-size:19px;font-weight:600;letter-spacing:-.4px;line-height:1.22}.opportunity-footer{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);margin-top:23px}.initials{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:color-mix(in srgb,var(--rose) 18%,var(--paper));color:var(--ink);font-size:9px;flex:none}.initials-citrus{background:color-mix(in srgb,var(--citrus) 32%,var(--paper))}.initials-primary{background:color-mix(in srgb,var(--primary) 20%,var(--paper))}
.featured-opportunity{border-color:color-mix(in srgb,var(--primary) 45%,var(--paper));box-shadow:0 7px 24px color-mix(in srgb,var(--primary) 9%,transparent)}.proposal-signal{display:flex;gap:5px;align-items:center;font-size:11px;margin-top:20px;color:var(--action)}.proposal-signal svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.3}.won-slot{height:188px;border:1px dashed color-mix(in srgb,var(--primary) 24%,var(--paper));border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted);font-size:12px}.won-slot svg{width:24px;height:24px;stroke:var(--primary);fill:none;stroke-width:1.5}
.handoff-panel{border-left:1px solid var(--line);padding:30px 26px;background:color-mix(in srgb,var(--primary) 9%,var(--paper));display:flex;flex-direction:column}.handoff-heading{display:flex;align-items:start;gap:13px}.automation-icon{display:grid;place-items:center;background:var(--citrus);width:39px;height:39px;border-radius:12px;flex:none}.automation-icon svg{width:23px;height:23px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linejoin:round}.handoff-heading h3{font-size:25px;letter-spacing:-.8px;line-height:1.12;font-weight:550;margin:0}.handoff-steps{list-style:none;margin:32px 0;padding:0;display:grid;gap:23px}.handoff-steps li{display:flex;align-items:center;gap:12px;font-size:15px}.handoff-check{width:25px;height:25px;border-radius:50%;border:1px solid color-mix(in srgb,var(--primary) 30%,var(--paper));display:grid;place-items:center;transition:background .3s,border-color .3s,transform .3s}.handoff-check svg{width:16px;height:16px;fill:none;stroke:var(--paper);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:0}.handoff-steps li.is-done .handoff-check{background:var(--action);border-color:var(--action);transform:scale(1.06)}.handoff-steps li.is-done svg{opacity:1}
.run-handoff{display:flex;justify-content:space-between;align-items:center;gap:20px;background:var(--action);color:white;padding:16px 19px;border-radius:30px;font-size:15px;font-weight:600;cursor:pointer;margin-top:auto;min-height:49px;transition:background .2s}.run-handoff:hover{background:var(--hover)}.run-handoff:disabled{cursor:progress;opacity:.8}.handoff-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.workspace-bottom{display:flex;align-items:center;justify-content:center;gap:25px;padding:24px;border-top:1px solid var(--line);font-size:15px;background:var(--paper)}.workspace-bottom>span{display:flex;align-items:center;gap:9px}.workspace-bottom svg{width:48px;height:18px;stroke:var(--primary);stroke-width:1.4;fill:none}.connected-dot{width:8px;height:8px;border-radius:50%;background:var(--green)}
.fit-section button:focus-visible{outline:3px solid var(--primary);outline-offset:4px}.opportunity.is-arriving{animation:deal-arrive .55s var(--ease) both}@keyframes deal-arrive{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.fit-section{padding:110px 40px 140px}.workspace-body{grid-template-columns:minmax(0,1fr) 250px}.pipeline{padding:25px 20px}.pipeline-columns{gap:10px}.handoff-panel{padding:25px 20px}.handoff-heading h3{font-size:22px}.opportunity{padding:14px 10px}.opportunity strong{font-size:17px}.pipeline-column h4{font-size:13px}.opportunity-footer{font-size:10px}.handoff-steps li{font-size:14px}}
@media(max-width:900px){.workspace-body{grid-template-columns:1fr}.handoff-panel{border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:20px 32px;align-items:center}.handoff-steps{grid-column:2;grid-row:1 / span 2;margin:0;gap:18px}.run-handoff{max-width:240px;margin:0}.opportunity strong{font-size:20px}.pipeline-column h4{font-size:15px}.opportunity-footer{font-size:12px}.fit-intro{min-width:230px}.fit-heading{gap:24px}.fit-copy h2{font-size:57px}}
@media(max-width:600px){.fit-section{padding:100px 20px}.fit-heading{display:block;margin-bottom:36px}.fit-copy h2{font-size:49px}.fit-intro{margin-top:26px}.fit-intro>p{font-size:20px;margin-bottom:24px}.workspace-demo{border-radius:22px}.workspace-bar{padding:19px 16px;gap:8px}.workspace-name{font-size:16px;gap:8px}.workspace-symbol{width:29px;height:29px;font-size:22px}.example-label{font-size:11px}.pipeline{padding:25px 16px}.pipeline-heading{margin-bottom:25px}.pipeline-heading h3{font-size:23px}.pipeline-columns{grid-template-columns:1fr;gap:22px}.pipeline-column{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pipeline-column h4{grid-column:1 / -1;margin:0;font-size:15px}.opportunity{margin:0;padding:16px 12px}.opportunity strong{font-size:18px}.opportunity-footer{font-size:10px;margin-top:16px}.proposal-column .opportunity,.won-column .opportunity,.won-slot{grid-column:1 / -1}.won-slot{height:80px;flex-direction:row}.featured-opportunity{display:grid;grid-template-columns:1fr auto;column-gap:10px}.featured-opportunity .project-type,.featured-opportunity strong{grid-column:1}.featured-opportunity .proposal-signal{grid-column:2;grid-row:1 / 3;margin:0;font-size:10px}.featured-opportunity .opportunity-footer{grid-column:1 / -1}.handoff-panel{display:flex;align-items:stretch;padding:25px 20px;gap:0}.handoff-heading h3{font-size:26px}.handoff-heading h3 br{display:none}.handoff-steps{margin:25px 0;gap:18px}.handoff-steps li{font-size:16px}.run-handoff{max-width:none}.workspace-bottom{gap:10px;padding:22px 12px;font-size:11px}.workspace-bottom svg{width:22px}.workspace-bottom>span{gap:5px}}
@media(prefers-reduced-motion:reduce){.opportunity.is-arriving{animation:none}.handoff-check{transition:none}}
.won-slot[hidden]{display:none}

/* Connected tools: open composition after the contained workspace demo. */
.tools-section{max-width:1440px;margin:0 auto;padding:150px 72px 190px}
.tools-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:60px;margin-bottom:80px}
.tools-heading h2{font-size:clamp(52px,5.6vw,82px);font-weight:550;line-height:1.02;letter-spacing:-.045em;margin:0}
.tools-heading h2 em{font-style:normal;color:var(--primary)}
.tools-intro{min-width:280px;padding-bottom:5px}.tools-intro p{font-size:23px;line-height:1.35;color:var(--muted);margin:0 0 28px}
.tools-routes{display:flex;gap:5px;padding:5px;border:1px solid var(--line);border-radius:30px;width:fit-content}
.tools-routes button{background:transparent;color:var(--muted);padding:12px 22px;border-radius:25px;font-size:15px;min-height:46px;cursor:pointer;transition:background .2s,color .2s}
.tools-routes button[aria-pressed=true]{background:var(--action);color:var(--white)}
.tools-routes button:focus-visible{outline:3px solid var(--primary);outline-offset:4px}
#homepage-tools{display:block;max-width:1100px;margin:0 auto;min-height:385px}
@media(max-width:1100px){.tools-section{padding:110px 40px 140px}.tools-heading{gap:35px;margin-bottom:65px}.tools-heading h2{font-size:64px}}
@media(max-width:760px){.tools-section{padding:100px 24px 110px}.tools-heading{display:block;margin-bottom:45px}.tools-heading h2{font-size:49px}.tools-intro{margin-top:26px;min-width:0}.tools-intro p{font-size:20px;margin-bottom:24px}.tools-routes button{font-size:14px;padding:11px 20px}#homepage-tools{min-height:485px}}
@media(prefers-reduced-motion:reduce){.tools-routes button{transition:none}}

.tools-section{--workful-primary:var(--primary);--workful-action:var(--action);--workful-ink:var(--ink);--workful-muted:var(--muted);--workful-surface:var(--paper);--workful-line:var(--line);--workful-font:Figtree,Arial,sans-serif;}

/* Use the actual Workful mark for branded UI surfaces. */
.workspace-symbol{background:transparent}.workspace-symbol img{display:block;width:100%;height:auto;object-fit:contain}