/* One content frame for V4 navigation, heroes and sections. */
body:has(.nav-shell), body.v4-inner {
  --v4-frame-max:1920px;
  --v4-frame-width:90%;
}
body:has(.nav-shell) .wrap,
body:has(.nav-shell) .nav-shell,
body.v4-inner .wrap,
body.v4-inner .hero > .wrap,
body.v4-inner .v4-nav-shell {
  box-sizing:border-box;
  width:min(var(--v4-frame-width), var(--v4-frame-max));
  max-width:var(--v4-frame-max);
  margin-inline:auto;
  padding-inline:0;
}
/* Body copy stays readable while galleries can use the wider frame. */
@media(min-width:1800px) {
  body.v4-cinematic .hero-grid > div:first-child {max-width:1200px}
  body.v4-cinematic .hero :is(h1,.hero-headline) {max-width:1200px;font-size:clamp(84px,3.75vw,96px)!important}
  body.v4-cinematic .hero .mb-service-video {width:clamp(285px,15vw,384px)}
}
@media(max-width:760px) {
  body:has(.nav-shell), body.v4-inner {--v4-frame-width:88%}
}

/* Homepage: full-bleed bands, one inner frame, proportional wide-screen scale. */
body:has(.nav-shell) :is(.stats,#formats,#team) {
  width:100%;max-width:none;margin-inline:0;padding-inline:0;
}
body:has(.nav-shell) .stats {display:block}
body:has(.nav-shell) .stats-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
body:has(.nav-shell) :is(.section-head,.avatar-layout,.faq-layout,.contact-grid) {column-gap:clamp(32px,6vw,120px)}
@media(min-width:1800px) {
  body:has(.nav-shell) .section {padding-block:clamp(112px,5.8vw,148px)}
  body:has(.nav-shell) h2 {font-size:clamp(76px,3.75vw,96px)}
  body:has(.nav-shell) .stats {padding-block:clamp(70px,3.65vw,94px)}
  body:has(.nav-shell) .stats strong {font-size:clamp(64px,3.35vw,86px)}
  body:has(.nav-shell) .stats span {font-size:18px}
  body:has(.nav-shell) .intro {max-width:520px;font-size:clamp(18px,.85vw,22px)}
  body:has(.nav-shell) #formats .task-card {padding:clamp(30px,1.65vw,42px);min-height:clamp(294px,15vw,384px)}
  body:has(.nav-shell) #formats .task-card h3 {font-size:clamp(30px,1.5vw,38px);max-width:380px}
  body:has(.nav-shell) #formats .task-card p {font-size:18px;max-width:420px}
  body:has(.nav-shell) #formats .task-service {font-size:16px}
  body:has(.nav-shell) .featured-copy {padding:clamp(44px,2.4vw,62px)}
  body:has(.nav-shell) .featured-copy h3 {font-size:clamp(44px,2.2vw,56px)}
  body:has(.nav-shell) .featured-copy>p {font-size:clamp(21px,1vw,26px)}
  body:has(.nav-shell) .featured-image {min-height:clamp(435px,23vw,590px)}
  body:has(.nav-shell) .work-caption h3 {font-size:28px}
  body:has(.nav-shell) .team-grid h3 {font-size:26px}
  body:has(.nav-shell) .team-grid p {font-size:16px}
  body:has(.nav-shell) .process h3 {font-size:28px}
  body:has(.nav-shell) .process p {font-size:18px}
}
@media(max-width:760px) {
  body:has(.nav-shell) .stats-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
}

