/* An explorable service workspace, with readable panels even without scripts. */
.service-studio { padding-bottom: 1rem; }
.service-switcher { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem; background: var(--color-primary); border-radius: 20px 20px 0 0; }
.service-tab { padding: 1rem 1.4rem; min-height: 48px; border-radius: 12px; text-decoration: none; color: var(--color-on-dark-muted); font-size: .95rem; font-weight: 500; }
/* Only the hovered tab eases: a selection made on load or by keyboard lands at once. */
.service-tab:hover { color: var(--color-gold); background: color-mix(in srgb,var(--color-ivory) 8%,transparent); transition: background .2s,color .2s; }
.service-tab[aria-selected='true'] { background: var(--color-gold); color: var(--color-primary); }
.service-panel { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 3rem; padding: clamp(1.5rem,4vw,3.5rem); border-radius: 0 0 20px 20px; background: color-mix(in srgb,var(--color-ivory) 90%,var(--color-gold)); box-shadow: 0 25px 60px color-mix(in srgb,var(--color-charcoal) 9%,transparent); scroll-margin-top: calc(var(--header-height) + 1rem); }
.service-detail { align-self: center; }
.service-detail h2 { font-size: clamp(1.8rem,3vw,2.8rem); line-height: 1.15; font-weight: 400; letter-spacing: -.055em; }
.service-detail > p { color: var(--color-text-secondary); line-height: 1.7; margin-top: 1.5rem; max-width: 45ch; }
.service-detail ul { padding-left: 1.1rem; list-style: disc; display: grid; gap: .65rem; margin-top: 1.5rem; font-size: .9rem; color: var(--color-text-secondary); }
.service-detail .studio-actions { gap: 1.25rem; }
.service-visual { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 2rem; border-radius: 18px; min-height: 400px; }
.service-visual--crm { background: radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--studio-blue) 30%,transparent),transparent 65%),color-mix(in srgb,var(--studio-mint) 12%,var(--color-ivory)); }
.service-visual--web { background: radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--studio-peach) 30%,transparent),transparent 65%),var(--color-project-warm); }
.service-visual--marketing { background: radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--studio-mint) 30%,transparent),transparent 65%),var(--color-project-surface); }
.service-visual figcaption { font-size: .65rem; text-align: center; color: var(--color-text-secondary); margin-top: 1.5rem; }
/* Mock interfaces are aria-hidden artwork: their type is set in px so it scales with the frame, not with enlarged text. */
.sample-workspace { overflow: hidden; border-radius: 14px; background: var(--color-ivory); box-shadow: 0 15px 35px color-mix(in srgb,var(--color-primary) 15%,transparent); transform: rotate(-2deg); }
.sample-workspace__bar { display: flex; align-items: center; gap: 10.4px; padding: 16px; color: var(--color-gold); background: var(--color-primary); font-size: 11.2px; }
.sample-mark { width: 24px; height: 20px; background: var(--color-gold); mask: url('/assets/images/brand/novoro-mark-full.svg') center/contain no-repeat; }
.sample-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-gold); margin-left: auto; }
.sample-workspace__body { padding: 17.6px; }
.sample-workspace__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.8px; margin-bottom: 19.2px; font-weight: 600; }
.sample-workspace__title > span { font-size: 9.6px; color: var(--color-text-secondary); font-weight: 400; }
.sample-task { --task-accent: var(--studio-blue); display: flex; align-items: center; gap: 11.2px; padding: 12.8px; margin-bottom: 9.6px; border-radius: 9px; background: color-mix(in srgb,var(--task-accent) 12%,var(--color-ivory)); }
.sample-task:nth-of-type(3) { --task-accent: var(--studio-peach); }
.sample-task:nth-of-type(4) { --task-accent: var(--studio-mint); }
.sample-avatar { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb,var(--task-accent) 75%,var(--color-primary)); color: var(--color-ivory); font-size: 8.8px; }
.sample-task > div { display: grid; gap: 3.2px; }
.sample-task strong { font-size: 11.2px; font-weight: 600; }
.sample-task div span { font-size: 9.6px; color: var(--color-text-secondary); }
.sample-tag { margin-left: auto; font-size: 8.8px; white-space: nowrap; }
.sample-progress { margin-top: 19.2px; font-size: 9.6px; color: var(--color-text-secondary); }
.sample-progress > div { display: flex; gap: 6.4px; margin-top: 11.2px; }
.sample-progress i { height: 4px; background: var(--studio-mint); flex: 1; border-radius: 4px; }
.website-preview { overflow: hidden; border-radius: 12px; box-shadow: 0 20px 40px color-mix(in srgb,var(--color-primary) 18%,transparent); transform: rotate(2deg); }
.website-preview__bar { display: flex; align-items: center; gap: 16px; padding: 12.8px; background: var(--color-ivory); font-size: 10.4px; }
.website-preview__bar > span:first-child { color: var(--color-gold); font-size: 7.2px; }
.website-preview img { width: 100%; height: auto; display: block; }
@keyframes service-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media(max-width:1000px) { .service-panel { gap: 1.5rem; } .service-visual { padding: 1.25rem; } }
@media(max-width:760px) {
 .service-switcher { gap: .2rem; padding: .5rem; }
 .service-tab { flex: 1; text-align: center; padding: .85rem .4rem; font-size: .8rem; }
 .service-panel { grid-template-columns: minmax(0,1fr); padding: 1.4rem; }
 .service-visual { min-height: 0; padding: 1.2rem; }
 .sample-workspace__body { padding: 12.8px; }
 .sample-task { padding: 10.4px; }
 .sample-tag { display: none; }
}
@media(prefers-reduced-motion:reduce) { .service-tab:hover { transition: none; } }

