/* Shared visual system: warm paper, ink, and the coral in the Xiaoer icon. */
:root {
  --blue: #b7462f;
  --blue-dark: #933720;
  --muted: #77736e;
  --border: #e5e1db;
  --radius: 22px;
  --ink: #252623;
  --paper: #f7f5f1;
  --accent: #db6044;
  --ease: cubic-bezier(.22,1,.36,1);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
html { scroll-padding-top: 110px; }
body { overflow-x: clip; }
body:has(dialog[open]) { overflow: hidden; }
::selection { background: #efc6b5; color: #272522; }
h1,h2,h3 { color: var(--ink); }
a { text-underline-offset: 5px; }
.shell { width: min(1280px,calc(100% - 96px)); }
.page { padding-top: 52px; padding-bottom: 90px; }
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: #f7f5f1e8; border-bottom: 1px solid #dedbd566;
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  transition: background .3s, box-shadow .3s;
}
.site-header.is-scrolled { background: #faf9f5ed; box-shadow: 0 8px 30px #24232106; }
.header-inner { min-height: 88px; }
.brand { color: var(--ink); font-size: 21px; gap: 11px; }
.brand img { border-radius: 12px; }
.brand-sub { color: #858078; font-size: 10px; letter-spacing: 3px; }
.main-nav { gap: 32px; font-size: 13px; font-weight: 500; }
.main-nav a { color: #625f59; transition: color .2s; }
.main-nav a:hover { color: var(--blue); text-decoration: none; }
.main-nav .nav-cta { background: var(--ink); color: #fff; padding: 11px 20px; border-radius: 999px; }
.main-nav .nav-cta:hover { background: #47473f; color: #fff; }
.main-nav .nav-cta[aria-current] { color: #fff; }
.main-nav .nav-cta span { margin-left: 12px; }
.nav-user { color: #6a665f; border-color: var(--border); }
.reading-progress { position: absolute; bottom: -1px; left: 0; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.skip-link { z-index: 50; }
.menu-toggle { display: none; }
.button { min-height: 48px; border-radius: 999px; padding: 12px 23px; font-size: 13px; font-weight: 600; transition: transform .3s var(--ease), box-shadow .3s, background .3s; }
.button.primary { background: var(--ink); box-shadow: 0 5px 15px #22251e12; }
.button.primary:hover { background: #41443b; box-shadow: 0 8px 20px #22251e20; transform: translateY(-2px); }
.button.primary:active,.button.secondary:active { transform: translateY(0) scale(.98); }
.button.primary:disabled { transform: none; box-shadow: none; }
.button.secondary { border-color: #dcd7ce; color: var(--ink); background: #fff9; }
.button.secondary:hover { background: #fff; }
.button span[aria-hidden] { transition: transform .3s var(--ease); }
.button:hover span[aria-hidden] { transform: translate(2px,-2px); }
.card { border-color: var(--border); box-shadow: 0 6px 25px #37312504; }
.eyebrow { color: #a15740; letter-spacing: 2px; font-size: 10px; font-weight: 650; }
.subtle-tag,.optional { background: #f0ede6; color: #777266; }
.notice { background: #f2f2e9; border-color: #dce2cc; color: #57633e; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline-color: #c06c50; }
.site-footer { background: var(--paper); border-color: var(--border); padding: 40px 0; }
.footer-inner { align-items: center; color: #827e76; font-size: 11px; }
.footer-brand { color: var(--ink); font-size: 15px; font-weight: 650; }
.footer-brand:hover { text-decoration: none; }
.footer-brand span { display: block; font-size: 11px; color: #898379; margin-top: 5px; font-weight: 400; }
.motion-toggle { background: none; color: #716d64; border: 1px solid #ded9d0; padding: 9px 13px; border-radius: 999px; font-size: 11px; }
.back-top { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 50%; color: var(--ink); font-size: 18px; }
.back-top:hover { text-decoration: none; background: #fff; }

/* Homepage — full scale artwork and generous editorial spacing. */
.studio-home .page { padding-top: 0; }
.studio-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; min-height: 700px; align-items: center; padding: 60px 0 48px; }
.hero-orbit { position: absolute; z-index: -1; width: 720px; height: 720px; right: 0; top: -30px; pointer-events: none; border-radius: 50%; background: radial-gradient(ellipse,#eee0cb90,transparent 67%); }
.hero-kicker { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: 2px; color: #81786d; }
.hero-kicker>span { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 5px #db604410; }
.studio-hero h1 { font-size: clamp(52px,5.6vw,80px); font-weight: 650; letter-spacing: -4px; line-height: 1.18; margin: 27px 0; }
.hero-emphasis { color: var(--accent); }
.studio-hero-copy>p { font-size: 15px; line-height: 2; color: #7d776e; }
.studio-actions { margin: 30px 0; align-items: center; gap: 27px; }
.studio-actions .primary { min-height: 53px; padding: 15px 25px; }
.studio-actions .primary span { margin-left: 14px; }
.hero-secondary { display: inline-flex; gap: 15px; align-items: center; color: #4e4d46; font-size: 13px; padding: 12px 0; }
.hero-secondary span { transition: transform .3s; }
.hero-secondary:hover { text-decoration: none; }
.hero-secondary:hover span { transform: translateY(4px); }
.hero-proof { display: flex; flex-wrap: wrap; gap: 7px 20px; font-size: 11px; color: #79736a; }
.hero-proof span+span { color: #a15740; }
.studio-hero-copy>.studio-invite-note { font-size: 10px; color: #8b857b; margin-top: 12px; }
.hero-showcase { min-width: 0; padding: 30px 0 0 10px; }
.hero-art-deck { position: relative; height: auto; padding-bottom: 45px; perspective: 1200px; }
.hero-art-main { position: relative; z-index: 2; margin: 0 auto; width: 74%; background: #fffdf9; padding: 12px; border-radius: 15px; box-shadow: 0 24px 60px #59452e20,0 1px 3px #44301815; transform: rotate(-5deg) translateY(var(--art-offset,0px)); transition: transform .8s var(--ease); }
.hero-art-main .example-art { border-radius: 6px; }
.hero-art-label { display: flex; align-items: center; justify-content: space-between; font-size: 8px; letter-spacing: 1.8px; color: #827c70; padding: 1px 2px 10px; }
.hero-art-label>span { font-size: 9px; letter-spacing: 0; }
.hero-art-main figcaption { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px 3px; font-size: 12px; color: #605c53; }
.hero-art-main figcaption>span:last-child { font-size: 19px; }
.hero-side-art { position: absolute; top: 48px; width: 60%; padding: 7px; background: #fffdf9; border-radius: 12px; box-shadow: 0 14px 35px #40321e17; }
.hero-side-art .example-art { border-radius: 5px; }
.hero-side-left { left: 0; transform: rotate(-15deg) translateY(16px); }
.hero-side-right { right: 0; transform: rotate(12deg); }
.hero-floating-note { position: absolute; z-index: 3; right: -5px; bottom: 35px; display: flex; align-items: center; gap: 12px; padding: 15px 21px; background: #ffffffdf; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid #fff; border-radius: 13px; box-shadow: 0 12px 38px #4d3d2415; transform: rotate(3deg); }
.hero-floating-note>span { color: var(--accent); font-size: 27px; }
.hero-floating-note>div { font-size: 12px; font-weight: 600; }
.hero-floating-note small { display: block; font-size: 9px; font-weight: 400; color: #8f897d; margin-top: 3px; }
.hero-showcase-bottom { display: flex; align-items: center; justify-content: center; gap: 18px; padding-top: 17px; position: relative; z-index: 3; }
.hero-tabs { display: flex; padding: 4px; border: 1px solid #e1dcd1; border-radius: 999px; background: #eeebe4; }
.hero-tabs button { border: 0; background: transparent; border-radius: 999px; padding: 7px 18px; font-size: 11px; color: #7d776d; transition: color .25s,background .25s,box-shadow .25s; }
.hero-tabs button[aria-pressed="true"] { background: #fff; color: #2a2d26; box-shadow: 0 2px 8px #473a2110; }
.hero-example-note { color: #938a7e; font-size: 9px; }
.studio-signature { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 23px 0; color: #827c73; font-size: 11px; }
.studio-signature>div { display: flex; align-items: center; gap: 25px; font-size: 9px; letter-spacing: 2px; }
.studio-signature i { font-size: 18px; color: var(--accent); font-style: normal; }
.studio-signature>a { color: #6c695f; }
.studio-signature>a span { margin-left: 16px; }
.studio-section { padding: 90px 0; scroll-margin-top: 20px; }
.studio-section-heading { gap: 45px; margin-bottom: 36px; }
.studio-section-heading h2 { font-size: clamp(27px,2.7vw,37px); font-weight: 600; letter-spacing: -1.2px; margin-top: 12px; }
.studio-section-heading>p { font-size: 13px; color: #827b71; max-width: 420px; line-height: 1.9; }
.studio-service-grid { gap: 0; border-top: 1px solid var(--border); }
.studio-service { padding: 30px 28px; border: 0; border-radius: 0; background: transparent; box-shadow: none; border-right: 1px solid var(--border); transition: background .4s; }
.studio-service:first-child { padding-left: 0; }
.studio-service:last-child { border-right: 0; }
.studio-service:hover { background: #eeebe43d; }
.studio-service-number { justify-content: flex-start; width: auto; height: auto; background: none; border-radius: 0; font-size: 13px; color: #ac9d86; font-family: ui-monospace,monospace; margin-bottom: 35px; }
.studio-service h3 { font-size: 18px; font-weight: 600; }
.studio-service p { font-size: 12px; color: #817b72; }
.studio-service small { color: #9a8774; font-size: 10px; }
#cases { padding-top: 30px; }
.case-filters { gap: 5px; margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.case-filter { background: transparent; border-color: transparent; color: #79766d; padding: 10px 20px; font-size: 12px; transition: background .3s,color .3s; }
.case-filter:hover { background: #ece8df; }
.case-filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
.studio-case-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; }
.studio-case { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.case-image-button { border-radius: 16px; background: #eeebe4; }
.case-image-button .example-art { transition: transform .7s var(--ease); }
.case-image-button:hover .example-art { transform: scale(1.045); }
.case-image-button:hover img { filter: none; }
.example-badge { top: 13px; left: 13px; border-radius: 999px; background: #ffffffcc; backdrop-filter: blur(10px); color: #686355; font-size: 9px; padding: 5px 10px; }
.case-zoom { font-size: 0; display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; background: #fff9; color: #262720; transition: background .3s,transform .3s; }
.case-zoom:after { content: '↗'; font-size: 19px; }
.case-image-button:hover .case-zoom { background: #fff; transform: rotate(45deg); }
.studio-case-copy { padding: 22px 2px 8px; }
.studio-case-copy>.eyebrow { color: #a57755; font-size: 9px; }
.studio-case-copy h3 { font-size: 18px; font-weight: 600; }
.studio-case-copy p { color: #858077; font-size: 12px; }
.studio-case-copy small { color: #a09586; font-size: 10px; }
.case-filter-status { color: #92887a; font-size: 10px; }
.studio-collection { display: grid; grid-template-columns: 1fr .85fr; align-items: center; gap: 80px; padding: 65px; margin: 15px 0 30px; background: #272d26; border-radius: 28px; overflow: hidden; position: relative; isolation: isolate; }
.studio-collection:before { content: ''; position: absolute; z-index: -1; width: 650px; height: 650px; border: 1px solid #ffffff0e; border-radius: 50%; right: -200px; top: -250px; box-shadow: 0 0 0 100px #ffffff03,0 0 0 200px #ffffff02; }
.collection-copy .eyebrow { color: #b6b4a1; letter-spacing: 2px; font-size: 9px; }
.collection-copy h2 { color: #f3f2e9; font-size: clamp(32px,3.5vw,48px); font-weight: 500; line-height: 1.4; margin: 24px 0 20px; letter-spacing: -1.5px; }
.collection-copy h2 span { color: #b8c3a3; }
.collection-copy p { color: #a8b0a0; font-size: 12px; line-height: 2; }
.collection-specs { display: flex; gap: 34px; margin: 30px 0; }
.collection-specs strong { display: block; color: #e6e8dc; font-size: 17px; font-weight: 500; }
.collection-specs span { color: #929e8c; font-size: 10px; }
.collection-copy .button { color: #f2f2e6; background: #ffffff07; border-color: #ffffff38; }
.collection-copy .button:hover { background: #ffffff16; }
.collection-visual { margin: 0; transform: rotate(4deg); }
.collection-visual .example-art { border-radius: 12px; box-shadow: 0 20px 50px #0a110766; }
.collection-visual figcaption { color: #a4ae9b; font-size: 9px; margin-top: 16px; text-align: center; }
.studio-package-grid { gap: 20px; align-items: stretch; }
.studio-package { padding: 36px 30px; position: relative; background: #fffdf8; border-color: #e0dbd0; transition: transform .4s var(--ease),box-shadow .4s; }
.studio-package:hover { transform: translateY(-5px); box-shadow: 0 16px 45px #42382c0b; }
.studio-package h3 { font-size: 19px; margin-top: 13px; font-weight: 600; }
.studio-package-price { color: var(--ink); font-size: 54px; font-weight: 500; letter-spacing: -2px; margin: 26px 0; font-variant-numeric: tabular-nums; }
.studio-package-price small { color: #928a7d; font-size: 11px; }
.studio-package ul { color: #635e52; font-size: 13px; line-height: 2.2; }
.studio-package ul li:before { color: #a3957f; }
.studio-package>p { color: #8b8376; font-size: 12px; }
.studio-package>.button { width: 100%; }
.studio-package-refined { background: #ede7db; border-color: #d9cbb4; }
.package-label { position: absolute; right: 24px; top: -13px; color: #fff; background: #807159; padding: 5px 14px; border-radius: 999px; font-size: 10px; }
.studio-single-prices table { margin-top: 30px; }
.studio-single-prices td { color: #625845; }
.studio-single-prices thead th { color: #9a8b77; }
.studio-process { gap: 32px; }
.studio-process li { border-color: #d6cec0; padding-top: 24px; }
.studio-process li>span { font-size: 34px; color: #c4bbaa; font-weight: 400; font-family: ui-monospace,monospace; }
.studio-process h3 { font-size: 15px; margin: 20px 0 13px; }
.studio-process p { color: #827c71; font-size: 12px; }
#workflow { border-top: 1px solid var(--border); }
.studio-faq-section { border-top: 1px solid var(--border); padding-top: 60px; }
.studio-faq details { border-color: #e0dbd2; padding: 23px 0; }
.studio-faq summary { color: #514d44; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-weight: 500; }
.studio-faq summary::-webkit-details-marker { display: none; }
.studio-faq summary:after { content: '+'; color: #9c8a70; font-size: 22px; transition: transform .3s; }
.studio-faq details[open] summary:after { transform: rotate(45deg); }
.studio-faq p { color: #857d70; }
.studio-final-cta { background: #ece5d9; border-radius: 24px; padding: 50px; margin-top: 0; }
.studio-final-cta h2 { font-size: 32px; font-weight: 550; letter-spacing: -1px; }
.studio-final-cta p { color: #92816b; }
.studio-case-dialog { background: #faf8f4; border-radius: 24px; padding: 26px; }
.studio-case-dialog>p { color: #84796a; }
.studio-case-dialog::backdrop,.preview-dialog::backdrop,.action-confirm::backdrop { background: #161c19a6; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
dialog[open] { animation: dialog-enter .35s var(--ease); }

/* Customer and studio workspaces share the same materials and typography. */
.studio-workspace .page-heading { padding: 8px 0 30px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.page-heading h1 { font-size: 39px; font-weight: 600; letter-spacing: -1.5px; margin-top: 14px; }
.page-heading p { font-size: 13px; }
.form-section,.detail-card { padding: 32px; }
.section-head { margin-bottom: 28px; }
.section-head h2 { font-size: 21px; font-weight: 600; }
.step { background: #f2ece2; color: #9f7754; border-radius: 50%; width: 40px; height: 40px; font-family: ui-monospace,monospace; font-weight: 500; }
label { color: #61594f; font-weight: 550; }
input:not([type="checkbox"]):not([type="radio"]),textarea,select { border-color: #e0dcd4; background: #fdfcf9; border-radius: 11px; padding: 12px 14px; color: #3c3933; }
input:not([type="checkbox"]):not([type="radio"]):focus,textarea:focus,select:focus { border-color: #bb987d; box-shadow: 0 0 0 4px #c2997020; background: #fff; }
input::placeholder,textarea::placeholder { color: #aaa196; }
.label-help,.upload-hint { color: #938b80; }
.tier-option { border-radius: 15px; padding: 20px 16px; transition: background .25s,border-color .25s,box-shadow .25s; }
.tier-option:has(input:checked) { border-color: #bc9273; background: #faf5eb; box-shadow: 0 0 0 1px #bc9273; }
.tier-option small { color: #8d8377; }
.price-table { border-radius: 14px; }
.price-head { background: #f5f2ec; color: #968876; }
.price-line { border-color: #eeeae3; }
.price-line>span { color: #6c5944; font-weight: 600; }
.price-line small { color: #9c9285; }
.bundle-line { background: #fcfaf5; }
.bundle-info { background: #f6f2e9; color: #716047; border-color: #eae2d4; border-radius: 14px; }
.upload-zone { background: #fbfaf6; border-color: #d4c9b9; border-radius: 17px; padding: 28px 20px; transition: background .3s,border-color .3s; }
.upload-zone:hover,.upload-zone:focus-within { background: #f6f1e8; border-color: #b69671; }
.upload-zone:before { content: '↑'; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid #ddd4c5; border-radius: 50%; color: #ad8b66; font-size: 21px; margin: 0 auto 12px; font-weight: 400; }
.upload-zone input::file-selector-button { background: #eee7da; color: #8a6749; }
.selected-image,.selected-plan,.file-tile,.preview-grid a { border-radius: 13px; }
.file-type { background: #efe9df; color: #9b795b; }
.summary { top: 112px; padding: 29px; background: #fffdf8; border-color: #ddd2be; box-shadow: 0 12px 35px #54402907; }
.summary-total { color: var(--ink); font-size: 52px; font-weight: 500; letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.summary .eyebrow { color: #a1825e; }
.quote-line strong { color: #766042; }
.summary-flow { color: #8a7e6c; }
.summary-flow span { background: #f0e9da; color: #a68d67; }
.draft-footer,.draft-footer button,.quote-count { color: #928576; }
.draft-banner,.studio-discovery-banner { background: #f0ece3; border-color: #e3dbcf; color: #7b674b; }
.studio-discovery-banner { padding: 22px 26px; border-radius: 17px; }
.studio-discovery-banner strong { color: #75614a; }
.studio-discovery-banner span { color: #a1917c; }
.studio-discovery-banner a { color: #876546; }
.mini-stats>div,.admin-stats>a,.admin-stats>.stat-card { border-radius: 19px; border-color: var(--border); padding: 24px; }
.mini-stats strong,.admin-stats strong { color: #554c3e; font-weight: 500; }
.mini-stats span,.admin-stats>a>span,.admin-stats>.stat-card>span { color: #8c8376; }
.admin-stats small { color: #a1988b; }
.admin-stats>a { transition: transform .3s var(--ease),border-color .3s; }
.admin-stats>a:hover { transform: translateY(-3px); border-color: #c0ad93; }
.list-panel { padding: 28px; }
.search-field input { background: #faf8f4!important; }
.chip { border-radius: 999px; border-color: #e9e3d9; color: #958674; }
.chip span { color: #aa9c8c; }
.chip:hover { background: #f6f0e8; }
.chip[aria-current] { background: #eee5d6; color: #876347; border-color: #decbae; }
.order-row { border-color: #eee9e1; border-radius: 8px; }
.order-row:hover { background: #faf7f1; }
.order-mark { background: #f2ece1; color: #aa8c66; }
.order-row h2,.order-row h3 { color: #494135; }
.order-id { color: #a89d8d; }
.row-right strong { color: #76634b; }
.order-row .row-arrow { color: #bbac98; transition: transform .3s; }
.order-row:hover .row-arrow { transform: translate(3px,-3px); }
.invite-history>div { border-color: #ede7de; }
.invite-history small { color: #a39481; }
.auth-layout { min-height: 600px; margin: 0 auto; max-width: 1100px; gap: 80px; }
.auth-story { position: relative; padding: 35px 15px; }
.auth-story:before { content: ''; position: absolute; z-index: -1; inset: -30px; background: radial-gradient(ellipse at 20% 40%,#eaddcaaa,transparent 70%); }
.auth-story h1 { color: var(--ink); font-size: 49px; font-weight: 550; line-height: 1.4; letter-spacing: -2px; }
.auth-story p { color: #968774; }
.auth-steps { color: #7d715f; font-size: 13px; gap: 20px; }
.auth-steps span { color: #c1a98b; }
.auth-brand { color: #756650; }
.auth-brand small { color: #a39683; }
.auth-card { padding: 40px; border-color: #e1d9cb; background: #fffefa; box-shadow: 0 18px 60px #52462f08; }
.auth-card>h2 { font-weight: 550; font-size: 27px; }
.auth-hint { color: #a39682; }
.progress-card { border-color: #ded6c9; }
.order-progress .stage-current { color: #9a6843; }
.stage-current .stage-number { background: #9a6843; border-color: #9a6843; }
.stage-done .stage-number { background: #eee9df; border-color: #e2d6c5; color: #a58c6c; }
.order-progress .stage-done { color: #9a8b74; }
.detail-list>div { border-color: #eee9e1; }
.detail-list dt { color: #9f907c; }
.detail-list dd { color: #6b5e4d; }
.next-step { color: #8e7d64; }
.accept-form,.approval-summary { background: #f7f3e9; border-color: #e5dbc9; color: #826b49; }
.approval-summary small { color: #a29683; }
.delivery-card { background: #f8fbf6; border-color: #d9e2cf; }
.empty-symbol { background: #f1eadd; color: #b5a185; }
.quiet-link { color: #937957; }

/* Progressive motion: no scroll interception, and all content works without JS. */
/* Keep full-document navigation native, including authentication redirects.
   Local card/hero animations do not depend on a browser snapshot overlay. */
@view-transition { navigation: none; }
.reveal-pending { opacity: 1; }
.reveal-ready { transition: opacity .75s var(--ease),transform .75s var(--ease); }
.reveal-ready.is-visible { opacity: 1; transform: none; }
.studio-hero-copy { animation: hero-enter .9s var(--ease) both; }
.hero-showcase { animation: art-enter 1.15s var(--ease) both; }
.studio-faq details[open]>p { animation: page-in .35s var(--ease); }
@keyframes hero-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes art-enter { from { opacity: 0; transform: translateY(28px) rotate(3deg); } to { opacity: 1; transform: none; } }
@keyframes page-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(15px) scale(.97); } to { opacity: 1; transform: none; } }
html[data-motion="off"] { scroll-behavior: auto; }
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after { animation: none!important; transition: none!important; }
html[data-motion="off"] .reveal-pending { opacity: 1; transform: none; }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none!important; transition: none!important; }
  .reveal-pending { opacity: 1; transform: none; }
}
@media(min-width:1500px) { .studio-hero { min-height: 790px; } }
@media(max-width:1100px) {
  .shell { width: calc(100% - 64px); }
  .studio-hero { min-height: 640px; gap: 5px; }
  .studio-hero h1 { font-size: 58px; letter-spacing: -3px; }
  .hero-art-deck { padding-bottom: 35px; }
  .hero-floating-note { bottom: 5px; padding: 12px 15px; }
  .hero-showcase-bottom { flex-direction: column; gap: 8px; }
  .hero-proof { flex-direction: column; }
  .studio-service { padding: 25px 20px; }
  .studio-case-grid { gap: 22px; }
  .studio-case-copy h3 { font-size: 16px; }
  .studio-package { padding: 30px 23px; }
  .studio-collection { padding: 45px; gap: 40px; }
  .studio-signature>div { gap: 14px; font-size: 8px; letter-spacing: 1px; }
  .auth-layout { gap: 35px; }
  .auth-story h1 { font-size: 41px; }
  .main-nav { gap: 20px; }
}
@media(max-width:800px) {
  .shell { width: calc(100% - 40px); }
  .header-inner { min-height: 76px; }
  .main-nav { gap: 16px; font-size: 12px; }
  .main-nav .nav-cta { padding: 9px 14px; }
  .studio-hero { grid-template-columns: 1fr; padding: 50px 0 35px; min-height: auto; text-align: center; gap: 30px; }
  .studio-hero h1 { font-size: 64px; letter-spacing: -3px; margin: 23px 0; }
  .studio-hero-copy>p { font-size: 14px; }
  .studio-actions { justify-content: center; }
  .hero-proof { flex-direction: row; justify-content: center; }
  .hero-showcase { max-width: 540px; width: 100%; margin: auto; padding: 15px 14px 0; }
  .hero-art-deck { padding-bottom: 45px; }
  .hero-floating-note { bottom: 30px; text-align: left; }
  .hero-showcase-bottom { flex-direction: row; gap: 15px; }
  .hero-orbit { width: 100%; height: 650px; right: 0; top: 300px; }
  .studio-signature>div { display: none; }
  .studio-section { padding: 60px 0; }
  .studio-section-heading { gap: 18px; margin-bottom: 30px; }
  .studio-section-heading>p { max-width: 520px; }
  .studio-service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .studio-service { padding: 25px 20px; border-bottom: 1px solid var(--border); }
  .studio-service:nth-child(odd) { padding-left: 0; }
  .studio-service:nth-child(even) { border-right: 0; }
  .studio-service-number { margin-bottom: 20px; }
  .studio-case-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 20px; }
  .studio-case-copy h3 { font-size: 17px; }
  .studio-collection { grid-template-columns: 1fr; padding: 40px; gap: 35px; border-radius: 22px; }
  .collection-copy h2 { font-size: 42px; }
  .collection-visual { max-width: 390px; width: 100%; margin: 0 auto; transform: rotate(2deg); }
  .studio-package-grid { grid-template-columns: 1fr; gap: 26px; }
  .studio-package { padding: 30px; }
  .studio-package-price { margin: 20px 0; }
  .studio-process { grid-template-columns: 1fr 1fr; gap: 30px; }
  .studio-final-cta { padding: 35px; gap: 25px; }
  .studio-final-cta h2 { font-size: 27px; }
  .page { padding-top: 30px; padding-bottom: 55px; }
  .page-heading h1 { font-size: 33px; }
  .summary { position: static; }
  .form-section,.detail-card { padding: 26px; }
  .auth-layout { grid-template-columns: 1fr; gap: 20px; max-width: 480px; min-height: auto; }
  .auth-story { padding: 20px 0; }
  .auth-story h1 { font-size: 35px; }
  .footer-inner { flex-wrap: wrap; gap: 22px; }
}
@media(max-width:540px) {
  html { scroll-padding-top: 85px; }
  .shell { width: calc(100% - 36px); }
  .header-inner { min-height: 72px; padding: 13px 0; }
  .brand { font-size: 18px; }
  .brand img { width: 34px; height: 34px; }
  .brand-sub { font-size: 9px; letter-spacing: 2px; }
  .menu-toggle:not([hidden]) { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 42px; height: 40px; border: 1px solid #ddd7cd; border-radius: 50%; background: transparent; }
  .menu-toggle span { display: block; width: 15px; height: 1px; background: #555249; 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); }
  .main-nav { width: 100%; gap: 10px; justify-content: space-between; font-size: 12px; padding: 10px 0 4px; }
  .nav-enhanced .main-nav { display: none; }
  .nav-enhanced.nav-open .main-nav { display: flex; flex-wrap: wrap; animation: page-in .25s var(--ease); }
  .main-nav .text-button { font-size: 12px; }
  .main-nav .nav-cta { padding: 9px 14px; font-size: 11px; }
  .studio-hero { padding-top: 42px; gap: 28px; }
  .hero-kicker { font-size: 10px; letter-spacing: 1.3px; }
  .studio-hero h1 { font-size: clamp(43px,12vw,61px); line-height: 1.2; letter-spacing: -2.5px; margin: 22px 0; }
  .studio-hero-copy>p { font-size: 12px; }
  .studio-actions { gap: 20px; margin: 24px 0; }
  .studio-actions .primary { min-height: 48px; padding: 12px 20px; font-size: 12px; }
  .studio-actions .primary span { margin-left: 7px; }
  .hero-secondary { font-size: 12px; gap: 8px; }
  .hero-proof { font-size: 10px; gap: 6px 15px; }
  .studio-hero-copy>.studio-invite-note { font-size: 9px; }
  .hero-showcase { padding: 8px 7px 0; }
  .hero-art-deck { height: auto; padding-bottom: 40px; }
  .hero-art-main { width: 78%; padding: 9px; }
  .hero-art-main figcaption { font-size: 10px; padding-top: 10px; }
  .hero-art-label { font-size: 6px; padding-bottom: 8px; }
  .hero-side-art { top: 40px; }
  .hero-floating-note { bottom: 15px; right: 0; padding: 10px 13px; gap: 8px; }
  .hero-floating-note>span { font-size: 22px; }
  .hero-floating-note>div { font-size: 10px; }
  .hero-floating-note small { font-size: 8px; }
  .hero-showcase-bottom { flex-direction: column; gap: 9px; padding-top: 8px; }
  .hero-tabs button { padding: 8px 22px; }
  .studio-signature { padding: 18px 0; font-size: 10px; gap: 10px; }
  .studio-signature>a span { margin-left: 5px; }
  .studio-section { padding: 48px 0; }
  .studio-section-heading h2 { font-size: 26px; line-height: 1.4; }
  .studio-section-heading>p { font-size: 12px; }
  .eyebrow { font-size: 9px; letter-spacing: 1.4px; }
  .studio-service { padding: 23px 14px; }
  .studio-service h3 { font-size: 16px; }
  .studio-service p { font-size: 11px; }
  .studio-service small { font-size: 9px; }
  .case-filters { gap: 4px; padding-bottom: 17px; margin-bottom: 24px; }
  .case-filter { font-size: 11px; padding: 8px 13px; }
  .studio-case-grid { grid-template-columns: 1fr; gap: 28px; }
  .studio-case-copy { padding: 18px 2px 0; }
  .studio-case-copy h3 { font-size: 18px; }
  .studio-case-copy p { margin-bottom: 12px; }
  .studio-collection { padding: 30px 24px; margin: 0 0 10px; gap: 30px; }
  .collection-copy .eyebrow { font-size: 8px; letter-spacing: 1px; }
  .collection-copy h2 { font-size: 37px; }
  .collection-copy p { font-size: 11px; }
  .collection-specs { gap: 30px; margin: 23px 0; }
  .collection-visual figcaption { font-size: 8px; }
  .studio-package { padding: 29px 25px; }
  .studio-package ul { display: block; }
  .studio-package-price { font-size: 48px; }
  .studio-process { gap: 24px 20px; }
  .studio-process li>span { font-size: 29px; }
  .studio-process h3 { font-size: 14px; line-height: 1.6; }
  .studio-process p { font-size: 11px; }
  .studio-faq-section { padding-top: 40px; }
  .studio-faq summary { font-size: 13px; }
  .studio-final-cta { padding: 28px 24px; border-radius: 20px; }
  .studio-final-cta h2 { font-size: 24px; }
  .studio-final-cta p { font-size: 11px; }
  .studio-case-dialog { padding: 18px; border-radius: 20px; }
  .studio-workspace .page-heading { padding-bottom: 24px; }
  .page-heading h1 { font-size: 28px; }
  .form-section,.detail-card { padding: 23px 18px; }
  .section-head { gap: 12px; margin-bottom: 24px; }
  .section-head h2 { font-size: 19px; }
  .step { width: 34px; height: 34px; font-size: 11px; }
  .tier-option { padding: 15px 11px; }
  .tier-option small { font-size: 10px; }
  .tier-option strong { font-size: 13px; }
  .studio-discovery-banner { padding: 19px; }
  .upload-zone { padding: 22px 12px; }
  input:not([type="checkbox"]):not([type="radio"]),textarea,select { font-size: 16px; }
  .price-line input { font-size: 16px; }
  .mini-stats>div,.admin-stats>a,.admin-stats>.stat-card { padding: 19px 16px; border-radius: 16px; }
  .mini-stats strong { font-size: 25px; }
  .list-panel { padding: 18px; }
  .auth-story h1 { font-size: 30px; }
  .auth-card { padding: 28px 24px; }
  .summary-total { font-size: 46px; }
  .footer-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 22px; }
  .footer-brand { width: 100%; font-size: 15px; }
  .footer-inner>span { flex: 1; font-size: 9px; }
  .motion-toggle { font-size: 10px; padding: 8px 10px; }
  .back-top { width: 32px; height: 32px; }
}

/* GIF portfolios remain in the image department. */
.motion-showcase {scroll-margin-top:100px}
.motion-showcase-grid {display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;align-items:start}
.motion-showcase-copy {padding:24px 12px 0 0;position:sticky;top:110px}
.motion-showcase-copy h3 {font-size:clamp(28px,3.1vw,44px);line-height:1.3;letter-spacing:-1px;margin:24px 0}
.motion-showcase-copy p {font-size:13px;line-height:1.9;color:var(--muted);margin:20px 0}
.motion-price strong {font-size:52px;letter-spacing:-2px;color:var(--accent)}
.motion-price span {font-size:13px;color:var(--muted);margin-left:8px}
.motion-demo {overflow:hidden;padding:0}
.motion-demo>a {display:block;background:#fff}
.motion-demo img {display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:contain}
.motion-demo-copy {padding:22px}
.motion-demo-copy h3 {font-size:19px;margin:12px 0 8px}
.motion-demo-copy p {font-size:12px;line-height:1.7;color:var(--muted)}
.motion-demo-copy .button {width:100%;margin:12px 0}
.motion-demo-copy .quiet-link {display:block;font-size:12px;text-align:center}
.studio-package-motion {background:linear-gradient(150deg,#fff3e8,#fffdf9);border-color:#e9bb9f}
.studio-package-motion>.quiet-link {margin-top:18px}
.studio-package-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.tier-choice {grid-template-columns:repeat(3,minmax(0,1fr))}
.price-line[hidden],#motion-order-note[hidden] {display:none!important}
.price-line b {font-weight:inherit}
@media(max-width:800px){.motion-showcase-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.motion-showcase-copy {grid-column:1/-1;position:static;padding:0}.motion-demo-copy {padding:15px}.motion-demo-copy h3 {font-size:16px}.motion-demo-copy .button{font-size:12px;padding:10px}.studio-package-grid{grid-template-columns:1fr}.tier-choice{grid-template-columns:1fr}.tier-option small{font-size:11px}}
@media(max-width:480px){.motion-showcase-grid{grid-template-columns:1fr}.motion-demo{max-width:420px;width:100%;margin:auto}}

/* Image studio: service samples, a clearer price hierarchy, and quiet motion. */
.studio-home .studio-section { padding-top: 68px; padding-bottom: 68px; }
.studio-home #cases { padding-top: 28px; }
.studio-home .studio-section-heading>p { color: #706a61; }
.service-section .studio-section-heading { align-items: center; margin-bottom: 30px; }
.service-section h2 span { display: block; color: #8a7964; }
.service-experience { display: grid; grid-template-columns: 1.05fr 1fr; gap: 38px; align-items: stretch; }
.service-stage { margin: 0; padding: 23px 26px; min-width: 0; border: 1px solid #e0dbd0; border-radius: 24px; background: radial-gradient(ellipse at 50% 48%,#fdfbf6,#eae5d9); display: flex; flex-direction: column; overflow: hidden; }
.service-stage-top { display: flex; justify-content: space-between; gap: 12px; color: #77705f; font-size: 9px; letter-spacing: 1.4px; }
.service-stage-top>span:last-child { letter-spacing: .8px; }
.service-art-wrap { position: relative; display: grid; place-items: center; flex: 1; padding: 26px 32px; isolation: isolate; }
.service-art-frame { width: min(100%,390px); padding: 9px; border-radius: 12px; background: #fffdf8; box-shadow: 0 22px 40px #4b3e2725; transform: rotate(-3deg); transition: transform .8s var(--ease),box-shadow .8s var(--ease); }
.service-art-frame .example-art { border-radius: 5px; }
.service-orbit { position: absolute; z-index: -1; width: 88%; aspect-ratio: 1; border: 1px solid #b2a58e42; border-radius: 50%; }
.service-orbit:after { content: ''; position: absolute; inset: 20px; border: 1px solid #b2a58e26; border-radius: inherit; }
.service-seal { position: absolute; bottom: 12px; right: 7px; display: grid; place-items: center; width: 65px; height: 65px; background: #d66447; color: #fff8ec; font-size: 39px; border-radius: 50%; box-shadow: 0 7px 20px #8e4a2520; }
.service-stage figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; }
.service-stage figcaption>div>span { font-size: 14px; color: #514c41; }
.service-stage figcaption small { display: block; color: #7c7466; font-size: 10px; margin-top: 5px; }
.service-palette { display: flex; padding-left: 8px; }
.service-palette i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #f3efe6; margin-left: -5px; background: #65715b; }
.service-palette i:nth-child(2) { background: #cfbaa0; }.service-palette i:nth-child(3) { background: #db6044; }
.service-selector { min-width: 0; display: flex; flex-direction: column; }
.service-selector-label { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: #81786a; padding: 6px 0 16px; }
.service-selector-label>span:last-child { color: #9a624a; }
.service-options { display: grid; flex: 1; }
.service-option { width: 100%; display: flex; align-items: flex-start; text-align: left; gap: 18px; padding: 15px 18px; border: 0; border-top: 1px solid #dfd9ce; border-radius: 0; background: transparent; color: var(--ink); transition: background .35s,border-radius .35s; }
.service-number { font: 11px ui-monospace,monospace; color: #92816b; padding-top: 5px; }
.service-option-copy { flex: 1; min-width: 0; }
.service-option-copy strong { display: block; font-size: 19px; line-height: 1.4; font-weight: 600; margin-bottom: 7px; }
.service-option-copy>span { display: block; font-size: 12px; line-height: 1.8; color: #716b61; }
.service-option-copy small { display: block; margin-top: 8px; font-size: 10px; letter-spacing: .4px; color: #8c7b65; }
.service-arrow { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: #938876; background: #eae5db; transition: transform .4s var(--ease),background .3s; }
.service-option[aria-pressed="true"] { background: #eae4d8; border-color: transparent; border-radius: 13px; }
.service-option[aria-pressed="true"] .service-arrow { background: #2d3229; color: #fff; transform: rotate(45deg); }
.service-motion-link { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 19px 0 0; font-size: 11px; color: #74644f; }
.service-motion-link>span:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.service-motion-link i { font-size: 20px; color: var(--accent); font-style: normal; }.service-motion-link strong { font-weight: 550; color: #aa4a32; }
.service-footnote { display: flex; justify-content: space-between; gap: 16px; padding-top: 22px; color: #7c7468; font-size: 11px; }
.service-footnote i { color: #c16b4d; font-style: normal; margin: 0 9px; }.service-footnote a { color: #756854; }.service-footnote a span { margin-left: 10px; }
.studio-home .studio-package-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.studio-home .studio-single-prices { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1.2fr; column-gap: 45px; padding: 28px 32px; }
.studio-single-prices>.eyebrow { grid-column: 1; grid-row: 1; }.studio-single-prices>h3 { grid-column: 1; grid-row: 2; margin: 8px 0; }
.studio-single-prices>table { grid-column: 2; grid-row: 1/5; margin: 0; width: 100%; align-self: center; }.studio-single-prices>p { grid-column: 1; grid-row: 3; margin: 6px 0 14px; }.studio-single-prices>.quiet-link { grid-column: 1; grid-row: 4; }
.studio-home .studio-package-motion { background: #30392f; border-color: #30392f; }
.studio-package-motion h3,.studio-package-motion .studio-package-price { color: #faf6ed; }.studio-package-motion .eyebrow { color: #d0bf9e; }
.studio-package-motion ul,.studio-package-motion>p,.studio-package-motion .studio-package-price small { color: #c3cbbb; }.studio-package-motion ul li:before { color: #c9b98f; }
.studio-package-motion>.button.primary { background: #e9d9b9; color: #30392f; }.studio-package-motion>.quiet-link { color: #ded4bf; position: absolute; bottom: 12px; align-self: center; margin-top: 0; font-size: 10px; }
.studio-home .studio-case-copy p { color: #746f66; }.studio-home .studio-case-copy small { color: #867763; }
@media(hover:hover) and (pointer:fine) {
 .service-stage:hover .service-art-frame { transform: rotate(0) translateY(-5px); box-shadow: 0 28px 45px #4b3e2730; }
 .service-option:hover { background: #eee9df; border-radius: 13px; }
 .collection-visual { transition: transform .8s var(--ease); }.studio-collection:hover .collection-visual { transform: rotate(0) scale(1.025); }
 .motion-demo { transition: transform .5s var(--ease),box-shadow .5s; }.motion-demo:hover { transform: translateY(-5px); box-shadow: 0 20px 35px #30291912; }
}
@media(min-width:801px) { .studio-home .studio-hero { min-height: 650px; }.studio-home .studio-section-heading h2 { text-wrap: balance; } }
@media(max-width:1000px) { .service-experience { gap: 24px; }.service-stage { padding: 20px; }.service-art-wrap { padding: 25px 12px; }.service-option { padding: 18px 12px; gap: 12px; }.service-option-copy strong { font-size: 17px; }.service-option-copy>span { font-size: 11px; }.service-seal { width: 50px; height: 50px; font-size: 30px; right: -6px; }.studio-home .studio-package { padding: 28px 22px; }.studio-home .studio-package h3 { font-size: 17px; } }
@media(max-width:800px) {
 .studio-home .studio-section { padding-top: 50px; padding-bottom: 50px; }.service-section .studio-section-heading { align-items: flex-start; }
 .service-experience { grid-template-columns: 1fr; gap: 25px; }.service-stage { max-width: 580px; width: 100%; margin: auto; }.service-art-wrap { padding: 24px 42px; }.service-art-frame { max-width: 340px; }.service-seal { right: 24px; bottom: 14px; }.service-orbit { width: 75%; max-width: 380px; }
 .service-selector { display: contents; }.service-selector-label { grid-row: 1; padding-bottom: 0; }.service-options { grid-row: 2; grid-template-columns: 1fr 1fr; gap: 8px; }.service-stage { grid-row: 3; }.service-motion-link { grid-row: 4; padding-top: 0; }.service-option { border: 1px solid #e2dbcf; border-radius: 13px; }.service-option-copy strong { font-size: 16px; }.service-arrow { display: none; }
 .studio-home .studio-package-grid { grid-template-columns: 1fr; }.studio-home .studio-single-prices { display: flex; padding: 28px; }.studio-single-prices>table { margin: 16px 0; }.studio-single-prices>.quiet-link { margin-top: 6px; }
}
@media(max-width:540px) {
 .studio-home .studio-section { padding-top: 42px; padding-bottom: 42px; }.service-section .studio-section-heading { margin-bottom: 24px; }.service-section h2 { font-size: 29px; }
 .service-stage { padding: 18px; border-radius: 18px; }.service-stage-top { font-size: 7px; letter-spacing: .8px; }.service-stage-top>span:last-child { letter-spacing: 0; }.service-art-wrap { padding: 23px 20px; }.service-seal { right: 0; bottom: 8px; width: 46px; height: 46px; font-size: 28px; }
 .service-stage figcaption>div>span { font-size: 12px; }.service-stage figcaption small { font-size: 9px; }.service-selector-label { font-size: 10px; }.service-option { padding: 14px 10px; gap: 8px; }.service-number { font-size: 9px; }.service-option-copy strong { font-size: 14px; }.service-option-copy small { font-size: 9px; line-height: 1.7; }.service-option-copy>span { font-size: 11px; }
 .service-footnote { font-size: 9px; }.service-footnote i { margin: 0 3px; }.service-motion-link { font-size: 10px; }.service-motion-link>span:first-child { gap: 6px; }
}

.mobile-departments{display:none}.navigation-status{position:fixed;top:125px;left:50%;transform:translateX(-50%);max-width:90vw;padding:10px 18px;border-radius:12px;background:#202820;color:white;font-size:13px;box-shadow:0 8px 24px #0002;z-index:110}.navigation-status[hidden]{display:none}
@media(max-width:540px){.mobile-departments{display:flex;gap:8px;padding:0 0 10px}.mobile-departments a{flex:1;min-height:42px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:13px;font-weight:600;background:#efebe4;color:#625f59}.mobile-departments a[aria-current]{background:#252b24;color:white}.main-nav>.studio-department{display:none}.header-inner{min-height:64px;padding:10px 0}.studio-home .studio-hero{padding-top:26px}html{scroll-padding-top:130px}.film-series{scroll-margin-top:130px}}

.motion-media{background:#fff;aspect-ratio:2/3}.motion-media video,.motion-media img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:contain}.motion-media [hidden]{display:none}