/* garcy.studio UI system v1. Source: studio website + Figma pitch 1184:5033.
   Semantic aliases support hosts beyond proposals. See UI-SYSTEM.md. */
:root{--gs-font:'Restart Soft',sans-serif;--gs-display:'Perfectly Nineties',serif;--gs-mono:'ABC Diatype Mono',monospace;--gs-paper:#fafafa;--gs-ink:#e7e7e7;--gs-muted:#9d9d9d;--gs-accent:#ffff40;--gs-radius-frame:20px;--gs-radius-control:12px;--gs-ease:cubic-bezier(.22,1,.36,1);--gs-copy-duration:800ms;--gs-headline-duration:1900ms;--gs-image-duration:700ms;--gs-image-interval:2000ms}
/* Unchanged website button-effects.js styling. */
button{isolation:isolate}
.button-pixels{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;pointer-events:none;opacity:0;z-index:20}
.button-pixelating .button-pixels{opacity:1}
.button-yellow{background:#ffff40!important;color:#111!important}
.button-yellow img{filter:brightness(0)}
.profile-button.button-yellow{background:#fff!important}.profile-button.button-yellow img{filter:none}
.gs-key-button,.top-controls #theme-toggle,.top-controls #search-open{display:grid;place-items:center;width:45.925px;height:45.702px;border-radius:8px;background:#000;color:#b8b8b8;padding:0;font:400 14px/1 var(--gs-font)}
.top-controls #theme-toggle{position:relative;inset:auto;font-size:20px}
.top-controls #language-toggle{right:169px}
#back img{transform:scaleX(-1)}
/* Behaviour-only fixes: keep the approved bottom slider glass unchanged. */
.slider-thumb{z-index:3;touch-action:none;cursor:grab;user-select:none}
.slider-track input{z-index:2;cursor:pointer;touch-action:none}
.slider-track.is-dragging .slider-thumb{transition:none;cursor:grabbing}
.slider-track:focus-within{outline:1px solid var(--gs-ink);outline-offset:4px}
/* Tracking applies between digit cells too; fixed cells previously swallowed it. */
.phase-number{letter-spacing:-.06em}
.phase-digit{margin-right:-.06em;letter-spacing:0}.phase-digit:last-child{margin-right:0}
.team-strip{touch-action:pan-x pan-y}
.team-card>img{pointer-events:none;-webkit-user-drag:none;user-select:none}
/* Native Figma 1186:5348 check, never a Unicode approximation. */
.success-mark{display:inline-block;flex:0 0 13.1836px;width:13.1836px;height:13.1836px;object-fit:contain;vertical-align:baseline}
.phase-outcome h3{display:flex;align-items:center;gap:8px}
.timeline-stop li{display:flex;align-items:baseline;gap:8px}
/* Figma 1184:4145. Long editable labels may expand the track without clipping. */
.gs-option-switch,.price-switch{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;width:max-content;min-width:149px;min-height:36px;max-width:100%;padding:0;margin-top:22px;border-radius:12px;background:rgba(30,30,30,.42);box-shadow:inset 0 0 0 .5px #ffffff20;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.price-switch:before{display:none}
.gs-option-switch button,.price-switch button{display:grid;place-items:center;min-width:71px;min-height:36px;padding:10px 12px;border-radius:12px;background:transparent;box-shadow:none;color:#9d9d9d;font:500 12px/16px var(--gs-font);letter-spacing:-.48px;white-space:normal}
.gs-option-switch button[aria-pressed=true],.price-switch button[aria-pressed=true]{min-width:78px;color:#dadada;background:rgba(69,69,69,.42);box-shadow:inset 0 0 0 .5px #ffffff28;backdrop-filter:blur(24px)}
.price-card.unselected .price-summary,.price-card.unselected ul{opacity:1}
/* Exact plus SVG over the Figma glass dimensions, with a quiet invitation pulse. */
.gs-hotspot,.hotspot{position:absolute;width:56px;height:56px;padding:20px;display:grid;place-items:center;border-radius:23.5557px;background:rgba(232,232,232,.2);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 0 0 .6px #ffffff24;transform:translate(-50%,-50%);z-index:3}
.gs-hotspot>img,.hotspot>img{display:block;width:16px;height:16px;max-width:none;pointer-events:none}
.gs-hotspot:before,.gs-hotspot:after,.hotspot:before,.hotspot:after{content:'';position:absolute;inset:0;border:1px solid #ffffff44;border-radius:inherit;pointer-events:none;animation:gs-hotspot-wave 3s var(--gs-ease) infinite;animation-delay:var(--pulse-delay,0ms)}
.gs-hotspot:after,.hotspot:after{animation-delay:calc(var(--pulse-delay,0ms) + 900ms)}
@keyframes gs-hotspot-wave{0%{scale:.9;opacity:0}20%{opacity:.35}85%,100%{scale:1.65;opacity:0}}
.hotspot-label{z-index:25}
.diagram-explorer{position:relative;isolation:isolate;flex:1;min-height:0;width:100%;display:flex;align-items:center}
.diagram-explorer>.blueprint{width:100%;height:100%;max-width:none;transition:transform 700ms var(--gs-ease);transform-origin:25% 50%}
.diagram-deliverables{position:absolute;right:-12%;top:5%;bottom:2%;width:48%;padding:0 0 0 20px;opacity:0;transform:translateX(28px);visibility:hidden;overflow:auto;scrollbar-width:thin;transition:transform 700ms var(--gs-ease),opacity 450ms,visibility 700ms;z-index:4}
.diagram-deliverables header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:12px}
.diagram-close{width:30px;height:30px;flex-shrink:0;border-radius:10px;background:#ffffff20;font:400 20px/1 var(--gs-font)}
.diagram-deliverables article{margin:0 0 20px;padding:0;transition:opacity .25s}
.diagram-deliverables h3{display:flex;align-items:baseline;gap:7px;font:500 14px/1.1 var(--gs-font);letter-spacing:-.04em}
.diagram-deliverables p{margin:8px 0 0;font:400 12px/1.2 var(--gs-font);letter-spacing:-.03em;color:var(--muted)}
.diagram-deliverables article.selected h3{color:#f3ff47}
.diagram-connectors{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2;opacity:0;transition:opacity .4s .1s}
.diagram-connectors path{fill:none;stroke:currentColor;stroke-width:.65;opacity:.25;vector-effect:non-scaling-stroke}.diagram-connectors path.selected{opacity:.65}
.diagram-explorer.is-expanded>.blueprint{transform:translateX(-22%) scale(.76)}
.diagram-explorer.is-expanded .diagram-deliverables{opacity:1;visibility:visible;transform:none}
.diagram-explorer.is-expanded .diagram-connectors{opacity:1}
.diagram-explorer.is-expanded .hotspot-label{display:none}
/* Website search row geometry, hover selection and predictable stylesheet order. */
.studio-menu .menu-window{left:auto;top:auto;transform:none;width:100%}
.studio-menu .menu-composition{width:min(460px,calc(100vw - 40px))}
.studio-menu .menu-result{min-height:38px;padding:7px 10px;border-radius:0;background:transparent;text-align:left}
.studio-menu .menu-result-title{font:500 19.362px/1.1 var(--gs-font);letter-spacing:-.04em}
.studio-menu .menu-result-type{font:10px var(--gs-mono)}
.studio-menu .menu-result[aria-selected=true]{background:transparent}
.studio-menu .search-excerpt{padding-left:0;font:400 12px/1.2 var(--gs-font);color:#aaa}
.studio-menu .menu-results{max-height:min(48vh,430px)}
:root[data-theme=light] .success-mark{filter:invert(1)}
:root[data-theme=light] .diagram-deliverables article.selected h3{color:#253c14}
@media(max-width:799px){
 .top-controls #theme-toggle{position:relative;inset:auto;width:45.925px;height:45.702px}
 .top-controls #language-toggle{right:0;top:57px}
 .diagram-explorer{display:block;min-height:360px}
 .diagram-explorer>.blueprint{height:360px;min-height:360px}
 .diagram-explorer.is-expanded>.blueprint{transform:none}
 .diagram-deliverables{position:relative;inset:auto;width:100%;padding:0;max-height:0;overflow:hidden;transition:opacity .4s,max-height .7s var(--gs-ease)}
 .diagram-explorer.is-expanded .diagram-deliverables{max-height:1600px;padding-top:24px}
 .diagram-deliverables h3{font-size:17px}.diagram-deliverables p{font-size:15px;line-height:1.2}
 .diagram-connectors{display:none}
 .studio-menu .menu-result-title{font-size:18px}
 .studio-menu .menu-results{max-height:calc(100dvh - 240px)}
}
@media(prefers-reduced-motion:reduce){.hotspot:before,.hotspot:after{animation:none}.diagram-explorer>*{transition:none}}
/* Closing layout reserves a complete controls lane on short laptop screens. */
@media(min-width:800px){
 .screen-closing .closing-copy{top:10%}
 .screen-closing .closing-title{top:25%}
 .screen-closing .closing-contact,.screen-closing .closing-copyright{top:42%}
 .screen-closing .team-strip{top:52%;bottom:145px;height:auto}
 .screen-closing .team-track{height:100%;align-items:stretch}
 .screen-closing .team-card{height:100%;width:auto;flex:0 0 auto;aspect-ratio:282/361}
 .screen-closing .team-card>img{width:auto;aspect-ratio:282/361}
}
@media(min-width:800px) and (max-height:620px){
 .screen-closing .closing-copy{top:15%;font-size:15px;max-width:260px}
 .screen-closing .closing-title{top:16%;font-size:22px}
 .screen-closing .closing-contact,.screen-closing .closing-copyright{top:38%;font-size:10px}
 .screen-closing .team-strip{top:47%;bottom:145px}
 .screen-closing .team-label{font-size:8px;padding:5px}
}
/* Contact-modal fields and actions reused by the password entrance. */
.proposal-lock{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:439px;max-width:calc(100% - 40px)}
.contact-fields{overflow:hidden;border-radius:12px;box-shadow:inset 0 0 0 .6px #ffffff25}
.contact-field{display:flex;align-items:center;gap:14px;background:rgba(69,69,69,.6);height:58px;padding:0 16px;box-sizing:border-box;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.contact-field input{background:none;border:0;outline:none;min-width:0;width:100%;color:#dadada;font:400 16px/1 var(--gs-font);letter-spacing:-.04em}
.contact-field input::placeholder{color:#878787;opacity:1}.contact-field:focus-within{background:rgba(82,82,82,.6)}
.contact-actions{display:flex;justify-content:flex-end;align-items:center;margin-top:22px;gap:15px}
.contact-next{font:500 11px/1 var(--gs-font);color:#fff;background:#e8e8e833;border:0;border-radius:17.19px;padding:14px 16px;display:flex;align-items:center;gap:10px;cursor:pointer;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.contact-next img{width:10px;height:10px}.contact-next:disabled{opacity:.35;cursor:default}
.contact-enter{font:500 7.015px/1 var(--gs-font);background:#ffffffb3;color:#111;border-radius:4.5px;padding:3px;letter-spacing:0}
.contact-error{color:#ffff40;font:400 13px/1.25 var(--gs-font);margin-top:18px}
.deck-frame.is-locked .top-controls,.deck-frame.is-locked .playback,.deck-frame.is-locked .motion-toggle{display:none}

.studio-menu .menu-search-row input:focus-visible{outline:none}
@media(max-width:799px){
 /* Bound the scroll surface above fixed controls; content can never pass under them. */
 .screen:not(.screen-intro):not(.screen-lock){bottom:210px;padding-bottom:30px;scroll-padding-bottom:30px}
 .screen-closing .team-strip{margin-bottom:24px}
 .screen-company .project-slideshow,.screen-process .project-slideshow{margin-bottom:24px}
}
@media(max-width:799px){
 .screen:not(.screen-intro):not(.screen-lock){top:80px;padding-top:15px}
 .screen-closing,.screen-company,.screen-process{padding-top:0!important}
 .screen-closing .closing-copy,.screen-company .split-copy,.screen-process .split-copy{margin-top:15px}
}

/* The website motion control uses its original star, without a hover treatment. */
.motion-toggle>img{width:10.604px;height:11.722px;border-radius:0}
.motion-toggle,.motion-toggle:hover{background:transparent!important;opacity:.65}
.motion-toggle[aria-pressed=true]{opacity:1}
.signature>img{filter:none}

/* Both segmented controls share the same glass thumb and movement. */
:root{--gs-switch-duration:650ms;--gs-switch-ease:cubic-bezier(.22,1,.36,1)}
.slider-thumb{transition:left var(--gs-switch-duration) var(--gs-switch-ease)}
.slider-track.is-dragging .slider-thumb{transition:left 80ms linear}
.price-switch{position:relative;isolation:isolate;grid-template-columns:minmax(78px,1fr) minmax(78px,1fr)}
.price-switch .option-thumb{position:absolute;inset:0 auto 0 0;width:50%;border-radius:12px;background:rgba(69,69,69,.6);box-shadow:inset 0 0 0 .6px #ffffff35,inset 0 1px 0 #ffffff18,0 3px 12px #0001;backdrop-filter:blur(24px);transform:translateX(calc(var(--option-index,0)*100%));transition:transform var(--gs-switch-duration) var(--gs-switch-ease);pointer-events:none}
.price-switch button,.price-switch button[aria-pressed=true],.price-switch button:hover{min-width:78px;background:transparent!important;box-shadow:none!important;backdrop-filter:none;transition:color 180ms ease}
.price-switch button:hover{color:#9d9d9d}.price-switch button[aria-pressed=true],.price-switch button[aria-pressed=true]:hover{color:#dadada}
@media(prefers-reduced-motion:reduce){.slider-thumb,.slider-track.is-dragging .slider-thumb,.price-switch .option-thumb{transition:none}}

/* Preserve normal word spaces inside each animated checklist label. */
.price-card li>.checklist-copy,.timeline-stop li>.checklist-copy{display:block;flex:1 1 auto;min-width:0;font:inherit;color:inherit;letter-spacing:inherit;white-space:normal}

.timeline-note,.price-summary{font-family:var(--gs-font);font-weight:500}
.playback .audio-channel #sound.playing{background:#fff!important;color:#3c3c3c}
.playback .audio-channel #sound.playing img{filter:none}
.playback .audio-channel #sound.playing .button-pixels{display:none}

@media(max-width:799px){
 /* Compact track with accessible section names below, never inside the thumb. */
 .section-slider{width:min(280px,calc(100vw - 64px));bottom:57px}
 .slider-track,.slider-thumb{height:12px;border-radius:6px}
 .slider-track{margin:16px 0 2px;overflow:visible}
 .slider-track input{height:44px;top:-16px}
 .slider-thumb{font-size:0;line-height:0;color:transparent}
 .slider-labels{margin-top:5px}
 .slider-labels button{min-height:32px;font-size:7px;padding:4px 1px}
 .deck-navigation{bottom:116px}
 .screen:not(.screen-intro):not(.screen-lock){bottom:168px}
 .diagram-explorer.is-expanded .diagram-deliverables{max-height:none;overflow:visible}
 .diagram-deliverables article{scroll-margin:24px}
 .screen-closing .closing-copy{margin:15px 16px 0;max-width:calc(100% - 32px);width:auto}
 .screen-closing .closing-title{margin:44px 16px 32px;text-align:left;width:auto;max-width:calc(100% - 32px)}
 .screen-closing .closing-contact{margin-left:16px;margin-right:16px}
 .screen-closing .closing-copyright{margin:16px 16px 0}
 .screen-closing .team-strip{margin-left:16px;margin-right:0}
}

/* Apply tracking between the counter cells without moving their vertical wheels. */
.investment #price-total{letter-spacing:-.04em}
.price-cell{letter-spacing:0;margin-right:-.04em}.price-cell:last-child{margin-right:0}

/* The original website opening reel fills the entire frame behind the gains. */
.gains-backdrop{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;border-radius:inherit;background:#111}
.gains-backdrop video{width:100%;height:100%;object-fit:cover}
.gains-video-shade{position:absolute;inset:0;background:linear-gradient(180deg,#0005,#0003 35%,#000b)}
.gains-backdrop .reel-dither{position:absolute;inset:0;opacity:.065;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath fill='white' d='M0 0h1v1H0zM2 2h1v1H2z'/%3E%3Cpath fill='black' d='M2 0h1v1H2zM0 2h1v1H0z'/%3E%3C/svg%3E")}
.deck-frame[data-slide=gains]{--ink:#e7e7e7;--muted:#c0c0c0;color:var(--ink)}
.screen-gains .gain-cards article{background:#151715a6;backdrop-filter:blur(18px)}
.studio-values p{width:100%;max-width:270px}
:root[data-theme=light] .screen-gains .gain-cards article{background:#151715a6}
.deck-frame[data-slide=gains] .signature,.deck-frame[data-slide=gains] .slider-labels button,.deck-frame[data-slide=gains] .playback #counter{color:#d0d0d0}
:root[data-theme=light] .deck-frame[data-slide=gains] .garcy-brand,:root[data-theme=light] .deck-frame[data-slide=gains] .motion-toggle img{filter:none}

/* One glass surface behind the entire mobile navigation, including its buttons. */
@media(max-width:799px){
 .deck-frame[data-slide]:not([data-slide=intro]):not(.is-locked)::before{
  height:168px;
  border-radius:20px 20px 0 0;
  background:linear-gradient(135deg,#e8e8e824,#e8e8e80f);
  backdrop-filter:blur(30px) saturate(130%);
  -webkit-backdrop-filter:blur(30px) saturate(130%);
  box-shadow:0 -8px 32px #00000012;
  mask-image:linear-gradient(to bottom,transparent,#000 28px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 28px);
 }
 .screen:not(.screen-intro):not(.screen-lock){
  padding-bottom:56px;
  scroll-padding-bottom:56px;
  mask-image:linear-gradient(to bottom,#000 calc(100% - 44px),transparent);
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 44px),transparent);
 }
 :root[data-theme=light] .deck-frame[data-slide]:not([data-slide=intro]):not([data-slide=gains]):not(.is-locked)::before{
  background:linear-gradient(135deg,#ffffff70,#ffffff38);
  box-shadow:0 -8px 32px #00000008;
 }
}