/* Introduction and explorer form one screen; the category's scope cards form the next.
   Top-aligned, so a taller panel grows downward instead of re-centring the tabs under the pointer. */
.service-overview { min-height: calc(100svh - var(--header-height)); display: flex; flex-direction: column; justify-content: flex-start; gap: 1.5rem; padding-block: clamp(2rem,5vh,3rem) 2rem; }
.service-overview .studio-intro { padding-block: 0; }
.service-overview .studio-intro h1 { font-size: clamp(2rem,3.4vw,3.4rem); max-width: none; }
.service-overview .studio-intro h1 br { display: none; }
.service-overview .studio-intro p { margin-top: .8rem; max-width: 50rem; }
.service-studio { padding-bottom: 0; }
.service-panel { padding: clamp(1.4rem,2.5vw,2.5rem); }
.service-visual { min-height: 330px; padding: 1.5rem; }
@media(max-width:760px) {
 .service-overview { padding-block: 2.5rem; }
 .service-overview .studio-intro h1 br { display: initial; }
 /* Inline padding tracks the viewport, so enlarged text keeps the reading width. */
 .service-panel { padding-inline: min(1.4rem,7vw); }
 /* Three nested insets starve the mockup on a phone; the visual reaches into the panel's padding instead. */
 .service-visual { min-height: 0; margin-inline: max(-.8rem,-4vw); padding: 1.2rem .8rem; }
}

