/*
 * Lower pages: the page hero, the game / web pages, works, contact and plain pages.
 * Builds on home-studio.css and home-content.css so every page shares the top page's look.
 */

/* Button palette: web / general contact = green, game = blue. Do not use yellow CTAs. */
/* Shared buttons: the same rounded, lit buttons as the top page, also outside sections. */
body.studio-site .button { gap:10px; border-radius:999px; font-family:var(--home-rounded); font-weight:800; }
body.studio-site .button__arrow { margin-right:-4px; font-size:1.25em; font-weight:400; line-height:1; }
body.studio-site .button--outline { color:var(--home-ink); background:linear-gradient(180deg,#fff 7%,#fffaf0 54%,#f5e7ce); border:0; box-shadow:var(--home-button-depth); }
body.studio-site .button--outline:hover { color:var(--home-ink); background:linear-gradient(180deg,#fff,#fff7df 54%,#f6e1b8); }
body.studio-site .button--blue,body.studio-site .site-section .button--blue { color:#fff; background:linear-gradient(180deg,#41bbff 0%,#0877c0 24%,#066cad 74%,#07588f 100%); border:0; box-shadow:inset 0 3px 6px #ffffff66,inset 0 -5px 8px #005d7b26,0 5px 10px #246b8e1a; }
body.studio-site .button--blue:hover { color:#fff; background:linear-gradient(180deg,#5bc5ff 0%,#0b79c2 24%,#0772b7 74%,#076399 100%); }
body.studio-site .button--green,body.studio-site .site-section .button--green { color:#fff; background:linear-gradient(180deg,#35ca95 0%,#12a86e 45%,#0c945f 100%); border:0; box-shadow:inset 0 3px 6px #ffffff66,inset 0 -5px 8px #005d7b26,0 5px 10px #246b8e1a; }
body.studio-site .button--green:hover { color:#fff; background:linear-gradient(180deg,#45d4a0 0%,#1bb378 45%,#0f9c64 100%); }
body.studio-site .site-section__more { margin-top:38px; }
body.studio-site .site-section__more--center { text-align:center; }
body.studio-site .sp-only { display:none; }

/* Page hero: white, with the top page's soft circles and a wave into the first section. */
body.studio-site .page-hero { --hero-dot:#e8f9ff; --hero-accent:#168ec6; position:relative; isolation:isolate; overflow:hidden; padding:calc(var(--site-header-height,82px) + 34px) 0 calc(var(--site-wave-height) + 16px); color:var(--studio-ink); background:radial-gradient(circle 110px at calc(100% + 20px) 76%,#e4f7ec 99.5%,transparent 100%),#fff; border:0; text-align:left; }
body.studio-site .page-hero--mint { --hero-dot:#e3f7ec; --hero-accent:#13734f; }
body.studio-site .page-hero--cream { --hero-dot:#fff1d2; --hero-accent:#b0632a; }
body.studio-site .page-hero::before { content:""; position:absolute; z-index:-1; top:calc(var(--site-header-height,82px) + 30px); left:-120px; width:220px; aspect-ratio:1; border-radius:50%; background:var(--hero-dot); }
body.studio-site .page-hero::after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:var(--site-wave-height); background:var(--after-hero,#fffcef); -webkit-mask:var(--site-wave-mask) center / 100% 100% no-repeat; mask:var(--site-wave-mask) center / 100% 100% no-repeat; transform:scaleX(-1); pointer-events:none; }
body.studio-site .page-hero .site-container { max-width:1280px; padding-inline:clamp(24px,4.2vw,72px); }
body.studio-site .page-hero__inner { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:32px 56px; min-height:0; }
body.studio-site .page-hero__crumb { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-bottom:18px; color:#4d7078; font-size:13px; font-weight:700; line-height:1.6; }
body.studio-site .page-hero__crumb-link { color:inherit; }
body.studio-site .page-hero__crumb-link:hover { color:var(--studio-ink); text-decoration:underline; text-underline-offset:3px; }
body.studio-site .page-hero__crumb-separator { color:#a8c2c6; }
body.studio-site .page-hero__crumb-current { color:var(--studio-ink); }
body.studio-site .page-hero__label { margin-bottom:10px; color:var(--studio-green); font-size:13px; font-weight:800; line-height:1.5; letter-spacing:.18em; }
body.studio-site .page-hero__badge { display:inline-block; margin:0 0 14px; padding:5px 15px; color:#7a5200; background:#fff1b8; border-radius:999px; font-size:13px; font-weight:800; }
body.studio-site .page-hero__title { color:var(--studio-ink); font-size:clamp(36px,4.4vw,60px); font-weight:900; line-height:1.3; letter-spacing:-.03em; text-wrap:balance; }
body.studio-site .page-hero__title > span { padding-inline:2px; background:linear-gradient(transparent 70%,var(--studio-yellow) 70%,var(--studio-yellow) 88%,transparent 88%); -webkit-box-decoration-break:clone; box-decoration-break:clone; }
body.studio-site .page-hero__title-phrase { display:inline-block; max-width:100%; }
body.studio-site .page-hero__title-phrase:only-child { display:inline; overflow-wrap:anywhere; }
body.studio-site .page-hero__sub { max-width:720px; margin-top:16px; color:#45636a; font-size:17px; font-weight:700; line-height:1.85; }
body.studio-site .page-hero__line { display:block; }
body.studio-site .page-hero__sub > .page-hero__line--tagline { display:block; }
body.studio-site .page-hero__visual { position:relative; display:grid; place-items:center; width:clamp(180px,18vw,240px); aspect-ratio:1; }
body.studio-site .page-hero__visual::before { content:""; position:absolute; z-index:-1; inset:4%; border-radius:50%; background:var(--hero-dot); }
body.studio-site .page-hero__art { width:84%; height:auto; }
body.studio-site .page-hero__visual--controller,
body.studio-site .page-hero__visual--browser { width:clamp(200px,20vw,260px); aspect-ratio:1; }
body.studio-site .page-hero__visual--controller::before,
body.studio-site .page-hero__visual--browser::before { inset:6% 8%; }
body.studio-site .page-hero__visual--controller .page-hero__art,
body.studio-site .page-hero__visual--browser .page-hero__art { width:100%; height:100%; object-fit:contain; object-position:center; }

/* Final inquiry actions are generous targets on every page. */
body.studio-site .contact-cta .button--contact-cta { min-width:360px; max-width:100%; min-height:72px; padding:20px 44px; font-size:20px; white-space:normal; text-align:center; }

/* Each page tells the hero which color its first section starts with. */
body.studio-site .studio-page--game,body.studio-site .studio-page--web,body.studio-site .studio-page--service,body.studio-site .studio-page--contact,body.studio-site .studio-page--default,body.studio-site .studio-page--work-detail,body.studio-site .studio-page--not-found { --after-hero:var(--home-sky); }
body.studio-site .studio-page--member { --after-hero:var(--home-field-mint); }
body.studio-site .studio-page--works { --after-hero:var(--home-paper); }

/* Article lists and detail pages use the same cards and spacing as the site. */
body.studio-site .studio-news-archive { background:var(--home-sky); }
body.studio-site .studio-news-archive .studio-news__grid { gap:32px 24px; }
body.studio-site .studio-news-archive .studio-news__card { height:100%; padding:12px 12px 18px; background:#fff; border-radius:24px; }
body.studio-site .studio-news-archive .studio-news__item > article { height:100%; }
body.studio-site .studio-news-archive .studio-news__caption { padding-inline:4px; }
body.studio-site .pagination { margin-top:40px; }
body.studio-site .pagination .nav-links { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:10px; }
body.studio-site .pagination .page-numbers { display:grid; place-items:center; min-width:46px; min-height:46px; padding:8px 14px; color:var(--studio-ink); background:#fff; border-radius:50px; font-weight:700; }
body.studio-site .pagination .current { color:#fff; background:#007d46; }
body.studio-site .pagination a:hover { background:#d7f2e6; }
body.studio-site .studio-page--article { padding-block:calc(var(--site-header-height,82px) + 40px) 64px; background:#fff; }
body.studio-site .studio-article-layout { max-width:880px; padding-inline:40px; }
body.studio-site .studio-article__crumb { gap:4px 8px; margin-bottom:36px; font-size:12px; font-weight:400; }
body.studio-site .studio-article__header { margin-bottom:28px; }
body.studio-site .studio-article__title { margin:0; color:var(--studio-ink); font-family:var(--home-rounded); font-size:clamp(26px,3vw,36px); font-weight:700; line-height:1.55; letter-spacing:.01em; overflow-wrap:anywhere; }
body.studio-site .studio-article__meta { display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; margin-bottom:16px; color:#45636a; font-size:13px; }
body.studio-site .studio-article__meta a { padding:4px 12px; color:#007344; background:#e5f7ee; border-radius:50px; font-weight:700; }
body.studio-site .studio-article__image { margin:0 0 32px; }
body.studio-site .studio-article__image img { display:block; width:100%; height:auto; max-height:460px; object-fit:contain; border-radius:12px; }
body.studio-site .studio-article .entry-content { color:#374b46; font-family:var(--home-rounded); font-size:16px; font-weight:400; overflow-wrap:anywhere; line-height:2; }
body.studio-site .studio-article .studio-article__demo-note { padding:12px 16px; color:#52645c; background:#f3f7f5; border-radius:8px; font-size:13px; line-height:1.8; }
body.studio-site .studio-article .entry-content h2 { margin-top:40px; padding-bottom:10px; border-bottom:2px solid #d7eee3; color:var(--studio-ink); font-size:24px; font-weight:700; line-height:1.6; }
body.studio-site .studio-article .entry-content h3 { margin-top:28px; color:var(--studio-ink); font-size:20px; font-weight:700; line-height:1.6; }
body.studio-site .studio-article .entry-content :is(iframe,video) { max-width:100%; }
body.studio-site .studio-article__pages { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
body.studio-site .post-navigation { margin-top:40px; padding-top:28px; border-top:1px solid #dce8e3; }
body.studio-site .post-navigation .nav-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
body.studio-site .post-navigation a { display:block; padding:16px 20px; color:var(--studio-ink); background:#f3faf6; border-radius:12px; font-size:14px; font-weight:700; line-height:1.7; overflow-wrap:anywhere; }
body.studio-site .post-navigation .nav-next { grid-column:2; text-align:right; }
body.studio-site .studio-article__nav-label { display:block; margin-bottom:4px; color:#45636a; font-size:12px; font-weight:400; }
body.studio-site .studio-article__back { margin-top:28px; text-align:center; }
body.studio-site .studio-article__back .button { min-height:52px; max-width:100%; padding:14px 26px; font-size:15px; }
@media(max-width:760px) {
 body.studio-site .studio-page--article { padding-top:calc(var(--site-header-height,68px) + 30px); padding-bottom:44px; }
 body.studio-site .studio-article-layout { padding-inline:22px; }
 body.studio-site .studio-article__crumb { margin-bottom:26px; font-size:11px; }
 body.studio-site .studio-article__header { margin-bottom:22px; }
 body.studio-site .studio-article__meta { margin-bottom:12px; font-size:12px; }
 body.studio-site .studio-article__title { font-size:26px; line-height:1.55; }
 body.studio-site .studio-article .entry-content h2 { font-size:22px; margin-top:32px; }
 body.studio-site .studio-article .entry-content h3 { font-size:19px; }
 body.studio-site .studio-news-archive .studio-news__grid { gap:20px 12px; }
 body.studio-site .studio-news-archive .studio-news__card { padding:8px 8px 14px; border-radius:18px; }
 body.studio-site .studio-news-archive .studio-news__caption { padding-inline:0; }
 body.studio-site .studio-news-archive .studio-news__caption > span { display:none; }
 body.studio-site .post-navigation .nav-links { grid-template-columns:1fr; gap:12px; }
 body.studio-site .post-navigation .nav-next { grid-column:auto; }
}

/* Section colors on the lower pages. */
body.studio-site .studio-page .site-section .site-container { max-width:1280px; }
body.studio-site .studio-page > .page-hero + .site-section { padding-top:24px; }
body.studio-site .game-showcase,body.studio-site .studio-form-section,body.studio-site .studio-document,body.studio-site .work-detail { background:var(--home-sky); }
body.studio-site .game-list,body.studio-site .member-business { background:#fff; }
body.studio-site .web-works { background:#fff; }
body.studio-site .studio-page--web .features { background:var(--home-sky); }
body.studio-site .studio-page--service .plans { padding-top:clamp(48px,5.4vw,76px); }
body.studio-site .studio-page--member .profile { padding-top:clamp(40px,4.6vw,64px); }

/* Game page: the newest title. */
body.studio-site .game-feature { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); align-items:center; gap:clamp(28px,4vw,56px); max-width:1120px; margin-inline:auto; padding:clamp(20px,2.4vw,32px); background:#fff; border-radius:36px; }
body.studio-site .game-feature--pending { grid-template-columns:1fr; place-items:center; min-height:320px; text-align:center; }
body.studio-site .game-feature__status { margin:0; color:var(--home-muted); font-size:clamp(18px,2vw,22px); font-weight:700; line-height:1.8; }
body.studio-site .game-feature__visual { display:block; overflow:hidden; border-radius:24px; }
body.studio-site .game-feature__visual img { width:100%; aspect-ratio:1200 / 630; object-fit:cover; transition:transform .4s; }
body.studio-site .game-feature__visual:hover img { transform:scale(1.03); }
body.studio-site .game-feature__body { padding-right:clamp(0px,1.5vw,16px); }
body.studio-site .game-feature__badge { display:inline-block; padding:5px 15px; color:#0b6fb8; background:#e3f4ff; border-radius:999px; font-size:13px; font-weight:800; }
body.studio-site .game-feature__title { margin-top:14px; color:var(--home-ink); font-family:var(--home-display); font-size:clamp(27px,2.7vw,36px); font-weight:900; line-height:1.4; }
body.studio-site .game-feature__text { margin-top:12px; color:var(--home-muted); font-size:16px; line-height:1.95; }
body.studio-site .game-feature__tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
body.studio-site .game-feature__tags li { padding:4px 13px; color:#8a5a1c; background:#fff3d6; border-radius:999px; font-size:13px; font-weight:800; }
body.studio-site .game-feature__action { margin-top:26px; }

/* Work tiles (the top page's selected works) on the game and web pages. */
body.studio-site .work-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 26px; }
body.studio-site .work-tiles .selected-work { grid-column:auto; }
body.studio-site .game-list .work-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:1040px; margin-inline:auto; }
body.studio-site .work-tiles .selected-work__caption h3 { font-size:16px; }
body.studio-site .selected-work__excerpt { margin-top:6px; color:var(--home-muted); font-size:14px; font-weight:400; line-height:1.85; }

/* Game page: what we make. */
body.studio-site .scope-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
body.studio-site .scope-card { padding:30px 28px 32px; background:#fff; border-radius:28px; }
body.studio-site .scope-card__icon { display:grid; place-items:center; width:64px; height:64px; color:var(--scope-color); background:var(--scope-bg); border-radius:50%; }
body.studio-site .scope-card__icon .studio-icon { width:36px; height:36px; }
body.studio-site .scope-card--blue { --scope-color:#0097ec; --scope-bg:#e3f4ff; }
body.studio-site .scope-card--green { --scope-color:#009254; --scope-bg:#e0f8ed; }
body.studio-site .scope-card--yellow { --scope-color:#b27600; --scope-bg:#fff1c7; }
body.studio-site .scope-card__title { margin-top:18px; color:var(--home-ink); font-family:var(--home-rounded); font-size:19px; font-weight:900; line-height:1.6; }
body.studio-site .scope-card__text { margin-top:8px; color:var(--home-muted); font-size:16px; line-height:1.95; }

/* Works archive. */
body.studio-site .works { background:var(--home-paper); }
body.studio-site .works--related { background:#fff; }
body.studio-site .works .studio-work-filters { justify-content:center; margin-bottom:30px; }
body.studio-site .works .studio-work-filters button { padding:9px 22px; color:#6d5a50; font-size:14px; box-shadow:var(--home-soft-light); }
body.studio-site .works .studio-work-filters button[aria-pressed="true"] { color:#fff; background:#0872b8; box-shadow:none; }
body.studio-site .works__grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 24px; }
body.studio-site .work-card[hidden] { display:none; }
body.studio-site .work-card { grid-column:auto; color:var(--home-ink); background:#fff; border:0; border-radius:26px; box-shadow:none; }
body.studio-site .work-card:hover { border:0; box-shadow:0 14px 26px #7e54230f; transform:translateY(-4px); }
body.studio-site .work-card__image { margin:12px 12px 0; border-radius:18px; }
body.studio-site .work-card__badge { top:10px; left:10px; padding:4px 12px; color:#0b6fb8; background:#fff; border-radius:999px; box-shadow:0 2px 8px #1a4f6a1a; font-size:12px; font-weight:800; }
body.studio-site .work-card__body { padding:16px 22px 22px; gap:6px; }
body.studio-site .work-card__title { color:var(--home-ink); font-family:var(--home-rounded); font-size:17px; font-weight:900; line-height:1.6; }
body.studio-site .work-card__tags { color:#13734f; font-size:12px; font-weight:800; }
body.studio-site .work-card__excerpt { color:var(--home-muted); font-size:14px; line-height:1.85; }
body.studio-site .work-card__more { display:inline-flex; align-items:center; gap:8px; color:#0b6fb8; font-size:13px; font-weight:800; }

/* Work detail. */
body.studio-site .work-detail .site-container--narrow { max-width:920px; }
body.studio-site .work-detail__image { padding:14px; background:#fff; border-radius:30px; }
body.studio-site .work-detail__image-element { border:0; border-radius:20px; box-shadow:none; }
body.studio-site .work-detail__content { margin-top:34px; padding:34px 40px; color:var(--home-muted); background:#fff; border-radius:28px; font-size:16px; line-height:2; }
body.studio-site .work-detail__meta { margin-top:18px; gap:10px; }
body.studio-site .work-detail__meta-row { display:flex; gap:18px; padding:14px 22px; background:#fff; border:0; border-radius:18px; font-size:15px; }
body.studio-site .work-detail__meta-term { flex:0 0 5em; margin:0; color:#a46542; }
body.studio-site .work-detail__meta-term::after { content:none; }
body.studio-site .work-detail__meta-description { color:var(--home-ink); font-weight:700; }
body.studio-site .work-detail__meta-description a { color:#0b6fb8; text-decoration:underline; text-underline-offset:3px; }
body.studio-site .work-detail__visit { margin-top:32px; }
body.studio-site .work-detail__cta { display:flex; align-items:center; justify-content:center; gap:28px; margin-top:48px; padding:34px 40px; background:#fff; border:0; border-radius:32px; text-align:left; }
body.studio-site .work-detail__cta-art { flex:0 0 110px; width:110px; height:auto; }
body.studio-site .work-detail__cta-title { color:var(--home-ink); font-family:var(--home-rounded); font-size:21px; font-weight:900; }
body.studio-site .work-detail__cta-text { margin:8px 0 18px; color:var(--home-muted); font-size:15px; line-height:1.9; }

/* Contact form card. */
body.studio-site .studio-form-section .site-container--narrow { max-width:880px; }
body.studio-site .studio-page--contact .studio-form-section { padding-block:48px calc(var(--site-wave-height) + 48px); }
body.studio-site .contact-form { padding:clamp(28px,4vw,52px) clamp(22px,4.6vw,60px); color:var(--home-ink); background:#fff; border-radius:36px; }
body.studio-site .contact-form .smf-item__label__text { color:var(--home-ink); font-family:var(--home-rounded); }
body.studio-site .contact-form__field--required .smf-item__label__text::after { color:#fff; background:#bb2852; }
body.studio-site .contact-form .smf-text-control__control,body.studio-site .contact-form .smf-textarea-control__control { box-sizing:border-box; height:auto; line-height:1.5; background:#fffdf6; border:2px solid #9c8b79; border-radius:14px; }
/* Allow enough room for the input font's ascenders and descenders. */
body.studio-site .contact-form .smf-text-control__control { min-height:56px; }
body.studio-site .contact-form .smf-textarea-control__control { line-height:1.75; }
body.studio-site .contact-form .smf-text-control__control:focus,body.studio-site .contact-form .smf-textarea-control__control:focus { border-color:#0872b8; outline:3px solid #0872b8; outline-offset:3px; box-shadow:0 0 0 4px #0872b81a; }
body.studio-site .contact-form .smf-action { text-align:center; }
body.studio-site .contact-form .smf-button-control__control,body.studio-site .contact-form .smf-action .smf-button-control__control { min-width:360px; max-width:100%; min-height:72px; padding:20px 44px; color:#fff; background:linear-gradient(180deg,#35ca95 0%,#12a86e 45%,#0c945f 100%); border:0; box-shadow:inset 0 3px 6px #ffffff66,inset 0 -5px 8px #005d7b26,0 5px 10px #246b8e1a; font-family:var(--home-rounded); font-size:20px; font-weight:800; transition:transform .18s ease; }
body.studio-site .contact-form .smf-button-control__control:hover { background:linear-gradient(180deg,#45d4a0 0%,#1bb378 45%,#0f9c64 100%); transform:translateY(-2px); }
body.studio-site .contact-form__privacy { color:var(--home-muted); }
body.studio-site .contact-form__privacy-link { color:#0b6fb8; }
body.studio-site .contact-form:has(.snow-monkey-form[data-screen="complete"]) { display:flex; align-items:center; justify-content:center; min-height:220px; }
body.studio-site .contact-form:has(.snow-monkey-form[data-screen="complete"]) .contact-form__content > p,
body.studio-site .contact-form:has(.snow-monkey-form[data-screen="complete"]) .contact-form__privacy,
body.studio-site .contact-form .snow-monkey-form[data-screen="complete"] .smf-action,
body.studio-site .contact-form .snow-monkey-form[data-screen="complete"] .smf-progress-tracker { display:none; }
body.studio-site .contact-form .smf-complete-content { font-size:17px; line-height:2; text-wrap:pretty; }
body.studio-site .contact-form .smf-complete-content p { margin:0; }
body.studio-site .contact-form__complete-line { display:block; }
body.studio-site .contact-form__complete-phrase { display:inline-block; max-width:100%; }
body.studio-site .studio-page--game-contact .contact-form .smf-button-control__control { background:linear-gradient(180deg,#41bbff 0%,#0877c0 24%,#066cad 74%,#07588f 100%); }
body.studio-site .studio-page--game-contact .contact-form .smf-button-control__control:hover { background:linear-gradient(180deg,#5bc5ff 0%,#0b79c2 24%,#0772b7 74%,#076399 100%); }

/* Plain pages (privacy policy). */
body.studio-site .studio-document .site-container--narrow { max-width:960px; }
body.studio-site .studio-document__card { padding:clamp(28px,4.4vw,60px) clamp(22px,5vw,68px); color:var(--home-muted); background:#fff; border-radius:36px; font-size:16px; line-height:2; }
body.studio-site .studio-document__card h2 { position:relative; margin-top:44px; padding-left:18px; color:var(--home-ink); font-family:var(--home-rounded); font-size:20px; font-weight:900; line-height:1.6; }
body.studio-site .studio-document__card h2::before { content:""; position:absolute; top:.3em; bottom:.3em; left:0; width:5px; border-radius:5px; background:var(--studio-yellow); }
body.studio-site .studio-document__card > :first-child { margin-top:0; }
body.studio-site .studio-document__card a { color:#0b6fb8; }

/* Profile link on the top page; member page. */
body.studio-site .studio-page--not-found .studio-document__card { text-align:center; }
body.studio-site .not-found__links { display:flex; flex-wrap:wrap; justify-content:center; gap:16px 28px; margin-top:28px; padding:0; list-style:none; }
body.studio-site .not-found__links a { color:var(--studio-green); text-decoration:underline; text-underline-offset:4px; }
body.studio-site .profile__more { margin-top:24px; }
body.studio-site .member-business .studio-business__grid { max-width:1120px; margin-inline:auto; }

/* The original five roles, in the site's current rounded card style. */
body.studio-site .member-team { background:var(--home-sky); }
body.studio-site .features__profile { margin-top:clamp(40px,4.5vw,64px); background:transparent; }
body.studio-site .features__profile > .site-container { padding-top:clamp(32px,3.4vw,48px); border-top:1px solid #cfe8dc; }
body.studio-site .features__profile > .site-container > .section-heading .section-heading__title { font-size:clamp(25px,2.5vw,32px); }
body.studio-site .profile > .site-container > .section-heading .section-heading__art { width:clamp(112px,10vw,144px); height:auto; margin-bottom:16px; }
body.studio-site .profile__members { margin-top:clamp(40px,4.5vw,64px); background:transparent; }
body.studio-site .profile__members .section-heading__title { font-size:clamp(25px,2.5vw,32px); }
body.studio-site .contact-cta__cat { display:block; width:120px; height:auto; margin:24px auto 12px; }
body.studio-site .contact-cta__cat + .contact-cta__action { margin-top:0; }
body.studio-site .member-team__list { display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
body.studio-site .member-team__card { flex:0 1 calc((100% - 48px) / 3); min-width:0; padding:24px; background:#fff; border-radius:28px; }
body.studio-site .member-team__image { display:block; width:100%; height:auto; aspect-ratio:37 / 27; object-fit:cover; border-radius:18px; }
body.studio-site .member-team__title { margin:18px 0 12px; color:var(--home-ink); font-family:var(--home-rounded); font-size:20px; font-weight:900; line-height:1.5; text-align:center; }
body.studio-site .member-team__role { display:block; color:var(--studio-green); font-size:18px; }
body.studio-site .member-team__name { display:block; margin-top:3px; }
body.studio-site .member-team__text { color:var(--home-muted); font-size:16px; line-height:1.95; text-wrap:pretty; }

@media (max-width:1100px) {
  body.studio-site .member-team__card { flex-basis:calc((100% - 24px) / 2); }
  body.studio-site .work-tiles,body.studio-site .works__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.studio-site .scope-list { grid-template-columns:1fr; max-width:720px; margin-inline:auto; }
  body.studio-site .scope-card { display:grid; grid-template-columns:64px minmax(0,1fr); column-gap:20px; align-items:start; }
  body.studio-site .scope-card__icon { grid-row:span 2; }
  body.studio-site .scope-card__title { margin-top:2px; }
}

@media (max-width:900px) {
  body.studio-site .game-feature { grid-template-columns:1fr; max-width:640px; }
  body.studio-site .game-feature__body { padding:0 6px 6px; }
}

@media (max-width:760px) {
  body.studio-site .studio-page > .page-hero + .site-section { padding-top:16px; }
  body.studio-site .member-team__card { flex-basis:100%; padding:22px; border-radius:24px; }
  body.studio-site .contact-cta .button--contact-cta { width:min(100%,340px); min-width:0; min-height:64px; padding:18px 20px; font-size:clamp(15px,4.6vw,18px); }
  body.studio-site .sp-only { display:inline; }
  body.studio-site .page-hero { padding:calc(var(--site-header-height,68px) + 22px) 0 calc(var(--site-wave-height) + 12px); }
  body.studio-site .page-hero .site-container { padding-inline:22px; }
  body.studio-site .page-hero::before { top:calc(var(--site-header-height,68px) + 60px); left:-150px; }
  body.studio-site .page-hero__inner { grid-template-columns:minmax(0,1fr) 80px; gap:0 12px; min-height:0; align-items:end; }
  body.studio-site .page-hero__copy { display:contents; }
  body.studio-site .page-hero__crumb { grid-column:1 / -1; margin-bottom:8px; font-size:12px; }
  body.studio-site .page-hero__label { grid-column:1; grid-row:2; align-self:end; margin-bottom:6px; font-size:11px; }
  body.studio-site .page-hero__badge { grid-column:1; justify-self:start; margin-bottom:10px; font-size:12px; }
  body.studio-site .page-hero__title { grid-column:1 / -1; font-size:clamp(28px,8.4vw,36px); }
  body.studio-site .page-hero__visual { grid-column:2; grid-row:2; align-self:end; width:80px; margin-bottom:4px; }
  body.studio-site .page-hero__visual--controller,
  body.studio-site .page-hero__visual--browser { width:80px; aspect-ratio:1; }
  body.studio-site .page-hero__visual--controller::before,
  body.studio-site .page-hero__visual--browser::before { inset:4%; }
  body.studio-site .page-hero__sub { grid-column:1 / -1; margin-top:12px; font-size:15px; line-height:1.85; }
  body.studio-site .page-hero__line { display:inline; }
  body.studio-site .work-tiles,body.studio-site .works__grid,body.studio-site .game-list .work-tiles { grid-template-columns:1fr; gap:28px; }
  body.studio-site .game-feature { padding:14px; border-radius:28px; }
  body.studio-site .game-feature--pending { min-height:220px; }
  body.studio-site .game-feature__visual { border-radius:18px; }
  body.studio-site .game-feature__title { font-size:26px; }
  body.studio-site .game-feature__text { font-size:15px; }
  body.studio-site .game-feature__action .button { width:100%; }
  body.studio-site .scope-card { grid-template-columns:52px minmax(0,1fr); column-gap:16px; padding:24px 20px; border-radius:24px; }
  body.studio-site .scope-card__icon { width:52px; height:52px; }
  body.studio-site .scope-card__icon .studio-icon { width:30px; height:30px; }
  body.studio-site .scope-card__title { font-size:17px; }
  body.studio-site .scope-card__text { font-size:15px; }
  body.studio-site .works .studio-work-filters { margin-bottom:22px; }
  body.studio-site .work-detail__content { padding:24px 22px; font-size:15px; }
  body.studio-site .work-detail__meta-row { flex-direction:column; gap:2px; padding:12px 18px; }
  body.studio-site .work-detail__visit .button { width:100%; }
  body.studio-site .work-detail__cta { flex-direction:column; gap:10px; padding:28px 22px; text-align:center; }
  body.studio-site .work-detail__cta-art { flex-basis:auto; width:84px; }
  body.studio-site .contact-form { border-radius:28px; }
  body.studio-site .studio-page--contact .studio-form-section { padding-block:32px calc(var(--site-wave-height) + 32px); }
  body.studio-site .contact-form .smf-button-control__control,body.studio-site .contact-form .smf-action .smf-button-control__control { width:min(100%,340px); min-width:0; min-height:64px; padding:18px 20px; font-size:clamp(15px,4.6vw,18px); }
  body.studio-site .studio-document__card { border-radius:28px; font-size:15px; }
  body.studio-site .studio-document__card h2 { margin-top:34px; font-size:18px; }
}

/* Phones: the four promises read as a list (icon beside the text) instead of narrow columns. */
@media (max-width:560px) {
  body.studio-site .merits__list { grid-template-columns:1fr; gap:18px; }
  body.studio-site .merits__item { flex-direction:row; align-items:center; gap:16px; text-align:left; }
  body.studio-site .merits__icon,body.studio-site .merits__item:nth-child(even) .merits__icon { width:76px; height:76px; }
  body.studio-site .merits__body { max-width:none; }
  body.studio-site .merits__text { font-size:15px; line-height:1.8; }
}

@media (prefers-reduced-motion:reduce) {
  body.studio-site .game-feature__visual img,body.studio-site .contact-form .smf-button-control__control { transition:none; }
}