/* A continuous studio composition, from first idea to a live product. */
.hero{min-height:790px;isolation:isolate}
.hero::after{z-index:1;pointer-events:none}
.hero-grid{padding-top:20px;padding-bottom:36px}
.service-ribbon{border:0;background:linear-gradient(180deg,#05070b00,#05070bcc)}
.service-item{border:0!important;background:linear-gradient(135deg,#ffffff04,transparent);margin:0 5px;border-radius:8px}
.service-item:hover{background:linear-gradient(135deg,#ffffff08,#dca23b12)}
#works{background:#05070b;padding-top:76px;padding-bottom:80px}
#works h2{margin-bottom:16px}
.concept-note{font-size:12px;line-height:1.6;color:#8e939c;margin:0 0 32px;max-width:620px}
.concept-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 26px}
.concept-work{display:block;min-width:0;text-align:left;background:none;padding:0;border:0;color:#f5f6f8;font:inherit;cursor:pointer}
.concept-visual{height:330px;border:1px solid #b89a5d30;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:12px;background:radial-gradient(ellipse at 50% 110%,#86632944,transparent 70%),#0d0f13}
.concept-work .concept-visual{transition:transform .4s,border-color .4s}
.concept-work:hover .concept-visual{transform:translateY(-4px);border-color:#c39a4e88}
.concept-badge{position:absolute;top:16px;left:18px;color:#b8a57d;font-size:8px;letter-spacing:2px}
.concept-caption{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 2px 0}
.concept-caption small{color:#ceaa65;text-transform:uppercase;font-size:9px;letter-spacing:2px}
.concept-caption h3{font-size:20px;margin:8px 0 0}
.concept-caption h3 span{font-size:12px;font-weight:400;color:#a8a9ad}
.concept-caption>b{color:#ddb96f;border:1px solid #ba964452;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;flex:none}
.browser-model{width:85%;background:#17191d;border:1px solid #6c6556;border-radius:7px;box-shadow:0 22px 35px #0006;transform:perspective(900px) rotateY(-7deg) rotateX(3deg)}
.browser-top{height:22px;display:flex;align-items:center;gap:4px;padding:0 10px;background:#23252b;border-radius:6px 6px 0 0}
.browser-top i{width:4px;height:4px;background:#71695a;border-radius:50%}
.browser-top span{margin:auto;color:#969490;font-size:6px;letter-spacing:.5px}
.web-content{padding:20px}
.mock-nav{display:flex;justify-content:space-between;align-items:center}
.mock-nav b{font-size:13px;letter-spacing:-.5px}.mock-nav small{font-size:6px;color:#aeaca7}
.web-body{display:grid;grid-template-columns:1fr .7fr;align-items:center;gap:8px;padding:28px 0 22px}
.web-body small{font-size:5px;letter-spacing:1px;color:#bbab8c}
.web-body h4{font-size:clamp(26px,3.3vw,46px);line-height:.94;letter-spacing:-2px;margin:12px 0;color:#f0eee7}
.web-body h4 span{color:#d7b166}
.web-body em{font-size:6px;font-style:normal;background:#d8b36e;color:#171717;padding:7px 9px;display:inline-block;border-radius:2px}
.form-art{height:130px;position:relative;display:grid;place-items:center;transform:rotate(-15deg)}
.form-art span{position:absolute;width:90%;height:52%;border-radius:50%;border:15px solid #d8b46e;box-shadow:inset 3px 4px 8px #fff4,5px 6px 12px #0009}
.form-art span:nth-child(2){transform:translateY(-27px);border-color:#c7a058}.form-art span:nth-child(3){transform:translateY(27px);border-color:#a9833f}
.web-foot{display:flex;justify-content:space-between;border-top:1px solid #494236;padding-top:12px;font-size:5px;color:#b7b3a9}
.app-backdrop{position:absolute;font-size:110px;letter-spacing:-9px;opacity:.07;color:#f3d690;font-weight:700;transform:rotate(-10deg)}
.phone-model{width:161px;background:#15171b;padding:21px 14px 10px;border:4px solid #656158;border-radius:27px;position:relative;box-shadow:15px 19px 28px #0008;transform:rotate(6deg)}
.phone-notch{position:absolute;top:6px;left:50%;transform:translateX(-50%);background:#060708;width:55px;height:9px;border-radius:8px}
.phone-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.phone-head>b{font-size:17px;letter-spacing:-1px}.phone-head>b span{color:#d7ac60;font-size:7px;margin-left:3px}
.mock-avatar{font-size:7px;display:grid;place-items:center;background:#d3ad69;color:#151515;width:22px;height:22px;border-radius:50%}
.phone-model>small{font-size:5px;letter-spacing:.6px;color:#a9a9ac}.phone-model h4{font-size:20px;line-height:1.08;margin:9px 0 15px;letter-spacing:-.7px}
.app-summary{display:flex;gap:10px;padding:11px 9px;background:#d8b26d;color:#1a1711;border-radius:8px;align-items:center}.app-summary strong{font-size:25px}.app-summary div{font-size:7px;line-height:1.5}.app-summary small{font-size:5px}.app-summary>span{margin-left:auto}
.mock-task{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:7px}.mock-task i{font-style:normal;width:18px;height:18px;background:#2d2922;border-radius:6px;color:#d8b26d;display:grid;place-items:center}.mock-task small{display:block;margin-top:4px;font-size:5px;color:#929397}
.mock-bars{height:22px;margin:16px 0 10px;display:flex;gap:5px;align-items:flex-end}.mock-bars span{background:#b9924c;height:70%;flex:1;border-radius:3px}.mock-bars span:nth-child(2){height:45%}.mock-bars span:nth-child(3){height:100%}.mock-bars span:nth-child(4){height:60%}
.mock-tabbar{display:flex;justify-content:space-around;border-top:1px solid #ffffff15;padding-top:9px;font-size:12px;color:#808185}.mock-tabbar span{color:#d8b26d}
.brand-board{width:100%;text-align:center;position:relative;padding:20px}.brand-symbol{width:82px;height:82px;margin:0 auto 8px;color:#d6b274}.brand-symbol svg{width:100%;height:100%;filter:drop-shadow(0 0 20px #caa55833)}
.brand-board h4{font-size:54px;font-weight:400;letter-spacing:13px;margin:0 0 8px;padding-left:13px}.brand-board>small{font-size:7px;letter-spacing:3px;color:#b9a98b}.brand-palette{display:flex;gap:7px;justify-content:center;margin-top:22px}.brand-palette i{width:20px;height:20px;background:#d6b274;border-radius:50%}.brand-palette i:nth-child(2){background:#ece9df}.brand-palette i:nth-child(3){background:#353332;border:1px solid #807052}
.brand-card{position:absolute;right:24px;bottom:-18px;transform:rotate(-13deg);width:98px;height:62px;border:1px solid #a28a57;background:#c8a865;color:#111;font-family:Georgia,serif;font-size:33px;text-align:left;padding:5px 10px;box-shadow:0 12px 24px #0007}.brand-card span{display:block;font:4px Arial;letter-spacing:.7px}
.print-poster{height:260px;width:184px;background:#d8bf88;color:#1c211f;transform:rotate(-7deg);box-shadow:0 15px 25px #0006;padding:19px;position:relative;margin-right:40px}.print-poster>small{font-size:5px;letter-spacing:1px}.print-poster h4{font-size:38px;line-height:.92;letter-spacing:-2px;margin:29px 0 18px}.print-poster h4 span{display:block;font-size:52px;margin-top:5px}.print-poster>div{font-size:5px;line-height:1.6;letter-spacing:.8px}
.print-card{position:absolute;width:169px;height:96px;background:#242824;border:1px solid #7d735b;padding:20px;bottom:35px;right:35px;transform:rotate(9deg);box-shadow:0 12px 24px #0007;color:#d9c38f}.print-card b{font-size:26px;letter-spacing:3px}.print-card b span{font-size:8px}.print-card small{display:block;margin-top:8px;font-size:4px;letter-spacing:1.4px}
.concept-dialog{width:min(760px,calc(100% - 28px));max-height:90dvh;overflow:auto;background:#0d0f13;color:#f2f2ee;border:1px solid #b3975c;padding:38px;border-radius:15px}.concept-dialog::backdrop{background:#030406dd;backdrop-filter:blur(8px)}.concept-close{position:absolute;right:12px;top:8px;background:none;border:0;color:#dfc285;font-size:32px;cursor:pointer}.concept-dialog h2{font-size:27px}.concept-dialog p{color:#b2b3b6;line-height:1.7}.concept-dialog .gold{margin-top:25px}.concept-dialog-content>small{display:block;line-height:1.6;color:#8d8e92}
.studio-process{background:radial-gradient(ellipse at 50% 20%,#4b3a1a22,transparent 70%),#0b0d10;color:#f5f4ee;padding-top:78px;padding-bottom:75px}
.studio-process h2{margin-bottom:30px}
.process-story{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;position:relative}
.story-step{position:relative;min-width:0;text-align:center}
.story-scene{height:220px;display:grid;place-items:center;opacity:.65;transition:opacity 1s}
.process-collage{display:block;width:100%;height:100%;max-width:300px;object-fit:contain;filter:brightness(.85);transform:translateY(4px);transition:filter 1.2s,transform 1.2s}
.is-active .process-collage{filter:brightness(1.08) drop-shadow(0 5px 16px #b78b2820);transform:translateY(0)}
.story-scene svg{width:100%;max-width:220px;height:140px;fill:none;stroke:#e4c384;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.person-head{fill:#151617}.scene-ground{stroke:#6a5a3d;stroke-width:1}
.monoline-scene{fill:none;stroke:#e6c381;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.story-node{position:relative;z-index:2;display:grid;place-items:center;width:42px;height:42px;margin:0 auto;background:#101114;border:1px solid #665334;border-radius:50%;color:#b39867;font-size:12px;letter-spacing:1px;box-shadow:0 0 0 6px #0b0d10;transition:box-shadow .7s,border-color .7s,color .7s}
.story-step h3{font-size:18px;margin:25px 0 10px}.story-step p{font-size:13px;color:#929398;line-height:1.65;margin:0 auto;max-width:230px}
.story-track,.story-fill{position:absolute;z-index:0;pointer-events:none}.story-track{background:#5e4c2c}.story-fill{background:#e8bb62;box-shadow:0 0 10px #e8bb6266}
.story-dot{position:absolute;z-index:1;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);background:#fff1c0;box-shadow:0 0 12px #e8bb62,0 0 20px #e8bb62}
.story-dot[hidden]{display:none}
.is-active .story-scene{opacity:1}.is-active .story-node{border-color:#edd292;color:#fff0c0;box-shadow:0 0 0 6px #0b0d10,0 0 18px #dfae5370}
.is-active .greeting-arm{transform-origin:100px 65px;animation:handshake 2.2s ease-in-out infinite}
.is-active .study-arm{transform-origin:59px 64px;animation:study 3s ease-in-out infinite}
.is-active .typing-arm{transform-origin:65px 74px;animation:typing 1.2s ease-in-out infinite}.is-active .typing-arm.alternate{animation-delay:.4s}
.is-active .chart-mark,.is-active .code-mark{stroke-dasharray:80;stroke-dashoffset:80;animation:draw-scene 3s ease-in-out infinite}
.is-active .launch-check{stroke:#fff0b4;stroke-dasharray:100;stroke-dashoffset:100;animation:draw-scene 3.5s ease-in-out infinite}
.is-active .scene-spark,.is-active .screen-lines{animation:scene-light 3s ease-in-out infinite}
@keyframes handshake{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes study{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-7deg)}}
@keyframes typing{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
@keyframes draw-scene{0%{stroke-dashoffset:80;opacity:.5}40%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.5}}
@keyframes scene-light{0%,100%{opacity:.35}50%{opacity:1}}
@media(max-width:900px){.hero{min-height:0}.hero-grid{padding-top:40px;padding-bottom:46px;justify-content:flex-start}.concept-visual{height:285px}.concept-caption h3 span{display:block;margin-top:6px;line-height:1.5}.process-story{gap:16px}.story-step h3{font-size:15px}.story-step p{font-size:11px}.story-scene{height:130px}.story-scene svg{height:120px}.brand-board h4{font-size:42px}.brand-card{right:15px}.print-card{right:20px;bottom:20px;width:135px}}
@media(max-width:600px){.concept-grid{grid-template-columns:1fr;gap:28px}.concept-visual{height:320px}.web-body h4{font-size:36px}.concept-caption h3 span{display:inline}.process-story{display:flex;flex-direction:column;gap:32px}.story-step{display:grid;grid-template-columns:46px minmax(0,1fr);text-align:left;column-gap:20px;align-items:start}.story-node{grid-column:1;grid-row:1 / span 3;margin:13px 0 0;width:38px;height:38px}.story-scene{grid-column:2;grid-row:1;height:125px;justify-content:start}.story-scene svg{width:190px;max-width:100%;height:120px}.story-step h3{grid-column:2;font-size:20px;margin:12px 0 7px}.story-step p{grid-column:2;font-size:13px;max-width:none;margin:0}.studio-process{padding:55px 0}.concept-dialog{padding:30px 20px}.concept-dialog .concept-visual{height:280px}.concept-caption h3{font-size:18px}}
@media(max-width:540px){.hero-grid{padding-top:24px;padding-bottom:36px}.hero-copy{padding-top:0}.eyebrow{font-size:10px;line-height:1.7;letter-spacing:2.4px;margin-top:0}.process-rail{margin-top:54px}.service-ribbon{background:#05070b}.service-item{margin:0 14px;padding:18px 12px;min-height:82px}.service-item h3{margin-top:0}.service-item p{font-size:11px}.service-item>b{width:31px}.shell.service-track{width:100%}#works{padding:55px 0}.concept-note{font-size:11px}.hero h1{margin-top:19px}}
@media(prefers-reduced-motion:reduce){.story-scene *{animation:none!important;stroke-dashoffset:0!important}.concept-work .concept-visual,.story-scene,.story-node{transition:none}}
@media(min-width:601px) and (max-width:900px){.story-scene{height:170px}}
@media(max-width:600px){.story-scene{height:215px;justify-content:stretch}.process-collage{max-width:300px}.story-node{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.process-collage{transition:none;transform:none}}

/* Benefits use the same restrained gold vocabulary as the hero. */
@media(min-width:901px){.hero-grid{grid-template-columns:minmax(0,620px) minmax(25px,1fr) 170px;column-gap:24px}.hero-copy{grid-column:1;grid-row:1;padding:0}.process-rail{grid-column:3;grid-row:1;padding-left:30px}.rail-step small{color:#bdc1c8}.hero h1{font-size:clamp(52px,5.4vw,80px)}}
.service-item .service-estimate{display:block;margin-top:10px;color:#ddbd7e;font-size:11px;line-height:1.65}
.service-estimate strong{display:block;font-weight:600;color:#f0d295;font-size:13px}
@media(max-width:540px){.service-item{min-height:120px}.service-item .service-estimate{font-size:10px;margin-top:7px}.service-estimate strong{font-size:12px}}
.studio-process:has(+ .studio-values){padding-bottom:42px}
.studio-values{background:radial-gradient(ellipse at 12% 15%,#a8792820,transparent 48%),#080a0e;padding:72px 0 66px;position:relative}
.values-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin-bottom:36px}
.values-heading h2{margin:0;font-size:clamp(34px,4.3vw,62px);line-height:1.06;letter-spacing:-2px}
.values-heading h2 span{color:#e8bd70}
.values-heading .kicker{margin:0 0 18px}
.values-intro{max-width:330px;margin:0 0 5px;color:#a6a8af;font-size:15px;line-height:1.8}
.studio-values .benefit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;background:none}
.studio-values .value-card{display:flex;flex-direction:column;min-width:0;padding:26px 22px 22px;border:1px solid #d0ae6530;border-radius:14px;background:linear-gradient(145deg,#ffffff05,#ffffff01);transition:background .4s,border-color .4s,transform .4s}
.studio-values .value-card:hover{background:linear-gradient(145deg,#b8954f14,#ffffff02);border-color:#d0ae6566;transform:translateY(-4px)}
.value-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:25px}
.value-top>span{font-size:8px;letter-spacing:1.4px;color:#9b8966;white-space:nowrap}
.value-symbol{width:62px;height:62px;flex:none;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#b8974920,transparent 75%);border:1px solid #c5a45e36}
.value-symbol svg{width:45px;height:45px;fill:none;stroke:#e4c384;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.studio-values .value-card h3{font-size:18px;line-height:1.4;letter-spacing:-.3px;margin:0 0 13px;color:#f0f0eb}
.studio-values .value-card p{font-size:13px;line-height:1.75;color:#a3a6ad;margin:0 0 25px}
.value-outcome{margin-top:auto;display:flex;gap:8px;align-items:flex-start;padding-top:17px;border-top:1px solid #ffffff0d;font-size:10px;line-height:1.7;color:#c7b289}
.value-mark{width:5px;height:5px;flex:none;margin-top:6px;background:#d9b66e;border-radius:50%}
.values-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:27px}
.values-bottom p{margin:0;color:#7f848e;font-size:12px;line-height:1.7}
.values-bottom a{display:inline-flex;align-items:center;gap:17px;color:#e4c384;font-size:12px;text-decoration:none;white-space:nowrap;padding:7px 0;border-bottom:1px solid #c5a45e44}
.values-bottom a:hover{color:#fff0c0;border-color:#e4c384}.values-bottom a:focus-visible{outline:2px solid #e4c384;outline-offset:6px}
.values-ready .value-draw{animation:values-trace 1.8s ease both;animation-delay:calc(var(--value-index,0)*.2s)}
.values-ready .value-clock{transform-origin:32px 32px;animation:values-clock 2s ease both}
@keyframes values-trace{from{stroke-dasharray:180;stroke-dashoffset:180}to{stroke-dasharray:180;stroke-dashoffset:0}}
@keyframes values-clock{from{transform:rotate(-55deg)}to{transform:rotate(0)}}
@media(max-width:1100px) and (min-width:761px){.studio-values .benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.value-top>span{font-size:9px}}
@media(max-width:760px){.values-heading{display:block;margin-bottom:28px}.values-heading h2{letter-spacing:-1px}.values-intro{max-width:440px;margin-top:20px;font-size:14px}.studio-values .benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.studio-values .value-card{padding:23px 18px}.value-top{align-items:flex-start;flex-direction:column;gap:13px;margin-bottom:20px}.values-bottom{align-items:flex-start;flex-direction:column;gap:15px}.studio-values{padding:54px 0}}
@media(max-width:440px){.studio-values .benefit-grid{grid-template-columns:1fr}.value-top{flex-direction:row;align-items:center}.value-top>span{font-size:9px}.studio-values .value-card{padding:23px}.studio-values .value-card p{margin-bottom:20px}.studio-values .value-card h3{font-size:20px}}
@media(prefers-reduced-motion:reduce){.studio-values .value-card{transition:none}.values-ready .value-draw,.values-ready .value-clock{animation:none}}

/* Keep the service links aligned with the hero and portfolio shell. */
.shell.service-track{width:min(var(--max),calc(100% - 40px));max-width:100%;gap:10px}
.service-track .service-item{margin:0;min-width:0;min-height:125px;padding:27px 12px 18px;grid-template-columns:26px minmax(0,1fr) 28px;column-gap:10px}
.service-track .service-item svg{display:block;width:25px;height:25px}
.service-track .service-item h3{font-size:15px;line-height:1.25;margin:0;overflow-wrap:anywhere}
.service-track .service-item .service-estimate{margin-top:8px;font-size:10px;line-height:1.6;overflow-wrap:anywhere}
.service-track .service-item>b{width:28px;height:28px}
.service-track .service-no{left:12px;top:10px}
@media(min-width:541px) and (max-width:1100px){.service-track{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.shell.service-track{width:min(var(--max),calc(100% - 28px));gap:8px}.service-track .service-item{min-height:112px;padding:24px 12px 16px;grid-template-columns:26px minmax(0,1fr) 28px}.service-track .service-item h3{font-size:14px}}