:root{--bg:#0e100f;--cream:#fffce1;--muted:#a5a59a;--line:#353730;--panel:#191b18;--orange:#ff8709;--green:#abff84;--lilac:#9d95ff;--blue:#00bae2;--font:'Onest',Arial,sans-serif;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--bg);color:var(--cream);font-family:var(--font);font-size:16px;line-height:1.5;letter-spacing:-.025em}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--orange);outline-offset:6px}::selection{background:var(--orange);color:var(--bg)}button{color:inherit}img{display:block;max-width:100%}.wrap{width:calc(100% - 112px);max-width:1328px;margin-inline:auto}.skip{position:fixed;top:-100px;left:20px;z-index:100;background:var(--cream);color:var(--bg);padding:12px}.skip:focus{top:12px}.header{height:112px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.logo{font-size:44px;line-height:1;font-weight:650;letter-spacing:-.08em;display:inline-flex;align-items:baseline;position:relative}.brand-pixel{display:inline-block;width:8px;height:8px;background:var(--orange);margin:0 8px 0 5px}.logo-digital{font-size:17px;font-weight:450;letter-spacing:-.05em}.header nav{display:flex;gap:32px;font-size:14px}.header nav a{color:#cdcdc0;transition:color .2s}.header nav a:hover{color:var(--orange)}.pill{border:1px solid #76776a;border-radius:100px;display:inline-flex;align-items:center;justify-content:space-between;gap:32px;padding:15px 24px;font-size:15px;line-height:1.25;background:transparent;transition:border-color .2s,color .2s,transform .2s}.pill:hover{border-color:var(--cream)}.pill span{font-size:21px;line-height:.8;transition:transform .2s}.pill:hover span{transform:translate(2px,-2px)}.accent-pill{border-color:var(--orange);padding:19px 27px}.accent-pill:hover{color:var(--orange);border-color:var(--orange)}.hero{padding-top:39px;padding-bottom:48px;position:relative}.hero-meta{display:flex;justify-content:space-between;align-items:center}.eyebrow{font-size:14px;letter-spacing:-.015em}.small-meta,.art-caption,.scroll-note,.strip-note{font-size:11px;letter-spacing:.075em;color:var(--muted)}.hero h1{position:relative;z-index:1;font-size:clamp(88px,11.5vw,166px);line-height:.99;letter-spacing:-.075em;font-weight:500;margin:61px 0 44px;pointer-events:none;width:78%}.hero h1>span:first-child{color:var(--orange)}.hero-asterisk{font-size:.65em;vertical-align:15%;margin-left:28px;color:var(--orange);display:inline-block}.hero-art{position:absolute;right:-20px;top:120px;width:43%;pointer-events:none}.hero-art img{width:100%;height:auto;mix-blend-mode:lighten}.hero-art img:not([src]){visibility:hidden}.art-caption{display:block;text-align:center;font-size:10px;margin-top:-15px;position:relative}.hero-bottom{display:flex;align-items:center;gap:64px;position:relative;z-index:2}.hero-bottom p{font-size:17px;line-height:1.5;color:#c8c9bb;margin:0;max-width:385px;letter-spacing:-.02em}.scroll-note{margin-left:auto;display:flex;gap:18px;align-items:center;font-size:10px;align-self:end}.scroll-note span:last-child{font-size:28px;color:var(--cream)}.service-strip{padding-block:27px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;gap:46px;align-items:center}.service-strip>span{display:inline-flex;align-items:center;gap:10px;font-size:14px}.service-strip .strip-note{margin-left:auto;font-size:12px;letter-spacing:0}.service-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.orange{background:var(--orange)}.green{background:var(--green)}.lilac{background:var(--lilac)}.blue{background:var(--blue)}.footer{border-top:1px solid var(--line);padding-block:35px;display:flex;gap:40px;align-items:center;margin-top:80px}.footer>.logo{font-size:36px}.footer>span,.footer>a:last-child{font-size:13px;color:var(--muted)}.footer>span:nth-last-child(2){margin-left:auto}.menu-button{display:none}.mobile-menu[hidden]{display:none}dialog{color:var(--cream);background:var(--panel);border:1px solid var(--line);border-radius:12px;max-width:900px;width:calc(100% - 40px);max-height:90dvh;padding:56px}dialog::backdrop{background:#000a;backdrop-filter:blur(8px)}.dialog-close{position:absolute;top:18px;right:20px;border:1px solid var(--line);border-radius:50%;width:36px;height:36px;font-size:26px;background:transparent;display:grid;place-content:center}
@media(min-width:1600px){.hero{padding-bottom:70px}.hero h1{margin-block:70px 60px}.hero-art{top:110px}.hero-bottom{gap:80px}}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.header nav{gap:20px}.header{height:96px}.hero h1{font-size:12vw}.hero-art{top:132px;right:0}.hero-bottom{gap:30px}.scroll-note{display:none}.hero-bottom p{font-size:16px}.service-strip{gap:25px}.service-strip .strip-note{display:none}}
@media(max-width:700px){.wrap{width:calc(100% - 40px)}.header{height:80px}.logo{font-size:36px}.logo-digital{font-size:14px}.header nav,.header-cta{display:none}.menu-button{display:flex;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:transparent;flex-direction:column;justify-content:center;align-items:center;gap:5px}.menu-button span{height:1px;width:15px;background:var(--cream)}.mobile-menu{position:absolute;z-index:8;top:80px;left:0;right:0;padding:28px;background:var(--panel);display:grid;gap:22px;border-bottom:1px solid var(--line)}.hero{padding-top:27px;padding-bottom:32px}.hero-meta .small-meta{display:none}.eyebrow{font-size:12px}.hero h1{font-size:clamp(58px,13vw,90px);margin:36px 0 24px;width:100%;letter-spacing:-.075em;line-height:1.05}.hero-asterisk{margin-left:14px}.hero-art{position:relative;top:auto;right:auto;width:60%;margin:-16px -4px -28px auto}.hero-art .art-caption{display:none}.hero-bottom{display:block}.hero-bottom p{font-size:16px;position:relative;margin-top:-105px;max-width:225px;min-height:130px}.desktop-break{display:none}.hero-bottom .pill{margin-top:24px;font-size:14px;padding:17px 22px}.service-strip{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-block:22px}.service-strip>span{font-size:13px}.footer{margin-top:52px;flex-wrap:wrap;gap:24px;padding-block:28px}.footer>span:nth-child(2){margin-left:auto}.footer>span:nth-last-child(2){margin-left:0}.footer>a:last-child{margin-left:auto}dialog{padding:55px 24px 28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Sections share a quiet editorial rhythm. Motion is tied to interaction. */
.hero-art { width:36%; top:105px; right:0; }
.section { padding-top: 100px; }
.section-head { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:54px; }
.section-note { color:var(--muted); font-size:13px; letter-spacing:-.01em; }
h2 { font-size:clamp(42px,4.6vw,66px); line-height:1.08; font-weight:450; letter-spacing:-.062em; margin:0; }
.quiet { color:#939688; }
.orange-text { color:var(--orange); }
.services-layout { display:grid; grid-template-columns:1fr 1fr; gap:70px; }
.services-intro p { margin:28px 0 27px; color:var(--muted); font-size:16px; line-height:1.6; }
.text-link { border:0; background:none; padding:0 0 5px; font-size:14px; display:inline-flex; gap:20px; align-items:center; border-bottom:1px solid #777968; transition:color .2s,border-color .2s; }
.text-link:hover { color:var(--orange); border-color:var(--orange); }
.text-link span { font-size:19px; }
.service-caption { display:flex; justify-content:space-between; max-width:340px; border-top:1px solid var(--line); margin-top:75px; padding-top:14px; font-size:10px; letter-spacing:.07em; color:#939688; }
.service-item { border-bottom:1px solid var(--line); }
.service-item:first-child { border-top:1px solid var(--line); }
.service-item h3 { margin:0; }
.service-item h3 button { display:flex; align-items:center; width:100%; gap:26px; padding:23px 0; background:none; border:0; text-align:left; font-size:31px; font-weight:450; letter-spacing:-.04em; }
.service-item h3 button:hover { color:var(--service-color); }
.service-num { font-size:12px; color:var(--muted); align-self:center; letter-spacing:0; }
.service-toggle { margin-left:auto; font-size:28px; font-weight:400; color:var(--muted); }
.is-open h3 button,.is-open .service-toggle { color:var(--service-color); }
.service-body { display:grid; grid-template-rows:0fr; visibility:hidden; opacity:0; transition:grid-template-rows .38s ease,opacity .3s,visibility .38s; }
.service-body>div { overflow:hidden; padding-left:42px; }
.is-open .service-body { grid-template-rows:1fr; opacity:1; visibility:visible; }
.service-body p { margin:0 0 22px; color:#b7b9ab; font-size:16px; line-height:1.6; max-width:460px; }
.service-tags { display:flex; gap:7px; flex-wrap:wrap; }
.service-tags span { font-size:11px; color:#babcae; border:1px solid var(--line); padding:5px 10px; border-radius:100px; }
.mini-flow { display:flex; align-items:center; gap:13px; padding:25px 0 29px; font-size:12px; }
.mini-flow span:last-child { color:var(--service-color); }
.is-open .mini-flow span { animation:flow-step .42s ease both; }
.is-open .mini-flow span:nth-of-type(2) { animation-delay:.12s; }
.is-open .mini-flow span:nth-of-type(3) { animation-delay:.24s; }
@keyframes flow-step { from {opacity:.2;transform:translateX(-5px)} to {opacity:1;transform:none} }
.mini-flow i { font-style:normal; color:var(--muted); }
.work { padding-top:118px; }
.work .section-head,.process .section-head,.contact .section-head { padding-top:31px; border-top:1px solid var(--line); }
.work-heading,.process-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:44px; }
.work-heading>p,.process-heading>p { font-size:15px; line-height:1.6; color:var(--muted); margin:0 0 6px; }
.case-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.case-card { min-width:0; }
.case-visual { border-radius:8px; position:relative; height:490px; overflow:hidden; }
.case-visual-top { display:flex; justify-content:space-between; gap:20px; align-items:center; position:relative; z-index:2; }
.concept-label { font-size:10px; letter-spacing:.08em; border:1px solid currentColor; padding:5px 8px; border-radius:4px; opacity:.7; white-space:nowrap; }
.garden-visual { background:#dfffd1; padding:27px 30px; color:#1d3628; }
.garden-wordmark { font-size:28px; letter-spacing:-.07em; font-weight:650; line-height:1; }
.garden-wordmark>span { margin-left:3px; font-size:26px; }
.garden-copy { font-size:30px; font-weight:500; line-height:1.08; letter-spacing:-.055em; margin:27px 0 20px; }
.bot-widget { color:var(--cream); width:85%; margin-left:auto; padding:17px; background:#172b22; border-radius:12px; position:relative; min-height:260px; }
.bot-head { display:flex; align-items:center; gap:8px; padding-bottom:12px; border-bottom:1px solid #3b4c40; }
.bot-avatar { background:#dfffd1; color:#172b22; width:31px; height:31px; display:grid; place-items:center; border-radius:50%; font-size:19px; letter-spacing:-.06em; font-weight:600; }
.bot-head strong { display:block; font-size:13px; font-weight:500; }
.bot-head div>span { font-size:10px; color:#aab6a8; display:block; margin-top:1px; }
.bot-demo { font-size:8px; letter-spacing:.08em; color:#8da78d; margin-left:auto; }
.bot-conversation { min-height:84px; padding-block:13px; }
.chat-bubble { font-size:13px; background:#2d4335; padding:10px 13px; border-radius:9px 9px 9px 2px; line-height:1.5; width:max-content; max-width:100%; animation:message-in .35s ease both; }
.bot-actions { display:grid; gap:5px; }
.bot-actions button { background:transparent; border:1px solid #597259; color:#dfffd1; border-radius:6px; padding:10px 12px; font-size:13px; display:flex; justify-content:space-between; transition:border-color .2s; }
.bot-actions button:hover { border-color:#abff84; }
.visual-footnote { font-size:8px; letter-spacing:.08em; position:absolute; left:30px; bottom:15px; opacity:.65; }
.meter-form label { display:block; font-size:11px; margin-bottom:8px; }
.meter-form>div { display:flex; gap:8px; }
.meter-form input { min-width:0; width:100%; border:1px solid #668163; padding:8px; font-size:12px; border-radius:5px; background:transparent; color:var(--cream); }
.meter-form input::placeholder { color:#a8b7a4; }
.meter-form button { background:transparent; border:1px solid #668163; border-radius:50%; font-size:17px; flex:0 0 33px; }
.meter-form>span { display:block; color:#a8b7a4; font-size:9px; margin-top:7px; }
.bot-reset { border:0; background:transparent; color:#abff84; font-size:12px; padding:8px 0 0; text-decoration:underline; text-underline-offset:4px; }
.dog-visual { background:#cdc5df; color:#252132; padding:27px 30px; }
.dog-visual>img { position:absolute; inset:150px 0 0; width:100%; height:calc(100% - 150px); object-fit:cover; object-position:45% 45%; mask-image:linear-gradient(to bottom,transparent,#000 14%); }
.dog-wordmark { font-size:26px; font-weight:700; letter-spacing:-.085em; line-height:1; }
.dog-wordmark sup { font-size:9px; vertical-align:top; margin-left:5px; }
.dog-copy { position:relative; z-index:1; font-size:31px; font-weight:550; line-height:1.04; letter-spacing:-.06em; margin-top:27px; }
.product-preview { position:absolute; left:22px; right:22px; bottom:20px; display:flex; gap:10px; justify-content:space-between; align-items:center; text-align:left; padding:15px 16px; border:1px solid #fffce166; border-radius:8px; background:#fffce1ed; color:#29252a; backdrop-filter:blur(10px); transition:transform .25s; }
.product-preview:hover { transform:translateY(-3px); }
.product-preview strong { display:block; font-size:13px; font-weight:550; }
.product-preview span>span { display:block; font-size:10px; margin-top:4px; color:#65605d; }
.product-arrow { font-size:23px; }
.case-info { padding-top:23px; }
.case-kicker { display:flex; justify-content:space-between; align-items:center; font-size:10px; color:var(--muted); letter-spacing:.04em; }
.case-title-row { display:flex; gap:15px; align-items:center; justify-content:space-between; margin-top:16px; }
.case-title-row h3 { margin:0; font-size:24px; font-weight:450; line-height:1.25; letter-spacing:-.05em; }
.round-button { background:transparent; border:1px solid #53574b; border-radius:50%; width:40px; height:40px; flex:0 0 40px; font-size:23px; transition:border-color .2s,transform .2s; }
.round-button:hover { border-color:var(--orange); transform:rotate(6deg); }
.case-info>p { font-size:14px; line-height:1.65; color:var(--muted); margin:15px 0 22px; max-width:440px; }
.case-info>.text-link { font-size:12px; }
.process { padding-top:105px; }
.process-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.process-tabs button { padding:0 0 22px; border:0; border-bottom:1px solid var(--line); background:none; text-align:left; font-size:16px; letter-spacing:-.03em; position:relative; }
.process-tabs button:after { content:''; position:absolute; left:0; bottom:-1px; height:2px; background:var(--orange); width:100%; transform-origin:left; transform:scaleX(0); transition:transform .4s ease; }
.process-tabs button[aria-selected=true]:after { transform:scaleX(1); }
.process-tabs button>span { display:block; font-size:12px; margin-bottom:14px; color:var(--muted); }
.process-tabs button[aria-selected=true],.process-tabs button[aria-selected=true]>span { color:var(--orange); }
#process-panel { background:var(--panel); border-radius:8px; padding:38px 43px; margin-top:26px; display:grid; grid-template-columns:1.1fr 1fr; gap:90px; min-height:310px; }
.process-index,.process-deliverable>span { font-size:10px; color:var(--muted); letter-spacing:.06em; }
.process-panel-copy h3 { font-size:29px; line-height:1.15; font-weight:450; letter-spacing:-.04em; margin:17px 0 15px; }
.process-panel-copy p { font-size:14px; color:var(--muted); max-width:430px; line-height:1.65; margin:0; }
.process-deliverable { padding-left:40px; border-left:1px solid var(--line); display:flex; flex-direction:column; }
.deliverable-lines { margin-block:13px 25px; }
.deliverable-lines p { margin:0; padding:10px 0; border-bottom:1px solid var(--line); font-size:15px; display:flex; align-items:center; gap:12px; }
.deliverable-lines i { font-style:normal; color:var(--orange); font-size:14px; }
.process-deliverable>.process-note { font-size:10px; letter-spacing:0; margin-top:auto; }
.contact { padding-top:105px; }
.contact-layout { display:grid; grid-template-columns:1.35fr 1fr; gap:80px; align-items:end; padding-bottom:18px; }
.contact h2 { font-size:clamp(48px,5.8vw,84px); }
.contact-right { padding:0 0 5px; }
.contact-right p { font-size:16px; line-height:1.65; color:var(--muted); margin:0 0 25px; }
.telegram-link { min-width:270px; }
.contact-handle { font-size:12px; color:var(--muted); display:block; margin-top:13px; }
.faq { padding-top:100px; }
.faq-layout { display:grid; grid-template-columns:1fr 1fr; gap:70px; }
.faq-intro p { max-width:350px; margin:28px 0 0; color:var(--muted); font-size:16px; line-height:1.6; }
.faq-list { border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item h3 { margin:0; }
.faq-question { display:flex; align-items:center; width:100%; gap:26px; border:0; padding:23px 0; background:transparent; color:var(--cream); text-align:left; font-size:31px; font-weight:450; letter-spacing:-.04em; transition:color .2s ease; }
.faq-num { flex:0 0 auto; align-self:center; color:var(--muted); font-size:12px; letter-spacing:0; }
.faq-question::after { content:'+'; flex:0 0 auto; margin-left:auto; color:var(--muted); font-size:28px; font-weight:400; line-height:1; transition:transform .38s ease,color .2s ease; }
.faq-question:hover,.faq-question:hover::after,.faq-item.is-open .faq-question,.faq-item.is-open .faq-question::after { color:var(--orange); }
.faq-question:hover .faq-num,.faq-item.is-open .faq-num { color:var(--muted); }
.faq-question:focus-visible { outline:2px solid var(--orange); outline-offset:-4px; }
.faq-item.is-open .faq-question::after { transform:rotate(45deg); }
.faq-answer { display:grid; grid-template-rows:0fr; visibility:hidden; opacity:0; transition:grid-template-rows .42s ease,opacity .3s ease,visibility .42s; }
.faq-answer>div { overflow:hidden; padding-left:42px; }
.faq-answer p { max-width:650px; margin:0; padding:0 54px 28px 0; color:#b7b9ab; font-size:16px; line-height:1.6; }
.faq-item.is-open .faq-answer { grid-template-rows:1fr; visibility:visible; opacity:1; }
.contact { padding-top:108px; }
.lead-layout { display:grid; grid-template-columns:1.15fr .85fr; min-height:460px; border-top:1px solid #42433d; border-bottom:1px solid #42433d; }
.contact-visual { display:flex; align-items:center; padding:48px 56px 48px 0; }
.contact-visual-copy { max-width:500px; }
.contact-visual-copy>span,.lead-form-head>span { color:var(--orange); font-size:14px; letter-spacing:-.01em; }
.contact-visual h2 { margin:20px 0; font-size:clamp(44px,5vw,66px); line-height:1.05; }
.contact-visual h2 em { color:inherit; font-style:normal; }
.contact-visual p { margin:0; color:var(--muted); font-size:16px; line-height:1.5; max-width:360px; }
.lead-form { display:flex; flex-direction:column; justify-content:center; gap:16px; padding:48px 0 48px 56px; border-left:1px solid #42433d; background:transparent; }
.lead-form-head { margin-bottom:8px; }
.lead-form-head h3 { margin:7px 0 0; font-size:34px; line-height:1.2; font-weight:450; letter-spacing:-.04em; }
.lead-form label { display:grid; gap:8px; color:var(--cream); font-size:14px; }
.lead-form input { width:100%; border:1px solid #42433d; border-radius:8px; background:transparent; color:var(--cream); padding:14px 16px; font:inherit; font-size:16px; outline:none; }
.lead-form input::placeholder { color:#7c7c6f; }
.lead-form input:focus { border-color:var(--cream); }
.lead-form .pill { margin-top:8px; align-self:flex-start; border-color:var(--cream); padding:15px 24px; font-size:18px; font-weight:600; }
.lead-form .accent-pill:hover { color:var(--cream); border-color:var(--cream); opacity:.8; }
.dialog-kicker { color:var(--orange); font-size:12px; letter-spacing:.07em; }
#dialog-title { font-size:42px; line-height:1.1; letter-spacing:-.055em; font-weight:450; margin:20px 0; }
.dialog-lead { font-size:18px; color:#d6d6c7; line-height:1.55; max-width:640px; }
.case-story { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:30px 0; padding-top:24px; border-top:1px solid var(--line); }
.case-story h3 { font-size:16px; font-weight:500; }
.case-story p { font-size:14px; color:var(--muted); line-height:1.65; }
.dialog-disclaimer { font-size:12px; color:var(--muted); margin-top:26px; }
.shop-demo { border:1px solid var(--line); border-radius:8px; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; }
.shop-demo>img { width:100%; height:100%; object-fit:cover; }
.shop-controls { padding:24px; }
.shop-controls h3 { margin:0 0 10px; font-size:20px; line-height:1.2; font-weight:500; }
.shop-price { font-size:17px; margin-bottom:17px; }
.shop-controls fieldset { border:0; padding:0; margin:0 0 18px; }
.shop-controls legend { font-size:12px; color:var(--muted); margin-bottom:8px; }
.sizes { display:flex; gap:7px; }
.sizes label { position:relative; }
.sizes input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.sizes label span { display:grid; place-items:center; width:37px; height:35px; border:1px solid var(--line); border-radius:4px; font-size:13px; }
.sizes input:checked+span { border-color:var(--orange); color:var(--orange); }
.sizes input:focus-visible+span { outline:2px solid var(--orange); outline-offset:3px; }
.size-note { font-size:12px; color:var(--muted); min-height:36px; margin:10px 0 15px; }
.shop-controls .pill { font-size:12px; padding:12px 15px; width:100%; }
.shop-status { min-height:35px; font-size:12px; color:var(--green); margin:12px 0 0; }
.motion-ready .section-head,.motion-ready .work-heading,.motion-ready .process-heading,.motion-ready .contact-layout { opacity:0; transform:translateY(18px); transition:opacity .65s ease,transform .65s cubic-bezier(.22,.61,.36,1); }
.motion-ready .in-view { opacity:1; transform:none; }
@keyframes message-in { from {opacity:0;transform:translateY(6px)} to {opacity:1;transform:translateY(0)} }
@keyframes content-in { from {opacity:0;transform:translateY(7px)} to {opacity:1;transform:translateY(0)} }
.content-enter { animation:content-in .32s ease both; }
[hidden] { display:none!important; }
@media(max-width:1100px) {
  .services-layout { gap:40px; }
  h2 { font-size:48px; }
  .service-item h3 button { font-size:27px; gap:17px; }
  .service-body>div { padding-left:31px; }
  .case-visual { height:440px; }
  .garden-visual,.dog-visual { padding:22px; }
  .garden-copy,.dog-copy { font-size:27px; }
  .bot-widget { width:94%; padding:14px; }
  .garden-wordmark { font-size:25px; }
  .dog-wordmark { font-size:22px; }
  .case-title-row h3 { font-size:21px; }
  .case-grid { gap:22px; }
  #process-panel { gap:40px; padding:30px; }
  .contact-layout { gap:40px; }
}
@media(max-width:800px) {
  .section { padding-top:72px; }
  .section-head { margin-bottom:35px; }
  .section-note { font-size:11px; }
  .services-layout { grid-template-columns:1fr; gap:34px; }
  .service-caption { display:none; }
  .services-intro p { max-width:480px; }
  .services-intro .desktop-break { display:none; }
  .work-heading,.process-heading { align-items:flex-start; flex-direction:column; gap:23px; margin-bottom:30px; }
  .work-heading>p,.process-heading>p { font-size:14px; }
  .case-grid { grid-template-columns:minmax(0,1fr); gap:45px; }
  .case-visual { height:490px; }
  .garden-visual,.dog-visual { padding:28px; }
  .bot-widget { max-width:370px; width:85%; padding:18px; }
  .garden-copy { margin:29px 0 20px; font-size:32px; }
  .garden-wordmark { font-size:29px; }
  .dog-wordmark { font-size:28px; }
  .dog-copy { font-size:35px; }
  .case-title-row h3 { font-size:26px; }
  .case-info>p { max-width:100%; }
  .process-tabs { gap:13px; }
  .process-tabs button { font-size:13px; }
  #process-panel { gap:25px; padding:28px; grid-template-columns:1fr 1fr; }
  .process-panel-copy h3 { font-size:25px; }
  .process-deliverable { padding-left:25px; }
  .contact-layout { grid-template-columns:1fr; gap:30px; }
  .contact h2 { font-size:60px; }
}
@media(max-width:700px) {
  .hero-art { position:relative; top:auto; right:auto; width:54%; margin:4px auto 24px; }
  .hero-bottom p { margin-top:0; max-width:100%; min-height:0; }
}
@media(max-width:500px) {
  .section-head { align-items:flex-start; }
  .section-note { display:none; }
  h2 { font-size:41px; }
  .services-intro p { font-size:15px; }
  .service-item h3 button { font-size:27px; padding:20px 0; }
  .service-body p { font-size:14px; }
  .service-body>div { padding-left:30px; }
  .mini-flow { gap:9px; font-size:11px; }
  .service-tags span { font-size:10px; }
  .work .section-head,.process .section-head,.contact .section-head { padding-top:25px; }
  .case-visual { height:470px; }
  .garden-visual,.dog-visual { padding:23px 20px; }
  .garden-copy { font-size:29px; margin:25px 0 18px; }
  .bot-widget { width:96%; padding:15px; }
  .bot-head strong { font-size:12px; }
  .bot-demo { font-size:8px; }
  .concept-label { font-size:8px; }
  .garden-wordmark { font-size:25px; }
  .dog-wordmark { font-size:24px; }
  .dog-copy { font-size:31px; }
  .visual-footnote { left:20px; bottom:12px; }
  .case-title-row h3 { font-size:23px; }
  .case-kicker { font-size:9px; }
  .product-preview { left:16px; right:16px; padding:12px; }
  .product-preview strong { font-size:12px; }
  .product-preview span>span { font-size:9px; }
  .process-tabs { gap:10px; grid-template-columns:1fr 1fr; }
  .process-tabs button { font-size:14px; padding:13px 0; }
  .process-tabs button>span { display:inline; margin-right:8px; }
  #process-panel { grid-template-columns:1fr; gap:28px; padding:25px; min-height:495px; }
  .process-panel-copy p { font-size:14px; }
  .process-deliverable { padding-left:0; border-left:0; border-top:1px solid var(--line); padding-top:22px; }
  .deliverable-lines { margin-bottom:20px; }
  .contact h2 { font-size:clamp(37px,10.7vw,53px); }
  .contact-right p { font-size:15px; }
  .footer>.logo { font-size:30px; }
  .footer>span,.footer>a:last-child { font-size:11px; }
  #dialog-title { font-size:32px; }
  .dialog-lead { font-size:16px; }
  .case-story { grid-template-columns:1fr; gap:7px; }
  .shop-demo { grid-template-columns:1fr; }
  .shop-demo>img { height:200px; }
}
@media(prefers-reduced-motion:reduce) {
  .motion-ready .section-head,.motion-ready .work-heading,.motion-ready .process-heading,.motion-ready .contact-layout { opacity:1; transform:none; }
}

/* Slightly quieter hero typography across desktop and mobile. */
.hero h1 { font-size:clamp(76px, 9.6vw, 142px); }
@media(max-width:1100px) { .hero h1 { font-size:clamp(68px, 10vw, 108px); } }
@media(max-width:700px) { .hero h1 { font-size:clamp(52px, 12vw, 80px); } }

/* Keep the first-screen proportion while giving the headline more air. */
.hero { min-height:650px; }
.hero-art { display:none; }
.hero-art.live-workstation { display:block; pointer-events:none; z-index:1; width:39%; max-width:480px; top:84px; right:-8px; filter:drop-shadow(0 20px 28px #0009); }
.hero-art.live-workstation img { width:100%; height:auto; display:block; mix-blend-mode:normal; }
.hero-art.live-workstation video { display:block; width:100%; height:auto; mix-blend-mode:normal; pointer-events:none; }
.hero-art.live-workstation .hero-poster { display:none; }
.hero:has(.live-workstation) h1 { width:59%; }
.hero h1 { font-size:clamp(56px, 6.7vw, 100px); }
.hero-bottom { position:absolute; left:0; right:0; bottom:48px; }
@media(max-width:1100px) { .hero { min-height:610px; } .hero h1 { font-size:clamp(48px, 7vw, 76px); } }
@media(max-width:700px) {
  .hero { min-height:calc(100svh - 80px); }
  .hero h1 { font-size:clamp(40px, 8.4vw, 56px); }
  .hero:has(.live-workstation) h1 { width:100%; }
  .hero-art.live-workstation { width:78%; top:-17px; right:-4px; opacity:.92; }
  .hero-bottom { left:0; right:0; bottom:32px; }
}

/* The service list belongs to the first-screen composition. */
.hero .service-strip { position:absolute; inset:auto 0 0; width:100%; border-top:0; }
.hero-bottom { bottom:112px; }

@media(max-width:700px) { .hero-bottom { bottom:120px; } }

/* The offer headline and workstation are intentionally quieter on desktop. */
.hero--offer { height:760px; min-height:760px; overflow:hidden; }
.hero--offer h1 { width:62%; font-size:clamp(41px,4.25vw,64px); }
.hero-art.live-workstation { width:33%; max-width:408px; right:64px; }
/* Place the description and CTA beneath the workstation; directions remain below them. */
.hero--offer .hero-bottom { top:520px; bottom:auto; }
@media(max-width:1100px) { .hero--offer { min-height:690px; } .hero--offer h1 { width:62%; font-size:clamp(37px,4.6vw,51px); } .hero-art.live-workstation { width:33%; max-width:408px; } .hero--offer .hero-bottom { top:470px; bottom:auto; } }
@media(max-width:700px) { .hero--offer { height:820px; min-height:820px; overflow:hidden; } .hero--offer h1 { width:100%; font-size:clamp(34px,7.5vw,44px); } }
@media(max-width:700px) { .hero--offer .hero-bottom { top:auto; bottom:120px; } .hero-art.live-workstation { right:-4px; } }

@media(max-width:800px) {
  .faq-layout { grid-template-columns:1fr; gap:34px; }
  .faq-intro p { max-width:480px; }
  .faq-question { font-size:27px; gap:17px; padding:20px 0; }
  .faq-answer>div { padding-left:31px; }
  .lead-layout { grid-template-columns:1fr; min-height:0; }
  .contact-visual { min-height:0; padding:48px 0; }
  .lead-form { padding:40px 0 48px; border-top:1px solid #42433d; border-left:0; }
}
@media(max-width:500px) {
  .faq-question { font-size:27px; }
  .faq-answer>div { padding-left:30px; }
  .faq-answer p { padding-right:0; font-size:14px; }
  .contact-visual { padding:40px 0; }
  .lead-form { padding:36px 0 40px; }
  .contact-visual h2 { font-size:46px; }
  .lead-form-head h3 { font-size:30px; }
}

/* The header sits directly in the hero composition without a divider. */
.header { border-bottom:0; }
@media(max-width:700px) {
  .hero--offer h1 { margin-top:-10px; }
  .hero-art.live-workstation { width:90%; right:auto; margin-left:auto; margin-right:auto; }
  .hero-art.live-workstation::after {
    content:'';
    position:absolute;
    z-index:2;
    right:2%;
    bottom:4%;
    width:82px;
    height:22px;
    background:var(--bg);
  }
}