/* A campaign is a path to a conversation, not an invented performance chart. */
.service-visual--marketing { background: radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--studio-blue) 26%,transparent),transparent 65%),color-mix(in srgb,var(--color-gold) 17%,var(--color-ivory)); }
.campaign-board { border-radius: 16px; background: var(--color-ivory); box-shadow: 0 20px 45px color-mix(in srgb,var(--color-primary) 16%,transparent); overflow: hidden; transform: rotate(-1deg); }
.campaign-bar { display: flex; gap: 9.6px; align-items: center; padding: 12px; background: var(--color-primary); color: var(--color-gold); font-size: 10.4px; }
.campaign-status { margin-left: auto; font-size: 8.8px; }
.campaign-scene { padding: 12.8px; background: radial-gradient(ellipse at 100% 100%,color-mix(in srgb,var(--studio-blue) 14%,transparent),transparent 70%); }
.campaign-search { display: flex; align-items: center; gap: 11.2px; background: var(--color-ivory); border: 1px solid color-mix(in srgb,var(--studio-blue) 22%,transparent); padding: 11.2px 16px; border-radius: 24px; font-size: 12px; box-shadow: 0 4px 12px color-mix(in srgb,var(--color-primary) 5%,transparent); }
.search-cursor { height: 14px; width: 1px; background: var(--studio-blue); }
.campaign-result { margin: 12px 32px 0 0; padding: 12.8px; border-radius: 12px; background: color-mix(in srgb,var(--studio-blue) 9%,var(--color-ivory)); }
.campaign-channel { font-size: 8.8px; color: var(--color-text-secondary); }
.campaign-business { display: flex; align-items: center; gap: 9.6px; margin-block: 8px; font-size: 11.2px; font-weight: 600; }
.campaign-business .sample-mark { background: var(--studio-blue); }
.campaign-business small { display: block; font-size: 8px; font-weight: 400; margin-top: 2.4px; }
.campaign-result > strong { display: block; font-size: 16.8px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; }
.campaign-copy { display: grid; gap: 5.6px; margin-block: 12px; }
.campaign-copy i { height: 4px; width: 85%; border-radius: 5px; background: color-mix(in srgb,var(--studio-blue) 18%,transparent); }
.campaign-copy i:last-child { width: 60%; }
.campaign-pill { display: inline-block; font-size: 9.6px; background: color-mix(in srgb,var(--studio-blue) 75%,var(--color-primary)); color: var(--color-ivory); padding: 7.2px 11.2px; border-radius: 6px; }
.campaign-inquiry { position: relative; display: flex; align-items: center; gap: 11.2px; margin: -9.6px 0 0 40px; padding: 16px; background: var(--color-primary); color: var(--color-ivory); border-radius: 12px; box-shadow: 0 10px 20px color-mix(in srgb,var(--color-primary) 18%,transparent); transform: rotate(2deg); }
.inquiry-icon { color: var(--color-gold); }
.campaign-inquiry strong,.campaign-inquiry div > span { display: block; font-size: 11.2px; }
.campaign-inquiry div > span { font-size: 9.6px; color: var(--color-on-dark-muted); margin-top: 4.8px; }
.campaign-path { display: flex; align-items: center; gap: 12.8px; padding: 0 24px 16px; font-size: 8.8px; color: var(--color-text-secondary); }
.campaign-path i { height: 1px; flex: 1; background: var(--color-gold); }
@media(max-width:760px) {
 .campaign-bar { padding: 12.8px; font-size: 8.8px; }
 .campaign-status { display: none; }
 .campaign-scene { padding: 12.8px; }
 .campaign-result { margin-right: 8px; }
 .campaign-inquiry { margin-left: 12.8px; padding: 12.8px; }
 .campaign-path { padding-inline: 12.8px; gap: 6.4px; }
}

.service-visual--marketing { padding: 1.1rem; }
.service-visual--marketing figcaption { margin-top: .75rem; }

/* Each tab owns its flagship panel and its scope group. Without scripts every
   group shows; with scripts, first paint already shows only the linked category. */
