/* A working drawing board, rather than a service brochure. */
.service-page-create .design-studio { background:var(--ha-paper); }
.service-page-create .design-studio > section:not(.page-final-conversation) { padding-inline:max(var(--ha-gutter),calc((100vw - 1400px)/2)); }
.design-studio button { font:inherit; cursor:pointer; }
.design-studio button:focus-visible,.design-studio summary:focus-visible,.design-studio a:focus-visible { outline:3px solid var(--ha-petrol); outline-offset:5px; }
.design-studio [hidden] { display:none!important; }
.studio-opening { background:var(--ha-bloom); padding-block:42px 28px; display:block; }
.service-page-create .studio-title h1 { max-width:23ch; font-size:clamp(48px,5.4vw,78px); line-height:1.02; }
.studio-title > p { max-width:48ch; margin-top:23px; font-size:20px; line-height:1.5; }
.studio-workspace { background:var(--ha-paper-face); padding-block:25px 55px; }
.studio-brief { max-width:100%; }
.service-page-create .studio-brief h2 { font-size:clamp(26px,2.5vw,35px); line-height:1.22; max-width:34ch; }
.example-caption { font-size:14px!important; line-height:1.5!important; max-width:70ch; color:var(--ha-ink-soft); margin:10px 0 22px; }
.studio-controls { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 0 12px; position:relative; z-index:3; }
.form-switch { display:flex; gap:8px; }
.form-switch button { border:2px solid var(--ha-ink); background:transparent; color:var(--ha-ink); padding:12px 24px; border-radius:30px; font-weight:800; font-size:17px; transition:background .2s,color .2s; }
.form-switch button[aria-pressed=true] { background:var(--ha-ink); color:var(--ha-paper); }
.form-switch button[aria-pressed=false]:hover { background:var(--ha-bloom); color:var(--ha-ink); }
.design-studio .try-sketch { border:0; background:var(--ha-bloom); padding:14px 23px; font-weight:800; font-size:16px; border-radius:6px 24px 6px 6px; }
.try-sketch span { font-size:22px; margin-left:7px; }
.try-sketch[aria-pressed=true] { background:var(--ha-petrol); color:var(--ha-paper); }
.drawing-scene { position:relative; height:clamp(720px,53vw,790px); margin:15px 0 14px; isolation:isolate; }

