/* Real demo screenshots, linked to the same sites at every viewport. */
.studio-capabilities { padding-block: clamp(3.5rem, 6vw, 6rem); }
.studio-capabilities__head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: end; margin-bottom: 2.25rem; }
.studio-capabilities__head .studio-label { margin-bottom: .8rem; }
.studio-capabilities__head h2 { font-size: clamp(2.3rem, 4.4vw, 4.1rem); line-height: 1.07; }
.studio-capabilities__head > p { max-width: 43ch; color: var(--muted); font-size: 1rem; line-height: 1.8; padding-bottom: .15rem; }
.studio-capabilities__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.capability { min-width: 0; padding: clamp(1.25rem, 2.3vw, 2.25rem); border: 1px solid #ffffff0f; border-radius: 30px; background: #151515; overflow: clip; display: flex; flex-direction: column; }
.capability--website { grid-row: span 2; background: radial-gradient(ellipse at 75% 40%,#343230 0,transparent 65%),#171717; }
.capability--booking { background: #242321; }
.capability--shop { background: linear-gradient(120deg,#1c1f1e,#171918); }
.capability__copy { position: relative; z-index: 1; }
.capability__label { display: flex; gap: .6rem; align-items: center; color: #c5c3bf; font-size: .75rem; margin-bottom: 1.15rem; }
.capability__glyph { color: #ff9d73; font-size: 1rem; display: inline-grid; place-items: center; width: 25px; height: 25px; border: 1px solid #ff9d7333; border-radius: 8px; }
.capability__copy h3 { font-size: clamp(1.8rem, 2.7vw, 2.6rem); line-height: 1.08; letter-spacing: -.045em; margin-bottom: .9rem; font-weight: 500; }
.capability__copy > p:last-child { max-width: 43ch; font-size: .875rem; color: #b8b8b5; line-height: 1.8; }
.capability--website .capability__copy { max-width: 32rem; }
.capability--website .capability__copy h3 { font-size: clamp(2.25rem,3.6vw,3.5rem); }
.capability__figure { min-width: 0; margin: 1.7rem 0 1.25rem; }
.capability__figure figcaption { color: #aaa9a5; font-size: .625rem; line-height: 1.7; margin-top: .8rem; }
.capability__figure figcaption a { display: inline-block; color: #e9e7e0; text-decoration: underline; text-underline-offset: .2em; padding-block: .3rem; }
.capability__figure--website { margin-block: 2.5rem 1.5rem; }
.capability-devices { position: relative; padding: 1rem .75rem 7rem 0; }
.capability-browser { display: block; border-radius: 13px; border: 1px solid #ffffff2b; box-shadow: 0 28px 55px #0004; overflow: hidden; transform: rotate(-3deg); background: #eef0e9; text-decoration: none; }
.capability-browser__chrome { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .65rem .8rem; background: #343734; color: #d7d8d0; font-size: .5rem; line-height: 1.4; }
.capability-browser__chrome > span:first-child { display: flex; gap: 4px; }
.capability-browser__chrome i { width: 5px; height: 5px; border-radius: 50%; background: #999d92; }
.capability-browser img, .capability-phone img, .demo-snapshot img { display: block; width: 100%; height: auto; }
.capability-phone { position: absolute; bottom: .5rem; right: .25rem; display: block; width: 32%; max-width: 190px; border: 5px solid #303630; border-radius: 22px; padding-top: 12px; overflow: hidden; background: #303630; transform: rotate(7deg); box-shadow: 0 18px 40px #0006; }
.capability-phone__speaker { position: absolute; top: 4px; left: 35%; width: 30%; height: 4px; background: #8b9487; border-radius: 20px; pointer-events: none; }
.demo-snapshot { display: block; overflow: hidden; border-radius: 16px; border: 1px solid #ffffff20; background: #f3f0e7; box-shadow: 0 12px 30px #0002; color: #f7f5ef; text-decoration: none; }
.demo-snapshot picture { display: block; }
.demo-snapshot__action { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: .75rem 1rem; background: #343734; font-size: .75rem; }
.demo-snapshot__action > span { font-size: 1.1rem; }
.capability-browser:focus-visible, .capability-phone:focus-visible, .demo-snapshot:focus-visible { outline: 3px solid #ff9d73; outline-offset: 5px; }
.capability__footer { display: flex; gap: .75rem; justify-content: space-between; align-items: center; border-top: 1px solid #ffffff14; padding-top: 1rem; margin-top: auto; }
.capability__footer > span { color: #aaa9a5; font-size: .625rem; line-height: 1.5; }
.capability__footer .arrow-link { flex: none; font-size: .75rem; min-height: 32px; align-items: center; }
.capability-website-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin: .5rem 0 2rem; }
.capability-website-details > div { min-width: 0; }
.capability-website-details > div > span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #ffffff08; color: #e8e4d9; margin-bottom: .75rem; font-size: 1rem; }
.capability-website-details strong { display: block; color: #e5e3df; font-size: .75rem; font-weight: 500; }
.capability-website-details p { font-size: .6875rem; line-height: 1.8; color: #aaa9a5; margin-top: .4rem; }
.studio-capabilities__note { margin-top: 1rem; color: #a7a6a2; font-size: .6875rem; line-height: 1.7; max-width: 85ch; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .has-motion:not(.effects-paused) .capability-browser,.has-motion:not(.effects-paused) .capability-phone { transition: transform .65s cubic-bezier(.2,.7,.2,1); }
 .has-motion:not(.effects-paused) .capability-browser:hover { transform: rotate(-1deg) translateY(-4px); }
 .has-motion:not(.effects-paused) .capability-phone:hover { transform: rotate(3deg) translateY(-7px); }
}
@media (max-width:989px) {
 .studio-capabilities__grid { grid-template-columns: 1fr 1fr; }
 .capability--website { grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 1rem 2rem; }
 .capability--website .capability__figure { grid-column: 2; grid-row: 1 / span 2; margin: 1rem 0 0; }
 .capability--website .capability__footer { grid-column: 1 / -1; grid-row: 4; }
 .capability-website-details { grid-column: 1 / -1; grid-row: 3; margin-bottom: 0; }
 .capability-devices { padding-bottom: 5rem; }
 .capability__copy h3 { font-size: 1.85rem; }
 .capability--website .capability__copy h3 { font-size: 2.2rem; }
 .capability__footer { flex-wrap: wrap; align-items: start; }
}
@media (max-width:649px) {
 .studio-capabilities__head { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; }
 .studio-capabilities__head > p { font-size: .875rem; }
 .studio-capabilities__head h2 { font-size: 2.6rem; }
 .studio-capabilities__grid { grid-template-columns: 1fr; gap: 1rem; }
 .capability { border-radius: 24px; padding: 1.35rem; }
 .capability--website { display: flex; gap: 0; }
 .capability__label { margin-bottom: 1rem; }
 .capability__copy h3,.capability--website .capability__copy h3 { font-size: 2rem; }
 .capability__copy > p:last-child { font-size: .8125rem; }
 .capability--website .capability__figure { margin: 1.5rem 0; }
 .capability-browser { transform: rotate(-2deg); }
 .capability-phone { width: 31%; max-width: 165px; right: .5rem; }
 .capability-devices { padding-bottom: 5.5rem; }
 .capability__footer { flex-wrap: nowrap; align-items: center; padding-top: .9rem; }
 .capability__footer > span { max-width: 20ch; }
 .capability__figure { margin-top: 1.35rem; }
 .capability-website-details { gap: 1rem; margin-bottom: 1.5rem; }
}