.studio-canvas [data-category][hidden] { display: none; }
@media (scripting: enabled) {
 .studio-canvas:not(.is-enhanced):not(:has(#websites-scopes:target,#websites-scopes :target,#websites:target)) [data-category='websites'],
 .studio-canvas:not(.is-enhanced):not(:has(#marketing-scopes:target,#marketing-scopes :target,#marketing:target)) [data-category='marketing'],
 .studio-canvas:not(.is-enhanced):has(#websites-scopes:target,#websites-scopes :target,#websites:target,#marketing-scopes:target,#marketing-scopes :target,#marketing:target) [data-category='crm'] { display: none; }
 .studio-canvas:not(.is-enhanced):not(:has(#websites-scopes:target,#websites-scopes :target,#websites:target,#marketing-scopes:target,#marketing-scopes :target,#marketing:target)) .service-tab[href='#crm'],
 .studio-canvas:not(.is-enhanced):has(#websites-scopes:target,#websites-scopes :target,#websites:target) .service-tab[href='#websites'],
 .studio-canvas:not(.is-enhanced):has(#marketing-scopes:target,#marketing-scopes :target,#marketing:target) .service-tab[href='#marketing'] { background: var(--color-gold); color: var(--color-primary); }
}
/* Only content revealed by a tab switch animates; the first view paints settled. */
@media (prefers-reduced-motion: no-preference) { .can-enter:not([hidden]) { animation: service-enter .4s cubic-bezier(.2,.8,.2,1); } }

.service-scopes { min-height: calc(100svh - var(--header-height)); display: flex; flex-direction: column; justify-content: center; gap: 2rem; padding-block: 3rem 4rem; }
.scope-group { display: grid; gap: 1.75rem; }
.scope-head { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); align-items: end; gap: 1rem 3rem; }
.scope-head h2 { font-size: clamp(1.6rem,2.6vw,2.4rem); line-height: 1.15; font-weight: 400; letter-spacing: -.05em; }
.scope-head p { color: var(--color-text-secondary); line-height: 1.7; max-width: 44ch; }
/* Each card spans two subgrid rows, so artwork and copy line up across the pair. */
.scope-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; }
.scope-card { display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: 0; overflow: hidden; border-radius: 22px; background: var(--color-ivory); box-shadow: 0 20px 55px color-mix(in srgb,var(--color-primary) 9%,transparent); }
.scope-art { container-type: inline-size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-width: 0; min-height: 260px; padding: 28px 24px 16px; }
.scope-art figcaption { font-size: .65rem; text-align: center; color: var(--color-text-secondary); }
.scope-art--crm { background: radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--studio-blue) 26%,transparent),transparent 65%),color-mix(in srgb,var(--studio-mint) 12%,var(--color-ivory)); }
.scope-art--automation { background: radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--studio-mint) 26%,transparent),transparent 65%),color-mix(in srgb,var(--studio-blue) 10%,var(--color-ivory)); }
.scope-art--web { background: radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--studio-peach) 28%,transparent),transparent 65%),var(--color-project-warm); }
.scope-art--focused { background: radial-gradient(ellipse at 0 100%,color-mix(in srgb,var(--studio-blue) 20%,transparent),transparent 65%),color-mix(in srgb,var(--color-gold) 15%,var(--color-ivory)); }
.scope-art--seo { background: radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--studio-blue) 26%,transparent),transparent 65%),var(--color-project-surface); }
.scope-art--ads { background: radial-gradient(ellipse at 100% 100%,color-mix(in srgb,var(--studio-peach) 24%,transparent),transparent 65%),color-mix(in srgb,var(--color-gold) 15%,var(--color-ivory)); }
.scope-copy { display: flex; flex-direction: column; align-items: flex-start; padding: 1.75rem 2rem 2rem; }
/* Shrink-wrapped items still stop at the card's edge, so a long word wraps rather than escaping. */
.scope-copy > * { max-width: 100%; }
.scope-copy h3 { font-size: clamp(1.4rem,2vw,1.75rem); line-height: 1.2; font-weight: 400; letter-spacing: -.04em; }
.scope-copy p { margin-top: .75rem; color: var(--color-text-secondary); font-size: .95rem; line-height: 1.7; }
.scope-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1.25rem 1.75rem; }
.scope-list li { padding: .35rem .75rem; border-radius: 999px; background: color-mix(in srgb,var(--color-primary) 7%,var(--color-ivory)); color: var(--color-primary); font-size: .8rem; }
.scope-copy .studio-button { margin-top: auto; }
/* At 320px and 200% text, "spreadsheets," and "automation" outgrow their box. `anywhere`
   lets a word break only then, and stops it widening the grid track that holds it. */
.service-detail li, .scope-copy h3 { overflow-wrap: anywhere; }

/* Scope artwork: aria-hidden, px type, fictional content. */
.mini-board { width: min(100%,420px); overflow: hidden; border-radius: 14px; background: var(--color-ivory); box-shadow: 0 15px 35px color-mix(in srgb,var(--color-primary) 15%,transparent); transform: rotate(-1.5deg); }
.mini-board__bar { display: flex; align-items: center; gap: 9.6px; padding: 12px 14px; background: var(--color-primary); color: var(--color-gold); font-size: 11.2px; }
.mini-board__views { display: flex; gap: 4px; margin-left: auto; font-size: 8.8px; }
.mini-board__views > * { padding: 4px 8px; border-radius: 6px; color: var(--color-on-dark-muted); }
.mini-board__views b { font-weight: 500; color: var(--color-gold); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--color-gold) 55%,transparent); }
.mini-board__columns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 12px; }
.mini-column { --column-accent: var(--studio-blue); display: grid; align-content: start; gap: 6.4px; padding: 8px; border-radius: 10px; background: color-mix(in srgb,var(--column-accent) 10%,var(--color-ivory)); }
.mini-column--peach { --column-accent: var(--studio-peach); }
.mini-column--mint { --column-accent: var(--studio-mint); }
.mini-column__title { display: flex; justify-content: space-between; padding: 2px 2px 4px; font-size: 9.6px; font-weight: 600; }
.mini-column__title b { font-weight: 500; color: var(--color-text-secondary); }
.mini-card { display: grid; gap: 2.4px; padding: 8px; border-left: 3px solid var(--column-accent); border-radius: 7px; background: var(--color-ivory); box-shadow: 0 2px 6px color-mix(in srgb,var(--color-primary) 7%,transparent); }
.mini-card strong { font-size: 10.4px; font-weight: 600; }
.mini-card small { font-size: 8.8px; color: var(--color-text-secondary); }
.mini-card--doc small::before { content: ''; display: inline-block; width: 8px; height: 10px; margin-right: 5px; border-radius: 2px; background: var(--column-accent); vertical-align: -1px; }
@container (max-width: 340px) { .mini-board__columns { grid-template-columns: repeat(2,minmax(0,1fr)); } .mini-column--mint { display: none; } }