.drawing-scene::after { content:""; position:absolute; bottom:20%; left:-10%; right:-10%; height:16px; transform:rotate(-1deg); background:var(--ha-underside); border-bottom:3px solid var(--ha-ink); z-index:-1; }
.studio-maker { position:absolute; left:-2%; width:47%; height:80%; top:0; }
.studio-maker > img { position:absolute; width:100%; height:100%; object-fit:contain; object-position:center bottom; }
.studio-maker > p { position:absolute; top:13%; left:8%; font:700 32px/1.15 Caveat,cursive; transform:rotate(-7deg); max-width:180px; }
.drawing-sheet { position:absolute; width:68%; right:0; top:4%; background:var(--ha-card); padding:12px; box-shadow:11px 14px 0 rgba(var(--ha-ink-rgb),.13); transform:rotate(-3deg); border:2px solid var(--ha-ink); border-radius:3px; transition:transform .5s; }
.drawing-scene[data-stage=prototype] .drawing-sheet { transform:rotate(0); }
.paper-tape { position:absolute; width:94px; height:28px; left:48%; top:-16px; background:color-mix(in srgb,var(--ha-bloom) 45%,transparent); transform:rotate(7deg); z-index:3; }
.drawing-art { width:100%; display:block; overflow:visible; }
.drawing-art .draw-line { fill:var(--ha-card); stroke:var(--ha-ink); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.drawing-art .picture { fill:var(--ha-paper-face); }
.drawing-art .light-beam { fill:var(--ha-paper-face); opacity:0; transition:opacity .5s,fill .5s; }
[data-stage=prototype] .light-beam { opacity:.45; }
[data-choice=first] .task-beam,[data-choice=second] .room-beam { fill:var(--ha-dry-edge); opacity:1; }
[data-choice=first] .app-light .light-beam,[data-choice=first] .product-beam { fill:var(--ha-dry-edge); opacity:1; }
[data-choice=second] .app-light .light-beam,[data-choice=second] .product-beam { fill:var(--ha-bloom); opacity:.8; }
.drawing-art .outer { stroke-width:4; }
.drawing-art circle { fill:var(--ha-ink); }
.drawing-art text { fill:var(--ha-ink); font:700 18px Manrope,sans-serif; }
.drawing-art .drawing-heading { font-size:26px; font-weight:800; }
.drawing-art .prototype-label { font-size:16px; opacity:0; transition:opacity .4s; }
.drawing-art .annotation path { fill:none; stroke:var(--ha-bloom-deep); stroke-width:3; stroke-linecap:round; }
.drawing-art .annotation text { font:700 23px Caveat,cursive; fill:var(--ha-bloom-deep); }
.artifact { opacity:0; transform-origin:50% 50%; transform:rotate(-7deg) scale(.85); transition:opacity .24s,transform .65s cubic-bezier(.2,.8,.2,1); }
[data-form=website] .artifact-website,[data-form=app] .artifact-app,[data-form=product] .artifact-product { opacity:1; transform:rotate(0) scale(1); }
.drawing-art .option-mark { fill:var(--ha-card); stroke:var(--ha-ink); stroke-width:2; }
.drawing-art .next-piece { fill:var(--ha-card); transition:fill .4s; }
[data-stage=prototype] .prototype-label { opacity:1; }
[data-stage=prototype] .next-piece { fill:var(--ha-bloom); }
[data-stage=prototype] .choice-first { transform:translateY(-4px); }
.choice-piece { transition:transform .4s; }
[data-choice=first] .choice-first .option-card,[data-choice=second] .choice-second .option-card { fill:var(--ha-paper-face); stroke:var(--ha-petrol); stroke-width:5; }
[data-choice=first] .choice-first .option-mark,[data-choice=second] .choice-second .option-mark { fill:var(--ha-petrol); stroke:var(--ha-petrol); }
.product-top { transition:transform .65s; }
[data-stage=prototype] .product-top { transform:translateY(-18px); }
.product-wheel { transform-origin:427px 301px; transition:transform .7s cubic-bezier(.2,.9,.3,1); }
[data-choice=first] .product-wheel { transform:rotate(-25deg); }
[data-choice=second] .product-wheel { transform:rotate(28deg); }
.prototype-slot { position:relative; height:110px; border-top:1px solid var(--ha-hairline); }
.sketch-note { font-size:17px!important; line-height:1.5!important; padding:17px 14px; max-width:50ch; }
.prototype-controls { display:flex; align-items:center; gap:9px; padding:9px 10px 12px; transform:rotate(0); flex-wrap:wrap; }
.prototype-controls > span { font-size:14px; font-weight:700; }
.prototype-controls button { background:var(--ha-paper); color:var(--ha-ink); border:2px solid var(--ha-ink); border-radius:6px; padding:9px 15px; font-weight:750; font-size:14px; }
.prototype-controls button[aria-pressed=true] { background:var(--ha-petrol); color:var(--ha-paper); }
.prototype-controls output { font-size:13px; margin-left:auto; max-width:28ch; }
.studio-pencil { position:absolute; width:280px; height:17px; background:var(--ha-bloom); border:2px solid var(--ha-ink); transform:rotate(-28deg); bottom:27%; left:18%; z-index:3; box-shadow:0 5px 0 rgba(var(--ha-ink-rgb),.1); pointer-events:none; }
.studio-pencil::before { content:""; position:absolute; right:-28px; top:-2px; width:26px; height:17px; background:var(--ha-ink); clip-path:polygon(0 0,100% 50%,0 100%); }
[data-stage=prototype] .studio-pencil { left:4%; top:53%; bottom:auto; width:200px; transform:rotate(-70deg); transition:transform .4s; }
.studio-pencil span { position:absolute; inset:3px 2px auto; border-top:2px solid var(--ha-card); }
.drawing-scene.is-drawing:not([data-stage=prototype]) .studio-pencil { animation:studio-draw .85s ease; }
.drawing-scene.is-drawing .draw-line { animation:studio-ink .75s ease; }
@keyframes studio-draw { 30% { transform:translate(65px,-12px) rotate(-22deg); } 65% { transform:translate(120px,20px) rotate(-30deg); } }
@keyframes studio-ink { 0% { stroke-dasharray:1200; stroke-dashoffset:1200; } 100% { stroke-dasharray:1200; stroke-dashoffset:0; } }
.studio-observation { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start; margin-top:25px; }
.service-page-create .handwritten { font:700 clamp(29px,3.2vw,42px)/1.15 Caveat,cursive; }
.studio-observation .handwritten { color:var(--ha-bloom-deep); transform:rotate(-2deg); max-width:24ch; }
.studio-observation > p:last-child { font-size:18px; line-height:1.6; max-width:52ch; }
.form-explanations { margin-top:30px; }
.form-explanations article { padding-top:20px; border-top:2px solid var(--ha-ink); margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:50px; }
.form-explanations h3 { font-size:28px; max-width:22ch; }
.form-explanations p { font-size:17px; }
.studio-insight { padding-block:88px 70px; display:grid; grid-template-columns:1fr 1.15fr; gap:30px 70px; align-items:center; }
.insight-statement h2 { max-width:14ch; font-size:clamp(36px,4.2vw,60px); }
.insight-statement p { margin-top:25px; max-width:43ch; }
.studio-insight figure { grid-column:2; grid-row:1/3; position:relative; padding-top:20px; transform:rotate(3deg); }
.studio-insight figure::before { content:""; position:absolute; inset:0 15px 36px -15px; background:var(--ha-bloom); transform:rotate(-5deg); z-index:-1; }
.studio-insight figure img { width:100%; aspect-ratio:1.3; object-fit:cover; }
.studio-insight figcaption { font:700 29px/1.2 Caveat,cursive; margin-top:15px; }
.insight-note { padding:25px 26px; max-width:46ch; background:var(--ha-paper-face); transform:rotate(-2deg); }
.insight-note p { font-size:20px; line-height:1.5; font-weight:700; }
.insight-note span { display:block; margin-top:12px; font-size:14px; }
.studio-testing { padding-block:70px 85px; display:grid; grid-template-columns:1fr 1.15fr; gap:70px; }
.testing-intro h2 { font-size:clamp(42px,5.5vw,74px); }
.testing-intro p { max-width:42ch; margin-top:24px; }
.testing-notebook { background:var(--ha-card); padding:30px 35px; border-left:6px solid var(--ha-bloom); box-shadow:8px 9px 0 var(--ha-hairline); }
.testing-notebook .handwritten { font-size:32px; color:var(--ha-bloom-deep); margin-bottom:25px; }
.testing-notebook details { padding:19px 0; border-top:1px solid var(--ha-hairline); }
.testing-notebook summary { font-size:20px; font-weight:750; cursor:pointer; line-height:1.4; }
.testing-notebook details p { font-size:17px; line-height:1.6; margin-top:14px; }
.studio-delivery { padding-block:68px; background:var(--ha-ink); color:var(--ha-paper); display:grid; grid-template-columns:1fr 1.15fr; gap:40px 70px; position:relative; }
.studio-delivery h2 { font-size:clamp(40px,5vw,70px); }
.studio-delivery p { color:var(--ha-soft-on-dark); max-width:46ch; }
.studio-delivery a { display:inline-block; color:var(--ha-bloom); font-size:17px; font-weight:750; margin-top:22px; text-underline-offset:5px; }
.studio-delivery svg { display:none; fill:none; stroke:var(--ha-bloom); stroke-width:4; stroke-linecap:round; }
@media(max-width:1200px) { .drawing-scene { height:690px; }.prototype-slot { height:150px; } }
@media(max-width:1000px) {
 .drawing-scene { height:660px; }.drawing-sheet { width:75%; top:4%; }.studio-maker { left:-10%; width:56%; }.studio-maker > p { top:6%; left:7%; font-size:27px; }.studio-pencil { width:210px; left:16%; }.studio-insight,.studio-testing,.studio-delivery { gap:40px; }.prototype-controls output { margin-left:0; }
}
@media(max-width:760px) {
 .studio-opening { padding-block:27px 24px; }.service-page-create .studio-title h1 { font-size:clamp(40px,8.2vw,64px); max-width:17ch; }.studio-workspace { padding-block:21px 40px; }.service-page-create .studio-brief h2 { font-size:27px; max-width:22ch; }.studio-controls { padding-top:16px; flex-wrap:wrap; gap:12px; }.form-switch { width:100%; }.form-switch button { flex:1; padding:10px 12px; font-size:16px; }.design-studio .try-sketch { font-size:15px; padding:10px 16px; }.drawing-scene { height:575px; margin-top:0; }.studio-maker { left:-12%; width:85%; height:240px; top:0; }.studio-maker > img { object-position:center bottom; }.studio-maker > p { top:0; left:7%; font-size:25px; max-width:130px; }.drawing-sheet { width:96%; top:140px; right:0; padding:6px; box-shadow:6px 8px 0 rgba(var(--ha-ink-rgb),.13); }.studio-pencil { width:150px; left:15%; top:220px; bottom:auto; height:13px; }.studio-pencil::before { height:13px; }[data-stage=prototype] .studio-pencil { width:105px; right:1%; left:auto; top:88px; transform:rotate(8deg); }.drawing-scene::after { top:240px; bottom:auto; }.prototype-slot { height:175px; }.sketch-note { padding:17px 11px; font-size:17px!important; }.studio-observation { grid-template-columns:1fr; gap:18px; margin-top:15px; }.studio-observation .handwritten { max-width:30ch; }.form-explanations article { grid-template-columns:1fr; gap:13px; }.form-explanations h3 { max-width:30ch; font-size:26px; }.studio-insight,.studio-testing,.studio-delivery { grid-template-columns:1fr; padding-block:45px; gap:30px; }.studio-insight figure { grid-column:auto; grid-row:auto; margin:5px 8px; }.studio-insight figure img { aspect-ratio:1.5; }.insight-statement h2 { max-width:20ch; }.insight-note { order:3; max-width:none; }.testing-notebook { padding:22px 24px; }.studio-delivery h2 br { display:none; }.studio-delivery svg { display:block; width:170px; height:65px; justify-self:end; margin-top:-25px; }.prototype-controls { gap:8px; padding:8px 5px; }.prototype-controls > span { flex-basis:100%; }.prototype-controls button { padding:8px 13px; }.prototype-controls output { flex-basis:100%; max-width:none; }.service-page-create .page-final-conversation { padding-block:45px; }
}
@media(max-width:360px) {
 .service-page-create .studio-title h1 { font-size:37px; }.drawing-scene { height:545px; }.studio-maker > p { font-size:23px; left:12%; }.drawing-sheet { top:130px; }.studio-pencil { width:125px; top:210px; }.prototype-slot { height:180px; }.prototype-controls > span { flex-basis:100%; }.studio-observation > p:last-child { font-size:17px; }.studio-controls .form-switch { gap:6px; }.testing-notebook { padding:22px 19px; }
}
@media(prefers-reduced-motion:reduce) { .design-studio *, .design-studio *::before,.design-studio *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

.drawing-art .option-name { font-size:23px; font-weight:800; }
.drawing-art .option-description { font-size:17px; font-weight:600; }
.drawing-art .dial-label { font-size:20px; font-weight:800; }