/* Avatar feature: one compact composition rather than opposite frame edges. */
body:has(.nav-shell) #ai-avatar {padding-block:90px}
body:has(.nav-shell) #ai-avatar .avatar-layout {
  max-width:1440px;grid-template-columns:minmax(0,1fr) 400px;
  gap:90px;align-items:center;
}
body:has(.nav-shell) #ai-avatar .avatar-copy {min-width:0}
body:has(.nav-shell) #ai-avatar h2 {
  font-size:clamp(48px,3.5vw,64px);max-width:none;line-height:1.08;
  text-wrap:initial;letter-spacing:-.045em;
}
body:has(.nav-shell) #ai-avatar .avatar-lead {max-width:640px;font-size:18px;margin-top:24px}
body:has(.nav-shell) #ai-avatar .avatar-steps {max-width:640px;margin:26px 0}
body:has(.nav-shell) #ai-avatar .avatar-steps li {padding:15px 0;gap:18px}
body:has(.nav-shell) #ai-avatar .avatar-steps p {margin-top:5px}
body:has(.nav-shell) #ai-avatar .avatar-rights {max-width:620px;margin-top:18px}
body:has(.nav-shell) #ai-avatar .avatar-demo {max-width:400px;justify-self:start}
@media(max-width:1200px) and (min-width:901px) {
  body:has(.nav-shell) #ai-avatar .avatar-layout {grid-template-columns:minmax(0,1fr) 340px;gap:55px}
  body:has(.nav-shell) #ai-avatar h2 {font-size:48px}
}
@media(max-width:900px) {
  body:has(.nav-shell) #ai-avatar {padding-block:64px}
  body:has(.nav-shell) #ai-avatar .avatar-layout {grid-template-columns:minmax(0,1fr);gap:36px;max-width:680px}
  body:has(.nav-shell) #ai-avatar .avatar-demo {justify-self:center;max-width:360px}
  body:has(.nav-shell) #ai-avatar h2 {font-size:clamp(38px,6vw,52px)}
}