.flow-map { --flow-line: var(--studio-mint); display: flex; align-items: center; width: min(100%,440px); }
.flow-tool { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--color-ivory); box-shadow: 0 8px 20px color-mix(in srgb,var(--color-primary) 10%,transparent); font-size: 11.2px; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.flow-tool small { display: block; margin-top: 2.4px; font-size: 8.8px; font-weight: 400; color: var(--color-text-secondary); }
.flow-icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; }
.flow-icon--form { background: repeating-linear-gradient(to bottom,transparent 0 5px,color-mix(in srgb,var(--studio-blue) 55%,var(--color-ivory)) 5px 7px) content-box,color-mix(in srgb,var(--studio-blue) 14%,var(--color-ivory)); padding: 3px 5px; }
.flow-icon--sheet { background: linear-gradient(to right,transparent 9px,var(--color-ivory) 9px 11px,transparent 11px),linear-gradient(to bottom,transparent 6px,var(--color-ivory) 6px 8px,transparent 8px 13px,var(--color-ivory) 13px 15px,transparent 15px),var(--studio-mint); }
.flow-icon--crm { background: radial-gradient(circle,var(--color-gold) 0 4px,transparent 5px),var(--color-primary); }
.flow-line { flex: 1; min-width: 12px; height: 2px; background: var(--flow-line); }
.flow-hub { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; background: var(--color-primary); box-shadow: 0 0 0 8px color-mix(in srgb,var(--studio-mint) 14%,transparent); }
/* A right-angled bracket fans one entry out to two tools. */
.flow-fork { position: relative; align-self: stretch; flex-shrink: 0; width: 18px; margin: 24px 0 24px 16px; border: 2px solid var(--flow-line); border-right: 0; border-radius: 8px 0 0 8px; }
.flow-fork::before { content: ''; position: absolute; right: 100%; top: calc(50% - 1px); width: 16px; height: 2px; background: var(--flow-line); }
.flow-stack { display: grid; gap: 16px; }
@container (max-width: 380px) {
 .flow-map { flex-direction: column; align-items: stretch; }
 .flow-map > .flow-tool { align-self: center; }
 .flow-line { align-self: center; flex: none; width: 2px; height: 16px; min-width: 0; }
 .flow-hub { align-self: center; }
 .flow-fork { align-self: stretch; width: auto; height: 16px; margin: 16px calc(25% - 4px) 0; border: 2px solid var(--flow-line); border-bottom: 0; border-radius: 8px 8px 0 0; }
 .flow-fork::before { right: auto; top: auto; bottom: 100%; left: calc(50% - 1px); width: 2px; height: 16px; }
 .flow-stack { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .flow-stack .flow-tool { white-space: normal; }
 .flow-stack .flow-icon { display: none; }
}

.website-preview--scope { width: min(100%,340px); transform: rotate(-1.5deg); }
.website-preview--scope img { aspect-ratio: 16/9; object-fit: cover; object-position: top; }

.mock-site { width: min(100%,340px); overflow: hidden; border-radius: 12px; background: var(--color-ivory); box-shadow: 0 20px 40px color-mix(in srgb,var(--color-primary) 16%,transparent); transform: rotate(1.5deg); }
.mock-site .website-preview__bar { border-bottom: 1px solid color-mix(in srgb,var(--color-primary) 8%,transparent); }
.mock-site__page { padding: 12px 14px 16px; background: radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--studio-blue) 12%,transparent),transparent 60%); }
.mock-site__nav { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.mock-site__logo { width: 16px; height: 16px; border-radius: 5px; background: var(--studio-blue); }
.mock-site__nav i { width: 24px; height: 4px; border-radius: 4px; background: color-mix(in srgb,var(--color-primary) 16%,transparent); }
.mock-site__nav b { margin-left: auto; padding: 5px 9px; border-radius: 6px; background: var(--color-primary); color: var(--color-ivory); font-size: 8.8px; font-weight: 500; }
.mock-site__hero { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 12px; align-items: center; }
.mock-site__pitch { display: grid; justify-items: start; gap: 7px; }
.mock-site__pitch small { font-size: 8.8px; color: var(--color-text-secondary); }
.mock-site__pitch strong { font-size: 17.6px; font-weight: 500; line-height: 1.15; letter-spacing: -.03em; }
.mock-site__pitch > b { padding: 6px 10px; border-radius: 6px; background: var(--color-gold); color: var(--color-primary); font-size: 9.6px; font-weight: 600; }
.mock-lines { display: grid; gap: 5px; width: 100%; }
.mock-lines i { height: 4px; width: 90%; border-radius: 4px; background: color-mix(in srgb,var(--color-primary) 12%,transparent); }
.mock-lines i:last-child { width: 65%; }
.mock-site__form { display: grid; gap: 6px; padding: 10px; border-radius: 10px; background: var(--color-ivory); box-shadow: 0 6px 16px color-mix(in srgb,var(--color-primary) 10%,transparent); font-size: 9.6px; font-weight: 600; }
.mock-site__form i { height: 14px; border-radius: 4px; border: 1px solid color-mix(in srgb,var(--color-primary) 16%,transparent); }
.mock-site__form .mock-site__message { height: 26px; }
.mock-site__form b { padding: 5px; border-radius: 5px; background: var(--color-primary); color: var(--color-ivory); font-size: 8.8px; font-weight: 500; text-align: center; }

.search-mock { display: grid; gap: 10px; width: min(100%,380px); padding: 14px; border-radius: 14px; background: var(--color-ivory); box-shadow: 0 15px 35px color-mix(in srgb,var(--color-primary) 13%,transparent); transform: rotate(-1deg); }
.search-mock__bar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid color-mix(in srgb,var(--studio-blue) 24%,transparent); border-radius: 22px; color: var(--studio-blue); font-size: 11.2px; }
.search-mock__bar span { color: var(--color-text); }
.search-mock__ghost { display: grid; gap: 5px; padding-inline: 6px; }
.search-mock__ghost i { height: 5px; width: 70%; border-radius: 4px; background: color-mix(in srgb,var(--color-primary) 9%,transparent); }
.search-mock__ghost i:last-child { width: 88%; height: 4px; }
.search-mock__listing { display: grid; justify-items: start; gap: 6px; padding: 12px; border-left: 3px solid var(--studio-blue); border-radius: 10px; background: color-mix(in srgb,var(--studio-blue) 10%,var(--color-ivory)); }
.search-mock__site { display: flex; align-items: center; gap: 7px; font-size: 9.6px; color: var(--color-text-secondary); }
.search-mock__site .sample-mark { width: 16px; height: 14px; background: var(--studio-blue); }
.search-mock__listing strong { font-size: 14.4px; font-weight: 500; letter-spacing: -.02em; color: color-mix(in srgb,var(--studio-blue) 70%,var(--color-primary)); }
.search-mock__links { display: flex; flex-wrap: wrap; gap: 6px; }
.search-mock__links b { padding: 3px 8px; border-radius: 10px; background: var(--color-ivory); font-size: 8.8px; font-weight: 500; }

