/* The author's workshop: the existing noir environment stays in place. */
.approach{grid-template-columns:.85fr 1.15fr;column-gap:35px;row-gap:38px;padding-top:125px;padding-bottom:65px;align-items:center}
.approach:before{opacity:.53;background-image:linear-gradient(#06090c33,#06090c80 70%,#06090c),url('./noir-landscape.png')}
.approach:after{opacity:.28;top:-35%;left:48%}.approach-intro{position:relative;z-index:2}
.approach h2{font-size:clamp(45px,5vw,86px);letter-spacing:-.06em;line-height:1.04}
.approach .approach-description{max-width:390px;font-size:13px;line-height:1.9;margin-top:26px;color:#b4bbbe}
.craft-signature{margin-top:22px;font-size:10px;letter-spacing:.025em;color:#ddc49f;display:flex;align-items:center;gap:11px}.craft-signature>span{font-size:18px;color:#eac185}
.approach-actions{gap:20px;margin-top:29px}.approach-actions .gold-button{font-size:11px;padding:0 20px;gap:22px}.approach-actions .secondary-link{font-size:10px}.approach-actions .secondary-link small{font-size:8px}
.studio{--craft-progress:0;position:relative;min-width:0;align-self:stretch;display:flex;flex-direction:column;min-height:470px;isolation:isolate}
.studio:before{content:'';position:absolute;inset:12% -10% 8%;z-index:-1;background:radial-gradient(ellipse,#ddab5820,transparent 66%);filter:blur(20px);pointer-events:none}
.studio-topline{position:absolute;inset:0 0 auto 25px;display:flex;align-items:center;justify-content:space-between;z-index:2;color:#c6b9a3;font-size:8px;letter-spacing:.16em;text-transform:uppercase}
.studio-topline>span{display:flex;align-items:center;gap:9px}.studio-topline i,.studio-live i{display:block;width:4px;height:4px;border-radius:50%;background:#efce94;box-shadow:0 0 9px #eccd86}
#studio-pause{display:grid;place-items:center;border:1px solid #b9ab8640;background:#11171d66;color:#dccdb1;width:31px;height:31px;border-radius:50%;font-size:13px}#studio-pause:hover{border-color:#edc686}
.studio-scene{height:100%;min-height:470px;flex:1;position:relative;margin:0 -25px 0 -30px;touch-action:pan-y;cursor:default}
.studio-scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 0 3px #f2b96525)}
.studio-detail{position:absolute;right:12px;top:67%;display:flex;align-items:center;gap:10px;padding:10px 15px;background:#0b1017bf;border:1px solid #d3b27a44;border-radius:30px;box-shadow:inset 0 1px #ffffff0a;backdrop-filter:blur(10px);font-size:9px;color:#e3d0ae;pointer-events:none;transition:border-color .6s,box-shadow .6s}
.detail-cross{font-size:20px;font-weight:300;color:#ebc58a}.studio-detail>i{width:3px;height:3px;background:#ebc58a;border-radius:50%;box-shadow:0 0 8px #eac38b}.studio[data-step="2"] .studio-detail{border-color:#e9bf7d99;box-shadow:0 0 25px #e8b46922}
.studio-caption{position:absolute;bottom:8px;left:25px;right:0;display:flex;gap:20px;justify-content:space-between;align-items:center;border-top:1px solid #c0b19433;padding-top:15px;font-size:9px;color:#c6c7bf;letter-spacing:.02em}
.studio-live{display:flex;gap:7px;align-items:center;font-size:8px;color:#8f9a9f}.studio-live i{width:3px;height:3px}.is-paused .studio-live i,.motion-paused .studio-live i{box-shadow:none;background:#8f9a9f}
.craft-steps{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid #b8a48038;border-bottom:1px solid #b8a48038;position:relative;background:linear-gradient(90deg,#0c1115c9,#0b1015a6);backdrop-filter:blur(12px)}
.craft-step{position:relative;display:flex;flex-direction:column;text-align:left;background:transparent;padding:23px 30px 27px;border-right:1px solid #b8a4802a;color:#8b959a;transition:background .6s,color .6s;overflow:hidden}.craft-step:last-child{border-right:0}.craft-step:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 100%,#d6a95f1f,transparent 70%);opacity:0;transition:opacity .6s;pointer-events:none}.craft-step[aria-pressed=true]:before{opacity:1}.craft-step[aria-pressed=true]{background:#fff0c805;color:#f0ece0}.craft-step:hover{background:#fff0c809}
.craft-step-top{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:8px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;color:#8f9b9e}.craft-step[aria-pressed=true] .craft-step-top{color:#eac38b}.craft-step-top svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.craft-step strong{font-size:18px;font-weight:500;letter-spacing:-.04em;line-height:1.25;margin-bottom:10px}.craft-step-copy{font-size:11px;line-height:1.75;max-width:330px;color:#9da7ac}.craft-step[aria-pressed=true] .craft-step-copy{color:#b9c1c2}
.craft-progress{position:absolute;left:0;right:0;bottom:0;height:2px;opacity:0;background:#e8bf7720}.craft-progress i{display:block;height:100%;transform:scaleX(var(--craft-progress));transform-origin:left;background:#e9c793;box-shadow:0 0 12px #f5d093}.craft-step[aria-pressed=true] .craft-progress{opacity:1}
.approach .services-line{margin-top:8px;grid-column:1/-1;padding:19px 27px;font-size:14px}.approach .services-line>span{gap:12px}.approach .services-line svg{width:24px;height:24px}
.studio-fallback{position:absolute;inset:20% 8% 17%;display:grid;place-items:center;perspective:900px}.fallback-monitor{width:80%;height:80%;background:#0c151be0;border:1px solid #e6bf8580;border-radius:8px;padding:25px;transform:rotateY(-14deg) rotateX(8deg);box-shadow:0 0 30px #eac38b15}.fallback-monitor small{font-size:8px;color:#eac38b;letter-spacing:.1em}.fallback-monitor strong{display:block;font-size:clamp(22px,2.4vw,38px);font-weight:400;line-height:1.2;margin-top:30px}.fallback-monitor em{font-family:Georgia,serif;color:#e8bd85}.fallback-monitor i{display:block;width:90px;height:20px;border:1px solid #eac38b;border-radius:20px;margin-top:18px}.fallback-desk{position:absolute;bottom:3%;width:100%;height:20%;border:1px solid #eac38b77;transform:rotateX(60deg)}.studio-scene.ready .studio-fallback{display:none}
@media(min-width:1450px){.approach{column-gap:45px;row-gap:45px}.approach .approach-description{font-size:16px;max-width:490px}.craft-signature{font-size:12px}.studio{min-height:530px}.studio-scene{min-height:530px}.studio-topline{font-size:9px}.studio-detail{font-size:11px}.studio-caption{font-size:10px}.craft-step{padding:27px 34px 31px}.craft-step strong{font-size:23px}.craft-step-copy{font-size:13px}.craft-step-top{font-size:9px}.approach-actions .gold-button{font-size:13px}.approach-actions .secondary-link{font-size:12px}.approach .services-line{font-size:18px}}
@media(min-width:701px) and (max-width:1050px){.approach{column-gap:15px;grid-template-columns:.85fr 1.15fr}.approach h2{font-size:48px}.approach .approach-description{font-size:12px}.approach-actions{gap:14px;flex-wrap:wrap}.studio{min-height:440px}.studio-scene{min-height:440px;margin-left:-20px}.studio-caption{left:10px;font-size:8px}.studio-live{display:none}.studio-detail{font-size:8px;padding:7px 10px;right:0}.craft-step{padding:20px}.craft-step strong{font-size:16px}.craft-step-copy{font-size:10px}.approach .services-line{font-size:11px}}
@media(max-width:700px){.approach{display:block;padding-top:94px;padding-bottom:50px}.approach:before{opacity:.4}.approach:after{top:8%;opacity:.2}.approach h2{font-size:48px;line-height:1.03}.approach .approach-description{font-size:12px;line-height:1.85;max-width:390px;margin-top:24px}.craft-signature{font-size:9px;margin-top:20px}.approach-actions{gap:15px;margin-top:25px;flex-wrap:nowrap}.approach-actions .gold-button{font-size:10px;padding:0 16px;gap:14px;min-height:43px}.approach-actions .secondary-link{font-size:9px;gap:8px}.approach-actions .secondary-link small{font-size:7px}.studio{height:355px;min-height:355px;margin-top:38px}.studio-scene{min-height:355px;margin:0 -22px}.studio-topline{left:0;font-size:7px}.studio-caption{left:0;right:0;font-size:8px;bottom:0;gap:8px;padding-top:12px}.studio-live{font-size:7px;gap:5px}.studio-detail{right:0;top:72%;font-size:8px;padding:6px 11px;gap:7px}.detail-cross{font-size:17px}.craft-steps{margin-top:27px;grid-template-columns:1fr;gap:0;border-top:0;background:#0b101599}.craft-step{padding:19px 19px 21px;border-right:0;border-top:1px solid #b8a48035;display:grid;grid-template-columns:32px 1fr;gap:6px 13px}.craft-step-top{grid-column:1;grid-row:1/3;display:flex;flex-direction:column;align-items:start;justify-content:flex-start;gap:12px;margin:0;font-size:0}.craft-step-top>span{font-size:0}.craft-step-top>span:first-letter{font-size:0}.craft-step-top svg{width:24px;height:24px;margin-top:1px}.craft-step strong{grid-column:2;grid-row:1;font-size:17px;margin:0}.craft-step-copy{grid-column:2;grid-row:2;font-size:10px;line-height:1.7;max-width:none}.craft-progress{left:64px;right:19px}.approach .services-line{margin-top:30px;padding:18px;font-size:10px}.approach .services-line>span{gap:10px}.approach .services-line svg{width:22px;height:22px}}
@media(max-width:370px){.approach h2{font-size:43px}.approach-actions{gap:10px}.approach-actions .gold-button{font-size:9px;padding:0 13px;gap:10px}.approach-actions .secondary-link{font-size:8px}.approach-actions .secondary-link small{font-size:6px}.studio-live{display:none}.studio{height:330px;min-height:330px}.studio-scene{min-height:330px}.craft-step{padding:17px 14px}.craft-step strong{font-size:16px}}
@media(prefers-reduced-motion:reduce){.craft-step,.craft-step:before,.studio-detail{transition:none}.craft-progress i{transform:none;width:100%}}