/* Studio layouts and shared components. The warm glass treatment below keeps
   the original site's soft, rounded character, with clean sans-serif type. */
:root {
  --paper: #f5f3ed; --paper-2: #eae8e0; --paper-3: #faf9f6;
  --ink: #20211f; --ink-2: #585b54; --ink-3: #656960;
  --near: #20231f; --near-2: #2b2e28; --on-near: #f5f3ed; --on-near-2: #b8bcb0;
  --clay: #a93d20; --clay-deep: #8b3019; --clay-soft: #f6e0d4; --clay-on-near: #ff9273;
  --orange: #f06a42; --hair: #d9dbd1; --edge: #8c9185; --hair-near: #42463c;
  --live: #4e6943; --r: 4px; --r-sm: 3px; --r-lg: 6px; --wrap: 1360px;
  --font-ui: "DM Sans", system-ui, sans-serif;
  --t-5: clamp(3rem, 5.6vw, 5.5rem); --t-4: clamp(2.25rem, 3.6vw, 3.65rem);
}
html { scroll-padding-top: 110px; }
body.studio { padding-bottom: 0; font-size: 16px; font-variation-settings: "opsz" 18; }
.studio .wrap { width: min(calc(100% - 104px), var(--wrap)); }
.studio h1, .studio h2, .studio h3 { font-weight: 500; font-variation-settings: "opsz" 40; letter-spacing: -.05em; }
.studio h2 { line-height: 1.07; }
.studio h3 { letter-spacing: -.035em; font-weight: 500; }
.studio em, .studio .say { font-family: var(--font-serif); font-weight: 400; font-style: italic; letter-spacing: -.025em; }
.studio h1 em, .studio h2 em { color: var(--clay); }
.studio p { text-wrap: pretty; }
.studio .btn { border-radius: 3px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; gap: 25px; min-height: 54px; padding: 15px 22px; }
.studio .btn--primary { background: var(--ink); color: var(--paper); }
.studio .btn--primary:hover { background: var(--clay); color: white; border-color: var(--clay); }
.studio .btn:disabled { opacity: .55; cursor: wait; transform: none; }
.studio :is(a, button, summary, input, textarea, select):focus-visible { outline: 2px solid var(--clay); outline-offset: 5px; }
.studio .band--near :focus-visible, .studio-services :focus-visible, .studio-footer :focus-visible { outline-color: var(--orange); }
.studio a { transition: color .2s, background .2s; }
.eyebrow { font-size: 10px; letter-spacing: .13em; line-height: 1.5; font-weight: 600; margin: 0; }
.section-index { margin-bottom: 28px; color: var(--ink-3); }
.quiet-link { display: inline-flex; align-items: center; gap: 22px; color: var(--ink); text-decoration: none; font-size: 14px; padding: 14px 0; min-height: 48px; border-bottom: 1px solid var(--ink); width: fit-content; }
.quiet-link:hover { color: var(--clay); border-bottom-color: var(--clay); }
.diagonal-arrow { display: inline-block; position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.diagonal-arrow::before { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: url("/assets/img/arrow-up-right.svg") center / contain no-repeat; mask: url("/assets/img/arrow-up-right.svg") center / contain no-repeat; }
.studio .arw::before { content: ""; position: absolute; inset: 0; width: 100%; height: 100%; transform: none; background: currentColor; -webkit-mask: url("/assets/img/arrow-right.svg") center / contain no-repeat; mask: url("/assets/img/arrow-right.svg") center / contain no-repeat; }
.diagonal-arrow::after, .studio .arw::after { display: none; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--live); flex: none; }
.tiny-star { color: var(--clay); font-size: 23px; line-height: 1; }