.ad-journey { display: flex; align-items: center; width: min(100%,440px); }
.ad-card { display: grid; justify-items: start; gap: 7px; flex: 1 1 0; min-width: 0; padding: 12px; border-radius: 12px; background: var(--color-ivory); box-shadow: 0 12px 28px color-mix(in srgb,var(--color-primary) 13%,transparent); transform: rotate(-2deg); }
.ad-card__label { padding: 2px 7px; border-radius: 4px; background: color-mix(in srgb,var(--studio-peach) 16%,var(--color-ivory)); font-size: 8.8px; font-weight: 600; }
.ad-card__brand { display: flex; align-items: center; gap: 6px; font-size: 9.6px; font-weight: 600; }
.ad-card__brand .sample-mark { width: 16px; height: 14px; background: var(--studio-peach); }
.ad-card strong { font-size: 13.6px; font-weight: 500; line-height: 1.25; letter-spacing: -.02em; }
.ad-card > b { padding: 5px 9px; border-radius: 6px; background: var(--color-primary); color: var(--color-ivory); font-size: 8.8px; font-weight: 500; }
.ad-journey__line { flex: 0 0 28px; height: 2px; background: var(--color-gold); }
.landing-mini { display: grid; gap: 8px; flex: 1 1 0; min-width: 0; padding: 10px; border-radius: 12px; background: var(--color-ivory); box-shadow: 0 12px 28px color-mix(in srgb,var(--color-primary) 13%,transparent); transform: rotate(1.5deg); }
.landing-mini__hero { display: grid; gap: 6px; padding: 10px; border-radius: 8px; background: color-mix(in srgb,var(--studio-peach) 14%,var(--color-ivory)); }
.landing-mini__hero strong { font-size: 12px; font-weight: 500; line-height: 1.25; }
.landing-mini__hero i { width: 40%; height: 4px; border-radius: 4px; background: color-mix(in srgb,var(--studio-peach) 40%,transparent); }
.landing-mini__form { display: flex; gap: 6px; }
.landing-mini__form i { flex: 1; border-radius: 4px; border: 1px solid color-mix(in srgb,var(--color-primary) 16%,transparent); }
.landing-mini__form b { padding: 5px 8px; border-radius: 5px; background: var(--color-gold); color: var(--color-primary); font-size: 8.8px; font-weight: 600; white-space: nowrap; }
@container (max-width: 380px) {
 .ad-journey { flex-direction: column; align-items: stretch; }
 .ad-journey__line { flex: none; align-self: center; width: 2px; height: 20px; }
 .ad-card, .landing-mini { flex: none; }
}

