@font-face{font-family:Inter;src:url(assets/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:Inter;src:url(assets/inter-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}@font-face{font-family:Inter;src:url(assets/inter-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--ink:#262828;--slate:#435565;--muted:#5a6a73;--ice:#d6ebf3;--paper:#f2f5f4;--line:rgba(67,85,101,.2);--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;color:var(--ink);background:var(--paper);font:400 15px/1.65 Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-library{position:absolute;width:0;height:0;overflow:hidden}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #447f98;outline-offset:5px}button,a{touch-action:manipulation}::selection{background:#b9dbe1;color:#262828}.wrap{width:min(1280px,calc(100% - 112px));margin-inline:auto}.section{padding-block:105px}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:400}h2{font-size:clamp(35px,4vw,62px);line-height:1.12;letter-spacing:-.055em}h2 em,h1 em{font-family:Georgia,"Times New Roman",serif;font-weight:400}h3{letter-spacing:-.035em;font-size:23px;line-height:1.3}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:10px;font-weight:500;line-height:1.5}.button{display:inline-flex;align-items:center;justify-content:center;gap:27px;background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:6px;padding:17px 23px;font-size:12px;font-weight:500;line-height:1.25;transition:transform .25s,background .25s;min-height:49px}.button:hover{background:#435565;transform:translateY(-2px)}.button svg{width:17px;height:17px}.button-small{padding:13px 17px;min-height:43px;gap:17px}.text-link{display:inline-flex;gap:22px;align-items:center;font-size:12px;font-weight:500}.text-link:hover{color:#447f98}.text-link svg{width:18px;height:18px}.skip{position:absolute;top:10px;left:10px;z-index:100;padding:12px;background:white;transform:translateY(-150%)}.skip:focus{transform:none}
.hero-shell{position:relative;isolation:isolate;background:#d6e8ed;overflow:hidden}.hero-image,.hero-wash{position:absolute;inset:0;width:100%;height:100%;z-index:-2}.hero-image{object-fit:cover;object-position:65% center;animation:scene-arrival 2s var(--ease) both}.hero-wash{z-index:-1;background:linear-gradient(90deg,rgba(230,240,242,.84) 0%,rgba(228,239,242,.48) 33%,rgba(229,240,243,0) 63%),linear-gradient(0deg,rgba(228,239,242,.9),transparent 16%)}.site-header{height:108px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(67,85,101,.2);position:relative;z-index:10}.brand{display:inline-flex;align-items:center;gap:10px;font-size:26px;letter-spacing:-1.3px;font-weight:600;white-space:nowrap}.brand-dot{color:#447f98}.portal-link{font-size:11px;font-weight:500}.portal-link:hover{text-decoration:underline;text-underline-offset:6px}.header-actions{display:flex;align-items:center;gap:25px}.portal-link{display:inline-flex;align-items:center;gap:7px}.portal-link svg{width:13px;height:13px}
.hero{min-height:700px;height:calc(100svh - 108px);max-height:930px;position:relative;display:flex;align-items:center;padding-bottom:72px}.hero-copy{position:relative;padding-top:18px;max-width:610px;animation:copy-arrival 1s var(--ease) backwards}.hero .eyebrow{display:flex;gap:9px;align-items:center;margin-bottom:28px}h1{font-size:clamp(68px,7.9vw,122px);line-height:.99;letter-spacing:-.067em}h1 em{letter-spacing:-.065em;color:var(--slate);display:inline-block;padding-right:10px}.hero-lead{font-size:16px;line-height:1.7;margin:27px 0 28px;color:#394b57}.clay{overflow:visible}
dialog{border:1px solid #d2e2e8;padding:40px;border-radius:12px;width:min(540px,calc(100% - 30px));background:#eef4f5;color:var(--ink);box-shadow:0 20px 100px #13252f40;max-height:calc(100svh - 30px);overflow:auto}dialog::backdrop{background:#1e303a77;backdrop-filter:blur(6px)}dialog h2{font-size:35px;margin:20px 0 25px}.dialog-close{position:absolute;right:16px;top:11px;border:0;background:transparent;font-size:30px;line-height:1;padding:8px}.dialog-close:hover{color:#447f98}form label{display:block;font-size:11px;margin:15px 0 6px}form input,form textarea,form select{width:100%;border:1px solid #b8ccd6;border-radius:4px;padding:10px 12px;background:#fafcfc;color:#283941;font-size:13px}form textarea{resize:vertical}form .button{margin-top:18px;width:100%}.form-note{font-size:10px;color:#576f7a;margin-top:12px;line-height:1.7}[hidden]{display:none!important}
@keyframes scene-arrival{from{transform:scale(1.018);opacity:.6}to{transform:scale(1);opacity:1}}@keyframes copy-arrival{from{transform:translateY(15px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(min-width:1700px){.hero-shell .hero-image{object-position:center 47%}.hero-copy{max-width:660px}.hero{min-height:790px}.wrap{width:min(1440px,calc(100% - 160px))}}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.header-actions{gap:15px}.hero{min-height:650px;height:760px}.hero-image{object-position:61% center}.hero-wash{background:linear-gradient(90deg,#e6f0f2dd,#e6f0f25c 48%,transparent 70%),linear-gradient(0deg,#e4eff2e6,transparent 16%)}h1{font-size:95px}.section{padding-block:80px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.site-header{height:82px}.brand{font-size:23px}.header-actions{gap:12px}.header-actions .portal-link{font-size:10.5px}.header-actions .portal-link svg{display:none}.header-actions .button-small{padding:9px 11px;min-height:34px;gap:8px;font-size:10.5px}.hero{min-height:800px;height:calc(100svh - 82px);max-height:920px;align-items:flex-start;padding-top:39px;padding-bottom:50px}.hero-copy{padding:0;max-width:100%}.hero .eyebrow{font-size:8px;margin-bottom:20px;letter-spacing:.13em}h1{font-size:clamp(54px,15.8vw,93px);line-height:1.01;letter-spacing:-.065em}.hero-lead{font-size:12px;line-height:1.8;margin:21px 0 22px}.hero .button{font-size:11px;padding:15px 17px;gap:20px}.hero-image{object-position:78% bottom;height:66%;top:auto;bottom:0}.hero-wash{background:linear-gradient(180deg,#dce9ed 0%,#dce9ed 27%,#dce9edf2 34%,#dce9ed77 48%,transparent 61%),linear-gradient(0deg,#e4eff2ef,transparent 12%)}.section{padding-block:63px}.eyebrow{font-size:8px;letter-spacing:.13em}dialog{padding:28px 23px}dialog h2{font-size:31px}form input,form select,form textarea{font-size:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* How it works: five steps beside a design-tool canvas that acts each one out.
   The canvas is decorative (aria-hidden); the step list carries the content.
   The block at the end of app.js adds is-playing (scene animations), drives data-step and scales the 760x500 stage.
   Without it, or with reduced motion, every scene shows its finished state. */
.process-section{--sel:#447f98;--you:#d0704f;--you-soft:#efc9b9;--mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,Menlo,monospace;padding:76px 0 80px;background:var(--paper);position:relative}
.process-layout{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:clamp(40px,5vw,76px);align-items:center}
.process-copy h2{font-size:clamp(34px,3.25vw,50px);line-height:1.1;letter-spacing:-.05em}
.process-copy h2 em{color:#70838e;letter-spacing:-.04em}

.process-steps{list-style:none;margin:34px 0 0;padding:0;border-bottom:1px solid var(--line)}
.process-step{position:relative;width:100%;display:grid;grid-template-columns:46px 1fr;align-items:start;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:15px 0 15px;color:#6b7b84;transition:color .3s}
.process-step:hover{color:var(--ink)}
.process-step:focus-visible{outline-offset:2px}
.step-num{font:500 11px/24px var(--mono);letter-spacing:.08em;transition:color .3s}
.step-title{display:block;font-size:17px;line-height:24px;letter-spacing:-.025em}
.step-text{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.step-text>span{overflow:hidden;font-size:13px;line-height:1.7;color:var(--muted);max-width:374px}
.process-step[aria-pressed=true]{color:var(--ink)}
.process-step[aria-pressed=true] .step-num{color:var(--sel)}
.process-step[aria-pressed=true] .step-text{grid-template-rows:1fr}
.process-step[aria-pressed=true] .step-text>span{padding-top:7px}
.step-timer{position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--sel);transform:scaleX(0);transform-origin:left}
.process-section.is-auto .process-step[aria-pressed=true] .step-timer{animation:pc-timer var(--dur,7s) linear both}
.process-section.is-paused .step-timer,.process-section.is-paused .process-canvas *{animation-play-state:paused!important}
@keyframes pc-timer{to{transform:scaleX(1)}}

/* Canvas shell: toolbar and footer stay crisp; the stage scales. */
.process-canvas{position:relative;aspect-ratio:760/500;border:1px solid #c9d6dc;border-radius:14px;overflow:hidden;background:#e8eef0 radial-gradient(circle,#43556538 1px,#0000 1.4px) 0 0/16px 16px;box-shadow:0 30px 70px -40px #243a4a59,inset 0 1px 0 #ffffffb3;color:#283941;user-select:none}
.pc-bar{position:absolute;inset:0 0 auto;height:40px;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:#f4f7f8e6;border-bottom:1px solid #d3dee3;backdrop-filter:blur(6px)}
.pc-file{display:flex;align-items:center;gap:9px;font:500 11px/1 var(--mono);color:#435565}
.pc-file b{display:grid;place-items:center;width:22px;height:22px;border-radius:5px;background:#262828;color:#fff;font:600 11px/1 Inter,sans-serif;letter-spacing:-.04em}
.pc-file i{font-style:normal;color:#8a9aa2}
.pc-people{display:flex;align-items:center}
.pc-people b{display:grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:12px;border:2px solid #f4f7f8;font:600 10px/1 Inter,sans-serif;color:#fff}
.pc-people .av-l{background:var(--sel)}
.pc-people .av-y{background:var(--you);margin-left:-5px}
.pc-foot{position:absolute;inset:auto 0 0;height:34px;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font:500 10px/1 var(--mono);letter-spacing:.06em;color:#6b7b84;pointer-events:none}
.pc-foot b{font-weight:500;color:var(--sel)}
.pc-zoom{padding:5px 7px;border:1px solid #c9d6dc;border-radius:5px;background:#f4f7f8}

.pc-stage{position:absolute;left:0;top:0;width:760px;height:500px;transform-origin:0 0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--s,1));font-size:12px;line-height:1.5}
.process-canvas.is-ready .pc-stage{transition:transform .8s var(--ease)}

/* Scenes: data-scene lists the steps an element belongs to. */
.pc-scene{position:absolute;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),transform .7s var(--ease),visibility 0s .45s}
.process-canvas[data-step="1"] [data-scene~="1"],.process-canvas[data-step="2"] [data-scene~="2"],.process-canvas[data-step="3"] [data-scene~="3"],.process-canvas[data-step="4"] [data-scene~="4"],.process-canvas[data-step="5"] [data-scene~="5"]{opacity:1;visibility:visible;transition-delay:0s}

/* Frames: a design-tool frame with its name above and selection handles. */
.pc-frame{background:#fbfcfc;border-radius:3px;box-shadow:0 1px 2px #22384a1f,0 14px 34px -18px #22384a59}
.pc-label{position:absolute;left:0;bottom:calc(100% + 7px);font:500 10.5px/1 var(--mono);color:var(--sel);white-space:nowrap}
.pc-handles{position:absolute;inset:-1px;border:1.5px solid var(--sel);pointer-events:none}
.pc-handles b{position:absolute;width:7px;height:7px;background:#fff;border:1.5px solid var(--sel)}
.pc-handles b:nth-child(1){left:-4px;top:-4px}.pc-handles b:nth-child(2){right:-4px;top:-4px}.pc-handles b:nth-child(3){left:-4px;bottom:-4px}.pc-handles b:nth-child(4){right:-4px;bottom:-4px}

/* Typed text and growing bars. --d is the delay, --n the character count. */
.t{display:block;width:max-content;max-width:100%;white-space:nowrap}
.a{display:block;height:7px;width:var(--w);border-radius:4px;background:var(--you-soft)}
.process-canvas.is-playing[data-step="1"] [data-scene~="1"] .t,.process-canvas.is-playing[data-step="2"] [data-scene~="2"] .t,.process-canvas.is-playing[data-step="5"] [data-scene~="5"] .t{animation:pc-type calc(var(--n)*22ms) steps(var(--n),end) var(--d,0s) backwards}
.process-canvas.is-playing[data-step="1"] [data-scene~="1"] .a,.process-canvas.is-playing[data-step="2"] [data-scene~="2"] .a{transform-origin:left;animation:pc-grow .45s var(--ease) var(--d,0s) backwards}
.process-canvas[data-step="4"] .pc-badge-private,.process-canvas[data-step="4"] .pc-toast{opacity:0}
@keyframes pc-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes pc-grow{from{transform:scaleX(0)}}
@keyframes pc-in{from{opacity:0;transform:translateY(8px) scale(.96)}}
@keyframes pc-pop{from{opacity:0;transform:scale(.6)}60%{transform:scale(1.06)}}
@keyframes pc-hold{from,to{opacity:1;visibility:visible}}
@keyframes pc-press{0%,100%{transform:none}50%{transform:scale(.92)}}

/* 01 First chat: the next question follows the last answer; a sticky note keeps what matters */
.pc-chat{left:150px;top:126px;width:440px;height:198px;padding:24px 26px;display:flex;flex-direction:column;gap:13px}
.msg{display:flex;align-items:flex-end;gap:8px}
.msg>b{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;color:#fff;font:600 9px/1 Inter,sans-serif}
.msg>span{max-width:290px;padding:8px 12px;border-radius:12px 12px 12px 3px;font-size:12.5px;line-height:1.45;color:#283941}
.msg-y>b{background:var(--you)}.msg-y>span{background:#fbebe4}
.msg-l{flex-direction:row-reverse}.msg-l>b{background:var(--sel)}.msg-l>span{background:#e2eef2;border-radius:12px 12px 3px 12px}
.pc-sticky{left:488px;top:298px;width:156px;padding:12px 14px 14px;background:#f3e4a6;color:#3d3416;font:500 13.5px/1.35 Inter,sans-serif;letter-spacing:-.01em;transform:rotate(-3deg);box-shadow:0 12px 24px -12px #3d341666,0 1px 2px #3d341626;z-index:2}
.pc-sticky small{display:block;font:500 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#8a7a3c;margin-bottom:7px}
.process-canvas.is-playing[data-step="1"] .msg{animation:pc-in .45s var(--ease) var(--d) backwards}
.process-canvas.is-playing[data-step="1"] .pc-sticky{animation:pc-stick .55s var(--ease) 4.8s backwards}
@keyframes pc-stick{from{opacity:0;transform:rotate(-12deg) scale(.7)}70%{transform:rotate(-2deg) scale(1.04)}}

/* 02 Photos and words */
.pc-content{left:120px;top:78px;width:520px;height:346px;padding:28px 30px}
.pc-photos{display:flex;gap:14px}
.ph{margin:0;width:144px}
.ph>span{display:block;height:98px;border-radius:3px;overflow:hidden}
.ph figcaption{font:400 10px/1 var(--mono);color:#7d8d95;margin-top:7px}
.ph .slot{display:grid;place-items:center;border:1.5px dashed #a9bcc5;font:400 10px/1 var(--mono);color:#7d8d95;background:#f1f5f6}
.art-1{background:radial-gradient(circle at 74% 30%,#fff3cf 0 9px,#0000 10px),linear-gradient(162deg,#0000 58%,#6e8f78 58.5% 71%,#557a63 71.5%),linear-gradient(180deg,#9fc6d6,#d5e7ea 60%)}
.art-2{background:radial-gradient(circle at 30% 82%,#2d3436 0 7px,#0000 8px),radial-gradient(circle at 70% 82%,#2d3436 0 7px,#0000 8px),linear-gradient(#0000 40%,#eef2f3 40% 76%,#0000 76%) 18px 0/108px 100% no-repeat,linear-gradient(180deg,#c8d7dc 0 64%,#8b9ba1 64%)}
.art-3{background:radial-gradient(ellipse at 50% 120%,#e38b5f 0 34%,#0000 35%),radial-gradient(circle at 26% 38%,#ffe6b0 0 8px,#0000 9px),linear-gradient(180deg,#2f4f63,#6f8fa0 58%,#d7a97d)}
.pc-words{margin-top:24px}
.pc-field{display:block;font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8a9aa2;margin-bottom:8px}
.pc-headline{font-size:21px;line-height:28px;letter-spacing:-.03em;color:#262828;margin-bottom:16px}
.pc-content .a{margin-top:9px;background:#d8e2e6}
.pc-swatches{display:flex;align-items:center;gap:8px;margin-top:18px}
.pc-swatches .pc-field{margin:0 6px 0 0}
.pc-swatches i{width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px #0000001f}
.pc-type{margin-left:8px;padding-left:14px;border-left:1px solid #dfe7ea;font:400 17px/1 Georgia,serif;color:#262828}
.process-canvas.is-playing[data-step="2"] .pc-swatches>i,.process-canvas.is-playing[data-step="2"] .pc-type{animation:pc-pop .4s var(--ease) var(--d) backwards}
.pc-drag{left:466px;top:106px;z-index:3}
.process-canvas.is-playing[data-step="2"] .pc-drag{animation:pc-drag 1.3s var(--ease) .5s backwards}
@keyframes pc-drag{from{transform:translate(210px,70px) rotate(4deg);box-shadow:0 18px 30px -10px #22384a66}80%{transform:translate(0,0) rotate(1deg)}}

/* 03-05 The website in a browser window */
.pc-browser{left:40px;top:84px;width:548px;height:330px;transform-origin:0 50%;overflow:visible}
.br-bar{height:32px;display:flex;align-items:center;gap:12px;padding:0 12px;border-bottom:1px solid #e0e7ea;background:#f1f5f6;border-radius:3px 3px 0 0}
.br-dots{display:flex;gap:5px}.br-dots i{width:8px;height:8px;border-radius:50%;background:#cdd8dd}
.br-url{position:relative;flex:1;max-width:260px;height:20px;margin:0 auto;border-radius:10px;background:#fff;border:1px solid #dfe7ea;font:400 10px/18px var(--mono);color:#5a6a73;text-align:center}
.br-url>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;transition:opacity .35s}
.br-url svg{width:10px;height:10px;stroke-width:2}
.u-live{opacity:0}
.u-live i{width:6px;height:6px;border-radius:50%;background:#3aa76d;box-shadow:0 0 0 3px #3aa76d26}
.br-site{padding:20px 22px}
.s-nav{display:flex;align-items:center;gap:14px;height:24px}
.s-logo{width:58px;height:14px;border-radius:3px;background:#262828;margin-right:auto}
.s-nav>i{width:34px;height:5px;border-radius:3px;background:#cfd9dd}
.s-call{font:600 9px/1 Inter,sans-serif;padding:7px 10px;border-radius:4px;background:#262828;color:#fff}
.s-hero{display:grid;grid-template-columns:1fr 200px;gap:22px;margin-top:22px}
.s-h{font-size:19px;line-height:23px;letter-spacing:-.035em;color:#262828;margin-bottom:12px}
.s-l{display:block;height:6px;width:var(--w);border-radius:3px;background:#d8e2e6;margin-top:8px}
.s-btn{display:inline-block;margin-top:16px;font:600 9px/1 Inter,sans-serif;padding:8px 12px;border-radius:4px;background:#262828;color:#fff}
.s-hours{display:inline-flex;align-items:center;gap:6px;margin:16px 0 0 8px;font:500 9px/1 var(--mono);color:#435565;padding:7px 9px;border-radius:4px;border:1px solid #d3dde1;opacity:0}
.s-img{position:relative;height:148px;border-radius:4px;overflow:hidden}
.s-img>span{position:absolute;inset:0}
.s-img .img-old{opacity:0}
.s-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.s-cards i{height:44px;border-radius:4px;background:#eef3f4;border:1px solid #e1e8eb}

.pc-badge{right:172px;top:54px;display:flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:11px;background:#262828;color:#fff;font:500 10px/1 var(--mono)}
.pc-badge-live{background:#2f7d55}
.pc-badge-live i{width:6px;height:6px;border-radius:50%;background:#b6f0cd}
.pc-burst{left:566px;top:65px;width:0;height:0;z-index:4}
.pc-burst i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:2px;opacity:0;background:var(--sel)}
.pc-burst i:nth-child(1){--x:-46px;--y:-20px}.pc-burst i:nth-child(2){--x:-30px;--y:26px;background:var(--you)}.pc-burst i:nth-child(3){--x:4px;--y:34px;background:#3aa76d}.pc-burst i:nth-child(4){--x:40px;--y:24px;background:#d7a97d}.pc-burst i:nth-child(5){--x:52px;--y:-12px}.pc-burst i:nth-child(6){--x:24px;--y:-30px;background:var(--you)}.pc-burst i:nth-child(7){--x:-14px;--y:-34px;background:#3aa76d}.pc-burst i:nth-child(8){--x:-56px;--y:8px;background:#d7a97d}
.process-canvas.is-playing[data-step="4"] .pc-burst i{animation:pc-burst .9s cubic-bezier(.15,.7,.3,1) 2.15s backwards}
@keyframes pc-burst{0%{opacity:0;transform:none}8%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(160deg)}}
.pc-pin{z-index:2}.pc-pin-1{left:308px;top:174px}.pc-pin-2{left:528px;top:190px}
.pc-comment{z-index:2}.pc-comment-1{left:598px;top:116px}.pc-comment-2{left:598px;top:194px}
.pc-pin{display:grid;place-items:center;width:24px;height:24px;border-radius:12px 12px 12px 2px;background:var(--you);color:#fff;font:600 9px/1 Inter,sans-serif;box-shadow:0 0 0 2px #fff}
.pc-bubble{display:block;width:138px;padding:9px 11px;border-radius:8px;background:#fff;box-shadow:0 10px 26px -10px #22384a66,0 0 0 1px #e0e7ea;font-size:11.5px;line-height:1.45;color:#283941}
.pc-bubble b{display:block;font:600 10px/1.4 Inter,sans-serif;color:var(--you);margin-bottom:2px}
.pc-reply{left:598px;top:278px;z-index:2}
.pc-reply .pc-bubble{width:auto;display:flex;align-items:center;gap:7px}
.pc-reply .pc-bubble b{color:var(--sel);margin:0}
.pc-reply svg{width:13px;height:13px;stroke:#2f7d55;stroke-width:2.4}
.pc-toast{left:178px;top:358px;z-index:3;display:flex;align-items:center;gap:16px;padding:9px 9px 9px 15px;border-radius:9px;background:#262828;color:#eef2f3;font-size:11.5px;box-shadow:0 16px 30px -12px #12202a80;opacity:0}
.pc-toast span{font:600 10px/1 Inter,sans-serif;padding:8px 11px;border-radius:5px;background:#fff;color:#262828}
.pc-chips{left:40px;top:434px;display:flex;align-items:center;gap:8px}
.pc-chips em{font:500 10px/1 var(--mono);font-style:normal;color:#6b7b84;margin-right:4px}
.pc-chips span{display:flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:13px;background:#fbfcfc;border:1px solid #d3dee3;font-size:11px;color:#283941}
.pc-chips svg{width:12px;height:12px;stroke:#2f7d55;stroke-width:2.4}

/* 05 Client portal request */
.pc-portal{left:440px;top:132px;width:290px;height:204px;padding:22px 22px}
.pt-h{font-size:15px;letter-spacing:-.025em;color:#262828;margin:0 0 12px}
.pt-input{height:74px;padding:10px 12px;border:1px solid #cfdbe0;border-radius:5px;background:#fff}
.pt-input .t{font-size:12px;line-height:19px;color:#283941}
.pt-row{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.pt-send{font:600 10px/1 Inter,sans-serif;padding:10px 13px;border-radius:5px;background:#262828;color:#fff}
.pt-status{position:relative;display:flex;align-items:center;justify-content:flex-end;width:80px;height:24px}
.pt-status>span{position:absolute;right:0;display:flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:12px;font:500 10px/1 var(--mono)}
.st-sent{background:#eef3f4;color:#5a6a73;opacity:0}
.st-done{background:#e2f3e9;color:#2f7d55}
.st-done svg{width:11px;height:11px;stroke-width:2.6}

/* Step changes to shared elements */
.process-canvas[data-step="4"] .u-private,.process-canvas[data-step="5"] .u-private{opacity:0}
.process-canvas[data-step="4"] .u-live,.process-canvas[data-step="5"] .u-live{opacity:1}
.process-canvas[data-step="5"] .pc-browser{transform:translate(-22px,4px) scale(.86);opacity:.6}
.process-canvas[data-step="5"] .pc-browser .pc-handles{opacity:0}
.process-canvas[data-step="5"] .s-hours{opacity:1;border-color:var(--you);background:#fff4ef;color:#283941}

/* Cursors: the outer box moves between steps, the inner box acts within one. */
.pc-cursor{position:absolute;left:0;top:0;z-index:6;transform:translate(var(--cx),var(--cy));transition:transform .9s var(--ease)}
.pc-cursor svg{display:block;width:16px;height:18px;stroke:#fff;stroke-width:1.2}
.pc-cursor span{position:absolute;left:13px;top:15px;padding:3px 7px;border-radius:9px 9px 9px 2px;color:#fff;font:600 10px/1.2 Inter,sans-serif;white-space:nowrap}
.cur-l svg{fill:var(--sel)}.cur-l span{background:var(--sel)}
.cur-y svg{fill:var(--you)}.cur-y span{background:var(--you)}
.cur-l{--cx:640px;--cy:368px}.cur-y{--cx:120px;--cy:236px}
.process-canvas[data-step="2"] .cur-l{--cx:532px;--cy:286px}.process-canvas[data-step="2"] .cur-y{--cx:538px;--cy:154px}
.process-canvas[data-step="3"] .cur-l{--cx:404px;--cy:300px}.process-canvas[data-step="3"] .cur-y{--cx:520px;--cy:222px}
.process-canvas[data-step="4"] .cur-l{--cx:532px;--cy:448px}.process-canvas[data-step="4"] .cur-y{--cx:372px;--cy:395px}
.process-canvas[data-step="5"] .cur-l{--cx:167px;--cy:292px}.process-canvas[data-step="5"] .cur-y{--cx:488px;--cy:298px}

/* Scene timelines (only while playing) */
.process-canvas.is-playing[data-step="1"] .cur-l .cur-in{animation:pc-l1 .8s var(--ease) 4.1s backwards}
@keyframes pc-l1{from{transform:translate(-110px,-200px)}}
.process-canvas.is-playing .cur-y .cur-in{animation:pc-idle 3.2s ease-in-out infinite alternate}
@keyframes pc-idle{to{transform:translate(4px,6px)}}
.process-canvas.is-playing[data-step="2"] .cur-y .cur-in{animation:pc-drag-cur 1.3s var(--ease) .5s backwards}
@keyframes pc-drag-cur{from{transform:translate(210px,70px)}80%{transform:none}}
.process-canvas.is-playing[data-step="2"] .cur-l .cur-in{animation:pc-l2 .84s steps(19,end) 2.1s backwards}
@keyframes pc-l2{from{transform:translate(-362px,0)}}
.process-canvas.is-playing[data-step="3"] .pc-badge{animation:pc-in .5s var(--ease) .3s backwards}
.process-canvas.is-playing[data-step="3"] .cur-y .cur-in{animation:pc-y3 2.4s var(--ease) .3s backwards}
@keyframes pc-y3{0%{transform:translate(-330px,150px)}25%,60%{transform:translate(-220px,-14px)}100%{transform:none}}
.process-canvas.is-playing[data-step="3"] .pc-pin-1{animation:pc-pop .4s var(--ease) .95s backwards}
.process-canvas.is-playing[data-step="3"] .pc-comment-1{animation:pc-in .45s var(--ease) 1.1s backwards}
.process-canvas.is-playing[data-step="3"] .pc-pin-2{animation:pc-pop .4s var(--ease) 2.75s backwards}
.process-canvas.is-playing[data-step="3"] .pc-comment-2{animation:pc-in .45s var(--ease) 2.9s backwards}
.process-canvas.is-playing[data-step="3"] .cur-l .cur-in{animation:pc-l3 1s var(--ease) 3.6s backwards}
@keyframes pc-l3{from{transform:translate(-264px,110px)}}
.process-canvas.is-playing[data-step="3"] .img-old{animation:pc-fade-out 5.1s linear backwards}
@keyframes pc-fade-out{0%,92%{opacity:1}100%{opacity:0}}
.process-canvas.is-playing[data-step="3"] .pc-reply{animation:pc-pop .45s var(--ease) 5.1s backwards}
.process-canvas.is-playing[data-step="4"] .pc-toast{animation:pc-toast 2.2s var(--ease) .2s}
@keyframes pc-toast{0%{opacity:0;transform:translateY(10px)}15%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(6px)}}
.process-canvas.is-playing[data-step="4"] .pc-toast span{animation:pc-press .3s ease 1.6s}
.process-canvas.is-playing[data-step="4"] .cur-y .cur-in{animation:pc-y4 .9s var(--ease) .5s backwards}
@keyframes pc-y4{from{transform:translate(-170px,-150px)}}
.process-canvas.is-playing[data-step="4"] .u-private{animation:pc-hold 2.1s}
.process-canvas.is-playing[data-step="4"] .u-live{animation:pc-in .5s var(--ease) 2.1s backwards}
.process-canvas.is-playing[data-step="4"] .pc-badge-private{animation:pc-hold 2.1s}
.process-canvas.is-playing[data-step="4"] .pc-badge-live{animation:pc-pop .45s var(--ease) 2.1s backwards}
.process-canvas.is-playing[data-step="4"] .pc-chips>*{animation:pc-in .45s var(--ease) var(--d) backwards}
.process-canvas.is-playing[data-step="4"] .cur-l .cur-in{animation:pc-l4 .9s var(--ease) 2.4s backwards}
@keyframes pc-l4{from{transform:translate(120px,-190px)}}
.process-canvas.is-playing[data-step="5"] .pc-portal{animation:pc-in .55s var(--ease) .3s backwards}
.process-canvas.is-playing[data-step="5"] .cur-y .cur-in{animation:pc-y5 3s var(--ease) .4s backwards}
@keyframes pc-y5{0%,62%{transform:translate(-36px,-80px)}86%,100%{transform:none}}
.process-canvas.is-playing[data-step="5"] .pt-send{animation:pc-press .3s ease 2.85s}
.process-canvas.is-playing[data-step="5"] .st-sent{animation:pc-sent 2s 3s backwards}
@keyframes pc-sent{0%{opacity:0;transform:scale(.7)}12%,88%{opacity:1;transform:none}100%{opacity:0}}
.process-canvas.is-playing[data-step="5"] .st-done{animation:pc-pop .45s var(--ease) 5s backwards}
.process-canvas.is-playing[data-step="5"] .cur-l .cur-in{animation:pc-l5 1s var(--ease) 3.6s backwards}
@keyframes pc-l5{from{transform:translate(393px,150px)}}
.process-canvas.is-playing[data-step="5"] .s-hours{animation:pc-hours 1s var(--ease) 4.4s backwards}
@keyframes pc-hours{from{opacity:0;transform:translateY(5px) scale(.9)}}

@media(max-width:1100px){
.process-layout{grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:40px}
}
@media(max-width:860px){
.process-section{padding:68px 0 72px}
.process-layout{grid-template-columns:1fr;gap:28px}
.process-copy{display:contents}
.process-copy h2{order:2}
.process-canvas{order:3;aspect-ratio:auto;height:min(92vw,430px)}
.process-steps{order:4;margin:0}
.step-text>span{max-width:none}
}
@media(prefers-reduced-motion:reduce){.pc-cursor{display:none}}
/* Hero headline: Laydan Display (loaded by app.js) takes over once the html element has .laydan-type; until then the Inter setting above stays. */
.hero h1 .line{display:block}
.laydan-type h1{font-family:"Laydan Display",Inter,Arial,sans-serif;font-weight:400;line-height:.86;letter-spacing:0;color:#1b1e23}
.laydan-type h1 em{font-family:inherit;font-style:normal;letter-spacing:0;color:#455669;padding-right:0}
.laydan-type h1 .l2{position:relative;top:-.033em}
.laydan-type h1 .l3{position:relative;top:-.004em}
/* How it works heading: Laydan Expanded (loaded by app.js) takes over once the html element has .process-type; until then the Inter setting above stays. The two cursors and the selection frame are drawn by app.js. On narrow screens the cursors start past the right edge of the page, so the full-width section clips sideways overflow and the page never scrolls sideways. */
#process-title{position:relative}
.process-section{overflow-x:clip}
.process-type #process-title{font-family:"Laydan Expanded",Inter,Arial,sans-serif;font-weight:400;font-size:min(clamp(34px,3.25vw,44px),calc((100vw - 40px)/9.6));line-height:1.1;letter-spacing:-.025em}
.process-type #process-title em{font-family:inherit;font-style:normal;letter-spacing:inherit;color:var(--sel)}
#process-title.ph-room{margin-bottom:16px}
.ph-deco{position:absolute;inset:0;pointer-events:none}
.ph-cur{position:absolute;left:0;top:0;z-index:2;opacity:0;transition:transform .9s var(--ease),opacity .35s}
.ph-cur.in{opacity:1}
.ph-cur svg{display:block;width:16px;height:18px;stroke:#fff;stroke-width:1.2}
.ph-cur span{position:absolute;left:13px;top:15px;padding:3px 7px;border-radius:9px 9px 9px 2px;color:#fff;font:600 10px/1.2 Inter,sans-serif;letter-spacing:0;white-space:nowrap}
.ph-cur.flip span{left:auto;right:3px;border-radius:9px 9px 2px 9px}
.ph-cur.y svg{fill:var(--you)}
.ph-cur.y span{background:var(--you)}
.ph-cur.l svg{fill:var(--sel)}
.ph-cur.l span{background:var(--sel)}
.ph-cur.idle>i{display:block;animation:ph-drift 5s ease-in-out infinite alternate}
.ph-cur.y.idle>i{animation-duration:6.5s;animation-delay:-2s}
@keyframes ph-drift{to{transform:translate(3px,-2px)}}
.ph-sel{position:absolute;border:1.5px solid var(--sel);opacity:0;transform:scale(.97);transition:opacity .3s,transform .45s var(--ease)}
.ph-sel.on{opacity:1;transform:none}
.ph-sel i{position:absolute;width:7px;height:7px;background:#fff;border:1.5px solid var(--sel)}
.ph-sel i:nth-child(1){left:-4px;top:-4px}
.ph-sel i:nth-child(2){right:-4px;top:-4px}
.ph-sel i:nth-child(3){left:-4px;bottom:-4px}
.ph-sel i:nth-child(4){right:-4px;bottom:-4px}
@media(prefers-reduced-motion:reduce){.ph-cur{transition:none}}
@media(max-width:380px){.header-actions .button-small svg{display:none}.brand{font-size:21px}}
/* How it works, scroll-driven (WEB-045): the step being read drives the canvas (app.js). Desktop: the canvas pins beside the
   steps while they scroll past; every step's text shows, the one being read at full strength with its line lit. Phones: the
   heading, the step text and the canvas pin together, centred on the screen. The five steps share one grid cell, so the text
   box is as tall as the longest step; the step being read is .is-now, the ones before it .is-past, and each change slides the
   text up and out as the next rises from under the canvas. Laydan's tag under the heading sits in the heading's padding. Each
   step rests at a scroll stop (.process-snap, added by app.js, one per step, 64svh apart) that a flick can't pass: while the page
   is around the section it snaps strictly (html.process-snapping, set by app.js), and two tall areas just above and below
   (.is-before, .is-after) let it rest anywhere there and a flick out of the section run on. The stops sit 30px down to match
   html's scroll-padding-top, so each step rests with the block exactly pinned. */
.process-stick{display:contents}
.process-snap{display:none}
.process-layout{align-items:start}
.process-pin{position:sticky;top:0;height:100svh;display:flex;align-items:center}
.process-pin .process-canvas{width:min(100%,calc((100svh - 96px) * 760 / 500))}
.process-steps li{min-height:40svh}
.process-steps li:last-child{min-height:52svh}
.process-step{opacity:.42;transition:color .3s,opacity .35s}
.process-step[aria-pressed=true]{opacity:1}
.step-text{grid-template-rows:1fr}
.step-text>span{padding-top:7px}
.step-timer{transition:transform .6s var(--ease)}
.process-step[aria-pressed=true] .step-timer{transform:scaleX(1)}
@media(max-width:860px){
 html.process-snapping{scroll-snap-type:y mandatory}
 .process-layout{display:block;position:relative;height:calc(100svh + 4 * 64svh)}
 .process-snap{display:block;position:absolute;left:0;top:calc(var(--k) * 64svh + 30px);width:1px;height:1px;pointer-events:none;scroll-snap-align:start;scroll-snap-stop:always}
 .process-snap.is-before{top:-250svh;height:calc(350svh - 1px);scroll-snap-stop:normal}
 .process-snap.is-after{top:calc(4 * 64svh + 31px);height:350svh;scroll-snap-stop:normal}
 .process-stick{position:sticky;top:0;height:100svh;display:flex;flex-direction:column}
 .process-stick::before,.process-stick::after{content:"";flex:1 1 0;min-height:14px}
 .process-stick::before{order:0}
 .process-stick::after{order:5}
 .process-copy h2,#process-title.ph-room{order:1;flex:none;margin:0;padding-bottom:14px}
 #process-title.ph-room{padding-bottom:36px}
 .process-steps{order:3;flex:none;display:grid;margin:0;padding:8px 0;overflow:hidden;border:0;-webkit-mask-image:linear-gradient(transparent,#000 8px,#000 calc(100% - 8px),transparent);mask-image:linear-gradient(transparent,#000 8px,#000 calc(100% - 8px),transparent)}
 .process-steps li,.process-steps li:last-child{grid-area:1/1;min-height:0;transition:transform .7s var(--ease),opacity .45s var(--ease)}
 .process-steps li:not(:first-child){transform:translateY(100%);opacity:0}
 .process-steps li.is-past{transform:translateY(-100%);opacity:0}
 .process-steps li.is-now{transform:none;opacity:1}
 .process-step{opacity:1;border-top:0;padding:0}
 .process-step .step-timer{display:none}
 .process-pin{order:4;flex:0 1 min(92vw,430px);min-height:180px;height:auto;margin-top:6px;display:block;position:static}
 .process-pin .process-canvas{width:100%;height:100%}
}
@media(prefers-reduced-motion:reduce){.process-step,.step-timer,.process-steps li{transition:none}}