@layer components {
  .studio-digital {
    --sd-panel: color-mix(in srgb, var(--neutral-surface) 68%, var(--surface));
    --sd-soft: color-mix(in srgb, var(--muted-surface) 35%, var(--surface));
    --sd-sage: color-mix(in srgb, var(--brand) 24%, var(--surface));
    --sd-rule: color-mix(in srgb, var(--ink) 13%, transparent);
    padding-block: clamp(3rem, 5vw, 5rem) 0;
  }
  .sd-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.6rem;
  }
  .sd-heading h2 {
    max-width: 30rem;
    font: 500 clamp(1.4rem, 2.5vw, 2.5rem)/1.18 var(--font);
    letter-spacing: -.055em;
  }
  .sd-eyebrow { font-size: .61rem; line-height: 1.5; letter-spacing: .035em; }
  .sd-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(.7rem, 1.2vw, 1.2rem); }
  .sd-card {
    --sd-card-height: 440px;
    --sd-card-padding: clamp(1.4rem, 2.1vw, 2.1rem);
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    isolation: isolate;
    padding: 0;
    border-radius: clamp(14px, 1.5vw, 22px);
    background: var(--sd-panel);
  }
  .sd-web, .sd-crm { grid-column: span 5; }
  .sd-social, .sd-strategy { grid-column: span 7; }
  .sd-card h3 { font: 500 clamp(1.4rem, 2.1vw, 2.15rem)/1.16 var(--font); letter-spacing: -.055em; }
  .sd-card .sd-eyebrow + h3 { margin-top: 1rem; }
  .sd-description { color: var(--brand-deep); font-size: .75rem; line-height: 1.65; }
  .sd-copy { position: relative; z-index: 2; width: 44%; }
  .sd-copy .sd-description { margin-top: 1.45rem; }
  .sd-card-footer { position: absolute; inset: auto clamp(1.4rem, 2.1vw, 2.1rem) 1.15rem; display: flex; justify-content: space-between; gap: .7rem; font-size: .53rem; line-height: 1.5; letter-spacing: .02em; }
  .sd-round-link { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 76px; height: 76px; margin-top: 1.7rem; border: 1px solid var(--sd-rule); border-radius: 50%; font-size: .5rem; line-height: 1.4; text-decoration: none; transition: background-color .18s, color .18s; }
  .sd-round-link > span:first-child { font-size: 1.65rem; line-height: 1.2; }
  .sd-text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: .7rem; min-height: 44px; width: fit-content; max-width: 100%; font-size: .68rem; line-height: 1.5; text-decoration: none; }
  .sd-text-link > span { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: .9rem; transition: transform .18s; }
  .sd-round-link:hover { background: var(--ink); color: var(--surface); }
  .sd-text-link:hover > span { transform: translate(2px, -2px); }
  .sd-card a:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 5px; }
  .sd-media { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: 12px; background: var(--sd-sage); }
  .sd-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .sd-social-small > img { object-position: center top; }
  .sd-social-film > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .sd-media-mark { position: absolute; top: .65rem; right: .65rem; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--sd-rule); border-radius: 50%; font-size: .8rem; }
  .sd-phone { position: absolute; padding: 5px; border: 1px solid color-mix(in srgb, var(--neutral-surface) 34%, var(--dark-surface)); border-radius: 31px; background: linear-gradient(115deg, var(--dark-surface), var(--solid-ink) 35%, var(--ink) 78%, var(--dark-surface)); box-shadow: inset 0 0 0 1px var(--solid-ink), inset 2px 0 2px color-mix(in srgb, var(--neutral-surface) 15%, transparent), 0 2px 3px color-mix(in srgb, var(--ink) 14%, transparent), 0 16px 22px -14px color-mix(in srgb, var(--ink) 28%, transparent); }
  .sd-phone::before { content: ''; position: absolute; z-index: 5; top: 12px; left: 50%; width: 34%; height: 13px; border: 1px solid var(--dark-surface); border-radius: 20px; background: radial-gradient(circle at 85% 50%, var(--brand-deep) 0 1px, var(--dark-surface) 1px 2px, transparent 2.5px), var(--solid-ink); transform: translateX(-50%); }
  .sd-phone::after { content: ''; position: absolute; right: -3px; top: 75px; width: 2px; height: 29px; border-radius: 2px; background: linear-gradient(var(--muted-surface), var(--dark-surface) 20% 80%, var(--muted-surface)); }
  .sd-phone-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 25px; background: var(--surface); box-shadow: 0 0 0 1px var(--solid-ink); }
  .sd-phone-top { position: absolute; z-index: 3; inset: 10px 12px auto; display: flex; align-items: center; justify-content: space-between; font-size: 6px; line-height: 1; font-weight: 900; }
  .sd-phone-home { position: absolute; inset: auto 32% 6px; z-index: 4; height: 3px; border-radius: 8px; background: var(--ink); }
  .sd-web-scene { position: absolute; inset: 2rem .9rem 3.1rem 44%; }
  .sd-phone-web { width: 172px; height: 350px; top: 7px; left: 50%; transform: translateX(-50%) rotate(-3deg); }
  .sd-site-nav { position: absolute; z-index: 3; inset: 40px 13px auto; display: flex; justify-content: space-between; font-size: 9px; letter-spacing: -.035em; }
  .sd-web-cover { position: absolute; inset: 68px 8px 100px; border-radius: 10px; background: var(--brand); box-shadow: inset 0 0 0 1px var(--sd-rule); }
  .sd-site-copy { position: absolute; inset: auto 13px 24px; font-size: 5px; line-height: 1.4; }
  .sd-site-copy > span:first-child { display: block; font-size: 5px; letter-spacing: .03em; }
  .sd-site-copy p { margin-top: 3px; font-size: 19px; line-height: 1.12; letter-spacing: -.065em; }
  .sd-screen-link { display: inline-flex; margin-top: 7px; padding: 4px 8px; border-radius: 20px; background: var(--ink); color: var(--surface); font-size: 5px; }
  .sd-browser { position: absolute; right: 0; bottom: 23px; width: 148px; padding: 8px; border: 1px solid var(--sd-rule); border-radius: 11px; background: var(--surface); box-shadow: 0 3px 5px color-mix(in srgb, var(--ink) 5%, transparent), 0 14px 22px -12px color-mix(in srgb, var(--ink) 20%, transparent); transform: rotate(5deg); }
  .sd-browser-bar { display: flex; align-items: center; gap: 5px; margin: -8px -8px 8px; padding: 7px 8px; border-bottom: 1px solid var(--sd-rule); border-radius: 10px 10px 0 0; background: var(--sd-panel); font-size: 5px; line-height: 1.5; }
  .sd-browser-content { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; min-height: 71px; }
  .sd-browser-content .sd-media { border-radius: 4px; background: var(--sd-soft); }
  .sd-browser-copy { padding-top: 7px; font-size: 9px; line-height: 1.15; letter-spacing: -.045em; }
  .sd-browser-copy i { display: block; height: 2px; margin-top: 7px; border-radius: 2px; background: var(--sd-rule); }
  .sd-browser-copy i:last-child { width: 55%; }
  .sd-toolrail { position: absolute; top: 112px; right: 1px; display: grid; gap: 10px; padding: 7px; border: 1px solid var(--sd-rule); border-radius: 20px; background: var(--surface); box-shadow: 0 5px 10px -5px color-mix(in srgb, var(--ink) 15%, transparent); }
  .sd-toolrail svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; }
  .sd-float-tag { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; width: fit-content; padding: .55rem .7rem; border: 1px solid var(--sd-rule); border-radius: 30px; background: var(--surface); box-shadow: inset 0 1px var(--neutral-surface), 0 4px 8px -6px color-mix(in srgb, var(--ink) 20%, transparent); font-size: .54rem; line-height: 1.5; }
  .sd-web-tag { position: absolute; top: 46px; right: -2px; transform: rotate(7deg); }
  .sd-orbit { position: absolute; width: 32px; height: 32px; border: 1px solid var(--sd-rule); border-radius: 50%; }
  .sd-orbit-one { left: 0; bottom: 35px; }
  .sd-orbit-one::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--brand-deep); }
  .sd-social-heading { position: relative; z-index: 2; max-width: 52%; }
  .sd-social-scene { position: absolute; top: 10.5rem; right: 1.7rem; width: 65%; height: 224px; }
  .sd-social-small { position: absolute; left: 0; top: 0; width: 22%; height: 86px; background: var(--sd-soft); box-shadow: inset 0 0 0 1px var(--sd-rule); }
  .sd-social-film { position: absolute; left: 24%; top: 0; width: 44%; height: 112px; background: var(--sd-sage); box-shadow: inset 0 0 0 1px var(--sd-rule); }
  .sd-play { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--sd-rule); border-radius: 50%; background: var(--surface); box-shadow: 0 2px 6px color-mix(in srgb, var(--ink) 9%, transparent); transform: translate(-50%, -50%); }
  .sd-play svg { width: 15px; height: 15px; fill: currentColor; }
  .sd-social-story { position: absolute; top: 0; right: 0; width: 29%; height: 215px; border: 1px solid var(--sd-rule); border-radius: 14px; background: color-mix(in srgb, var(--brand) 48%, var(--surface)); box-shadow: 0 6px 12px -8px color-mix(in srgb, var(--ink) 23%, transparent); }
  .sd-story-top { position: absolute; z-index: 2; inset: 15px 7px auto; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 20px; background: var(--surface); font-size: 5px; }
  .sd-story-top > span:last-child { margin-left: auto; }
  .sd-story-avatar { width: 11px; height: 11px; border-radius: 50%; background: var(--brand-deep); }
  .sd-story-label { position: absolute; z-index: 2; left: 10px; bottom: 40px; padding: 4px 6px; border-radius: 5px; background: var(--surface); font-size: 14px; line-height: 1.1; letter-spacing: -.05em; }
  .sd-story-footer { position: absolute; z-index: 2; inset: auto 8px 10px; display: flex; align-items: center; gap: 5px; color: var(--ink); }
  .sd-post { position: absolute; left: 24%; top: 123px; width: 29%; min-height: 91px; padding: 10px; border: 0; border-radius: 11px; background: var(--brand-deep); color: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface) 20%, transparent), 0 5px 10px -7px color-mix(in srgb, var(--ink) 28%, transparent); }
  .sd-post > span:first-child { display: block; font-size: 4px; letter-spacing: .02em; }
  .sd-post p { margin-top: 6px; font-size: 17px; line-height: 1.04; letter-spacing: -.05em; }
  .sd-post-arrow { position: absolute; bottom: 7px; right: 9px; font-size: 16px; }
  .sd-social-tags { position: absolute; top: 124px; left: 56%; display: grid; gap: 5px; }
  .sd-social-tags span { width: fit-content; padding: 3px 6px; border: 1px solid var(--sd-rule); border-radius: 12px; font-size: 5px; line-height: 1.5; }
  .sd-spark { position: absolute; right: 37%; bottom: 11px; width: 17px; height: 17px; stroke: var(--brand-deep); stroke-width: 2; }
  .sd-social-copy { position: relative; z-index: 2; width: 27%; margin-top: 2rem; }
  .sd-social-copy .sd-text-link { margin-top: .8rem; }
  .sd-card.sd-strategy { --sd-card-height: 510px; }
  .sd-strategy .sd-copy { width: 35%; }
  .sd-strategy .sd-text-link { margin-top: 1rem; }
  .sd-strategy-scene { position: absolute; inset: 5.3rem 1.7rem 3.7rem 41%; }
  .sd-data-card { position: absolute; top: 0; left: 0; width: 82%; padding: 14px; border: 1px solid var(--sd-rule); border-radius: 14px; background: linear-gradient(145deg, var(--surface), var(--sd-sage)); box-shadow: inset 0 1px var(--neutral-surface), 0 4px 6px color-mix(in srgb, var(--ink) 4%, transparent), 0 16px 24px -16px color-mix(in srgb, var(--ink) 22%, transparent); }
  .sd-data-heading { display: flex; align-items: center; justify-content: space-between; gap: 7px; font-size: 6px; line-height: 1.5; }
  .sd-data-card > p { margin-top: 7px; font-size: 13px; line-height: 1.25; letter-spacing: -.04em; }
  .sd-chart { position: relative; height: 113px; margin-top: 5px; }
  .sd-chart svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; }
  .sd-chart-grid { stroke: var(--sd-rule); stroke-width: .6; vector-effect: non-scaling-stroke; }
  .sd-chart-primary { stroke: var(--brand-deep); stroke-width: 1.8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .sd-chart-secondary { stroke: var(--brand); stroke-width: 1.1; stroke-dasharray: 2 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .sd-chart circle { fill: var(--surface); stroke: var(--brand-deep); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
  .sd-chart-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--sd-rule); font-size: 6px; line-height: 1.5; }
  .sd-chart-legend span { display: flex; align-items: center; gap: 4px; }
  .sd-chart-legend i { width: 10px; height: 2px; border-radius: 2px; background: var(--brand-deep); }
  .sd-chart-legend span:nth-child(2) i { background: var(--brand); }
  .sd-chart-legend span:nth-child(3) i { background: var(--muted-surface); }
  .sd-project-card { position: absolute; right: 0; bottom: 2px; width: 59%; padding: 13px; border: 1px solid var(--sd-rule); border-radius: 12px; background: var(--surface); box-shadow: inset 0 1px var(--neutral-surface), 0 8px 16px -10px color-mix(in srgb, var(--ink) 22%, transparent); transform: rotate(3deg); }
  .sd-project-card > span { display: block; font-size: 5px; line-height: 1.5; letter-spacing: .03em; }
  .sd-project-line { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 7px; line-height: 1.5; }
  .sd-check { display: grid; place-items: center; flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; background: var(--brand-deep); color: var(--surface); font-size: 9px; }
  .sd-check-open { background: transparent; border: 1px solid var(--sd-rule); }
  .sd-strategy-photo { position: absolute; top: 40px; right: 0; width: 22%; height: 102px; border: 1px solid var(--sd-rule); background: var(--sd-soft); box-shadow: 0 6px 12px -8px color-mix(in srgb, var(--ink) 16%, transparent); }
  .sd-strategy-tag { position: absolute; bottom: -6px; left: -12px; transform: rotate(-5deg); }
  .sd-crm { min-height: 440px; }
  .sd-crm-heading { position: relative; z-index: 2; }
  .sd-crm-copy { position: relative; z-index: 2; width: 37%; margin-top: 1.7rem; }
  .sd-crm-copy .sd-text-link { margin-top: 1.1rem; }
  .sd-crm-scene { position: absolute; inset: 7.5rem 1.5rem 3.2rem 43%; }
  .sd-phone-crm { width: 145px; height: 283px; top: 0; left: 28%; transform: rotate(2deg); border-radius: 27px; }
  .sd-phone-crm .sd-phone-screen { border-radius: 19px; }
  .sd-phone-crm::before { height: 12px; }
  .sd-crm-screen-heading { position: absolute; inset: 37px 10px auto; font-size: 7px; line-height: 1.4; }
  .sd-crm-screen-heading > span { display: block; font-size: 7px; letter-spacing: -.03em; }
  .sd-crm-screen-heading p { margin-top: 6px; font-size: 17px; line-height: 1.05; letter-spacing: -.055em; }
  .sd-crm-cover { position: absolute; inset: 112px 7px 57px; border-radius: 10px; background: var(--sd-sage); box-shadow: inset 0 0 0 1px var(--sd-rule); }
  .sd-contact-mini { position: absolute; inset: auto 10px 25px; display: flex; align-items: center; justify-content: space-between; gap: 5px; font-size: 5px; line-height: 1.4; }
  .sd-contact-mini small { font-size: 4px; }
  .sd-contact-icon { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--sd-soft); }
  .sd-contact-icon svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.2; }
  .sd-message { position: absolute; z-index: 2; top: 6px; right: -4px; width: 128px; padding: 10px; border: 1px solid color-mix(in srgb, var(--surface) 24%, transparent); border-radius: 12px; background: var(--brand-deep); color: var(--surface); box-shadow: 0 6px 12px -7px color-mix(in srgb, var(--ink) 26%, transparent); transform: rotate(-4deg); }
  .sd-message > span { display: block; font-size: 5px; letter-spacing: .03em; }
  .sd-message p { margin-top: 5px; font-size: 8px; line-height: 1.3; }
  .sd-message svg { position: absolute; bottom: 8px; right: 8px; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.3; }
  .sd-flow { position: absolute; z-index: 2; left: -13px; bottom: 11px; display: flex; flex-direction: column; align-items: center; width: 108px; }
  .sd-flow > span { display: flex; align-items: center; justify-content: flex-start; gap: 6px; width: 100%; min-height: 29px; padding: 6px 8px; border: 1px solid var(--sd-rule); border-radius: 8px; background: var(--surface); box-shadow: 0 4px 8px -6px color-mix(in srgb, var(--ink) 24%, transparent); font-size: 6px; line-height: 1.5; }
  .sd-flow i { font-style: normal; font-size: 14px; line-height: 1.5; }
  .sd-flow b { font-weight: 500; font-size: 11px; }
  /* Detalles de las ilustraciones: todo permanece vectorial y decorativo. */
  .sd-phone-buttons { position: absolute; left: -3px; top: 62px; width: 2px; height: 18px; border-radius: 2px; background: var(--dark-surface); box-shadow: 0 28px var(--dark-surface), 0 54px var(--dark-surface); }
  .sd-status-icons { width: 29px; height: 7px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; }
  .sd-status-icons .sd-signal, .sd-status-icons .sd-battery { fill: currentColor; stroke: none; }
  .sd-menu-icon { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
  .sd-window-dots { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
  .sd-window-dots i { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-surface); }
  .sd-window-dots i:first-child { background: var(--brand); }
  .sd-browser-address { display: inline-flex; align-items: center; justify-content: center; gap: 3px; flex: 1; padding: 2px 3px; border: 1px solid var(--sd-rule); border-radius: 4px; background: var(--surface); }
  .sd-browser-address svg { width: 6px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1; }
  .sd-window-expand { font-size: 7px; line-height: 1; }
  .sd-story-progress { position: absolute; z-index: 2; inset: 7px 7px auto; display: flex; gap: 3px; }
  .sd-story-progress i { flex: 1; height: 2px; border-radius: 3px; background: color-mix(in srgb, var(--surface) 55%, transparent); }
  .sd-story-progress i:first-child { background: var(--surface); }
  .sd-story-reply { flex: 1; min-width: 0; padding: 4px 5px; border: 1px solid var(--sd-rule); border-radius: 20px; background: var(--surface); font-size: 4px; line-height: 1.5; }
  .sd-story-footer svg { flex: 0 0 11px; width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .sd-data-app { display: inline-flex; align-items: center; gap: 4px; }
  .sd-data-app svg { width: 10px; height: 10px; fill: none; stroke: var(--brand-deep); stroke-width: 2.5; stroke-linecap: round; }
  .sd-chart-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: 9px; color: var(--brand-deep); font-size: 5px; line-height: 1.5; }
  .sd-chart-period { display: inline-flex; gap: 5px; padding: 2px 5px; border: 1px solid var(--sd-rule); border-radius: 5px; background: var(--surface); }
  .sd-chart-area { fill: url('#sd-chart-area-fill'); stroke: none; }
  .sd-chart-guide { stroke: var(--brand); stroke-width: .6; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
  .sd-chart .sd-chart-halo { fill: var(--brand); fill-opacity: .12; stroke: none; }
  .sd-chart-tooltip { position: absolute; top: 7%; right: 12%; display: flex; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid var(--sd-rule); border-radius: 5px; background: var(--surface); box-shadow: 0 2px 5px color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); font-size: 5px; line-height: 1.5; }
  .sd-chart-tooltip i { width: 3px; height: 3px; border-radius: 50%; background: var(--brand-deep); }
  .sd-chart-axis { display: flex; justify-content: space-between; padding-inline: 2px; color: var(--brand-deep); font-size: 5px; line-height: 1.5; }
  .sd-project-progress { display: flex; gap: 3px; margin-top: 7px; }
  .sd-project-progress i { flex: 1; height: 2px; border-radius: 3px; background: var(--brand-deep); }
  .sd-project-progress i:last-child { background: var(--muted-surface); }
  .sd-check svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .sd-message .sd-message-heading { display: flex; align-items: center; gap: 4px; }
  .sd-message-dot { width: 4px; height: 4px; border-radius: 2px; background: var(--surface); }
  .sd-flow svg { flex: 0 0 9px; width: 9px; height: 9px; fill: none; stroke: var(--brand-deep); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .sd-flow .sd-flow-connector { width: 1px; height: 14px; margin-block: 2px; background: var(--brand); }
  .sd-flow .sd-flow-node { width: 3px; height: 3px; margin-left: auto; border-radius: 50%; background: var(--brand); }
  .sd-flow b { margin-left: auto; }
  @media (min-width: 1600px) {
    .sd-card { --sd-card-height: 480px; }
    .sd-web-scene { top: 3rem; bottom: 4rem; }
    .sd-social-scene { top: 12rem; }
    .sd-crm-scene { top: 11rem; }
  }
  @media (max-width: 1190px) {
    .sd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-card { grid-column: span 1; --sd-card-height: 465px; }
    .sd-card h3 { font-size: 1.6rem; }
    .sd-web .sd-copy { width: 43%; }
    .sd-web .sd-description { font-size: .68rem; }
    .sd-phone-web { width: 154px; height: 321px; top: 30px; }
    .sd-browser { width: 126px; bottom: 17px; }
    .sd-web-tag { top: 4px; right: -3px; }
    .sd-toolrail { top: 169px; }
    .sd-social-heading { max-width: none; }
    .sd-social-scene { top: 11.3rem; right: 1.4rem; width: 62%; height: 235px; }
    .sd-social-copy { width: 30%; margin-top: 2rem; }
    .sd-social-copy .sd-description { font-size: .68rem; }
    .sd-social-small { height: 70px; }
    .sd-social-film { height: 92px; }
    .sd-social-story { height: 211px; }
    .sd-post { top: 104px; width: 37%; }
    .sd-social-tags { left: 0; top: 94px; gap: 9px; }
    .sd-spark { right: 44%; bottom: 19px; }
    .sd-strategy .sd-copy { width: 100%; }
    .sd-strategy .sd-description { max-width: 27rem; margin-top: 1rem; font-size: .68rem; }
    .sd-strategy .sd-text-link { position: absolute; top: 334px; margin: 0; }
    .sd-strategy-scene { inset: 14rem 1.4rem 4rem 1.4rem; }
    .sd-data-card { width: 67%; padding: 11px; }
    .sd-data-card > p { font-size: 11px; }
    .sd-chart { height: 70px; margin-top: 8px; }
    .sd-project-card { width: 32%; bottom: 15px; padding: 10px; }
    .sd-project-line { gap: 5px; font-size: 6px; margin-top: 8px; }
    .sd-project-card > span { font-size: 4px; }
    .sd-check { flex-basis: 11px; width: 11px; height: 11px; }
    .sd-strategy-photo { width: 28%; height: 60px; top: 0; }
    .sd-strategy-tag { display: none; }
    .sd-crm-copy { width: 34%; }
    .sd-crm-copy .sd-description { font-size: .68rem; }
    .sd-crm-scene { inset: 10rem 1.2rem 3.2rem 40%; }
    .sd-phone-crm { left: 19%; width: 136px; height: 272px; }
    .sd-message { right: -2px; width: 110px; }
    .sd-flow { left: -9px; width: 91px; }
    .sd-card-footer { font-size: .46rem; }
  }
  @media (max-width: 950px) {
    .sd-heading { display: block; }
    .sd-heading h2 { margin-top: .8rem; }
    .sd-grid { grid-template-columns: minmax(0, 1fr); }
    .sd-card { --sd-card-height: 440px; --sd-card-padding: 1.6rem; }
    .sd-card h3 { font-size: clamp(1.55rem, 4vw, 2rem); }
    .sd-card .sd-description { font-size: .76rem; }
    .sd-web-scene { inset: 1.8rem 1.5rem 3.2rem 47%; }
    .sd-phone-web { width: 172px; height: 350px; top: 8px; }
    .sd-browser { bottom: 19px; width: 148px; }
    .sd-social-copy { max-width: 180px; }
    .sd-social-scene { top: 10.5rem; width: 63%; height: 225px; }
    .sd-social-small { height: 86px; }
    .sd-social-film { height: 112px; }
    .sd-post { top: 123px; width: 29%; }
    .sd-social-tags { left: 56%; top: 124px; gap: 5px; }
    .sd-strategy .sd-copy { width: 37%; }
    .sd-strategy .sd-description { margin-top: 1.45rem; }
    .sd-strategy .sd-text-link { position: static; margin-top: 1rem; }
    .sd-strategy-scene { inset: 5.3rem 1.6rem 3.7rem 43%; }
    .sd-data-card { width: 85%; padding: 14px; }
    .sd-data-card > p { font-size: 13px; }
    .sd-chart { height: 105px; margin-top: 12px; }
    .sd-project-card { width: 63%; bottom: 0; padding: 13px; }
    .sd-project-line { gap: 8px; font-size: 7px; margin-top: 10px; }
    .sd-project-card > span { font-size: 5px; }
    .sd-strategy-photo { top: 43px; width: 21%; height: 100px; }
    .sd-strategy-tag { display: flex; }
    .sd-crm-copy { width: 36%; }
    .sd-crm-scene { inset: 8.8rem 2rem 3.2rem 47%; }
    .sd-phone-crm { width: 145px; height: 283px; left: 26%; }
    .sd-message { width: 128px; }
    .sd-flow { width: 108px; }
    .sd-card-footer { inset-inline: 1.6rem; font-size: .53rem; }
  }
  @media (max-width: 500px) {
    .sd-card { --sd-card-height: 0px; --sd-card-padding: 1.25rem; }
    .sd-card.sd-strategy { --sd-card-height: 0px; }
    .sd-heading h2 { max-width: 17rem; font-size: 1.6rem; }
    .sd-eyebrow { font-size: .54rem; }
    .sd-card h3 { font-size: 1.65rem; }
    .sd-copy, .sd-web .sd-copy, .sd-strategy .sd-copy { width: 100%; }
    .sd-web h3 br { display: none; }
    .sd-web h3 { max-width: 13rem; }
    .sd-copy .sd-description { margin-top: 1rem; }
    .sd-card .sd-description { font-size: .75rem; }
    .sd-round-link { position: absolute; right: 0; top: 24px; width: 59px; height: 59px; margin: 0; font-size: .4rem; }
    .sd-round-link > span:first-child { font-size: 1.4rem; }
    .sd-web h3 { padding-right: 1rem; }
    .sd-web-scene { position: relative; inset: auto; height: 366px; margin: 1.1rem -.2rem 2.25rem; }
    .sd-phone-web { width: 164px; height: 338px; top: 5px; }
    .sd-browser { bottom: 3px; right: 0; width: 133px; }
    .sd-web-tag { top: 40px; right: 0; }
    .sd-toolrail { top: 143px; right: 0; }
    .sd-orbit-one { bottom: 10px; left: 9px; }
    .sd-social-heading { max-width: 100%; }
    .sd-social-heading h3 br:nth-child(2) { display: none; }
    .sd-social-scene { position: relative; inset: auto; width: 100%; height: 232px; margin-top: 1.65rem; }
    .sd-social-film { height: 109px; }
    .sd-social-story { height: 219px; }
    .sd-social-small { height: 78px; }
    .sd-post { width: 33%; top: 121px; }
    .sd-post p { font-size: clamp(13px, 4.3vw, 17px); }
    .sd-social-tags { left: 0; top: 99px; gap: 8px; }
    .sd-spark { right: 37%; bottom: 18px; }
    .sd-social-copy { width: 100%; max-width: none; margin: 1rem 0 2.7rem; }
    .sd-social-copy .sd-text-link { margin-top: .5rem; }
    .sd-strategy .sd-description { margin-top: 1rem; }
    .sd-strategy .sd-text-link { margin-top: .6rem; }
    .sd-strategy-scene { position: relative; inset: auto; height: 354px; margin: 1rem 0 2.6rem; }
    .sd-data-card { width: 85%; padding: 13px; }
    .sd-data-card > p { font-size: 12px; }
    .sd-chart { height: 113px; }
    .sd-project-card { width: 65%; bottom: 9px; }
    .sd-strategy-tag { bottom: 5px; left: -3px; max-width: 35%; font-size: 6px; gap: 3px; }
    .sd-strategy-photo { right: 0; top: 45px; width: 22%; }
    .sd-crm-heading h3 { max-width: 14rem; }
    .sd-crm-copy { width: 100%; margin-top: 1rem; }
    .sd-crm-copy .sd-text-link { margin-top: .6rem; }
    .sd-crm-scene { position: relative; inset: auto; height: 311px; margin: 1rem 0 2.5rem; }
    .sd-phone-crm { left: 50%; top: 10px; transform: translateX(-50%) rotate(2deg); }
    .sd-message { top: 16px; right: 0; width: 114px; }
    .sd-flow { bottom: 16px; left: 0; width: 101px; }
    .sd-card-footer { inset-inline: 1.25rem; font-size: .43rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sd-card a, .sd-text-link > span { transition: none; }
    .sd-text-link:hover > span { transform: none; }
  }
  @media print {
    .studio-digital { padding: 1rem; }
    .sd-grid { grid-template-columns: minmax(0, 1fr); }
    .sd-card { break-inside: avoid; }
  }
}

@layer components {
  .sd-card-visual { position: relative; min-height: var(--sd-card-height); padding: var(--sd-card-padding); }
  .sd-service-details { margin: 0 var(--sd-card-padding) 1rem; border-top: 1px solid var(--sd-rule); font-size: .72rem; line-height: 1.6; }
  .sd-service-details summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-weight: 700; }
  .sd-service-details summary > span { font-size: 1.3rem; }
  .sd-service-details[open] summary > span { transform: rotate(45deg); }
  .sd-service-details ul { padding-left: 1.1rem; list-style: disc; }
  .sd-service-details li + li { margin-top: .3rem; }
  .sd-service-details p { margin-top: .7rem; color: var(--brand-deep); }
  .sd-service-details summary:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 3px; border-radius: 4px; }
}