/* Page CSS, lifted as it is from handoff/preview/Main.dc.html */ body{margin:0;background:#F4F4F2} html{scroll-behavior:smooth} .pg{font-family:'Work Sans',ui-sans-serif,system-ui,sans-serif;color:#362A21;background:#F4F4F2;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden} .pg *{box-sizing:border-box} .pg p{margin:0;text-wrap:pretty} .pg h1,.pg h2,.pg h3{margin:0} .pg ::selection{background:#FF7133;color:#2A2019} .pg a:focus-visible,.pg button:focus-visible,.pg input:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,113,51,.5)} .wrap{width:100%;max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px} .disp{font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-weight:700;letter-spacing:-0.02em;line-height:1.06} .eyebrow{font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#75594A} .mono{font-family:'IBM Plex Mono',ui-monospace,monospace} .skip{position:absolute;left:16px;top:-60px;background:#2A2019;color:#F4F4F2;padding:12px 18px;border-radius:999px;z-index:100;text-decoration:none;font-weight:600} .skip:focus{top:12px;color:#F4F4F2} .tabs-scroll{overflow-x:auto;overflow-y:hidden;max-width:100%;min-width:0;scrollbar-width:none} .tabs-scroll::-webkit-scrollbar{display:none} .anim-btn{position:relative;display:block;width:100%;padding:0;margin:0;border:1px solid #E9E7E2;border-radius:4px;overflow:hidden;background:#FBFBFA;cursor:pointer;font:inherit;color:inherit;text-align:left} .anim-paused{position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--brown-800);color:var(--paper);font-size:13px;font-weight:600;pointer-events:none} .seg{display:inline-flex;flex-wrap:wrap;gap:2px;background:#E9E7E2;border-radius:999px;padding:4px} .seg button{font-family:'Work Sans',sans-serif;font-weight:600;font-size:13.5px;line-height:1;padding:10px 16px;min-height:36px;border-radius:999px;border:0;background:transparent;color:#75594A;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s} .seg button:hover{color:#362A21} .seg button[aria-pressed="true"]{background:#FFFFFF;color:#362A21;box-shadow:0 1px 2px rgba(42,32,25,.06)} .seg-sm button{padding:8px 12px;font-size:12.5px} .nav{position:sticky;top:0;z-index:60;background:rgba(244,244,242,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #E9E7E2} .navlink{color:#362A21;text-decoration:none;font-size:15px;font-weight:500;padding:12px 2px} .navlink:hover{color:#C8480F} .nav-links{display:flex;align-items:center;gap:28px} .nav-menu{display:none} .mobile-menu{display:none} .sec{padding-top:168px;padding-bottom:168px} .hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center} .problem{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:64px;align-items:center} .how-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px} .hstep{border-top:1px solid var(--stone-300);padding-top:28px} .hn{display:block;font-family:var(--font-display);font-size:44px;line-height:1;color:var(--brown-400);margin-bottom:20px} .textlink{display:inline-flex;align-items:center;gap:8px;min-height:48px;font-weight:600;font-size:16px;color:var(--brown-800);text-decoration:none;border-bottom:1px solid transparent} .textlink:hover{color:var(--orange-700)} .moat{text-align:center;max-width:900px;margin:0 auto} .facts-sec{background:var(--stone-200);color:var(--brown-900);border-bottom:1px solid var(--stone-400)} .facts-sec .sec{padding-top:120px;padding-bottom:120px} .facts-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 32px;margin-bottom:56px} .facts-legend{display:flex;gap:24px;list-style:none;margin:0;padding:0;font-size:14px;font-weight:500;color:var(--brown-700)} .facts-legend li{display:inline-flex;align-items:center;gap:10px} .facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px;position:relative} .facts::before{content:"";position:absolute;left:0;right:0;top:6.5px;height:3px;background:var(--blue-600)} .fact{position:relative;padding-top:40px} .fact-dot,.facts-legend .fact-dot{display:inline-block;width:16px;height:16px;border-radius:50%;background:var(--brown-900);box-shadow:0 0 0 5px var(--stone-200)} .fact>.fact-dot{position:absolute;top:0;left:0} .fact-dot.now{background:var(--orange);animation:factPulse 2.8s ease-out infinite} .facts-legend .fact-dot{box-shadow:none;animation:none} @keyframes factPulse{0%{box-shadow:0 0 0 5px var(--stone-200),0 0 0 5px rgba(255,113,51,.55)}100%{box-shadow:0 0 0 5px var(--stone-200),0 0 0 16px rgba(255,113,51,0)}} .fact-k{display:block;font-family:var(--font-mono);font-size:13px;font-weight:500;color:var(--brown-600);letter-spacing:.02em} .fact-t{display:block;font-family:var(--font-display);font-weight:700;font-size:23px;line-height:1.2;color:var(--brown-900);margin-top:10px} .fact-b{display:block;font-size:15px;line-height:1.55;color:var(--brown-800);margin-top:8px} .studio{display:flex;background:var(--surface-page);border:1px solid rgba(244,244,242,.16);border-radius:var(--radius-md);overflow:hidden;color:var(--text-primary);text-align:left} .studio-side{width:200px;flex-shrink:0;background:var(--paper-raised);border-right:1px solid var(--border-subtle);padding:26px 16px;display:flex;flex-direction:column;gap:32px} .studio-main{flex:1;min-width:0} .st-tab{position:relative;font-size:15px;padding:12px 14px 14px;white-space:nowrap} .st-tab{color:var(--text-secondary);font-weight:500;transition:color .2s ease} .st-tab::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transition:transform .35s var(--ease-out)} .st-tab.on{color:var(--text-primary);font-weight:600} .st-tab.on::after{transform:scaleX(1)} .st-body{min-height:660px} .st-fade{animation:stFade .45s var(--ease-out) both} .st-bar{transition:width .6s var(--ease-out)} .st-row{display:flex;align-items:center;gap:14px;padding:11px 10px;margin:0 -10px;border-top:1px solid var(--border-subtle)} .st-flash{animation:stFlash 1.4s ease-out} @keyframes stFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none} } @keyframes stFlash{0%{background:var(--orange-soft)}100%{background:transparent} } .st-sw{position:relative;display:inline-block;width:44px;height:26px;border-radius:var(--radius-pill);background:var(--stone-400);flex-shrink:0} .st-sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:var(--radius-pill);background:#fff;box-shadow:var(--shadow-sm)} .proof-media{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:48px;align-items:center} .vision{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px;align-items:center} .team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px} .contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--stone-300)} .cbox{min-width:0;display:flex;flex-direction:column;gap:18px;padding:32px 48px 0 0} .cbox+.cbox{padding:32px 0 0 48px;border-left:1px solid var(--stone-300)} .frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px} .finline{display:flex;align-items:flex-end;gap:12px} .fgrow{flex:1 1 220px;min-width:0} .fgrow>*{width:100%} .ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;background:repeating-linear-gradient(135deg,#E9E7E2 0 14px,#E3E0DA 14px 28px);border-radius:8px;color:#5A554F} .ph-dark{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;background:repeating-linear-gradient(135deg,#362A21 0 14px,#30251D 14px 28px);border:1px dashed rgba(244,244,242,.28);border-radius:8px;color:rgba(244,244,242,.82)} .flink{color:#362A21;text-decoration:none;font-size:14px;padding:12px 0} .flink:hover{color:#C8480F} .vlink{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:17px;color:var(--brown-800);text-decoration:none;padding:12px 0;border-bottom:1px solid currentColor} .vlink:hover{color:var(--orange-700)} @media (max-width:1040px){ .nav-links,.nav-studio{display:none} .nav-menu{display:inline-flex} .mobile-menu{display:block} .hero,.problem,.proof-media,.vision{grid-template-columns:minmax(0,1fr)} .hero{gap:48px} .vision{gap:48px} .vision-art svg{max-width:340px!important} .how-steps{grid-template-columns:minmax(0,1fr);gap:36px} .facts{grid-template-columns:minmax(0,1fr);gap:36px} .facts::before{left:6.5px;right:auto;top:8px;bottom:8px;width:3px;height:auto} .fact{padding:0 0 0 44px} } @media (max-width:720px){ .team,.contact{grid-template-columns:minmax(0,1fr)} .cbox,.cbox+.cbox{padding:28px 0 0} .cbox+.cbox{border-left:0;border-top:1px solid var(--stone-300);margin-top:32px} .frow{grid-template-columns:minmax(0,1fr)} .finline{flex-wrap:wrap} .fgrow{flex-basis:100%} .sec{padding-top:104px;padding-bottom:104px} .facts-sec .sec{padding-top:80px;padding-bottom:80px} .facts-head{margin-bottom:40px} .studio-side{display:none} } @media (max-width:520px){ .nav-cta{display:none} } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .pg *{transition-duration:0s !important} .st-fade,.st-flash{animation:none !important} .fact-dot.now{animation:none} } /* Hero film CSS, lifted as it is from handoff/preview/Flat.dc.html */ /* One film, one clock. Every moving part runs a 20 s keyframe loop and they all start together, so the whole sequence plays as a single continuous take on the compositor: no script steps through stages, nothing waits on another. 0 – 5.0 s capture: the camera drifts slowly around the 3D cutaway 5.0 – 8.6 s LiDAR: a plane sweeps west to east; each surface turns to points the moment the plane reaches it (dN = metres from west) 8.6 – 11.6 s the camera tips over to the 2D plan 11.6 – 19.0 s the plan steps aside, the sale file slides in and ticks 19.0 – 20.0 s everything fades, resets unseen, and fades back in Main.dc.html seeks and pauses this film through the Web Animations API. */ .fl-root{--fl-t:20s;position:relative;width:100%;aspect-ratio:10/9;overflow:hidden;container-type:inline-size;background:var(--paper);-webkit-font-smoothing:antialiased} .fl-root *{box-sizing:border-box} .fl-root::before{content:"";position:absolute;inset:0;background:var(--blue-soft);opacity:0;animation:flTint var(--fl-t) cubic-bezier(.45,0,.55,1) infinite} .fl-anchor{position:absolute;left:50%;top:50%;width:0;height:0;animation:flScene var(--fl-t) cubic-bezier(.45,0,.55,1) infinite} .fl-cam{position:absolute;left:-4em;top:-3em;width:8em;height:6em;font-size:6.2cqw;transform-style:preserve-3d;will-change:transform;animation:flCam var(--fl-t) cubic-bezier(.45,0,.55,1) infinite} .fl-cam div{position:absolute} .fl-3d{transform-style:preserve-3d} .fl-t{left:0;top:0;width:100%;height:100%} .fl-s{left:0;top:100%;width:100%;transform-origin:50% 0;transform:rotateX(90deg)} .fl-w{top:0;height:100%;transform-origin:100% 50%;transform:rotateY(90deg)} .fl-bb{transform-origin:50% 100%;transform:rotateZ(42deg) rotateX(-90deg)} .fl-o,.fl-o .fl-rl,.fl-o .fl-sc{border-radius:50%} .fl-ring{-webkit-mask-image:radial-gradient(circle closest-side,transparent 0 70%,#000 70.5% 93%,transparent 93.5%),conic-gradient(from 90deg,transparent 0 100deg,#000 100deg 360deg);mask-image:radial-gradient(circle closest-side,transparent 0 70%,#000 70.5% 93%,transparent 93.5%),conic-gradient(from 90deg,transparent 0 100deg,#000 100deg 360deg);-webkit-mask-composite:source-in;mask-composite:intersect} .fl-cush{-webkit-mask-image:radial-gradient(circle closest-side,transparent 0 76%,#000 76.5% 89%,transparent 89.5%),conic-gradient(from 90deg,transparent 0 106deg,#000 106deg 354deg,transparent 354deg);mask-image:radial-gradient(circle closest-side,transparent 0 76%,#000 76.5% 89%,transparent 89.5%),conic-gradient(from 90deg,transparent 0 106deg,#000 106deg 354deg,transparent 354deg);-webkit-mask-composite:source-in;mask-composite:intersect} .fl-rim{-webkit-mask-image:radial-gradient(circle closest-side,transparent 0 95%,#000 95.5%);mask-image:radial-gradient(circle closest-side,transparent 0 95%,#000 95.5%)} /* A surface = a flat face holding its real skin (.fl-rl) and its scan skin (.fl-sc). The face itself fades out for the plan; the skins swap during the sweep, offset by the face's distance from the west wall (.d0 – .d8). */ .fl-face{animation:flFace var(--fl-t) cubic-bezier(.45,0,.55,1) infinite} .fl-rl,.fl-sc{position:absolute;inset:0;display:block} .fl-rl{animation:flReal var(--fl-t) cubic-bezier(.45,0,.55,1) infinite both} .fl-sc{opacity:0;animation:flScan var(--fl-t) cubic-bezier(.45,0,.55,1) infinite both;background-color:rgba(228,241,250,.35);background-image:radial-gradient(circle,var(--blue-700) 0 .024em,transparent .03em),linear-gradient(rgba(79,152,201,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(79,152,201,.5) 1px,transparent 1px);background-size:.12em .12em,.5em .5em,.5em .5em;box-shadow:inset 0 0 0 1px var(--blue-700)} .d1 .fl-rl,.d1 .fl-sc{animation-delay:.325s} .d2 .fl-rl,.d2 .fl-sc{animation-delay:.65s} .d3 .fl-rl,.d3 .fl-sc{animation-delay:.975s} .d4 .fl-rl,.d4 .fl-sc{animation-delay:1.3s} .d5 .fl-rl,.d5 .fl-sc{animation-delay:1.625s} .d6 .fl-rl,.d6 .fl-sc{animation-delay:1.95s} .d7 .fl-rl,.d7 .fl-sc{animation-delay:2.275s} .d8 .fl-rl,.d8 .fl-sc{animation-delay:2.6s} .fl-sh{left:-.12em;top:-.12em;right:-.12em;bottom:-.12em;transform:translateZ(.006em);background:radial-gradient(closest-side,rgba(42,32,25,.22),rgba(42,32,25,0));animation:flShadow var(--fl-t) cubic-bezier(.45,0,.55,1) infinite} .fl-sheet{left:-3em;top:-.3em;width:3em;height:6.6em;transform-origin:100% 50%;opacity:0;background:rgba(131,189,226,.32);box-shadow:inset 0 0 0 .02em var(--blue-600),inset -.05em 0 0 var(--blue-700);animation:flSheet var(--fl-t) linear infinite} .fl-plan{position:absolute;left:0;top:0;width:8em;height:6em;transform:translateZ(3.2em);opacity:0;overflow:visible;animation:flPlan var(--fl-t) cubic-bezier(.45,0,.55,1) infinite} .fl-cap{position:absolute;left:4cqw;top:4cqw;display:inline-flex;align-items:center;gap:.6em;font-size:clamp(10px,1.95cqw,13px);font-weight:var(--weight-semibold);color:var(--text-primary);background:var(--paper-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);padding:.55em 1em .55em .8em;opacity:0;white-space:nowrap} .fl-num{font-family:var(--font-mono);font-weight:500;color:var(--orange-700)} .fl-c0{animation:flCap0 var(--fl-t) cubic-bezier(.45,0,.55,1) infinite} .fl-c1{animation:flCap1 var(--fl-t) cubic-bezier(.45,0,.55,1) infinite} .fl-c2{animation:flCap2 var(--fl-t) cubic-bezier(.45,0,.55,1) infinite} .fl-c3{animation:flCap3 var(--fl-t) cubic-bezier(.45,0,.55,1) infinite} .fl-card{position:absolute;right:4%;top:8%;width:50%;background:var(--paper-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);padding:3cqw 3.2cqw 2.6cqw;font-size:clamp(9.5px,2.05cqw,14px);line-height:1.3;opacity:0;animation:flCard var(--fl-t) cubic-bezier(.45,0,.55,1) infinite} .fl-ey{font-family:var(--font-mono);font-size:.82em;color:var(--text-secondary);letter-spacing:.03em} .fl-ct{font-family:var(--font-display);font-weight:700;font-size:1.75em;letter-spacing:-.02em;line-height:1.1;color:var(--brown-900);margin-top:.3em} .fl-bar{margin:.9em 0 .35em;height:3px;background:var(--stone-200);border-radius:var(--radius-pill);overflow:hidden} .fl-bar i{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);animation:flBar var(--fl-t) cubic-bezier(.45,0,.55,1) infinite} .fl-row{display:flex;align-items:center;gap:.7em;padding:.6em 0;border-top:1px solid var(--border-subtle)} .fl-ck{position:relative;width:1.35em;height:1.35em;border-radius:var(--radius-pill);border:1.5px solid var(--stone-400);flex-shrink:0} .fl-ckf{position:absolute;left:-1.5px;top:-1.5px;right:-1.5px;bottom:-1.5px;border-radius:var(--radius-pill);background:var(--green);color:var(--white);display:flex;align-items:center;justify-content:center;opacity:0;animation:flTick var(--fl-t) var(--ease-out) infinite both} .fl-ckf svg{width:62%;height:62%} .fl-rt{flex:1;min-width:0;display:flex;flex-direction:column} .fl-lab{font-weight:var(--weight-semibold);color:var(--text-primary)} .fl-sub{font-size:.82em;color:var(--text-secondary);margin-top:.15em} .fl-stt{font-family:var(--font-mono);font-size:.78em;color:var(--brown-600);white-space:nowrap;opacity:0;animation:flStatus var(--fl-t) cubic-bezier(.45,0,.55,1) infinite both} .t1 .fl-ckf,.t1 .fl-stt{animation-delay:.6s} .t2 .fl-ckf,.t2 .fl-stt{animation-delay:1.2s} .t3 .fl-ckf,.t3 .fl-stt{animation-delay:1.8s} .t4 .fl-ckf,.t4 .fl-stt{animation-delay:2.4s} .fl-pub{display:flex;align-items:center;flex-wrap:wrap;gap:.45em;margin-top:.5em;padding-top:.8em;border-top:1px solid var(--border-subtle);opacity:0;animation:flPub var(--fl-t) cubic-bezier(.45,0,.55,1) infinite} .fl-pill{font-size:.8em;font-weight:var(--weight-semibold);padding:.32em .85em;border-radius:var(--radius-pill);background:var(--orange-soft);color:var(--orange-700);white-space:nowrap} .fl-pill.mute{background:var(--stone-200);color:var(--brown-600)} @container (max-width:440px){.fl-card{width:60%;right:3%;top:5%;padding:3.2cqw}} /* 1 s = 5 % of the loop. */ @keyframes flScene{0%{opacity:0}2.5%{opacity:1}95%{opacity:1}97.5%{opacity:0}100%{opacity:0} } @keyframes flCam{ 0%{transform:translate(0,7cqw) rotateX(57deg) rotateZ(-48deg) scale(1.1)} 43%{transform:translate(0,7cqw) rotateX(57deg) rotateZ(-38deg) scale(1.14)} 51%{transform:translate(0,0) rotateX(0deg) rotateZ(0deg) scale(1.42)} 58%{transform:translate(0,0) rotateX(0deg) rotateZ(0deg) scale(1.42)} 64%{transform:translate(-27cqw,-13cqw) rotateX(0deg) rotateZ(0deg) scale(.62)} 97.5%{transform:translate(-27cqw,-13cqw) rotateX(0deg) rotateZ(0deg) scale(.62)} 98.5%{transform:translate(0,7cqw) rotateX(57deg) rotateZ(-48deg) scale(1.1)} 100%{transform:translate(0,7cqw) rotateX(57deg) rotateZ(-48deg) scale(1.1)} } @keyframes flTint{0%{opacity:0}25%{opacity:0}27%{opacity:1}42%{opacity:1}45%{opacity:0}100%{opacity:0} } @keyframes flFace{0%{opacity:1}43%{opacity:1}47%{opacity:0}97.5%{opacity:0}98.5%{opacity:1}100%{opacity:1} } @keyframes flReal{0%{opacity:1}26%{opacity:1}27.5%{opacity:.08}60%{opacity:.08}61%{opacity:1}100%{opacity:1} } @keyframes flScan{0%{opacity:0}26%{opacity:0}27.5%{opacity:1}60%{opacity:1}61%{opacity:0}100%{opacity:0} } @keyframes flShadow{0%{opacity:1}25%{opacity:1}28%{opacity:0}97.5%{opacity:0}98.5%{opacity:1}100%{opacity:1} } @keyframes flSheet{ 0%{transform:translateX(0) rotateY(90deg);opacity:0} 25.5%{transform:translateX(0) rotateY(90deg);opacity:0} 26%{transform:translateX(0) rotateY(90deg);opacity:1} 39%{transform:translateX(8em) rotateY(90deg);opacity:1} 40%{transform:translateX(8em) rotateY(90deg);opacity:0} 100%{transform:translateX(8em) rotateY(90deg);opacity:0} } @keyframes flPlan{0%{opacity:0}46%{opacity:0}50%{opacity:1}95%{opacity:1}97.5%{opacity:0}100%{opacity:0} } @keyframes flCap0{0%{opacity:0;transform:translateY(6px)}2.5%{opacity:1;transform:none}23.5%{opacity:1;transform:none}25%{opacity:0;transform:translateY(-4px)}100%{opacity:0;transform:translateY(-4px)} } @keyframes flCap1{0%{opacity:0;transform:translateY(6px)}25.5%{opacity:0;transform:translateY(6px)}27.5%{opacity:1;transform:none}41.5%{opacity:1;transform:none}43%{opacity:0;transform:translateY(-4px)}100%{opacity:0;transform:translateY(-4px)} } @keyframes flCap2{0%{opacity:0;transform:translateY(6px)}45%{opacity:0;transform:translateY(6px)}47%{opacity:1;transform:none}57%{opacity:1;transform:none}58.5%{opacity:0;transform:translateY(-4px)}100%{opacity:0;transform:translateY(-4px)} } @keyframes flCap3{0%{opacity:0;transform:translateY(6px)}58.5%{opacity:0;transform:translateY(6px)}60.5%{opacity:1;transform:none}95%{opacity:1;transform:none}97.5%{opacity:0;transform:translateY(-4px)}100%{opacity:0;transform:translateY(-4px)} } @keyframes flCard{0%{opacity:0;transform:translateY(3cqw)}59.5%{opacity:0;transform:translateY(3cqw)}63.5%{opacity:1;transform:none}95%{opacity:1;transform:none}97.5%{opacity:0;transform:none}100%{opacity:0;transform:translateY(3cqw)} } @keyframes flBar{0%{transform:scaleX(0)}64%{transform:scaleX(0)}79%{transform:scaleX(1)}97.5%{transform:scaleX(1)}100%{transform:scaleX(0)} } @keyframes flTick{0%{opacity:0;transform:scale(.4)}65%{opacity:0;transform:scale(.4)}67%{opacity:1;transform:scale(1)}98%{opacity:1;transform:scale(1)}99%{opacity:0;transform:scale(.4)}100%{opacity:0;transform:scale(.4)} } @keyframes flStatus{0%{opacity:0}65.5%{opacity:0}67.5%{opacity:1}98%{opacity:1}99%{opacity:0}100%{opacity:0} } @keyframes flPub{0%{opacity:0;transform:translateY(.4em)}81%{opacity:0;transform:translateY(.4em)}84%{opacity:1;transform:none}95%{opacity:1;transform:none}97.5%{opacity:0;transform:none}100%{opacity:0;transform:translateY(.4em)} } /* Reduced motion: the film still tells its story, but every change is a cut, never a movement, and the sweeping plane is not shown. */ @media (prefers-reduced-motion: reduce){ .fl-root,.fl-root::before,.fl-root *{animation-timing-function:step-end !important} .fl-sheet{display:none} } /* ── Design-system components as static CSS ────────────────────────────────── The reference rendered these as React components from the Arkiteque design system (Button, IconButton, Icon, Badge, Tabs, Input, Banner) with inline styles and JS hover state. Same values here, from the system's own tables; hover/press/focus are CSS instead of script. */ .ic{display:inline-block;flex-shrink:0;vertical-align:middle} /* Button */ .btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-weight:var(--weight-semibold);line-height:1;letter-spacing:.01em;border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;user-select:none;transform:scale(1);transition:background var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)} .btn:active{transform:scale(.97)} .btn-sm{padding:7px 16px;font-size:var(--text-sm);gap:6px} .btn-md{padding:11px 24px;font-size:var(--text-base);gap:8px} .btn-lg{padding:15px 34px;font-size:var(--text-md);gap:10px} .btn-lg .ic{width:18px;height:18px} .btn-full{display:flex;width:100%} .btn-primary,.btn-primary:visited{background:var(--accent);color:var(--text-on-accent)} .btn-primary:hover{background:var(--accent-hover);color:var(--text-on-accent)} .btn-dark,.btn-dark:visited{background:var(--brown-700);color:var(--text-inverse)} .btn-dark:hover{background:var(--brown-800);color:var(--text-inverse)} .btn-outline,.btn-outline:visited{background:transparent;color:var(--text-primary);border-color:var(--border-strong)} .btn-outline:hover{background:var(--stone-200);color:var(--text-primary)} .btn[disabled]{background:var(--stone-300);color:var(--text-muted);border-color:transparent;cursor:not-allowed;transform:none} /* IconButton (the mobile menu) */ .iconbtn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);cursor:pointer;transform:scale(1);transition:background var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)} .iconbtn:active{transform:scale(.92)} .iconbtn-lg{width:48px;height:48px} .iconbtn-outline{background:transparent;color:var(--text-primary);border:1px solid var(--border-strong)} .iconbtn-outline:hover{background:var(--stone-200)} .iconbtn .ic-close{display:none} .iconbtn[aria-expanded="true"] .ic-open{display:none} .iconbtn[aria-expanded="true"] .ic-close{display:inline-block} .pg .iconbtn:focus-visible,.pg .tab:focus-visible,.pg .anim-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,113,51,.5)} /* Language switch: the reference's .seg buttons, as links to the two pages */ .seg a{font-family:'Work Sans',sans-serif;font-weight:600;font-size:13.5px;line-height:1;padding:10px 16px;min-height:36px;display:inline-flex;align-items:center;border-radius:999px;color:#75594A;text-decoration:none;white-space:nowrap;transition:background .12s,color .12s} .seg-sm a{padding:8px 12px;font-size:12.5px;min-height:32px} .seg a:hover{color:#362A21} .seg a[aria-current="page"]{background:#FFFFFF;color:#362A21;box-shadow:0 1px 2px rgba(42,32,25,.06)} .pg .seg a:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,113,51,.5)} /* Mobile menu: hidden attribute wins over the reference's display rules */ .mobile-menu[hidden]{display:none!important} /* Badge */ .badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:.02em;padding:4px 10px;border-radius:var(--radius-pill);transition:background .3s var(--ease-standard),color .3s var(--ease-standard)} .badge-neutral{background:var(--stone-200);color:var(--brown-700)} .badge-blue{background:var(--blue-soft);color:var(--blue-700)} .badge-success{background:#E5EDE0;color:#4C6B3D} /* Tabs (the hero film's four stages) */ .tabs{display:flex;gap:4px;border-bottom:1px solid var(--border)} .tab{position:relative;appearance:none;background:none;border:none;cursor:pointer;font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--text-secondary);padding:12px 16px 14px;white-space:nowrap;transition:color var(--dur-fast) var(--ease-standard)} .tab[aria-selected="true"]{font-weight:var(--weight-semibold);color:var(--text-primary)} .tab-bar{position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px 2px 0 0;background:var(--accent);transform:scaleX(0);transform-origin:center;transition:transform var(--dur-base) var(--ease-out)} .tab[aria-selected="true"] .tab-bar{transform:scaleX(1)} /* Input */ .field{display:flex;flex-direction:column;gap:6px} .field label{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-primary)} .input{width:100%;font-family:var(--font-sans);font-size:var(--text-base);color:var(--text-primary);padding:11px 14px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-sm);outline:none;box-shadow:none;transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)} .pg .input:focus,.pg .input:focus-visible{border-color:var(--brown-700);box-shadow:var(--shadow-focus)} /* Banner (success, after a form is sent) */ .banner{display:flex;gap:12px;align-items:flex-start;border-radius:var(--radius-sm);padding:14px 16px;font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-normal)} .banner-success{background:#E5EDE0;border-left:3px solid var(--green)} .banner-title{font-weight:var(--weight-semibold);color:#4C6B3D} .banner[hidden]{display:none} /* Form states this build adds: the honeypot and a send failure */ .hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden} .form-error{font-size:13.5px;line-height:1.5;color:var(--red)} .form-error a{color:inherit;text-decoration:underline} .anim-paused[hidden]{display:none} .pg form[hidden]{display:none} /* Arkiteque buttons kit, as delivered */ /* ========================================================================== Arkiteque — Buttons & controls (v1.0) Square corners everywhere, like the logo. Orange = main action, blue = secondary, labels always dark brown on colour (never white). Contents 0 Tokens 1 Offset button (.ab-btn) — primary / secondary / sizes / states 2 Outline button (.ab-btn--outline) 3 Text link action (.ab-link) 4 Icon button (.ab-icon-btn) — close, menu, back, search, copy… 5 Menu toggle (.ab-menu-btn) 6 Send button (.ab-send) — idle / sending / sent / error 7 Copy button (.ab-copy) 8 Upload button (.ab-upload) 9 Language switcher (.ab-lang) and mobile menu (.ab-lang-menu) 10 Segmented control (.ab-seg) 11 Filter chips (.ab-chip) 12 Pagination (.ab-page) 13 Dark backgrounds (.ab-on-dark) 14 Reduced motion ========================================================================== */ /* 0 · Tokens ---------------------------------------------------------------- */ :root { --arkiteque-offwhite: #F4F4F2; --arkiteque-brown: #49372D; --arkiteque-brown-900: #2A1E18; --arkiteque-orange: #FF7133; --arkiteque-blue: #83BDE2; --arkiteque-grey: #BFBAB6; --arkiteque-line: #DDD9D4; --arkiteque-line-strong: #8C8178; --arkiteque-text-muted: #6E625A; --arkiteque-sunken: #E9E6E2; --arkiteque-focus: #2F6FA0; --arkiteque-success: #2F6B4B; --arkiteque-error: #A1262B; --arkiteque-font-sans: Inter, "Helvetica Neue", Arial, system-ui, sans-serif; --arkiteque-font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --ab-fg-on-colour: var(--arkiteque-brown-900); --ab-ink: var(--arkiteque-brown); /* text colour of quiet controls */ --ab-hover-bg: var(--arkiteque-sunken); --ab-focus: var(--arkiteque-focus); } /* shared focus ring for everything in this file */ :where(.ab-btn, .ab-link, .ab-icon-btn, .ab-menu-btn, .ab-lang a, .ab-lang-menu summary, .ab-seg button, .ab-chip, .ab-page):focus-visible { outline: 2px solid var(--ab-focus); outline-offset: 3px; } /* 1 · Offset button ---------------------------------------------------------- */ .ab-btn { --ab-bg: var(--arkiteque-orange); --ab-shadow: var(--arkiteque-blue); --ab-fg: var(--ab-fg-on-colour); --ab-ring: 0 0 0 0 transparent; /* used by the outline variant */ --ab-o: 6px; --ab-h: 48px; --ab-px: 20px; --ab-fs: 15px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--ab-h); padding: 0 var(--ab-px); border: 0; border-radius: 0; background: var(--ab-bg); color: var(--ab-fg); font: 600 var(--ab-fs)/1.25 var(--arkiteque-font-sans); white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; box-shadow: var(--ab-ring), var(--ab-o) calc(var(--ab-o) * -1) 0 0 var(--ab-shadow); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; } .ab-btn:hover { transform: translate(calc(var(--ab-o) / 3), calc(var(--ab-o) / -3)); box-shadow: var(--ab-ring), calc(var(--ab-o) * 2 / 3) calc(var(--ab-o) * -2 / 3) 0 0 var(--ab-shadow); } .ab-btn:active { transform: translate(var(--ab-o), calc(var(--ab-o) * -1)); box-shadow: var(--ab-ring), 0 0 0 0 var(--ab-shadow); transition-duration: .06s; } .ab-btn:focus-visible { outline-offset: calc(var(--ab-o) + 2px); } .ab-btn--secondary { --ab-bg: var(--arkiteque-blue); --ab-shadow: var(--arkiteque-orange); } .ab-btn--sm { --ab-h: 40px; --ab-px: 16px; --ab-fs: 14px; --ab-o: 4px; } .ab-btn--lg { --ab-h: 56px; --ab-px: 28px; --ab-fs: 17px; --ab-o: 8px; } .ab-btn--block { display: flex; width: 100%; } .ab-btn svg, .ab-btn .ab-icon { width: 1.15em; height: 1.15em; flex: none; } .ab-btn:disabled, .ab-btn[aria-disabled="true"]:not([data-state="sent"]) { --ab-bg: var(--arkiteque-grey); --ab-o: 0px; color: rgba(42, 30, 24, .6); cursor: not-allowed; transform: none; pointer-events: none; } /* loading — set aria-busy="true"; the label keeps its width */ .ab-btn[aria-busy="true"] { color: transparent; pointer-events: none; } .ab-btn[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 6px; height: 6px; color: var(--ab-fg); background: currentColor; box-shadow: -12px 0 0 currentColor, 12px 0 0 currentColor; animation: ab-busy 1s infinite; } @keyframes ab-busy { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } /* 2 · Outline button: no fill, brown frame; for « Refuser », « Annuler » ---- */ .ab-btn--outline { --ab-bg: transparent; --ab-fg: var(--ab-ink); --ab-ring: inset 0 0 0 2px var(--ab-ink); --ab-o: 0px; } .ab-btn--outline:hover { background: var(--ab-hover-bg); transform: none; } .ab-btn--outline:active { transform: translateY(1px); } .ab-btn--outline:disabled { --ab-bg: transparent; --ab-ring: inset 0 0 0 2px var(--arkiteque-grey); color: var(--arkiteque-text-muted); } /* 3 · Text link action: highlighter bar under the words -------------------- */ .ab-link { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 6px; padding: 2px 2px; border: 0; background: none; cursor: pointer; color: var(--ab-ink); font: 600 15px/1.4 var(--arkiteque-font-sans); text-decoration: none; } .ab-link::before { content: ""; position: absolute; z-index: -1; left: 4px; right: -4px; bottom: 1px; height: 6px; background: var(--arkiteque-orange); transition: height .15s ease; } .ab-link:hover { color: var(--arkiteque-brown-900); } .ab-link:hover::before { height: calc(100% - 2px); } .ab-link--blue::before { background: var(--arkiteque-blue); } .ab-link svg { width: 1em; height: 1em; } /* 4 · Icon button: square, quiet; for close, back, search, copy, share… ---- */ .ab-icon-btn { --ab-s: 44px; display: inline-grid; place-items: center; width: var(--ab-s); height: var(--ab-s); padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ab-ink); cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease; } .ab-icon-btn svg { width: 22px; height: 22px; } .ab-icon-btn:hover { background: var(--ab-hover-bg); } .ab-icon-btn:active { transform: translateY(1px); } .ab-icon-btn--sm { --ab-s: 36px; } .ab-icon-btn--sm svg { width: 18px; height: 18px; } /* filled: orange with the offset; for scroll-to-top, a floating send button */ .ab-icon-btn--filled { background: var(--arkiteque-orange); color: var(--ab-fg-on-colour); box-shadow: 4px -4px 0 0 var(--arkiteque-blue); } .ab-icon-btn--filled:hover { background: var(--arkiteque-orange); transform: translate(1px, -1px); box-shadow: 3px -3px 0 0 var(--arkiteque-blue); } .ab-icon-btn--filled:active { transform: translate(4px, -4px); box-shadow: 0 0 0 0 var(--arkiteque-blue); } .ab-icon-btn:disabled { opacity: .4; cursor: not-allowed; background: transparent; } /* 5 · Menu toggle: three bars become a cross (set aria-expanded) ---------- */ .ab-menu-btn { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--ab-ink); } .ab-menu-btn span, .ab-menu-btn::before, .ab-menu-btn::after { content: ""; position: absolute; left: 11px; width: 22px; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease, top .2s ease; } .ab-menu-btn::before { top: 15px; } .ab-menu-btn span { top: 21px; } .ab-menu-btn::after { top: 27px; } .ab-menu-btn[aria-expanded="true"]::before { top: 21px; transform: rotate(45deg); } .ab-menu-btn[aria-expanded="true"] span { opacity: 0; } .ab-menu-btn[aria-expanded="true"]::after { top: 21px; transform: rotate(-45deg); } /* 6 · Send button: forms. data-state = idle | sending | sent | error ------- */ .ab-send[data-state="sending"] { color: transparent; pointer-events: none; } .ab-send[data-state="sending"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 6px; height: 6px; background: var(--ab-fg-on-colour); box-shadow: -12px 0 0 var(--ab-fg-on-colour), 12px 0 0 var(--ab-fg-on-colour); animation: ab-busy 1s infinite; } .ab-send[data-state="sent"] { --ab-bg: var(--arkiteque-brown); --ab-fg: var(--arkiteque-offwhite); --ab-o: 0px; pointer-events: none; } .ab-send[data-state="error"] { --ab-bg: var(--arkiteque-error); --ab-fg: #FFFFFF; --ab-shadow: var(--arkiteque-orange); } .ab-send-msg { margin: 10px 0 0; font: 400 13px/1.4 var(--arkiteque-font-sans); min-height: 1.4em; color: var(--arkiteque-text-muted); } .ab-send-msg[data-tone="success"] { color: var(--arkiteque-success); } .ab-send-msg[data-tone="error"] { color: var(--arkiteque-error); } /* 7 · Copy button: icon or small button; .is-copied for 2 s after copying - */ .ab-copy.is-copied { background: var(--arkiteque-brown); color: var(--arkiteque-offwhite); } /* 8 · Upload button: a