/* Cinematic studio theme, informed by the Mobile Bar and Salon demos. */
:root {
    color-scheme: dark;
    --background: #090b0e;
    --surface: #14171c;
    --surface-container-lowest: #101216;
    --surface-container-low: #111419;
    --surface-container: #191d24;
    --surface-container-high: #202631;
    --on-surface: #f2f0e9;
    --on-surface-variant: #a8adb8;
    --outline-variant: #303641;
    --primary: #c4b5f4;
    --on-primary: #101216;
    --studio-ink: #f2f0e9;
    --studio-muted: #a8adb8;
    --studio-purple: #c4b5f4;
    --studio-border: #ffffff21;
    --cinema-accent: #b5d2e0;
    --motion-ease: cubic-bezier(.22, 1, .36, 1);
    --radius-sm: 4px;
    --radius-md: 4px;
    --radius-lg: 6px;
}
::selection { background: #c4b5f4; color: #090b0e; }
body { background: var(--background); -webkit-font-smoothing: antialiased; }
.studio-container { width: min(1280px, calc(100% - 112px)); }
.studio-header { background: #090b0ee8; border-color: #ffffff12; box-shadow: none; backdrop-filter: blur(18px); transition: background 400ms, border-color 400ms; }
.studio-header.is-scrolled { background: #090b0ef5; border-color: var(--studio-border); }
.studio-nav { width: min(1400px, calc(100% - 96px)); }
.studio-nav-link { color: #b4b8c2; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.studio-nav-link:hover, .studio-nav-link.is-active { color: #fff; }
.studio-nav-link::after { height: 1px; background: var(--cinema-accent); }
.studio-signin { color: var(--studio-ink); background: transparent; border-color: #ffffff35; border-radius: 3px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.studio-signin:hover { background: #ffffff0c; border-color: #ffffff85; }
.studio-mobile-nav { background: #111419; }
.studio-nav-toggle { background: transparent; border: 0; }

/* A photographic opening scene with a quiet brand-colour light wash. */
.studio-hero { min-height: max(720px, calc(100svh - var(--nav-height))); background: #090b0e; }
.studio-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url('../img/photos/service-development.webp') 70% center / cover no-repeat; filter: saturate(.35); opacity: .5; animation: cinema-opening 8s var(--motion-ease) both; }
.studio-hero::after { z-index: -1; opacity: 1; background: linear-gradient(90deg, #090b0ef5 5%, #090b0ec2 45%, #090b0e35), linear-gradient(0deg, #090b0e, transparent 30%, #090b0e25), linear-gradient(135deg, #0096ff55, #543edc66 52%, #a830eb55); mask-image: none; }
.hero-orbit { display: none; }
.hero-aurora { z-index: 0; opacity: .4; background: radial-gradient(ellipse at var(--light-x, 75%) var(--light-y, 30%), #709cca18, transparent 55%); }
.hero-aurora span { opacity: .28; }
.hero-content { padding-block: 100px 160px; text-align: left; }
.hero-logo { width: clamp(200px, 27vw, 350px); margin: 0 0 38px; }
.hero-logo::before { opacity: .2; animation: none; }
.hero-logo::after { animation-iteration-count: 1; opacity: .5; }
.hero-tagline { max-width: 900px; font-size: clamp(48px, 6.5vw, 94px); font-weight: 500; letter-spacing: -.065em; line-height: 1.04; text-wrap: balance; }
.hero-tagline span:not(:last-child) { margin-right: .24em; }
.hero-tagline span:last-child { color: transparent; background: linear-gradient(105deg, #4cc9ff 5%, #8f6bff 32%, #e55bff 52%, #d7f4ff 57%, #8f6bff 65%, #4cc9ff 95%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; font-weight: inherit; animation: hero-enter 650ms var(--motion-ease) both, interactive-shine 7s ease-in-out infinite; animation-delay: var(--word-delay), 1.5s; filter: drop-shadow(0 0 24px #8f6bff20); }
@keyframes interactive-shine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hero-frame { position: absolute; inset: 26px; pointer-events: none; z-index: 1; }
.hero-frame span { position: absolute; width: 20px; height: 20px; border: solid #ffffff40; }
.hero-frame span:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; }
.hero-frame span:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; }
.hero-frame span:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.hero-frame span:nth-child(4) { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.studio-hero .studio-actions { justify-content: start; margin-top: 34px; }
.studio-button { border-radius: 3px; min-height: 54px; padding: 16px 24px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.studio-button.primary, .btn-primary { background: var(--brand-gradient); background-size: 150% 100%; color: #fff; border-color: transparent; box-shadow: 0 4px 18px #4c4bc930; }
.studio-button.primary:hover, .btn-primary:hover { background: var(--brand-gradient); background-size: 150% 100%; background-position: 100% 0; color: #fff; box-shadow: 0 8px 30px #6941d94d; }
.spinner-on-primary { border-color: #ffffff59; border-top-color: #fff; }
.studio-button.hero-secondary { border-color: #ffffff60; background: transparent; }
.studio-button.hero-secondary:hover { border-color: #fff; background: #ffffff0c; }
.hero-scroll { bottom: 45px; z-index: 2; }

/* Editorial section rhythm and photo treatments. */
.studio-section { position: relative; padding-block: clamp(78px, 9vw, 130px); }
.studio-section h2 { font-size: clamp(36px, 4.7vw, 68px); font-weight: 500; letter-spacing: -.055em; line-height: 1.08; max-width: 850px; text-wrap: balance; }
.studio-section-heading { margin-bottom: 48px; }
.studio-section-heading h2 { padding-bottom: 0; }
.studio-section-heading h2::after { display: none; }
.studio-section h3 { font-weight: 500; font-size: 22px; }
.section-description { font-size: 14px; max-width: 550px; }
.purpose-section, .about-section { background: #090b0e; }
.services-section, .capabilities-section { background: #101317; border-color: #ffffff12; }
.feedback-section { background: #0c0f13; border-color: #ffffff12; }
.contact-section { background: radial-gradient(ellipse at 90% 5%, #6376a414, transparent 50%), #101317; border-color: #ffffff12; }
.purpose-card, .service-card, .about-card { background: #15191f; border-color: var(--studio-border); border-radius: 4px; }
.purpose-card { grid-template-columns: 1fr; }
.purpose-card .photo-tint { min-height: 0; height: 270px; }
.purpose-card-body, .about-body { padding: 32px; }
.photo-tint img { filter: saturate(.55) contrast(1.05); transition: transform 1400ms var(--motion-ease), filter 800ms; }
.photo-tint::after { background: linear-gradient(135deg, rgb(0 150 255 / 46%), rgb(84 62 220 / 50%) 52%, rgb(168 48 235 / 46%)); }
.studio-icon { border: 1px solid #ffffff26; background: #202632; color: #c9d4e8; border-radius: 4px; }
.service-media { height: 240px; }
.service-media .studio-icon { box-shadow: 0 0 0 5px #15191f; }
.service-body { padding: 30px 28px 26px; }
.service-details { border-color: #ffffff1c; }
.service-details summary { color: #c9d4e8; min-height: 44px; }
.about-media { height: 250px; }
.capability-tab { background: transparent; border-color: #ffffff26; border-radius: 3px; color: #b8bfca; }
.capability-tab:hover { background: #ffffff0a; border-color: #ffffff65; }
.capability-tab.is-active { background: #eceae3; color: #101216; box-shadow: none; }
.studio-section .capability-group-title { color: #b8bfca; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.capability-tile { background: #171b22; border-color: #ffffff18; border-radius: 3px; min-height: 140px; }
.capability-tile img { width: 42px; height: 42px; background: #f0f0ed; padding: 5px; border-radius: 5px; }
.capability-tab-icon { border-radius: 3px; }

/* Forms, feedback, and dialogs share the same dark material. */
.feedback-card, .feedback-form-card, .contact-form-card, .contact-email-card, .office-card, .contact-social-card { background: #171b21; border-color: var(--studio-border); border-radius: 4px; }
.contact-photo { border-radius: 4px; height: 200px; }
.feedback-card-comment, .feedback-signin p { color: #b8bfca; }
.feedback-card-meta, .feedback-counter, .contact-field-hint, .contact-file-size { color: #9ba4b3; }
.contact-field label, .contact-label, .feedback-sort label { color: #d6dbe3; }
.contact-field input, .contact-field textarea, .feedback-select, .feedback-sort .feedback-select { background-color: #0e1116; border-color: #ffffff30; color: var(--studio-ink); border-radius: 3px; }
.contact-field input::placeholder, .contact-field textarea::placeholder { color: #858e9e; }
.contact-field input:focus, .contact-field textarea:focus, .feedback-select:focus { border-color: #b5c6e0; box-shadow: 0 0 0 3px #b5c6e014; }
.contact-field.has-error input, .contact-field.has-error textarea, .contact-field.has-error .feedback-select { border-color: #e7959f; }
.contact-field-error { color: #ffa5b1; }
.contact-reply-note, .contact-field .contact-file-button, .contact-file-chip, .feedback-card-service { background: #20252f; border-color: #ffffff30; color: #c4b5f4; border-radius: 3px; }
.contact-field .contact-file-button:hover { background: #2a303d; border-color: #b5c6e0; }
.contact-reply-note, .feedback-card-service { color: #b8bfca; }
.contact-file-remove { color: #b8bfca; }
.contact-file-remove:hover { background: #ffffff14; }
.contact-email-card a, .office-card a, .contact-inline-button { color: #c4b5f4; }
.contact-social-card .social-link { border-color: #ffffff30; color: #d7dce6; }
.feedback-avatar { background: #272438; border-color: #b6a4df55; }
.feedback-rating-option { background: #101419; color: #a8adb8; border-color: #ffffff30; border-radius: 3px; }
.feedback-rating-option.is-selected { background: var(--rating-tint); color: var(--rating-ink); }
.feedback-rating-option:hover { color: var(--studio-ink); }
.feedback-rating-option.is-selected:hover { color: var(--rating-ink); }
.feedback-state { background: #15191f; border-color: #ffffff30; color: #b8bfca; }
.feedback-state > .line-icon { color: #e7959f; }
.modal-backdrop { background: #05070bd9; backdrop-filter: blur(10px); }
.modal-panel { border: 1px solid #ffffff30; border-radius: 6px; background: #171b21; box-shadow: 0 30px 120px #0008; }
.modal-panel h2 { font-weight: 500; letter-spacing: -.04em; }
.btn-secondary { background: transparent; border-color: #ffffff40; color: var(--studio-ink); }
.btn-secondary:hover { background: #ffffff0c; border-color: #ffffff80; }
.gate-notice { background: #15191f; }
.studio-footer { background: #080a0d; padding-top: 72px; }
.studio-footer::before { height: 1px; opacity: .4; }
.footer-label { text-transform: uppercase; letter-spacing: .12em; }
.footer-bottom { color: #a0a8b6; }
.update-bar { border-radius: 4px; background: #1a1f28; }
.skip-link { background: #eceae3; color: #101216; }

@keyframes cinema-opening { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (hover:hover) and (pointer:fine) {
    .purpose-card:hover, .service-card:hover, .about-card:hover { transform: translateY(-5px); background: #191e26; border-color: #ffffff50; box-shadow: 0 22px 44px #0003; }
    .purpose-card:hover .photo-tint img, .service-card:hover .photo-tint img, .about-card:hover .photo-tint img { filter: saturate(.9); transform: scale(1.04); }
    .capability-tile:hover { border-color: #ffffff55; box-shadow: 0 10px 30px #0003; }
}
@media (max-width:999px) {
    .studio-container { width: calc(100% - 64px); }
    .studio-nav { width: calc(100% - 48px); }
    .hero-frame { inset: 18px; }
    .hero-tagline { font-size: clamp(48px, 8vw, 76px); max-width: 720px; }
    .about-body { padding: 24px; }
    .about-media { height: 200px; }
}
@media (max-width:599px) {
    .studio-container { width: calc(100% - 40px); }
    .studio-nav { width: calc(100% - 32px); }
    .studio-hero { min-height: max(740px, calc(100svh - var(--nav-height))); }
    .studio-hero::before { background-position: 60% center; opacity: .35; }
    .hero-content { padding-block: 70px 170px; }
    .hero-frame { inset: 10px; }
    .hero-frame span { width: 12px; height: 12px; }
    .hero-logo { width: 220px; margin: 0 0 30px; }
    .hero-tagline { font-size: clamp(43px, 11.5vw, 64px); margin: 0; max-width: 100%; }
    .studio-hero .studio-actions { margin-inline: 0; max-width: 100%; }
    .studio-button { min-height: 50px; }
    .hero-scroll { display: none; }
    .studio-section { padding-block: 70px; }
    .studio-section-heading { margin-bottom: 32px; }
    .studio-section h2 { font-size: 40px; }
    .purpose-card .photo-tint, .about-media, .service-media { height: 220px; }
    .purpose-card-body, .about-body { padding: 26px; }
    .capability-tile { min-height: 124px; }
    .studio-footer { padding-top: 52px; }
}
@media (prefers-reduced-motion:reduce) {
    .hero-tagline span:last-child { animation: none; background-position: 30% 50%; }
    .studio-hero::before { animation: none; transform: none; }
    .hero-aurora { background: none; }
}