/* AI Automation Vic: watercolour scenes (home page top, websites page)
   Default styles show a still, finished picture. The "anim" class on <html>
   (added only when motion is allowed and scripts run) turns on the scroll story. */
:root{--paper:#FAF8F3;--ink:#0B1F44;--ink-w:2.6;--ink-t:1.8}
.nb{white-space:nowrap}
.eyebrow{font:700 13px/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#7A5B12;margin:0 0 14px}
.eyebrow-light{color:var(--gold)}
.grain{position:absolute;inset:0;background:url(/img/grain.webp) 0 0/190px 190px;opacity:.26;pointer-events:none}
.paper-sec{background:linear-gradient(rgba(250,248,243,.8),rgba(250,248,243,.8)),url(/img/grain.webp) 0 0/190px 190px var(--paper)}
.btn-ink{background:var(--navy);color:#fff;box-shadow:0 12px 26px -12px rgba(11,31,68,.75)}
.btn-ink:hover{background:#14306A;color:#fff}
.btn-paper{background:rgba(255,250,240,.6);color:var(--navy);border-color:rgba(11,31,68,.6)}
.btn-paper:hover{background:rgba(255,250,240,.9);color:var(--navy);border-color:var(--navy)}

/* ── scene 1: Geelong in watercolour ─────────────────── */
.scene{position:relative}
.scene .stage{position:relative;overflow:hidden}
.scene-bay{--bay-b:-5%}
.scene-bay .stage{height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));min-height:520px;background:#F9D6B4}
.anim .scene-bay{height:300vh;height:300svh}
.anim .scene-bay .stage{position:sticky;top:var(--header-h);min-height:0}
.bay{position:absolute;inset:0;pointer-events:none}
.bay-canvas{position:absolute;left:50%;bottom:var(--bay-b);width:max(108vw,calc((100vh - var(--header-h)) * 1.45));width:max(108vw,calc((100svh - var(--header-h)) * 1.45));aspect-ratio:2400/1500;transform:translateX(-50%)}
.ly{position:absolute}
.anim .ly{will-change:transform}
.ly img.p{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.ly .dk,.ly .v-coral,.ly .v-dusk,.ly .lights{opacity:0}
.ly img:not([src]){visibility:hidden}
.bob{position:absolute;inset:0;transform-origin:50% 82%}
.ink{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--ink);stroke-width:var(--ink-w);stroke-linecap:round;stroke-linejoin:round;opacity:.84}
.ink .t{stroke-width:var(--ink-t)}
.ink .b{stroke-width:calc(var(--ink-w) * 1.2)}
.ly-sun .ink{opacity:.4}
.stars{position:absolute;left:0;top:-16%;width:100%;height:66%;opacity:0}
.stars i{position:absolute;width:.26%;aspect-ratio:1;border-radius:50%;background:#FFF9EC;box-shadow:0 0 6px 1px rgba(255,249,236,.65)}
.bay-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(38,30,98,0) 30%,rgba(38,30,98,.3));opacity:0}
.gt{position:absolute;left:0;width:100%;height:0}
.gull{position:absolute;right:0;top:0;overflow:visible;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.gull .g2{opacity:0}
.gt:nth-child(1){transform:translateX(-58%)}.gt:nth-child(2){transform:translateX(-22%)}.gt:nth-child(3){transform:translateX(-71%)}

.bay-copy{position:relative;z-index:2;padding-top:clamp(26px,6.4vh,76px)}
.bay-copy h1{color:var(--ink);font-size:clamp(46px,8.3vw,108px);font-weight:880;line-height:.93;letter-spacing:-.03em;max-width:8.8em}
.bay-copy .lede{color:#17284F;font-weight:500;max-width:24em;margin:18px 0 24px;line-height:1.5}
.bay-copy .cta-row{display:flex;flex-wrap:wrap;gap:12px}
.bay-dusk,.scroll-cue{display:none}
.anim .bay-dusk{display:block;position:absolute;left:0;right:0;top:clamp(34px,11vh,120px);z-index:2;text-align:center;color:#FFF3DF;opacity:0;pointer-events:none}
.bay-dusk-h{font:850 clamp(36px,6.4vw,80px)/1 var(--display);font-stretch:85%;font-variation-settings:"wdth" 85;letter-spacing:-.02em;margin:0 0 14px}
.bay-dusk p:last-child{font-size:clamp(17px,1.8vw,21px);max-width:24em;margin:0 auto;color:#F1E4F2}
.anim .scroll-cue{display:flex;flex-direction:column;align-items:center;gap:4px;position:absolute;left:50%;bottom:calc(var(--ab,0px) + 14px);transform:translateX(-50%);z-index:2;font:700 11px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.scroll-cue svg{width:18px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* motion (only with the anim class) */
.anim .ink path{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:inkdraw 1.5s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(var(--i) * 22ms + 200ms)}
@keyframes inkdraw{0%{stroke-dashoffset:1;opacity:0}5%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
.anim .bay.drawn .ink path{animation:none;stroke-dasharray:none;stroke-dashoffset:0;opacity:1}
.bay.drawn .ink .f1,.bay.drawn .ink .f2{display:none}
.bay.drawn[data-f="1"] .ink .f0,.bay.drawn[data-f="2"] .ink .f0{display:none}
.bay.drawn[data-f="1"] .ink .f1,.bay.drawn[data-f="2"] .ink .f2{display:inline}
.anim .bay.drawn .ink path.rp{animation:rip 4.6s ease-in-out infinite alternate}
.anim .bay.drawn .ink path.rp2{animation-duration:6.2s;animation-direction:alternate-reverse}
@keyframes rip{from{transform:translateX(-14px);opacity:.25}to{transform:translateX(14px);opacity:1}}
.anim .bob{animation:bob 4.8s ease-in-out infinite alternate}
.anim .ly-boata .bob{animation-duration:6s}
@keyframes bob{from{transform:translateY(-1.4%) rotate(-1.8deg)}to{transform:translateY(1.4%) rotate(2deg)}}
.anim .stars i{animation:twinkle 2.4s ease-in-out infinite alternate;animation-delay:var(--t)}
@keyframes twinkle{from{opacity:.35;transform:scale(.8)}to{opacity:1;transform:scale(1.15)}}
.anim .gt{left:-100%;transform:none;animation:gullfly var(--d) linear infinite;animation-delay:var(--t)}
@keyframes gullfly{from{transform:translate3d(-4%,0,0)}to{transform:translate3d(212%,0,0)}}
.anim .gull{animation:gulldrift 3.4s ease-in-out infinite alternate}
@keyframes gulldrift{from{transform:translateY(-40%)}to{transform:translateY(60%)}}
.anim .gull .g1{animation:flap .62s steps(1) infinite}
.anim .gull .g2{animation:flap .62s steps(1) infinite;animation-delay:-.31s}
@keyframes flap{0%{opacity:1}50%{opacity:0}}
.ly .lights{transition:opacity .5s}
.bay.night .ly .lights{opacity:1;animation:lightson 1.9s steps(1) both}
@keyframes lightson{0%{clip-path:inset(0 0 0 100%)}8%{clip-path:inset(0 0 0 78%)}13%{clip-path:inset(0 0 0 100%)}18%{clip-path:inset(0 0 0 78%)}34%{clip-path:inset(0 0 0 60%)}50%{clip-path:inset(0 0 0 42%)}66%{clip-path:inset(0 0 0 27%)}82%,100%{clip-path:inset(0 0 0 0)}}

/* ── the painting ends on a ragged edge of paper ─────── */
.edge-wrap{position:absolute;left:0;right:0;top:-58px;height:120px;overflow:hidden;z-index:3;pointer-events:none}
.paper-edge{position:absolute;left:50%;top:0;width:max(100%,1200px);height:100%;transform:translateX(-50%);max-width:none}
.pe-fill{fill:var(--paper)}
.pe-rim{fill:none;stroke:rgba(74,52,116,.4);stroke-width:2.5}

/* ── scene 2: the site builds itself ─────────────────── */
.scene-build{background:linear-gradient(rgba(250,248,243,.8),rgba(250,248,243,.8)),url(/img/grain.webp) 0 0/190px 190px var(--paper)}
.scene-build .stage{padding:84px 0 56px;overflow:visible;z-index:4}
.anim .scene-build{height:400vh;height:400svh}
.anim .scene-build .stage{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));padding:0 0 var(--ab,0px);display:flex;align-items:center;overflow:hidden}
.build-grid{width:100%;display:grid;gap:22px}
.build-copy h2{font-size:clamp(26px,4.4vw,56px);margin-bottom:18px}
.build-steps{list-style:none;margin:0;padding:0;counter-reset:bs;display:grid;gap:14px}
.build-steps li{counter-increment:bs;display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-items:start;font-size:16px;line-height:1.45;color:var(--muted)}
.build-steps li::before{content:counter(bs);grid-row:1/3;width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font:800 15px/1 var(--display);color:var(--ink);margin-top:1px}
.build-steps b{font:800 19px/1.2 var(--display);font-stretch:85%;font-variation-settings:"wdth" 85;color:var(--ink)}
.build-steps span{grid-column:2}
.build-note{font-size:13px;color:var(--muted);text-align:center;margin:12px 0 0}
.build-art{min-width:0}
.bf-wrap{--bfw:min(84vw,400px);width:var(--bfw);margin:0 auto;container-type:inline-size}
.bf{position:relative;isolation:isolate;font-size:8px;font-size:2.5cqw;--live:1;--words:1;--proof:1;--toast:1;color:var(--navy);text-align:left}
.bf-bar{position:relative;height:3.4em;display:flex;align-items:center;gap:.6em;padding:0 1.2em;background:#E9EEF7;border-radius:1.6em 1.6em 0 0;opacity:var(--live)}
.bf-bar i{width:.9em;height:.9em;border-radius:50%;background:#C3CCDB}
.bf-tab{margin-left:.7em;font:600 1.1em/1 var(--body);color:var(--muted);background:#fff;padding:.5em .9em;border-radius:.6em}
.bf-live{margin-left:auto;font:700 1.1em/1 var(--body);color:var(--ok);display:flex;align-items:center;gap:.45em}
.bf-live::before{content:"";width:.7em;height:.7em;border-radius:50%;background:#19A866}
.bf-sheet{position:relative;aspect-ratio:400/500}
.bf::before{content:"";position:absolute;inset:0;border-radius:1.6em;background:#fff;box-shadow:0 2px 4px rgba(11,31,68,.06),0 30px 70px -22px rgba(11,31,68,.4),0 0 0 1px rgba(11,31,68,.08);opacity:var(--live);z-index:-1}
.bf-crisp{position:absolute;inset:0;opacity:var(--live)}
.bf-crisp>div{position:absolute}
.c-nav{left:1.5%;top:1.2%;width:97%;height:8%;border-radius:.9em;background:var(--navy)}
.c-hero{left:3.5%;top:11.6%;width:93%;height:42.8%;border-radius:1.4em;background:linear-gradient(140deg,#3D6BFF,#2B5BFF 45%,#14306A)}
.c-btn{left:7.5%;top:41.6%;width:28%;height:6.4%;border-radius:.9em;background:linear-gradient(180deg,#E4BD68,#D6AC55)}
.c-card{top:57.6%;width:29%;height:24.4%;border-radius:1.2em;background:#fff;border:1px solid #DCE6FA;box-shadow:0 .6em 1.6em -.8em rgba(11,31,68,.3)}
.c1{left:3.5%}.c2{left:35.5%}.c3{left:67.5%}
.c-card i{position:absolute;left:10.5%;top:11.5%;width:24%;aspect-ratio:1;border-radius:50%;background:linear-gradient(145deg,#8EC6FF,#6FB8FF)}
.c-strip{left:3.5%;top:84.8%;width:93%;height:12.4%;border-radius:1.2em;background:#EEF3FF}
.c-strip i{position:absolute;top:25.8%;height:48.4%;border-radius:.7em;background:#fff;border:1px solid #D5DFF3}
.c-f1{left:3.2%;width:35.5%}.c-f2{left:41.4%;width:37.1%}
.c-strip .c-send{left:81.2%;width:15.6%;background:var(--blue);border-color:var(--blue)}
.bf-wash{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:none}
.bf-pencil{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:#565C6B;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;display:none}
.bf-text{position:absolute;inset:0}
.bf-text>*{position:absolute;margin:0}
.t-logo{left:3.9%;top:3.5%;width:4.2%;aspect-ratio:1;border-radius:50%;background:var(--sky);box-shadow:0 0 0 .16em #fff;opacity:var(--words)}
.t-brand{left:10.4%;top:1.2%;height:8%;display:flex;align-items:center;font:800 1.36em/1 var(--display);font-stretch:85%;font-variation-settings:"wdth" 85;color:#fff;white-space:nowrap}
.t-h{left:7.5%;top:16.4%;width:64%;font:860 2.95em/1.05 var(--display);font-stretch:85%;font-variation-settings:"wdth" 85;letter-spacing:-.02em;color:#fff}
.t-sub{left:7.5%;top:31.4%;width:60%;font:500 1.1em/1.42 var(--body);color:#E2EBFF}
.t-btn{left:7.5%;top:41.6%;width:28%;height:6.4%;display:flex;align-items:center;justify-content:center;font:700 1.2em/1 var(--body);color:var(--navy);white-space:nowrap}
.t-drop{left:73.5%;top:17%;width:16%;fill:rgba(255,255,255,.2);stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;opacity:var(--words)}
.t-drop .sh{fill:none;stroke-width:3}
.t-card{top:57.6%;width:29%;height:24.4%}
.t1{left:3.5%}.t2{left:35.5%}.t3{left:67.5%}
.t-card b{position:absolute;left:10.5%;top:50%;font:700 1.18em/1.1 var(--body);white-space:nowrap}
.t-card i{position:absolute;left:10.5%;top:72%;font-style:normal;font-size:1.12em;line-height:1;letter-spacing:.08em;color:#C99A2E}
.t-f{top:88%;height:6%;display:flex;align-items:center;font:500 1em/1 var(--body);color:#6A7892;white-space:nowrap;opacity:var(--proof)}
.t-f1{left:6.5%;width:33%;padding-left:.9em}.t-f2{left:42%;width:34.5%;padding-left:.9em}
.t-f.t-send{left:79%;width:14.5%;justify-content:center;color:#fff;font-weight:700}
.bf-toast{position:absolute;right:-5%;top:4.6%;width:62%;display:grid;gap:.5em;padding:1.3em 1.5em;border-radius:1.4em;background:var(--navy);color:#fff;box-shadow:0 1.6em 3.6em -1.2em rgba(11,31,68,.7);opacity:var(--toast);transform:translate3d(0,calc((1 - var(--toast)) * -2.4em),0) scale(calc(.94 + var(--toast) * .06))}
.bf-toast b{display:flex;align-items:center;gap:.5em;font:700 1.22em/1.1 var(--body);color:var(--sky)}
.bf-toast>span{font-size:1.12em;line-height:1.4;color:#DCE8FF}
.bf-toast .dot{width:.6em;height:.6em;border-radius:50%;background:#3DDC97;flex:none}

/* scroll-driven states */
.anim .bf{--live:0;--words:0;--proof:0;--toast:0}
.anim .bf-wash{display:block;opacity:calc(1 - var(--live));-webkit-mask-image:radial-gradient(circle at var(--cx,50%) var(--cy,50%),#000 calc(var(--r,-30) * 1%),transparent calc(var(--r,-30) * 1% + 26%));mask-image:radial-gradient(circle at var(--cx,50%) var(--cy,50%),#000 calc(var(--r,-30) * 1%),transparent calc(var(--r,-30) * 1% + 26%))}
.wa{--cx:26%;--cy:22%}.wb{--cx:22%;--cy:46%}.wc{--cx:50%;--cy:74%}
.anim .bf-pencil{display:block;opacity:calc((1 - var(--live)) * .85)}
.anim .bf-pencil path{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.anim .bf-pencil .w,.anim .bf-pencil .x,.anim .bf-pencil .k{transition:opacity .35s}
.anim .bf.worded .bf-pencil .w,.anim .bf.worded .bf-pencil .x,.anim .bf.proofed .bf-pencil .k{opacity:0!important}
.anim [data-type] .ch{opacity:0}
.anim [data-type] .ch.on{opacity:1}
.anim .t-card b,.anim .t-card i{opacity:0}
.anim .bf-toast .dot{animation:twinkle 1.1s ease-in-out infinite alternate}
.anim .build-steps li{opacity:.34;transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.2,1)}
.anim .build-steps li.on{opacity:1;transform:translateX(6px)}
.anim .build-steps li.on::before{background:var(--ink);color:#fff}

/* ── lower sections: ink and paper accents ───────────── */
.painted .section-head::before{width:112px;height:16px;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 12'%3E%3Cpath d='M3 7 C14 2 22 10 34 6 S56 3 66 7 S78 6 81 5' fill='none' stroke='%230B1F44' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M10 10 C26 8 44 11 60 9' fill='none' stroke='%23D6AC55' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 50%/contain}
.hero .hero-h{color:#fff;font-size:clamp(40px,5.8vw,70px);max-width:11em;margin:0}
.hero-h .hl{position:relative;display:inline-block;color:#fff}
.hero-h .hl::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.04em;height:.14em;border-radius:99px;background:var(--gold);z-index:-1}
.hero .eyebrow{margin-bottom:18px}
.home .hero .wrap{align-items:start}
.teaser .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.ink-rule{display:block;width:100%;height:18px;color:var(--ink)}
.ink-rule path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* ── websites page ───────────────────────────────────── */
.web-hero{position:relative;overflow:hidden;padding:64px 0 150px;background:#F9D6B4 url(/img/sky-gold.webp) 50% 100%/cover}
.web-hero h1{color:var(--ink);font-size:clamp(42px,6.6vw,84px);max-width:10em}
.web-hero .lede{color:#17284F;font-weight:500;margin:18px 0 26px}
.web-hero .cta-row{display:flex;flex-wrap:wrap;gap:12px}
.web-hero .wrap{position:relative;z-index:2}
.web-hero .edge-wrap{top:auto;bottom:-62px}
.web-strip{position:absolute;left:50%;bottom:0;width:max(100%,900px);transform:translateX(-50%);max-width:none;height:auto;opacity:.95}
.includes{display:grid;gap:18px}
.inc{background:#fff;border:1px solid #E2E8F4;border-radius:20px;padding:26px 24px;box-shadow:var(--shadow-sm)}
.inc h3{margin-bottom:8px}
.inc p{margin:0;color:var(--muted)}
.inc-ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;background:linear-gradient(145deg,#F3F6FD,#E4ECFC);color:var(--blue)}
.inc-ico svg{width:24px;height:24px}
.wipe{position:relative;max-width:860px;margin:0 auto;--wipe:42}
.wipe-frame{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);background:#fff;touch-action:pan-y;user-select:none;-webkit-user-select:none;container-type:inline-size}
.wipe-old,.wipe-new{position:absolute;inset:0;font-size:10px;font-size:1.6cqw}
.wipe-old{background:linear-gradient(#c6c6c6,#ececec);font-family:"Times New Roman",Times,serif;color:#000080;padding:3%;display:grid;grid-template-rows:auto auto 1fr auto;gap:3%}
.wipe-old .banner{background:linear-gradient(90deg,#004,#00a);color:#ff0;font-size:2.1em;font-weight:bold;text-align:center;padding:2%;border:3px outset #888}
.wipe-old .mq{color:#c00;font-size:1.25em;white-space:nowrap;overflow:hidden}
.wipe-old .body{font-size:1.5em;line-height:1.3}
.wipe-old u{color:#00e}
.wipe-old .foot{font-size:1.1em;color:#444;display:flex;justify-content:space-between;gap:6px}
.wipe-old .counter{font-family:monospace;background:#000;color:#0f0;padding:0 6px}
.wipe-new{background:linear-gradient(135deg,#14306A,#0B1F44);color:#fff;clip-path:inset(0 0 0 calc(var(--wipe) * 1%));display:grid;grid-template-columns:.8fr 1.2fr;gap:4%;padding:5% 6%;align-items:center}
.wipe-new>div:first-child{order:2;text-align:right}
.wipe-new h3{font-size:4.6em;font-weight:860;line-height:.98;color:#fff}
.wipe-new h3 em{font-style:normal;color:var(--sky)}
.wipe-new p{color:#C9D6F2;font-size:1.35em;margin:.8em 0 1.1em}
.wipe-new .go{display:inline-block;background:var(--gold);color:var(--navy);font-weight:800;padding:.6em 1.1em;border-radius:999px;font-size:1.35em}
.wipe-form{background:rgba(255,255,255,.08);border:1px solid rgba(111,184,255,.3);border-radius:1.4em;padding:7%;font-size:1.25em;display:grid;gap:.7em}
.wipe-form span{background:rgba(255,255,255,.1);border-radius:.7em;padding:.6em .9em;color:#C9D6F2}
.wipe-form .send{background:var(--blue);color:#fff;text-align:center;font-weight:700}
.wipe-handle{position:absolute;top:0;bottom:0;left:calc(var(--wipe) * 1%);width:3px;margin-left:-1.5px;background:var(--gold);pointer-events:none}
.wipe-handle::after{content:"";position:absolute;top:50%;left:50%;width:42px;height:42px;margin:-21px;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1F44' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") 50%/22px no-repeat;box-shadow:0 6px 16px rgba(11,31,68,.35)}
.wipe-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.wipe-range:focus-visible + .wipe-handle::after{outline:3px solid var(--sky);outline-offset:3px}
.wipe-tags{display:flex;justify-content:space-between;margin-top:12px;font:700 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.wipe-note{text-align:center;font-size:13px;color:var(--muted);margin:10px 0 0}

@media (max-width:899px){
  :root{--ink-w:3.5;--ink-t:2.5}
  .scene-bay{--ab:76px;--bay-b:64px}
  .scene-build{--ab:76px}
  .bay-copy .lede{font-size:17px;margin:14px 0 20px}
  .bay-copy .btn{min-height:48px;padding:0 18px}
  .anim .scene-build .stage{align-items:flex-start}
  .anim .build-grid{gap:8px;padding-top:14px}
  .anim .build-copy .eyebrow{display:none}
  .anim .build-copy h2{font-size:clamp(21px,6vw,28px);margin-bottom:8px;text-align:center}
  .anim .build-steps{position:relative;height:66px;display:block}
  .anim .build-steps li{position:absolute;inset:0;opacity:0;transform:translateY(8px);font-size:15px;line-height:1.35;grid-template-columns:28px 1fr;column-gap:10px}
  .anim .build-steps li.on{opacity:1;transform:none}
  .anim .build-steps li::before{width:26px;height:26px;font-size:13px}
  .anim .build-steps b{font-size:17px}
  .anim .bf-wrap{--bfw:min(80vw,calc((100vh - var(--header-h) - 76px - 168px) / 1.34));--bfw:min(80vw,calc((100svh - var(--header-h) - 76px - 168px) / 1.34))}
  .anim .build-note{margin-top:8px;font-size:12px}
  .wipe-new{grid-template-columns:1fr;justify-items:end}
  .wipe-form{display:none}
  .wipe-frame{aspect-ratio:4/3}
  .wipe-old,.wipe-new{font-size:9px;font-size:2.6cqw}
}
@media (min-width:640px){.includes{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){
  .build-grid{grid-template-columns:minmax(0,1fr) auto;gap:clamp(36px,7vw,110px);align-items:center}
  .bf-wrap{--bfw:min(440px,40vw)}
  .anim .bf-wrap{--bfw:min(440px,40vw,calc((100vh - var(--header-h) - 110px) / 1.34));--bfw:min(440px,40vw,calc((100svh - var(--header-h) - 110px) / 1.34))}
  .build-steps{max-width:27em}
  .build-steps li{font-size:17px}
  .includes{grid-template-columns:repeat(4,1fr)}
  .web-hero{padding:88px 0 190px}
}