/* Interaction and portfolio refinement for the approved Clear Studio identity. */
.identity-lockup{display:inline-flex;align-items:center;gap:13px;color:inherit;font-family:'Instrument Sans',Arial,sans-serif;line-height:1;vertical-align:middle;white-space:nowrap}
.identity-symbol{display:inline-block;flex-shrink:0;width:44px;height:44px;background:url('/assets/charlies-web-design-woven-symbol.svg') center/contain no-repeat}
.identity-type{display:flex;flex-direction:column;gap:5px}.identity-type b{font-size:27px;font-weight:700;letter-spacing:-.045em}.identity-type small{font-size:13px;font-weight:500;letter-spacing:.02em;color:#2865d9}
.brand-dark .identity-symbol,.brand-profile .identity-symbol{background-image:url('/assets/charlies-web-design-woven-symbol-dark.svg')}.brand-dark .identity-type small{color:#75a7ff}
.brand-comparison{padding-bottom:75px}.brand-name-selector{display:flex;border-bottom:1px solid var(--line);gap:40px;margin-bottom:30px}.brand-name-selector button{background:none;border:0;border-bottom:2px solid transparent;padding:12px 0 20px;text-align:left;font-family:inherit;font-size:19px;font-weight:600;color:var(--muted);min-height:72px}.brand-name-selector button span{display:block;font-size:12px;font-weight:400;margin-top:7px}.brand-name-selector button[aria-selected=true]{color:var(--ink);border-color:var(--blue)}
.brand-context-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.brand-light,.brand-dark{min-height:235px;padding:30px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);border-radius:4px}.brand-light{background:#fff}.brand-dark{background:var(--ink);color:#fff;border-color:var(--ink)}.brand-context-label{display:block;font-size:11px;color:var(--muted);line-height:1.5}.brand-dark .brand-context-label{color:#bacbd7}.brand-context-grid .identity-symbol{width:60px;height:60px}.brand-context-grid .identity-lockup{gap:19px}.brand-context-grid .identity-type b{font-size:38px}.brand-context-grid .identity-type small{font-size:17px}.brand-context-grid [data-brand-lockup]{margin:15px 0 30px}
.brand-small-sizes{display:flex;align-items:center;gap:45px;padding:30px 0;border-bottom:1px solid var(--line)}.brand-small-sizes>div{display:flex;flex-direction:column;gap:13px;min-width:70px}.brand-small-sizes>p{font-size:14px;max-width:44ch;color:var(--muted);line-height:1.7;margin-left:auto}.brand-profile{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;width:60px;height:60px;border-radius:12px}.brand-profile .identity-symbol{width:34px;height:34px}.brand-context-copy{padding-top:35px;max-width:68ch}.studio-page .brand-context-copy h2{font-size:33px}.brand-context-copy>p{margin-top:18px;color:var(--muted);line-height:1.75}.brand-context-copy .button{margin-top:24px}.brand-context-copy .brand-preview-help{font-size:12px}.brand-provenance{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:24px;margin-top:35px;max-width:84ch;line-height:1.75}
@media(max-width:760px){.identity-symbol{width:35px;height:35px}.identity-lockup{gap:10px}.identity-type b{font-size:24px}.identity-type small{font-size:11px}.brand-name-selector{gap:25px}.brand-name-selector button{font-size:15px;line-height:1.5}.brand-name-selector button span{font-size:10px}.brand-context-grid{grid-template-columns:1fr;gap:18px}.brand-light,.brand-dark{padding:24px;min-height:210px}.brand-context-grid .identity-symbol{width:47px;height:47px}.brand-context-grid .identity-lockup{gap:14px}.brand-context-grid .identity-type b{font-size:31px}.brand-context-grid .identity-type small{font-size:14px}.brand-context-grid [data-brand-lockup]{margin-bottom:20px}.brand-small-sizes{gap:25px;flex-wrap:wrap}.brand-small-sizes>p{margin-left:0;font-size:13px}.studio-page .brand-context-copy h2{font-size:30px}.brand-context-copy>p{font-size:15px}.brand-comparison{padding-bottom:49px}}
.studio-header-shell{position:sticky;top:0;z-index:50;background:#f7f9fcf2;border-bottom:1px solid transparent;backdrop-filter:blur(16px);transition:border-color .25s,box-shadow .25s}
.studio-header-shell.is-scrolled{border-bottom-color:var(--line);box-shadow:0 8px 28px #17394f08}.reading-progress{position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;pointer-events:none}
.studio-page [id]{scroll-margin-top:125px}.studio-page #new-concepts-title{scroll-margin-top:165px}.studio-page .legal-sidebar{top:125px;max-height:calc(100dvh - 155px)}
.studio-hero-content>p{max-width:59%;margin-top:23px}.studio-actions{margin-top:24px}.studio-hero-content>.hero-scope{font-size:12px;line-height:1.5;margin-top:25px;color:var(--muted);letter-spacing:.005em}
.studio-page .studio-hero h1{font-size:clamp(48px,6.2vw,86px)}
.project-selectors{position:relative}.project-tab-indicator{position:absolute;bottom:0;left:0;height:2px;background:var(--blue);transition:transform .32s var(--ease),width .32s var(--ease);pointer-events:none}.project-selectors.has-indicator button[aria-selected=true]{border-bottom-color:transparent}
.gallery-actions{gap:22px}.gallery-enlarge{font-family:inherit;font-size:12px;white-space:nowrap;border:1px solid #bdcedb;color:var(--ink);background:transparent;min-height:44px;padding:9px 13px;border-radius:4px;transition:background .2s,border-color .2s}.gallery-enlarge:hover{background:#f7f9fc;border-color:#8aa7bd}
.gallery-dialog{width:min(1200px,94vw);max-height:92dvh;padding:0;border:0;background:var(--paper);color:var(--ink);border-radius:6px;box-shadow:0 20px 90px #17394f40;overflow:hidden}
.gallery-dialog::backdrop{background:#112d43de;backdrop-filter:blur(8px)}.preview-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:18px 25px;border-bottom:1px solid var(--line)}
.studio-page .preview-dialog-heading h2{font-size:20px;letter-spacing:-.025em}.preview-dialog-heading button{background:none;border:1px solid var(--line);color:var(--ink);border-radius:4px;min-height:44px;padding:9px 14px;display:flex;gap:15px;align-items:center;font-size:13px}
.preview-dialog-heading button span{font-size:22px;line-height:1}.preview-dialog-body{max-height:calc(92dvh - 82px);overflow:auto;background:#dce7ee;min-height:260px}.preview-dialog-body>img{display:block;width:100%;height:auto}.preview-dialog-body.mobile-preview>img{width:min(390px,100%);margin:auto}.preview-dialog-body.solax-modal>img{margin-top:-3.5%}.preview-dialog-body.solax-modal.mobile-preview>img{margin-top:-81px}.preview-dialog-body>iframe{display:block;border:0;width:100%;height:calc(92dvh - 82px);min-height:400px}.preview-dialog-body.mobile-preview>iframe{max-width:390px;margin:auto}
.new-concepts{padding:85px 0 80px}.new-concepts .section-heading{align-items:flex-end;gap:60px;margin-bottom:35px}.new-concepts .section-heading>p{max-width:44ch}.new-concepts .project-kind{margin-bottom:13px}
.new-concept-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.new-concept-card{min-width:0}.new-concept-preview{height:auto;aspect-ratio:1.45;background:#e0e6e6;overflow:hidden;border-radius:4px;border:1px solid #17394f0e}.new-concept-preview a{display:block;height:100%;overflow:hidden}.new-concept-preview img{display:block;width:100%;height:auto;transform:scale(1);transition:transform .55s var(--ease)}
.new-concept-preview:not(.is-mobile):hover img{transform:scale(1.035)}.new-concept-preview.is-mobile img{width:43%;margin-inline:auto;box-shadow:0 12px 28px #17394f18;border-inline:1px solid #17394f18}.new-concept-caption{display:flex;align-items:center;justify-content:space-between;gap:13px;padding-top:13px;min-height:55px}.new-concept-caption>span{font-size:11px;color:var(--muted)}.new-concept-caption>div{display:flex;gap:3px}.new-concept-caption button{display:inline-flex;align-items:center;justify-content:center;width:36px;min-height:44px;border:0;border-bottom:2px solid transparent;background:none;opacity:.55}.new-concept-caption button[aria-pressed=true]{opacity:1;border-color:var(--blue)}.new-concept-caption .ui-icon{width:17px;height:17px}
.new-concept-caption button{width:44px}.studio-page .new-concept-card h3{font-size:25px;margin-top:7px}.new-concept-card>p:not(.concept-interactions){margin-top:13px;font-size:15px;line-height:1.65;color:var(--muted);max-width:38ch}.concept-interactions{font-size:11px;color:var(--muted);line-height:1.65;margin-top:16px}.new-concept-card>.text-link{display:inline-block;padding:12px 0 4px;margin-top:13px;min-height:44px}.concept-truth-note{font-size:12px;line-height:1.7;color:var(--muted);margin-top:35px;max-width:85ch}.new-concepts>.text-link{display:inline-block;min-height:44px;padding-top:13px;margin-top:8px}
.redesign-section{padding:75px 0;background:#e8f0f5}.redesign-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:8vw}.redesign-layout>div>.project-kind{margin-bottom:16px}.studio-page .redesign-layout h2{font-size:clamp(34px,3.5vw,47px);max-width:22ch}.redesign-layout>div>p:not(.project-kind){font-size:16px;color:var(--muted);line-height:1.7;max-width:47ch;margin-top:25px}.redesign-layout .button{margin-top:25px}
.redesign-tabs{display:flex;gap:20px;border-bottom:1px solid #bbcedc}.redesign-tabs button{font:inherit;font-size:12px;line-height:1.55;text-align:left;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);padding:10px 0 14px;min-height:57px;flex:1}.redesign-tabs button[aria-selected=true]{border-color:var(--blue);color:var(--ink);font-weight:600}.redesign-priorities [role=tabpanel]{padding-top:29px}.studio-page .redesign-priorities h3{font-size:25px;line-height:1.22;max-width:24ch}.redesign-priorities [role=tabpanel]>p{font-size:15px;color:var(--muted);margin-top:18px;line-height:1.75;max-width:52ch}.redesign-priorities .text-link{display:inline-block;min-height:44px;padding-top:18px;margin-top:15px}
.studio-testimonials{padding:85px 0}.testimonial-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:45px}.testimonial-list figure{margin:0;padding-top:27px;border-top:2px solid var(--blue)}.testimonial-list blockquote{margin:0}.testimonial-list blockquote p{font-size:clamp(21px,2.2vw,30px);line-height:1.45;letter-spacing:-.025em;max-width:35ch}.testimonial-list figcaption{display:flex;flex-direction:column;font-size:13px;margin-top:25px;gap:4px}.testimonial-list figcaption span{color:var(--muted)}.testimonial-list figcaption a{font-size:12px;color:var(--blue);padding-top:10px;text-decoration:underline;text-underline-offset:4px}
.disclosure-animated .service-expanded{animation:none!important}.studio-page .cost-totals dd{font-variant-numeric:tabular-nums}
.brief-progress{display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:28px;font-size:12px;color:var(--muted)}.brief-progress span[aria-current=step]{color:var(--ink);font-weight:600}.brief-progress span:before{content:attr(data-step);display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border:1px solid #a9bfd1;border-radius:50%;margin-right:8px;font-size:11px}.brief-progress span[aria-current=step]:before{background:var(--blue);color:#fff;border-color:var(--blue)}.brief-stage{padding:0;border:0;margin:0;min-width:0}.brief-stage legend{font-weight:600;font-size:23px;letter-spacing:-.025em;margin-bottom:23px}.brief-step-actions{display:flex;gap:12px;margin-top:22px}.brief-step-actions .button.secondary{font-size:13px}.brief-step-status{font-size:12px;color:var(--muted);margin-top:15px}.brief-stage-enter{animation:none}
@keyframes studio-photo-enter{from{clip-path:inset(0 0 0 12%);opacity:.65;transform:scale(1.02)}to{clip-path:inset(0);opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:no-preference){.studio-hero-photo{animation:studio-photo-enter 1s var(--ease) both}.studio-hero-content{animation:studio-enter .7s .07s var(--ease) both}.studio-page.inner-page .page-intro{animation:studio-enter .6s var(--ease) both}}
@media(max-width:1050px){.gallery-actions{gap:14px}.gallery-enlarge{font-size:11px}.new-concept-grid{gap:21px}.studio-page .new-concept-card h3{font-size:22px}.new-concepts .section-heading{gap:35px}.new-concept-card>p:not(.concept-interactions){font-size:14px}.concept-interactions{font-size:10px}.redesign-tabs{gap:14px}}
@media(max-width:760px){.studio-page [id]{scroll-margin-top:100px}.studio-hero-content>p{max-width:100%;margin-top:21px}.studio-hero-content>.hero-scope{max-width:100%;font-size:11px;margin-top:21px}.studio-actions{margin-top:23px}.gallery-actions{flex-wrap:wrap;gap:7px 18px}.gallery-actions .device-selector{flex:1}.gallery-enlarge{font-size:11px;padding-inline:9px}.gallery-caption #view-project{margin-left:auto;min-height:44px;display:inline-flex;align-items:center;padding-bottom:0;border-bottom:0}.gallery-actions .device-selector button{min-height:44px}.preview-dialog-heading{padding:12px 16px;gap:15px}.studio-page .preview-dialog-heading h2{font-size:16px}.preview-dialog-heading button{padding:8px 10px;font-size:11px}.preview-dialog-body{max-height:calc(92dvh - 70px)}.preview-dialog-body>iframe{height:calc(92dvh - 70px)}
 .new-concepts{padding:49px 0 45px}.new-concepts .section-heading{display:block;margin-bottom:26px}.new-concepts .section-heading>p{margin-top:21px;font-size:15px;max-width:47ch}.new-concepts .section-heading h2{font-size:33px}.new-concepts .section-heading h2 br{display:none}.new-concepts .project-kind{font-size:11px;margin-bottom:13px}.new-concept-grid{grid-template-columns:1fr;gap:36px}.new-concept-preview{aspect-ratio:1.45}.new-concept-caption{padding-top:10px}.new-concept-caption>span{font-size:12px}.studio-page .new-concept-card h3{font-size:27px;margin-top:5px}.new-concept-card>p:not(.concept-interactions){font-size:15px;max-width:47ch;margin-top:12px}.concept-interactions{font-size:11px;margin-top:13px}.new-concept-card>.text-link{font-size:13px;margin-top:6px}.concept-truth-note{font-size:11px;margin-top:27px;line-height:1.8}.redesign-section{padding:49px 0}.redesign-layout{grid-template-columns:1fr;gap:32px}.studio-page .redesign-layout h2{font-size:34px}.redesign-layout h2 br{display:none}.redesign-layout>div>p:not(.project-kind){font-size:15px;margin-top:20px}.redesign-layout .button{margin-top:22px}.redesign-tabs{gap:16px}.redesign-tabs button{font-size:11px;padding-bottom:13px}.redesign-priorities [role=tabpanel]{padding-top:24px;min-height:235px}.studio-page .redesign-priorities h3{font-size:26px}.redesign-priorities [role=tabpanel]>p{font-size:14px;margin-top:16px}.redesign-priorities .text-link{margin-top:6px}.studio-testimonials{padding:49px 0}.testimonial-list{grid-template-columns:1fr;gap:35px}.testimonial-list blockquote p{font-size:25px}.brief-progress{gap:18px;font-size:11px}.brief-stage legend{font-size:22px}.brief-step-actions{gap:9px;flex-wrap:wrap}.studio-page .legal-sidebar{max-height:none}}
@media(max-width:380px){.gallery-actions{gap:4px 9px}.gallery-enlarge{font-size:10px}.device-selector{gap:8px}.device-selector button .ui-icon{width:16px;height:16px}.studio-page .studio-hero h1{font-size:36px}.brief-progress{gap:12px}.brief-progress span:before{margin-right:5px}.redesign-tabs{gap:12px}}
@media(prefers-reduced-motion:reduce){.studio-page *, .studio-page *:before,.studio-page *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Additional portfolio thumbnails are actual captures of the independent sites. */
.concept-visual:has(.additional-concept-capture){padding:0;display:block;overflow:hidden;background:#e8f0f5}.additional-concept-capture{display:block;width:100%;height:auto;aspect-ratio:1440/1024;object-fit:cover;object-position:top}