/* Sovie Web canonical stylesheet. Sections retain the established cascade and motion.
   Edit this file, then run node scripts/build-static.mjs. */

/* ===== style.css ===== */
@font-face{font-family:Manrope;src:url('assets/manrope-400.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/manrope-600.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/manrope-800.ttf') format('truetype');font-style:normal;font-weight:800;font-display:swap}
@font-face{font-family:Editorial;src:url('assets/dm-serif-display.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Condensed;src:url('assets/barlow-condensed-700.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--ink:#11141a;--ink2:#1a1e27;--paper:#eeede7;--muted:#a6aab5;--blue:#5575ff;--line:rgba(238,237,231,.16);--max:1392px;--pad:clamp(24px,5vw,88px);color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--ink);color:var(--paper);font-family:Manrope,Arial,sans-serif;-webkit-font-smoothing:antialiased}body.dialog-open{overflow:hidden}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{color:inherit;cursor:pointer}button:disabled{cursor:wait}button{border:0}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:5px}input:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:4px}img{display:block;max-width:100%;height:auto}h1,h2,h3,h4,p{margin:0}button,select{touch-action:manipulation}[hidden]{display:none!important}::selection{background:var(--blue);color:white}h2{font-size:clamp(44px,5vw,76px);line-height:1.05;font-weight:600;letter-spacing:-.065em}h2 em,h3 em{font-family:Editorial,Georgia,serif;font-weight:400;letter-spacing:-.035em}em{font-style:normal}.skip-link{position:fixed;z-index:1000;top:-100px;left:20px;padding:15px;background:var(--paper);color:var(--ink)}.skip-link:focus{top:12px}.eyebrow{font-size:10px;letter-spacing:.15em;font-weight:600;line-height:1.6;display:flex;align-items:center;gap:12px}.dark-eyebrow{color:#52565d}.tiny-rule{width:23px;height:1px;background:var(--blue)}.blue-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue);flex-shrink:0}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;min-height:58px;padding:17px 24px;font-size:12px;font-weight:600;border-radius:3px;transition:background .2s,transform .2s,color .2s}.button span:last-child{font-size:23px;font-weight:400;line-height:1}.button:hover{transform:translateY(-3px)}.button-ivory{background:var(--paper);color:var(--ink)}.button-ivory:hover{background:#fff}.button-ink{background:var(--ink);color:var(--paper)}.button-ink:hover{background:#29303f}.button-blue{background:#385ce8;color:#fff}.button-blue:hover{background:#284bcb}.text-link{display:inline-flex;gap:15px;align-items:center;font-size:12px;font-weight:600;padding:13px 0;border-bottom:1px solid var(--line)}.text-link span{font-size:19px;color:var(--blue)}.section-light{background:var(--paper);color:var(--ink);color-scheme:light}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:52px}.section-heading .eyebrow{margin-bottom:24px}.section-heading>p{font-size:14px;line-height:1.8;max-width:290px;margin-bottom:6px}.subtle{display:block;color:#767b87;font-size:12px;margin-top:8px}.mobile-break{display:none}
/* Navigation */
.site-header{position:fixed;z-index:50;left:0;right:0;top:0;height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);border-bottom:1px solid var(--line);background:rgba(17,20,26,.93);backdrop-filter:blur(18px)}.brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}.brand svg{width:34px;height:34px;fill:none;stroke:var(--paper);stroke-width:5.5}.brand svg .brand-accent{stroke:var(--blue)}.brand>span{font-size:18px;font-weight:800;letter-spacing:-.05em}.brand-web{font-weight:400;color:#a8aebb;margin-left:3px}.desktop-nav{display:flex;gap:30px;margin-left:45px}.desktop-nav a{font-size:10px;color:#c5c8cf;transition:color .2s}.desktop-nav a:hover{color:white}.header-actions{display:flex;align-items:center;gap:20px}.header-cta{font-size:11px;display:inline-flex;align-items:center;gap:28px;border:1px solid #575c68;padding:12px 16px;border-radius:3px}.header-cta:hover{background:var(--paper);color:var(--ink)}.header-cta span{font-size:18px;line-height:1}.motion-toggle{width:28px;height:36px;background:none;padding:3px;color:#acb1be}.motion-toggle svg{width:100%;fill:none;stroke:currentColor;stroke-width:1.4}.motion-toggle[aria-pressed=true]{color:var(--blue)}.menu-toggle{display:none}.mobile-nav{position:absolute;top:87px;left:0;right:0;background:var(--ink);padding:24px var(--pad);border-bottom:1px solid var(--line)}.mobile-nav a{display:block;font-size:22px;padding:14px 0}.reading-progress{position:absolute;bottom:-1px;left:0;width:100%;height:2px}.reading-progress span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 0;background:var(--blue)}
/* The scroll-built website */
.experience{height:330svh;position:relative}.story-sticky{height:100svh;min-height:690px;position:sticky;top:0;overflow:hidden;padding:124px var(--pad) 30px;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate}.hero-grid{position:absolute;z-index:-2;inset:0;background-image:linear-gradient(rgba(157,169,198,.036) 1px,transparent 1px),linear-gradient(90deg,rgba(157,169,198,.036) 1px,transparent 1px);background-size:88px 88px;mask-image:linear-gradient(90deg,transparent,#000 65%)}.story-sticky:after{content:'';position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 83% 60%,rgba(49,65,113,.18),transparent 52%);pointer-events:none}.hero-topline{display:flex;justify-content:space-between;gap:20px;max-width:var(--max);width:100%;margin:0 auto;font-size:9px;letter-spacing:.12em;color:#898f9c}.hero-topline>span{display:flex;align-items:center;gap:10px}.cross{position:absolute;color:#49505e;font-size:16px;font-weight:400}.cross-a{top:110px;right:32px}.cross-b{left:30px;bottom:95px}.story-layout{display:grid;grid-template-columns:.93fr 1.25fr;gap:4vw;align-items:center;width:100%;max-width:var(--max);margin:25px auto}.story-copy{position:relative;min-height:440px;z-index:5}.story-panel{position:absolute;left:0;top:50%;width:100%;opacity:0;transform:translateY(calc(-50% + 22px));pointer-events:none;transition:opacity .4s,transform .6s}.story-panel.is-active{opacity:1;transform:translateY(-50%);pointer-events:auto}.story-copy .eyebrow{margin-bottom:24px;font-size:9px}.story-copy h1,.story-copy h2{font-family:Manrope,sans-serif;font-weight:600;font-size:clamp(64px,7.1vw,112px);line-height:.98;letter-spacing:-.072em}.story-copy h1 em,.story-copy h2 em{font-family:Editorial,Georgia,serif;letter-spacing:-.035em;font-weight:400;color:#c7d0ee}.hero-description{font-size:14px;line-height:1.8;max-width:310px;color:#adb2be;margin-top:25px}.hero-buttons{display:flex;gap:23px;align-items:center;flex-wrap:wrap;margin-top:28px}.hero-buttons .button{min-height:53px;padding:15px 20px;gap:25px}.hero-buttons .text-link{font-size:10px;border:0}.story-panel>.button,.story-panel>.text-link{margin-top:25px}.website-scene{position:relative;perspective:1500px;min-width:0;max-width:730px;padding:30px 0 35px;transform:translateX(0)}.hero-browser{border:1px solid #454b5b;border-radius:7px;box-shadow:0 35px 70px rgba(0,0,0,.6),0 0 0 5px rgba(255,255,255,.025);overflow:hidden;background:#dedcd2;transform:translate3d(var(--device-x,0px),var(--device-y,0px),0) rotateX(var(--rotate-x,8deg)) rotateY(var(--rotate-y,-15deg)) rotateZ(var(--rotate-z,3deg)) scale(var(--device-scale,.96));transform-style:preserve-3d;will-change:transform;position:relative;z-index:3}.browser-chrome{height:30px;background:#20242e;display:flex;align-items:center;justify-content:space-between;padding:0 12px;gap:20px;color:#8b92a1}.browser-dots{display:flex;gap:4px}.browser-dots i{width:4px;height:4px;border-radius:50%;background:#667082}.browser-address{font-size:6px;letter-spacing:.12em}.browser-expand{font-size:13px}.foundation-site{position:relative;color:#252821;background:#d9d9ce;overflow:hidden}.foundation-header{display:flex;align-items:center;gap:8px;padding:12px 24px;height:67px}.foundation-logo{font-family:Editorial,serif;font-size:37px;line-height:1}.foundation-period{color:#4e6052}.foundation-header>span:nth-child(2){font-size:8px;font-weight:800;line-height:1.25;letter-spacing:.04em}.foundation-header small{font-size:5px;letter-spacing:.1em;font-weight:600}.foundation-nav{margin-left:auto;display:flex;gap:18px;font-size:6px;align-items:center}.foundation-nav-cta{padding:8px 12px;background:#26332b;color:#eee}.foundation-hero{position:relative;height:285px;background:#49544d;overflow:hidden}.foundation-hero img{width:100%;height:100%;object-fit:cover;transform:scale(var(--photo-scale,1.12));filter:saturate(.65);object-position:50% 55%}.foundation-image-wash{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,25,23,.6),rgba(17,23,21,.1))}.foundation-hero-copy{position:absolute;inset:26px 28px;color:#eeede4}.foundation-eyebrow{font-size:6px;letter-spacing:.16em}.foundation-hero-copy p{font-family:Editorial,Georgia,serif;font-size:49px;line-height:1.03;letter-spacing:-.04em;margin:27px 0 17px}.foundation-link{display:flex;align-items:center;gap:35px;font-size:6px;letter-spacing:.08em}.foundation-link b{font-size:20px;font-weight:400}.foundation-photo-label{position:absolute;right:13px;bottom:14px;writing-mode:vertical-rl;font-size:5px;letter-spacing:.15em;color:#fff}.foundation-bottom{padding:25px 27px;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:100px}.foundation-bottom>span:first-child{font-family:Editorial,serif;font-size:23px;line-height:1.06}.foundation-bottom p{font-size:7px;line-height:1.9;color:#64675e}.foundation-arrow{font-size:34px}.wireframe-plane{position:absolute;inset:5px 30px 10px -25px;border:1px solid rgba(105,129,219,.45);transform:translate3d(var(--wire-x,-20px),var(--wire-y,-10px),0) rotateX(8deg) rotateY(-15deg) rotateZ(-6deg);z-index:1;opacity:var(--wire-opacity,.65);background-image:linear-gradient(rgba(107,125,191,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(107,125,191,.1) 1px,transparent 1px);background-size:28px 28px}.wireframe-plane:before,.wireframe-plane:after{content:'+';position:absolute;font-size:20px;color:#6c86d8;top:-15px;left:-8px}.wireframe-plane:after{top:auto;left:auto;bottom:-15px;right:-8px}.wireframe-plane>div{margin:25px;border:1px solid rgba(92,111,179,.4);height:34px}.wireframe-plane>div:nth-child(2){height:210px}.scene-orbit{position:absolute;left:-5%;top:-9%;width:110%;height:120%;border:1px solid rgba(174,187,227,.08);border-radius:50%;transform:rotate(-20deg)}.scene-orbit:after{content:'';position:absolute;inset:35px;border:1px dashed rgba(174,187,227,.08);border-radius:50%}.scene-measure{position:absolute;right:0;top:-10px;width:70%;border-top:1px solid #353d50;text-align:center;z-index:1}.scene-measure:before,.scene-measure:after{content:'';height:7px;width:1px;background:#687083;position:absolute;top:-4px;left:0}.scene-measure:after{right:0;left:auto}.scene-measure span{font-size:6px;letter-spacing:.18em;color:#788299;position:relative;top:-17px;background:var(--ink);padding:0 12px}.blueprint-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,27,49,.96),rgba(17,27,49,.8));opacity:var(--blueprint-opacity,0);pointer-events:none;padding:25px;color:#a4b8fa;background-image:linear-gradient(rgba(128,153,229,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(128,153,229,.09) 1px,transparent 1px),linear-gradient(#14203b,#14203b);background-size:24px 24px,24px 24px,100% 100%}.blueprint-overlay>span{font-size:7px;letter-spacing:.15em}.skeleton-title{width:60%;height:45px;margin:30px 0 14px;border:1px solid #6176b7}.skeleton-line{width:40%;height:8px;border:1px solid #41578e;margin:8px 0}.skeleton-line.short{width:25%}.skeleton-image{border:1px solid #6176b7;height:154px;margin-top:22px;display:flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(25deg,transparent 49.8%,#334672 50%,transparent 50.2%),linear-gradient(-25deg,transparent 49.8%,#334672 50%,transparent 50.2%)}.skeleton-image span{font-size:7px;letter-spacing:.16em;background:#14203b;padding:8px}.skeleton-image i{position:absolute;bottom:7px;right:9px;font-style:normal}.skeleton-bottom{display:flex;gap:12px;margin-top:22px}.skeleton-bottom i{border:1px solid #41578e;width:33%;height:42px}.scene-tag{position:absolute;z-index:4;bottom:12px;left:-14px;background:var(--paper);color:var(--ink);padding:15px 17px;display:flex;align-items:center;gap:10px;box-shadow:0 5px 20px #0004;transform:translateY(var(--tag-y,0px));opacity:var(--tag-opacity,1)}.scene-tag>span{font-size:10px;font-weight:600}.scene-tag .tag-symbol{font-size:22px;margin-left:18px;font-weight:400}.inquiry-float{position:absolute;z-index:6;right:-8px;bottom:-12px;display:flex;align-items:center;gap:15px;background:var(--blue);padding:23px 27px;box-shadow:0 20px 50px #0006;opacity:var(--inquiry-opacity,0);transform:translateY(var(--inquiry-y,35px));max-width:90%;pointer-events:none}.inquiry-icon{font-size:35px;font-weight:400}.inquiry-float small{display:block;font-size:6px;letter-spacing:.15em;color:#e1e6ff;margin-bottom:8px}.inquiry-float strong{display:block;font-size:13px;margin-bottom:4px}.inquiry-float div>span{font-size:9px;color:#ebeeff}.scene-caption{position:absolute;right:6px;bottom:-11px;color:#696f7c;letter-spacing:.12em;font-size:6px}.story-bottom{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:var(--max);margin:0 auto;border-top:1px solid var(--line);padding-top:21px;gap:30px}.scroll-prompt{display:flex;align-items:center;gap:12px;letter-spacing:.12em;color:#8b92a1;font-size:7px}.scroll-icon{height:24px;width:15px;border:1px solid #636b7d;border-radius:9px;position:relative}.scroll-icon:after{content:'';position:absolute;height:5px;width:1px;background:#a6b4de;left:6px;top:5px;animation:scroll-cue 2.5s infinite}@keyframes scroll-cue{0%,100%{transform:translateY(0);opacity:.4}55%{transform:translateY(6px);opacity:1}}.story-chapters{display:flex;gap:35px}.story-chapters button{background:transparent;color:#757d8e;padding:8px 0;font-size:9px;display:flex;align-items:center;gap:8px;transition:color .25s}.story-chapters button span{font-size:7px;color:#626a7d}.story-chapters button.is-active{color:var(--paper)}.story-chapters button.is-active span{color:#91a7ff}.story-counter{font-size:8px;letter-spacing:.12em;color:#969eaf}
/* A change of pace */
.intro-strip{padding:40px var(--pad);display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);gap:30px}.intro-strip p{font-size:24px;letter-spacing:-.045em}.intro-strip p span{color:#8ca2ff}.intro-strip>div{display:flex;flex-direction:column;gap:7px;font-size:7px;letter-spacing:.12em;color:#8c94a5}.designs{padding:105px var(--pad) 80px}.design-tabs{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid #bdbfb9;border-bottom:1px solid #bdbfb9;margin-bottom:26px}.design-tabs button{position:relative;background:transparent;color:#777a77;text-align:left;display:flex;align-items:center;gap:15px;padding:21px 20px;font-size:12px;font-weight:600;border-right:1px solid #c8cac3}.design-tabs button:first-child{padding-left:0}.design-tabs button:last-child{border-right:0}.design-tabs button[aria-selected=true]{color:var(--ink)}.design-tabs button:after{position:absolute;content:'';height:3px;bottom:-1px;left:0;right:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s}.design-tabs button[aria-selected=true]:after{transform:scaleX(1)}.tab-number{font-size:8px;font-weight:400;color:#797e7b}.tab-arrow{margin-left:auto;font-size:20px;opacity:0}.design-tabs button[aria-selected=true] .tab-arrow{opacity:1}.design-stage{border:1px solid #c6c7be;overflow:hidden;position:relative}.design-panel{animation:concept-in .5s ease;min-height:560px}.concept-top{display:flex;align-items:center;justify-content:space-between;padding:26px 42px;height:85px;gap:20px}.concept-top>div{display:flex;gap:28px;font-size:6px;letter-spacing:.12em}.concept-label{font-size:7px;letter-spacing:.18em}.hart{background:#e9e6d9;color:#303a30}.hart-brand{font-family:Editorial,serif;font-size:34px;letter-spacing:-.07em}.hart-brand span{color:#6d7767;margin-left:5px}.hart-layout{position:relative;display:grid;grid-template-columns:.9fr 1.25fr;min-height:435px;padding:8px 42px 33px;gap:20px}.hart-text{padding:23px 5px 20px 20px}.hart-text h3{font-family:Editorial,serif;font-weight:400;line-height:1;letter-spacing:-.04em;font-size:69px;margin-top:24px}.hart-text h3 em{color:#88917c}.hart-text p{font-size:9px;line-height:1.8;color:#636b5f;margin-top:19px}.hart-discover{display:inline-flex;gap:38px;align-items:center;font-size:6px;letter-spacing:.08em;border-bottom:1px solid #9ca38e;padding:17px 0 8px}.hart-discover>span{font-size:22px}.hart-photo{position:relative;overflow:hidden}.hart-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.hart-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 75%,#0006)}.hart-photo>span{position:absolute;left:22px;bottom:19px;color:white;letter-spacing:.14em;font-size:6px;z-index:1}.hart-side{position:absolute;right:16px;top:5%;writing-mode:vertical-rl;font-size:5px;letter-spacing:.17em}.hart-footer{display:flex;justify-content:space-around;gap:20px;border-top:1px solid #c8cdbe;padding:19px;font-size:6px;letter-spacing:.18em}.current{color:#e9ff4d;background:#242621}.current .concept-top{border-bottom:1px solid #e8ff4d38}.current-brand{font-family:Condensed,sans-serif;font-weight:700;font-size:30px;letter-spacing:-.015em;display:flex;align-items:center;gap:5px}.bolt{font-size:45px;line-height:1}.current-sub{font-family:Manrope,sans-serif;font-size:6px;letter-spacing:.2em;writing-mode:vertical-rl;margin-left:4px}.current-layout{display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden}.current-copy{padding:28px 50px}.current-kicker{font-size:6px;letter-spacing:.13em}.current-copy h3{font-family:Condensed,sans-serif;font-size:108px;line-height:.82;margin-top:26px;letter-spacing:-.015em}.current-copy h3>span{-webkit-text-stroke:1px #e9ff4d;color:transparent}.current-cta{margin-top:24px;font-size:7px;letter-spacing:.08em;display:inline-flex;align-items:center;gap:42px;padding:13px 18px;background:#e9ff4d;color:#242621}.current-cta>span{font-size:20px}.circuit-art{position:relative;background:#e9ff4d;color:#242621;overflow:hidden;margin:24px 30px 24px 0}.circuit-art svg{width:100%;height:100%;position:absolute;inset:0;transform:scale(1.15)}.circuit-note{position:absolute;bottom:14px;left:19px;font-size:6px;letter-spacing:.13em;background:#e9ff4d;padding:5px}.current-services{border-top:1px solid #e9ff4d38;display:flex;justify-content:space-around;gap:20px;padding:22px 30px;font-size:6px;letter-spacing:.07em}.current-services b{font-weight:400;margin-right:15px;color:#b3bf51}.grain{background:#392b28;color:#e8dfcc}.grain-brand{font-family:Editorial,serif;font-size:40px;letter-spacing:-.07em;display:flex;align-items:center;gap:12px}.grain-brand>span{font-family:Manrope,sans-serif;font-size:6px;letter-spacing:.3em;writing-mode:vertical-rl}.grain .concept-top{border-bottom:1px solid #e8dfcc35}.grain-layout{display:grid;grid-template-columns:1.1fr 1fr;min-height:475px}.grain-photo{position:relative;overflow:hidden}.grain-photo img{width:100%;height:100%;position:absolute;object-fit:cover}.grain-photo>span{position:absolute;left:20px;bottom:20px;color:#fff;font-size:6px;letter-spacing:.15em;text-shadow:0 1px 3px #000}.grain-copy{padding:42px 40px;display:flex;flex-direction:column;align-items:flex-start}.grain-copy h3{font-family:Editorial,serif;font-weight:400;font-size:50px;line-height:1.06;letter-spacing:-.04em;margin:28px 0 20px}.grain-copy h3 em{color:#a88b76}.grain-copy p{font-size:9px;line-height:1.8;color:#c4b4a7}.grain-discover{display:flex;gap:30px;align-items:center;margin-top:20px;padding-bottom:7px;border-bottom:1px solid #a38c76;font-size:6px;letter-spacing:.1em}.grain-discover>span{font-size:22px}.grain-index{margin-top:auto;padding-top:35px;font-size:6px;letter-spacing:.13em;color:#a28c7a}.concept-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 0;border-bottom:1px solid #c4c6c0}.concept-meta>div{display:flex;align-items:center;gap:24px}.concept-status{border:1px solid #a5aaa3;font-size:6px;letter-spacing:.1em;padding:6px 8px;white-space:nowrap}.concept-meta p{font-size:11px;color:#575e56}.concept-open{display:flex;gap:24px;align-items:center;background:none;color:var(--ink);font-size:10px;font-weight:600;padding:10px 0}.concept-open>span{font-size:22px}.concept-disclaimer{font-size:9px;color:#6b716a;margin-top:17px;line-height:1.7}@keyframes concept-in{from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* Intent, demonstrated */
.thinking{padding:110px var(--pad)}.thinking .section-heading{margin-bottom:65px}.thinking .section-heading>p{color:#abb1be}.thinking-layout{display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:start}.question-list{padding-top:10px}.question{background:none;display:flex;align-items:center;gap:22px;text-align:left;width:100%;padding:24px 0;border-bottom:1px solid var(--line);color:#9da4b3}.question:first-child{border-top:1px solid var(--line)}.question>span{font-size:8px;color:#737e96}.question strong{font-size:16px;font-weight:400;letter-spacing:-.025em}.question i{font-style:normal;font-size:23px;margin-left:auto;transform:rotate(45deg);transition:transform .3s;color:#727d94}.question.is-active{color:#fff}.question.is-active>span{color:#91a7ff}.question.is-active i{color:var(--blue);transform:rotate(0)}.question-answer{padding:27px 0 10px;min-height:130px}.answer-label{font-size:8px;letter-spacing:.13em;color:#99acff}.question-answer p{color:#9fa6b5;font-size:12px;line-height:1.9;max-width:380px;margin-top:13px}.anatomy{border:1px solid #464e60;border-radius:5px;padding:0;background:#1e2431;box-shadow:0 30px 50px #0003;transform:rotate(1.5deg)}.anatomy-chrome{height:32px;display:flex;align-items:center;gap:4px;padding:0 12px}.anatomy-chrome i{width:4px;height:4px;border-radius:50%;background:#657088}.anatomy-chrome>span{font-size:5px;letter-spacing:.12em;margin-left:auto;color:#8995ac}.anatomy-page{background:#e0e2da;color:#3b4238;padding:22px}.anatomy-nav{display:flex;align-items:center;justify-content:space-between;padding-bottom:17px;border-bottom:1px solid #bdc3b6;gap:10px}.anatomy-nav strong{font-size:10px;font-weight:800;letter-spacing:-.04em}.anatomy-nav strong span{color:#859677;font-size:7px;margin-left:3px}.anatomy-nav>span{font-size:4px;letter-spacing:.07em}.anatomy-intro{padding:24px 0}.anatomy-intro>span{font-size:5px;letter-spacing:.13em}.anatomy-intro h3{font-family:Editorial,serif;font-size:35px;font-weight:400;line-height:1.03;letter-spacing:-.03em;margin-top:10px}.anatomy-target{position:relative;transition:box-shadow .25s,background .25s;isolation:isolate}.anatomy-target:after{content:'';position:absolute;inset:-4px;border:2px solid var(--blue);box-shadow:0 0 0 4px #5575ff20;pointer-events:none;opacity:0;transition:opacity .25s}.highlight-label{position:absolute;top:-19px;left:-4px;z-index:2;background:var(--blue);padding:4px 6px;font-size:5px;letter-spacing:.09em;color:white;opacity:0;transition:opacity .25s}.anatomy-services{display:flex;gap:5px;padding-bottom:12px;margin-bottom:11px}.anatomy-services>span:not(.highlight-label){font-size:5px;background:#ced3c4;padding:7px 9px}.anatomy-work{display:grid;grid-template-columns:1fr 1fr;gap:15px;align-items:center;margin-bottom:15px;min-height:100px}.anatomy-work img{height:100px;width:100%;object-fit:cover}.anatomy-work>div{font-family:Editorial,serif;font-size:22px;line-height:1.05}.anatomy-work>div>span{display:block;font-family:Manrope,sans-serif;font-size:4px;letter-spacing:.1em;margin-top:15px}.anatomy-area,.anatomy-trust{display:flex;gap:10px;align-items:center;border-top:1px solid #c1c7ba;padding:13px 0}.map-pin,.quote-mark{font-size:25px;color:#5b6e4e}.anatomy-area strong,.anatomy-trust strong{display:block;font-size:7px;font-weight:600}.anatomy-area div>span,.anatomy-trust div>span{display:block;font-size:5px;color:#727b68;margin-top:5px}.anatomy-contact{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#3b4834;color:#e6eadf;padding:15px 12px;margin-top:5px}.anatomy-contact strong{font-size:8px;font-weight:400;font-family:Editorial,serif}.anatomy-contact>span:not(.highlight-label){font-size:4px;padding:6px;border:1px solid #afbc9f}.anatomy[data-focus="0"] [data-target="0"]:after,.anatomy[data-focus="1"] [data-target="1"]:after,.anatomy[data-focus="2"] [data-target="2"]:after,.anatomy[data-focus="3"] [data-target="3"]:after,.anatomy[data-focus="4"] [data-target="4"]:after,.anatomy[data-focus="0"] [data-target="0"] .highlight-label,.anatomy[data-focus="1"] [data-target="1"] .highlight-label,.anatomy[data-focus="2"] [data-target="2"] .highlight-label,.anatomy[data-focus="3"] [data-target="3"] .highlight-label,.anatomy[data-focus="4"] [data-target="4"] .highlight-label{opacity:1}
/* Grounded in the trade */
.approach{padding:100px var(--pad) 85px}.approach-top{display:grid;grid-template-columns:.85fr 1fr;gap:10vw;align-items:center}.approach-image{position:relative;aspect-ratio:4/5;overflow:hidden}.approach-image img{height:100%;width:100%;object-fit:cover;filter:saturate(.4);object-position:62% 50%}.approach-image:after{position:absolute;content:'';inset:0;background:linear-gradient(transparent 55%,#131810bb)}.approach-image>span{position:absolute;bottom:26px;left:26px;z-index:1;color:#e4e8dd;font-size:7px;letter-spacing:.1em;line-height:1.8}.approach-copy .eyebrow{font-size:8px;margin-bottom:28px}.approach-copy h2{margin-bottom:30px}.approach-copy>p:not(.eyebrow){font-size:13px;line-height:1.9;color:#656960;margin-bottom:18px;max-width:390px}.approach-sign{display:inline-block;font-size:7px;letter-spacing:.1em;margin-top:20px;padding-top:16px;border-top:1px solid #c5c8bf;color:#57604f}.process-heading{margin-top:95px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:24px;border-bottom:1px solid #bfc3ba}.process-heading h3{font-size:24px;letter-spacing:-.04em;font-weight:400}.process-heading>span{font-size:7px;letter-spacing:.1em;color:#70796c}.process-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:38px;margin-top:30px}.process-number{display:flex;justify-content:space-between;font-size:12px;color:#6f7767}.process-number>span{font-size:20px;color:#949b8c}.process-grid h4{font-size:18px;font-weight:600;letter-spacing:-.04em;margin:30px 0 12px}.process-grid p{font-size:11px;line-height:1.9;color:#6b7264;max-width:300px}
/* A clear offer */
.pricing{padding:110px var(--pad) 90px}.pricing .section-heading>p{color:#9ea6b5}.offer-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:22px}.main-offer{color:var(--ink);background:var(--paper);padding:38px 38px 28px}.offer-top{display:flex;justify-content:space-between;gap:20px;align-items:center}.offer-top .eyebrow{font-size:8px;color:#535d50}.offer-tag{font-size:6px;letter-spacing:.05em;border:1px solid #adb4a7;padding:6px 8px}.price{font-size:84px;font-weight:600;letter-spacing:-.075em;margin-top:22px;display:flex;align-items:flex-end;gap:19px;line-height:1.1}.price>span{font-size:9px;letter-spacing:0;font-weight:400;color:#777f6f;margin-bottom:10px}.offer-description{font-size:15px;line-height:1.6;letter-spacing:-.02em;margin:20px 0 28px}.page-list{display:flex;gap:15px;border-top:1px solid #c6cbc0;border-bottom:1px solid #c6cbc0;padding:16px 0;font-size:6px;letter-spacing:.07em;flex-wrap:wrap}.offer-features{display:grid;grid-template-columns:1fr 1fr;gap:15px;list-style:none;padding:27px 0 32px;margin:0;border-bottom:1px solid #c6cbc0}.offer-features li{font-size:9px;display:flex;align-items:flex-start;gap:8px;line-height:1.7}.offer-features li:before{content:none}.offer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:24px}.offer-bottom strong{font-size:8px;font-weight:600}.offer-bottom p>span{display:block;font-size:7px;color:#78816f;margin-top:7px}.offer-bottom .button{font-size:9px;min-height:48px;padding:13px 16px;gap:22px}.care-offer{background:#243a7b;padding:38px;display:flex;flex-direction:column;justify-content:space-between;gap:35px}.care-offer .eyebrow{font-size:7px;color:#b1c1f4;margin-bottom:30px}.care-offer h3{font-size:29px;letter-spacing:-.055em;font-weight:400;line-height:1.15}.care-offer h3 em{color:#aec1ff}.care-price{font-size:54px;letter-spacing:-.055em;margin:24px 0 8px;line-height:1}.care-price>span{font-size:10px;letter-spacing:0;color:#c0cef6;margin-left:8px}.care-offer>div>p:not(.eyebrow){font-size:10px;color:#bfcbeb}.care-offer ul{list-style:none;padding:22px 0 0;margin:0;font-size:10px;line-height:2.4;color:#d0d9f2}.care-offer li:before{content:'+';margin-right:10px;color:#a1b5fa}.care-foot{border-top:1px solid #ffffff26;padding-top:23px}.care-foot p{font-size:11px;line-height:1.7}.care-foot>span{display:block;font-size:8px;line-height:1.8;color:#b1c1e7;margin-top:14px;max-width:270px}.faq{margin-top:55px}.faq details{border-bottom:1px solid var(--line)}.faq details:first-child{border-top:1px solid var(--line)}.faq summary{list-style:none;padding:22px 0;display:flex;justify-content:space-between;align-items:center;font-size:13px;cursor:pointer;gap:30px}.faq summary::-webkit-details-marker{display:none}.faq summary>span{font-size:20px;color:#91a6df;font-weight:400;transition:transform .2s}.faq details[open] summary>span{transform:rotate(45deg)}.faq details p{font-size:12px;line-height:1.9;color:#a1a9b9;max-width:710px;padding:0 40px 25px 0}
/* The next step */
.contact{padding:105px var(--pad) 110px;display:grid;grid-template-columns:1fr 1fr;gap:9vw}.contact-intro .eyebrow{margin-bottom:30px}.contact-intro h2{font-size:clamp(52px,5.8vw,88px);line-height:1}.contact-intro h2 em{color:#535c73}.contact-intro>p:not(.eyebrow){font-size:13px;color:#6d7467;line-height:1.8;margin:30px 0 25px}.email-link{font-size:13px;letter-spacing:-.02em;border-bottom:1px solid #a0a797;padding-bottom:6px}.contact-note{display:flex;align-items:flex-start;gap:12px;color:#7b8275;font-size:9px;line-height:1.8;margin-top:55px}.contact-note .blue-dot{margin-top:5px}.inquiry-form{padding-top:2px}.form-heading{display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:.1em;padding-bottom:25px;border-bottom:1px solid #bfc5b9;margin-bottom:27px}.form-heading>span:last-child{font-size:24px;line-height:1;font-weight:400}.inquiry-form label{display:block;font-size:9px;font-weight:600;position:relative;color:#444d3e}.inquiry-form label>span:not(.optional){color:#77816f}.inquiry-form input:not([type=radio]),.inquiry-form textarea{background:transparent;border:0;border-bottom:1px solid #c5cbbf;border-radius:0;resize:vertical;min-height:44px;width:100%;padding:12px 0;color:var(--ink);font-size:12px;font-weight:400;margin:2px 0 22px;outline-color:var(--blue)}.inquiry-form input::placeholder,.inquiry-form textarea::placeholder{color:#9bA291;opacity:1}.inquiry-form textarea{line-height:1.7;min-height:95px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}.project-type{margin:0 0 23px;padding:0;border:0;display:flex;gap:7px;flex-wrap:wrap}.project-type legend{font-size:9px;font-weight:600;color:#444d3e;padding:0;margin-bottom:12px}.project-type label{display:inline-flex;position:relative;cursor:pointer}.project-type input{position:absolute;opacity:0;width:1px;height:1px}.project-type label>span{font-size:8px;font-weight:400;border:1px solid #bfc6b7;padding:9px 12px;transition:background .2s,color .2s}.project-type input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}.project-type input:focus-visible+span{outline:3px solid var(--blue);outline-offset:3px}.optional{font-size:6px;letter-spacing:.1em;color:#8c9584;font-weight:400;margin-left:5px}.honeypot{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}.form-submit{width:100%;font-size:12px;padding:17px 20px}.form-privacy{font-size:8px;line-height:1.8;color:#7e8775;margin-top:15px;max-width:380px}.inline-button{background:none;padding:0;text-decoration:underline;text-underline-offset:3px;font:inherit;color:inherit}.form-status{margin-top:18px;padding:18px;background:#dbe6cc;border-left:3px solid #628848;font-size:12px;line-height:1.8;color:#314522}.form-status.is-error{background:#f2ded6;border-left-color:#b85b38;color:#773a25}.form-fallback{font-size:11px;margin-top:12px;text-decoration:underline}.footer{padding:40px var(--pad) 25px;overflow:hidden}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:30px}.footer-top>p{font-size:9px;line-height:1.9;color:#969ead}.back-top{display:flex;gap:24px;align-items:center;font-size:7px;letter-spacing:.12em}.back-top>span{font-size:23px;color:#adbce6}.footer-wordmark{position:relative;white-space:nowrap;font-weight:800;font-size:clamp(80px,17.2vw,290px);line-height:1.2;letter-spacing:-.08em;margin-top:40px;display:flex;align-items:flex-start}.footer-wordmark>span{color:#7b8aa9;font-weight:400}.footer-wordmark>i{font-family:Manrope,sans-serif;font-size:14px;font-style:normal;margin:3vw 0 0 1.5vw;font-weight:400;color:#929db3;letter-spacing:0}.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:24px;margin-top:12px;border-top:1px solid var(--line);font-size:6px;letter-spacing:.1em;color:#7d879b}.footer-bottom>div{display:flex;gap:20px}.footer-bottom a:hover,.footer-bottom button:hover{color:#f2f2f2}.footer-bottom .inline-button{text-decoration:none;letter-spacing:inherit}
/* Readable overlays */
dialog{border:0;background:var(--paper);color:var(--ink);padding:50px;max-width:700px;width:calc(100% - 40px);max-height:85svh;border-radius:4px;box-shadow:0 30px 100px #0008;color-scheme:light;overscroll-behavior:contain}dialog::backdrop{background:#070a12bd;backdrop-filter:blur(8px)}.dialog-close{position:absolute;right:17px;top:12px;font-size:30px;font-weight:400;line-height:1;background:none;color:#545e4d;padding:6px}.concept-dialog h2,.privacy-dialog h2{font-size:45px;margin:20px 0;letter-spacing:-.05em}.concept-dialog>p:not(.eyebrow),.privacy-dialog>p:not(.eyebrow){font-size:13px;line-height:1.9;color:#666f5d;margin-bottom:18px}.concept-dialog-detail{margin:25px 0;border-top:1px solid #bfc6b6}.direction-point{display:grid;grid-template-columns:100px 1fr;gap:25px;padding:18px 0;border-bottom:1px solid #c7cdbf}.direction-point strong{font-size:10px;font-weight:600}.direction-point p{font-size:12px;line-height:1.8;color:#656f5b}.concept-dialog .dialog-small{font-size:10px!important}.concept-dialog .button{font-size:11px}.privacy-dialog a{text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
/* Reveal content without holding it hostage to scripts */
@media(prefers-reduced-motion:no-preference){.js-motion .section-heading,.js-motion .approach-top,.js-motion .process-grid,.js-motion .offer-grid,.js-motion .contact-intro{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .8s}.js-motion .is-visible{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){.story-layout{gap:6vw}.story-copy{min-height:500px}.foundation-hero{height:330px}.foundation-header{height:75px}.foundation-hero-copy p{font-size:59px}.foundation-bottom{min-height:120px}.foundation-bottom>span:first-child{font-size:29px}.story-bottom{padding-top:25px}.hero-description{font-size:16px;max-width:360px}}
@media(max-width:1150px){.desktop-nav{gap:20px;margin-left:0}.header-actions{gap:15px}.story-layout{grid-template-columns:.9fr 1.1fr;gap:30px}.story-copy h1,.story-copy h2{font-size:clamp(62px,7.3vw,86px)}.story-copy{min-height:410px}.hero-buttons{gap:12px}.hero-buttons .text-link{font-size:9px}.foundation-header{padding:10px 16px;height:58px}.foundation-nav{gap:12px;font-size:5px}.foundation-hero{height:260px}.foundation-hero-copy p{font-size:42px}.foundation-bottom{padding:20px;min-height:90px}.foundation-bottom>span:first-child{font-size:20px}.story-chapters{gap:22px}.scroll-prompt{font-size:6px}.scene-tag{left:-8px;padding:12px}.story-counter{display:none}.hart-text h3{font-size:63px}.grain-copy h3{font-size:44px}.question strong{font-size:14px}.question{gap:14px}.thinking-layout{gap:6vw}.anatomy-page{padding:18px}.main-offer{padding:30px}.care-offer{padding:30px}.offer-bottom{flex-wrap:wrap}.contact{gap:6vw}.price{font-size:75px}.offer-features{gap:13px}.offer-features li{font-size:8px}.contact-intro h2{font-size:65px}.approach-copy h2{font-size:58px}}
@media(max-width:900px){.desktop-nav{display:none}.header-actions{gap:19px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;background:none;width:24px;height:32px;padding:0}.menu-toggle span{width:21px;height:1px;background:var(--paper);transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3px) rotate(-45deg)}.story-copy .eyebrow{font-size:7px}.hero-description{font-size:12px;max-width:250px}.hero-buttons{display:block}.hero-buttons .text-link{display:flex;width:max-content}.story-chapters{gap:17px}.story-chapters button{font-size:7px;gap:5px}.foundation-nav>span:not(:last-child){display:none}.foundation-header{height:54px}.foundation-hero{height:230px}.foundation-hero-copy{inset:25px 20px}.foundation-hero-copy p{font-size:36px}.foundation-bottom{padding:17px;gap:10px}.foundation-bottom>span:first-child{font-size:16px}.foundation-bottom p{font-size:6px}.foundation-arrow{font-size:24px}.scene-tag{bottom:15px;padding:10px;gap:7px}.scene-tag>span{font-size:8px}.scene-tag .tag-symbol{font-size:18px;margin-left:10px}.scene-measure{width:90%}.hero-topline{font-size:7px}.hero-coordinates{font-size:6px}.section-heading>p{font-size:12px;max-width:220px}.concept-top{padding:22px 25px}.concept-top>div{gap:15px;font-size:5px}.hart-layout{padding:8px 25px 25px;min-height:390px}.hart-text{padding:22px 5px}.hart-text h3{font-size:58px}.hart-text p{font-size:8px}.hart-side{right:9px}.design-panel{min-height:520px}.current-copy{padding:28px 32px}.current-copy h3{font-size:100px}.grain-copy{padding:35px 25px}.grain-copy h3{font-size:38px}.grain-layout{min-height:435px}.thinking-layout{gap:35px}.question strong{font-size:12px}.question{padding:22px 0;gap:10px}.question-answer p{font-size:11px}.anatomy-nav strong{font-size:8px}.anatomy-nav>span{font-size:3px}.anatomy-intro h3{font-size:30px}.anatomy-services>span:not(.highlight-label){font-size:4px;padding:6px}.anatomy-work>div{font-size:18px}.anatomy-area strong,.anatomy-trust strong{font-size:6px}.anatomy-area div>span,.anatomy-trust div>span{font-size:4px}.anatomy-contact{padding:13px 8px;gap:6px}.anatomy-contact strong{font-size:7px}.anatomy-contact>span:not(.highlight-label){font-size:3px}.approach-top{gap:7vw}.approach-copy h2{font-size:49px}.approach-copy>p:not(.eyebrow){font-size:11px}.approach-copy .eyebrow{font-size:6px}.process-heading h3{font-size:20px}.process-heading>span{font-size:6px}.process-grid{gap:25px}.process-grid h4{font-size:16px}.process-grid p{font-size:10px}.offer-grid{grid-template-columns:1.35fr 1fr;gap:15px}.main-offer,.care-offer{padding:25px}.offer-top{align-items:flex-start;flex-direction:column;gap:10px}.price{font-size:70px;flex-wrap:wrap;gap:8px}.price>span{margin-bottom:0}.offer-features{grid-template-columns:1fr;gap:10px;padding:22px 0}.offer-features li{font-size:9px}.care-offer h3{font-size:27px}.care-offer .eyebrow{font-size:6px}.contact-intro h2{font-size:54px}.form-row{gap:15px}.project-type label>span{font-size:7px;padding:8px}.contact-intro>p:not(.eyebrow){font-size:12px}.email-link{font-size:12px}.contact-note{font-size:8px}}
/* Small screens get a direct, native scrolling layout. */
@media(max-width:700px){:root{--pad:23px}html{scroll-padding-top:88px}.site-header{height:73px}.brand svg{width:29px;height:29px}.brand>span{font-size:16px}.header-actions{gap:14px}.header-cta{font-size:8px;padding:10px 11px;gap:12px}.header-cta span{font-size:15px}.motion-toggle{width:22px}.mobile-nav{top:72px}.experience{height:auto!important}.story-sticky{position:relative;height:auto;min-height:0;overflow:hidden;padding:104px var(--pad) 24px;display:block}.hero-topline{font-size:6px}.hero-coordinates{display:none!important}.story-layout{display:flex;flex-direction:column;gap:15px;margin:32px auto 28px}.story-copy{width:100%;min-height:365px}.story-panel{top:0;transform:translateY(14px)}.story-panel.is-active{transform:translateY(0)}.story-copy .eyebrow{font-size:7px;margin-bottom:20px}.story-copy h1,.story-copy h2{font-size:clamp(62px,15vw,94px);line-height:.98}.hero-description{font-size:12px;max-width:290px;margin-top:19px;line-height:1.8}.hero-buttons{display:flex;align-items:center;gap:20px;margin-top:22px}.hero-buttons .button{font-size:10px;min-height:49px;gap:25px;padding:14px 16px}.hero-buttons .text-link{font-size:8px;gap:8px}.story-panel>.button,.story-panel>.text-link{margin-top:20px}.website-scene{width:100%;max-width:460px;padding:26px 12px 35px;perspective:1200px;margin-top:18px}.hero-browser{transform:rotateX(4deg) rotateY(-8deg) rotateZ(2deg) scale(.98)!important}.wireframe-plane{inset:14px 30px 30px 10px;transform:rotate(-4deg)!important;opacity:.55!important}.scene-measure{top:8px;width:80%;right:6%}.scene-measure span{font-size:5px}.scene-orbit{inset:0;width:100%;height:100%}.foundation-header{height:54px;padding:10px 18px}.foundation-logo{font-size:30px}.foundation-hero{height:230px}.foundation-hero-copy p{font-size:40px}.foundation-hero-copy{inset:23px}.foundation-bottom{padding:17px 22px;min-height:80px}.foundation-bottom>span:first-child{font-size:20px}.foundation-bottom p{font-size:6px}.foundation-hero-copy .foundation-eyebrow{font-size:5px}.scene-tag{bottom:17px;left:3px;padding:12px 15px}.scene-tag>span{font-size:8px}.scene-caption{font-size:4px;right:15px;bottom:5px}.blueprint-overlay{opacity:0!important}.inquiry-float{right:6px;bottom:15px;padding:20px}.story-bottom{padding-top:15px;gap:10px}.scroll-prompt{display:none}.story-chapters{width:100%;justify-content:space-between;gap:6px}.story-chapters button{font-size:7px;gap:5px;min-height:30px}.cross-a{right:15px;top:97px}.cross-b{display:none}.intro-strip{padding:28px var(--pad);gap:20px}.intro-strip p{font-size:20px;line-height:1.35;max-width:230px}.intro-strip>div{font-size:5px;line-height:1.6;max-width:120px;gap:3px}.mobile-break{display:block}.section-heading{display:block;margin-bottom:32px}.section-heading .eyebrow{margin-bottom:21px;font-size:8px}.section-heading>p{font-size:12px;max-width:320px;margin-top:22px}.section-heading .subtle{font-size:10px}.section-heading h2{font-size:clamp(40px,10.5vw,62px)}.designs{padding:66px var(--pad) 50px}.design-tabs{margin-bottom:20px}.design-tabs button{padding:17px 10px;font-size:9px;gap:7px}.tab-number{font-size:6px}.tab-arrow{font-size:15px}.design-panel{min-height:0}.concept-top{padding:18px 20px;height:66px}.concept-top>div{gap:10px;font-size:4px}.concept-top>div>span:not(:last-child){display:none}.hart-brand{font-size:30px}.hart-layout{grid-template-columns:1fr 1fr;gap:8px;padding:5px 17px 20px;min-height:325px}.hart-text{padding:14px 0}.concept-label{font-size:5px;line-height:1.7}.hart-text h3{font-size:clamp(39px,9vw,58px);margin-top:21px}.hart-text p{font-size:6px;margin-top:14px}.hart-discover{font-size:4px;gap:13px;padding-top:17px}.hart-discover>span{font-size:17px}.hart-photo{margin-top:12px;margin-bottom:14px}.hart-photo img{object-position:58% center}.hart-photo>span{left:10px;bottom:12px;font-size:3px;line-height:1.8}.hart-side{right:5px;font-size:3px;top:11%}.hart-footer{gap:10px;padding:15px 10px;font-size:3px;letter-spacing:.1em}.current-brand{font-size:25px}.bolt{font-size:34px}.current-sub{font-size:4px}.current-layout{min-height:325px;grid-template-columns:1.1fr 1fr}.current-copy{padding:25px 17px}.current-kicker{font-size:4px;display:block;max-width:100px;line-height:1.7}.current-copy h3{font-size:clamp(64px,15vw,95px);margin-top:23px}.current-cta{padding:10px;font-size:4px;gap:9px;margin-top:22px;white-space:nowrap}.current-cta>span{font-size:16px}.circuit-art{margin:20px 15px 20px 0}.circuit-art svg{transform:scale(1.8)}.circuit-note{font-size:3px;left:8px;right:8px;line-height:1.7;bottom:8px}.current-services{padding:15px 10px;gap:10px;font-size:3px;line-height:1.7}.current-services b{margin-right:4px}.grain-brand{font-size:32px;gap:8px}.grain-brand>span{font-size:4px}.grain-layout{min-height:354px;grid-template-columns:.85fr 1fr}.grain-copy{padding:27px 15px}.grain-copy h3{font-size:29px;margin:25px 0 17px}.grain-copy p{font-size:6px}.grain-discover{font-size:4px;gap:15px;margin-top:20px}.grain-discover>span{font-size:18px}.grain-index{font-size:4px;line-height:1.7;padding-top:30px}.grain-photo img{object-position:43% center}.grain-photo>span{font-size:3px;left:10px;bottom:12px}.concept-meta{padding:19px 0;align-items:flex-start;gap:12px}.concept-meta>div{display:block}.concept-status{font-size:5px;display:inline-block;padding:4px 6px}.concept-meta p{font-size:8px;margin-top:8px;line-height:1.7}.concept-open{font-size:8px;gap:12px;padding:0;min-height:35px;max-width:130px}.concept-open>span{font-size:19px}.concept-disclaimer{font-size:8px;margin-top:14px}.thinking{padding:67px var(--pad) 70px}.thinking .section-heading{margin-bottom:32px}.thinking-layout{grid-template-columns:1fr;gap:27px}.question-list{padding:0}.question{padding:19px 0;gap:15px}.question strong{font-size:13px}.question>span{font-size:7px}.question i{font-size:21px}.question-answer{padding-top:23px;min-height:112px}.question-answer p{font-size:11px}.answer-label{font-size:7px}.anatomy{transform:rotate(0);width:100%;max-width:430px;margin:0 auto}.anatomy-page{padding:24px}.anatomy-nav strong{font-size:10px}.anatomy-nav>span{font-size:4px}.anatomy-intro h3{font-size:40px}.anatomy-intro>span{font-size:5px}.anatomy-services>span:not(.highlight-label){font-size:5px;padding:7px 9px}.anatomy-work{min-height:110px}.anatomy-work img{height:110px}.anatomy-work>div{font-size:26px}.anatomy-work>div>span{font-size:4px}.anatomy-area strong,.anatomy-trust strong{font-size:7px}.anatomy-area div>span,.anatomy-trust div>span{font-size:5px}.anatomy-contact{padding:15px 12px}.anatomy-contact strong{font-size:8px}.anatomy-contact>span:not(.highlight-label){font-size:4px}.approach{padding:65px var(--pad) 55px}.approach-top{display:flex;flex-direction:column-reverse;gap:35px;align-items:stretch}.approach-copy .eyebrow{font-size:7px;margin-bottom:23px}.approach-copy h2{font-size:55px;margin-bottom:25px}.approach-copy>p:not(.eyebrow){font-size:12px;max-width:400px;line-height:1.9}.approach-sign{font-size:6px;margin-top:10px}.approach-image{aspect-ratio:1.2;max-height:400px}.approach-image img{object-position:50% 45%}.approach-image>span{font-size:6px;left:22px;bottom:22px}.process-heading{margin-top:50px;display:block;padding-bottom:23px}.process-heading h3{font-size:22px}.process-heading>span{display:block;margin-top:11px;font-size:5px}.process-grid{grid-template-columns:1fr;gap:25px;margin-top:22px}.process-grid article{display:grid;grid-template-columns:38px 1fr;column-gap:20px;padding-bottom:25px;border-bottom:1px solid #c5cbbd}.process-grid article:last-child{border-bottom:0;padding-bottom:0}.process-number{grid-column:1;grid-row:1/3;font-size:10px;padding-top:3px;display:block}.process-number>span{display:block;margin-top:12px}.process-grid h4{grid-column:2;font-size:17px;margin:0 0 10px}.process-grid p{grid-column:2;font-size:11px;max-width:350px}.pricing{padding:65px var(--pad) 55px}.offer-grid{grid-template-columns:1fr;gap:18px}.main-offer{padding:28px}.offer-top{flex-direction:row;align-items:center;gap:15px}.offer-top .eyebrow{font-size:7px}.offer-tag{font-size:5px}.price{font-size:79px;gap:18px;flex-wrap:nowrap}.price>span{font-size:8px;margin-bottom:9px}.offer-description{font-size:14px}.offer-features{grid-template-columns:1fr;gap:13px}.offer-features li{font-size:10px}.page-list{font-size:6px;gap:13px}.offer-bottom{gap:20px;display:block}.offer-bottom strong{font-size:9px}.offer-bottom p>span{font-size:8px}.offer-bottom .button{width:100%;font-size:11px;margin-top:22px;min-height:52px}.care-offer{padding:28px;gap:30px}.care-offer .eyebrow{font-size:7px;margin-bottom:24px}.care-offer h3{font-size:35px}.care-price{font-size:60px}.care-offer ul{font-size:11px}.care-offer>div>p:not(.eyebrow){font-size:12px}.care-foot>span{font-size:9px;max-width:none}.faq{margin-top:38px}.faq summary{font-size:12px;padding:20px 0;line-height:1.6}.faq details p{font-size:11px;padding-right:10px}.contact{padding:67px var(--pad) 65px;grid-template-columns:1fr;gap:47px}.contact-intro .eyebrow{font-size:7px;margin-bottom:25px}.contact-intro h2{font-size:clamp(51px,13vw,73px)}.contact-intro>p:not(.eyebrow){font-size:12px;margin:23px 0 20px}.contact-note{margin-top:28px;font-size:8px}.email-link{font-size:13px}.inquiry-form label,.project-type legend{font-size:10px}.inquiry-form input:not([type=radio]),.inquiry-form textarea{font-size:16px}.form-row{gap:20px;grid-template-columns:1fr}.form-row input{margin-bottom:20px!important}.project-type label>span{font-size:9px;padding:10px 11px}.form-privacy{font-size:9px;line-height:1.8}.form-heading{font-size:9px}.footer{padding:32px var(--pad) 25px}.footer-top{flex-wrap:wrap;gap:25px}.footer-top>p{font-size:8px;text-align:right}.back-top{font-size:6px;margin-left:auto}.footer-wordmark{font-size:16.7vw;margin-top:23px;letter-spacing:-.075em}.footer-wordmark>i{font-size:7px;margin-top:3vw}.footer-bottom{font-size:5px;gap:20px;flex-wrap:wrap;line-height:1.7}.footer-bottom>span:nth-child(2){display:none}.footer-bottom>div{gap:17px}dialog{padding:35px 25px;width:calc(100% - 28px);max-height:90svh}.concept-dialog h2,.privacy-dialog h2{font-size:34px}.concept-dialog>p:not(.eyebrow),.privacy-dialog>p:not(.eyebrow){font-size:12px}.direction-point{grid-template-columns:70px 1fr;gap:15px}.direction-point p{font-size:11px}.direction-point strong{font-size:9px}.concept-dialog .button{font-size:9px;gap:15px;width:100%}}
@media(max-width:375px){:root{--pad:18px}.header-actions{gap:10px}.motion-toggle{display:none}.brand>span{font-size:15px}.hero-buttons{gap:15px}.hero-buttons .button{font-size:9px;gap:15px}.hero-buttons .text-link{font-size:7px}.story-copy{min-height:365px}.story-copy h1,.story-copy h2{font-size:62px}.scene-tag{padding:10px}.foundation-hero-copy p{font-size:35px}.story-chapters button{font-size:6px}.design-tabs button{font-size:8px;gap:5px}.tab-number{display:none}.hart-text h3{font-size:37px}.hart-layout{min-height:300px}.grain-copy h3{font-size:26px}.grain-layout{min-height:335px}.current-copy h3{font-size:64px}.current-layout{min-height:310px}.main-offer{padding:23px}.price{font-size:68px}.price>span{font-size:7px}.offer-tag{font-size:4px}.question strong{font-size:12px}.anatomy-page{padding:19px}.anatomy-work>div{font-size:23px}}
/* Visitors can always choose a calm version. */
html.reduce-motion{scroll-behavior:auto}html.reduce-motion *,html.reduce-motion *:before,html.reduce-motion *:after{animation:none!important;transition:none!important}html.reduce-motion .experience{height:auto}html.reduce-motion .story-sticky{position:relative;height:auto;min-height:760px}html.reduce-motion .story-layout{margin-top:65px;margin-bottom:65px}html.reduce-motion .hero-browser{transform:none!important}html.reduce-motion .wireframe-plane{display:none}html.reduce-motion .blueprint-overlay{display:none}html.reduce-motion .js-motion .section-heading,html.reduce-motion .js-motion .approach-top,html.reduce-motion .js-motion .process-grid,html.reduce-motion .js-motion .offer-grid,html.reduce-motion .js-motion .contact-intro{opacity:1;transform:none}html.reduce-motion .scroll-prompt{visibility:hidden}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.experience{height:auto}.story-sticky{position:relative;height:auto;min-height:760px}.story-layout{margin-top:65px;margin-bottom:65px}.hero-browser{transform:none!important}.wireframe-plane,.blueprint-overlay{display:none}.scroll-prompt{visibility:hidden}}
@media(max-width:700px){html.reduce-motion .story-sticky{min-height:0}html.reduce-motion .story-layout{margin-top:32px;margin-bottom:28px}html.reduce-motion .hero-browser{transform:none!important}@media(prefers-reduced-motion:reduce){.story-sticky{min-height:0}.story-layout{margin-top:32px;margin-bottom:28px}}}

/* Height-aware composition and content-sized mobile hero. */
@media(min-width:701px) and (max-height:850px){
 .story-sticky{padding-top:110px;padding-bottom:20px;min-height:0}
 .story-layout{margin:16px auto;gap:3vw}
 .story-copy{min-height:415px}
 .story-copy h1,.story-copy h2{font-size:clamp(62px,6.5vw,91px)}
 .story-copy .eyebrow{margin-bottom:18px}
 .hero-description{margin-top:20px;font-size:13px;max-width:310px}
 .hero-buttons{margin-top:23px}
 .website-scene{padding:22px 0 28px;max-width:670px}
 .foundation-header{height:55px;padding:10px 22px}
 .foundation-hero{height:230px}
 .foundation-hero-copy p{font-size:42px;margin:24px 0 16px}
 .foundation-bottom{min-height:80px;padding:18px 22px}
 .foundation-bottom>span:first-child{font-size:22px}
 .story-bottom{padding-top:15px}
}
@media(min-width:701px) and (max-height:700px){
 .experience{height:auto}
 .story-sticky{position:relative;height:auto;min-height:700px}
 .story-layout{margin:45px auto}
 .scroll-prompt{visibility:hidden}
}
@media(max-width:700px){.story-panel.is-active{position:relative;top:auto;left:auto}.story-copy{min-height:365px}.story-panel:not(.is-active){top:0}}


/* ===== reference-sections.css ===== */
/* Reference-led lower-page composition. Load after the base stylesheet. */
:is(#designs,#difference,#approach,#pricing,#start,.footer){--section-space:clamp(88px,10vw,160px)}
:is(#designs,#difference,#approach,#pricing,#start) .eyebrow,
.concept-meta,.concept-disclaimer,.process-heading>span,.process-number,
.page-list,.offer-tag,.contact-note,.form-heading,.project-type legend,
.inquiry-form>label,.form-row>label,.footer-bottom,.back-top{
 font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}
:is(#designs,#difference,#approach,#pricing,#start) .eyebrow{font-size:12px;letter-spacing:.18em;font-weight:400;color:var(--blue)}
:is(#designs,#difference,#approach,#pricing,#start) .section-heading{gap:48px;margin-bottom:48px}
:is(#designs,#difference,#approach,#pricing,#start) h2{font-size:clamp(44px,5.6vw,88px);font-weight:800;line-height:1.03;letter-spacing:-.055em}
:is(#designs,#difference,#approach,#pricing,#start) h2 em{font-weight:400;font-style:italic}
:is(#designs,#difference,#approach,#pricing,#start) .section-heading>p{font-size:16px;line-height:1.8;max-width:330px;color:#a9b4c5}
:is(#designs,#difference,#approach,#pricing,#start) .subtle{font-size:13px;line-height:1.8;color:#a9b4c5}
:is(#designs,#difference,#approach,#pricing,#start) .button{border-radius:999px;font-size:15px;padding:18px 26px;min-height:60px}

/* Each concept keeps its own design; the surrounding gallery feels like a studio. */
#designs{position:relative;background:var(--ink);color:var(--paper);color-scheme:dark;padding:var(--section-space) var(--pad) 64px}
#designs .dark-eyebrow{color:var(--blue)}
#designs .design-tabs{display:flex;gap:10px;border:0;margin:0 0 28px;flex-wrap:wrap}
#designs .design-tabs button{display:inline-flex;flex:0 1 auto;align-items:center;justify-content:center;min-height:46px;gap:12px;padding:12px 22px;background:transparent;color:#b9c3d2;border:1px solid #344051;border-radius:999px;font-size:12px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.03em;text-transform:uppercase;transition:background .25s,color .25s,border-color .25s}
#designs .design-tabs button:hover{border-color:#98a5b8;color:var(--paper)}
#designs .design-tabs button[aria-selected=true]{background:var(--blue);border-color:var(--blue);color:#04111f}
#designs .design-tabs button::after{display:none}
#designs .tab-number{font-size:11px;color:inherit;opacity:.7}
#designs .tab-arrow{font-size:16px;opacity:1;margin-left:3px}
#designs .design-stage{border:1px solid #344052;border-radius:10px;box-shadow:0 22px 80px #0002}
#designs .concept-meta{color:#b8c3d3;gap:24px;padding-top:20px;font-size:12px}
#designs .concept-meta p{font-size:14px;color:#aab5c7}
#designs .concept-status{color:var(--blue);font-size:11px;letter-spacing:.13em}
#designs .concept-open{color:var(--paper);font-size:13px;border-color:#46536a}
#designs .concept-disclaimer{color:#9ba9bd;font-size:11px;line-height:1.7;letter-spacing:.025em;margin-top:22px}

/* A bright editorial pause: every question remains an actual, readable control. */
#difference{background:var(--paper);color:var(--ink);color-scheme:light;padding:var(--section-space) var(--pad)}
#difference .eyebrow{color:#376786}
#difference .section-heading>p,#difference .subtle{color:#5d6570}
#difference .thinking-layout{grid-template-columns:1.35fr 1fr;gap:clamp(40px,6vw,100px);align-items:center}
#difference .question-list{padding-top:0}
#difference .question{padding:22px 0;gap:16px;align-items:baseline;color:#4c5560;border-bottom:1px solid #c7cbd0;transition:color .25s,transform .25s}
#difference .question:first-child{border-top:1px solid #c7cbd0}
#difference .question>span{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;flex:0 0 24px;color:#536b82}
#difference .question strong{font-size:clamp(25px,2.7vw,43px);line-height:1.13;font-weight:800;letter-spacing:-.045em}
#difference .question:nth-child(even) strong{font-family:Editorial,Georgia,serif;font-weight:400;font-style:italic;letter-spacing:-.025em}
#difference .question i{font-size:25px;color:#65788a;flex-shrink:0}
#difference .question:hover{color:#0a2742}
#difference .question.is-active{color:#07192a}
#difference .question.is-active>span,#difference .question.is-active i{color:#126db7}
#difference .question.is-active i{transform:rotate(0) translate(2px,-2px)}
#difference .question-answer{min-height:155px;padding:28px 0 0 40px}
#difference .answer-label{color:#165f94;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;line-height:1.6;letter-spacing:.09em}
#difference .question-answer p{font-size:15px;line-height:1.8;max-width:480px;color:#5a626d;margin-top:10px}
#difference .anatomy{transform:none;border-color:#30475b;border-radius:10px;background:#102338;box-shadow:0 20px 70px #1228391a;overflow:hidden}
#difference .anatomy-chrome{height:36px;padding:0 15px}
#difference .anatomy-chrome>span{font-size:7px;color:#afc2d4}
#difference .anatomy-page{padding:26px}
#difference .anatomy-target:after{box-shadow:0 0 0 4px #2b8fff20}
#difference .highlight-label{background:#1567a5;font-size:7px}
#difference .anatomy-intro h3{font-size:clamp(32px,3vw,48px)}

/* Craft and process share the darker, confident presentation. */
#approach{background:var(--ink);color:var(--paper);color-scheme:dark;padding:var(--section-space) var(--pad)}
#approach .approach-top{grid-template-columns:.85fr 1.1fr;gap:clamp(48px,9vw,140px)}
#approach .approach-image{border-radius:8px;border:1px solid #344052;aspect-ratio:4/4.8}
#approach .approach-image img{filter:saturate(.55);transition:transform 1.2s ease}
#approach .approach-image:hover img{transform:scale(1.035)}
#approach .approach-image>span{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;letter-spacing:.12em;line-height:1.8;left:28px;bottom:28px}
#approach .approach-copy .eyebrow{font-size:12px;line-height:1.8;margin-bottom:28px}
#approach .approach-copy h2{margin-bottom:30px}
#approach .approach-copy h2 em{color:var(--blue)}
#approach .approach-copy>p:not(.eyebrow){max-width:490px;font-size:16px;line-height:1.9;color:#abb6c6}
#approach .approach-sign{color:#9cacbf;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;line-height:1.8;border-color:#314052;letter-spacing:.08em;margin-top:22px;padding-top:22px}
#approach .process-heading{margin-top:clamp(90px,10vw,160px);align-items:flex-end;padding-bottom:30px;border-color:#2e3b4d}
#approach .process-heading h3{font-size:clamp(31px,4vw,60px);font-weight:800;letter-spacing:-.05em;max-width:690px;line-height:1.1}
#approach .process-heading>span{color:#9baabd;font-size:11px;line-height:1.8;max-width:250px}
#approach .process-grid{position:relative;display:block;padding:12px 0;margin-top:60px}
#approach .process-grid::before{content:'';position:absolute;top:16px;bottom:16px;left:50%;width:1px;background:linear-gradient(var(--blue),#2a4b69 80%,#223246)}
#approach .process-grid article{position:relative;display:block;width:50%;padding:0 64px 0 0;margin-bottom:68px;border:0;text-align:right}
#approach .process-grid article:nth-child(even){margin-left:50%;padding:0 0 0 64px;text-align:left}
#approach .process-grid article:last-child{margin-bottom:0}
#approach .process-number{position:absolute;right:-19px;left:auto;top:4px;display:flex;align-items:center;justify-content:center;border:1px solid var(--blue);border-radius:50%;background:var(--ink);color:var(--blue);width:38px;height:38px;font-size:12px;z-index:1}
#approach .process-number>span{display:none}
#approach .process-grid article:nth-child(even) .process-number{right:auto;left:-19px}
#approach .process-grid h4{font-size:clamp(28px,3.2vw,48px);font-weight:800;letter-spacing:-.045em;line-height:1.06;margin:0 0 18px}
#approach .process-grid p{font-size:15px;line-height:1.8;color:#aab6c8;max-width:410px;margin-left:auto}
#approach .process-grid article:nth-child(even) p{margin-left:0}

/* The price is the visual anchor, with care as an intentionally lighter option. */
#pricing{position:relative;isolation:isolate;overflow:hidden;padding:var(--section-space) var(--pad);background:var(--ink);color:var(--paper)}
#pricing::before{content:'CLEAR PRICING';position:absolute;z-index:-1;top:20px;left:var(--pad);font-family:Condensed,Impact,sans-serif;font-weight:700;font-size:clamp(110px,22vw,350px);letter-spacing:-.025em;line-height:1;white-space:nowrap;color:transparent;-webkit-text-stroke:1px #344152;opacity:.28;pointer-events:none}
#pricing .section-heading{position:relative}
#pricing .offer-grid{grid-template-columns:1.5fr 1fr;gap:24px}
#pricing .main-offer{padding:clamp(28px,3.5vw,56px);border:1px solid #2b8fff66;background:#0c1828;color:var(--paper);border-radius:10px}
#pricing .offer-top{align-items:center;gap:16px}
#pricing .offer-top .eyebrow{font-size:12px;color:var(--blue)}
#pricing .offer-tag{font-size:10px;border-color:#35475b;border-radius:999px;padding:8px 11px;white-space:nowrap;letter-spacing:.035em;color:#bcc9d9}
#pricing .price{font-size:clamp(80px,10vw,150px);font-weight:800;line-height:1;letter-spacing:-.07em;display:block;margin-top:34px}
#pricing .price>span{display:block;font-size:13px;font-weight:400;letter-spacing:0;margin:12px 0 0;color:#a3b2c6}
#pricing .offer-description{font-size:18px;line-height:1.65;color:#bdc8d8;margin:25px 0 30px}
#pricing .page-list{gap:8px;padding:0;margin:0;border:0}
#pricing .page-list>span{font-size:11px;line-height:1.4;letter-spacing:.04em;border:1px solid #344357;border-radius:999px;padding:9px 12px;color:#c4cfdd}
#pricing .offer-features{gap:17px 22px;border-color:#2a3b50;padding:32px 0}
#pricing .offer-features li{font-size:14px;line-height:1.7}
#pricing .offer-features li::before{content:none}
#pricing .offer-bottom{display:block;padding-top:27px}
#pricing .offer-bottom strong{display:block;font-size:16px;font-weight:600;line-height:1.7;color:#d6e4f2}
#pricing .offer-bottom p>span{font-size:12px;line-height:1.8;color:#9aaec4;margin-top:8px}
#pricing .offer-bottom .button{display:flex;width:100%;background:var(--blue);color:#04121f;margin-top:28px;padding:18px 24px;min-height:59px;font-size:15px}
#pricing .offer-bottom .button:hover{background:#59a8ff}
#pricing .care-offer{padding:clamp(28px,3.5vw,56px);border-radius:10px;background:var(--paper);color:var(--ink);gap:40px;border:1px solid #d9dce0}
#pricing .care-offer .eyebrow{font-size:11px;letter-spacing:.15em;color:#5e6975;margin-bottom:29px}
#pricing .care-offer h3{font-size:clamp(28px,3vw,44px);font-weight:600;line-height:1.14;letter-spacing:-.05em}
#pricing .care-offer h3 em{color:#47708f;font-style:italic}
#pricing .care-price{font-size:clamp(64px,6vw,92px);font-weight:800;letter-spacing:-.07em;line-height:1;margin:35px 0 16px}
#pricing .care-price>span{font-size:15px;color:#65717e;letter-spacing:-.02em;margin-left:10px;font-weight:400}
#pricing .care-offer>div>p:not(.eyebrow){font-size:15px;line-height:1.75;color:#536170}
#pricing .care-offer ul{font-size:15px;color:#34414c;line-height:1.7;padding-top:28px}
#pricing .care-offer li{margin-bottom:15px;padding-left:18px;position:relative}
#pricing .care-offer li::before{position:absolute;left:0;color:#386a91;margin:0;content:'+'}
#pricing .care-foot{border-color:#c7cdd4;padding-top:25px}
#pricing .care-foot p{font-size:15px;line-height:1.8;color:#354654}
#pricing .care-foot>span{max-width:360px;font-size:12px;line-height:1.9;color:#66727d}
#pricing .faq{margin-top:70px;max-width:1050px;margin-left:auto;margin-right:auto}
#pricing .faq summary{font-size:17px;padding:25px 0;line-height:1.5}
#pricing .faq summary>span{color:var(--blue);font-size:25px}
#pricing .faq details p{font-size:15px;line-height:1.9;max-width:840px;color:#aab8cb;padding-bottom:27px}

/* A generous, dark closing section with a useful, real inquiry form. */
#start{position:relative;background:var(--ink);color:var(--paper);color-scheme:dark;grid-template-columns:1fr 1fr;gap:60px 8vw;padding:40px var(--pad) 105px;border-top:1px solid #253449}
#start::before{content:'LET’S BUILD IT.';grid-column:1/-1;display:block;overflow:hidden;font-size:clamp(54px,10.2vw,160px);font-weight:800;line-height:1.15;letter-spacing:-.065em;color:transparent;-webkit-text-stroke:1px #b8cadf;padding:28px 0 35px;margin-bottom:25px;white-space:nowrap;border-bottom:1px solid #253449}
#start .contact-intro .eyebrow{color:var(--blue);font-size:12px;margin-bottom:30px}
#start .contact-intro h2{font-size:clamp(49px,5.6vw,86px);line-height:1.02}
#start .contact-intro h2 em{color:var(--blue)}
#start .contact-intro>p:not(.eyebrow){font-size:17px;color:#a8b7c9;line-height:1.85;margin:30px 0 24px}
#start .email-link{font-size:clamp(15px,1.4vw,21px);border-color:#4a6380;color:#d4e3f5;line-height:1.6;overflow-wrap:anywhere}
#start .contact-note{font-size:12px;line-height:1.85;color:#9bacc2;margin-top:44px;letter-spacing:0}
#start .form-heading{font-size:12px;color:#c0cfe2;letter-spacing:.12em;border-color:#35465a;padding-bottom:25px;margin-bottom:30px}
#start .inquiry-form label,#start .project-type legend{font-size:12px;font-weight:400;line-height:1.65;color:#b9c7d9}
#start .inquiry-form label>span:not(.optional){color:#91a7c3}
#start .inquiry-form input:not([type=radio]),#start .inquiry-form textarea{font-family:Manrope,Arial,sans-serif;border-bottom:1px solid #35465c;color:var(--paper);font-size:17px;padding:14px 0;line-height:1.6;margin-top:2px;margin-bottom:28px;min-height:52px;transition:border-color .2s;background:transparent}
#start .inquiry-form input:not([type=radio]):focus,#start .inquiry-form textarea:focus{border-bottom-color:var(--blue)}
#start .inquiry-form input::placeholder,#start .inquiry-form textarea::placeholder{color:#7e91aa;opacity:1}
#start .inquiry-form textarea{min-height:132px;line-height:1.7}
#start .project-type{gap:8px;margin-bottom:28px}
#start .project-type legend{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;margin-bottom:13px}
#start .project-type label>span{color:#aebfd2;border-color:#3a4a5f;border-radius:999px;padding:10px 15px;font-size:12px;line-height:1.4;font-family:Manrope,Arial,sans-serif}
#start .project-type input:checked+span{background:var(--blue);border-color:var(--blue);color:#03111f}
#start .optional{font-size:10px;letter-spacing:.06em;color:#7f92aa;margin-left:6px}
#start .form-submit{background:var(--blue);color:#03111f;border-radius:999px;font-size:16px;padding:19px 27px;min-height:62px}
#start .form-submit:hover{background:#58aaff}
#start .form-submit span:first-child{font-size:16px;font-weight:600;line-height:1.5}
#start .form-submit span:last-child{font-size:25px}
#start .form-privacy{max-width:520px;font-size:12px;line-height:1.9;color:#9cabc0;margin-top:17px}
#start .form-status{font-size:14px;line-height:1.8;border-radius:4px}
#start .form-fallback{font-size:14px;line-height:1.8;color:#d0e3fa}
.footer{background:var(--ink);color:var(--paper);padding:38px var(--pad) 30px;border-top:1px solid #253449}
.footer .footer-top>p{font-size:12px;line-height:1.8;color:#9eafc6}
.footer .back-top{font-size:11px;color:#b0c1d5;letter-spacing:.1em;gap:20px}
.footer .back-top>span{color:var(--blue);font-size:25px}
.footer .footer-wordmark{font-size:clamp(80px,16.7vw,280px);line-height:1.15;font-weight:800;letter-spacing:-.08em;margin-top:48px;white-space:nowrap}
.footer .footer-wordmark>span{font-weight:800;color:transparent;-webkit-text-stroke:1px #7f9bbf}
.footer .footer-wordmark>i{color:var(--blue);font-size:clamp(18px,2.3vw,34px);margin-left:2vw}
.footer .footer-bottom{font-size:10px;line-height:1.8;color:#8fa3bc;letter-spacing:.04em;gap:24px;padding-top:26px;margin-top:22px;border-color:#253449;flex-wrap:wrap}
.footer .footer-bottom>div{gap:22px;flex-wrap:wrap}

@media(max-width:1100px){
 #difference .thinking-layout{grid-template-columns:1.2fr 1fr;gap:38px}
 #difference .question strong{font-size:29px}
 #difference .question{gap:11px}
 #difference .question>span{flex-basis:20px}
 #difference .question-answer{padding-left:31px}
 #pricing .offer-grid{grid-template-columns:1.35fr 1fr}
 #pricing .offer-top{display:block}
 #pricing .offer-tag{display:inline-block;margin-top:14px}
 #pricing .price{font-size:clamp(80px,10.7vw,120px)}
 #pricing .offer-features{grid-template-columns:1fr}
 #approach .approach-top{gap:55px}
 #start{gap:60px 6vw}
 #start .form-row{grid-template-columns:1fr;gap:0}
}
@media(max-width:800px){
 :is(#designs,#difference,#approach,#pricing,#start){--section-space:90px}
 :is(#designs,#difference,#approach,#pricing,#start) .section-heading{align-items:flex-start;flex-direction:column;gap:24px;margin-bottom:36px}
 :is(#designs,#difference,#approach,#pricing,#start) h2{font-size:clamp(43px,7.8vw,64px)}
 :is(#designs,#difference,#approach,#pricing,#start) .section-heading>p{max-width:520px;font-size:15px}
 #designs .design-tabs{gap:8px}
 #designs .design-tabs button{font-size:11px;padding:12px 16px;gap:8px}
 #difference .thinking-layout{grid-template-columns:1fr;gap:40px}
 #difference .question strong{font-size:clamp(25px,4.9vw,38px)}
 #difference .question{gap:16px;padding:24px 0}
 #difference .question-answer{min-height:0;padding-left:36px;padding-bottom:8px}
 #difference .anatomy{max-width:520px;width:100%;justify-self:center}
 #difference .anatomy-intro h3{font-size:42px}
 #approach .approach-top{grid-template-columns:1fr 1fr;gap:34px;align-items:start}
 #approach .approach-copy>p:not(.eyebrow){font-size:15px}
 #approach .approach-copy h2{font-size:clamp(36px,5.5vw,49px)}
 #approach .approach-copy .eyebrow{font-size:10px}
 #approach .process-heading{align-items:flex-start;flex-direction:column;gap:20px}
 #approach .process-heading h3{font-size:42px;max-width:560px}
 #approach .process-heading>span{max-width:none}
 #approach .process-grid article{padding-right:40px}
 #approach .process-grid article:nth-child(even){padding-left:40px}
 #approach .process-grid h4{font-size:30px}
 #pricing .offer-grid{grid-template-columns:1fr}
 #pricing .main-offer,#pricing .care-offer{padding:36px}
 #pricing .offer-top{display:flex}
 #pricing .offer-tag{margin-top:0}
 #pricing .price{font-size:110px}
 #pricing .offer-features{grid-template-columns:1fr 1fr}
 #pricing .care-price{font-size:78px}
 #pricing .care-offer h3{font-size:40px}
 #pricing .care-foot>span{max-width:540px}
 #start{grid-template-columns:1fr;gap:45px;padding-top:25px;padding-bottom:80px}
 #start::before{margin-bottom:0;padding-top:25px;padding-bottom:30px;font-size:10vw}
 #start .contact-intro h2{font-size:clamp(49px,9vw,76px)}
 #start .contact-intro>p:not(.eyebrow){margin:24px 0 21px}
 #start .contact-note{margin-top:28px}
 #start .form-row{grid-template-columns:1fr 1fr;gap:20px}
 .footer .footer-top{flex-wrap:wrap;gap:24px}
 .footer .footer-top>p{font-size:12px}
 .footer .footer-bottom{font-size:10px}
}
@media(max-width:550px){
 :is(#designs,#difference,#approach,#pricing,#start){--section-space:74px}
 :is(#designs,#difference,#approach,#pricing,#start) .eyebrow{font-size:11px;letter-spacing:.1em}
 :is(#designs,#difference,#approach,#pricing,#start) h2{font-size:clamp(39px,10.6vw,56px)}
 #designs{padding-bottom:52px}
 #designs .design-tabs{flex-wrap:nowrap;gap:6px}
 #designs .design-tabs button{flex:1;min-width:0;gap:6px;padding:12px 8px;font-size:10px;letter-spacing:0}
 #designs .tab-number,#designs .tab-arrow{display:none}
 #designs .concept-meta{align-items:flex-start;gap:18px;flex-wrap:wrap}
 #designs .concept-meta p{font-size:12px}
 #designs .concept-open{font-size:12px}
 #designs .concept-disclaimer{font-size:11px}
 #difference .question{gap:11px;padding:21px 0;align-items:center}
 #difference .question>span{font-size:10px;flex-basis:18px}
 #difference .question strong{font-size:clamp(23px,6.5vw,31px);line-height:1.2;letter-spacing:-.035em}
 #difference .question i{font-size:22px}
 #difference .question-answer{padding-left:0}
 #difference .question-answer p{font-size:14px}
 #difference .answer-label{font-size:10px}
 #difference .anatomy-page{padding:24px}
 #difference .anatomy-intro h3{font-size:40px}
 #approach .approach-top{grid-template-columns:1fr;gap:38px}
 #approach .approach-image{aspect-ratio:1.15;max-width:none}
 #approach .approach-image img{object-position:50% 48%}
 #approach .approach-copy h2{font-size:clamp(43px,10.6vw,58px)}
 #approach .approach-copy .eyebrow{font-size:11px}
 #approach .approach-sign{font-size:10px;line-height:1.8}
 #approach .process-heading{margin-top:78px}
 #approach .process-heading h3{font-size:38px}
 #approach .process-heading>span{font-size:10px}
 #approach .process-grid{margin-top:38px}
 #approach .process-grid::before{left:18px}
 #approach .process-grid article,#approach .process-grid article:nth-child(even){width:100%;margin-left:0;padding:0 0 0 58px;text-align:left;margin-bottom:47px}
 #approach .process-grid article:last-child{margin-bottom:0}
 #approach .process-number,#approach .process-grid article:nth-child(even) .process-number{left:0;right:auto;top:0}
 #approach .process-grid h4{font-size:30px;margin-bottom:14px}
 #approach .process-grid p,#approach .process-grid article:nth-child(even) p{font-size:14px;margin-left:0;max-width:none}
 #pricing .main-offer,#pricing .care-offer{padding:27px 23px}
 #pricing .offer-top{display:block}
 #pricing .offer-top .eyebrow{font-size:11px}
 #pricing .offer-tag{margin-top:12px;font-size:9px}
 #pricing .price{font-size:clamp(75px,21vw,108px);margin-top:29px}
 #pricing .price>span{font-size:12px}
 #pricing .offer-description{font-size:16px}
 #pricing .page-list{gap:7px}
 #pricing .page-list>span{font-size:10px;padding:8px 10px}
 #pricing .offer-features{grid-template-columns:1fr;gap:14px;padding:27px 0}
 #pricing .offer-features li{font-size:14px}
 #pricing .offer-bottom strong{font-size:14px}
 #pricing .offer-bottom .button{font-size:14px;padding:17px 20px;min-height:58px}
 #pricing .care-offer h3{font-size:35px}
 #pricing .care-price{font-size:72px}
 #pricing .care-price>span{font-size:14px}
 #pricing .care-offer ul{font-size:14px}
 #pricing .faq{margin-top:48px}
 #pricing .faq summary{font-size:15px;gap:22px;padding:22px 0}
 #pricing .faq details p{font-size:14px;line-height:1.8;padding-right:0}
 #start{gap:40px;padding-bottom:70px}
 #start::before{font-size:10vw;letter-spacing:-.065em;padding-bottom:24px}
 #start .contact-intro .eyebrow{font-size:11px}
 #start .contact-intro h2{font-size:clamp(45px,11vw,64px)}
 #start .contact-intro>p:not(.eyebrow){font-size:16px}
 #start .email-link{font-size:17px}
 #start .contact-note{font-size:11px}
 #start .form-row{grid-template-columns:1fr;gap:0}
 #start .inquiry-form label,#start .project-type legend{font-size:12px}
 #start .inquiry-form input:not([type=radio]),#start .inquiry-form textarea{font-size:16px;margin-bottom:25px}
 #start .project-type label>span{font-size:12px;padding:10px 13px}
 #start .form-privacy{font-size:11px}
 .footer{padding-top:30px;padding-bottom:25px}
 .footer .footer-top{gap:22px}
 .footer .footer-top>p{font-size:11px;text-align:left;flex:1 1 150px}
 .footer .back-top{font-size:10px;margin-left:0}
 .footer .footer-wordmark{font-size:16.3vw;margin-top:34px}
 .footer .footer-wordmark>i{font-size:15px;margin-top:3vw;margin-left:1vw}
 .footer .footer-bottom{font-size:10px;gap:18px;line-height:1.9}
 .footer .footer-bottom>div{gap:18px}
}
@media(prefers-reduced-motion:reduce){
 #approach .approach-image img,#difference .question,#difference .question i{transition:none}
 #approach .approach-image:hover img{transform:none}
}
html.reduce-motion #approach .approach-image:hover img{transform:none}


/* ===== reference.css ===== */
/* Blueprint Scroll Studio direction: type, aperture, assembly, horizontal staging. */
:root{--ink:#070f1c;--ink2:#101c2d;--paper:#f1f0eb;--blue:#2b8fff;--muted:#92a2b8;--line:rgba(214,230,255,.14);--pad:clamp(24px,5vw,88px)}
body{background:var(--ink)}.eyebrow,.hero-topline,.browser-address,.story-chapters,.build-counter,.build-footnote,.assembly-caption,.concept-label,.concept-status,.footer-bottom{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em}.site-header{height:80px;background:linear-gradient(#070f1ceb,#070f1caa);border-bottom:0;padding-inline:max(26px,calc((100vw - 1320px)/2));backdrop-filter:blur(12px)}.brand svg{stroke:var(--blue);width:30px}.brand>span{font-size:20px;letter-spacing:-.045em}.brand-web{color:var(--blue);font-weight:800;margin-left:0}.desktop-nav{gap:35px;margin-left:0}.desktop-nav a{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.25em;color:#a6b1c3}.header-cta{border-radius:100px;background:#0873e0;border-color:transparent;padding:13px 21px;gap:15px;font-size:12px;font-weight:600}.header-cta:hover{background:#258eff;color:#071522}.button{border-radius:100px;font-size:13px;padding:17px 25px}.button-blue{background:#0873e0;color:white}.button-blue:hover{background:#0563c5}.motion-toggle{color:#92a2bb}.reading-progress{opacity:.8}.chapter-rail{position:fixed;z-index:40;right:18px;top:42%;display:flex;flex-direction:column;gap:5px;border-left:1px solid #8aa8d33d;padding:8px 0 8px 15px;width:100px}.chapter-rail a{display:flex;gap:10px;align-items:center;padding:9px 0;font-family:ui-monospace,monospace;font-size:8px;letter-spacing:.15em;color:#91a4bd;white-space:nowrap}.chapter-rail b{font-weight:400;opacity:0;font-size:7px;color:#dce7f8}.chapter-rail a.is-current>span{color:var(--blue)}.chapter-rail a.is-current b,.chapter-rail a:hover b{opacity:1}.chapter-rail.on-paper b{color:#203046}.chapter-rail.on-paper{border-color:#2538533d}.survey{height:300svh;position:relative}.survey-sticky{height:100svh;position:sticky;top:0;overflow:hidden;isolation:isolate;background:var(--ink)}.survey-grid{position:absolute;inset:-30px;background-image:linear-gradient(#2b8fff14 1px,transparent 1px),linear-gradient(90deg,#2b8fff14 1px,transparent 1px);background-size:48px 48px;transform:translate3d(var(--grid-x,0px),var(--grid-y,0px),0)}.survey-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 25%,#070f1c 85%)}.survey-sheet{position:absolute;z-index:5;left:40px;top:100px;font-family:ui-monospace,monospace;font-size:9px;line-height:1.8;letter-spacing:.24em;color:#96a6bd}.survey-window{position:absolute;inset:0;overflow:hidden;clip-path:inset(var(--aperture-y,38%) var(--aperture-x,30%) round var(--aperture-radius,200px));will-change:clip-path}.survey-window>img{width:100%;height:100%;object-fit:cover;transform:scale(var(--survey-photo-scale,1.35));object-position:center;will-change:transform}.survey-shade{position:absolute;inset:0;background:#050d19;opacity:var(--survey-shade,0)}.survey-title{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;min-height:100svh;padding:95px 0 65px;text-align:center;mix-blend-mode:difference;transform:scale(var(--survey-title-scale,1));opacity:var(--survey-title-opacity,1);pointer-events:none;will-change:transform,opacity}.survey-title h1{width:100%;font-weight:800;letter-spacing:-.065em;line-height:.84}.survey-line{display:block;font-size:min(17.2vw,31svh);white-space:nowrap;transform:scaleX(1.1)}.survey-outline{font-family:Condensed,Impact,sans-serif;font-size:min(19vw,34svh);letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.3px #f1f0eb;line-height:.96}.survey-contractors{font-size:min(12.6vw,23svh);transform:scaleX(1.08)}.survey-caption{position:absolute;z-index:4;inset:auto var(--pad) 105px;max-width:950px;opacity:var(--survey-caption-opacity,0);transform:translateY(var(--survey-caption-y,50px));pointer-events:none}.survey-caption.is-visible{pointer-events:auto}.survey-caption .eyebrow{color:#66b0ff;margin-bottom:20px;font-size:11px}.survey-caption h2{font-size:clamp(40px,5vw,76px);line-height:1.05;font-weight:800;letter-spacing:-.055em}.survey-caption h2 em{font-family:Editorial,Georgia,serif;font-weight:400;font-style:italic;color:#c8d0db}.survey-caption .button{margin-top:28px}.survey-bottom{position:absolute;z-index:5;left:40px;right:115px;bottom:31px;display:flex;align-items:center;justify-content:space-between;gap:25px;font-family:ui-monospace,monospace;font-size:8px;letter-spacing:.2em;color:#9bacbf}.survey-bottom a{padding:10px 0}.survey-bottom a:hover{color:white}
/* Five stages with a visible reason for each transformation. */
.build-experience{height:400svh}.build-experience .story-sticky{height:100svh;min-height:0;padding:108px var(--pad) 34px;background:var(--ink)}.build-experience .story-layout{grid-template-columns:1fr 1.35fr;gap:6vw;max-width:1300px;margin:35px auto}.build-experience .story-copy{min-height:370px;height:370px}.build-counter{font-size:10px;color:#66b0ff;position:absolute;top:0;left:0}.build-counter span{margin:0 9px;color:#586d8a}.build-counter b{font-weight:400}.build-experience .story-panel{top:58%;transform:translateY(calc(-50% + 25px));padding-top:8px}.build-experience .story-panel.is-active{transform:translateY(-50%)}.build-word{font-family:Condensed,Impact,sans-serif;font-size:clamp(64px,8vw,125px);font-weight:700;line-height:.95;letter-spacing:-.025em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px #d2e0f0;margin-bottom:16px}.build-experience .story-copy h2{font-size:clamp(28px,3.2vw,46px);letter-spacing:-.055em;line-height:1.08;font-weight:800;max-width:440px}.build-experience .hero-description{font-size:14px;color:#9caec5;line-height:1.8;max-width:390px;margin-top:20px}.build-experience .hero-grid{opacity:.6;background-size:48px 48px}.build-experience .hero-topline{font-size:8px;max-width:1300px}.assembly-scene{padding:20px 0 30px;perspective:1400px;max-width:730px}.assembly-browser{width:100%;position:relative;border:1px solid #2b8fff65;border-radius:8px;overflow:hidden;background:#0d1a2c;box-shadow:0 0 80px -35px #2b8fff75;transform:rotateX(var(--assembly-tilt,15deg)) rotateZ(var(--assembly-rotate,-6deg));will-change:transform}.assembly-browser .browser-chrome{height:38px;background:#101c2d;border-bottom:1px solid var(--line);padding:0 16px}.assembly-browser .browser-dots{gap:6px}.assembly-browser .browser-dots i{height:6px;width:6px;background:#627089}.assembly-browser .browser-address{font-size:6px;letter-spacing:.1em}.assembly-page{aspect-ratio:16/10;position:relative;overflow:hidden;padding:23px}.assembly-guide{position:absolute;inset:0;pointer-events:none;opacity:calc(1 - var(--assembly-photo,0) * .7)}.assembly-guide i{position:absolute;top:0;bottom:0;width:1px;background:#2b8fff44;transform:scaleY(var(--assembly-lines,0));transform-origin:top}.assembly-guide i:nth-child(1){left:20%}.assembly-guide i:nth-child(2){left:40%}.assembly-guide i:nth-child(3){left:60%}.assembly-guide i:nth-child(4){left:80%}.assembly-guide b{position:absolute;height:1px;left:0;right:0;background:#2b8fff44;transform:scaleX(var(--assembly-lines,0));transform-origin:left}.assembly-guide b:nth-of-type(1){top:25%}.assembly-guide b:nth-of-type(2){top:62%}.assembly-photo{position:absolute;inset:23px 23px auto;height:55%;border-radius:4px;overflow:hidden;clip-path:inset(var(--assembly-photo-clip,100%) 0 0);opacity:var(--assembly-photo,0)}.assembly-photo img{height:100%;width:100%;object-fit:cover}.assembly-photo>div{position:absolute;inset:0;background:linear-gradient(90deg,#071321ba,#07132111)}.assembly-photo-outline{position:absolute;inset:23px 23px auto;height:55%;border:1px dashed #2b8fff88;border-radius:4px;background:#2b8fff06;transform:scaleY(var(--assembly-blocks,0));transform-origin:bottom;opacity:calc(1 - var(--assembly-photo,0))}.assembly-copy{position:absolute;top:40px;left:42px;right:28px;clip-path:inset(0 var(--assembly-text-clip,100%) 0 0);z-index:2}.assembly-copy>span{font-family:ui-monospace,monospace;font-size:7px;letter-spacing:.14em;color:#80bdff}.assembly-copy h3{font-size:clamp(20px,2.5vw,37px);letter-spacing:-.05em;line-height:1.07;font-weight:800;margin:13px 0 17px;color:#f8fafc}.assembly-copy>p{font-family:ui-monospace,monospace;font-size:5px;letter-spacing:.15em;color:#ccdff3}.assembly-blocks{position:absolute;inset:65% 23px auto;display:flex;gap:12px;height:24%}.assembly-blocks>div{position:relative;flex:1;border:1px dashed #2b8fff77;background:#14253c;transform:scaleY(var(--assembly-blocks,0));transform-origin:bottom;border-radius:3px;padding:12px}.assembly-blocks>div>span{font-family:ui-monospace,monospace;font-size:6px;color:#68a9ff;opacity:var(--assembly-text,0)}.assembly-blocks strong{font-size:9px;font-weight:600;display:block;line-height:1.6;margin-top:7px;opacity:var(--assembly-text,0);color:#cad8ec}.assembly-cta{position:absolute;right:37px;bottom:28px;background:#0873e0;color:white;border-radius:100px;padding:12px 17px;display:flex;gap:16px;align-items:center;font-size:10px;font-weight:600;transform:translateY(var(--assembly-cta-y,20px)) scale(var(--assembly-cta-scale,.8));opacity:var(--assembly-launch,0);box-shadow:0 10px 40px #070f1c88;z-index:3}.assembly-cta b{font-size:17px;font-weight:400}.assembly-caption{text-align:right;position:absolute;bottom:0;right:0;left:0;font-size:6px;color:#7e91ad;line-height:1.7}.build-experience .story-bottom{max-width:1300px;border:0;padding-top:0;gap:45px}.build-footnote{font-size:7px;color:#778eac}.build-experience .story-chapters{gap:12px;flex:1;max-width:660px}.build-experience .story-chapters button{position:relative;flex:1;display:flex;align-items:center;justify-content:flex-start;padding:17px 0 9px;font-size:8px;gap:5px;min-height:42px;color:#879ab6}.build-experience .story-chapters button i{position:absolute;top:0;left:0;right:0;height:3px;background:#20324d;border-radius:10px;overflow:hidden}.build-experience .story-chapters button i:after{content:'';position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .35s}.build-experience .story-chapters button.is-complete i:after,.build-experience .story-chapters button.is-active i:after{transform:scaleX(1)}.build-experience .story-chapters button.is-active{color:white}.build-experience .story-chapters button>span{font-size:6px}.build-experience .story-counter{font-family:ui-monospace,monospace;font-size:9px;color:#8ca0bd}
/* Portfolio becomes a native-scroll horizontal sequence. */
.designs{height:330svh!important;padding:0!important;position:relative;background:var(--ink)!important;color:var(--paper)!important}.design-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:102px var(--pad) 35px;overflow:hidden}.designs .section-heading{margin-bottom:25px}.designs .section-heading h2{font-size:clamp(34px,4.3vw,64px)}.designs .section-heading .eyebrow{margin-bottom:15px}.designs .section-heading>p{font-size:12px}.design-stage{flex-shrink:1;min-height:0;max-height:calc(100svh - 330px);width:100%;overflow:hidden}.concept-track{display:flex;width:100%;transform:translateX(var(--gallery-x,0%));will-change:transform}.design-panel{flex:0 0 100%;min-width:0;min-height:0!important;max-height:none}.design-stage .concept-top{height:67px;padding-block:15px}.design-stage .hart-layout{min-height:310px;padding-top:0;padding-bottom:22px}.design-stage .hart-text{padding-top:10px}.design-stage .hart-text h3{font-size:clamp(40px,4.5vw,66px);margin-top:16px}.design-stage .hart-footer{padding:15px}.design-stage .current-layout{min-height:310px}.design-stage .current-copy{padding:21px 40px}.design-stage .current-copy h3{font-size:87px;margin-top:18px}.design-stage .current-cta{margin-top:15px}.design-stage .current-services{padding:16px}.design-stage .grain-layout{min-height:355px}.design-stage .grain-copy{padding-top:27px;padding-bottom:25px}.design-stage .grain-copy h3{margin-top:20px;font-size:46px}.designs .design-tabs{margin-bottom:20px}.designs .concept-meta{padding:14px 0}.designs .concept-disclaimer{margin-top:10px}.designs .concept-open{padding:4px 0}.contact-banner{overflow:hidden;display:flex;gap:40px;padding:40px 0 0;background:var(--ink);white-space:nowrap;font-family:Manrope,sans-serif;font-weight:800;font-size:10vw;line-height:1.2;letter-spacing:-.065em}.contact-banner>span{flex-shrink:0}.contact-banner>span:first-child{color:transparent;-webkit-text-stroke:1px #8da7c8}.contact-banner>span:last-child{color:#edf3fa}.footer-wordmark{font-weight:800}.footer-wordmark>span{color:var(--blue);font-weight:800}
@media(min-width:1600px){.design-stage{max-height:calc(100svh - 350px)}.design-stage .hart-layout{min-height:430px}.design-stage .hart-text h3{font-size:80px}.design-stage .current-layout{min-height:430px}.design-stage .current-copy h3{font-size:120px}.design-stage .grain-layout{min-height:475px}.design-stage .grain-copy h3{font-size:60px}.design-stage .grain-copy{padding-top:40px}}
@media(max-width:1150px){.chapter-rail{display:none}.survey-bottom{right:35px}.build-experience .story-layout{gap:4vw}.build-footnote{max-width:200px;font-size:6px}.build-experience .story-copy{min-height:335px;height:335px}.build-word{font-size:78px}.build-experience .story-copy h2{font-size:32px}.build-experience .hero-description{font-size:12px}.build-experience .story-chapters button{font-size:6px}.assembly-copy{left:34px;top:35px}.assembly-copy h3{font-size:28px}.assembly-copy>p{font-size:4px}.assembly-blocks>div{padding:9px}.assembly-blocks strong{font-size:7px}.design-stage .hart-layout{min-height:300px}.design-stage .hart-text h3{font-size:50px}.design-stage .current-copy h3{font-size:85px}.design-stage .grain-layout{min-height:348px}.design-stage .grain-copy h3{font-size:40px}}
@media(min-width:701px) and (max-height:800px){.survey-sheet{top:90px;font-size:7px}.survey-title{padding-top:75px}.survey-line{font-size:min(12vw,25svh)}.survey-outline{font-size:min(12vw,25svh)}.survey-contractors{font-size:min(11.8vw,24svh)}.build-experience .story-sticky{padding-top:97px;padding-bottom:24px}.build-experience .story-layout{margin:20px auto}.build-experience .story-copy{height:315px;min-height:315px}.build-word{font-size:80px}.build-experience .story-copy h2{font-size:35px}.build-experience .hero-description{font-size:12px;line-height:1.7;margin-top:15px}.assembly-scene{max-width:650px}.designs{height:auto!important}.design-sticky{position:relative;height:auto;padding-top:75px;padding-bottom:65px;overflow:visible}.design-stage{max-height:none}.design-stage .hart-layout{min-height:360px}.design-stage .current-layout{min-height:360px}.design-stage .grain-layout{min-height:405px}}
@media(max-width:900px){.site-header{padding-inline:var(--pad)}.survey-sheet{left:26px}.survey-bottom{left:26px;right:26px;font-size:6px}.survey-title{padding-top:85px}.survey-caption h2{font-size:50px}.assembly-copy h3{font-size:25px}.assembly-copy>span{font-size:5px}.assembly-copy>p{font-size:4px}.assembly-cta{font-size:8px;padding:10px 13px;right:26px;bottom:18px}.assembly-blocks strong{font-size:6px}.build-experience .story-layout{gap:28px;grid-template-columns:1fr 1.15fr}.build-word{font-size:70px}.build-experience .story-copy h2{font-size:29px}.build-footnote{display:none}.build-experience .story-chapters{max-width:none}.build-experience .hero-topline{font-size:6px}.designs .section-heading h2{font-size:42px}.design-stage .grain-copy h3{font-size:36px}}
@media(max-width:700px){.site-header{height:73px}.brand>span{font-size:16px}.brand svg{width:27px}.header-cta{font-size:9px;padding:11px 14px;gap:11px}.header-actions{gap:13px}.survey{height:220svh}.survey-sticky{min-height:600px;height:100svh}.survey-sheet{top:100px;left:23px;font-size:7px;letter-spacing:.2em}.survey-title{min-height:600px;height:100svh;padding:105px 0 80px}.survey-line{font-size:15vw;transform:scaleX(1.08)}.survey-outline{font-size:22vw;line-height:1;letter-spacing:-.02em}.survey-contractors{font-size:12.2vw;transform:scaleX(1.08)}.survey-window{clip-path:inset(var(--aperture-y,39%) var(--aperture-x,13%) round var(--aperture-radius,150px))}.survey-bottom{left:23px;right:23px;bottom:25px;font-size:6px;line-height:1.8;letter-spacing:.16em;align-items:flex-end}.survey-bottom>span{max-width:125px;text-align:right}.survey-bottom>a{max-width:145px}.survey-caption{inset:auto 23px 95px}.survey-caption h2{font-size:clamp(35px,9.5vw,56px);line-height:1.07}.survey-caption .eyebrow{font-size:8px;margin-bottom:15px}.survey-caption .button{min-height:49px;padding:14px 20px;font-size:11px;margin-top:24px}.build-experience{height:auto!important}.build-experience .story-sticky{height:auto;position:relative;padding:62px var(--pad) 35px}.build-experience .hero-topline{font-size:6px}.build-experience .hero-topline>span:last-child{display:none}.build-experience .story-layout{display:flex;gap:23px;margin:30px auto 20px}.build-experience .story-copy{height:auto;min-height:310px;padding-top:37px}.build-counter{font-size:9px;top:0}.build-word{font-size:clamp(56px,20vw,91px);margin-bottom:17px}.build-experience .story-panel{top:37px;padding:0;transform:translateY(12px)}.build-experience .story-panel.is-active{position:relative;top:auto;transform:none}.build-experience .story-copy h2{font-size:36px;max-width:360px}.build-experience .hero-description{font-size:13px;line-height:1.8;max-width:360px;margin-top:17px}.assembly-scene{padding:10px 0 30px;width:100%;max-width:480px;margin-top:0}.assembly-browser{transform:none}.assembly-page{aspect-ratio:1.5}.assembly-browser .browser-chrome{height:32px;padding:0 12px}.assembly-browser .browser-address{font-size:5px}.assembly-photo,.assembly-photo-outline{inset:18px 18px auto;height:55%}.assembly-copy{top:30px;left:30px;right:22px}.assembly-copy h3{font-size:clamp(21px,6vw,31px);margin:10px 0 14px}.assembly-copy>span{font-size:5px}.assembly-copy>p{font-size:4px}.assembly-blocks{inset:65% 18px auto;gap:9px}.assembly-blocks>div{padding:8px}.assembly-blocks strong{font-size:7px;margin-top:4px}.assembly-blocks>div>span{font-size:5px}.assembly-cta{font-size:8px;bottom:20px;right:26px;gap:11px;padding:10px 13px}.assembly-caption{font-size:5px;letter-spacing:.08em}.build-experience .story-bottom{padding-top:10px;display:block}.build-experience .story-chapters{gap:8px}.build-experience .story-chapters button{font-size:7px;min-height:50px;justify-content:center;display:block;line-height:1.6;text-align:center}.build-experience .story-chapters button>span{display:block;font-size:6px}.build-experience .story-counter{display:none}.designs{height:auto!important}.design-sticky{position:relative;height:auto;padding:65px var(--pad) 55px;overflow:visible}.designs .section-heading h2{font-size:46px}.design-stage{max-height:none;flex-shrink:0}.design-stage .concept-top{height:63px;padding:15px 17px}.design-stage .hart-layout{min-height:325px;padding:0 17px 20px}.design-stage .hart-text{padding-top:16px}.design-stage .hart-text h3{font-size:clamp(39px,9vw,58px);margin-top:21px}.design-stage .hart-footer{padding:15px 10px}.design-stage .current-layout{min-height:325px}.design-stage .current-copy{padding:25px 17px}.design-stage .current-copy h3{font-size:clamp(64px,15vw,95px);margin-top:23px}.design-stage .current-cta{margin-top:22px}.design-stage .current-services{padding:15px 10px}.design-stage .grain-layout{min-height:354px}.design-stage .grain-copy{padding:27px 15px}.design-stage .grain-copy h3{font-size:29px;margin:25px 0 17px}.concept-track{transition:transform .45s cubic-bezier(.2,.6,.2,1)}.contact-banner{font-size:17vw;gap:30px;padding-top:35px}.survey-window>img{object-position:58% center}}
@media(max-height:700px) and (min-width:701px){.survey{height:auto}.survey-sticky{position:relative;height:730px}.survey-title{height:730px;min-height:0}.survey-caption{display:none}.build-experience{height:auto}.build-experience .story-sticky{height:auto;min-height:650px;position:relative}.build-experience .story-layout{margin:35px auto}}
html.reduce-motion .survey{height:auto}html.reduce-motion .survey-sticky{position:relative;height:850px;max-height:none}html.reduce-motion .survey-title{height:850px;min-height:0;transform:none!important;opacity:1!important}html.reduce-motion .survey-window{clip-path:inset(38% 30% round 200px)!important}html.reduce-motion .survey-window>img{transform:none!important}html.reduce-motion .survey-caption{display:none}html.reduce-motion .survey-shade{opacity:0!important}html.reduce-motion .build-experience{height:auto!important}html.reduce-motion .build-experience .story-sticky{height:auto;min-height:730px;position:relative}html.reduce-motion .designs{height:auto!important}html.reduce-motion .design-sticky{height:auto;position:relative;padding-top:80px;padding-bottom:70px}html.reduce-motion .design-stage{max-height:none}html.reduce-motion .assembly-browser{transform:none!important}
@media(prefers-reduced-motion:reduce){.survey{height:auto}.survey-sticky{position:relative;height:850px}.survey-title{height:850px;min-height:0;transform:none!important;opacity:1!important}.survey-window{clip-path:inset(38% 30% round 200px)!important}.survey-window>img{transform:none!important}.survey-caption{display:none}.survey-shade{opacity:0!important}.build-experience{height:auto!important}.build-experience .story-sticky{height:auto;min-height:730px;position:relative}.designs{height:auto!important}.design-sticky{height:auto;position:relative;padding-top:80px;padding-bottom:70px}.design-stage{max-height:none}.assembly-browser{transform:none!important}}
@media(max-width:700px){html.reduce-motion .survey-sticky,html.reduce-motion .survey-title{height:660px;min-height:0}html.reduce-motion .survey-window{clip-path:inset(39% 13% round 150px)!important}html.reduce-motion .build-experience .story-sticky{min-height:0}html.reduce-motion .design-sticky{padding-top:65px;padding-bottom:55px}@media(prefers-reduced-motion:reduce){.survey-sticky,.survey-title{height:660px;min-height:0}.survey-window{clip-path:inset(39% 13% round 150px)!important}.build-experience .story-sticky{min-height:0}.design-sticky{padding-top:65px;padding-bottom:55px}}}

/* Keep the pinned portfolio inside ordinary desktop viewports. */
@media(min-width:901px) and (min-height:801px){
 #designs .section-heading{display:block;margin-bottom:20px}
 #designs .section-heading h2{font-size:48px;line-height:1.05}
 #designs .section-heading h2 br{display:none}
 #designs .section-heading .eyebrow{font-size:10px;margin-bottom:12px}
 #designs .section-heading>p{display:none}
 #designs .design-tabs{margin-bottom:18px;gap:10px}
 #designs .design-tabs button{min-height:40px;padding:10px 20px;font-size:10px}
 #designs .design-tabs .tab-number{font-size:9px}
 #designs .concept-meta{padding:13px 0}
 #designs .concept-meta p{font-size:12px}
 #designs .concept-status{font-size:8px}
 #designs .concept-open{font-size:11px}
 #designs .concept-disclaimer{margin-top:9px;font-size:9px}
 .design-sticky{padding-top:95px;padding-bottom:25px}
 .design-stage{max-height:none;flex-shrink:0}
}
@media(max-width:900px){
 #designs{height:auto!important}
 .design-sticky{position:relative;height:auto;padding-top:75px;padding-bottom:60px;overflow:visible}
 .design-stage{max-height:none;flex-shrink:0}
 .concept-track{transition:transform .45s cubic-bezier(.2,.6,.2,1)}
}
#start::before{display:none}
@media(max-height:599px){.survey{height:auto}.survey-sticky,.survey-title{position:relative;height:650px;min-height:0}.survey-caption{display:none}.survey-window{clip-path:inset(38% 25% round 180px)!important}}

@media(min-width:701px) and (min-height:701px) and (max-height:800px){
 .build-experience .assembly-scene{max-width:570px;padding-top:10px;padding-bottom:25px}
 .build-experience .assembly-page{aspect-ratio:16/9;max-height:320px}
 .build-experience .story-layout{margin-top:15px;margin-bottom:15px}
}
@media(min-width:901px) and (min-height:801px) and (max-height:999px){
 #designs .section-heading{margin-bottom:15px}
 #designs .section-heading h2{font-size:42px}
 #designs .section-heading .eyebrow{margin-bottom:10px}
 #designs .design-tabs{margin-bottom:14px}
 #designs .design-tabs button{min-height:36px;padding:8px 18px}
 #designs .design-stage,#designs .design-panel{height:390px}
 #designs .concept-top{height:60px;min-height:0;padding-top:12px;padding-bottom:12px}
 #designs .hart-layout,#designs .current-layout{height:300px;min-height:0}
 #designs .hart-footer,#designs .current-services{height:30px;padding:8px 15px;font-size:7px}
 #designs .hart-text h3{font-size:50px}
 #designs .current-copy{padding:17px 35px}
 #designs .current-copy h3{font-size:70px;margin-top:13px}
 #designs .current-cta{margin-top:13px}
 #designs .grain-layout{height:330px;min-height:0}
 #designs .grain-copy{padding:20px 35px}
 #designs .grain-copy h3{font-size:39px;margin:15px 0 13px}
 #designs .grain-copy>p{font-size:11px;line-height:1.6}
 #designs .grain-copy>a{margin-top:18px}
 #designs .grain-index{display:none}
 #designs .concept-meta{padding:10px 0}
 #designs .concept-disclaimer{margin-top:7px}
}

/* Existing homeowner copy, with the reference's generous typographic rhythm. */
#difference .homeowner-questions{list-style:none;padding:0;margin:0;max-width:1320px}
#difference .homeowner-row{display:grid;grid-template-columns:45px minmax(0,1fr);gap:25px;border-top:1px solid #b9c1c8;padding:40px 0 44px}
#difference .homeowner-row:last-child{border-bottom:1px solid #b9c1c8}
#difference .question-number{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.1em;color:#536b82;padding-top:12px;transition:color .25s}
#difference .homeowner-row.is-current .question-number{color:#0062b3}
#difference .homeowner-question{font-size:clamp(34px,5.3vw,78px);font-weight:800;line-height:1.08;letter-spacing:-.045em;color:#0c1c2d}
#difference .homeowner-row:nth-child(even) .homeowner-question{font-family:Editorial,Georgia,serif;font-weight:400;font-style:italic;letter-spacing:-.025em}
#difference .homeowner-row p{font-size:16px;line-height:1.8;color:#566272;max-width:620px;margin-top:20px}
#difference .question-word{display:inline-block}
html.questions-enhanced #difference .question-word{opacity:calc(.55 + var(--word-reveal,1) * .45)}
#difference .homeowner-close{font-size:clamp(24px,3vw,38px);line-height:1.3;letter-spacing:-.03em;margin-top:45px;color:#34475c}
#difference .homeowner-close em{font-family:Editorial,Georgia,serif;font-style:italic;color:#075c9f}
/* A real seamless marquee, with an explicit pause and a complete static fallback. */
.contact-banner{display:block;overflow:hidden;padding:38px 0 0;font-family:Manrope,sans-serif;font-size:initial;line-height:1.2;letter-spacing:normal;white-space:normal}
.banner-window{overflow:hidden;border-top:1px solid #26364b;border-bottom:1px solid #26364b;padding:26px 0}
.banner-track{display:flex;width:max-content;animation:sovie-banner 28s linear infinite;will-change:transform}
.banner-group{display:flex;align-items:center;gap:clamp(24px,3.5vw,60px);padding-right:clamp(24px,3.5vw,60px);flex-shrink:0;white-space:nowrap;font-size:clamp(56px,7.6vw,128px);font-weight:800;letter-spacing:-.055em;line-height:1.15}
.banner-group>span{flex-shrink:0;color:#eef3fa}
.banner-group .banner-outline{color:transparent;-webkit-text-stroke:1px #c3d2e5}
.banner-group .banner-mark{font-size:.65em;color:var(--blue);font-weight:400}
.banner-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px var(--pad) 22px;font-family:ui-monospace,monospace;font-weight:400;font-size:9px;line-height:1.7;letter-spacing:.12em;color:#8da5c1}
.banner-toolbar button{flex-shrink:0;min-height:44px;padding:9px 13px;background:transparent;border:1px solid #344964;border-radius:100px;color:#b9cbe0;font-size:10px;letter-spacing:.03em}
.banner-toolbar button:hover{border-color:var(--blue);color:white}
.banner-toolbar button:disabled{cursor:default;opacity:.75}
.contact-banner.is-paused .banner-track{animation-play-state:paused}
@keyframes sovie-banner{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html.reduce-motion .banner-track{animation:none;transform:none;display:block;width:100%;will-change:auto}
html.reduce-motion .banner-group{display:flex;flex-wrap:wrap;padding:0 var(--pad);gap:14px 25px;font-size:clamp(29px,6vw,94px);white-space:normal}
html.reduce-motion .banner-group:nth-child(2){display:none}
html.reduce-motion #difference .question-word{opacity:1}
@media(prefers-reduced-motion:reduce){
 .banner-track{animation:none;transform:none;display:block;width:100%;will-change:auto}
 .banner-group{display:flex;flex-wrap:wrap;padding:0 var(--pad);gap:14px 25px;font-size:clamp(29px,6vw,94px);white-space:normal}
 .banner-group:nth-child(2){display:none}
 html.questions-enhanced #difference .question-word{opacity:1}
}
@media(max-width:700px){
 #difference .homeowner-row{grid-template-columns:22px minmax(0,1fr);gap:15px;padding:28px 0 32px}
 #difference .question-number{padding-top:8px;font-size:10px}
 #difference .homeowner-question{font-size:clamp(28px,8.5vw,48px);line-height:1.12;letter-spacing:-.035em}
 #difference .homeowner-row p{font-size:14px;line-height:1.8;margin-top:14px}
 #difference .homeowner-close{font-size:27px;margin-top:30px}
 .banner-window{padding:22px 0}
 .banner-toolbar{font-size:9px;letter-spacing:.07em;padding-bottom:20px}
 .banner-toolbar>span{max-width:155px}
 .banner-toolbar button{font-size:9px}
}
@media(max-width:375px){
 .motion-toggle{display:block;width:24px;min-width:24px;padding:0}
 .header-actions{gap:8px}
 .header-cta{padding:11px 9px;font-size:8px;gap:7px}
 .brand{gap:6px}.brand>span{font-size:14px}.brand svg{width:25px}
}
@media(min-width:901px) and (min-height:801px) and (max-height:999px){
 #designs .hart-text{padding-top:8px;padding-bottom:0}
 #designs .hart-text h3{font-size:45px;margin-top:12px;line-height:1.02}
 #designs .hart-text p{margin-top:10px;line-height:1.6}
 #designs .hart-discover{padding-top:12px}
}

.chapter-rail.on-paper a>span{color:#506a86}.chapter-rail.on-paper a.is-current>span{color:#005aa8}


/* ===== build-stages.css ===== */
/* One contractor identity, five unmistakable stages. Scoped to the build scene. */
#build .assembly-scene{padding:12px 0 38px;perspective:none}
#build .assembly-canvas{position:relative;width:100%;aspect-ratio:16/11;container-type:inline-size;isolation:isolate}
#build .build-stage{position:absolute;inset:0;opacity:0;pointer-events:none;transform:translateY(var(--stage-y,40px)) scale(var(--stage-scale,.92));transition:opacity .3s ease,transform .35s cubic-bezier(.16,1,.3,1);will-change:transform,opacity}
#build .build-stage.is-active{opacity:1;z-index:2;transform:translateY(var(--stage-y,0px)) scale(var(--stage-scale,1))}
#build .assembly-caption{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;gap:15px;text-align:left;font-size:8px;letter-spacing:.08em;line-height:1.6;color:#93accb}
#build .assembly-caption>span:first-child{color:#68b0ff}
#build .assembly-caption>span:last-child{text-align:right}
#build .mock-browser{height:100%;overflow:hidden;border:1px solid #ffffff35;border-radius:9px;box-shadow:0 25px 70px #0004}
#build .mock-chrome{height:8%;display:flex;align-items:center;justify-content:space-between;padding:0 3%;gap:14px;background:#132035;color:#aebed3;font-family:ui-monospace,monospace;font-size:clamp(8px,1.4cqw,11px);letter-spacing:.08em}
#build .mock-chrome>span:first-child{font-size:clamp(8px,1.55cqw,12px);letter-spacing:.15em;color:#7389a7}
#build .mock-chrome{white-space:nowrap}
#build .mock-chrome>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis}
#build .mock-chrome>span:first-child{flex-shrink:0}
/* 01 — a technical plan, before a website exists. */
#build .survey-board{position:absolute;inset:0;overflow:hidden;border:1px solid #459bff75;border-radius:8px;background-color:#0a2444;background-image:linear-gradient(#6caaff16 1px,transparent 1px),linear-gradient(90deg,#6caaff16 1px,transparent 1px);background-size:5cqw 5cqw;box-shadow:0 20px 80px #0003,inset 0 0 80px #0a182955}
#build .plan-header{display:flex;justify-content:space-between;gap:12px;padding:4% 5%;font-family:ui-monospace,monospace;font-size:clamp(8px,1.5cqw,12px);letter-spacing:.12em;color:#9cc7ff}
#build .plan-header b{font-weight:400;color:#6b95c7}
#build .plan-title{position:absolute;left:5%;top:15%;font-size:5.6cqw;letter-spacing:-.05em;font-weight:600;color:#d1e5ff}
#build .plan-lines{position:absolute;inset:21% 4% 13%;width:92%;height:66%;fill:none;stroke:#64aaff;stroke-width:1.3;stroke-dasharray:5 4}
#build .plan-node{position:relative;border:1px solid #5a9ce7;background:#102e51;box-shadow:0 0 0 5px #4d94e408;padding:10% 8%;display:flex;flex-direction:column;gap:1cqw}
#build .plan-node>span{font-family:ui-monospace,monospace;font-size:clamp(9px,1.6cqw,12px);color:#69afff}
#build .plan-node strong{font-size:clamp(9px,1.85cqw,14px);letter-spacing:.1em;font-weight:600;color:#d3e8ff}
#build .plan-node i{font-size:clamp(8px,1.25cqw,10px);font-style:normal;letter-spacing:.12em;color:#93bbef}
#build .plan-home{position:absolute;top:35%;left:36%;width:28%;height:22%;padding:3%;text-align:center;gap:.5cqw;background:#143d68;border-color:#8dc2ff}
#build .plan-home strong{font-size:2.6cqw}
#build .plan-branches{position:absolute;left:5%;right:5%;top:65%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5%}
#build .plan-foot{position:absolute;bottom:4%;left:5%;right:5%;display:flex;justify-content:space-between;gap:12px;font-family:ui-monospace,monospace;font-size:clamp(8px,1.25cqw,10px);letter-spacing:.08em;color:#7dabde}
/* 02 — an annotated page plan: deliberately composed, never a loading skeleton. */
#build .structure-browser{background:#f0f3f6;color:#24364c;border-color:#bbcadd}
#build .structure-heading{height:10%;padding:0 4%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#dce7f3;color:#315577;font-family:ui-monospace,monospace;font-size:clamp(9px,1.55cqw,12px);letter-spacing:.045em}
#build .structure-heading>span{display:flex;align-items:center;gap:1.5cqw}
#build .structure-heading i{display:grid;place-items:center;width:3.3cqw;height:3.3cqw;min-width:16px;min-height:16px;border:1px solid #6484a7;font-style:normal}
#build .structure-heading>b{font-size:clamp(8px,1.3cqw,10px);font-weight:400;letter-spacing:.02em}
#build .structure-nav{height:12%;display:flex;align-items:center;justify-content:space-between;gap:2cqw;padding:0 4%;border-bottom:1px solid #bbc9d9;background:#f8fafb}
#build .structure-nav>strong{font-size:clamp(10px,2.05cqw,15px);line-height:1.1;letter-spacing:-.025em}
#build .structure-nav>strong>span{display:block;font-size:clamp(8px,1.2cqw,10px);font-weight:400;letter-spacing:.05em;margin-top:.45cqw}
#build .structure-nav>span{font-size:clamp(9px,1.5cqw,12px)}
#build .structure-nav>b{font-size:clamp(9px,1.55cqw,12px);font-weight:600;border-bottom:1px solid #7990ac;padding:.5cqw 0}
#build .structure-hero{height:45%;display:grid;grid-template-columns:1fr 1fr;gap:5%;padding:3.5% 4%}
#build .structure-intro{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
#build .structure-intro>span,#build .structure-services span,#build .structure-contact span{font-family:ui-monospace,monospace;font-size:clamp(8px,1.35cqw,11px);letter-spacing:.025em;color:#426385;line-height:1.4}
#build .structure-intro h3{font-size:clamp(17px,5cqw,35px);line-height:1.04;letter-spacing:-.05em;font-weight:600;margin:1.5cqw 0}
#build .structure-intro p{font-size:clamp(9px,1.7cqw,13px);line-height:1.5;color:#506278}
#build .structure-photo{position:relative;min-width:0;overflow:hidden;border:1px solid #7e96af;background:#ced8e0}
#build .structure-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(.9);opacity:.88}
#build .structure-photo>span{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:1cqw;background:#e8eff6f5;padding:1.4cqw;font-size:clamp(9px,1.5cqw,12px);line-height:1.3;color:#294867}
#build .structure-photo b{font-family:ui-monospace,monospace;font-size:clamp(8px,1.3cqw,10px);font-weight:400}
#build .structure-services{height:22%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5%;padding:0 4% 2.5%}
#build .structure-services>div{display:flex;flex-direction:column;justify-content:center;gap:.7cqw;border:1px solid #b3c4d6;background:#e5ebf1;padding:5% 7%;min-width:0}
#build .structure-services strong{font-size:clamp(11px,2.6cqw,18px);font-weight:600;line-height:1.2;letter-spacing:-.025em}
#build .structure-services p{font-size:clamp(9px,1.4cqw,11px);line-height:1.4;color:#506278}
#build .structure-contact{height:11%;padding:0 4%;display:flex;align-items:center;justify-content:space-between;gap:2cqw;border-top:1px solid #b7c8da;background:#dce7f3}
#build .structure-contact>div{display:flex;flex-direction:column;gap:.3cqw}
#build .structure-contact strong{font-size:clamp(10px,1.8cqw,14px);font-weight:600;line-height:1.2}
#build .structure-contact>b{font-size:clamp(9px,1.6cqw,12px);font-weight:600;background:#365c84;color:#fff;padding:1.3cqw 1.8cqw;white-space:nowrap}
@container(max-width:420px){
 #build .structure-nav>span{display:none}
 #build .structure-services p{display:none}
 #build .structure-services>div{padding:5% 6%}
 #build .structure-services span{font-size:8px;letter-spacing:0}
 #build .structure-contact span{display:none}
 #build .phone-copy>b{display:none}
 #build .plan-home{padding:2%}
 #build .plan-home i{display:none}
 #build .plan-home strong{font-size:clamp(10px,2.6cqw,14px)}
}
@container(max-width:360px){
 #build .structure-hero{padding-block:1.5%}
 #build .structure-intro h3{margin:.375cqw 0}
 #build .plan-branches .plan-node{padding-inline:4%}
 #build .plan-branches .plan-node strong{letter-spacing:0}
}
/* 03 — the page plan becomes a confident black-and-white message. */
#build .type-browser{background:#f4f3ee;color:#182019;border-color:#ccd0c8}
#build .type-nav{height:15%;padding:0 5%;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #18201930}
#build .type-nav>strong,#build .finished-nav>strong{display:flex;align-items:center;gap:1.3cqw;font-family:Editorial,Georgia,serif;font-size:5cqw;line-height:1;font-weight:400}
#build .type-nav>strong>span,#build .finished-nav>strong>span{font-family:Manrope,sans-serif;font-size:clamp(8px,1.4cqw,11px);line-height:1.45;letter-spacing:.03em;font-weight:800}
#build .type-nav>p{font-size:clamp(8px,1.4cqw,11px);letter-spacing:.08em}
#build .type-hero{height:64%;padding:5% 5% 3%;display:flex;flex-direction:column;justify-content:space-between}
#build .type-hero>span{font-family:ui-monospace,monospace;font-size:clamp(8px,1.4cqw,11px);letter-spacing:.1em}
#build .type-hero h3{font-size:9.7cqw;font-weight:800;letter-spacing:-.065em;line-height:.91}
#build .type-hero h3 em{font-family:Editorial,Georgia,serif;font-weight:400;font-style:italic;letter-spacing:-.05em}
#build .type-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:15px}
#build .type-bottom>p{font-size:clamp(10px,1.8cqw,14px);line-height:1.6;color:#586057}
#build .type-bottom>span{font-size:clamp(8px,1.45cqw,11px);border-bottom:1px solid #182019;padding-bottom:1.1cqw;letter-spacing:.02em}
#build .type-services{height:13%;display:flex;align-items:center;justify-content:space-between;padding:0 5%;background:#1c2520;color:#e5e8dd;font-family:ui-monospace,monospace;font-size:clamp(8px,1.45cqw,11px);letter-spacing:.08em}
/* 04 — photography and a material palette make the same identity feel finished. */
#build .finished-browser{background:#e8e7dc;color:#f8f7f0;border-color:#adb7a57a}
#build .finished-hero{position:relative;height:75%;overflow:hidden}
#build .finished-hero>img,#build .launch-desktop-hero>img,#build .phone-photo>img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center}
#build .finish-wash{position:absolute;inset:0;background:linear-gradient(90deg,#11201cbe,#10201b1a),linear-gradient(0deg,#10201b80,transparent 70%)}
#build .finished-nav{position:absolute;top:6%;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;gap:15px}
#build .finished-nav>span{font-family:ui-monospace,monospace;font-size:clamp(8px,1.4cqw,11px);letter-spacing:.05em;color:#f4f3e8}
#build .finished-copy{position:absolute;top:31%;left:5%;right:5%}
#build .finished-copy>span{font-family:ui-monospace,monospace;font-size:clamp(8px,1.4cqw,11px);letter-spacing:.12em;color:#e0e8d7}
#build .finished-copy h3{font-size:8cqw;line-height:.94;font-weight:800;letter-spacing:-.06em;margin:2.1cqw 0 1.8cqw}
#build .finished-copy h3 em{font-family:Editorial,Georgia,serif;font-weight:400;font-style:italic;color:#e3e7ce}
#build .finished-copy>p{font-size:clamp(10px,1.75cqw,13px);line-height:1.45;max-width:55%;color:#e7eadf}
#build .finished-cta{position:absolute;right:5%;bottom:7%;display:flex;align-items:center;gap:3cqw;background:#e5e9d3;color:#20382a;border-radius:3px;padding:1.7cqw 2.2cqw;font-size:clamp(8px,1.55cqw,12px);font-weight:600}
#build .finished-cta>b{font-size:2.4cqw;font-weight:400}
#build .finished-services{height:17%;display:grid;grid-template-columns:repeat(3,1fr);color:#25362b;padding:0 5%;gap:5%}
#build .finished-services>div{display:flex;align-items:center;gap:1.7cqw;border-top:2px solid #667a59}
#build .finished-services span{font-family:ui-monospace,monospace;font-size:clamp(8px,1.4cqw,11px);color:#647956}
#build .finished-services strong{font-size:clamp(11px,2.6cqw,19px);font-family:Editorial,Georgia,serif;font-weight:400}
/* 05 — the website expands into a complete desktop and phone experience. */
#build .stage-launch{overflow:visible}
#build .launch-grid{position:absolute;inset:0;border-radius:8px;background-image:radial-gradient(#408bd63b 1px,transparent 1px);background-size:3cqw 3cqw;mask-image:radial-gradient(ellipse,#000 35%,transparent 75%)}
#build .launch-label{position:absolute;left:0;top:2%;display:flex;align-items:center;gap:1.2cqw;font-family:ui-monospace,monospace;font-size:clamp(9px,1.6cqw,12px);letter-spacing:.14em;color:#80c3ff}
#build .launch-label>i{width:.8cqw;height:.8cqw;border-radius:50%;background:#7ddbb0;box-shadow:0 0 15px #7ddbb077}
#build .launch-desktop{position:absolute;top:13%;left:0;width:77%;height:70%;border:1px solid #67847d;border-radius:7px;background:#d9ddcf;overflow:hidden;box-shadow:0 20px 50px #0006;transform:translateX(calc((1 - var(--stage-entry,1)) * -20px));transition:transform .35s ease}
#build .launch-desktop .mock-chrome{height:10%;font-size:clamp(8px,1.2cqw,10px)}
#build .launch-desktop-hero{position:relative;height:75%;overflow:hidden;color:#f1f5e9}
#build .launch-brand{position:absolute;left:6%;top:8%;font-size:clamp(8px,1.5cqw,11px);letter-spacing:.02em}
#build .launch-desktop-hero h3{position:absolute;left:6%;top:29%;font-size:5.8cqw;font-weight:800;line-height:.98;letter-spacing:-.05em}
#build .launch-desktop-hero h3 em{font-family:Editorial,Georgia,serif;font-style:italic;color:#dce9cd}
#build .launch-button{position:absolute;left:6%;bottom:9%;background:#e6ecd3;color:#1b3425;padding:1.3cqw 1.7cqw;border-radius:3px;font-size:clamp(8px,1.45cqw,11px);font-weight:600}
#build .launch-desktop-foot{height:15%;display:flex;align-items:center;gap:5%;padding:0 5%;font-size:clamp(8px,1.4cqw,11px);letter-spacing:.08em;color:#354b38}
#build .launch-phone{position:absolute;top:8%;right:0;width:29%;height:85%;border:4px solid #172122;border-radius:3.5cqw;background:#eeefe6;box-shadow:0 0 0 1px #628081,0 25px 45px #0007;overflow:hidden;transform:translateY(calc((1 - var(--stage-entry,1)) * 55px)) rotate(3deg);transition:transform .4s ease;z-index:3}
#build .phone-speaker{position:absolute;z-index:4;top:1.7%;left:32%;width:36%;height:3%;border-radius:100px;background:#172122}
#build .phone-photo{position:relative;height:56%;overflow:hidden}
#build .phone-photo>img{object-position:57% center}
#build .phone-photo>span{position:absolute;top:19%;left:10%;font-size:clamp(8px,1.4cqw,11px);letter-spacing:.04em;color:#f4f7ed;font-weight:800}
#build .phone-photo h3{position:absolute;left:10%;bottom:13%;font-size:4.2cqw;line-height:1.04;font-weight:800;letter-spacing:-.05em;color:#f6f8ed}
#build .phone-photo h3 em{font-family:Editorial,Georgia,serif;font-style:italic;color:#dce6c4}
#build .phone-copy{padding:11% 9%;display:flex;flex-direction:column;gap:2.1cqw;color:#263b2a}
#build .phone-copy>strong{font-family:Editorial,Georgia,serif;font-size:clamp(10px,2.5cqw,18px);line-height:1.15;font-weight:400}
#build .phone-copy>span{background:#243e2c;color:#f4f6ec;font-size:clamp(8px,1.25cqw,10px);padding:1.4cqw .9cqw;text-align:center}
#build .phone-copy>b{font-family:ui-monospace,monospace;font-size:clamp(8px,1.25cqw,10px);font-weight:400;text-align:center;letter-spacing:.06em}
#build .phone-home{position:absolute;bottom:2%;left:32%;width:36%;height:1%;border-radius:100px;background:#25362c}
#build .launch-inquiry{position:absolute;left:34%;bottom:6%;width:37%;padding:3%;background:#fcfcf7;border:1px solid #becbbd;border-radius:6px;box-shadow:0 15px 40px #0006;color:#263e2c;z-index:4;transform:translateY(calc((1 - var(--stage-entry,1)) * 35px));transition:transform .35s ease}
#build .launch-inquiry>span{display:flex;justify-content:space-between;font-family:ui-monospace,monospace;font-size:clamp(8px,1.45cqw,11px);letter-spacing:.06em}
#build .launch-inquiry>span>i{font-style:normal;font-size:2cqw}
#build .launch-inquiry>div{margin-top:1.6cqw;display:flex;align-items:center;gap:2cqw;padding-bottom:.8cqw;border-bottom:1px solid #cbd3c5}
#build .launch-inquiry b{font-size:clamp(8px,1.4cqw,11px);font-weight:400}
#build .launch-inquiry em{height:.5cqw;flex:1;background:#d9dfd4;max-width:50%}
#build .launch-inquiry>strong{display:block;background:#28523b;color:#fff;padding:1.1cqw;font-size:clamp(8px,1.4cqw,11px);font-weight:400;margin-top:1.8cqw;text-align:center}
#build .launch-checks{position:absolute;bottom:1%;left:0;display:flex;gap:3cqw;align-items:center;font-family:ui-monospace,monospace;font-size:clamp(8px,1.3cqw,10px);letter-spacing:.05em;color:#a2b6ce}
/* The footprint stays fixed while the composition changes. */
@media(min-width:701px) and (max-height:800px){
 #build .assembly-scene{max-width:530px;padding:8px 0 32px}
 #build .assembly-caption{font-size:6px}
}
@media(max-width:900px){#build .assembly-caption{font-size:6px;letter-spacing:.03em}}
@media(max-width:700px){
 #build .assembly-scene{padding:8px 0 34px;max-width:510px}
 #build .assembly-canvas{aspect-ratio:16/11}
 #build .mock-browser{border-radius:6px}
 #build .assembly-caption{font-size:6px;gap:12px}
 #build .launch-phone{border-width:3px}
}
html.reduce-motion #build .build-stage,html.reduce-motion #build .launch-desktop,html.reduce-motion #build .launch-phone,html.reduce-motion #build .launch-inquiry{transition:none;will-change:auto}
@media(prefers-reduced-motion:reduce){#build .build-stage,#build .launch-desktop,#build .launch-phone,#build .launch-inquiry{transition:none;will-change:auto}}
@media(min-width:1151px){#build .story-sticky{padding-right:max(var(--pad),126px)}}
/* Keep the final phone and the pinned scene within their smallest available frames. */
@container(max-width:360px){
 #build .mock-chrome{gap:1.5cqw}
 #build .phone-photo{height:52%}
 #build .phone-copy{padding:7% 8%;gap:1cqw}
 #build .phone-copy>span{padding-block:.8cqw}
}
/* The narrowest illustrated page keeps its hierarchy without crowding the services. */
@container(max-width:290px){
 #build .structure-intro p{display:none}
 #build .finished-nav>span,#build .finished-copy>p{display:none}
 #build .type-bottom>p,#build .plan-foot{display:none}
}
@media(min-width:701px) and (min-height:801px) and (max-height:850px){
 #build .assembly-scene{max-width:620px}
}

/* Browser chrome uses drawn dots, not text symbols or emoji glyphs. */
#build .mock-chrome .mock-dots{display:flex;align-items:center;gap:4px}
#build .mock-dots i{display:block;width:4px;height:4px;border-radius:50%;background:currentColor}


/* ===== readability.css ===== */
/* Readable supporting copy, without changing the site's typographic hierarchy.
   Load last. The animated miniature build scenes are styled in build-stages.css. */
.eyebrow{font-size:12px;letter-spacing:.12em}
.desktop-nav a{font-size:12px;letter-spacing:.14em}
.header-cta{font-size:13px}
.motion-toggle,.menu-toggle{min-height:44px}
.chapter-rail{width:120px;right:10px;padding-left:10px}
.chapter-rail a{font-size:11px;letter-spacing:.04em;gap:8px;min-height:36px}
.chapter-rail b{font-size:11px;letter-spacing:.025em}
.survey-sheet{font-size:12px;letter-spacing:.12em;line-height:1.7}
.survey-bottom{font-size:12px;letter-spacing:.065em;line-height:1.7;color:#b1c1d6}
.survey-bottom>span{max-width:500px;text-align:right}
.survey-caption .eyebrow{font-size:12px}

/* Build navigation and explanations are full-size website content. */
#build .hero-topline{font-size:12px;letter-spacing:.08em;line-height:1.7;color:#a8b9ce}
#build .build-counter{font-size:12px;letter-spacing:.06em}
#build .hero-description{font-size:15px;line-height:1.8;color:#aebdd0}
#build .build-footnote{font-size:12px;letter-spacing:.07em;line-height:1.7;max-width:250px;color:#9caec6}
#build .story-chapters{gap:12px}
#build .story-chapters button{font-size:12px;letter-spacing:0;line-height:1.6;gap:7px;min-height:48px;color:#a5b6cf}
#build .story-chapters button>span{font-size:11px;letter-spacing:0;color:#8da4c5}
#build .story-chapters button.is-active{color:#fff}
#build .story-chapters button.is-active>span{color:#75b8ff}
#build .story-counter{font-size:12px;letter-spacing:.05em;white-space:nowrap}
#build .assembly-scene{padding-bottom:57px}
#build .assembly-caption{font-size:11px;line-height:1.6;letter-spacing:.025em;gap:14px;color:#a5b9d2;bottom:0}
#build .assembly-caption>span{max-width:52%}

/* Gallery controls, explanations, and honest concept labels. */
#designs .section-heading .eyebrow{font-size:12px;letter-spacing:.12em}
#designs .design-tabs button{font-size:12px;letter-spacing:0;min-height:44px}
#designs .design-tabs .tab-number{font-size:11px}
#designs .concept-status{font-size:12px;letter-spacing:.06em;color:#68b1ff;border-color:#59708d}
#designs .concept-meta{gap:20px}
#designs .concept-meta>div{min-width:0;gap:18px}
#designs .concept-meta p{font-size:14px;line-height:1.6;color:#b7c4d5}
#designs .concept-open{font-size:12px;line-height:1.6;min-height:44px;flex-shrink:0}
#designs .concept-disclaimer{font-size:12px;line-height:1.7;color:#adbbce;letter-spacing:.01em}

/* Concept interiors stay miniature, but their meaningful copy is legible. */
#designs .concept-top>div{font-size:10px;letter-spacing:.035em;line-height:1.5;gap:20px}
#designs .concept-label{font-size:11px;line-height:1.6;letter-spacing:.07em}
#designs .hart-text p{font-size:12px;line-height:1.65;color:#4d594a}
#designs .hart-text h3 em{color:#66725b}
#designs .hart-discover,#designs .grain-discover{font-size:10px;letter-spacing:.035em;line-height:1.6;gap:18px}
#designs .hart-photo>span{font-size:10px;letter-spacing:.05em;line-height:1.6;max-width:calc(100% - 30px);text-shadow:0 1px 5px #000}
#designs .hart-side{display:none}
#designs .hart-footer{font-size:10px;line-height:1.4;letter-spacing:.04em;gap:15px}
#designs .current-sub,#designs .grain-brand>span{font-size:9px;letter-spacing:.1em}
#designs .current-kicker{font-size:11px;letter-spacing:.035em;line-height:1.6}
#designs .current-cta{font-size:10px;letter-spacing:.025em;line-height:1.6;gap:18px}
#designs .circuit-note{font-size:10px;line-height:1.6;letter-spacing:.04em;right:14px}
#designs .current-services{font-size:10px;line-height:1.4;letter-spacing:.02em;gap:14px}
#designs .current-services b{margin-right:8px}
#designs .grain-copy p{font-size:12px;line-height:1.65;color:#d7c9bc}
#designs .grain-copy h3 em{color:#c5a991}
#designs .grain-photo>span{font-size:10px;line-height:1.6;letter-spacing:.05em;right:15px;background:#241b1680;padding:6px 8px;border-radius:3px}
#designs .grain-index{font-size:10px;line-height:1.6;letter-spacing:.04em;color:#c6b1a0}

/* Supporting information and terms deserve the same care as headlines. */
#difference .question-number{font-size:12px}
#approach .approach-image>span{font-size:12px;letter-spacing:.06em}
#approach .approach-sign,#approach .process-heading>span{font-size:12px;line-height:1.8;letter-spacing:.06em;color:#aebed2}
#pricing .offer-tag,#pricing .page-list>span,#pricing .care-offer .eyebrow{font-size:12px;letter-spacing:.035em}
#pricing .offer-tag{white-space:normal;line-height:1.5}
#pricing .price>span,#pricing .offer-bottom p>span,#pricing .care-foot>span{font-size:13px;line-height:1.8}
#pricing .care-foot>span{color:#56636f}
#start .optional{font-size:12px;letter-spacing:.03em;color:#a5b9d0}
#start .contact-note,#start .form-privacy{font-size:13px;line-height:1.85;color:#adbed3}
#start .form-heading,#start .inquiry-form label,#start .project-type legend{font-size:13px}
#start .inquiry-form input::placeholder,#start .inquiry-form textarea::placeholder{color:#9eb0c8}
#start .form-status,#start .form-fallback{font-size:15px;line-height:1.75}
.banner-toolbar{font-size:12px;letter-spacing:.055em;color:#adbed4}
.banner-toolbar button{font-size:12px;line-height:1.5}
.footer .footer-top>p{font-size:13px;line-height:1.8}
.footer .back-top,.footer .footer-bottom{font-size:12px;letter-spacing:.035em;line-height:1.8}
.footer .footer-bottom{color:#a7bad1}
.concept-dialog>.eyebrow,.privacy-dialog>.eyebrow{font-size:12px}
.concept-dialog>p:not(.eyebrow),.privacy-dialog>p:not(.eyebrow){font-size:15px;line-height:1.8;color:#4b594a}
.direction-point strong{font-size:13px;line-height:1.6}
.direction-point p{font-size:14px;line-height:1.8;color:#4b594a}
.concept-dialog .dialog-small{font-size:12px!important;line-height:1.8}
.concept-dialog .button{font-size:13px;line-height:1.6}

@media(max-width:1150px){
 #build .hero-topline{font-size:11px;letter-spacing:.05em}
 #build .build-footnote{display:none}
 #build .story-chapters{max-width:none}
 #build .hero-description{font-size:14px}
 #designs .concept-top>div{gap:14px}
}
/* Preserve the deliberate 390px portfolio frame on shorter desktop screens. */
@media(min-width:901px) and (min-height:801px) and (max-height:999px){
 #designs .design-sticky{padding-top:93px;padding-bottom:20px}
 #designs .section-heading{margin-bottom:13px}
 #designs .section-heading .eyebrow{margin-bottom:8px}
 #designs .design-tabs{margin-bottom:12px}
 #designs .design-tabs button{min-height:40px;padding:8px 16px}
 #designs .concept-top>div{font-size:10px}
 #designs .hart-text{padding-top:5px}
 #designs .hart-text h3{font-size:43px;margin-top:9px}
 #designs .hart-text p{font-size:12px;line-height:1.55;margin-top:9px}
 #designs .hart-discover{padding-top:9px;padding-bottom:4px}
 #designs .hart-footer,#designs .current-services{font-size:10px;padding:7px 15px;line-height:1.4}
 #designs .current-kicker{font-size:10px}
 #designs .current-copy h3{font-size:68px;margin-top:10px}
 #designs .current-cta{font-size:10px;margin-top:12px;padding:10px 14px}
 #designs .grain-copy{padding-top:17px;padding-bottom:15px}
 #designs .grain-copy h3{font-size:38px;margin:11px 0}
 #designs .grain-copy p{font-size:12px;line-height:1.6}
 #designs .grain-discover{margin-top:14px}
 #designs .concept-meta{padding:9px 0}
 #designs .concept-meta p{font-size:13px}
 #designs .concept-disclaimer{margin-top:6px}
}
@media(max-width:900px){
 .header-cta{font-size:12px}
 .survey-sheet{font-size:11px}
 .survey-bottom{font-size:11px;letter-spacing:.04em}
 #build .story-chapters button{font-size:11px}
 #build .assembly-caption{font-size:11px}
 #designs .concept-top>div>span:not(:last-child){display:none}
 #designs .concept-top>div{font-size:10px;max-width:55%;text-align:right}
 #designs .concept-meta>div{display:block}
 #designs .concept-meta p{margin-top:8px}
}
@media(max-width:700px){
 .site-header{padding-inline:18px}
 .header-actions{gap:10px}
 .header-cta{font-size:11px;padding:11px 13px;gap:9px}
 .motion-toggle,.menu-toggle{width:24px;min-width:24px;min-height:44px;padding:0}
 .motion-toggle{display:block}
 .survey-sheet{font-size:11px;line-height:1.7;letter-spacing:.08em}
 .survey-bottom{font-size:11px;line-height:1.6;letter-spacing:.025em;gap:20px}
 .survey-bottom>span{max-width:52%}
 .survey-bottom>a{max-width:44%}
 .survey-caption{bottom:145px}
 .survey-caption .eyebrow{font-size:11px}
 .survey-caption .button{font-size:13px}
 #build .hero-topline,#build .build-counter{font-size:11px}
 #build .hero-description{font-size:14px;line-height:1.8}
 #build .story-copy{min-height:325px}
 #build .story-chapters{gap:4px}
 #build .story-chapters button{font-size:11px;letter-spacing:0;flex:1;min-width:0;min-height:57px;line-height:1.7;padding-inline:0}
 #build .story-chapters button:nth-child(2){flex:1.7}
 #build .story-chapters button>span{font-size:11px;letter-spacing:0}
 #build .assembly-scene{padding-bottom:61px}
 #build .assembly-caption{font-size:11px;gap:10px;letter-spacing:0;line-height:1.6}
 #designs .section-heading .eyebrow{font-size:11px}
 #designs .design-tabs button{font-size:11px;min-height:44px;padding:11px 9px;line-height:1.5}
 #designs .concept-status,#designs .concept-disclaimer{font-size:11px}
 #designs .concept-meta p{font-size:13px}
 #designs .concept-open{font-size:12px;min-height:44px}
 #designs .concept-label{font-size:10px;letter-spacing:.015em;line-height:1.5}
 #designs .hart-text p,#designs .grain-copy p{font-size:12px;line-height:1.6}
 #designs .hart-layout{min-height:400px;padding-bottom:20px;gap:12px}
 #designs .hart-text h3{font-size:clamp(35px,8vw,53px);margin-top:18px}
 #designs .hart-discover{font-size:10px;gap:8px;align-items:flex-start;letter-spacing:0;padding-top:16px}
 #designs .hart-photo>span,#designs .hart-side,#designs .hart-footer,#designs .circuit-note,#designs .current-services,#designs .grain-index,#designs .grain-photo>span{display:none}
 #designs .current-layout{min-height:365px;grid-template-columns:1.3fr 1fr}
 #designs .current-kicker{font-size:10px;max-width:150px;line-height:1.5;letter-spacing:.01em}
 #designs .current-copy{padding:24px 15px}
 #designs .current-copy h3{font-size:clamp(60px,14vw,90px);margin-top:20px}
 #designs .current-cta{font-size:10px;white-space:normal;gap:8px;padding:10px;letter-spacing:0;line-height:1.5;margin-top:22px}
 #designs .current-cta>span{flex-shrink:0}
 #designs .grain-layout{min-height:400px;grid-template-columns:.7fr 1.3fr}
 #designs .grain-copy{padding:25px 15px}
 #designs .grain-copy h3{font-size:clamp(27px,6vw,39px);margin:22px 0 17px;line-height:1.08}
 #designs .grain-discover{font-size:10px;letter-spacing:0;gap:9px;line-height:1.6;margin-top:20px}
 #designs .current-sub,#designs .grain-brand>span{font-size:8px}
 #difference .question-number{font-size:11px}
 #approach .approach-image>span{font-size:11px;letter-spacing:.035em}
 #approach .approach-sign,#approach .process-heading>span{font-size:11px;letter-spacing:.03em}
 #pricing .offer-tag,#pricing .page-list>span,#pricing .care-offer .eyebrow{font-size:11px;letter-spacing:.015em}
 #pricing .price>span,#pricing .offer-bottom p>span,#pricing .care-foot>span{font-size:12px}
 #start .optional{font-size:11px}
 #start .contact-note,#start .form-privacy{font-size:12px}
 #start .form-heading,#start .inquiry-form label,#start .project-type legend{font-size:12px}
 .banner-toolbar{font-size:11px;letter-spacing:.025em;gap:12px}
 .banner-toolbar button{font-size:11px;padding:9px 12px}
 .footer .footer-top>p{font-size:12px}
 .footer .back-top,.footer .footer-bottom{font-size:11px;line-height:1.8;letter-spacing:.02em}
 .direction-point{grid-template-columns:1fr;gap:8px}
 .direction-point strong{font-size:13px}
 .direction-point p{font-size:14px}
 .concept-dialog>p:not(.eyebrow),.privacy-dialog>p:not(.eyebrow){font-size:14px}
 .concept-dialog .button{font-size:12px}
}
@media(max-width:400px){
 .site-header{padding-inline:14px}
 .site-header .brand{gap:5px}
 .site-header .brand svg{width:25px;height:29px}
 .site-header .brand>span{font-size:14px}
 .header-actions{gap:7px}
 .header-cta{font-size:11px;padding:11px 9px;gap:0;white-space:nowrap}
 .header-cta>span{display:none}
 #designs .concept-top{padding-inline:15px}
 #designs .concept-top>div{font-size:10px;max-width:55%;letter-spacing:0}
 #designs .hart-layout{grid-template-columns:1.05fr 1fr;padding-inline:15px}
 #designs .hart-text h3{font-size:34px}
 #designs .hart-text p br,#designs .grain-copy p br{display:none}
 #designs .hart-discover{gap:6px}
 #designs .current-copy{padding-inline:13px}
 #designs .current-copy h3{font-size:60px}
 #designs .current-cta{padding:9px 7px}
 #designs .grain-copy{padding-inline:12px}
 #designs .grain-copy h3{font-size:27px}
 #designs .concept-meta{flex-wrap:wrap;gap:8px}
 #designs .concept-open{max-width:none}
 .banner-toolbar>span{max-width:145px}
}
/* Findings verified in the deployed browser: preserve the full opening word
   and reserve a gutter for the fixed chapter rail throughout the page. */
.survey-contractors{font-size:min(11.5vw,21svh);transform:none}
.chapter-rail:has(a[href="#top"].is-current){visibility:hidden;pointer-events:none}
@media(min-width:1151px){
 #build .story-sticky,#designs .design-sticky,#difference,#pricing,#approach,#start,.footer{padding-right:max(var(--pad),146px)}
 .banner-toolbar{padding-right:max(var(--pad),146px)}
}


/* ===== mobile-motion.css ===== */
/* Phone compositions: one build stage per gesture, native scrolling elsewhere.
   JavaScript enables these only with full motion and enough vertical space. */
.build-gesture-hint{display:none}
@media(max-width:700px){
 #build.mobile-build-scroll{height:420svh!important}
 #build.mobile-build-scroll .story-sticky{position:sticky;top:0;display:flex;flex-direction:column;height:100svh;min-height:0;padding:88px var(--pad) 14px;justify-content:space-between;overflow:hidden}
 #build.mobile-build-scroll .hero-topline{flex-shrink:0;font-size:10px;line-height:1.5;letter-spacing:.035em}
 #build.mobile-build-scroll .story-layout{display:flex;flex-direction:column;justify-content:center;flex:1;min-height:0;gap:12px;margin:12px 0}
 #build.mobile-build-scroll .story-copy{flex-shrink:0;width:100%;height:230px;min-height:0;padding:0}
 #build.mobile-build-scroll .build-counter{display:none}
 #build.mobile-build-scroll .story-panel,#build.mobile-build-scroll .story-panel.is-active{position:absolute;inset:0;top:0;padding:0;transform:none}
 #build.mobile-build-scroll .build-word{font-size:clamp(43px,12vw,62px);line-height:1;margin-bottom:8px}
 #build.mobile-build-scroll .story-copy h2{font-size:clamp(25px,6.7vw,32px);line-height:1.1;max-width:none}
 #build.mobile-build-scroll .hero-description{font-size:14px;line-height:1.65;margin-top:12px;max-width:none}
 #build.mobile-build-scroll .assembly-scene{flex-shrink:0;padding:0 0 42px;margin:0;width:100%;max-width:440px}
 #build.mobile-build-scroll .assembly-caption{font-size:10px;line-height:1.5;gap:10px}
 #build.mobile-build-scroll .story-bottom{flex-shrink:0;width:100%;padding:0}
 #build.mobile-build-scroll .build-gesture-hint{display:block;margin:0 0 5px;text-align:center;font-size:12px;line-height:1.5;letter-spacing:.01em;color:#a5bddb}
 #build.mobile-build-scroll .story-chapters button{min-height:50px;font-size:11px;padding:11px 0 0;line-height:1.5}
 #build.mobile-build-scroll .story-chapters button>span{font-size:10px}
}
@media(max-width:700px) and (max-height:740px){
 #build.mobile-build-scroll .story-sticky{padding-top:83px;padding-bottom:10px}
 #build.mobile-build-scroll .hero-topline{font-size:10px}
 #build.mobile-build-scroll .story-layout{gap:8px;margin:8px 0}
 #build.mobile-build-scroll .story-copy{height:215px}
 #build.mobile-build-scroll .build-word{font-size:42px;margin-bottom:6px}
 #build.mobile-build-scroll .story-copy h2{font-size:25px;line-height:1.05}
 #build.mobile-build-scroll .hero-description{font-size:14px;line-height:1.55;margin-top:9px}
 #build.mobile-build-scroll .assembly-scene{max-width:min(100%,calc((100svh - 460px) * 1.4545));padding-bottom:38px}
 #build.mobile-build-scroll .assembly-caption{font-size:10px;line-height:1.4}
}

@media(max-width:900px){
 #designs.mobile-gallery-scroll{height:360svh!important}
 #designs.mobile-gallery-scroll .design-sticky{position:sticky;top:0;height:100svh;min-height:0;padding:88px var(--pad) 16px;justify-content:center;overflow:hidden}
 #designs.mobile-gallery-scroll .section-heading{display:block;margin-bottom:14px;flex-shrink:0}
 #designs.mobile-gallery-scroll .section-heading .eyebrow{font-size:10px;margin-bottom:7px;line-height:1.5}
 #designs.mobile-gallery-scroll .section-heading h2{font-size:clamp(26px,7vw,38px);line-height:1.05;letter-spacing:-.04em}
 #designs.mobile-gallery-scroll .section-heading>p{display:none}
 #designs.mobile-gallery-scroll .design-tabs{margin-bottom:12px;flex-shrink:0;gap:6px}
 #designs.mobile-gallery-scroll .design-tabs button{font-size:11px;line-height:1.4;padding:9px 8px;min-height:44px}
 #designs.mobile-gallery-scroll .design-stage{height:clamp(280px,calc(100svh - 350px),470px);max-height:none;min-height:0;flex-shrink:0}
 #designs.mobile-gallery-scroll .concept-track{height:100%}
 #designs.mobile-gallery-scroll .design-panel{height:100%;overflow:hidden;display:flex;flex-direction:column}
 #designs.mobile-gallery-scroll .concept-top{height:52px;min-height:52px;padding:9px 15px;flex-shrink:0}
 #designs.mobile-gallery-scroll .concept-top>div{font-size:9px;line-height:1.4;max-width:55%}
 #designs.mobile-gallery-scroll .hart-layout,#designs.mobile-gallery-scroll .current-layout,#designs.mobile-gallery-scroll .grain-layout{height:auto;min-height:0;flex:1}
 #designs.mobile-gallery-scroll .hart-layout{padding:0 15px 14px;gap:12px;grid-template-columns:1.3fr 1fr}
 #designs.mobile-gallery-scroll .hart-text{padding-top:14px;padding-bottom:0}
 #designs.mobile-gallery-scroll .hart-text h3{font-size:clamp(30px,8vw,46px);margin-top:14px;line-height:1.02}
 #designs.mobile-gallery-scroll .hart-text p,#designs.mobile-gallery-scroll .grain-copy p{display:none}
 #designs.mobile-gallery-scroll .hart-discover{padding-top:14px;padding-bottom:0;font-size:10px;line-height:1.5;gap:6px}
 #designs.mobile-gallery-scroll .hart-footer,#designs.mobile-gallery-scroll .current-services,#designs.mobile-gallery-scroll .grain-index{display:none}
 #designs.mobile-gallery-scroll .current-layout{grid-template-columns:1.3fr 1fr}
 #designs.mobile-gallery-scroll .current-copy{padding:18px 13px}
 #designs.mobile-gallery-scroll .current-copy h3{font-size:clamp(53px,14vw,85px);margin-top:13px;line-height:.94}
 #designs.mobile-gallery-scroll .current-cta{margin-top:16px;padding:9px 7px;font-size:10px;line-height:1.4;gap:7px}
 #designs.mobile-gallery-scroll .grain-layout{grid-template-columns:.7fr 1.3fr}
 #designs.mobile-gallery-scroll .grain-copy{padding:18px 12px}
 #designs.mobile-gallery-scroll .grain-copy h3{font-size:clamp(26px,6.7vw,39px);margin:16px 0 0;line-height:1.05}
 #designs.mobile-gallery-scroll .grain-discover{margin-top:20px;font-size:10px;line-height:1.5;gap:8px}
 #designs.mobile-gallery-scroll .concept-meta{display:flex;align-items:center;flex-wrap:nowrap;gap:12px;padding:10px 0 0;flex-shrink:0;border:0}
 #designs.mobile-gallery-scroll .concept-meta>div{display:block;flex:1;min-width:0}
 #designs.mobile-gallery-scroll .concept-status{font-size:10px;letter-spacing:0;line-height:1.4}
 #designs.mobile-gallery-scroll .concept-meta p{font-size:12px;line-height:1.5;margin-top:5px}
 #designs.mobile-gallery-scroll .concept-open{font-size:11px;line-height:1.5;max-width:85px;min-height:44px}
 #designs.mobile-gallery-scroll .concept-disclaimer{display:none}
}
@media(max-width:900px) and (max-height:740px){
 #designs.mobile-gallery-scroll .design-sticky{padding-top:83px;padding-bottom:12px}
 #designs.mobile-gallery-scroll .section-heading{margin-bottom:10px}
 #designs.mobile-gallery-scroll .section-heading h2{font-size:26px}
 #designs.mobile-gallery-scroll .design-stage{height:calc(100svh - 330px)}
 #designs.mobile-gallery-scroll .hart-text h3{font-size:30px;margin-top:10px}
 #designs.mobile-gallery-scroll .hart-discover{padding-top:12px}
 #designs.mobile-gallery-scroll .current-copy h3{font-size:53px;margin-top:10px}
 #designs.mobile-gallery-scroll .current-cta{margin-top:12px}
 #designs.mobile-gallery-scroll .grain-copy h3{font-size:26px;margin-top:12px}
 #designs.mobile-gallery-scroll .grain-discover{margin-top:14px}
}

/* Taller phones have room for the supporting concept copy as well. */
@media(max-width:900px) and (min-height:800px){
 #designs.mobile-gallery-scroll .hart-text p,#designs.mobile-gallery-scroll .grain-copy p{display:block;margin-top:12px;font-size:12px;line-height:1.6}
}


/* Scoped review fixes: interface contrast, essential text, navigation and photo framing. */
.header-cta{color:#fff;background:#0665c8}
.mobile-nav{max-height:calc(100svh - 90px);overflow-y:auto;overscroll-behavior:contain}
#designStage{cursor:pointer}
#approach .approach-image img{object-position:62% 45%}
.survey-bottom{font-size:13px;letter-spacing:.015em}
#pricing .care-foot>span,#pricing .offer-bottom p>span,#start .form-privacy{font-size:14px;line-height:1.7}
#designs .concept-open{font-size:13px;line-height:1.5}
@media(max-width:700px){
 .survey-bottom{font-size:13px;line-height:1.5;gap:12px;left:var(--pad);right:var(--pad)}
 .survey-bottom>span{max-width:56%}.survey-bottom>a{max-width:40%}
 .header-cta{font-size:12px;min-height:44px;padding-inline:10px}
 #start .inquiry-form label,#start .project-type legend,#start .optional{font-size:13px}
 #designs .concept-disclaimer{font-size:13px}
 #build.mobile-build-scroll .story-chapters button{font-size:12px}
 #designs.mobile-gallery-scroll .concept-open{font-size:13px;max-width:100px}
 #designs.mobile-gallery-scroll .concept-status{font-size:12px}
 #designs.mobile-gallery-scroll .concept-meta p{font-size:13px}
 .footer .footer-bottom,.footer .back-top{font-size:12px}
}
@media(max-width:350px){
 .header-actions{gap:5px}.header-cta{padding-inline:7px}
 .site-header .brand>span{font-size:13px}.site-header .brand svg{width:23px}
 #build.mobile-build-scroll .story-chapters button{font-size:11px}
}

/* Keep the gallery metadata inside the viewport when its copy wraps. */
@media(max-width:900px){
 #designs.mobile-gallery-scroll .design-stage{flex-shrink:1}
 .motion-toggle,.menu-toggle{width:44px;min-width:44px;height:44px;flex-shrink:0;padding:10px}
 .motion-toggle svg{width:24px;height:24px}
 .menu-toggle{align-items:center}
 .header-actions{gap:4px}
}
@media(max-width:350px){
 .header-cta{width:88px;white-space:normal;text-align:center;justify-content:center;line-height:1.25;padding:6px}
 .header-actions{gap:2px}
}

/* Shared inquiry card, fields and selection controls. */

 #start .inquiry-form{background:#102034;border:1px solid #425a76;border-top:3px solid #2d8cff;border-radius:16px;padding:24px 20px;box-shadow:0 18px 45px #0003;min-width:0}
 #start .form-heading{padding:0;border:0;margin:0 0 10px;letter-spacing:.02em}
 #start .form-heading>span{font-family:Manrope,Arial,sans-serif;font-size:20px;font-weight:800;line-height:1.3;color:#f3f5f8}
 #start .mobile-form-help{display:block;font-size:14px;line-height:1.6;color:#b9c7d9;margin:0 0 24px}
 #start .inquiry-form label,#start .project-type legend{font-family:Manrope,Arial,sans-serif;font-size:14px;font-weight:600;color:#e5edf7}
 #start .inquiry-form input:not([type=radio]),#start .inquiry-form textarea{display:block;box-sizing:border-box;background:#081321;border:1px solid #60748d;border-radius:9px;padding:12px 13px;margin:8px 0 22px;font-size:16px;min-height:50px;line-height:1.5;box-shadow:inset 0 1px 3px #0002;transition:border-color .2s,box-shadow .2s}
 #start .inquiry-form input::placeholder,#start .inquiry-form textarea::placeholder{color:#a4b3c7}
 #start .inquiry-form input:not([type=radio]):focus,#start .inquiry-form textarea:focus{outline:2px solid #7bbcff;outline-offset:2px;border-color:#7bbcff}
 #start .inquiry-form textarea{min-height:145px}
 #start .project-type{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:22px;min-width:0}
 #start .project-type legend{margin-bottom:10px}
 #start .project-type label{display:block;min-width:0}
 #start .project-type label>span{display:flex;align-items:center;gap:10px;min-height:46px;border-radius:9px;background:#081321;border-color:#60748d;font-size:14px;padding:10px 12px;color:#d9e3f1}
 #start .project-type label>span::before{content:'';width:15px;height:15px;border:1px solid currentColor;border-radius:50%;flex-shrink:0}
 #start .project-type input:checked+span{background:#163b65;border-color:#72b7ff;color:#f2f7ff}
 #start .project-type input:checked+span::before{background:#72b7ff;box-shadow:inset 0 0 0 3px #163b65;border-color:#72b7ff}
 #start .form-submit{border-radius:10px;min-height:54px;padding:14px 12px}
 #start .form-submit #submitLabel{font-size:16px;line-height:1.4}
 #start .form-privacy{font-size:13px;line-height:1.6;margin-top:16px;color:#b9c7d9}
 #start .optional{font-size:11px;letter-spacing:.03em}
@media(max-width:350px){#start .inquiry-form{padding:22px 15px}}

@media(min-width:701px){
 #start .inquiry-form{padding:30px;align-self:start}
 #start .form-heading>span{font-size:22px}
 #start .form-row{gap:16px}
}
/* Desktop: 1.6 viewports per stage, versus 0.6 previously. */
@media(min-width:701px) and (min-height:701px){
 #build.build-experience{height:900svh}
}


/* Keep the vertical concept label inside the compact mobile header. */
@media(max-width:700px){#designs .current-sub{letter-spacing:0}}

/* Native mobile stage stops: no touch cancellation or delayed scrollTo writes. */
.viewport-measure{position:fixed;inset:0 auto auto 0;width:0;height:100svh;visibility:hidden;pointer-events:none;contain:strict}
/* Mobile opening: one gesture plays the reveal, then the page scrolls normally.
   The section height stays fixed throughout; no scroll-position writes or jumps. */
@media(max-width:700px){
 .survey.mobile-hero-reveal{height:100svh;min-height:600px}
 .survey.mobile-hero-reveal .survey-sticky{position:relative}
 .mobile-hero-reveal .survey-window{transition:clip-path 1.1s cubic-bezier(.22,.61,.36,1)}
 .mobile-hero-reveal .survey-window>img{transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
 .mobile-hero-reveal .survey-title{transition:transform .7s ease,opacity .45s .12s ease}
 .mobile-hero-reveal .survey-shade{transition:opacity .65s .25s ease}
 .mobile-hero-reveal .survey-caption{transition:opacity .55s .4s ease,transform .7s .35s cubic-bezier(.22,.61,.36,1)}
}
.build-scroll-stop{display:none}
html.build-native-scroll{scroll-snap-type:y proximity}
@media(max-width:700px){
 #build.mobile-build-scroll .build-scroll-stop{display:block;position:absolute;left:0;right:0;top:calc((100% - 100svh) * var(--stop) + 88px);height:1px;pointer-events:none;scroll-snap-align:start;scroll-snap-stop:always}
}

/* The same native stage stops as Build: 0.8 viewports between each preview. */
#designs{height:auto!important;scroll-margin-top:-100px}
#designs.native-gallery{height:calc(var(--gallery-frame-height,100svh) + 160svh)!important}
#designs.native-gallery .design-sticky{position:sticky;top:calc(0px - var(--gallery-pin-offset,0px))}
#designs.gesture-gallery .design-sticky{height:100svh}
/* A short horizontal glide, with a soft finish, for every preview change. */
#designs .concept-track{transform:translate3d(var(--gallery-x,0%),0,0);transition:transform .68s cubic-bezier(.22,.61,.36,1)}
.concept-scroll-stop{display:none}
html.concept-native-scroll{scroll-snap-type:y proximity}
html.concept-native-scroll-exiting{scroll-snap-type:none}
html.concept-native-scroll #designs.native-gallery .concept-scroll-stop{display:block;position:absolute;top:calc((100% - var(--gallery-frame-height,100svh)) * var(--stop) + var(--gallery-pin-offset,0px) + var(--concept-stop-offset,100px));left:0;right:0;height:1px;pointer-events:none;scroll-snap-align:start;scroll-snap-stop:always}
html.concept-native-scroll #designs.native-exit-before .concept-scroll-stop[data-edge="start"],html.concept-native-scroll #designs.native-exit-after .concept-scroll-stop[data-edge="end"]{scroll-snap-align:none}
@media(max-width:700px){
 #designs{scroll-margin-top:-88px;--concept-stop-offset:88px}
}
html.reduce-motion #designs .concept-track{transition:none}
@media(prefers-reduced-motion:reduce){#designs .concept-track{transition:none}}
/* Keep gesture navigation available on compact laptop screens, too. */
@media(min-width:901px) and (max-height:800px){
 #designs.gesture-gallery .design-sticky{padding-top:93px;padding-bottom:18px;overflow:hidden}
 #designs.gesture-gallery .section-heading{display:block;flex-shrink:0;margin-bottom:12px}
 #designs.gesture-gallery .section-heading>p{display:none}
 #designs.gesture-gallery .section-heading .eyebrow{font-size:11px;margin-bottom:7px}
 #designs.gesture-gallery .section-heading h2{font-size:34px;line-height:1.05}
 #designs.gesture-gallery .section-heading h2 br{display:none}
 #designs.gesture-gallery .design-tabs{flex-shrink:0;margin-bottom:12px}
 #designs.gesture-gallery .design-tabs button{min-height:44px;padding:8px 16px}
 #designs.gesture-gallery .design-stage{flex:1;min-height:0;max-height:none}
 #designs.gesture-gallery .concept-track,#designs.gesture-gallery .design-panel{height:100%}
 #designs.gesture-gallery .design-panel{display:flex;flex-direction:column}
 #designs.gesture-gallery .concept-top{height:48px;min-height:48px;padding:8px 28px;flex-shrink:0}
 #designs.gesture-gallery .current-sub,#designs.gesture-gallery .grain-brand>span{font-size:8px;letter-spacing:0}
 #designs.gesture-gallery .hart-layout,#designs.gesture-gallery .current-layout,#designs.gesture-gallery .grain-layout{flex:1;min-height:0;height:auto}
 #designs.gesture-gallery .hart-layout{padding-bottom:15px}
 #designs.gesture-gallery .hart-text{padding-top:5px;padding-bottom:0}
 #designs.gesture-gallery .hart-text h3{font-size:36px;line-height:1.02;margin-top:8px}
 #designs.gesture-gallery .hart-text p{font-size:12px;line-height:1.5;margin-top:8px}
 #designs.gesture-gallery .hart-discover{padding:9px 0 3px}
 #designs.gesture-gallery .hart-footer,#designs.gesture-gallery .current-services,#designs.gesture-gallery .grain-index{display:none}
 #designs.gesture-gallery .current-copy{padding:14px 28px}
 #designs.gesture-gallery .current-copy h3{font-size:59px;margin-top:10px;line-height:.92}
 #designs.gesture-gallery .current-cta{font-size:10px;margin-top:12px;padding:9px 14px}
 #designs.gesture-gallery .grain-copy{padding:15px 28px}
 #designs.gesture-gallery .grain-copy h3{font-size:34px;line-height:1.04;margin:10px 0}
 #designs.gesture-gallery .grain-copy p{font-size:12px;line-height:1.5}
 #designs.gesture-gallery .grain-discover{margin-top:12px}
 #designs.gesture-gallery .concept-meta{flex-shrink:0;padding:9px 0}
 #designs.gesture-gallery .concept-disclaimer{flex-shrink:0;margin-top:6px}
}
@media(min-width:901px) and (max-height:700px){
 #designs.gesture-gallery .hart-text p,#designs.gesture-gallery .grain-copy p{display:none}
 #designs.gesture-gallery .current-copy h3{font-size:49px}
}