/* MoJuKo / Dimension. A material-led edition of the studio identity. */
:root { --bg:#e9e5db;--text:#252b25;--muted:#626b5e;--muted-2:#76806f;--accent:#916d43;--accent-light:#af8960;--line:#35442d26;--cream:#e9e5db;--gutter:clamp(24px,5vw,80px); }
html,body { background:var(--bg);color:var(--text); }
body { background-image:none; }
.reading-progress { background:#c39766; }
.promobar { background:#272f27;color:#dbddce;height:32px;font-size:9px;letter-spacing:.04em; }
.promobar strong { font-weight:400; }.promobar .promo-dot { background:#b8c395; }.promobar button { color:#e3e3d4;height:32px;font-size:20px; }
body.has-promo { --promo-height:32px; }.topbar { color:#2e382b; }.nav { height:108px; }
.brand { font-size:31px;letter-spacing:-1.9px;font-weight:650; }.brand-period { font-size:10px;vertical-align:top;display:inline-block;margin-top:2px;margin-left:5px;color:inherit;letter-spacing:0; }
.navlinks { gap:31px; }.navlinks>a:not(.btn) { color:#3e4938;font-size:12px; }.navlinks>a:hover { color:#916d43; }
.nav-cta { color:#25301f;border-color:#6b75534d;border-radius:999px;min-height:45px;font-size:12px;padding-inline:20px; }
.topbar.is-scrolled { background:#e9e5dbed;box-shadow:0 1px 0 #26362322; }.is-scrolled .nav { height:75px; }.navlinks>a[aria-current=location] { color:#86623c; }
.btn.primary { background:#303a2d;border-color:#303a2d;color:#f0eddf;border-radius:999px;box-shadow:none; }.btn.primary:hover { background:#475340;border-color:#475340; }
.btn { border-radius:999px; }.text-link { border-color:#4a5b383b; }.text-link:hover { color:#916d43; }
.eyebrow { color:#777b68; }.status-dot { background:#7e8e5d;box-shadow:none; }
/* A fully interactive, material-driven opening. */
.hero { min-height:970px;height:min(1040px,100svh);padding:165px 0 130px;background:radial-gradient(ellipse at 68% 35%,#f7f1e6 0%,#e9e5db 59%);overflow:hidden;align-items:center; }
.hero-grid { display:grid;grid-template-columns: .95fr 1.05fr;gap:2%;align-items:center;position:relative;z-index:2; }
.hero-content { width:auto;padding:0;max-width:none;position:relative;z-index:2; }
.hero .eyebrow { font-size:9px;letter-spacing:.13em;color:#646e59;gap:11px;margin-bottom:35px;white-space:nowrap; }
.hero h1 { font-size:clamp(98px,10.2vw,155px);line-height:.89;letter-spacing:-.072em;font-weight:450;color:#2a3426; }
.hero h1 em { color:#746147;line-height:1.16;letter-spacing:-.066em;font-weight:350;font-size:1.03em; }
.hero-description { max-width:360px;color:#636e5c;font-size:15px;line-height:1.9;margin-top:30px; }
.hero-ctas { margin-top:35px;gap:25px;align-items:center; }
.hero-ctas .btn { min-height:57px;padding:16px 22px;font-size:12px;gap:25px;white-space:nowrap; }
.hero-work-link { font-size:11px;color:#505d46;display:inline-flex;align-items:center;gap:15px;white-space:nowrap; }
.hero-work-link>span { font-size:19px; }.hero-work-link:hover { color:#987448; }
.hero-location { margin-top:34px;color:#7e856f;font-size:10px;gap:8px; }.hero-location .status-dot { width:4px;height:4px; }
.hero-guides { position:absolute;inset:0;max-width:1536px;width:100%;left:50%;transform:translateX(-50%);pointer-events:none; }
.hero-guides span { position:absolute;top:142px;bottom:100px;width:1px;background:linear-gradient(transparent,#727d4816,transparent); }.hero-guides span:first-child { left:var(--gutter); }.hero-guides span:last-child { right:var(--gutter); }
.hero-bottom { color:#7b826c;bottom:32px;font-size:8px;letter-spacing:.07em;line-height:1.9; }
.hero-bottom b { color:#505c45;font-weight:400; }.hero-bottom .scroll-link { font-size:10px;letter-spacing:0;color:#667158; }.scroll-link span { border-color:#47583244;color:#526040; }
.hero-index { font-size:8px;letter-spacing:.07em;color:#7b826c; }
.sculpture-composition { position:relative;align-self:stretch;min-height:660px;display:flex;flex-direction:column;justify-content:center; }
.sculpture-stage { position:relative;height:565px;width:115%;margin-left:-6%;outline-offset:-15px!important;cursor:grab;touch-action:pan-y; }
.sculpture-stage.is-dragging { cursor:grabbing; }.sculpture-stage>canvas { display:block;width:100%;height:100%;position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .8s; }
.sculpture-stage.scene-ready>canvas { opacity:1; }.sculpture-poster { width:100%;height:100%;object-fit:contain;mix-blend-mode:normal;transition:opacity .6s; }.scene-ready .sculpture-poster { opacity:0; }
.sculpture-meta { display:flex;align-items:center;justify-content:space-between;padding-inline:36px;font-size:7px;color:#979983;letter-spacing:.1em; }
.sculpture-controls { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 25px;padding-top:17px;border-top:1px solid #64713e26;opacity:0;pointer-events:none;transition:opacity .4s; }
.sculpture-composition:has(.scene-ready) .sculpture-controls { opacity:1;pointer-events:auto; }
.finish-selector { display:flex;align-items:center;gap:7px; }.finish-swatch { width:19px;height:19px;padding:0;border-radius:50%;border:2px solid var(--cream);box-shadow:0 0 0 1px transparent;transition:box-shadow .2s; }.finish-swatch[aria-pressed=true] { box-shadow:0 0 0 1px #8a8267; }
.bronze-swatch { background:linear-gradient(130deg,#d2b18b,#876543 60%,#d6b990); }.silver-swatch { background:linear-gradient(130deg,#ffffff,#899596 60%,#dde1df); }
#finishLabel { font-size:8px;color:#7a836d;margin-left:6px; }.drag-note { font-size:8px;color:#7a836d; }.drag-note span { font-size:15px;margin-right:5px; }
#sceneMotion { background:none;border:0;border-bottom:1px solid #9b9f823b;padding:4px 0;color:#848a76;font-size:8px; }
.sculpture-credit { font:italic 16px/1.3 Fraunces,Georgia,serif;color:#8d846c;text-align:center;margin-top:28px; }
/* A simple list is more confident than a decorative ticker. */
.expertise-strip { border-block:1px solid #26392122;background:#e3e0d4; }.expertise-strip>.wrap { min-height:92px; }.expertise-strip b { font-size:14px;color:#566049; }.expertise-strip i { color:#978569;font-size:16px; }.expertise-strip span { font-size:10px;color:#929780; }
/* Studio: contrast, restraint and a genuinely asymmetric composition. */
.studio { background:#29322b;color:#eee9dc;padding-block:105px 34px; }
.studio-kicker { margin-bottom:22px; }.studio-kicker .eyebrow { color:#a5af93; }.studio-kicker>span { color:#8e9985;font-size:8px;letter-spacing:.15em; }
.studio .studio-statement { color:#e7e4d6;font-size:clamp(62px,7.2vw,105px);line-height:1.04;letter-spacing:-.065em;font-weight:400; }.studio-statement em { color:#baa88b; }
.studio-bottom { grid-template-columns:1fr 1fr;gap:10%;margin-top:-160px;align-items:end;position:relative; }
.studio-seal { padding-top:230px;color:#8e9b84;gap:24px; }.seal-symbol { color:#ad9c7e;font-size:74px; }.studio-seal>span:last-child { font-size:8px; }
.studio .studio-copy { max-width:400px;justify-self:end;padding-top:200px; }.studio-copy p { color:#acb7a3;font-size:14px;line-height:1.85; }.studio-copy .dark-link { color:#d1d6c1;border-color:#a1ae8244;font-size:11px; }
.studio-foot { border-color:#bccaaa20;color:#809077;margin-top:50px;font-size:9px; }.studio-foot .status-dot { background:#99aa81; }
/* The work takes centre stage on a light, gallery-like canvas. */
.services { background:#f1eee5;padding-block:115px 110px; }.services .eyebrow { color:#9a8361; }.services h2 { color:#2b3628;font-size:clamp(60px,6vw,88px);line-height:1.01;letter-spacing:-.06em; }.quiet-heading { color:#909882; }
.services .section-intro { color:#6d785f;font-size:14px;max-width:300px; }.preview-instruction { color:#8c957b; }.preview-instruction span { color:#8f7551; }
.service-tabs { border-color:#6e7f5533;margin-bottom:45px;gap:27px; }.service-tabs button { color:#7d896d;font-size:13px; }.service-tabs button span { color:#9ca38e; }.service-tabs button:hover { color:#343e2c; }.service-tabs button[aria-selected=true] { color:#4b583b;border-color:#72805c; }
.service-panel { grid-template-columns:.72fr 1.28fr;gap:6%; }.service-copy h3 { color:#35422b; }.service-copy h3 em { color:#8f7758; }.service-copy p { color:#6b785e;font-size:14px; }.service-copy .micro-label { color:#a68b64; }.service-tags li { border-color:#a8b09066;color:#7a886c;font-size:9px; }.service-copy .text-link { color:#4b5f3b;border-color:#4c62353b; }
.showcase { border-radius:8px;box-shadow:0 20px 42px #2738230d;min-height:560px; }.web-showcase { background:linear-gradient(135deg,#d3d7c7,#a8b49a); }.browser-mock { transform:perspective(1600px) rotateY(-5deg) rotateX(4deg) rotateZ(-2deg);box-shadow:18px 36px 40px #39462c38; }.concept-label { color:#657555;font-size:7px; }.app-showcase .concept-label,.software-showcase .concept-label,.systems-showcase .concept-label { color:#abbc9e; }
.process { background:#e5e2d7; }.process h2 { color:#3d4935;font-size:57px; }.process-intro>p { color:#738067; }.process-intro .dark-link { color:#596c46; }.process-signature { color:#a59273; }.process-step { border-color:#66794b36; }.process-step h3 { color:#485a38; }.process-step p { color:#7b886c; }.process-number { color:#aa987a; }.step-deliverable { color:#9c8b6c; }
/* The commercial details remain crisp and easy to compare. */
.packages { background:#f4f0e7; }.packages h2 { color:#35402d;font-size:clamp(44px,4.8vw,69px); }.packages .section-intro { color:#7b866d; }.packages .eyebrow { color:#9b825b; }
.package-row { border-color:#7584582e; }.package-name h3 { color:#3e4d31; }.package-name p { color:#8a947b; }.package-name .micro-label { color:#a0a58f; }.package-price .price { color:#3d4c30; }.package-price .custom-price { color:#9b8057; }.package-price .offer-label { color:#907b52;border-color:#b4ad8a66; }.package-price .micro-label { color:#9ba58b; }.package-price>p { color:#929d83; }.package-price s { color:#b0b49f; }.package-includes { color:#7a876a; }.package-includes li::before { color:#a6a179; }.package-cta { color:#7c8b68; }.round-arrow { color:#7d8c67;border-color:#86976166; }.package-recommended .round-arrow { color:#f3f2e4;background:#7e8d64;border-color:#7e8d64; }.package-recommended::before { background:#b4be9e12;z-index:0; }.package-recommended>* { position:relative;z-index:1; }.package-note>span { color:#a4aa92; }.package-note>a { color:#798b62; }
.faq { background:#eae7dc;border-color:#6f825128; }.faq h2 { color:#445638; }.faq .section-intro,.faq .text-link { color:#7c8c6a; }.faq .eyebrow { color:#a29474; }.faq-item { border-color:#7e936032; }.faq-q { color:#657752; }.faq-q>span { color:#9ca379; }.faq-a p { color:#8b9878; }
.contact { color:#e1e4d2;background:#2a342d;padding-block:130px 110px; }.contact h2 { color:#e5e5d8;font-size:clamp(48px,5.2vw,75px); }.contact h2 em { color:#b5ac92; }.contact .eyebrow { color:#9fab8d; }.contact-info>.section-intro { color:#a7b69a; }.contact-email { color:#d4ddc2;border-color:#bcc7a04d;font-size:25px; }.contact-email>span { color:#b4c291; }.contact-details { color:#819673; }.contact-details>span:first-child { color:#b3c89e; }
.form-card { border:0;background:#d3dfbf08;padding:38px;border-radius:3px; }.form-intro h3 { color:#d3dec3; }.form-intro p { color:#859978; }label { color:#b1c39f; }input,textarea,select { background:#1e291f5c;border-color:#a2b78a23;color:#dbe5ca; }input::placeholder,textarea::placeholder { color:#6e8964; }select option { color:#d8e4c8;background:#293b29; }.form-actions .btn.primary { background:#bac4a1;color:#25311f;border-color:#bac4a1; }.form-actions>a { color:#8ea77e; }.fine { color:#6c8961; }
footer { background:#202b23;color:#c6d4b4;border-color:#9caf8726; }.footer-top .brand { font-size:27px; }.footer-top p { color:#688361; }.footer-wordmark { color:#c4d1b6;letter-spacing:-.075em; }.footer-wordmark>span { color:#809a70; }.back-top { color:#91aa7f; }.footer-bottom,.footer-bottom button { color:#6e8c63; }.footer-bottom { border-color:#9eb38422; }.footer-top .brand-period { font-size:8px; }
.cookie-banner { color:#dbe5ce;border-color:#8fae624d;background:#263328f7; }.cookie-text p { color:#9aae8d; }.cookie-actions .btn { color:#c0d4ad;border-color:#9caf874d; }.cookie-actions .btn.primary { background:#b5c59f;color:#283820;border-color:#b5c59f; }
.wa-fab { background:#344d34;border-color:#b6c8a477;color:#e2ead2; }
@media(min-width:1600px) { .hero { min-height:990px; }.hero h1 { font-size:155px; } }
@media(max-width:1100px) {
 .navlinks { gap:22px; }.hero { min-height:900px;height:auto;padding-top:165px; }.hero h1 { font-size:115px; }.hero-grid { grid-template-columns:.95fr 1.05fr;gap:0; }.hero-description { font-size:14px;max-width:335px; }.hero-ctas { gap:19px;flex-wrap:wrap; }.hero-ctas .btn { font-size:11px;padding-inline:19px; }.hero-work-link { font-size:10px; }.sculpture-stage { height:535px;width:115%;margin-left:-6%; }.sculpture-composition { min-height:620px; }.sculpture-controls { margin-inline:10px;gap:8px; }.sculpture-meta { padding-inline:15px;font-size:6px; }.drag-note { display:none; }.sculpture-credit { font-size:14px; }.hero .eyebrow { font-size:8px;letter-spacing:.08em; }.hero-index { font-size:7px; }.studio .studio-statement { font-size:80px; }.studio-bottom { margin-top:-125px; }.studio-seal { padding-top:200px; }.studio .studio-copy { padding-top:160px; }.showcase { min-height:490px; }.process h2 { font-size:49px; }
}
@media(max-width:820px) {
 .navlinks { gap:15px; }.navlinks>a:not(.btn) { font-size:11px; }.brand { font-size:29px; }.nav-cta { padding-inline:15px;font-size:10px; }.hero { min-height:880px;padding-top:175px;padding-bottom:130px; }.hero h1 { font-size:94px; }.hero-description { font-size:13px;max-width:295px; }.hero .eyebrow { font-size:7px; }.hero-ctas { gap:15px; }.hero-ctas .btn { min-height:49px;font-size:10px;padding-inline:17px;gap:21px; }.hero-work-link { font-size:10px; }.hero-location { font-size:9px; }.sculpture-composition { min-height:560px; }.sculpture-stage { height:445px;width:125%;margin-left:-12%; }.sculpture-meta { display:none; }.sculpture-controls { gap:12px;margin-inline:0;flex-wrap:wrap; }.sculpture-credit { font-size:12px; }.finish-swatch { width:17px;height:17px; }#finishLabel { font-size:7px; }#sceneMotion { font-size:7px; }.hero-bottom { font-size:7px; }.hero-bottom .scroll-link { font-size:9px; }.hero-index { display:none; }
 .studio { padding-top:75px; }.studio .studio-statement { font-size:64px; }.studio-bottom { margin-top:0;gap:6%; }.studio-seal { padding-top:0; }.studio .studio-copy { padding-top:25px; }.studio-copy p { font-size:13px; }.studio-seal>span:last-child { font-size:7px; }.studio-kicker>span { font-size:6px; }.services { padding-block:85px; }.services h2 { font-size:65px; }.service-panel { grid-template-columns:1fr; }.showcase { min-height:485px; }.service-copy p { font-size:14px; }.process h2 { font-size:44px; }.contact h2 { font-size:63px; }
}
@media(max-width:640px) {
 .promobar { padding-inline:12px 35px; }.promobar strong { font-size:8px; }.promobar button { font-size:18px;right:2px; }.promobar a>span:last-child { display:none; }.topbar .nav { height:80px; }.brand { font-size:28px; }.brand-period { font-size:8px; }.menu-toggle { border:1px solid #68714b4d;border-radius:50%;width:40px;height:40px; }.menu-toggle span { background:#39482e; }.navlinks { background:#e9e5dbfa;border-color:#7c8e5433;box-shadow:0 10px 20px #39432b0c; }.navlinks>a:not(.btn) { font-size:15px;border-color:#84926b26; }.navlinks .btn { color:#415330;border-color:#81986555; }.nav { gap:15px; }
 .hero { min-height:1120px;height:auto;display:block;padding:152px 0 100px;background:radial-gradient(ellipse at 60% 50%,#f7f1e5,#e9e5db 70%); }.hero-grid { display:flex;flex-direction:column;gap:0; }.hero-content { align-self:stretch; }.hero .eyebrow { font-size:7px;letter-spacing:.1em;margin-bottom:26px; }.hero h1 { font-size:clamp(90px,23vw,135px);line-height:.85; }.hero h1 em { line-height:1.13; }.hero-description { font-size:13px;line-height:1.85;max-width:350px;margin-top:21px; }.hero-ctas { margin-top:24px;gap:24px;flex-wrap:nowrap; }.hero-ctas .btn { font-size:10px;min-height:47px;padding:13px 16px;gap:20px; }.hero-work-link { font-size:9px;gap:9px; }.hero-work-link span { font-size:17px; }.hero-location { font-size:9px;margin-top:22px; }.hero-guides span { top:110px;bottom:80px; }
 .sculpture-composition { min-height:460px;width:100%;margin-top:18px; }.sculpture-stage { width:calc(100% + 48px);height:380px;margin-left:-24px; }.sculpture-controls { margin-inline:5px;padding-top:14px;gap:12px;flex-wrap:nowrap; }.finish-swatch { width:17px;height:17px; }#finishLabel { font-size:8px; }#sceneMotion { font-size:8px; }.drag-note { display:inline;font-size:7px; }.drag-note span { font-size:13px; }.sculpture-credit { font-size:13px;margin-top:22px; }.hero-bottom { bottom:25px;font-size:6px; }.hero-bottom .scroll-link { font-size:8px;gap:10px; }.scroll-link span { width:32px;height:32px;font-size:15px; }
 .expertise-strip>.wrap { min-height:72px;gap:13px; }.expertise-strip b { font-size:10px; }.expertise-strip i { font-size:13px; }.studio { padding-block:64px 28px; }.studio-kicker { margin-bottom:23px; }.studio .studio-statement { font-size:clamp(45px,12vw,63px);line-height:1.06;letter-spacing:-.055em; }.studio-statement br { display:block; }.studio-statement em { display:inline; }.studio-bottom { display:flex;flex-direction:column-reverse;margin-top:30px;gap:33px; }.studio .studio-copy { padding:0;max-width:100%; }.studio-copy p { font-size:13px;line-height:1.9; }.studio-copy .dark-link { font-size:11px; }.studio-seal { gap:20px; }.seal-symbol { font-size:60px; }.studio-seal>span:last-child { font-size:7px; }.studio-foot { font-size:8px;margin-top:34px; }
 .services { padding-block:70px; }.services h2 { font-size:clamp(45px,11vw,61px); }.services .section-intro { font-size:13px;max-width:350px; }.service-tabs { gap:0 20px;margin-bottom:27px; }.service-tabs button { font-size:12px; }.showcase { min-height:350px;border-radius:5px; }.service-copy h3 { font-size:35px; }.service-copy p { font-size:13px;line-height:1.9; }.concept-label { font-size:6px; }.app-showcase { min-height:410px; }.service-copy .text-link { font-size:12px; }
 .process { padding-block:68px; }.process h2 { font-size:49px; }.process-intro>p { font-size:13px; }.process-step p { font-size:13px; }.packages h2 { font-size:43px; }.package-row { gap:26px 18px; }.package-price .price { font-size:34px; }.package-cta { border-color:#82976122; }.faq h2 { font-size:44px; }.faq-q { font-size:13px; }.faq-a p { font-size:13px; }
 .contact { padding-block:75px; }.contact h2 { font-size:51px;line-height:1.05; }.contact-info>.section-intro { font-size:13px; }.contact-email { font-size:24px; }.contact-details { font-size:10px; }.form-card { padding:28px 20px; }.form-intro h3 { font-size:23px; }.form-intro p { font-size:11px; }.form-actions .btn { font-size:11px; }.form-actions>a { font-size:10px; }.footer-top .brand { font-size:26px; }.footer-wordmark { font-size:22vw;letter-spacing:-.08em; }.footer-bottom { font-size:9px; }
 html:not(.js) .hero { padding-top:235px; }
}
@media(max-width:360px) {
 .promobar strong { font-size:7px; }.hero { padding-top:145px;min-height:1080px; }.hero h1 { font-size:87px; }.hero-description { font-size:12px; }.hero .eyebrow { font-size:6px; }.hero-ctas { gap:16px; }.hero-ctas .btn { font-size:9px;padding-inline:13px;gap:17px; }.hero-work-link { font-size:8px;gap:8px; }.hero-location { font-size:8px; }.sculpture-composition { min-height:430px; }.sculpture-stage { height:350px; }.drag-note { display:none; }.hero-bottom { font-size:6px; }.hero-bottom .scroll-link { font-size:7px; }
 .studio .studio-statement { font-size:44px; }.services h2 { font-size:43px; }.showcase { min-height:315px; }.app-showcase { min-height:390px; }.process h2 { font-size:44px; }.packages h2 { font-size:39px; }.package-price .price { font-size:29px; }.faq h2 { font-size:39px; }.contact h2 { font-size:44px; }.form-card { padding-inline:16px; }.form-actions .btn { font-size:10px; }.expertise-strip>.wrap { gap:10px; }.expertise-strip b { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) {
 .hero-content>* { animation:none!important; }.sculpture-stage>canvas,.sculpture-poster { transition:none; }
}

/* Readable detail and generous targets, even when the art is still. */
.sculpture-controls { visibility:hidden; }
.sculpture-composition:has(.scene-ready) .sculpture-controls { visibility:visible; }
.finish-selector { gap:2px; }
.finish-swatch { width:40px;height:40px;position:relative;border:0;background:transparent;box-shadow:none!important; }
.finish-swatch::before { content:'';position:absolute;inset:10px;border-radius:50%;border:2px solid var(--cream);box-shadow:0 0 0 1px transparent; }
.finish-swatch[aria-pressed=true]::before { box-shadow:0 0 0 1px #756b52; }
.bronze-swatch::before { background:linear-gradient(130deg,#d2b18b,#876543 60%,#d6b990); }
.silver-swatch::before { background:linear-gradient(130deg,#ffffff,#899596 60%,#dde1df); }
#finishLabel,.drag-note,#sceneMotion { font-size:10px;color:#626d55; }
#finishLabel { margin-left:2px; }
#sceneMotion { min-height:40px; }
.sculpture-controls { padding-top:9px; }
.sculpture-meta { color:#707861;font-size:8px; }
.process-step p,.process-intro>p,.package-includes,.package-name p,.package-price>p,.packages .section-intro,.faq-a p,.faq .section-intro { color:#626f54; }
.package-note>span,.step-deliverable { color:#76765d; }
.form-intro p,.contact-details,.fine,.footer-bottom,.footer-bottom button,.footer-top p { color:#a5b699; }
input::placeholder,textarea::placeholder { color:#91a585; }
.studio .studio-statement em { color:#baa88b; }
@media(max-width:1100px) { #finishLabel,#sceneMotion { font-size:9px; } }
@media(max-width:640px) {
 .finish-swatch { width:40px;height:44px; }.finish-swatch::before { inset:12px 10px; }
 .drag-note { display:none; }#finishLabel,#sceneMotion { font-size:10px; }#sceneMotion { min-height:44px; }
}

@media(min-width:641px) and (max-width:960px) {
 .services .section-heading,.packages .section-heading { flex-direction:column;align-items:flex-start;gap:26px; }
 .services .section-intro,.packages .section-intro { max-width:440px; }
 .services h2 { font-size:clamp(54px,7.8vw,74px); }
}

/* Keep the sample website's authorship clear beside the illustration. */
.web-showcase .concept-label { font-size:9px;color:#445437;letter-spacing:.08em; }
@media(max-width:640px) { .web-showcase .concept-label { font-size:8px;letter-spacing:.04em; } }

/* Bring the offer and hands-on demonstrations into the foreground. */
.hero h1 { font-size:clamp(74px,9.15vw,136px); }
.hero-description { max-width:390px;font-size:16px;line-height:1.85; }
.hero-location { color:#677458;font-size:10px; }
.hero .eyebrow { letter-spacing:.11em; }
.studio-bottom { margin-top:-100px; }.studio .studio-copy { padding-top:135px; }.studio-seal { padding-top:150px; }
.preview-toolbar { display:none;position:absolute;top:23px;left:25px;right:25px;align-items:center;justify-content:space-between;gap:16px;color:#4c5d3e;z-index:8; }
.js .preview-toolbar { display:flex; }
.preview-toolbar>span { font-size:9px;letter-spacing:.09em; }
.preview-switch { display:flex;gap:3px;padding:3px;border:1px solid #75806444;border-radius:999px; }
.preview-switch button,.demo-action { border:0;background:transparent;color:inherit;font-size:11px;padding:9px 15px;border-radius:999px;min-height:36px;transition:color .2s,background .2s; }
.preview-switch button[aria-pressed=true] { background:#3f5033;color:#f0f1e6;box-shadow:0 2px 7px #3343221a; }
.preview-switch button:hover { background:#53664120; }.preview-switch button[aria-pressed=true]:hover { background:#4b603d; }
.demo-action { border:1px solid #dce6cc55;display:inline-flex;align-items:center;gap:12px; }
.demo-action:hover { background:#eaf0e320; }
.app-showcase .preview-toolbar,.software-showcase .preview-toolbar { color:#dce7cd; }
.software-showcase .preview-switch { border-color:#dce6cc44; }
.software-showcase .preview-switch button[aria-pressed=true] { background:#e1e8d6;color:#304329; }
.web-showcase,.app-showcase,.software-showcase { min-height:610px;padding-block:90px 70px; }
.web-showcase .browser-mock { transition:width .6s var(--ease),transform .6s var(--ease),border-radius .6s; }
.web-showcase[data-preview-device=mobile] .browser-mock { width:240px;transform:rotate(-3deg);border:6px solid #394333;border-radius:26px;box-shadow:12px 28px 35px #38462b40; }
.web-showcase[data-preview-device=mobile] .browser-bar { font-size:5px;padding:8px; }
.web-showcase[data-preview-device=mobile] .browser-bar span:first-child { font-size:4px;letter-spacing:0; }
.web-showcase[data-preview-device=mobile] .mock-page { height:375px;padding:23px 20px; }
.web-showcase[data-preview-device=mobile] .mock-nav>span { display:none; }
.web-showcase[data-preview-device=mobile] .mock-nav b { font-size:11px; }
.web-showcase[data-preview-device=mobile] .mock-heading { font-size:37px;margin-top:73px; }
.web-showcase[data-preview-device=mobile] .mock-heading>span { font-size:5px; }
.web-showcase[data-preview-device=mobile] .architecture-scene img { object-position:61%; }
.web-showcase[data-preview-device=mobile] .mock-footer { font-size:4px;left:20px;right:20px;gap:25px; }
.app-showcase.is-booked .phone-booking { background:#d9e7d1;box-shadow:0 0 0 1px #75936155; }
.phone-booking { transition:background .3s,box-shadow .3s; }
.bar-chart i { transition:height .65s var(--ease); }
#bookingDemoStatus { color:#d4dfc6; }
@media(max-width:1100px) { .hero-description { font-size:14px;max-width:330px; }.preview-toolbar>span { font-size:8px; }.preview-switch button,.demo-action { font-size:10px;padding-inline:12px; } }
@media(max-width:820px) { .hero-description { font-size:13px;max-width:290px; }.studio-bottom { margin-top:30px; }.studio .studio-copy { padding-top:0; }.studio-seal { padding-top:0; } }
@media(max-width:640px) {
 .hero h1 { font-size:clamp(68px,20.3vw,115px); }.hero-description { max-width:350px;font-size:13px; }.hero-location { font-size:9px; }
 .preview-toolbar { top:17px;left:17px;right:17px;gap:10px; }.preview-toolbar>span { font-size:7px;max-width:120px;line-height:1.7; }
 .preview-switch button,.demo-action { font-size:10px;min-height:38px;padding:8px 12px; }
 .web-showcase,.app-showcase,.software-showcase { min-height:485px;padding-block:85px 60px; }
 .web-showcase[data-preview-device=mobile] .browser-mock { width:210px; }
 .web-showcase[data-preview-device=mobile] .mock-page { height:310px;padding:20px 16px; }
 .web-showcase[data-preview-device=mobile] .mock-heading { font-size:32px;margin-top:53px; }
 .web-showcase[data-preview-device=mobile] .mock-footer { left:16px;right:16px;font-size:3px; }
 .app-showcase { min-height:510px; }.software-showcase { min-height:440px; }
}
@media(max-width:360px) { .hero h1 { font-size:65px; }.hero-location { font-size:8px; }.preview-toolbar { left:13px;right:13px;gap:7px; }.preview-toolbar>span { font-size:6px; }.preview-switch button,.demo-action { font-size:9px;padding-inline:10px; } }
@media(prefers-reduced-motion:reduce) { .web-showcase .browser-mock,.phone-booking,.bar-chart i { transition:none; } }

/* Keep the expanded navigation from wrapping in narrow desktop panels. */
.footer-bottom,.footer-bottom nav { flex-wrap:wrap; }
.wordmark { white-space:nowrap; }
@media(max-width:820px) {
 .topbar .nav { height:80px; }
 .menu-toggle { display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:40px;height:40px;padding:8px;background:none;border:1px solid #68714b4d;border-radius:50%;z-index:3; }
 .menu-toggle span { width:19px;height:1px;background:#39482e;transition:transform .25s; }
 .menu-toggle[aria-expanded=true] span:first-child { transform:translateY(3.5px) rotate(45deg); }
 .menu-toggle[aria-expanded=true] span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
 .navlinks { display:none;position:absolute;top:80px;left:0;right:0;background:#e9e5dbfa;padding:20px var(--gutter) 27px;border-bottom:1px solid #7c8e5433;box-shadow:0 10px 20px #39432b0c; }
 .navlinks.open { display:flex;flex-direction:column;align-items:stretch;gap:0; }
 .navlinks>a:not(.btn) { font-size:15px;padding:12px 0;border-bottom:1px solid #84926b26; }
 .navlinks .btn { margin-top:20px;align-self:flex-start;padding:12px 23px;font-size:13px;color:#415330;border-color:#81986555; }
 html:not(.js) .menu-toggle { display:none; }
 html:not(.js) .topbar .nav { height:auto;flex-wrap:wrap;padding-block:15px; }
 html:not(.js) .navlinks { display:flex;position:static;flex-basis:100%;flex-wrap:wrap;padding:0;gap:15px;border:0;box-shadow:none; }
 html:not(.js) .navlinks>a:not(.btn) { font-size:11px;padding-block:5px; }
 html:not(.js) .navlinks .btn { margin:0;padding:7px 15px;min-height:35px;font-size:11px; }
 html:not(.js) .hero { padding-top:255px; }
}
@media(min-width:641px) and (max-width:820px) { .hero h1 { font-size:clamp(60px,9.7vw,78px); } }
@media(min-width:641px) and (max-width:820px) {
 .sculpture-stage { width:100%;height:380px;margin-left:0; }
 .sculpture-composition { min-height:530px; }
 .hero-description { max-width:100%; }
}