/* One quiet, persistent navigation bar. */
.studio-header { position: sticky; z-index: 70; top: 0; background: var(--paper); border-bottom: 1px solid transparent; transition: border-color .2s; }
.studio-header.is-scrolled { border-bottom-color: var(--hair); }
.studio-header__inner { display: flex; align-items: center; min-height: 99px; border-bottom: 1px solid var(--hair); gap: 36px; }
.is-scrolled .studio-header__inner { border-bottom-color: transparent; }
.studio-brand { display: flex; align-items: center; color: var(--ink); text-decoration: none; font-size: 47px; font-weight: 700; letter-spacing: -.075em; line-height: 1; }
.brand-star { color: var(--clay); font-size: 36px; align-self: flex-start; margin: 0 18px 0 5px; }
.studio-brand__caption { border-left: 1px solid #bfc3b6; padding-left: 17px; font-size: 8px; line-height: 1.5; font-weight: 500; letter-spacing: .1em; }
.studio-links { display: flex; align-items: center; gap: 33px; margin-left: auto; }
.studio-links a { font-size: 13px; color: var(--ink-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.studio-links a:hover, .studio-links a.is-current { color: var(--clay); }
.studio-links a.is-current::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--clay); margin-right: 7px; }
.header-contact { display: inline-flex; align-items: center; gap: 26px; min-height: 44px; padding: 0 0 0 32px; border-left: 1px solid var(--hair); text-decoration: none; font-size: 14px; }
.studio-menu { display: none; }
.studio-panel { position: fixed; top: 80px; right: 20px; left: 20px; z-index: 75; background: var(--paper); border: 1px solid var(--hair); padding: 10px 24px 20px; box-shadow: 0 22px 40px #20211f1a; max-height: calc(100dvh - 100px); overflow-y: auto; }
.studio-panel a { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--hair); text-decoration: none; font-size: 24px; }
.studio-panel a > span { font-size: 11px; color: var(--ink-3); }
.studio-panel .mobile-contact { margin-top: 10px; color: var(--clay); border: 0; font-size: 20px; }

/* Opening spread */
.studio-hero { padding-top: 33px; }
.hero-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.availability { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--ink-2); }
.hero-layout { display: grid; grid-template-columns: 1.02fr 1fr; gap: 55px; align-items: center; padding: 42px 0 59px; }
.hero-message h1 { font-size: clamp(64px, 6.65vw, 102px); line-height: .99; letter-spacing: -.062em; margin: 0 0 29px; text-wrap: initial; }
.hero-message h1 em { font-size: 1.075em; line-height: 1.02; }
.hero-description { color: var(--ink-2); font-size: 16px; line-height: 1.65; margin: 0 0 29px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }
.hero-actions .quiet-link { border: 0; font-size: 13px; gap: 15px; }
.down-arrow { font-size: 20px; }
.hero-signoff { margin: 26px 0 0; display: flex; gap: 9px; align-items: center; font-size: 10px; color: var(--ink-3); }
.signoff-line { width: 20px; height: 1px; background: #8c9185; }
.hero-footline { min-height: 71px; border-top: 1px solid var(--hair); display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: 9px; letter-spacing: .1em; }
.hero-footline .tiny-star { font-size: 18px; }
.hero-location { color: var(--ink-3); margin-left: 36px; }
.project-stage { min-width: 0; }
.stage-top { display: flex; align-items: center; justify-content: space-between; padding: 0 0 14px; color: var(--ink-3); }
.stage-count { font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.stage-art { position: relative; min-height: 450px; background: #dddccf; isolation: isolate; overflow: hidden; }
.stage-grid { position: absolute; inset: 0; background-image: linear-gradient(#898e801c 1px, transparent 1px), linear-gradient(90deg, #898e801c 1px, transparent 1px); background-size: 44px 44px; }
.stage-art::before { content: ""; position: absolute; width: 63%; aspect-ratio: 1; border-radius: 50%; top: -20%; right: -15%; background: var(--orange); opacity: .95; }
.stage-label { position: absolute; left: 28px; top: 23px; font-size: 10px; line-height: 1.5; letter-spacing: .16em; }
.browser-preview { position: absolute; display: block; width: 87%; top: 83px; left: 7%; border-radius: 5px; overflow: hidden; border: 5px solid #eeeae1; background: #eeeae1; box-shadow: 0 22px 36px #28271f33; transform: rotate(-5deg); transition: transform .5s var(--ease), box-shadow .5s; }
.browser-preview:hover { transform: rotate(-3deg) translateY(-4px); box-shadow: 0 26px 44px #28271f44; }
.browser-preview img { width: 100%; aspect-ratio: 4/3; height: auto; object-fit: cover; }
.browser-preview__bar { height: 25px; padding: 0 8px; display: flex; align-items: center; justify-content: space-between; font-size: 8px; color: #595b53; }
.browser-dots { display: flex; gap: 3px; }
.browser-dots i { width: 4px; height: 4px; background: #b7baae; border-radius: 50%; }
.workflow-note { position: absolute; left: 18px; right: 18px; bottom: 20px; display: flex; align-items: center; gap: 12px; padding: 16px; background: #faf9f6; box-shadow: 0 6px 20px #1a211718; border: 1px solid #d9d9d0; }
.workflow-check { width: 32px; height: 32px; background: #e5ecdf; border-radius: 50%; display: grid; place-items: center; color: #44633b; font-size: 16px; }
.workflow-note strong { display: block; font-size: 11px; line-height: 1.4; font-weight: 500; }
.workflow-note div > span { display: block; color: var(--ink-3); font-size: 9px; margin-top: 3px; }
.workflow-note > .diagonal-arrow { margin-left: auto; width: 13px; height: 13px; }
.stage-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 15px; }
.stage-project { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 11px; }
.project-kind { font-size: 7px; color: var(--ink-3); letter-spacing: .08em; padding-left: 8px; border-left: 1px solid #c4c8bb; }
.project-controls { display: none; gap: 3px; }
.is-enhanced .project-controls { display: flex; }
.project-dot { width: 44px; height: 44px; padding: 0; border: 1px solid var(--hair); background: transparent; font: 11px var(--font-sans); color: var(--ink); cursor: pointer; }
.project-dot.is-active, .project-dot:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.project-stage[data-active-project="driveway"] .stage-art { background: #cbd2d0; }
.project-stage[data-active-project="driveway"] .stage-art::before { background: #a3b6ad; }
.project-stage[data-active-project="thomson"] .stage-art { background: #cdd6c1; }
.project-stage[data-active-project="thomson"] .stage-art::before { background: #bba552; }
.project-cover--garden { background: #ccd4bf; }

/* Work is the proof. */
.studio-section { padding: 104px 0; }
.section-work { background: #eeeee7; border-top: 1px solid var(--hair); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 46px; }
.section-heading h2 { font-size: clamp(34px, 3.5vw, 52px); }
.section-heading > p { font-size: 14px; margin: 0 0 6px; color: var(--ink-2); }
.section-heading .quiet-link { flex-shrink: 0; margin-bottom: 5px; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
@media (min-width: 1100px) { .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.project-card { min-width: 0; }
.project-cover { display: block; position: relative; background: #dcd6c5; padding: 25px 29px 36px; text-decoration: none; overflow: hidden; }
.project-cover--mechanical { background: #c6cfcb; }
.project-cover__meta { display: flex; justify-content: space-between; gap: 12px; font-size: 8px; letter-spacing: .1em; margin-bottom: 34px; color: #41473e; }
.project-cover img { width: 100%; border-radius: 3px; box-shadow: 0 12px 20px #26271e26; transition: transform .6s var(--ease); }
.project-cover:hover img { transform: scale(1.035) translateY(-3px); }
.project-open { position: absolute; right: 18px; bottom: 17px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: var(--paper); transition: background .2s, color .2s; }
.project-cover:hover .project-open { background: var(--ink); color: var(--paper); }
.project-caption { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 23px; }
.project-caption h3 { font-size: 24px; }
.project-caption > span { font-size: 7px; letter-spacing: .04em; color: var(--ink-3); }
.project-card > p { margin: 10px 0 0; max-width: 48ch; font-size: 13px; line-height: 1.7; color: var(--ink-2); }

/* Services: three useful, quietly animated artifacts. */
.studio-services { background: var(--near); color: var(--on-near); }
.studio-services .section-index { color: #b2b8a9; }
.studio-services h2, .studio-services h3 { color: var(--paper); }
.studio-services h2 em { color: var(--clay-on-near); }
.studio-services .section-heading > p { color: var(--on-near-2); }
.service-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.studio-service { color: var(--paper); text-decoration: none; min-width: 0; }
.service-visual { height: 210px; background: #2b2f28; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 26px; }
.service-title { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.service-title > span:first-child { color: #adb6a3; font-size: 9px; align-self: flex-start; padding-top: 4px; }
.service-title h3 { font-size: clamp(18px, 1.65vw, 24px); }
.service-title > .diagonal-arrow { margin-left: auto; width: 12px; height: 12px; }
.studio-service > p { color: var(--on-near-2); font-size: 13px; line-height: 1.8; margin: 0 0 23px; }
.service-tags { display: block; padding-top: 18px; border-top: 1px solid var(--hair-near); color: #b2b8a9; font-size: 8px; letter-spacing: .09em; }
.mini-window { width: 74%; min-height: 134px; background: #e9e7d9; border-radius: 4px; padding: 12px 16px; position: relative; transform: rotate(-4deg); transition: transform .5s var(--ease); color: #292e25; }
.mini-window > div { display: flex; gap: 3px; border-bottom: 1px solid #c5c8b6; padding-bottom: 8px; }
.mini-window i { width: 3px; height: 3px; border-radius: 50%; background: #959c86; }
.mini-heading { display: block; font-size: 20px; line-height: 1.05; margin-top: 10px; letter-spacing: -.04em; }
.mini-heading em { color: var(--clay); }
.mini-button { display: block; width: 35px; height: 9px; background: #343d2c; margin-top: 10px; }
.mini-sun { color: #a84a28; position: absolute; right: 15px; bottom: 7px; font-size: 55px; line-height: 1; }
.studio-service:hover .mini-window { transform: rotate(0) translateY(-3px); }
.flow-node { display: flex; align-items: center; gap: 12px; width: 62%; min-height: 38px; border: 1px solid #59604d; background: #32382c; font-size: 10px; padding: 7px 12px; border-radius: 3px; }
.flow-node > span { color: #dedfce; }
.flow-connector { width: 1px; height: 25px; background: #959f86; position: relative; }
.flow-connector::after { content: ""; width: 5px; height: 5px; position: absolute; bottom: 0; left: -2px; transform: rotate(45deg); border-right: 1px solid #a9b997; border-bottom: 1px solid #a9b997; }
.flow-node--end { background: #d9e1cf; color: #2d3825; border-color: #d9e1cf; margin-left: 28px; transition: transform .4s; }
.flow-node--end > span { color: #456138; }
.flow-node--end i { width: 5px; height: 5px; border-radius: 50%; background: #587746; margin-left: auto; }
.studio-service:hover .flow-node--end { transform: translateX(5px); }
.flow-caption { font-size: 7px; color: #aeb9a1; letter-spacing: .12em; margin-top: 22px; }
.improve-chart { display: flex; align-items: flex-end; position: relative; width: 58%; height: 100px; gap: 12px; border-bottom: 1px solid #647056; }
.improve-chart i { width: 19%; height: 26%; background: #778168; border-radius: 2px 2px 0 0; transform-origin: bottom; transition: transform .5s; }
.improve-chart i:nth-child(2) { height: 44%; background: #a0aa8f; }
.improve-chart i:nth-child(3) { height: 62%; background: #bec8a9; }
.improve-chart i:nth-child(4) { height: 87%; background: #e6e7d7; }
.improve-chart .diagonal-arrow { position: absolute; left: 8px; top: 4px; color: #ff9273; }
.studio-service:hover .improve-chart i { transform: scaleY(1.1); }

/* Process and transparent pricing. */
.process-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 110px; }
.process-intro h2 { margin-bottom: 25px; }
.process-intro > p:not(.eyebrow) { max-width: 40ch; color: var(--ink-2); font-size: 15px; }
.studio-signature { display: flex; gap: 15px; align-items: center; font: italic 55px var(--font-serif); margin-top: 38px; }
.studio-signature > span:last-child { font: 8px/1.6 var(--font-sans); letter-spacing: .09em; border-left: 1px solid #c3c8b8; padding-left: 19px; color: var(--ink-3); }
.studio-signature .tiny-star { margin-right: 8px; }
.process-list { list-style: none; padding: 0; margin: 0; }
.process-list > li { display: grid; grid-template-columns: 25px 1fr; gap: 20px; padding: 25px 0; border-top: 1px solid var(--hair); }
.process-list > li:first-child { padding-top: 5px; border-top: 0; }
.process-list > li > span { font-size: 10px; color: var(--clay); padding-top: 6px; }
.process-list h3 { font-size: 25px; margin-bottom: 10px; }
.process-list p { font-size: 14px; color: var(--ink-2); margin: 0; }
.studio-pricing { padding-block: 84px; background: #ead5c6; }
.pricing-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.studio-pricing h2 { font-size: clamp(33px, 3.3vw, 48px); margin-bottom: 23px; }
.studio-pricing p:not(.eyebrow):not(.big-price) { font-size: 14px; }
.studio-pricing .section-index { color: #705347; }
.studio-pricing .price-block { border-left: 1px solid #b99b89; padding-left: 62px; }
.price-label { font-size: 9px !important; letter-spacing: .12em; margin-bottom: 12px; }
.big-price { font-size: clamp(38px, 4.4vw, 65px); line-height: 1; letter-spacing: -.06em; font-weight: 500; white-space: nowrap; margin: 0 0 25px; }
.big-price > span:not(.price-currency) { font-weight: 300; padding: 0 6px; }
.big-price .price-currency { font-size: 10px; letter-spacing: .03em; margin-left: 10px; }
.price-inclusions { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 15px; font-size: 11px; }
.price-inclusions li::before { content: "✓"; margin-right: 8px; color: #795544; }
.studio-pricing .price-small { margin: 13px 0 0; font-size: 10px !important; color: #705b4e; }
.faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 95px; }
.faq-layout h2 { margin-bottom: 23px; }
.studio .faq { background: transparent; border-radius: 0; margin: 0; border: 0; border-top: 1px solid var(--hair); }
.studio .faq:last-child { border-bottom: 1px solid var(--hair); }
.studio .faq summary { border-radius: 0; font-weight: 500; font-size: 17px; padding: 23px 0; letter-spacing: -.02em; }
.studio .faq__a { padding: 0 35px 25px 0; font-size: 14px; }
.studio .faq[open] { border-color: var(--hair); }
.studio .faq__m { width: 12px; height: 12px; margin-right: 3px; }
.studio .faq__m::before { width: 12px; top: 5px; }
.studio .faq__m::after { height: 12px; left: 5px; }

/* Footer as the final invitation, shared across every page. */
.studio-footer { background: var(--near); color: var(--paper); padding: 75px 0 26px; }
.studio-footer a { color: var(--paper); text-decoration: none; }
.studio-footer a:hover { color: var(--clay-on-near); }
.footer-invitation { display: flex; justify-content: space-between; gap: 50px; align-items: center; }
.footer-invitation .eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 28px; color: #c2c5b9; font-size: 9px; }
.studio-footer .status-dot { background: #bdcfa6; }
.footer-invitation h2 { color: var(--paper); font-size: clamp(58px, 7.4vw, 105px); letter-spacing: -.055em; line-height: 1; }
.footer-invitation h2 em { color: var(--clay-on-near); }
.footer-round { width: 136px; height: 136px; display: grid; place-items: center; border-radius: 50%; background: var(--orange); color: #21271d !important; flex: none; transition: transform .4s !important; }
.footer-round > .diagonal-arrow { transform: scale(3); }
.footer-round:hover { transform: rotate(8deg); }
.footer-contact-row { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-top: 34px; padding-bottom: 52px; border-bottom: 1px solid var(--hair-near); }
.footer-contact-row p { font-size: 14px; color: #b9beb0; margin: 0; }
.footer-contact-row > a { display: flex; align-items: center; gap: 20px; font-size: clamp(13px, 1.45vw, 21px); padding-bottom: 8px; border-bottom: 1px solid #747c69; overflow-wrap: anywhere; }
.studio-footer__bottom { display: flex; align-items: center; gap: 45px; padding: 39px 0; }
.footer-wordmark { font-size: 67px; font-weight: 700; letter-spacing: -.075em; line-height: 1; }
.footer-wordmark > span { font-size: 40px; color: var(--clay-on-near); margin-left: 4px; vertical-align: top; }
.studio-footer__bottom p { font-size: 11px; color: #b9beb0; margin: 0; }
.studio-footer__bottom nav { display: flex; gap: 30px; margin-left: auto; font-size: 12px; }
.studio-footer__legal { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid var(--hair-near); color: #b9beb0; font-size: 9px; }
.studio-footer__legal > span:last-child { display: flex; gap: 25px; }
.studio-footer__legal a { color: #b9beb0; }

/* Existing inner-page components inherit the studio typography and rhythm. */
.studio:not(.page-home) main > .band:first-child { padding-top: 75px; padding-bottom: 68px; }
.studio:not(.page-home) main > .band:first-child h1 { max-width: 16ch; }
.studio .band { border-bottom: 1px solid var(--hair); }
.studio .band--near { border-color: var(--hair-near); }
.studio .head { max-width: 760px; }
.studio .head--left { max-width: 800px; }
.studio .card, .studio .case, .studio .tier, .studio .result__card { box-shadow: none; border-radius: 4px; }
.studio .card__go { border-radius: 0; width: 35px; height: 35px; }
.studio .pill { border-radius: 2px; font-size: 11px; }
.studio .card h3 { font-size: 28px; }
.studio .plate { border-radius: 4px; }
.studio .plates { display: grid; gap: 30px; }
.studio .plates--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.studio .plate__head { padding: 15px 24px; display: flex; justify-content: space-between; }
.studio .steps > li::before { border-radius: 0; }
.studio .field-row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.studio .fieldset { padding: 0; border: 0; margin: 0 0 25px; min-width: 0; }
.studio .fieldset legend { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; padding: 0 0 23px; }
.studio .field__hint { margin: 0 0 9px; font-size: 12px; color: var(--ink-3); }
.studio .field__label { font-size: 12px; font-weight: 500; }
.studio .field__error { font-size: 12px; }
.studio .form__status { margin-top: 18px; font-size: 13px; }
.studio .form__status[data-tone="error"] { color: var(--alert); }
.studio .form-success { background: #e4ebda; border: 1px solid #aaba97; padding: 32px; }
.studio .form-success h2 { font-size: 36px; margin: 20px 0; }
.studio .form-success h3 { margin: 15px 0; }
.contact-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; padding-block: 75px 100px; align-items: start; }
.contact-intro h1 { font-size: clamp(47px, 5vw, 75px); line-height: 1.04; margin-bottom: 28px; }
.contact-intro > p:not(.eyebrow) { color: var(--ink-2); font-size: 15px; max-width: 40ch; }
.contact-detail { border-top: 1px solid var(--hair); margin-top: 30px; padding-top: 22px; }
.contact-detail p { font-size: 11px; color: var(--ink-3); margin-bottom: 8px; }
.contact-detail a { font-size: 13px; overflow-wrap: anywhere; }
.contact-form-wrap { border: 1px solid var(--hair); background: #eeeee7; padding: 36px; }
.contact-form-wrap h2 { font-size: 26px; margin-bottom: 10px; }
.contact-form-wrap > p { font-size: 12px; color: var(--ink-3); margin-bottom: 32px; }
.contact-form-wrap .form > .actions { margin-top: 10px; }
.contact-form-wrap .btn { width: 100%; justify-content: space-between; }
.form-privacy { margin-top: 14px; font-size: 10px; color: var(--ink-3); }
.studio .form-privacy a { color: inherit; }

@media (min-width: 1550px) { .stage-art { min-height: 510px; } .browser-preview { top: 88px; } }
@media (max-width: 1190px) {
  .studio .wrap { width: calc(100% - 72px); }
  .hero-layout { gap: 33px; }
  .hero-message h1 { font-size: 6.85vw; }
  .hero-actions { gap: 16px; }
  .hero-actions .btn { font-size: 12px; padding-inline: 16px; gap: 16px; }
  .hero-actions .quiet-link { font-size: 12px; gap: 9px; }
  .stage-art { min-height: 405px; }
  .browser-preview { top: 83px; }
  .workflow-note { left: 12px; right: 12px; padding: 12px; gap: 9px; }
  .workflow-note strong { font-size: 10px; }
  .workflow-note div > span { font-size: 8px; }
  .workflow-check { width: 26px; height: 26px; }
  .project-kind { display: none; }
  .service-columns { gap: 24px; }
  .service-title { gap: 7px; }
  .process-layout, .pricing-layout, .faq-layout { gap: 65px; }
  .studio-pricing .price-block { padding-left: 35px; }
  .hero-location { display: none; }
  .contact-layout { gap: 45px; }
}
@media (max-width: 899px) {
  .studio-header__inner { min-height: 80px; gap: 20px; }
  .studio-brand { font-size: 39px; }
  .brand-star { font-size: 30px; }
  .studio-links { display: none; }
  .header-contact { margin-left: auto; border: 0; padding-left: 0; font-size: 12px; gap: 15px; }
  .studio-menu { display: flex; width: 44px; height: 44px; border: 1px solid var(--hair); background: transparent; padding: 12px; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; }
  .studio-menu > span:not(.visually-hidden) { height: 1px; width: 18px; background: var(--ink); transition: transform .2s; }
  .studio-menu[aria-expanded="true"] > span:nth-child(2) { transform: translateY(3px) rotate(45deg); }
  .studio-menu[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-3px) rotate(-45deg); }
  .hero-topline .eyebrow { font-size: 8px; }
  .availability { font-size: 10px; }
  .hero-layout { grid-template-columns: 1fr; gap: 40px; padding: 36px 0 40px; }
  .hero-message h1 { font-size: clamp(64px, 10.5vw, 86px); line-height: .99; }
  .hero-message h1 br:first-child { display: none; }
  .hero-description { font-size: 16px; }
  .hero-actions .btn { font-size: 14px; padding-inline: 22px; gap: 28px; }
  .hero-actions .quiet-link { font-size: 14px; gap: 15px; }
  .hero-actions { gap: 28px; }
  .hero-signoff { margin-top: 22px; }
  .stage-art { min-height: 510px; }
  .browser-preview { width: 80%; left: 11%; top: 81px; }
  .workflow-note { left: 28px; right: 28px; bottom: 24px; padding: 18px; }
  .workflow-note strong { font-size: 12px; }
  .workflow-note div > span { font-size: 10px; }
  .workflow-check { width: 35px; height: 35px; }
  .project-kind { display: block; }
  .hero-footline { flex-wrap: wrap; justify-content: center; gap: 13px 22px; padding: 20px 0; font-size: 8px; }
  .studio-section { padding-block: 76px; }
  .section-heading h2 { font-size: 38px; }
  .section-heading > p br { display: none; }
  .section-heading > p { max-width: 25ch; }
  .project-cover { padding: 17px 19px 25px; }
  .project-cover__meta { font-size: 7px; margin-bottom: 23px; }
  .project-cover__meta > span:last-child { display: none; }
  .project-caption h3 { font-size: 23px; }
  .project-caption > span { font-size: 7px; }
  .service-columns { grid-template-columns: 1fr; gap: 33px; }
  .studio-service { display: grid; grid-template-columns: 1fr 1.15fr; gap: 0 28px; }
  .service-visual { grid-row: 1 / 4; margin: 0; height: 210px; }
  .service-title { align-self: start; margin-top: 8px; }
  .service-title h3 { font-size: 24px; }
  .studio-service > p { font-size: 13px; margin-bottom: 17px; }
  .service-tags { align-self: end; }
  .process-layout { gap: 45px; }
  .process-intro h2 { font-size: 37px; }
  .section-index { font-size: 9px; margin-bottom: 23px; }
  .process-list h3 { font-size: 23px; }
  .process-list p { font-size: 13px; }
  .pricing-layout { gap: 35px; }
  .studio-pricing h2 { font-size: 34px; }
  .studio-pricing .price-block { padding-left: 26px; }
  .big-price { font-size: 38px; }
  .price-inclusions { grid-template-columns: 1fr; gap: 7px; }
  .price-block .btn { font-size: 12px; padding-inline: 16px; gap: 13px; }
  .faq-layout { gap: 45px; }
  .studio .faq summary { font-size: 15px; }
  .footer-round { width: 100px; height: 100px; }
  .footer-round > .diagonal-arrow { transform: scale(2); }
  .studio-footer__bottom { gap: 26px; }
  .studio-footer__bottom nav { gap: 18px; }
  .contact-layout { grid-template-columns: 1fr; gap: 45px; padding-block: 52px 75px; }
  .contact-intro h1 { max-width: 11ch; }
  .contact-detail { display: inline-block; margin-right: 30px; vertical-align: top; }
}
@media (max-width: 599px) {
  .studio .wrap { width: calc(100% - 40px); }
  .studio-header__inner { min-height: 76px; gap: 16px; }
  .studio-brand { font-size: 37px; }
  .brand-star { font-size: 29px; margin-right: 0; }
  .studio-brand__caption { display: none; }
  .header-contact { font-size: 12px; }
  .header-contact .diagonal-arrow { width: 12px; height: 12px; }
  .studio-hero { padding-top: 25px; }
  .hero-topline { gap: 15px; align-items: start; }
  .hero-topline .eyebrow { max-width: 180px; font-size: 8px; line-height: 1.7; }
  .availability { font-size: 9px; white-space: nowrap; gap: 6px; padding-top: 2px; }
  .hero-layout { padding-top: 30px; gap: 38px; padding-bottom: 27px; }
  .hero-message h1 { font-size: clamp(50px, 13.3vw, 77px); margin-bottom: 25px; }
  .hero-message h1 br:first-child { display: initial; }
  .hero-description { font-size: 14px; margin-bottom: 22px; }
  .hero-description .desktop-break { display: none; }
  .hero-actions { gap: 16px; }
  .hero-actions .btn { font-size: 12px; padding: 13px 16px; gap: 20px; min-height: 49px; }
  .hero-actions .quiet-link { font-size: 11px; gap: 7px; }
  .hero-signoff { font-size: 8px; margin-top: 20px; }
  .stage-top .eyebrow, .stage-count { font-size: 8px; }
  .stage-art { min-height: 340px; }
  .stage-label { left: 20px; top: 18px; font-size: 8px; }
  .browser-preview { width: 87%; top: 65px; left: 7%; border-width: 3px; }
  .browser-preview__bar { height: 19px; font-size: 6px; }
  .workflow-note { left: 12px; right: 12px; bottom: 14px; padding: 12px; gap: 8px; }
  .workflow-check { width: 26px; height: 26px; font-size: 13px; }
  .workflow-note strong { font-size: 9px; }
  .workflow-note div > span { font-size: 8px; }
  .workflow-note > .diagonal-arrow { display: none; }
  .stage-project { font-size: 10px; gap: 6px; }
  .project-kind { display: none; }
  .hero-footline { font-size: 7px; gap: 13px; justify-content: space-between; }
  .hero-footline > .tiny-star { font-size: 14px; }
  .hero-footline > span:nth-last-child(2), .hero-footline > .tiny-star:nth-child(4) { display: none; }
  .studio-section { padding-block: 60px; }
  .section-heading { display: block; margin-bottom: 30px; }
  .section-heading h2 { font-size: 35px; }
  .section-heading .quiet-link { margin-top: 18px; font-size: 12px; }
  .section-heading > p { margin-top: 22px; max-width: 40ch; font-size: 13px; }
  .project-grid { grid-template-columns: 1fr; gap: 40px; }
  .project-cover { padding: 20px 23px 30px; }
  .project-cover__meta { font-size: 7px; margin-bottom: 26px; }
  .project-cover__meta > span:last-child { display: inline; }
  .project-caption { margin-top: 17px; }
  .project-caption h3 { font-size: 25px; }
  .project-caption > span { font-size: 6px; }
  .project-card > p { font-size: 12px; }
  .studio-service { display: block; }
  .service-columns { gap: 37px; }
  .service-visual { margin-bottom: 23px; height: 210px; }
  .mini-window { width: 65%; }
  .service-title h3 { font-size: 24px; }
  .studio-service > p { max-width: 45ch; }
  .service-tags { font-size: 8px; }
  .flow-node { max-width: 205px; }
  .improve-chart { width: 51%; }
  .process-layout, .pricing-layout, .faq-layout { grid-template-columns: 1fr; gap: 36px; }
  .process-intro h2 { font-size: 37px; }
  .process-intro > p:not(.eyebrow) { font-size: 14px; }
  .studio-signature { margin-top: 24px; }
  .process-list > li { grid-template-columns: 22px 1fr; gap: 13px; padding-block: 22px; }
  .process-list > li:first-child { border-top: 1px solid var(--hair); padding-top: 22px; }
  .studio-pricing { padding-block: 55px; }
  .studio-pricing .price-block { padding: 29px 0 0; border-left: 0; border-top: 1px solid #b99b89; }
  .big-price { font-size: 57px; }
  .price-inclusions { grid-template-columns: 1fr 1fr; }
  .price-block .btn { font-size: 13px; gap: 24px; }
  .studio-faq h2 { font-size: 37px; margin-bottom: 10px; }
  .studio-faq .quiet-link { font-size: 12px; }
  .studio-footer { padding-top: 53px; }
  .footer-invitation { gap: 15px; align-items: flex-end; }
  .footer-invitation h2 { font-size: clamp(47px, 12vw, 65px); }
  .footer-invitation .eyebrow { font-size: 7px; max-width: 30ch; margin-bottom: 25px; }
  .footer-round { width: 62px; height: 62px; margin-bottom: 8px; }
  .footer-round > .diagonal-arrow { transform: scale(1.5); }
  .footer-contact-row { display: block; margin-top: 25px; padding-bottom: 33px; }
  .footer-contact-row > p { font-size: 13px; margin-bottom: 28px; }
  .footer-contact-row > a { font-size: 13px; justify-content: space-between; }
  .studio-footer__bottom { flex-wrap: wrap; gap: 18px 30px; padding-block: 28px; }
  .footer-wordmark { font-size: 53px; }
  .footer-wordmark > span { font-size: 32px; }
  .studio-footer__bottom p { font-size: 10px; }
  .studio-footer__bottom nav { width: 100%; margin: 0; gap: 26px; padding-top: 14px; }
  .studio-footer__legal { flex-wrap: wrap; font-size: 8px; gap: 16px; }
  .studio-footer__legal > span:last-child { width: 100%; justify-content: space-between; }
  .studio:not(.page-home) main > .band:first-child { padding-top: 48px; padding-bottom: 45px; }
  .studio .band { padding-block: 48px; }
  .studio .plates--2, .studio .field-row--2 { grid-template-columns: 1fr; }
  .studio .field-row--2 { gap: 0; }
  .studio .card, .studio .case, .studio .tier { padding: 24px; }
  .studio .result__card { padding: 25px; }
  .studio .field { margin-bottom: 22px; }
  .contact-layout { padding-top: 43px; gap: 35px; }
  .contact-intro h1 { font-size: 56px; }
  .contact-form-wrap { padding: 23px; }
  .contact-detail { margin-top: 20px; }
}
@media (min-width: 900px) { .studio-panel { display: none !important; } }
@media (max-width: 360px) { .hero-actions { gap: 10px; } .hero-actions .btn { padding-inline: 12px; gap: 10px; } .hero-actions .quiet-link { font-size: 10px; } .stage-art { min-height: 312px; } .big-price { font-size: 48px; } .footer-invitation h2 { font-size: 42px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-reveal [data-reveal], .js-reveal [data-reveal] .reveal { opacity: 1; transform: none; }
  .browser-preview:hover { transform: rotate(-5deg); }
  .project-cover:hover img, .studio-service:hover .mini-window, .studio-service:hover .flow-node--end, .studio-service:hover .improve-chart i, .footer-round:hover { transform: none; }
}

/* Warm glass: the original personality, with clearer content and project work. */
:root {
  --paper: #fbf9f4; --paper-2: #f1eee7; --paper-3: #fffdfa;
  --ink: #25241f; --ink-2: #625d54; --ink-3: #71695f;
  --near: #22231f; --near-2: #2e3029; --hair: #e5dfd4;
  --clay: #a24f2f; --clay-deep: #8b4227; --clay-soft: #f3e4db;
  --clay-on-near: #e6a07a; --orange: #d99269;
  --r: 18px; --r-sm: 12px; --r-lg: 28px;
}
.studio-header { top: 20px; margin-block: 20px; background: transparent; border: 0; }
.studio-header__inner { width: min(calc(100% - 72px), 1040px) !important; min-height: 76px; padding: 10px 14px 10px 26px; border: 1px solid #ffffffdd; border-radius: 999px; background: #fffdfbcc; backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); box-shadow: 0 8px 28px #4334210c, 0 1px 3px #43342112, inset 0 1px 0 #fff; transition: background .3s, box-shadow .3s; }
.is-scrolled .studio-header__inner { background: #fffdfbbf; border-color: #ffffffdd; box-shadow: 0 10px 32px #43342112, inset 0 1px 0 #fff; }
.studio-brand { font-size: 40px; }
.brand-star { font-size: 30px; }
.studio-brand__caption { border-color: #ded5c8; }
.header-contact { border: 0; padding: 13px 21px; border-radius: 999px; background: var(--clay); color: #fff; box-shadow: inset 0 1px 0 #ffffff30; gap: 18px; min-height: 48px; }
.header-contact:hover { color: white; background: var(--clay-deep); }
.studio .btn { border-radius: 999px; box-shadow: 0 5px 12px #563e2710, inset 0 1px 0 #ffffff18; transition: transform .3s var(--ease), box-shadow .3s, background .3s; }
.hero-actions .btn--primary, .contact-form-wrap .btn--primary { background: var(--clay); border-color: var(--clay); color: white; }
.hero-actions .btn--primary:hover, .contact-form-wrap .btn--primary:hover { background: var(--clay-deep); border-color: var(--clay-deep); box-shadow: 0 10px 22px #9d532932; }
.studio .btn:hover { transform: translateY(-3px); }
.studio .btn:active { transform: translateY(0) scale(.98); }
.studio .quiet-link { border-color: #bc9e88; }
.studio-hero { position: relative; isolation: isolate; padding-top: 21px; }
.studio-hero::before { content: ""; position: absolute; inset: -150px 0 0; pointer-events: none; z-index: -1; background: radial-gradient(ellipse at 14% 8%, #e7c7b33d, transparent 52%), radial-gradient(ellipse at 93% 23%, #cdd3c48a, transparent 52%), radial-gradient(ellipse at 55% 90%, #e0cdb736, transparent 60%); }
.hero-message h1 { font-weight: 600; letter-spacing: -.063em; }
.hero-topline .availability { padding: 7px 12px; border: 1px solid #e5dfd4; background: #ffffff91; border-radius: 999px; box-shadow: 0 2px 3px #443c2a05; }
.stage-art { min-height: 520px; border-radius: 30px; background: #e1ddd19e; border: 1px solid #ffffffbf; box-shadow: inset 0 1px 0 white, 0 20px 50px #4d503217; }
.stage-grid { opacity: .4; mask-image: linear-gradient(135deg, black, transparent 80%); -webkit-mask-image: linear-gradient(135deg, black, transparent 80%); }
.stage-art::before { background: radial-gradient(circle at 32% 27%, #e8bba1, #c97f52); box-shadow: inset -20px -20px 40px #9b552626, 0 20px 70px #cb936946; }
.stage-art::after { content: ""; position: absolute; z-index: -1; width: 100px; height: 100px; border-radius: 50%; left: -20px; bottom: 15px; background: radial-gradient(circle at 30% 25%, #ffffffa8, #c4cabb70 68%, #adb89c50); border: 1px solid #ffffff99; box-shadow: inset 0 2px 4px #ffffffbb; }
.browser-preview { top: 72px; width: 83%; left: 9%; border-radius: 12px; transform: rotate(-5deg); border-color: #f7f4ec; transition: transform .65s var(--ease), box-shadow .65s; }
.browser-preview:hover { transform: rotate(-2deg) translateY(-7px); box-shadow: 0 28px 44px #4b403438; }
.browser-preview img { border-radius: 5px 5px 8px 8px; }
.workflow-note { border-radius: 18px; background: #fffdf9d9; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-color: #ffffffed; box-shadow: 0 8px 25px #59472e19, inset 0 1px 0 #fff; }
.workflow-check { background: #e5eadc; box-shadow: inset 0 1px 0 #fff9; }
.project-dot { border-radius: 50%; width: 40px; height: 40px; margin: 2px; background: #fffdf94d; border-color: #dad7cc; transition: transform .25s, background .25s, box-shadow .25s; }
.project-dot.is-active { background: #a24f2f; border-color: #a24f2f; box-shadow: 0 4px 12px #a24f2f29; }
.project-dot:hover { transform: translateY(-2px); background: var(--ink); }
.section-work { background: #f2f0e9; border-top-color: #e5dfd4; }
.project-cover { border-radius: 24px; background: #e1d7c6; border: 1px solid #ffffff9c; box-shadow: inset 0 1px 0 white; }
.project-cover--mechanical { background: #d0d8d1; }
.project-cover--garden { background: #d0d9c5; }
.project-cover img { border-radius: 9px; box-shadow: 0 15px 26px #3a302929; }
.project-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(350px circle at var(--pointer-x, 50%) var(--pointer-y, 30%), #ffffff40, transparent 70%); opacity: 0; transition: opacity .4s; }
.project-cover:hover::after { opacity: 1; }
.project-open { width: 46px; height: 46px; background: #fffdf9cc; border: 1px solid #ffffffde; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 7px 15px #54452e1f; }
.studio-services { border-radius: 38px; margin: 22px; background: radial-gradient(ellipse at 80% 0, #45473760, transparent 60%), var(--near); box-shadow: 0 20px 45px #33321d0f; }
.studio-services .wrap { width: min(calc(100% - 60px), 1300px); }
.service-visual { border-radius: 24px; background: #ffffff07; border: 1px solid #ffffff12; box-shadow: inset 0 1px 0 #ffffff0a; }
.mini-window { border-radius: 9px; box-shadow: 0 15px 25px #0003; }
.mini-button { border-radius: 999px; }
.flow-node { border-radius: 12px; }
.flow-node--end { box-shadow: 0 6px 15px #10160e26; }
.improve-chart i { border-radius: 5px 5px 0 0; }
.service-title .diagonal-arrow { transition: transform .3s; }
.studio-service:hover .service-title .diagonal-arrow { transform: translate(2px, -2px); color: var(--clay-on-near); }
.studio-pricing { margin: 0 22px; border-radius: 34px; background: radial-gradient(ellipse at 0 0, #f6e7db, transparent 65%), #e7cfbd; box-shadow: inset 0 1px 0 #fff9; }
.studio-pricing .wrap { width: min(calc(100% - 60px), 1300px); }
.studio-pricing .price-block { padding: 30px 32px; border: 1px solid #fff9; background: #fffaf054; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 24px; box-shadow: 0 14px 30px #9572540e, inset 0 1px 0 #fff5; }
.studio .faq { border: 1px solid var(--hair); border-radius: 17px; background: #fffefa90; margin-bottom: 12px; transition: background .25s, box-shadow .25s; }
.studio .faq:last-child { border: 1px solid var(--hair); }
.studio .faq summary { padding: 23px; border-radius: 17px; }
.studio .faq[open] { background: #fffdfa; border-color: #cba389; box-shadow: 0 8px 20px #59473109; }
.studio .faq__a { padding: 0 40px 24px 23px; }
.studio .faq__m { margin-right: 0; }
.studio-footer { margin: 0 22px 22px; border-radius: 34px; background: radial-gradient(ellipse at 100% 0, #5a493529, transparent 60%), var(--near); }
.studio-footer .wrap { width: min(calc(100% - 60px), 1300px); }
.footer-round { background: radial-gradient(circle at 30% 25%, #e7b38d, #bd754d); border: 1px solid #ecc4a87d; box-shadow: inset 0 2px 3px #ffe2caa6, 0 16px 30px #0003; }
.studio .card, .studio .case, .studio .tier, .studio .result__card, .studio .plate { border-radius: 24px; box-shadow: 0 6px 20px #504a3508; }
.studio .card__go, .studio .steps > li::before { border-radius: 50%; }
.studio .pill { border-radius: 999px; }
.studio input, .studio textarea, .studio select { border-radius: 12px; border-color: #cfc6b7; background: #fffdfbcc; }
.contact-form-wrap { background: #f1ede4a8; border: 1px solid #ffffffde; border-radius: 28px; box-shadow: 0 10px 36px #59412a0c, inset 0 1px 0 #fff; }
.studio .form-success { border-radius: 20px; }
.studio-menu { border-radius: 50%; background: #ffffff80; }
.studio-panel { border-radius: 25px; background: #fffdf7e8; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-color: #ffffffed; }
.studio .dock__bar { background: #393a35c4; border-color: #ffffff55; box-shadow: 0 12px 30px #25241f30, inset 0 1px 1px #ffffff57; }
.studio .dock__orb { background: radial-gradient(circle at 30% 15%, #bf7b54, #9b492c); border-color: #e7b799; box-shadow: 0 10px 22px #502e273d, inset 0 1px 1px #ffe4bd9c; }
.studio .dock__bar a { transition: flex-grow .4s var(--ease), background .3s, color .3s, transform .3s; }
.studio .dock__bar a:hover { background: #ffffff14; }
.studio .dock__bar a.is-current:hover { background: var(--paper); }
.studio .dock__orb:hover { transform: translateY(-4px) scale(1.04); }
@media (max-width: 1190px) { .studio-pricing .price-block { padding: 25px; } .stage-art { min-height: 435px; } }
@media (max-width: 899px) {
  .studio-header { top: 15px; margin-block: 15px; }
  .stage-art { min-height: 520px; }
  .studio-header__inner { width: min(calc(100% - 48px), 600px) !important; min-height: 68px; padding: 8px 10px 8px 23px; }
  .header-contact { padding: 10px 17px; min-height: 44px; }
  .studio-header__inner { gap: 16px; }
  .studio-brand { font-size: 36px; }
  .brand-star { font-size: 28px; }
  .studio-panel { top: 95px; }
  .studio-services { margin-inline: 16px; border-radius: 30px; }
  .studio-services .wrap, .studio-pricing .wrap, .studio-footer .wrap { width: calc(100% - 40px); }
  .studio-pricing, .studio-footer { margin-inline: 16px; border-radius: 30px; }
  body.studio { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .studio .dock { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 599px) {
  .studio-header__inner { width: calc(100% - 32px) !important; min-height: 64px; gap: 12px; padding-left: 20px; }
  .studio-brand { font-size: 34px; }
  .brand-star { font-size: 26px; }
  .header-contact { padding: 10px 15px; font-size: 11px; }
  .studio-hero { padding-top: 13px; }
  .hero-topline .availability { padding: 5px 8px; font-size: 8px; }
  .studio-services, .studio-pricing, .studio-footer { margin-inline: 10px; border-radius: 25px; }
  .studio-services .wrap, .studio-pricing .wrap, .studio-footer .wrap { width: calc(100% - 36px); }
  .stage-art { min-height: 340px; border-radius: 25px; }
  .browser-preview { top: 59px; }
  .workflow-note { border-radius: 15px; }
  .project-cover { border-radius: 22px; }
  .studio-pricing .price-block { border-left: 1px solid #fff9; padding: 25px 22px; }
  .big-price { font-size: 48px; }
  .price-inclusions { gap: 9px; font-size: 10px; }
  .studio .faq summary { padding: 20px; font-size: 14px; }
  .studio .faq__a { padding: 0 25px 22px 20px; font-size: 13px; }
  .footer-contact-row > a { font-size: 12px; }
  .studio-footer { padding-bottom: 25px; }
}
@media (max-width: 360px) { .big-price { font-size: 40px; } .price-inclusions { grid-template-columns: 1fr; } .price-block .btn { font-size: 11px; gap: 15px; padding-inline: 15px; } }

/* Supplied stepped-bar identity and a clean, entirely sans-serif voice. */
.studio em, .studio .say { font-family: var(--font-sans); font-style: normal; font-weight: inherit; font-size: inherit; letter-spacing: inherit; font-variation-settings: inherit; color: inherit; }
.studio h1 em, .studio h2 em, .studio .band--near .say, .studio .on-near .say { color: inherit; }
.studio .hero-message h1 { font-weight: 600; letter-spacing: -.043em; }
.studio .hero-message h1 em { font-size: 1em; font-weight: 400; letter-spacing: -.045em; color: #716d63; }
.studio .studio-services h2 em, .studio .footer-invitation h2 em { color: #c8cebc; }
.studio-brand { gap: 10px; letter-spacing: -.06em; }
.studio-brand__icon { width: 40px; height: 40px; border-radius: 13px; flex: none; box-shadow: 0 3px 6px #292c2710; }
.studio-brand .brand-lockup { width: 235px; height: auto; display: block; flex: none; }
.footer-wordmark { background: transparent; padding: 0; border-radius: 0; }
.footer-wordmark > .footer-lockup { width: 230px; height: auto; border: 0; border-radius: 0; }
.brand-word { white-space: nowrap; }
.brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.brand-caption { display: block; font: 400 8px/1.2 var(--font-sans); letter-spacing: .14em; color: #776f66; white-space: nowrap; }
.footer-wordmark .brand-caption { color: #bbb4a9; font-size: 9px; }
.brand-period { color: #858d79; }
.studio-brand__caption { margin-left: 8px; }
.footer-wordmark { display: inline-flex; align-items: center; gap: 13px; font-size: 56px; }
.footer-wordmark > img { width: 54px; height: 54px; border: 1px solid #a8ae962f; border-radius: 17px; }
.footer-wordmark > span { font: inherit; color: inherit; margin: 0; vertical-align: initial; }
.connection-mark { display: inline-block; width: 20px; height: 10px; border: 1.5px solid #a4a891; border-radius: 999px; transform: rotate(-25deg); position: relative; }
.connection-mark::after { content: ""; position: absolute; inset: 3px -5px 3px 5px; background: var(--paper); border-radius: 999px; }
.hero-footline .connection-mark { flex: none; }
.studio-signature { font: 600 35px/1 var(--font-sans); letter-spacing: -.04em; }
.studio-signature img { width: 42px; height: 42px; }
.studio-signature > span:last-child { margin-left: 10px; }
.mini-heading { font-size: 17px; letter-spacing: -.045em; font-weight: 500; }
.mini-heading em { color: #666b5a; }
.mini-monogram { position: absolute; right: 13px; bottom: 11px; width: 32px; height: 32px; }
.project-caption > span { font-size: 9px; }
.service-tags { font-size: 9px; }
.studio h1, .studio h2 { text-wrap: balance; }
.studio .hero-message h1 { text-wrap: initial; }
@media (max-width: 899px) { .studio-brand__icon { width: 34px; height: 34px; } .studio-brand__caption { font-size: 7px; padding-left: 10px; margin-left: 4px; } .studio-brand { font-size: 32px; gap: 8px; } }
@media (max-width: 599px) { .studio-brand { font-size: 29px; gap: 7px; } .studio-brand__icon { width: 32px; height: 32px; } .footer-wordmark { font-size: 43px; gap: 10px; } .footer-wordmark > img { width: 43px; height: 43px; border-radius: 14px; } .hero-footline .connection-mark:nth-child(4) { display: none; } .hero-footline .connection-mark { width: 16px; height: 8px; } .studio .footer-invitation h2 { font-size: clamp(42px, 10.5vw, 62px); } }
@media (max-width: 899px) { .studio-brand .brand-lockup { width: 210px; } .footer-wordmark > .footer-lockup { width: 205px; } }
@media (max-width: 599px) { .studio-brand .brand-lockup { width: 160px; } .studio-header__inner { gap: 8px; padding-left: 14px; } .header-contact { padding-inline: 13px; gap: 10px; } .footer-wordmark > .footer-lockup { width: 205px; height: auto; border-radius: 0; } .studio-footer__bottom { gap: 22px; } }
@media (max-width: 370px) { .studio-brand .brand-lockup { width: 143px; } .header-contact { padding-inline: 10px; font-size: 10px; min-height: 42px; } .header-contact .diagonal-arrow { display: none; } .studio-menu { width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) {
  .studio .btn:hover, .studio .btn:active, .project-dot:hover, .studio .dock__orb:hover, .studio-service:hover .service-title .diagonal-arrow { transform: none; }
  .browser-preview:hover { transform: rotate(-5deg); }
}

/* A compact glass dock at every viewport size, with room below the footer. */
body.studio { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.studio .dock { display: flex; width: min(calc(100% - 32px), 540px); left: 50%; right: auto; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.studio .dock__bar a { font-size: 11px; }
.studio .dock__bar a.is-current { font-size: 12px; }

/* Short, calm inner pages. These avoid the legacy full-width content bands. */
.studio .simple-page { width: min(calc(100% - 96px), 1120px); padding: 58px 0 82px; }
.simple-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
.simple-intro { min-width: 0; }
.simple-label { color: var(--ink-3); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 24px; }
.studio .simple-intro h1 { font-size: clamp(44px, 4.65vw, 68px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; text-wrap: initial; margin: 0 0 24px; }
.page-simple h2 { letter-spacing: -.025em; }
.simple-intro h1 > span { color: #7b756d; }
.simple-intro > p:not(.simple-label) { max-width: 42ch; font-size: 17px; line-height: 1.7; color: var(--ink-2); margin: 0 0 28px; }
.simple-glass { min-width: 0; background: linear-gradient(135deg, #ffffffc9, #fffaf47d); border: 1px solid #ffffff; border-radius: 28px; box-shadow: 0 12px 40px #68523b09, inset 0 1px 0 #ffffff; }
.simple-price-card { padding: 36px; }
.simple-price-card .simple-label { margin-bottom: 22px; }
.simple-price { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 5px; font-size: clamp(36px, 3.7vw, 54px); font-weight: 500; letter-spacing: -.055em; line-height: 1.15; margin: 0 0 10px; }
.simple-price > span { color: #938b81; font-weight: 300; }
.simple-price small { font-size: 13px; letter-spacing: .04em; margin-left: 7px; color: var(--ink-3); }
.simple-price-note { font-size: 14px; color: var(--ink-3); margin: 0; }
.simple-checks { list-style: none; padding: 26px 0; margin: 25px 0 0; border-top: 1px solid var(--hair); display: grid; gap: 14px; }
.simple-checks li { display: flex; align-items: baseline; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.simple-checks li::before { content: "✓"; color: #697453; flex: none; }
.simple-price-card .btn { display: flex; justify-content: space-between; width: 100%; }
.simple-details { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 88px); margin-top: 72px; padding-top: 34px; border-top: 1px solid var(--hair); }
.studio .simple-details h2 { font-size: 28px; margin: 10px 0 0; }
.simple-disclosures details { border-bottom: 1px solid var(--hair); }
.simple-disclosures details:last-child { border: 0; }
.simple-disclosures summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; cursor: pointer; font-size: 16px; font-weight: 500; min-height: 60px; padding: 16px 0; list-style: none; }
.simple-disclosures summary::-webkit-details-marker { display: none; }
.simple-disclosures summary::after { content: "+"; font-size: 22px; line-height: 1; font-weight: 400; color: var(--ink-3); }
.simple-disclosures details[open] summary::after { content: "−"; }
.simple-disclosures p { font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 0; padding: 0 24px 22px 0; }
.simple-studio-card { background: linear-gradient(135deg, #fffcf8b3, #e9e2d580); padding: 36px; display: grid; gap: 28px; }
.simple-studio-card > img { border-radius: 22px; width: 76px; height: 76px; box-shadow: 0 8px 18px #5c503d0d; }
.simple-studio-card .simple-label { margin-bottom: 14px; font-size: 11px; }
.studio .simple-studio-card h2 { font-size: 38px; line-height: 1.12; margin: 0; }
.simple-studio-facts { margin: 0; display: grid; gap: 14px; padding-top: 22px; border-top: 1px solid #d4cbbb; }
.simple-studio-facts div { display: grid; gap: 5px; }
.simple-studio-facts dt { font-size: 12px; color: var(--ink-3); }
.simple-studio-facts dd { margin: 0; font-size: 15px; color: var(--ink-2); }
.simple-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin-top: 72px; padding-top: 30px; border-top: 1px solid var(--hair); }
.simple-number { display: block; font-size: 12px; letter-spacing: .08em; color: var(--ink-3); }
.studio .simple-principles h2 { font-size: 24px; margin: 22px 0 12px; }
.simple-principles p { font-size: 16px; line-height: 1.65; color: var(--ink-2); margin: 0; max-width: 29ch; }
.simple-bottom-link { margin-top: 30px; }
.simple-services-intro { padding-bottom: 34px; }
.simple-services-intro > p:not(.simple-label) { max-width: 50ch; margin-bottom: 0; }
.simple-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.simple-service-card { display: flex; flex-direction: column; padding: 28px; color: var(--ink); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important; }
.simple-service-card:hover { transform: translateY(-5px); background: #fffdfa; color: var(--ink); box-shadow: 0 18px 40px #68523b12; }
.simple-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 34px; }
.simple-icon { display: grid; place-items: center; border-radius: 16px; width: 48px; height: 48px; background: #e9e3d866; border: 1px solid #fff; color: #6a6659; }
.simple-icon svg { width: 25px; height: 25px; }
.studio .simple-service-card h2 { font-size: 29px; line-height: 1.15; margin: 0 0 15px; }
.simple-service-card > p { font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 0 0 24px; }
.simple-service-card ul { display: grid; gap: 9px; padding: 0; margin: auto 0 28px; list-style: none; color: var(--ink-2); font-size: 14px; }
.simple-service-card li::before { content: "·"; color: #9c8470; padding-right: 10px; }
.simple-card-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--hair); padding-top: 20px; font-size: 14px; }
.simple-card-link .diagonal-arrow { transition: transform .25s; }
.simple-service-card:hover .diagonal-arrow { transform: translate(2px, -2px); }
.simple-service-note { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 20px; }
.simple-service-note p { font-size: 15px; color: var(--ink-3); margin: 0; }
.page-simple .studio-footer { padding-top: 48px; }
.page-simple .studio-footer .wrap { max-width: 1120px; }
.page-simple .footer-invitation h2 { font-size: clamp(42px, 5vw, 64px); letter-spacing: -.035em; }
.page-simple .footer-round { width: 92px; height: 92px; }
.page-simple .footer-round > .diagonal-arrow { transform: scale(2); }
.page-simple .footer-contact-row { padding-bottom: 28px; margin-top: 24px; }
.page-simple .studio-footer__bottom { padding-block: 26px; }

@media (max-width: 899px) {
  .studio .simple-page { width: calc(100% - 48px); padding: 40px 0 60px; }
  .simple-split { gap: 30px; }
  .studio .simple-intro h1 { font-size: clamp(40px, 5.5vw, 52px); }
  .simple-price-card, .simple-studio-card { padding: 26px; }
  .simple-price { font-size: 40px; }
  .simple-price small { display: block; flex-basis: 100%; margin: 6px 0 0; }
  .simple-service-grid { grid-template-columns: 1fr; gap: 16px; }
  .simple-service-card { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
  .simple-card-top { grid-column: 1 / -1; margin: 0 0 12px; }
  .simple-service-card > p { grid-column: 1; margin: 0; }
  .simple-service-card ul { grid-column: 2; grid-row: 2 / 4; margin: 0; align-self: center; }
  .simple-card-link { grid-column: 1 / -1; margin-top: 10px; }
  .simple-principles { gap: 22px; }
}
@media (max-width: 599px) {
  .brand-caption { font-size: 6.5px; letter-spacing: .1em; }
  .brand-text { gap: 3px; }
  .studio .dock__bar a { font-size: 9px; }
  .studio .dock__bar a.is-current { font-size: 11px; gap: 5px; padding-inline: 8px; }
  .studio .simple-page { width: calc(100% - 40px); padding-top: 30px; }
  .simple-split { grid-template-columns: 1fr; gap: 34px; }
  .studio .simple-intro h1 { font-size: clamp(39px, 10.5vw, 58px); }
  .simple-label { font-size: 11px; margin-bottom: 18px; }
  .simple-intro > p:not(.simple-label) { font-size: 16px; margin-bottom: 20px; }
  .simple-price { font-size: clamp(34px, 9.5vw, 49px); }
  .simple-price small { flex-basis: auto; margin-left: 5px; font-size: 11px; }
  .simple-price-card, .simple-studio-card { padding: 26px 23px; border-radius: 24px; }
  .simple-checks li { font-size: 14px; gap: 9px; }
  .simple-details { grid-template-columns: 1fr; gap: 14px; margin-top: 44px; padding-top: 26px; }
  .studio .simple-details h2 { font-size: 26px; }
  .simple-principles { grid-template-columns: 1fr; gap: 25px; margin-top: 44px; }
  .simple-principles > div { display: grid; grid-template-columns: 26px 1fr; column-gap: 14px; }
  .simple-principles .simple-number { grid-row: 1 / 3; padding-top: 5px; }
  .studio .simple-principles h2 { margin: 0 0 8px; }
  .simple-principles p { max-width: none; }
  .simple-service-card { display: flex; padding: 26px 23px; gap: 0; }
  .simple-card-top { margin-bottom: 26px; }
  .simple-service-card > p { margin-bottom: 24px; }
  .simple-service-card ul { align-self: stretch; margin-bottom: 25px; }
  .simple-card-link { margin: 0; }
  .simple-service-note { flex-direction: column; align-items: flex-start; gap: 5px; padding-top: 26px; }
  .page-simple .footer-invitation { gap: 14px; }
  .page-simple .footer-invitation .eyebrow { max-width: 28ch; font-size: 8px; line-height: 1.6; }
  .page-simple .footer-round { width: 56px; height: 56px; }
  .page-simple .footer-round > .diagonal-arrow { transform: scale(1.4); }
  .page-simple .footer-invitation h2 { font-size: clamp(36px, 9vw, 46px); }
}
@media (prefers-reduced-motion: reduce) {
  .simple-service-card:hover, .simple-service-card:hover .diagonal-arrow { transform: none; }
}

/* Seamless service marquee. Both groups have identical widths, including gaps. */
.hero-footline { flex-wrap: nowrap; justify-content: initial; gap: 14px; min-height: 78px; padding: 0; font-size: 12px; }
.marquee-window { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.marquee-track { display: flex; width: max-content; animation: services-scroll 36s linear infinite; }
.marquee-group { display: flex; align-items: center; flex: none; gap: 42px; padding-right: 42px; white-space: nowrap; }
.hero-footline .marquee-group .connection-mark { display: inline-block; width: 20px; height: 10px; flex: none; }
.marquee-toggle { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--hair); border-radius: 50%; background: #ffffff70; color: var(--ink-2); cursor: pointer; }
.marquee-toggle[hidden] { display: none; }
.marquee-toggle svg { width: 18px; height: 18px; grid-area: 1 / 1; }
.marquee-toggle .marquee-play, .marquee-toggle[aria-pressed="true"] .marquee-pause { display: none; }
.marquee-toggle[aria-pressed="true"] .marquee-play { display: block; }
.marquee-toggle:hover { background: #fff; }
.marquee-window:hover .marquee-track, .hero-footline[data-paused="true"] .marquee-track { animation-play-state: paused; }
@keyframes services-scroll { to { transform: translateX(-50%); } }
@media (max-width: 599px) { .hero-footline { min-height: 72px; font-size: 11px; gap: 8px; } }
@media (max-width: 370px) {
  .studio .dock__bar a:not(.is-current) span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-window { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; width: 100%; }
  .marquee-group { width: 100%; min-width: 0; flex: 1 1 100%; flex-wrap: wrap; white-space: normal; gap: 12px 20px; padding: 18px 0; }
  .marquee-group[aria-hidden="true"], .hero-footline .marquee-group .connection-mark, .marquee-toggle { display: none; }
}

/* Page changes: soft depth, an anchored glass shell and a travelling nav pill.
   The browser handles the document swap; no click interception or SPA router. */
@view-transition { navigation: auto; }
.studio-header { view-transition-name: site-header; }
.studio .dock__bar { view-transition-name: site-dock; }
.studio .dock__orb { view-transition-name: site-contact; }
.studio .dock__bar a.is-current { view-transition-name: dock-selection; }

::view-transition { pointer-events: none; }
::view-transition-group(root) { animation: none; }
::view-transition-old(root) {
  animation: page-soft-out 190ms cubic-bezier(.4, 0, 1, 1) both;
  mix-blend-mode: normal;
}

/* Contact keeps the decision simple: a short message or a direct call. */
.page-contact .contact-layout { width: min(calc(100% - 96px), 1120px); grid-template-columns: .85fr 1.15fr; gap: 72px; padding: 52px 0 76px; align-items: center; }
.page-contact .contact-intro h1 { font-size: clamp(48px, 5vw, 72px); letter-spacing: -.035em; margin: 0 0 22px; max-width: none; }
.page-contact .contact-intro > p:not(.simple-label) { font-size: 17px; line-height: 1.7; max-width: 31ch; margin: 0 0 30px; }
.contact-options { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.contact-call { display: flex; align-items: center; gap: 16px; padding: 18px 22px 18px 16px; background: #fffdf7c7; border: 1px solid #fff; border-radius: 23px; color: var(--ink); text-decoration: none; box-shadow: 0 9px 24px #59412a09; transition: transform .25s ease, background .25s ease !important; }
.contact-call:hover { transform: translateY(-3px); background: white; }
.contact-call__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: #efe5d7; color: #875538; }
.contact-call__icon svg { width: 22px; height: 22px; }
.contact-call__label { display: block; color: var(--ink-3); font-size: 12px; margin-bottom: 5px; }
.contact-call strong { font-size: 21px; font-weight: 500; letter-spacing: -.02em; white-space: nowrap; }
.contact-call > .diagonal-arrow { width: 14px; height: 14px; margin-left: 14px; }
.contact-email { border-bottom: 0; gap: 12px; }
.page-contact .contact-form-wrap { padding: 32px; background: linear-gradient(135deg, #ffffffc9, #fffaf47d); }
.page-contact .contact-form-wrap h2 { margin-bottom: 26px; font-size: 28px; }
.page-contact .field__label { font-size: 14px; }
.page-contact .field { margin-bottom: 22px; }
.page-contact textarea { min-height: 140px; }
.page-contact .form-privacy { margin: 14px 0 0; font-size: 12px; }
.page-contact .studio-footer { padding-top: 0; }
.page-contact .footer-invitation, .page-contact .footer-contact-row { display: none; }
@media (max-width: 899px) {
  .page-contact .contact-layout { width: calc(100% - 48px); grid-template-columns: 1fr; gap: 28px; padding: 40px 0 60px; }
  .page-contact .contact-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: start; }
  .page-contact .contact-intro > .simple-label { grid-column: 1; margin-bottom: 18px; }
  .page-contact .contact-intro h1 { grid-column: 1; font-size: 48px; margin-bottom: 16px; }
  .page-contact .contact-intro > p:not(.simple-label) { grid-column: 1; margin: 0; font-size: 16px; }
  .contact-options { grid-column: 2; grid-row: 1 / 4; align-self: center; }
  .contact-call { padding: 15px 18px 15px 14px; gap: 12px; }
  .contact-call > .diagonal-arrow { margin-left: 2px; }
  .contact-call strong { font-size: 19px; }
}
@media (max-width: 599px) {
  .page-contact .contact-layout { width: calc(100% - 40px); padding-top: 30px; }
  .page-contact .contact-intro { display: block; }
  .page-contact .contact-intro > p:not(.simple-label) { max-width: none; margin-bottom: 22px; }
  .contact-options { gap: 5px; }
  .contact-call { width: 100%; padding: 14px 17px; }
  .contact-call > .diagonal-arrow { margin-left: auto; }
  .contact-call strong { font-size: 21px; }
  .page-contact .contact-form-wrap { padding: 25px 22px; }
  .page-contact .field-row--2 { grid-template-columns: 1fr; gap: 0; }
  .page-contact .contact-form-wrap h2 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .contact-call:hover { transform: none; } }
::view-transition-new(root) {
  animation: page-soft-in 480ms cubic-bezier(.16, 1, .3, 1) 35ms both;
  mix-blend-mode: normal;
}
::view-transition-group(site-header),
::view-transition-group(site-dock),
::view-transition-group(site-contact) {
  z-index: 2;
  animation-duration: 480ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}
::view-transition-old(site-header),
::view-transition-old(site-dock),
::view-transition-old(site-contact) { animation: page-shell-out 140ms ease both; }
::view-transition-new(site-header),
::view-transition-new(site-dock),
::view-transition-new(site-contact) { animation: page-shell-in 180ms ease both; }
::view-transition-group(dock-selection) {
  z-index: 3;
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
::view-transition-old(dock-selection) { animation: page-shell-out 140ms ease both; }
::view-transition-new(dock-selection) { animation: page-shell-in 230ms ease both; }

@keyframes page-soft-out {
  from { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
  to { opacity: 0; filter: blur(5px); transform: translateY(-14px) scale(.99); }
}
@keyframes page-soft-in {
  from { opacity: 0; filter: blur(7px); transform: translateY(24px) scale(.985); }
  to { opacity: 1; filter: none; transform: none; }
}
@keyframes page-shell-out { to { opacity: 0; } }
@keyframes page-shell-in { from { opacity: 0; } to { opacity: 1; } }
.page-motion-fallback .studio main { animation: page-soft-in 480ms cubic-bezier(.16, 1, .3, 1) both; }

@media (max-width: 599px) {
  ::view-transition-new(root) { animation-duration: 400ms; }
  ::view-transition-group(dock-selection) { animation-duration: 440ms; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .page-motion-fallback .studio main { animation: none; }
}