/* Persistent navigation on the homepage and V4 inner pages. */
body:has(.nav-shell) .top{position:fixed;top:0;left:0;right:0;z-index:120;background:rgba(11,14,16,.95);backdrop-filter:blur(16px);border-bottom:1px solid #303638}
body:has(.nav-shell) .nav-shell{height:84px}
body.v4-inner .v4-site-nav{position:sticky;top:0;z-index:120;background:rgba(11,14,16,.97);backdrop-filter:blur(16px);border-bottom:1px solid #303638}
body.v4-inner .v4-nav-shell{min-height:84px}
html:has(.nav-shell),html:has(.v4-site-nav){scroll-padding-top:105px}
body:has(.nav-shell) .mb-service-panel,body.v4-inner .mb-service-panel{top:84px;max-height:calc(100dvh - 110px);overflow:auto}
@media(max-width:1250px){
 body:has(.nav-shell) .nav-shell{display:flex;justify-content:space-between;height:76px}
 body:has(.nav-shell) :is(.desktop-nav,.nav-right){display:none}
 body:has(.nav-shell) .menu-toggle{width:44px;height:44px;display:flex;justify-content:center;flex-direction:column;gap:7px;padding:8px}
 body:has(.nav-shell) .menu-toggle span{height:1px;width:25px;background:#f5f6f3}
 body:has(.nav-shell) #mobile-nav{position:absolute;left:0;right:0;top:76px;background:#151b19;padding:20px 6%;border-bottom:1px solid #303638;max-height:calc(100dvh - 76px);overflow:auto}
 body:has(.nav-shell) #mobile-nav a{display:block;padding:13px 0;font-size:20px}
 body:has(.nav-shell) #mobile-nav .mb-service-panel{position:static;width:100%;margin:12px 0;padding:22px;max-height:none}
 body:has(.nav-shell) #mobile-nav .mb-service-columns{grid-template-columns:1fr}
}
@media(max-width:1100px){body.v4-inner .v4-nav-links{top:84px}}
@media(max-width:760px){
 body.v4-inner .v4-nav-shell{min-height:76px}
 body.v4-inner .v4-nav-links{top:76px;max-height:calc(100dvh - 76px)}
 html:has(.nav-shell),html:has(.v4-site-nav){scroll-padding-top:94px}
}
/* Contact: keep the project form and the studio contact in one bounded grid. */
body:has(.nav-shell) #contact {max-width:var(--v4-frame-max);padding-block:90px}
body:has(.nav-shell) #contact .section-head {display:block;margin-bottom:42px}
body:has(.nav-shell) #contact h2 {font-size:clamp(44px,3.5vw,64px);line-height:1.08;max-width:900px}
body:has(.nav-shell) #contact .contact-grid {grid-template-columns:minmax(0,1fr) clamp(360px,20vw,420px);gap:clamp(48px,4vw,80px);align-items:start}
body:has(.nav-shell) #contact #project-form {min-width:0}
body:has(.nav-shell) #contact .contact-person {max-width:none;justify-self:stretch;border:1px solid var(--line);border-radius:24px;padding:30px;background:#141a1b}
body:has(.nav-shell) #contact .contact-intro {font-size:17px;line-height:1.6;margin:0 0 28px;padding-bottom:26px;border-bottom:1px solid var(--line)}
body:has(.nav-shell) #contact .contact-person h3 {font-size:26px;line-height:1.2;max-width:270px}
body:has(.nav-shell) #contact .contact-person a {margin-top:22px}
@media(max-width:1100px) and (min-width:901px) {
 body:has(.nav-shell) #contact .contact-grid {grid-template-columns:minmax(0,1fr) 300px;gap:32px}
 body:has(.nav-shell) #contact .contact-person {padding:24px}
}
@media(max-width:900px) {
 body:has(.nav-shell) #contact {max-width:680px;padding-block:64px}
 body:has(.nav-shell) #contact .contact-grid {grid-template-columns:minmax(0,1fr);gap:32px}
 body:has(.nav-shell) #contact h2 {font-size:clamp(36px,6vw,52px)}
 body:has(.nav-shell) #contact .contact-person {padding:26px}
 body:has(.nav-shell) #contact .section-head {margin-bottom:32px}
}
body:has(.nav-shell) #project-form .consent-check {align-items:center}
body:has(.nav-shell) #project-form .consent-check input {margin:0;align-self:center}
.site-ai-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.site-ai-head{margin-bottom:36px}.site-ai-head h2{font-size:clamp(32px,4vw,60px);margin-top:20px}.site-ai-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.site-ai-grid article{padding:32px;background:#18211d;border:1px solid #354039;border-radius:22px}.site-ai-grid h3{font-size:28px;margin:0 0 20px}.site-ai-grid p{color:#b8c3bd;font-size:17px;line-height:1.65;margin-bottom:26px;max-width:55ch}.site-ai-niches{margin-top:24px}.site-ai-niches a{color:#c6ff31;text-decoration:underline;text-underline-offset:4px}@media(max-width:700px){.site-ai-grid{grid-template-columns:1fr}.site-ai-actions .btn{width:100%}.site-ai-grid article{padding:26px}}

/* Logo first, navigation beside it, a quiet outlined quiz action. */
@media(min-width:1251px){
 body:has(.nav-shell) .nav-shell{grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(24px,2.5vw,48px)}
 body:has(.nav-shell) .desktop-nav{align-items:center;gap:clamp(14px,1.2vw,24px);white-space:nowrap}
}
@media(min-width:1101px){
 body.v4-inner .v4-nav-shell{grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(24px,2.5vw,48px)}
 body.v4-inner .v4-nav-links{gap:clamp(14px,1.2vw,24px)}
}
body .desktop-nav > a.nav-format-button,
body #mobile-nav > a.nav-format-button,
body .v4-nav-links > a.nav-format-button{
 display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
 min-height:40px;padding:9px 16px;border:1px solid #728343;border-radius:99px;
 background:#c6ff310a;color:#d8edaa;font-size:14px;line-height:1.4;
 transition:background .15s,border-color .15s;
}
body .desktop-nav > a.nav-format-button:hover,
body #mobile-nav > a.nav-format-button:hover,
body .v4-nav-links > a.nav-format-button:hover{background:#c6ff3120;border-color:#c6ff31;color:#f5f6f3}

@media(min-width:1251px) and (max-width:1450px){
 body:has(.nav-shell) .nav-shell{gap:22px}
 body:has(.nav-shell) .desktop-nav{gap:16px}
 body:has(.nav-shell) .nav-right{gap:16px}
}
/* The quiz is the primary header action. Keep its mobile entry in the menu. */
body .desktop-nav > a.nav-format-button,
body .v4-nav-links > a.v4-mobile-extra.nav-format-button{display:none}
@media(max-width:600px){
 body .v4-nav-links > a.v4-mobile-extra.nav-format-button{display:inline-flex;background:#c6ff31;color:#111806;border-color:#c6ff31}
}
@media(max-width:1250px){body:has(.nav-shell) #mobile-nav > a.nav-format-button{background:#c6ff31;color:#111806;border-color:#c6ff31}}