/* Reusable centered preview, feature cards, timeline and contact band; colors come from the page palette. */
.is-style-hub-studio-page {
 --hub-surface:var(--wp--custom--studio--surface,#f4f7f6);--hub-font-ui:var(--wp--custom--studio--font,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif);
 font-family:var(--hub-font-ui);line-height:1.7;-webkit-font-smoothing:antialiased;
}
body.skills-hub-blocks.is-style-hub-studio-page { padding-bottom:0;font-family:var(--hub-font-ui);line-height:1.7; }
.is-style-hub-studio-page > *, .is-style-hub-studio-wrap > * { margin-block-start:0; }
.is-style-hub-studio-page :is(h1,h2,h3) { margin:0;font-weight:800;letter-spacing:-.01em;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance; }
.is-style-hub-studio-page :is(p,li,a,strong) { overflow-wrap:anywhere; }
.is-style-hub-studio-wrap { width:100%;max-width:var(--wp--custom--studio--width,1160px);margin:0 auto;padding:0 24px; }
.is-style-hub-studio-header { position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px;padding-inline:max(24px,calc((100% - 1160px)/2 + 24px));border-bottom:1px solid var(--hub-line);background:rgb(255 255 255 / 92%);backdrop-filter:blur(10px); }
.is-style-hub-studio-brand-row { display:flex;align-items:center;gap:10px;min-width:0; }
.is-style-hub-studio-brand-row > * { margin:0; }
.is-style-hub-brand-icon { width:30px;height:30px;flex:0 0 auto; }
.is-style-hub-brand-icon img { display:block;width:30px;height:30px;object-fit:contain;border-radius:9px; }
.is-style-hub-studio-brand { font-size:18px;font-weight:800; }
.is-style-hub-studio-nav { display:flex;align-items:center;gap:26px;flex-wrap:nowrap; }
.is-style-hub-studio-nav .wp-block-button__link { min-height:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--hub-muted);font-size:14px;font-weight:400;box-shadow:none; }
.is-style-hub-studio-nav .is-style-hub-nav-pill .wp-block-button__link { padding:7px 16px;border-radius:10px;background:var(--hub-ink);color:#fff;font-weight:700; }
.is-style-hub-studio-hero { padding:76px 0 0;text-align:center;background:linear-gradient(180deg,var(--hub-paper),var(--hub-surface)); }
.is-style-hub-kicker { display:inline-flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:700;color:var(--hub-accent);background:var(--hub-accent-soft);padding:5px 12px;border-radius:999px; }
.is-style-hub-studio-hero .is-style-hub-centered-title { margin:20px 0 18px;font-size:var(--wp--custom--studio--hero-size,68px);line-height:1.12; }
.is-style-hub-centered-title em { font-style:normal;background:linear-gradient(transparent 62%,rgb(242 169 59 / 45%) 62%); }
.is-style-hub-studio-lead { max-width:32em;margin:0 auto 30px;color:var(--hub-muted);font-size:19px; }
.is-style-hub-studio-actions { display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:0; }
:is(.is-style-hub-solid,.is-style-hub-ghost) .wp-block-button__link { min-height:50px;padding:0 26px;border-radius:14px;font-size:15px;font-weight:700;line-height:1.7; }
.is-style-hub-solid .wp-block-button__link { background:var(--hub-accent);color:#fff;box-shadow:0 10px 24px rgb(14 124 107 / 25%); }
.is-style-hub-solid .wp-block-button__link:hover { background:var(--hub-accent-hover); }
.is-style-hub-ghost .wp-block-button__link { background:var(--hub-paper);border:1px solid var(--hub-line);color:var(--hub-ink); }
.is-style-hub-chip-list { display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:26px 0 48px;padding:0;list-style:none; }
.is-style-hub-chip-list li { padding:6px 14px;border:1px solid var(--hub-line);border-radius:999px;background:var(--hub-paper);font-size:14px;color:var(--hub-muted); }
.is-style-hub-chip-list li::before { content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--hub-accent);vertical-align:1px; }
.is-style-hub-preview-screen { position:relative;max-width:980px;margin:0 auto;padding:16px 16px 0;border-radius:24px 24px 0 0;background:#13201d;box-shadow:0 -10px 60px rgb(14 124 107 / 18%); }
.is-style-hub-preview-screen figure { margin:0; }
.is-style-hub-preview-screen img { display:block;width:100%;height:auto;border-radius:12px 12px 0 0; }
.is-style-hub-floating-caption { position:absolute;left:-36px;bottom:56px;max-width:calc(100% - 20px);padding:14px 18px 14px 69px;border-radius:16px;background:var(--hub-paper);box-shadow:0 16px 40px rgb(15 31 28 / 18%);text-align:left;color:var(--hub-muted);font-size:13px; }
.is-style-hub-floating-caption p { margin:0; }
.is-style-hub-floating-caption p:last-child { color:var(--hub-ink);font-size:20px;font-weight:800;letter-spacing:.04em; }
.is-style-hub-floating-caption::before { content:"";position:absolute;left:18px;top:calc(50% - 14px);width:39px;height:28px;background:linear-gradient(var(--hub-accent),var(--hub-accent)) 0 center/4px 10px no-repeat,linear-gradient(var(--hub-accent),var(--hub-accent)) 7px center/4px 22px no-repeat,linear-gradient(var(--hub-accent),var(--hub-accent)) 14px center/4px 14px no-repeat,linear-gradient(var(--hub-accent),var(--hub-accent)) 21px center/4px 26px no-repeat,linear-gradient(var(--hub-accent),var(--hub-accent)) 28px center/4px 12px no-repeat,linear-gradient(var(--hub-accent),var(--hub-accent)) 35px center/4px 18px no-repeat; }
.is-style-hub-screen-notes { padding:8px 0;text-align:left;color:var(--hub-muted);font-size:12px; }
.is-style-hub-screen-notes summary { cursor:pointer; }
.is-style-hub-screen-notes p { margin:4px 0; }
.is-style-hub-studio-section { padding:var(--wp--custom--studio--section-spacing,100px) 0; }
.is-style-hub-studio-section-soft { background:var(--hub-surface); }
.is-style-hub-studio-heading { max-width:760px;margin:0 auto 48px;text-align:center; }
.is-style-hub-studio-heading h2 { font-size:42px;line-height:1.25;margin:16px 0 14px; }
.is-style-hub-studio-heading p:not(.is-style-hub-kicker) { margin:0;color:var(--hub-muted); }
.is-style-hub-studio-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px; }
.is-style-hub-studio-card { padding:30px 28px;border:1px solid var(--hub-line);border-radius:20px;background:var(--hub-paper); }
.is-style-hub-studio-card .is-style-hub-card-icon { display:grid;place-items:center;width:48px;height:48px;margin:0 0 18px;border-radius:14px;background:var(--hub-accent-soft);color:var(--hub-accent);font-size:20px;font-weight:900; }
.is-style-hub-card-question { margin:0 0 6px;color:var(--hub-muted);font-size:14px; }
.is-style-hub-studio-card h3 { margin:0 0 10px;font-size:22px;line-height:1.4; }
.is-style-hub-studio-card p:last-child { margin:0;color:var(--hub-muted);font-size:15px; }
.is-style-hub-timeline { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;position:relative; }
.is-style-hub-timeline::before { content:"";position:absolute;left:16%;right:16%;top:27px;border-top:2px dashed #c9dcd7; }
.is-style-hub-timeline-step { position:relative;padding:0 12px;text-align:center; }
.is-style-hub-timeline-step .is-style-hub-step-index { display:grid;place-items:center;width:56px;height:56px;margin:0 auto 18px;border-radius:50%;background:var(--hub-accent);color:#fff;font-size:20px;font-weight:800;box-shadow:0 0 0 8px var(--hub-surface); }
.is-style-hub-timeline-step h3 { margin:0 0 6px;font-size:20px; }
.is-style-hub-timeline-step p:last-child { margin:0;color:var(--hub-muted);font-size:15px; }
.is-style-hub-contact-band { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;padding:52px 56px;border-radius:28px;background:linear-gradient(135deg,var(--hub-accent),var(--hub-accent-hover));color:#fff; }
.is-style-hub-contact-copy .is-style-hub-kicker { background:rgb(255 255 255 / 16%);color:#fff; }
.is-style-hub-contact-copy h2 { margin:14px 0 10px;font-size:38px; }
.is-style-hub-contact-copy p:last-child { margin:0;max-width:34em;color:rgb(255 255 255 / 80%); }
body.is-style-hub-studio-page .skills-hub-page-footer { display:flex;align-items:start;justify-content:space-between;gap:24px;max-width:1160px;margin:0 auto;padding:30px 24px 40px;color:var(--hub-muted);font-size:13px; }
.skills-hub-page-footer .is-style-hub-site-footer.is-style-hub-studio-footer { padding:0;border:0;text-align:left; }
body.is-style-hub-studio-page .skills-hub-blocks-footer { padding:0;flex:0 0 auto; }
@media(max-width:1100px) { .is-style-hub-floating-caption { left:10px; } }
@media(max-width:760px) {
 body.skills-hub-blocks.is-style-hub-studio-page { padding-bottom:84px; }
 .is-style-hub-studio-nav { gap:0; }.is-style-hub-studio-nav .is-style-hub-nav-link { display:none; }
 .is-style-hub-studio-hero { padding-top:44px; }
 .is-style-hub-studio-hero .is-style-hub-centered-title { font-size:clamp(32px,10.77vw,42px); }
 .is-style-hub-studio-lead { font-size:16px; }
 .is-style-hub-chip-list { margin:22px 0 34px; }
 .is-style-hub-preview-screen { padding:8px 8px 0;border-radius:16px 16px 0 0; }
 .is-style-hub-floating-caption { left:10px;bottom:14px;padding:10px 12px 10px 63px; }.is-style-hub-floating-caption p:last-child { font-size:16px; }
 .is-style-hub-studio-section { padding:64px 0; }.is-style-hub-studio-heading h2 { font-size:30px; }
 .is-style-hub-studio-grid,.is-style-hub-timeline,.is-style-hub-contact-band { grid-template-columns:minmax(0,1fr); }
 .is-style-hub-timeline { gap:30px; }.is-style-hub-timeline::before { display:none; }
 .is-style-hub-contact-band { padding:34px 24px; }.is-style-hub-contact-copy h2 { font-size:28px; }
 body.is-style-hub-studio-page .skills-hub-page-footer { flex-direction:column;gap:6px; }
}