/* Ongoing support applies to every category, so it closes the scope area in every tab. */
.service-support { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 1.5rem 2.5rem; padding: clamp(1.5rem,3vw,2.25rem) clamp(1.5rem,3.5vw,2.75rem); border-radius: 22px; background: var(--color-primary); color: var(--color-on-dark); }
.support-art { display: grid; grid-template-columns: auto auto; align-items: center; gap: 6px 16px; }
.support-badge { grid-row: 1 / span 3; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: var(--color-gold); color: var(--color-primary); transform: rotate(6deg); }
.support-chip { display: flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb,var(--color-ivory) 9%,transparent); color: var(--color-on-dark-muted); font-size: 10.4px; }
.support-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-gold); }
.support-copy h2 { font-size: clamp(1.5rem,2.4vw,2rem); line-height: 1.2; font-weight: 400; letter-spacing: -.04em; color: var(--color-on-dark); }
.support-copy p { max-width: 62ch; margin-top: .6rem; color: var(--color-on-dark-muted); font-size: .95rem; line-height: 1.7; }
.support-copy .support-scope { font-size: .8rem; }
.service-support .studio-button { max-width: 100%; }

/* Below 1100px the button drops under the copy, so enlarged text keeps a reading width. */
@media(max-width:1100px) {
 .service-support { grid-template-columns: auto minmax(0,1fr); }
 .service-support .studio-button { grid-column: 2; justify-self: start; }
}
@media(max-width:900px) {
 .scope-grid { grid-template-columns: minmax(0,1fr); }
}
@media(max-width:760px) {
 .service-scopes { padding-block: 2.5rem 3rem; }
 .scope-head { grid-template-columns: minmax(0,1fr); }
 .scope-art { min-height: 0; padding: 22px 16px 14px; }
 /* Inline padding tracks the viewport, so enlarged text keeps the reading width. */
 .scope-copy { padding: 1.5rem min(1.5rem,7vw) 1.75rem; }
 .scope-copy .studio-button, .service-support .studio-button { padding-inline: min(1.3rem,6vw); }
 .service-support { padding-inline: min(1.5rem,7vw); }
}
@media(max-width:600px) {
 .service-support { grid-template-columns: minmax(0,1fr); }
 .service-support .studio-button { grid-column: auto; }
}