/* Approved primary palette: Ink + Amber. */
.website.brand-theme{--hybrid-ink:#111e23;--hybrid-paper:#f6f3eb;--hybrid-coral:#efab5b;--hybrid-red:#efab5b;--hybrid-action:#efab5b;--studio-panel:#253038;--studio-accent:#efab5b;--studio-soft:#f7d3a7;--studio-focus:#7b4228;--studio-tint:#ebdfd3;}
.website.brand-theme{background:var(--hybrid-paper);color:var(--hybrid-ink)}
.brand-theme .capabilities,.brand-theme .shelf-section,.brand-theme .care-strip{background:var(--studio-panel);color:var(--hybrid-paper)}
.brand-theme .opening-copy p,.brand-theme .service-lines p,.brand-theme .services-intro,.brand-theme .drawing-caption{color:var(--hybrid-paper)}
.brand-theme .service-lines ul{color:var(--hybrid-paper)}
.website.brand-theme .service-lines article h3{color:var(--studio-soft)}
.brand-theme .shelf-item figcaption{color:var(--hybrid-ink);background:var(--hybrid-paper)}
.website.brand-theme .opening .arrow-link,.website.brand-theme .letter .action{background:var(--studio-accent);color:var(--hybrid-ink)}
.brand-theme .orbit-panel{--ring-one:var(--studio-accent);--ring-two:var(--studio-soft);--ring-three:var(--hybrid-paper)}
.brand-theme .orbit-panel[data-palette='1']{--ring-one:var(--studio-soft);--ring-two:var(--hybrid-paper);--ring-three:var(--studio-accent)}
.brand-theme .orbit-panel[data-palette='2']{--ring-one:var(--hybrid-paper);--ring-two:var(--studio-accent);--ring-three:var(--studio-soft)}
.brand-theme .orbit-controls button{color:var(--hybrid-paper);border-color:var(--hybrid-paper)}
.brand-theme .orbit-controls button:hover{background:var(--studio-panel)}
.website.brand-theme .details-heading h2 em,.brand-theme .collaboration h2 em,.brand-theme .detail-symbol{color:var(--studio-focus)}
.brand-theme .device-symbol,.brand-theme .device-symbol:after{border-color:var(--studio-focus)}
.brand-theme .launch-checks,.brand-theme .steps article span{background:var(--studio-tint);color:var(--hybrid-ink)}
.brand-theme .questions h2{color:var(--hybrid-ink)}
.brand-theme .letter{color:var(--hybrid-paper)}
.brand-theme .letter input,.brand-theme .letter textarea{border-color:var(--hybrid-paper);caret-color:var(--studio-accent)}
.brand-theme .letter textarea::placeholder{color:var(--studio-soft)}
.website.brand-theme .letter .brief-form input:focus,.website.brand-theme .letter .brief-form textarea:focus{outline:none;border-bottom-color:var(--studio-accent);box-shadow:0 1px 0 var(--studio-accent);caret-color:var(--studio-accent)}
.brand-theme :focus-visible,.website.brand-theme .masthead :focus-visible{outline-color:var(--studio-focus)}
.brand-theme .opening :focus-visible,.brand-theme .letter :focus-visible{outline-color:var(--studio-accent)}
.brand-theme .shelf-section :focus-visible,.brand-theme .capabilities :focus-visible,.brand-theme .care-strip :focus-visible{outline-color:var(--studio-accent)}
.brand-theme ::selection{background:var(--studio-accent);color:var(--hybrid-ink)}
.brand-theme .service-drawing{color:var(--studio-soft)}
.brand-theme .drawing-frame{fill:var(--studio-panel)}
.brand-theme .drawing-tile{fill:var(--studio-accent);stroke:var(--studio-accent)}
.brand-theme .drawing-cta,.brand-theme .drawing-growth{stroke:var(--studio-soft)}
.brand-theme.scroll-story .service-lines article:after{background:var(--studio-soft)}
.brand-theme.scroll-story .steps:after,.brand-theme.scroll-story .steps article.step-reached span{background:var(--studio-focus)}
.brand-theme.scroll-story .steps article.step-reached span{color:var(--hybrid-paper)}
.brand-theme .page-motion{background:var(--hybrid-ink);color:var(--hybrid-paper)}
.brand-theme .page-motion:focus-visible{outline-color:var(--studio-accent)}
.brand-theme{scrollbar-color:var(--studio-panel) var(--hybrid-paper)}
.brand-theme::-webkit-scrollbar-thumb{background:var(--studio-panel)}
.brand-theme::-webkit-scrollbar-track{background:var(--hybrid-paper)}
@media(max-width:650px){.website.brand-theme .menu-toggle{color:var(--hybrid-ink)}.website.brand-theme .masthead-top nav a:last-child{color:var(--studio-focus)}}

/* Warm orange makes the next step clear while the monochrome logo stays intact. */
.website.brand-theme .masthead{border-bottom:1px solid var(--studio-accent)}
.website.brand-theme .masthead-top nav a:last-child{background:var(--studio-accent);color:var(--hybrid-ink);border:0;padding:13px 18px;min-height:44px}
.website.brand-theme .masthead-top nav a:last-child:hover{background:var(--studio-soft);text-decoration:none}
.website.brand-theme .masthead-top nav a:not(:last-child):hover{color:var(--studio-focus)}
.brand-theme .letter h2 em,.brand-theme h1 em{color:var(--studio-accent)}
@media(max-width:650px){
.website.brand-theme .menu-toggle{background:var(--studio-tint);border-color:var(--studio-focus);color:var(--hybrid-ink)}
.website.brand-theme .masthead-top nav a:last-child{margin-top:8px;padding:13px 16px}
}

/* A real portrait makes the studio introduction personal. */
.website.brand-theme .about-studio{display:grid;grid-template-columns:1.05fr 1fr;gap:0;padding:0;overflow:hidden}
.about-copy{padding:clamp(32px,5vw,72px);align-self:center}
.website .about-copy h2{font-size:clamp(40px,4.5vw,62px);line-height:1.06;margin-bottom:28px}
.about-copy h2 em{font-family:Georgia,serif;font-weight:400;color:var(--studio-accent)}
.website .about-copy p{font-size:19px;line-height:1.65;max-width:36ch}
.about-photo{margin:0;min-width:0;aspect-ratio:4/5}
.about-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
@media(max-width:1000px) and (min-width:651px){.about-copy{padding:32px}.website .about-copy p{font-size:17px}}
@media(max-width:650px){.website.brand-theme .about-studio{grid-template-columns:1fr}.about-copy{padding:36px 26px 40px}.website .about-copy h2{font-size:42px;margin-bottom:22px}.website .about-copy p{font-size:17px}.about-photo{aspect-ratio:4/5}}
.about-circle{aspect-ratio:1/1.05;display:grid;place-items:center;padding:40px}
.about-circle img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:50% 55%;border-radius:50%;border:1px solid var(--studio-accent)}
@media(max-width:1000px) and (min-width:651px){.about-circle{padding:24px}}
@media(max-width:650px){.about-circle{aspect-ratio:1;padding:0 18px 32px}}

.about-copy p + p{margin-top:22px}
