/* Studio refresh: shared themes, fluid hero and accessible project browsing. */
:root {
  color-scheme: dark;
  --ink:#f6f2fa; --ink-soft:#ddd3e5; --muted:#bcb0c7;
  --purple:#c39be2; --purple-deep:#d4b3ec; --purple-dark:#211928;
  --lilac-soft:#33243e; --surface:#17131d; --surface-soft:#1d1724;
  --surface-warm:#1a1520; --card:#241c2c;
  --border:rgba(215,190,237,.16); --border-strong:rgba(215,190,237,.4);
  --header-bg:rgba(23,19,29,.96); --hero-bg:linear-gradient(125deg,#30213e,#201729 60%,#34233f);
}
:root[data-theme="light"] {
  color-scheme:light;
  --ink:#2b1d35; --ink-soft:#493953; --muted:#675771;
  --purple:#784599; --purple-deep:#61347d; --purple-dark:#eee5f4;
  --lilac-soft:#ede0f6; --surface:#fff; --surface-soft:#f4eef8;
  --surface-warm:#faf8fc; --card:#fff;
  --border:rgba(80,40,105,.16); --border-strong:rgba(100,55,130,.4);
  --header-bg:rgba(250,248,252,.97); --hero-bg:linear-gradient(125deg,#f8f2fc,#e6d4f2 65%,#d1b5e4);
}
body { min-width:0; overflow-x:clip; }
.l-header,.l-header.is-scrolled { background:var(--header-bg); border-color:var(--border); }
.nav { gap:clamp(.5rem,1.5vw,1rem); }
.brand-lockup { gap:.6rem; flex-shrink:0; }
.nav_icon { width:46px; height:52px; }
.brand_name { display:inline-grid; grid-template-columns:max-content; color:var(--ink); font-weight:800; font-size:clamp(1rem,1.6vw,1.35rem); line-height:1.15; letter-spacing:-.035em; }
.brand_primary { display:block; white-space:nowrap; }
.brand_tagline { display:flex; justify-content:space-between; align-items:center; width:0; min-width:100%; margin-top:.28em; font-size:.66em; font-weight:300; line-height:1.1; letter-spacing:0; white-space:nowrap; }
.brand_tagline > span { flex:0 0 auto; }
.brand_word_space { width:.35em; }
.nav_controls { display:flex; gap:.5rem; align-items:center; }
.theme_toggle,.nav_toggle,.work_controls button { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; min-width:44px; min-height:44px; border:1px solid var(--border); border-radius:50px; background:var(--card); color:var(--ink); cursor:pointer; }
.theme_toggle { gap:.45rem; padding:.5rem .8rem; font-size:.875rem; }
.theme_symbol { font-size:1.3rem; line-height:1; }
.nav_toggle { display:none; }
.menu_symbol { font-size:1.5rem; }
.nav_link { color:var(--ink-soft); }
.nav_link:hover,.nav_link.active { color:var(--ink); background:var(--lilac-soft); }
.nav_link_cta,.nav_link_cta:hover { color:var(--surface); background:var(--ink); border-color:var(--border); }
:focus-visible { outline:3px solid var(--purple); outline-offset:4px; }
.home { overflow:visible; background:var(--hero-bg); }
.home_container { min-height:calc(100svh - var(--header-height)); padding-block:clamp(2rem,5svh,4rem); grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(1.5rem,4vw,4rem); }
.home_title { font-size:clamp(2.5rem,5.2vw,4.8rem); line-height:1.08; letter-spacing:-.055em; overflow-wrap:normal; color:var(--ink); }
.home_title span { color:var(--purple); }
.hero_eyebrow,.home_description { color:var(--ink-soft); }
.hero_visual { min-height:0; }
.hero_orbit { width:min(100%,380px,52svh); }
.hero_chip { background:var(--card); color:var(--ink); border-color:var(--border); font-size:.875rem; }
.hero_chip_two { right:0; }
.home_button { background:var(--ink); color:var(--surface); }
.home_button_secondary { background:transparent; color:var(--ink); border-color:var(--border-strong); }
.home_button_secondary:hover { background:var(--lilac-soft); }
.hero_proof span { background:var(--card); color:var(--ink-soft); border-color:var(--border); font-size:.875rem; }
.hero_proof i { color:var(--purple); }
.about .section_intro { text-align:center; margin-bottom:2rem; }
.about_container { display:block; max-width:1000px; }
.about_content { padding:0; border:0; background:transparent; box-shadow:none; text-align:center; }
.studio_badge { display:inline-block; padding:.5rem 1rem; margin-bottom:1.5rem; border:1px solid var(--border); border-radius:100px; color:var(--purple); font-size:.875rem; }
.about_subtitle { max-width:800px; margin-inline:auto; font-size:clamp(1.8rem,3.8vw,3.2rem); }
.about_text { max-width:740px; margin-inline:auto; }
.about_points { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-block:2.5rem; }
.about_points div { padding:1.5rem; background:var(--card); }
.about_points div::before { display:none; }
.about_points div:hover { transform:translateY(-3px); background:var(--card); }
.about_points strong { font-size:1rem; }
.about_points span { font-size:1rem; }
.about_social { justify-content:center; }
.about_social-icon,.package_card,.work_card,.outline_button,.pricing_note p { background:var(--card); }
.portfolio { background:var(--surface); }
.package_card > p:not(.package_price),.package_card li,.work_content p,.process_step p { font-size:1rem; }
.section_kicker,.hero_eyebrow,.package_label,.work_content > span { font-size:.875rem; }
.popular_badge { background:var(--lilac-soft); color:var(--ink); font-size:.75rem; }
.work_toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.work_toolbar p { margin:0; color:var(--muted); font-size:.875rem; }
.work_controls { display:flex; align-items:center; gap:.7rem; }
.work_controls button { font-size:1.5rem; }
.work_controls button:disabled { opacity:.35; cursor:default; }
#work-status { min-width:4.5rem; text-align:center; font-size:.875rem; color:var(--muted); }
.work_grid { display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:calc((100% - 2.5rem)/3); overflow-x:auto; gap:1.25rem; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:var(--purple) var(--surface-soft); padding-block:.4rem 1rem; overscroll-behavior-x:contain; }
.work_card { scroll-snap-align:start; width:auto; }
.work_card img { object-fit:cover; object-position:center; }
.portfolio_actions { justify-content:center; }
.process,.contact { background:var(--surface-soft); color:var(--ink); }
.process .section-title,.process_step h3 { color:var(--ink); }
.process .section_kicker { color:var(--purple); }
.process .section_intro p,.process_step p { color:var(--muted); }
.process_step { background:var(--card); border-color:var(--border); }
.process_step > span { color:var(--surface); background:var(--ink); }
.contact_inner { background:var(--card); color:var(--ink); border-color:var(--border); }
.contact .section_kicker { color:var(--purple); }
.contact_copy p,.contact_actions > span { color:var(--muted); }
.contact_primary { background:var(--ink); color:var(--surface); }
.contact_primary:hover { background:var(--purple); color:var(--surface); }
.contact_secondary { color:var(--ink); border-color:var(--border-strong); }
.footer { background:var(--surface); color:var(--ink); }
.footer_title { color:var(--ink); }
.footer_text,.footer_link,.footer_bottom { color:var(--muted); }
.footer_link:hover { color:var(--purple); }
.footer_social { color:var(--ink); border-color:var(--border); background:var(--card); }
.footer_bottom { border-color:var(--border); }
@media (max-width:1080px) {
 .nav_toggle { display:inline-flex; }
 .nav_menu { background:var(--card); border-color:var(--border); }
 .nav_link_cta { color:var(--surface); }
 .work_grid { grid-auto-columns:calc((100% - 1.25rem)/2); }
}
@media (max-width:767px) {
 .home_container { grid-template-columns:1fr; min-height:calc(100svh - var(--header-height)); padding-block:clamp(1.5rem,4svh,3rem); gap:1.5rem; }
 .home_title { font-size:clamp(2.15rem,8.5vw,3.8rem); margin-bottom:1rem; }
 .home_description { margin-bottom:1.25rem; line-height:1.6; }
 .hero_eyebrow { margin-bottom:.8rem; letter-spacing:.1em; }
 .hero_actions { flex-direction:row; gap:.6rem; margin-bottom:1rem; }
 .home_button { width:auto; flex:1 1 130px; padding:.75rem 1rem; }
 .hero_proof { display:flex; gap:.45rem; }
 .hero_proof span { padding:.35rem .55rem; }
 .hero_visual { display:none; }
 .about_points { grid-template-columns:1fr; }
 .work_grid { grid-auto-columns:90%; }
 .theme_label { display:none; }
 .theme_toggle { padding:.5rem; }
 .brand_name { font-size:1.05rem; }
 .nav_icon { width:36px; height:44px; }
 .footer_bottom { text-align:center; }
}
@media (max-height:620px) and (min-width:768px) {
 .home_container { padding-block:1.5rem; }
 .home_title { font-size:clamp(2.2rem,4.6vw,3.7rem); margin-bottom:1rem; }
 .hero_orbit { width:min(100%,280px); }
 .home_description { line-height:1.55; margin-bottom:1rem; }
 .hero_eyebrow { margin-bottom:.7rem; }
}
@media (prefers-reduced-motion:reduce) { .hero_visual img { animation:none; } }

/* Full-screen navigation on tablets and phones. */
.menu_caption,.menu_footer { display:none; }
@media (max-width:1080px) {
 .l-header { backdrop-filter:none; -webkit-backdrop-filter:none; }
 .nav_controls,.brand-lockup { position:relative; z-index:1003; }
 .nav_scrim { display:none; }
 .nav_menu {
  position:fixed; inset:0; width:100%; height:100vh; height:100dvh;
  max-height:none; padding:calc(var(--header-height) + clamp(1.5rem,4vh,3rem)) var(--gutter) max(1.5rem,env(safe-area-inset-bottom));
  border:0; border-radius:0; background:var(--surface-warm); box-shadow:none;
  display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden; transform:translateY(-1.5rem);
  transition:opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1),visibility .5s;
 }
 .nav_menu.show { opacity:1; visibility:visible; transform:translateY(0); }
 .menu_caption,.menu_footer,.nav_list { width:min(760px,100%); margin-inline:auto; }
 .menu_caption { display:block; color:var(--muted); font-size:.875rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1rem; }
 .nav_list { display:flex; flex-direction:column; align-items:stretch; gap:0; counter-reset:menu; }
 .nav_item { counter-increment:menu; opacity:0; transform:translateY(18px); transition:opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1); }
 .nav_menu.show .nav_item { opacity:1; transform:none; transition-delay:calc(var(--menu-order,0)*45ms + 70ms); }
 .nav_item:nth-child(2) { --menu-order:1; } .nav_item:nth-child(3) { --menu-order:2; }
 .nav_item:nth-child(4) { --menu-order:3; } .nav_item:nth-child(5) { --menu-order:4; } .nav_item:nth-child(6) { --menu-order:5; }
 .nav_link,.nav_link_cta { display:flex; justify-content:flex-start; gap:1rem; border:0; border-bottom:1px solid var(--border); border-radius:0; padding:clamp(.6rem,1.5vh,1.1rem) .25rem; margin:0; font-family:Manrope,sans-serif; font-size:clamp(1.5rem,4.5vw,2.8rem); line-height:1.2; letter-spacing:-.035em; background:transparent; color:var(--ink); }
 .nav_link::before { content:counter(menu,decimal-leading-zero); font-family:"DM Sans",sans-serif; font-size:.75rem; color:var(--muted); letter-spacing:0; }
 .nav_link::after { content:'↗'; margin-left:auto; color:var(--purple); font-size:.7em; transition:transform .25s; }
 .nav_link:hover,.nav_link.active,.nav_link_cta:hover { color:var(--purple); background:transparent; transform:none; }
 .nav_link:hover::after { transform:translate(3px,-3px); }
 .menu_footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding-top:2rem; margin-top:auto; color:var(--muted); font-size:.875rem; }
 .menu_footer a { color:var(--purple); align-self:end; }
 body.menu-open .nav_toggle { color:var(--surface); background:var(--ink); transform:rotate(90deg); }
 .nav_toggle { transition:transform .35s,background .25s; }
}
@media (prefers-reduced-motion:reduce) {
 .nav_menu,.nav_item,.nav_toggle { transition:none !important; }
}

/* Magic UI / COBE globe, adapted to the existing static site. */
.hero_visual { display:flex; flex-direction:column; align-items:center; gap:.75rem; }
.globe_orbit { border:0; width:min(100%,420px); }
.globe_orbit::before,.globe_orbit::after { display:none; }
#hero-globe { display:block; width:100%; height:100%; aspect-ratio:1; cursor:grab; touch-action:pan-y; border-radius:50%; }
#hero-globe.is-dragging { cursor:grabbing; }
.globe_orbit .hero_chip { pointer-events:none; font-size:.8rem; }
.globe_hint { color:var(--muted); font-size:.875rem; }
.globe_fallback { text-align:center; color:var(--purple); font-size:1.5rem; }
@media (max-width:767px) {
 .hero_visual { display:flex; }
 .globe_orbit { width:min(70vw,260px); }
 .globe_orbit .hero_chip { display:none; }
}