/* Company-site layer. Existing tool and booking routes retain their styles. */
:root {
    --font-display: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --font-body: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --font-mono: var(--font-body);
    --studio-ink: #182031;
    --studio-muted: #5e687a;
    --studio-purple: #6540c7;
    --studio-border: #e3e7ee;
    --brand-line: linear-gradient(90deg, #00b4ff, #6941d9 55%, #e23bff);
    --nav-height: 80px;
}
body { letter-spacing: 0; }
:focus-visible { outline: 3px solid #7a50da; outline-offset: 4px; }
.studio-container { width: min(1184px, calc(100% - 96px)); margin-inline: auto; }
.studio-page { padding-top: var(--nav-height); }
.studio-page section[id] { scroll-margin-top: calc(var(--nav-height) + 20px); }
.studio-header { position: fixed; inset: 0 0 auto; z-index: 50; background: #fff; border-bottom: 1px solid var(--studio-border); box-shadow: 0 2px 20px #11192a05; animation: header-in 600ms var(--motion-ease) both; }
.studio-header::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--brand-line); transform: scaleX(0); transform-origin: left; pointer-events: none; }
@supports (animation-timeline: scroll()) {
    .studio-header::after { animation: scroll-progress linear both; animation-timeline: scroll(root block); }
}
.studio-nav { width: min(1320px, calc(100% - 80px)); margin: auto; display: flex; gap: 24px; height: var(--nav-height); align-items: center; }
.studio-brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand-mark { display: block; width: auto; height: 40px; }
.brand-wordmark { display: block; width: 100%; height: auto; }
.studio-nav-links { display: flex; align-items: center; gap: 25px; margin-left: auto; }
.studio-nav-link { font-size: 13px; font-weight: 550; white-space: nowrap; color: #586173; position: relative; min-height: 44px; display: flex; align-items: center; }
.studio-nav-link::after { content: ""; height: 2px; border-radius: 2px; position: absolute; bottom: 4px; left: 0; right: 0; background: linear-gradient(90deg,#008fdc,#9a31ef); transform: scaleX(0); transition: transform 200ms; }
.studio-nav-link:hover, .studio-nav-link.is-active { color: var(--studio-purple); }
.studio-nav-link.is-active::after { transform: scaleX(1); }
.studio-nav-account { display: flex; gap: 9px; align-items: center; border-left: 1px solid var(--studio-border); padding-left: 24px; }
.studio-signin { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 9px 14px; border: 1px solid var(--studio-border); border-radius: 8px; background: #fff; font: 600 13px var(--font-body); color: var(--studio-ink); cursor: pointer; white-space: nowrap; transition: border-color 200ms,background 200ms; }
.studio-signin:hover { border-color: #aa98d9; background: #faf8ff; }
.studio-signin .line-icon { width: 16px; height: 16px; }
.studio-account-name { max-width: 80px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.studio-nav-toggle { display: none; min-width: 44px; min-height: 44px; color: var(--studio-ink); }
.studio-mobile-nav { display: flex; flex-direction: column; padding: 12px 32px 24px; border-top: 1px solid var(--studio-border); max-height: calc(100dvh - var(--nav-height)); overflow: auto; background: #fff; }
.studio-mobile-nav .studio-nav-link { padding: 8px 0; width: fit-content; }
.studio-mobile-identity { display: flex; gap: 10px; align-items: center; padding-top: 16px; }
.line-icon { flex-shrink: 0; display: inline-block; vertical-align: middle; }

.studio-hero { position: relative; display: grid; align-items: center; min-height: min(calc(100dvh - var(--nav-height)), 760px); background: #0c1020; color: #fff; overflow: hidden; isolation: isolate; }
.studio-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: .12; background-image: linear-gradient(#8591c01a 1px, transparent 1px),linear-gradient(90deg,#8591c01a 1px,transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(90deg,black,transparent 40%,transparent 60%,black); }
.hero-aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-aurora span { position: absolute; width: min(70vw, 760px); aspect-ratio: 1; border-radius: 50%; animation: aurora-drift 16s ease-in-out infinite alternate; }
.hero-aurora span:nth-child(1) { left: -14%; top: -38%; background: radial-gradient(circle, #00b4ff47, transparent 62%); }
.hero-aurora span:nth-child(2) { right: -16%; bottom: -46%; background: radial-gradient(circle, #8a3bff52, transparent 62%); animation-duration: 21s; animation-direction: alternate-reverse; }
.hero-aurora span:nth-child(3) { left: 32%; top: 22%; width: min(46vw, 480px); background: radial-gradient(circle, #e23bff26, transparent 64%); animation-duration: 26s; }
.hero-orbit { position: absolute; border: 1px solid #ac8cff1f; border-radius: 50%; width: 540px; height: 540px; pointer-events: none; z-index: -1; animation: orbit-spin 38s linear infinite; }
.hero-orbit::before { content: ""; position: absolute; top: -4px; left: calc(50% - 4px); width: 7px; height: 7px; border-radius: 50%; background: #7fd4ff; box-shadow: 0 0 16px 3px #4fb8ff99; }
.orbit-one { top: -150px; right: -330px; }
.orbit-two { bottom: -270px; left: -330px; width: 680px; height: 680px; animation-duration: 54s; animation-direction: reverse; }
.orbit-two::before { background: #c79bff; box-shadow: 0 0 16px 3px #a05bff99; }
.hero-content { padding-block: 84px 96px; text-align: center; position: relative; z-index: 1; }
.hero-logo { position: relative; width: min(480px, 100%); margin: 0 auto 34px; animation: logo-in 1000ms var(--motion-ease) both; }
.hero-logo::before { content: ""; position: absolute; inset: -55% auto -55% -16%; width: 68%; z-index: -1; background: radial-gradient(closest-side, #4b6bff47, transparent); animation: logo-glow 4.5s ease-in-out infinite alternate; }
.hero-logo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, #ffffffb8 50%, transparent 60%) 130% 0 / 280% 100% no-repeat; -webkit-mask: url(../img/k23-wordmark.png) center / 100% 100% no-repeat; mask: url(../img/k23-wordmark.png) center / 100% 100% no-repeat; animation: logo-shine 5.5s ease-in-out 1.4s infinite; }
.hero-tagline { margin: 0; font-weight: 350; letter-spacing: .05em; font-size: clamp(27px, 3.05vw, 43px); line-height: 1.4; }
.hero-tagline span { display: inline-block; animation: hero-enter 650ms var(--motion-ease) both; animation-delay: var(--word-delay); }
.hero-tagline span:not(:last-child) { margin-right: .24em; }
.hero-tagline span:last-child { font-weight: 500; color: transparent; background: linear-gradient(90deg, #4cc9ff, #8f6bff 55%, #e55bff); -webkit-background-clip: text; background-clip: text; }
.studio-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.studio-hero .studio-actions { margin-top: 38px; }
.studio-button { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 50px; padding: 13px 22px; border: 1px solid transparent; border-radius: 8px; font: 600 13px var(--font-body); cursor: pointer; transition: transform 220ms,box-shadow 220ms,background 220ms; }
.studio-button .line-icon { width: 18px; height: 18px; transition: transform 220ms var(--motion-ease); }
.studio-button:not(:disabled):hover .line-icon { transform: translateX(4px); }
.studio-button.primary { color: #fff; background: linear-gradient(110deg,#346edb,#7950d3); box-shadow: 0 4px 15px #4c4bc925; }
.studio-button.primary::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, #ffffff47 50%, transparent 65%); transform: translateX(-120%); transition: transform 650ms var(--motion-ease); }
.studio-button.primary:hover { box-shadow: 0 7px 22px #4c4bc944; transform: translateY(-2px); }
.studio-button.primary:not(:disabled):hover::after { transform: translateX(120%); }
.studio-button.hero-secondary { color: #f2f3ff; background: #ffffff04; border-color: #ffffff30; }
.studio-button.hero-secondary:hover { background: #ffffff0c; }
.studio-button:disabled { opacity: .65; cursor: wait; transform: none; }
.hero-scroll { position: absolute; bottom: 20px; left: calc(50% - 22px); width: 44px; height: 24px; display: grid; place-content: center; animation: scroll-cue 2s ease-in-out 1.6s infinite; }
.hero-scroll span { width: 7px; height: 7px; border-right: 1px solid #a6aec2; border-bottom: 1px solid #a6aec2; transform: rotate(45deg); }

.studio-section { padding-block: 90px; }
.studio-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; margin-bottom: 36px; }
.studio-section h2 { font-size: clamp(28px, 2.7vw, 38px); font-weight: 600; letter-spacing: -.035em; line-height: 1.22; max-width: 650px; margin: 0; color: var(--studio-ink); }
.studio-section-heading h2 { position: relative; padding-bottom: 18px; }
.studio-section-heading h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; border-radius: 3px; background: var(--brand-line); }
.section-description { max-width: 620px; color: var(--studio-muted); font-size: 14px; line-height: 1.8; margin: 17px 0 0; }
.studio-icon { display: inline-flex; align-items: center; justify-content: center; background: #f1edfc; color: var(--studio-purple); width: 42px; height: 42px; border-radius: 10px; }
.studio-icon .line-icon { width: 21px; height: 21px; }
.studio-section h3 { margin: 17px 0 12px; font-size: 19px; font-weight: 650; line-height: 1.35; letter-spacing: -.02em; }

/* Photos carry a blue-to-violet brand wash. */
.photo-tint { position: relative; overflow: hidden; isolation: isolate; background: #1a2256; }
.photo-tint img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); transition: transform 700ms var(--motion-ease); }
.photo-tint::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgb(0 150 255 / 46%), rgb(84 62 220 / 50%) 52%, rgb(168 48 235 / 46%)); transition: opacity 450ms ease; }

.purpose-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.purpose-card { background: #fff; border: 1px solid var(--studio-border); border-radius: 14px; overflow: hidden; display: grid; grid-template-columns: 36% 1fr; transition: transform 250ms,box-shadow 250ms,border-color 250ms; }
.purpose-card .photo-tint { min-height: 240px; }
.purpose-card-body { padding: 28px; }
.purpose-card p { color: var(--studio-muted); font-size: 13px; line-height: 1.8; margin: 0; }
.services-section { background: #f6f8fb; border-block: 1px solid #ecf0f5; }
.services-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 24px; align-items: start; }
.service-card { grid-column: span 2; background: #fff; border: 1px solid var(--studio-border); border-radius: 14px; overflow: hidden; transition: transform 250ms,box-shadow 250ms,border-color 250ms; }
.service-card:nth-child(4), .service-card:nth-child(5) { grid-column: span 3; }
.service-media { position: relative; height: 180px; }
.service-media .photo-tint { height: 100%; }
.service-media .studio-icon { position: absolute; z-index: 1; bottom: -20px; left: 25px; box-shadow: 0 0 0 5px #fff; }
.service-body { padding: 27px 26px 20px; }
.service-body h3 { margin-top: 9px; }
.service-body > p { font-size: 13px; color: var(--studio-muted); line-height: 1.8; margin: 0 0 20px; min-height: 47px; }
.service-details { border-top: 1px solid #edf0f6; }
.service-details summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding-top: 16px; font-size: 12px; font-weight: 600; color: var(--studio-purple); list-style: none; }
.service-details summary::-webkit-details-marker { display: none; }
.service-details summary > span { font-size: 22px; line-height: 1; transition: transform 200ms; }
.service-details[open] summary > span { transform: rotate(45deg); }
.service-details ul { padding-left: 17px; margin: 18px 0 3px; font-size: 12px; color: var(--studio-muted); line-height: 1.8; }
.service-details li { padding: 3px 0; }

.capabilities-section { background: #f8f9fc; border-block: 1px solid #ecf0f5; }
.capability-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.capability-tab { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 14px 8px 9px; border: 1px solid #e2e6ee; border-radius: 10px; background: #fff; color: #4c5669; font: 550 12px var(--font-body); cursor: pointer; transition: background 200ms,border-color 200ms,color 200ms,box-shadow 200ms; }
.capability-tab:first-child { padding-inline: 18px; }
.capability-tab:hover { border-color: #ab99d9; background: #f6f2fd; }
.capability-tab.is-active { color: #fff; background: linear-gradient(110deg,#1761dc,#6941d9); border-color: transparent; box-shadow: 0 6px 16px #4c4bc930; }
.capability-tab-icon { width: 26px; height: 26px; padding: 4px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px #e6e8f0; object-fit: contain; }
.capability-tab.is-active .capability-tab-icon { box-shadow: none; }
.capability-group { margin-top: 27px; }
.studio-section .capability-group-title { margin: 0 0 16px; font-size: 14px; color: #5a6477; font-weight: 600; }
.capability-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; }
.capability-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 128px; padding: 22px 10px 18px; border: 1px solid #e6e8f0; border-radius: 10px; background: #fff; color: var(--studio-ink); font-size: 11px; font-weight: 550; line-height: 1.4; text-align: center; transition: border-color 200ms,box-shadow 200ms,transform 200ms; animation: tile-in 460ms var(--motion-ease) backwards; animation-delay: calc(var(--tile-index, 0) * 32ms); }
.capability-tile img { width: 36px; height: 36px; object-fit: contain; }

.about-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; }
.about-card { border: 1px solid var(--studio-border); border-radius: 14px; overflow: hidden; background: #fff; transition: transform 250ms,box-shadow 250ms,border-color 250ms; }
.about-media { height: 202px; }
.about-body { padding: 25px; }
.about-body h3 { font-size: 18px; }
.about-body > p { font-size: 13px; color: var(--studio-muted); line-height: 1.8; margin: 0; }

.feedback-section { background: linear-gradient(180deg, #fff, #f9f8fd); border-top: 1px solid #ecf0f5; }
.feedback-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); gap: 32px; align-items: start; }
.feedback-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; min-height: 44px; margin-bottom: 18px; }
.feedback-summary { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--studio-muted); }
.feedback-summary .line-icon { width: 19px; height: 19px; color: var(--studio-purple); fill: #6540c726; }
.feedback-summary strong { font-size: 18px; font-weight: 650; color: var(--studio-ink); }
.feedback-sort { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.feedback-sort label { font-size: 12px; font-weight: 600; color: #323b4b; white-space: nowrap; }
.feedback-select { appearance: none; width: 100%; min-height: 47px; padding: 12px 40px 12px 14px; border: 1px solid #dce0e8; border-radius: 7px; background: #fbfcfd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e687a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center / 15px; font: 400 13px var(--font-body); color: var(--studio-ink); cursor: pointer; outline: none; }
.feedback-select:focus { border-color: #7e59ce; box-shadow: 0 0 0 3px #835aca17; }
.feedback-select:disabled { opacity: .65; cursor: wait; }
.feedback-sort .feedback-select { width: auto; min-height: 44px; padding-block: 10px; background-color: #fff; font-weight: 550; }
.contact-field.has-error .feedback-select { border-color: #b42332; }
/* The list scrolls inside its own box, so a long run of feedback never stretches the page. */
.feedback-list { display: flex; flex-direction: column; gap: 16px; max-height: clamp(420px, 72vh, 660px); padding: 2px 10px 2px 2px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c9bfe6 transparent; }
.feedback-list:focus-visible { outline-offset: 2px; border-radius: 14px; }
.feedback-card { flex: none; padding: 24px 26px; background: #fff; border: 1px solid var(--studio-border); border-radius: 14px; }
.feedback-card-head { display: flex; align-items: center; gap: 13px; }
.feedback-avatar { flex: none; width: 46px; height: 46px; border: 1px solid #e3def3; border-radius: 50%; background: #f1edfc; object-fit: cover; }
.feedback-avatar.is-initial { display: grid; place-content: center; color: var(--studio-purple); font-size: 17px; font-weight: 650; }
.feedback-card-who { flex: 1; min-width: 0; }
.feedback-card-name { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.35; color: var(--studio-ink); overflow-wrap: anywhere; }
.feedback-card-meta { margin: 3px 0 0; font-size: 11px; color: #636d7e; }
.feedback-card-service { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; margin: 16px 0 0; padding: 6px 12px 6px 9px; border: 1px solid #e3def3; border-radius: 8px; background: #faf8ff; font-size: 11px; line-height: 1.4; color: #5e687a; }
.feedback-card-service .line-icon { width: 15px; height: 15px; color: var(--studio-purple); }
.feedback-card-service strong { min-width: 0; font-weight: 650; color: var(--studio-ink); overflow-wrap: anywhere; }
.feedback-card-comment { margin: 12px 0 0; font-size: 13px; line-height: 1.8; color: #3d4658; white-space: pre-line; overflow-wrap: anywhere; }
/* One hue per step, poor to excellent; every pair clears 4.5:1 on its tint. */
.is-poor { --rating-ink: #a52431; --rating-tint: #fdeef0; --rating-line: #e7aab2; }
.is-fair { --rating-ink: #984c0b; --rating-tint: #fdf1e4; --rating-line: #e8bd92; }
.is-good { --rating-ink: #775a00; --rating-tint: #fbf5d6; --rating-line: #dccb80; }
.is-very-good { --rating-ink: #1c6b40; --rating-tint: #e9f7ef; --rating-line: #a3d5b8; }
.is-excellent { --rating-ink: #5a34b8; --rating-tint: #f1ebfd; --rating-line: #c2b0ea; }
.feedback-rating-badge { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; border-radius: 99px; background: var(--rating-tint); color: var(--rating-ink); font-size: 11px; font-weight: 650; white-space: nowrap; }
.feedback-rating-badge .line-icon { width: 18px; height: 18px; }
.feedback-thumbs, .feedback-image-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.feedback-thumbs { margin-top: 16px; }
.feedback-thumb { display: block; width: 84px; height: 84px; padding: 0; border: 1px solid var(--studio-border); border-radius: 10px; background: #f2f3f8; overflow: hidden; cursor: zoom-in; }
.feedback-thumb img, .feedback-image-list img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feedback-thumb img { transition: transform 300ms var(--motion-ease); }
.feedback-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 44px 24px; border: 1px dashed #d5cdea; border-radius: 14px; background: #fff; color: var(--studio-muted); font-size: 13px; text-align: center; }
.feedback-state.is-bare { border: 0; padding: 28px 0; }
.feedback-state p { margin: 0; line-height: 1.7; }
.feedback-state strong { display: block; color: var(--studio-ink); font-size: 15px; font-weight: 650; }
.feedback-state > .line-icon { width: 24px; height: 24px; color: #9c2635; }
.feedback-form-card { padding: 30px 28px; background: #fff; border: 1px solid #e5e3ed; border-radius: 14px; }
.studio-section .feedback-form-card h3 { margin: 0; }
.feedback-form-note { margin: 8px 0 24px; font-size: 12px; line-height: 1.7; color: var(--studio-muted); }
.feedback-signin { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.feedback-signin p { margin: 0; font-size: 13px; line-height: 1.8; color: #4c5669; }
.feedback-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.feedback-counter { font-size: 11px; color: #636d7e; font-variant-numeric: tabular-nums; }
.feedback-form textarea { min-height: 120px; }
.feedback-rating { min-width: 0; margin: 0; padding: 0; border: 0; }
.feedback-rating legend { margin-bottom: 8px; padding: 0; }
.feedback-rating-options { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; }
.feedback-rating-option { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 72px; padding: 10px 2px 9px; border: 1px solid #dce0e8; border-radius: 9px; background: #fbfcfd; color: #5e687a; font-size: 11px; font-weight: 600; line-height: 1.25; text-align: center; cursor: pointer; transition: background 200ms,border-color 200ms,color 200ms,box-shadow 200ms; }
.feedback-rating-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.feedback-rating-option .line-icon { width: 25px; height: 25px; }
.feedback-rating-option:hover { border-color: var(--rating-line); color: var(--rating-ink); }
.feedback-rating-option.is-selected { border-color: var(--rating-ink); background: var(--rating-tint); color: var(--rating-ink); box-shadow: inset 0 0 0 1px var(--rating-ink); }
.feedback-rating-option:has(input:focus-visible) { outline: 3px solid #7a50da; outline-offset: 3px; }
.feedback-rating:disabled .feedback-rating-option { opacity: .65; cursor: wait; }
.feedback-rating.has-error .feedback-rating-option:not(.is-selected) { border-color: #dba4ab; }
.feedback-rating .contact-field-error { display: block; margin-top: 8px; }
.feedback-image-list li { position: relative; width: 84px; height: 84px; border: 1px solid #d9d1ee; border-radius: 10px; background: #f2f3f8; overflow: hidden; }
.feedback-image-remove { position: absolute; top: 0; right: 0; display: grid; place-content: start end; width: 44px; height: 44px; padding: 5px; border: 0; background: none; cursor: pointer; }
.feedback-image-remove span { display: grid; place-content: center; width: 24px; height: 24px; border-radius: 50%; background: #141a2ed9; color: #fff; }
.feedback-image-remove .line-icon { width: 12px; height: 12px; stroke-width: 2.4; }
.feedback-form .contact-form-actions .studio-button { width: 100%; }
.modal-backdrop.feedback-lightbox { padding: 20px; background: #0c1020e0; cursor: zoom-out; }
.feedback-lightbox-panel { position: relative; max-width: 100%; outline: none; cursor: default; animation: dialog-enter 300ms var(--motion-ease); }
.feedback-lightbox-panel img { display: block; max-width: 100%; max-height: calc(100dvh - 40px); border-radius: 10px; background: #141a2e; box-shadow: 0 24px 80px #00000066; }
.feedback-lightbox-close { position: absolute; top: 8px; right: 8px; display: grid; place-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #141a2ed9; color: #fff; cursor: pointer; }
.feedback-lightbox-close .line-icon { width: 18px; height: 18px; }

.contact-section { background: #f6f5fa; border-top: 1px solid #ece9f3; }
.contact-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 32px; align-items: start; }
.contact-form-card { padding: 34px; background: #fff; border: 1px solid #e5e3ed; border-radius: 14px; }
.contact-form { position: relative; display: flex; flex-direction: column; gap: 22px; }
.contact-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.contact-field label, .contact-label { font-size: 12px; font-weight: 600; color: #323b4b; }
.contact-field input, .contact-field textarea { width: 100%; border: 1px solid #dce0e8; border-radius: 7px; background: #fbfcfd; font: 400 13px var(--font-body); color: var(--studio-ink); padding: 13px 14px; outline: none; min-height: 47px; }
.contact-field textarea { resize: vertical; min-height: 145px; }
.contact-field input:focus, .contact-field textarea:focus { border-color: #7e59ce; box-shadow: 0 0 0 3px #835aca17; }
.contact-field input::placeholder, .contact-field textarea::placeholder { color: #747d8b; }
.contact-field.has-error input, .contact-field.has-error textarea { border-color: #b42332; }
.contact-field-error { color: #b42332; font-size: 12px; }
.contact-field-hint { color: #636d7e; font-size: 11px; line-height: 1.6; }
.contact-reply-note { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border: 1px dashed #d5cdea; border-radius: 8px; background: #faf8ff; font-size: 12px; color: #4c5669; overflow-wrap: anywhere; }
.contact-reply-note .line-icon { width: 17px; height: 17px; color: var(--studio-purple); }
.contact-reply-note strong { color: var(--studio-ink); font-weight: 600; }
.contact-attachment { position: relative; align-items: flex-start; }
.contact-field .contact-file-input { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.contact-field .contact-file-button { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 16px; border: 1px dashed #b9add8; border-radius: 8px; background: #faf8ff; color: #5f37b5; cursor: pointer; transition: background 200ms,border-color 200ms; }
.contact-field .contact-file-button:hover { background: #f2ecff; border-color: #8c70d2; }
.contact-file-input:focus-visible + .contact-file-button { outline: 3px solid #7a50da; outline-offset: 3px; }
.contact-file-input:disabled + .contact-file-button { opacity: .6; cursor: wait; }
.contact-file-button .line-icon { width: 16px; height: 16px; }
.contact-file-chip { display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 4px 4px 4px 14px; border: 1px solid #d9d1ee; border-radius: 8px; background: #faf8ff; font-size: 12px; color: var(--studio-ink); }
.contact-file-chip > .line-icon { width: 16px; height: 16px; color: var(--studio-purple); }
.contact-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.contact-file-size { color: #636d7e; white-space: nowrap; }
.contact-file-remove { display: grid; place-content: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 6px; background: none; color: #5e687a; cursor: pointer; }
.contact-file-remove:hover { background: #ece6fa; color: var(--studio-ink); }
.contact-file-remove .line-icon { width: 15px; height: 15px; }
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form-actions { display: flex; align-items: center; gap: 20px; margin-top: 2px; }
.contact-form-actions .studio-button { min-width: 160px; }
.contact-inline-button { background: none; border: 0; padding: 8px 4px; color: #5f37b5; font: 600 11px var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
.contact-aside { display: flex; flex-direction: column; gap: 18px; }
.contact-photo { border-radius: 13px; height: 155px; }
.contact-email-card, .office-card, .contact-social-card { padding: 25px 28px; background: #fff; border: 1px solid #e5e3ed; border-radius: 12px; }
.contact-email-card > .line-icon, .office-card > .line-icon { color: var(--studio-purple); width: 23px; height: 23px; }
.contact-aside h3 { margin: 12px 0 9px; font-size: 16px; }
.contact-social-card h3 { margin-top: 0; margin-bottom: 14px; }
.contact-email-card p { margin: 0; font-size: 12px; line-height: 1.8; color: var(--studio-muted); }
.contact-email-card a { color: #5f37b5; font-weight: 600; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; }
.office-card address { font-style: normal; font-size: 12px; line-height: 1.8; color: var(--studio-muted); max-width: 270px; }
.office-card a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 12px; color: #5f37b5; font-size: 11px; font-weight: 600; }
.office-card a .line-icon { width: 14px; height: 14px; }
.contact-status { display: flex; align-items: flex-start; gap: 12px; border: 1px solid; border-radius: 8px; padding: 16px; font-size: 13px; margin-bottom: 20px; }
.contact-status p { margin: 0; line-height: 1.7; }
.contact-status.is-success { color: #186146; background: #f0faf5; border-color: #b4deca; }
.contact-status.is-error { color: #9c2635; background: #fff4f4; border-color: #e8b6c0; }
.contact-reference { font-size: 11px; margin-top: 10px !important; }

/* Social glyphs are masks, so they take the text colour on any surface. */
.social-links { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; }
.social-link { display: grid; place-content: center; width: 44px; height: 44px; border: 1px solid #ffffff24; border-radius: 50%; color: #dfe4f1; transition: transform 220ms var(--motion-ease),background 220ms,border-color 220ms,color 220ms; }
.social-link.is-unlinked { opacity: .45; }
.social-glyph { display: block; width: 18px; height: 18px; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.social-glyph.facebook { -webkit-mask-image: url(../img/social/facebook.svg); mask-image: url(../img/social/facebook.svg); }
.social-glyph.github { -webkit-mask-image: url(../img/social/github.svg); mask-image: url(../img/social/github.svg); }
.social-glyph.linkedin { -webkit-mask-image: url(../img/social/linkedin.svg); mask-image: url(../img/social/linkedin.svg); }
.contact-social-card .social-link { border-color: #e0dcee; color: #4c4470; }

.studio-footer { position: relative; background: #101422; color: #bac1cf; padding: 56px 0 0; font-size: 12px; }
.studio-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--brand-line); opacity: .75; }
.studio-footer-grid { display: grid; grid-template-columns: 1.5fr .7fr 1.1fr 1fr; gap: 44px; padding-bottom: 44px; }
.footer-brand-column .studio-brand { width: 190px; }
.footer-brand-column > p { font-size: 12px; margin: 16px 0 20px; color: #c2c7d5; }
.footer-label { color: #fff; font-size: 11px; font-weight: 600; margin: 0 0 20px; }
.studio-footer-links { display: flex; flex-direction: column; align-items: start; gap: 9px; font-size: 11px; }
.studio-footer a:hover { color: #fff; }
.footer-office > p:not(.footer-label) { font-size: 11px; line-height: 1.9; margin: 0 0 12px; max-width: 250px; }
.footer-office a { font-size: 10px; color: #c5b5ef; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.footer-office .line-icon { width: 12px; height: 12px; }
.footer-email { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #c5b5ef; font-size: 11px; overflow-wrap: anywhere; }
.footer-email .line-icon { width: 15px; height: 15px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 15px; font-size: 10px; border-top: 1px solid #ffffff12; padding-block: 22px; color: #9ca5ba; }

.auth-provider { display: flex; gap: 12px; align-items: center; justify-content: center; border: 1px solid #747775; background: #fff; color: #1f1f1f; border-radius: 4px; min-height: 44px; font: 500 14px Arial,sans-serif; padding: 11px 16px; cursor: pointer; width: 100%; }
.auth-provider.google { border-radius: 4px; font-family: "Google Sans","Segoe UI",Arial,sans-serif; }
.auth-provider.microsoft { font-family: "Segoe UI",Arial,sans-serif; color: #5e5e5e; border-color: #8c8c8c; }
.auth-provider:hover { background: #f7f8fa; box-shadow: 0 1px 3px #00000015; }
.auth-provider:disabled { opacity: .6; cursor: wait; }
.auth-brand { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }

/* "A new version is live" bar, added by js/version-check.js. */
.update-bar { position: fixed; z-index: 120; inset-inline: 0; bottom: calc(18px + env(safe-area-inset-bottom)); margin-inline: auto; display: flex; align-items: center; gap: 16px; width: max-content; max-width: calc(100% - 32px); padding: 10px 10px 10px 18px; border: 1px solid #ffffff1f; border-radius: 12px; background: #141a2e; color: #dfe4f1; box-shadow: 0 14px 40px #0b102040; font-size: 12px; line-height: 1.5; animation: soft-enter 300ms var(--motion-ease); }
.update-bar strong { color: #fff; font-weight: 600; }
.update-bar-button { flex: none; min-height: 40px; padding: 8px 16px; border: 0; border-radius: 8px; background: linear-gradient(110deg,#346edb,#7950d3); color: #fff; font: 600 12px var(--font-body); cursor: pointer; }

@keyframes header-in { from { transform: translateY(-100%); } }
@keyframes scroll-progress { to { transform: scaleX(1); } }
@keyframes aurora-drift { to { transform: translate3d(7%, 9%, 0) scale(1.18); } }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes logo-in { from { opacity: 0; transform: scale(.9); filter: blur(14px); } }
@keyframes logo-glow { from { opacity: .45; } to { opacity: 1; } }
@keyframes logo-shine { from { background-position: 130% 0; } 45%, to { background-position: -30% 0; } }
@keyframes scroll-cue { 50% { transform: translateY(6px); } }
@keyframes tile-in { from { opacity: 0; transform: translateY(12px) scale(.96); } }

@media (hover:hover) and (pointer:fine) {
    .purpose-card:hover, .service-card:hover, .about-card:hover { transform: translateY(-4px); border-color: #cbc0e7; box-shadow: 0 14px 34px #4f3b7914; }
    .purpose-card:hover .photo-tint img, .service-card:hover .photo-tint img, .about-card:hover .photo-tint img { transform: scale(1.06); }
    .purpose-card:hover .photo-tint::after, .service-card:hover .photo-tint::after, .about-card:hover .photo-tint::after { opacity: .7; }
    .capability-tile:hover { transform: translateY(-3px); box-shadow: 0 8px 20px #4f3b7914; border-color: #b8a7df; }
    a.social-link:hover { background: linear-gradient(135deg,#1761dc,#8a3bff); border-color: transparent; color: #fff; transform: translateY(-3px); }
    .feedback-thumb:hover img { transform: scale(1.07); }
}
@media (max-width:1199px) {
    .studio-nav { width: calc(100% - 48px); gap: 18px; }
    .studio-nav-links { gap: 16px; }
    .studio-nav-account { padding-left: 16px; }
    .studio-account-name { display: none; }
    .studio-container { width: calc(100% - 64px); }
    .purpose-card { grid-template-columns: 1fr; }
    .purpose-card .photo-tint { min-height: 0; height: 180px; }
    .capability-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
    .feedback-layout { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 26px; }
}
@media (max-width:999px) {
    .studio-nav-links { display: none; }
    .studio-nav-account { margin-left: auto; border: 0; }
    .studio-nav-toggle { display: inline-flex !important; }
    .studio-section { padding-block: 66px; }
    .services-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .service-card, .service-card:nth-child(4), .service-card:nth-child(5) { grid-column: auto; }
    .service-card:last-child { grid-column: 1 / -1; }
    .capability-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .about-grid { gap: 16px; }
    .about-body { padding: 20px; }
    .about-media { height: 170px; }
    .studio-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .contact-layout { gap: 22px; grid-template-columns: 1.3fr 1fr; }
    .contact-form-card { padding: 25px; }
    .contact-name-row { grid-template-columns: 1fr; }
    .feedback-layout { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width:599px) {
    :root { --nav-height: 70px; }
    .studio-nav { width: calc(100% - 32px); gap: 10px; }
    .brand-mark { height: 34px; }
    .studio-signin { padding-inline: 11px; font-size: 11px; gap: 7px; }
    .studio-signin .line-icon { width: 13px; height: 13px; }
    .studio-nav-account { padding-left: 0; }
    .studio-container { width: calc(100% - 40px); }
    .hero-content { padding-block: 64px 88px; }
    .hero-logo { width: min(100%, 330px); margin-bottom: 30px; }
    .hero-tagline { font-size: 29px; max-width: 320px; margin: auto; }
    .studio-hero .studio-actions { margin-top: 32px; }
    .studio-actions { flex-direction: column; align-items: stretch; max-width: 295px; margin-inline: auto; gap: 11px; }
    .studio-section { padding-block: 55px; }
    .studio-section-heading { gap: 10px; margin-bottom: 27px; }
    .studio-section h2 { font-size: 29px; }
    .section-description { font-size: 13px; margin-top: 14px; }
    .purpose-grid, .services-grid, .about-grid, .contact-layout { grid-template-columns: 1fr; gap: 22px; }
    .purpose-card-body { padding: 25px; }
    .service-card:last-child { grid-column: auto; }
    .service-media { height: 190px; }
    .service-body > p { min-height: 0; }
    .capability-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .capability-tabs { gap: 7px; margin-bottom: 28px; }
    .capability-tab { padding: 6px 11px 6px 7px; font-size: 11px; gap: 7px; }
    .capability-tile { min-height: 120px; }
    .about-media { height: 205px; }
    .about-body { padding: 25px; }
    .contact-form-card { padding: 23px; }
    .contact-name-row { gap: 22px; }
    .contact-form-actions .studio-button { width: 100%; }
    .contact-photo { height: 180px; }
    .feedback-list { max-height: min(68vh, 520px); padding-right: 6px; }
    .feedback-card { padding: 20px; }
    .feedback-card-head { flex-wrap: wrap; row-gap: 10px; }
    .feedback-card-who { flex-basis: calc(100% - 59px); }
    .feedback-rating-badge { margin-left: 59px; }
    .feedback-form-card { padding: 23px; }
    .feedback-rating-option { font-size: 10px; }
    .feedback-sort { width: 100%; }
    .feedback-sort .feedback-select { flex: 1; }
    .studio-footer { padding-top: 44px; }
    .studio-footer-grid { gap: 32px; grid-template-columns: 1fr; }
    .footer-bottom { font-size: 9px; }
}
@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
    .hero-tagline span { opacity: 1 !important; transform: none !important; }
    .hero-logo::after { display: none; }
    .purpose-card:hover, .service-card:hover, .about-card:hover, .capability-tile:hover, .studio-button.primary:hover, .studio-button:hover, a.social-link:hover, .photo-tint img, .feedback-thumb:hover img { transform: none !important; }
}