/* ==========================================================================
   NovaPersona — Violet & Gold Dark Theme
   --------------------------------------------------------------------------
   Loaded AFTER the Webflow stylesheet. It never edits the base sheet; it only
   restates the colour half of every rule that carried one, so the layout,
   spacing and interactions stay exactly as Webflow published them.

   Palette
     violet  #1e0038  (brand base)
     gold    #cba358  (brand accent)
   ========================================================================== */

:root,
.body,
.style-guide {
  /* ---- surfaces (dark → light) ---- */
  --dk-bg:          #140026;   /* deepest ground, page canvas            */
  --dk-bg-2:        #1e0038;   /* brand violet, alternating sections     */
  --dk-surface:     #24073f;   /* cards, nav, inputs                     */
  --dk-surface-2:   #2d0f50;   /* raised cards, pills, dark buttons      */
  --dk-surface-3:   #391a63;   /* hover state for raised surfaces        */

  /* ---- hairlines ---- */
  --dk-line:        rgba(203, 163, 88, .20);
  --dk-line-2:      rgba(203, 163, 88, .38);
  --dk-line-solid:  #3a2160;

  /* ---- accent ---- */
  --dk-gold:        #cba358;
  --dk-gold-2:      #e0c184;
  --dk-gold-deep:   #a8823f;
  --dk-gold-soft:   rgba(203, 163, 88, .14);
  --dk-on-gold:     #1a0030;

  /* ---- type ---- */
  --dk-text:        #f4eee3;   /* headings, primary copy                 */
  --dk-text-2:      #c6b8d6;   /* body copy, secondary                   */
  --dk-text-3:      #9384ab;   /* captions, meta, disabled               */

  /* ---- effects ---- */
  --dk-shadow:      0 24px 60px rgba(0, 0, 0, .55);
  --dk-glow:        0 0 0 1px rgba(203, 163, 88, .28);
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Base ground
   -------------------------------------------------------------------------- */
/* A soft violet aurora on the root element keeps large flat areas from reading
   as dead black-purple. It sits on <html> so nothing in the document stacking
   order has to be touched. */
html {
  background-color: var(--dk-bg);
  background-image:
    radial-gradient(1100px 620px at 12% 0%, rgba(90, 34, 150, .38), transparent 62%),
    radial-gradient(900px 520px at 92% 6%, rgba(203, 163, 88, .09), transparent 60%),
    radial-gradient(1000px 700px at 50% 100%, rgba(58, 18, 104, .42), transparent 65%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body,
body.body,
body.style-guide {
  background-color: transparent;
  color: var(--dk-text-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--dk-gold);
  color: var(--dk-on-gold);
}

::-moz-selection {
  background: var(--dk-gold);
  color: var(--dk-on-gold);
}

/* Scrollbar */
* {
  scrollbar-color: var(--dk-gold-deep) var(--dk-bg);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--dk-bg);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--dk-gold-deep), #6b3f8f);
  border: 2px solid var(--dk-bg);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(var(--dk-gold), #8a55b3);
}


/* ==========================================================================
   2. Generated layer - every colour-bearing rule from the Webflow sheet,
      restated for the dark palette. Selectors match the source exactly.
   ========================================================================== */

mark {
  color: var(--dk-on-gold);
  background: var(--dk-gold);
}
body {
  color: var(--dk-text);
  background-color: var(--dk-surface);
}
.w-button {
  color: var(--dk-on-gold);
  background-color: var(--dk-gold);
}
.w-webflow-badge {
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.5);
  color: var(--dk-text-3) !important;
  background-color: var(--dk-surface) !important;
}
blockquote {
  border-left: 5px solid var(--dk-line);
}
.w-form-done {
  background-color: var(--dk-surface-2);
}
.w-form-fail {
  background-color: rgba(234,56,76,.16);
}
.w-input, .w-select {
  color: var(--dk-text);
  background-color: var(--dk-surface);
  border: 1px solid var(--dk-line);
}
.w-input::placeholder, .w-select::placeholder {
  color: var(--dk-text-3);
}
.w-input:focus, .w-select:focus {
  border-color: var(--dk-gold);
}
.w-input[disabled]:not(.w-input-disabled), .w-select[disabled]:not(.w-input-disabled), .w-input[readonly], .w-select[readonly], fieldset[disabled]:not(.w-input-disabled) .w-input, fieldset[disabled]:not(.w-input-disabled) .w-select {
  background-color: var(--dk-surface);
}
.w-select {
  background-color: var(--dk-surface);
}
.w-file-upload-default, .w-file-upload-uploading, .w-file-upload-success {
  color: var(--dk-text);
}
.w-file-upload-uploading-btn {
  background-color: var(--dk-surface);
  border: 1px solid var(--dk-line);
}
.w-file-upload-file {
  background-color: var(--dk-surface);
  border: 1px solid var(--dk-line);
}
.w-file-upload-label {
  background-color: var(--dk-surface);
  border: 1px solid var(--dk-line);
}
.w-widget-twitter-count-shim {
  background: var(--dk-surface);
  border: 1px solid var(--dk-line);
}
.w-widget-twitter-count-shim .w-widget-twitter-count-inner {
  color: var(--dk-text-3);
}
.w-widget-twitter-count-shim:not(.w--vertical):before {
  border-color: #75869600 var(--dk-line) #75869600 #75869600;
}
.w-widget-twitter-count-shim:not(.w--vertical):after {
  border-color: #fff0 var(--dk-line) #fff0 #fff0;
}
.w-widget-twitter-count-shim.w--vertical:before {
  border-color: var(--dk-line) #75869600 #75869600;
}
.w-widget-twitter-count-shim.w--vertical:after {
  border-color: var(--dk-line) #fff0 #fff0;
}
.w-background-video {
  color: var(--dk-text);
}
.w-slider {
  background: var(--dk-surface-2);
}
.w-slider-nav.w-shadow > div {
  box-shadow: 0 0 3px rgba(0,0,0,.5);
}
.w-slider-nav-invert {
  color: var(--dk-text);
}
.w-slider-nav-invert > div {
  background-color: rgba(48,18,90,.6);
}
.w-slider-nav-invert > div.w-active {
  background-color: var(--dk-surface-2);
}
.w-slider-dot {
  background-color: rgba(245,239,228,.45);
}
.w-slider-dot.w-active {
  background-color: var(--dk-surface);
}
.w-slider-dot:focus {
  box-shadow: 0 0 0 2px rgba(203,163,88,.5);
}
.w-slider-arrow-left, .w-slider-arrow-right {
  color: var(--dk-text);
}
.w-dropdown-btn, .w-dropdown-toggle, .w-dropdown-link {
  color: var(--dk-text);
}
.w-dropdown-list {
  background: var(--dk-surface-2);
}
.w-dropdown-link {
  color: var(--dk-text);
}
.w-dropdown-link.w--current {
  color: var(--dk-gold);
}
.w-lightbox-backdrop {
  color: var(--dk-text);
  background: rgba(10,0,20,.92);
}
.w-lightbox-caption {
  background: rgba(12,0,24,.55);
}
.w-lightbox-thumbnail {
  background: var(--dk-surface-2);
}
.w-lightbox-spinner:after {
  border-bottom-color: var(--dk-line);
}
.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after, .w-richtext .w-richtext-figure-selected[data-rt-type="video"] div:after, .w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div, .w-richtext .w-richtext-figure-selected[data-rt-type="image"] div {
  outline: 2px solid var(--dk-gold);
}
.w-nav {
  background: var(--dk-surface-2);
}
.w-nav-brand {
  color: var(--dk-text);
}
.w-nav-link {
  color: var(--dk-text);
}
.w-nav-link.w--current {
  color: var(--dk-gold);
}
[data-nav-menu-open] {
  background: var(--dk-surface-2);
}
.w-nav-button.w--open {
  color: var(--dk-text);
  background-color: var(--dk-surface-2);
}
.w-tab-link {
  color: var(--dk-text);
  background-color: var(--dk-surface-2);
}
.w-tab-link.w--current {
  background-color: var(--dk-surface-2);
}
.w-dyn-empty {
  background-color: var(--dk-surface-2);
}
.w-checkbox-input--inputType-custom {
  border: 1px solid var(--dk-line);
}
.w-checkbox-input--inputType-custom.w--redirected-checked {
  background-color: var(--dk-gold);
  border-color: var(--dk-gold);
}
.w-checkbox-input--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px rgba(203,163,88,.45);
}
.w-backgroundvideo-backgroundvideoplaypausebutton:focus-visible {
  outline: 2px solid var(--dk-gold);
}
body {
  background-color: var(--dk-surface);
  color: var(--dk-text-2);
}
h1 {
  color: var(--dk-text);
}
h2 {
  color: var(--dk-text);
}
h3 {
  color: var(--dk-text);
}
h4 {
  color: var(--dk-text);
}
h5 {
  color: var(--dk-text);
}
p {
  color: var(--dk-text-2);
}
blockquote {
  border-left: 5px solid var(--dk-line);
}
.styleguide-heading {
  color: var(--dk-text);
}
.grey-text {
  color: var(--dk-text-2);
}
.typography-card {
  background-color: var(--dk-surface-2);
}
.text-107px {
  color: var(--dk-text);
}
.text-55px {
  color: var(--dk-text-2);
}
.text-55px.white {
  color: var(--dk-text);
}
.text-55px.black {
  color: var(--dk-text);
}
.text-35px {
  color: var(--dk-text);
}
.text-35px.cta {
  color: var(--dk-text);
}
.text-24px {
  color: var(--dk-text);
}
.text-24px.grey-01 {
  color: var(--dk-text-2);
}
.body-text {
  color: var(--dk-text-2);
}
.body-text.black {
  color: var(--dk-text);
}
.body-text.cat {
  color: var(--dk-text);
}
.text-18px {
  color: var(--dk-text-2);
}
.text-18px.black {
  color: var(--dk-text);
}
.text-18px.semi-bold {
  color: var(--dk-text);
}
.text-18px.grey-02 {
  color: var(--dk-text-2);
}
.text-18px.white {
  color: var(--dk-text);
}
.text-18px.grey {
  color: var(--dk-text);
}
.text-18px.grey-04 {
  color: var(--dk-text-3);
}
.text-28px {
  color: var(--dk-text);
}
.text-28px.grey-01 {
  color: var(--dk-text-2);
}
.text-28px.white {
  color: var(--dk-text);
}
.text-69px {
  color: var(--dk-text);
}
.text-86px {
  color: var(--dk-text);
}
.color-card {
  background-color: var(--dk-surface-2);
}
.color.white {
  background-color: var(--dk-surface);
}
.color.black {
  background-color: var(--dk-bg);
}
.color.grey-color {
  background-color: var(--dk-surface-2);
}
.color.grey-6 {
  border: .5px solid var(--dk-line);
  background-color: var(--dk-surface-2);
}
.color.grey-04 {
  background-color: var(--dk-surface-2);
}
.color.bg-color {
  background-color: var(--dk-bg-2);
}
.color.grey-05 {
  background-color: var(--dk-surface-2);
}
.color.brand-color {
  background-color: var(--dk-gold);
}
.color.bg-black {
  background-color: var(--dk-surface-2);
}
.button-card {
  background-color: var(--dk-surface-2);
}
.hire-me-button-wrap {
  background-color: var(--dk-bg);
  color: var(--dk-text);
}
.button-icon {
  color: var(--dk-text);
}
.hire-me-icon {
  color: var(--dk-text);
}
.video-button-wrap {
  border: 1px solid var(--dk-line);
  background-color: var(--dk-surface);
  color: var(--dk-text);
}
.video-icon {
  color: var(--dk-text);
}
.video-icon.is-relative {
  color: var(--dk-text);
}
.video-icon.is-absolute {
  color: var(--dk-text);
}
.video-text.is-relative {
  color: var(--dk-text);
}
.video-text.is-absolute {
  color: var(--dk-text);
}
.navbar {
  border-bottom: 1px solid var(--dk-line);
}
.footer-section {
  background-image: url("https://cdn.prod.website-files.com/68a9d12699bd47b077398cae/68a9d12699bd47b077398cb9_F%20BG.webp"), linear-gradient(360deg, rgba(30,0,56,0) 60%, var(--dk-surface));
}
.footer-social-media {
  border: 1px solid var(--dk-line);
  color: var(--dk-text-2);
}
.footer-social-media:hover {
  color: var(--dk-text);
}
.contact-icon {
  border: 1px solid var(--dk-line);
}
.footer-social-media-wrapper {
  color: var(--dk-text-2);
}
.footer-copyright-wrapper {
  border-color: var(--dk-line);
}
.footer-page-link {
  color: var(--dk-text-2);
}
.footer-page-link:hover {
  color: var(--dk-text);
}
.link, .link-2, .link-3 {
  color: var(--dk-text-2);
}
.hero-social-media {
  border: 1px solid var(--dk-line);
  background-color: var(--dk-bg-2);
  color: var(--dk-text);
}
.brand-right-shadow {
  background-image: linear-gradient(90deg, rgba(30,0,56,0), var(--dk-bg-2) 70%);
}
.brand-left-shadow {
  background-image: linear-gradient(90deg, var(--dk-bg-2), rgba(30,0,56,0) 70%);
}
.about-me-content-header {
  color: var(--dk-text);
}
.about-me-content-header.about-me-inner-page {
  color: var(--dk-text);
}
.about-me-content-wrapper {
  background-color: var(--dk-surface-2);
}
.about-me-experience-wrapper {
  background-color: var(--dk-bg-2);
}
.about-me-contact-icon {
  border: 1px solid var(--dk-line);
}
.about-me-contact-icon.white {
  border-color: var(--dk-line);
  background-color: var(--dk-surface);
}
.number-count {
  border-left: 1px solid var(--dk-line);
}
.number-count.inner-page {
  background-color: var(--dk-bg-2);
}
.counter-text {
  color: var(--dk-text);
}
.counter-text.black {
  color: var(--dk-text);
}
.service-item {
  border-bottom: .5px solid var(--dk-line);
}
.service-h3-heading.first {
  color: var(--dk-text);
}
.srvice-list {
  color: var(--dk-text-2);
}
.primary-button-2 {
  color: var(--dk-text);
  background-color: var(--dk-surface);
}
.why-choose-link {
  border: 1px solid var(--dk-line);
}
.why-choose-link.w--current {
  border: 1px solid var(--dk-line);
  background-image: linear-gradient(rgba(203,163,88,.10), rgba(203,163,88,.10)), url("https://cdn.prod.website-files.com/68a9d12699bd47b077398cae/68a9d12699bd47b077398cda_Why%20Choose%20BG.webp");
}
.text-28px-why-choose {
  color: var(--dk-text);
}
.philosophy-section {
  background-color: var(--dk-bg-2);
}
.philosophy-section.extra-padding {
  background-color: var(--dk-surface-2);
}
.text-shadow {
  background-color: rgba(16,0,32,.72);
}
.black-text {
  color: var(--dk-text);
}
.case-study-card {
  border: 1px solid var(--dk-line);
}
.case-study-grid-card {
  border-color: var(--dk-line);
}
.case-study-list {
  color: var(--dk-text-2);
}
.case-study-second-card {
  border: 1px solid var(--dk-line);
  background-color: var(--dk-bg-2);
}
.case-study-second-card.third-card {
  background-color: var(--dk-surface-2);
}
.skill {
  border: 1px solid var(--dk-line);
  color: var(--dk-text);
}
.skill:hover {
  background-color: var(--dk-surface-2);
  color: var(--dk-text);
}
.phone-holder-shadow {
  background-color: rgba(10,0,20,.35);
}
.how-it-work-content {
  border-left: 1px solid var(--dk-line);
}
.testimonial-section {
  background-color: var(--dk-bg-2);
}
.testimonial-section.extra-padding {
  background-color: rgba(255,255,255,.04);
}
.testimonial-ink {
  border: 1px solid var(--dk-line);
}
.testimonial-ink.w--current {
  border: 1px solid var(--dk-line);
}
.experience-accordion {
  border: 1px solid var(--dk-line);
}
.my-creative-edge-card-wrapper {
  background-color: var(--dk-surface);
}
.testimonial-card-wrapper {
  background-color: var(--dk-surface);
  box-shadow: 0 14px 32px rgba(0,0,0,.5);
}
.testimonial-client-name {
  background-color: var(--dk-surface-2);
  color: var(--dk-text);
}
.icon-license {
  background-color: var(--dk-bg-2);
}
.license-paragrapg {
  color: var(--dk-text-2);
}
.image-license {
  background-color: var(--dk-bg-2);
}
.license-link {
  color: var(--dk-text);
}
.image-heading {
  color: var(--dk-text);
}
.license {
  color: var(--dk-text);
}
.changelog-card {
  background-color: var(--dk-bg-2);
}
.version-heading {
  color: var(--dk-text);
}
.text-18px-2 {
  color: var(--dk-text-3);
}
._404-text {
  color: var(--dk-text-2);
}
.instruction-holder {
  background-color: var(--dk-bg-2);
}
.instruction-card {
  border-left: 1px solid var(--dk-line);
}
.avatar-group-item {
  border: 1px solid var(--dk-line);
}
.client-holder {
  border: 1px solid var(--dk-line);
  background-color: var(--dk-surface-2);
}
.cta-wrapper {
  background-image: linear-gradient(rgba(12,0,24,.85), rgba(12,0,24,.85)), url("https://cdn.prod.website-files.com/68a9d12699bd47b077398cae/68a9d12699bd47b077398d7a_BG.webp");
}
.text-24-px {
  color: var(--dk-text);
}
.text-24-px.white {
  color: var(--dk-text);
}
.cts-project-card {
  border-left: 1px solid var(--dk-line);
}
.award-card-wrapper {
  border-bottom: 1px solid var(--dk-line);
  border-right-color: var(--dk-line);
  border-left-color: var(--dk-line);
}
.award-card-wrapper:hover {
  border-bottom-color: var(--dk-line);
}
.text-30px {
  color: var(--dk-text);
}
.success-message {
  background-color: var(--dk-surface);
}
.success-message.blog {
  background-color: var(--dk-bg-2);
}
.form-input {
  border: 1px solid var(--dk-line);
  background-color: var(--dk-surface);
  color: var(--dk-text-2);
}
.form-input:focus {
  border-color: var(--dk-line);
  color: var(--dk-text-2);
}
.form-input::placeholder {
  color: var(--dk-text-2);
}
.form-button {
  border: 1px solid var(--dk-line-2);
  background-color: var(--dk-surface-2);
  color: var(--dk-text);
  box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.form-button:hover {
  background-color: var(--dk-gold);
  border-color: var(--dk-gold);
}
.form-button:focus {
  background-color: var(--dk-gold);
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 0 0 4px rgba(203,163,88,.22);
}
.form-button.is-button-small {
  background-color: var(--dk-surface-2);
}
.error-message {
  background-color: var(--dk-surface);
}
.error-message.blog {
  background-color: var(--dk-bg-2);
}
.text-16px {
  color: var(--dk-text-2);
}
.text-16px.white {
  color: var(--dk-text);
}
.text-16px.grey {
  color: var(--dk-text);
}
.text-16px.black {
  color: var(--dk-text);
}
.text-16px.section-title {
  color: var(--dk-text);
}
.text-16px.section-title.white {
  color: var(--dk-text);
}
.hero-social-media-holder {
  background-color: rgba(12,0,24,.72);
}
.blog-hero-section {
  background-color: var(--dk-bg-2);
}
.single-page-link {
  color: var(--dk-text-2);
}
.rich-text blockquote {
  background-color: var(--dk-bg);
  color: var(--dk-text);
}
.rich-text ul {
  color: var(--dk-text-2);
}
.single-blog-category-wrapper {
  border: 1px solid var(--dk-line);
  color: var(--dk-text);
}
.single-blog-social-link {
  border: 1px solid var(--dk-line);
  color: var(--dk-text);
}
.single-blog-social-link:hover {
  background-color: var(--dk-surface-2);
}
.input-field {
  border: 1px solid var(--dk-line);
  color: var(--dk-text-2);
}
.input-field:focus {
  border-color: var(--dk-line);
}
.submit-button {
  background-color: var(--dk-surface-2);
  color: var(--dk-text);
}
.submit-button:hover {
  background-color: var(--dk-bg);
}
.text-area {
  border: 1px solid var(--dk-line);
  color: var(--dk-text-2);
}
.text-area:focus {
  border-color: var(--dk-line);
}
.single-work-client-card {
  border-left: 1px solid var(--dk-line);
}
.work-tool {
  border-left: 1px solid var(--dk-line);
}
.case-study-hero-section {
  background-color: var(--dk-bg-2);
}
.case-study-detail-card {
  border-left: 1px solid var(--dk-line);
}
.case-study-result-card {
  background-color: var(--dk-bg-2);
  border: .5px solid var(--dk-line);
}
.case-study-result-card:hover {
  background-color: var(--dk-gold);
}
.section-page-hero {
  background-color: var(--dk-bg-2);
}
.service-pricing-card {
  border: 1px solid var(--dk-line);
}
.service-pricing-card.black {
  background-color: var(--dk-surface-2);
}
.pricing-button-link {
  background-color: var(--dk-surface-2);
  color: var(--dk-text);
}
.pricing-button-link.white {
  background-color: var(--dk-gold);
}
.pricing-cta-wrapper {
  background-image: linear-gradient(rgba(16,0,32,.78), rgba(16,0,32,.78)), url("https://cdn.prod.website-files.com/68a9d12699bd47b077398cae/68ac6c630cff6c0478a50af2_e9dd7158af52d9dc0c6368a90864642881a9e168.webp");
}
.conatct-page-hero {
  background-color: var(--dk-bg-2);
}
.contact-input {
  background-color: var(--dk-surface);
  color: var(--dk-text-2);
  border: 1px solid var(--dk-line);
}
.contact-input:focus {
  color: var(--dk-text-2);
  border-color: var(--dk-line);
}
.contact-input::placeholder {
  color: var(--dk-text-2);
}
.button-form {
  background-color: var(--dk-surface-2);
  color: var(--dk-text);
}
.button-form:hover, .button-form:focus {
  background-color: var(--dk-bg);
}
.contact-form-wrapper {
  background-color: var(--dk-surface);
}
.reach-out-inner-card {
  background-color: var(--dk-bg-2);
}
.reach-out-inner-card:hover {
  background-color: var(--dk-gold);
}
.reach-out-icon-wrapper {
  border: 1px solid var(--dk-line);
}
.about-me-hero-section {
  background-color: var(--dk-bg-2);
}
.about-me-experience-section {
  background-color: var(--dk-surface-2);
}
.brand-card {
  border: 1px solid var(--dk-line);
}
.hero-image-wrapper {
  background-color: var(--dk-surface);
  box-shadow: 0 20px 34px rgba(0,0,0,.5);
}
.hero-social {
  border: 1px solid var(--dk-line);
  background-color: rgba(12,0,24,.6);
}
.hero-icon {
  color: var(--dk-text);
}
.client-big-text {
  color: var(--dk-text);
}
.text-20-px {
  color: var(--dk-text);
}
.text-20-px.grey-01 {
  color: var(--dk-text-2);
}
.red-dot {
  background-color: var(--dk-gold);
}
.nav-link {
  color: var(--dk-text-2);
}
.nav-link:hover {
  color: var(--dk-text);
}
.nav-link.w--current {
  color: var(--dk-text);
}
.hero-button {
  background-color: var(--dk-surface-2);
  color: var(--dk-text);
}
.hero-button-arrow-wrapper {
  background-color: var(--dk-gold);
}
.hero-button-text.is-relative {
  color: var(--dk-text);
}
.about-me-content-text.white {
  color: var(--dk-text);
}
.about-me-content-text.center.left {
  color: var(--dk-text);
}
.text-3 {
  color: var(--dk-text);
}
.service-black-card-wrapper {
  background-color: var(--dk-surface-2);
}
.best-price {
  background-color: var(--dk-surface);
}
.ptimary-button-bg {
  background-color: var(--dk-gold);
}
.primary-arrow.is-relative {
  color: var(--dk-text);
}
.primary-arrow.is-absolute {
  color: var(--dk-text);
}
.secondary-button-arrow-wrapper {
  background-color: var(--dk-surface-2);
}
.secondry-button {
  background-color: var(--dk-gold);
  color: var(--dk-on-gold);
}
.secondry-button.tablet {
  background-color: var(--dk-gold);
}
.secondary-button-bg {
  background-color: var(--dk-surface-2);
}
.secondary-arrow.is-relative {
  color: var(--dk-text);
}
.secondary-arrow.is-absolute {
  color: var(--dk-text);
}
.secondary-button-text.is-relative {
  color: var(--dk-text);
}
.secondary-button-text.is-absolute {
  color: var(--dk-text);
}
.project-button {
  background-color: var(--dk-surface-2);
}
.text-40px {
  color: var(--dk-text);
}
.text-40px.white {
  color: var(--dk-text);
}
.text-40px.grey-02 {
  color: var(--dk-text-2);
}
.hero-right-text-wrapper {
  border-left: 1px solid var(--dk-line);
}
.grey-04 {
  color: var(--dk-text-3);
}
.award-overlay {
  background-color: var(--dk-gold);
}
.case-study-overlay {
  background-color: rgba(12,0,24,.55);
}
.cta-button {
  background-color: var(--dk-gold);
  color: var(--dk-on-gold);
}
.cta-button-bg {
  background-color: var(--dk-surface);
}
.cta-button-text.is-relative {
  color: var(--dk-text);
}
.cta-button-text.is-absolute {
  color: var(--dk-text);
}
.cta-button-arrow-wrapper {
  background-color: var(--dk-surface-2);
}
.cta-arrow.is-relative {
  color: var(--dk-text);
}
.cta-arrow.is-absolute {
  color: var(--dk-text);
}
.about-me-timeline-section {
  color: var(--dk-text);
  background-color: var(--dk-bg-2);
}
.dotted-line {
  border: 1px solid var(--dk-line);
}
.advertise-icon-wrapper {
  color: var(--dk-text);
  border: 1px solid var(--dk-line);
}
.advertise-icon-wrapper.icon-two {
  background-color: var(--dk-surface-2);
  border-color: var(--dk-line);
}
.advertise-icon-wrapper.icon-one {
  border-color: var(--dk-line);
}
.work-process-small-circle {
  background-color: var(--dk-surface-2);
  color: var(--dk-text);
}
.teanding {
  color: var(--dk-text);
}
.blog-button {
  background-color: var(--dk-surface-2);
}
.blog-overlay {
  background-color: rgba(12,0,24,.55);
}
.case-study-button {
  background-color: var(--dk-surface-2);
}
.recent-case-study-white-heading, .case-study-subheading {
  color: var(--dk-text);
}
.breadcum-card {
  border: 1px solid var(--dk-line);
}
.breadcum-home {
  color: var(--dk-text-2);
}
.breadcum-home:hover {
  color: var(--dk-text);
}
.breadcum-home.w--current {
  color: var(--dk-text-2);
}
.breadcum-page {
  color: var(--dk-text);
}
.breadcum-page.w--current {
  color: var(--dk-text-2);
}
.accordion-icon-vertical-line {
  background-color: var(--dk-surface-2);
}
.faq-accordion {
  border-bottom: 1px solid var(--dk-line);
}
.accordion-icon-horizontal-line {
  background-color: var(--dk-surface-2);
}
.accordion-icon-component {
  border: 1px solid var(--dk-line);
}
.faq-icon-wrapper {
  color: var(--dk-text);
}
.small-section-wrapper {
  border: 1px solid var(--dk-line);
}
.small-section-buttlet-point {
  background-color: var(--dk-surface-2);
}
.small-section-buttlet-point.white {
  background-color: var(--dk-surface);
}
.breadcum-icon.is-relative {
  color: var(--dk-text);
}
.breadcum-icon.is-absolute {
  color: var(--dk-text);
}
.service-skill {
  border: 1px solid var(--dk-line);
}
.service-process-caed {
  border-bottom: 1px solid var(--dk-line);
}
.left-arrow-4 {
  border: 1px solid var(--dk-line);
}
.right-arrow-4 {
  border: 1px solid var(--dk-line);
}
.home-blog-button {
  background-color: var(--dk-surface-2);
}
.counter-number {
  color: var(--dk-text);
}
.counter-number.home-counter {
  color: var(--dk-text);
}
.counter-number.home-counter.black {
  color: var(--dk-text);
}
.about-me-description-heading.white {
  color: var(--dk-text);
}
.black-button {
  background-color: var(--dk-surface-2);
  color: var(--dk-text);
}
.black-button-text.is-relative {
  color: var(--dk-text);
}
.black-button-text.is-absolute {
  color: var(--dk-text);
}
.black-button-arrow.is-relative {
  color: var(--dk-text);
}
.black-button-arrow.is-absolute {
  color: var(--dk-text);
}
.black-button-white-arrow-wrapper {
  background-color: var(--dk-surface);
}
.white-button {
  background-color: var(--dk-surface);
  color: var(--dk-text);
}
.white-button-text.is-relative {
  color: var(--dk-text);
}
.white-button-text.is-absolute {
  color: var(--dk-text);
}
.white-botton-arrow-wrapper {
  background-color: var(--dk-surface-2);
}
.checkout-hero-section {
  background-color: var(--dk-bg-2);
}
.order-wrapper {
  background-color: var(--dk-bg-2);
}
.contact-form-input {
  border: 1px solid var(--dk-line);
  background-color: var(--dk-surface);
  color: var(--dk-text-2);
  box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.contact-form-input::placeholder {
  color: var(--dk-text-2);
}
.checked-item.w--redirected-checked {
  border: 1px solid var(--dk-line);
  background-image: linear-gradient(to bottom, var(--dk-bg-2), var(--dk-bg-2));
}
.checkbox-field {
  border: 1px solid var(--dk-line);
}
.contact-form-button {
  background-color: var(--dk-bg);
  color: var(--dk-text);
  box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.contact-form-button:hover, .contact-form-button:focus, .contact-form-button:focus-visible, .contact-form-button[data-wf-focus-visible] {
  background-color: var(--dk-bg);
}
.pricing-service-card {
  background-color: var(--dk-bg-2);
}
.about-me-contact-icon-updated {
  background-color: var(--dk-gold);
}
.about-me-call-title {
  color: var(--dk-text);
}
.about-me-call-title.black {
  color: var(--dk-text);
}
.about-me-call-title.semi-bold {
  color: var(--dk-text);
}
.about-me-call-title.grey-02 {
  color: var(--dk-text-2);
}
.about-me-call-title.white {
  color: var(--dk-text);
}
.about-me-call-title.grey {
  color: var(--dk-text);
}
.about-me-call-title.grey-04 {
  color: var(--dk-text-3);
}
.about-me-call-subtitle {
  color: var(--dk-text-3);
}
.about-me-call-subtitle.black {
  color: var(--dk-text);
}
.about-me-call-subtitle.semi-bold {
  color: var(--dk-text);
}
.about-me-call-subtitle.grey-02 {
  color: var(--dk-text-2);
}
.about-me-call-subtitle.white {
  color: var(--dk-text);
}
.about-me-call-subtitle.grey {
  color: var(--dk-text);
}
.about-me-call-subtitle.grey-04 {
  color: var(--dk-text-3);
}
@media screen and (max-width: 991px) {
  .nav-menu {
    background-color: var(--dk-surface);
  }
  .nav-menu.tablet {
    background-color: var(--dk-surface);
    background-color: var(--dk-surface-2);
  }
  .menu-button.w--open {
    color: var(--dk-text);
  }
  .footer-section {
    background-image: linear-gradient(360deg, rgba(30,0,56,0) 60%, var(--dk-surface)), url("https://cdn.prod.website-files.com/68a9d12699bd47b077398cae/68a9d12699bd47b077398cb9_F%20BG.webp");
  }
  .award-card-wrapper {
    border-top-color: var(--dk-line);
  }
  .lottie-animation-2 {
    color: var(--dk-text);
  }
  .nav-link {
    color: var(--dk-text-2);
  }
  .nav-link:hover, .nav-link.w--current {
    color: var(--dk-text);
  }
  .faq-accordion {
    border-bottom: 1px solid var(--dk-line);
  }
}
@media screen and (max-width: 767px) {
  .nav-menu.tablet {
    background-color: var(--dk-surface);
    background-color: var(--dk-surface-2);
  }
  .form-button:hover {
    background-color: var(--dk-gold);
    border-color: var(--dk-gold);
  }
  .form-button.is-button-small:hover {
    background-color: var(--dk-bg);
  }
  .button-form:hover {
    background-color: var(--dk-bg);
  }
}
@media screen and (max-width: 479px) {
  .service-item {
    background-color: var(--dk-surface);
  }
  .hero-mobile-shadow.hide-desktop {
    background-image: linear-gradient(360deg, rgba(10,0,20,.88), rgba(30,0,56,0) 96%);
  }
}

/* ==========================================================================
   3. Hand-tuned layer — contrast, depth and accent placement
   ========================================================================== */

/* Let the root aurora show through the page. --------------------------------- */
body,
body.body,
body.style-guide {
  background-color: transparent;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
/* Apple-style frosted glass: lighter tint, heavier blur/saturation than a
   flat translucent bar, a hairline gold edge, and a soft inner top highlight
   plus outer shadow so the bar reads as a pane of glass floating over the
   page rather than a solid strip. */
.navbar {
  border-bottom: 1px solid rgba(203, 163, 88, .22);
  background-color: rgba(30, 8, 56, .46);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 8px 32px rgba(0, 0, 0, .28);
}

.navbar-wrapper {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* --------------------------------------------------------------------------
   Entrance — logo slides in with a fade from the left, the button from the
   right, on the same timing so they land together.
   -------------------------------------------------------------------------- */
@keyframes ksv-nav-in-left {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ksv-nav-in-right {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}

.navbar-brand {
  animation: ksv-nav-in-left .9s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: .15s;
}

.ksv-nav-connect {
  animation: ksv-nav-in-right .9s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: .15s;
}

/* Header has no wrap (logo left, button right, space-between, both fixed
   size) — on narrow phones the full "Book an Appointment" button no longer
   fits beside the logo and pushes past the right edge of the screen,
   forcing the whole page into a horizontally-scrollable, zoomed-out layout.
   Shrinking just the label text on small screens reclaims enough width. */
@media screen and (max-width: 479px) {
  .ksv-nav-connect .cta-button-text {
    font-size: 13px;
  }

  .ksv-nav-connect {
    padding-left: 12px;
  }
}

.navbar-brand {
  padding: 8px 0;
}

.nav-link {
  color: var(--dk-text-2);
}

.nav-link:hover,
.nav-link.w--current {
  color: var(--dk-gold);
}

.nav-menu,
.nav-menu.tablet {
  background-color: transparent;
}

@media screen and (max-width: 991px) {
  .nav-menu,
  .nav-menu.tablet {
    background-color: var(--dk-surface);
    border: 1px solid var(--dk-line);
    box-shadow: var(--dk-shadow);
  }
}

/* --------------------------------------------------------------------------
   Buttons — the template layers two text runs and a sliding fill per button.
   Rest state and hover state need opposite ink, so they are set explicitly.
   -------------------------------------------------------------------------- */

/* Gold fill at rest → violet ink at rest, light ink once the violet slides in */
.cta-button,
.secondry-button,
.secondry-button.tablet,
.secondry-button.desktop {
  background-color: var(--dk-gold);
  color: var(--dk-on-gold);
}

.cta-button-text.is-absolute,
.secondary-button-text.is-absolute {
  color: var(--dk-on-gold);
}

.cta-button-text.is-relative,
.secondary-button-text.is-relative {
  color: var(--dk-text);
}

.cta-button-bg,
.secondary-button-bg {
  background-color: var(--dk-bg-2);
}

.cta-button-arrow-wrapper,
.secondary-button-arrow-wrapper,
.white-botton-arrow-wrapper {
  background-color: var(--dk-on-gold);
  color: var(--dk-gold);
}

/* Violet fill at rest → light ink at rest, violet ink once the gold slides in */
.hero-button {
  background-color: var(--dk-surface-2);
  color: var(--dk-text);
  border: 1px solid var(--dk-line);
}

.hero-button-text.is-absolute {
  color: var(--dk-text);
}

.hero-button-text.is-relative {
  color: var(--dk-on-gold);
}

.ptimary-button-bg,
.award-overlay {
  background-color: var(--dk-gold);
}

.hero-button-arrow-wrapper,
.black-button-white-arrow-wrapper {
  background-color: var(--dk-gold);
  color: var(--dk-on-gold);
}

/* Solid violet buttons */
.form-button,
.button-form,
.submit-button,
.form-button.is-button-small {
  background-color: var(--dk-gold);
  border-color: var(--dk-gold);
  color: var(--dk-on-gold);
  box-shadow: 0 10px 26px rgba(203, 163, 88, .18);
}

.form-button:hover,
.button-form:hover,
.submit-button:hover,
.form-button.is-button-small:hover {
  background-color: var(--dk-gold-2);
  border-color: var(--dk-gold-2);
  color: var(--dk-on-gold);
}

.primary-button-2 {
  background-color: var(--dk-gold);
  color: var(--dk-on-gold);
}

.pricing-button-link {
  background-color: var(--dk-surface-2);
  color: var(--dk-text);
  border: 1px solid var(--dk-line);
}

.pricing-button-link.white {
  background-color: var(--dk-gold);
  border-color: var(--dk-gold);
}

.pricing-button-link.white .white-button-text,
.pricing-button-link.white .pricing-button-text {
  color: var(--dk-on-gold);
}

/* Round media buttons that sit on top of imagery */
.blog-button,
.home-blog-button,
.project-button {
  background-color: rgba(30, 0, 56, .55);
  border: 1px solid var(--dk-line-2);
  color: var(--dk-text);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* --------------------------------------------------------------------------
   Cards & surfaces — a hairline plus depth so panels read as raised
   -------------------------------------------------------------------------- */
.case-study-result-card,
.service-item,
.faq-accordion,
.award-card-wrapper,
.reach-out-inner-card,
.pricing-card,
.blog-card,
.testimonial-card {
  border-color: var(--dk-line);
}

.case-study-result-card:hover,
.reach-out-inner-card:hover {
  background-color: var(--dk-gold-soft);
  border-color: var(--dk-line-2);
}

/* Accent dots and swatches stay solid gold */
.red-dot,
.color.brand-color {
  background-color: var(--dk-gold);
}

/* --------------------------------------------------------------------------
   Typography accents
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.heading-style-h1, .heading-style-h2, .heading-style-h3 {
  color: var(--dk-text);
}

a {
  color: inherit;
}

.text-link,
.blog-link,
.footer-link:hover {
  color: var(--dk-gold);
}

blockquote {
  border-left-color: var(--dk-gold);
  color: var(--dk-text);
}

hr,
.divider,
.line {
  border-color: var(--dk-line);
  background-color: var(--dk-line-solid);
}

.dotted-line,
.advertise-icon-wrapper,
.accordion-icon-component {
  border-color: var(--dk-line-2);
  color: var(--dk-gold);
}

.advertise-icon-wrapper.icon-two {
  background-color: var(--dk-gold);
  border-color: var(--dk-gold);
  color: var(--dk-on-gold);
}

.accordion-icon-vertical-line,
.accordion-icon-horizontal-line {
  background-color: var(--dk-gold);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.contact-input,
.input-field,
.text-area,
.w-input,
.w-select,
textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"] {
  background-color: rgba(255, 255, 255, .035);
  border: 1px solid var(--dk-line);
  color: var(--dk-text);
}

.contact-input:focus,
.input-field:focus,
.text-area:focus,
.w-input:focus,
.w-select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus {
  border-color: var(--dk-gold);
  box-shadow: 0 0 0 3px rgba(203, 163, 88, .16);
  color: var(--dk-text);
  outline: none;
}

::placeholder {
  color: var(--dk-text-3);
  opacity: 1;
}

select option {
  background-color: var(--dk-surface);
  color: var(--dk-text);
}

/* Chrome autofill repaint */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--dk-text);
  -webkit-box-shadow: 0 0 0 1000px var(--dk-surface) inset;
  caret-color: var(--dk-text);
}

.w-form-done {
  background-color: var(--dk-gold-soft);
  border: 1px solid var(--dk-line-2);
  color: var(--dk-text);
}

.w-form-fail {
  background-color: rgba(234, 56, 76, .14);
  border: 1px solid rgba(234, 56, 76, .35);
  color: #ffb3bc;
}

/* --------------------------------------------------------------------------
   Focus visibility (keyboard users) — gold ring on a dark ground
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--dk-gold);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Media — photography needs a touch less glare against a dark ground
   -------------------------------------------------------------------------- */
img {
  color: var(--dk-text-3);
}

.w-lightbox-backdrop {
  background: rgba(10, 0, 20, .94);
}

/* --------------------------------------------------------------------------
   Webflow Interactions repaint these backgrounds inline at runtime from the
   site's IX2 data, so the theme has to outrank the inline style.
   -------------------------------------------------------------------------- */
.cta-button,
.secondry-button,
.secondry-button.tablet,
.secondry-button.desktop,
.hero-button-arrow-wrapper,
.black-button-white-arrow-wrapper,
.ptimary-button-bg,
.award-overlay {
  background-color: var(--dk-gold) !important;
}

.hero-button,
.cta-button-arrow-wrapper,
.secondary-button-arrow-wrapper,
.white-botton-arrow-wrapper,
.cta-button-bg,
.secondary-button-bg {
  background-color: var(--dk-on-gold) !important;
}

.cta-button-arrow-wrapper,
.secondary-button-arrow-wrapper,
.white-botton-arrow-wrapper {
  color: var(--dk-gold);
}

.hero-button-arrow-wrapper,
.black-button-white-arrow-wrapper {
  color: var(--dk-on-gold);
}

.blog-button,
.home-blog-button,
.project-button {
  background-color: rgba(30, 0, 56, .55) !important;
}

.faq-accordion,
.text-18px {
  background-color: transparent !important;
}

/* The "how it works" timeline dots animate between white and grey as the
   section scrolls; both ends need to read on violet. */
.advertise-icon-wrapper.icon-one,
.advertise-icon-wrapper.icon-two,
.advertise-icon-wrapper.icon-three,
.advertise-icon-wrapper.icon-four {
  background-color: var(--dk-surface-2) !important;
  border-color: var(--dk-line-2) !important;
  color: var(--dk-gold) !important;
}

/* Sticky service headings are repainted black by the scroll interaction. */
.service-h3-heading,
.service-h3-heading.first,
.service-h3-heading.second,
.service-h3-heading.third,
.service-h3-heading.fourth {
  color: var(--dk-text) !important;
  -webkit-text-fill-color: var(--dk-text) !important;
}

/* --------------------------------------------------------------------------
   Decorative background photography — several sections ship a near-white
   backdrop plate. Multiplying them through a violet keeps the texture while
   dropping them behind the type, and needs no knowledge of the image URLs.
   -------------------------------------------------------------------------- */
.footer-section,
.testimonial-section,
.testimonial-section.extra-padding,
.why-choose-link,
.why-choose-link.w--current {
  background-color: #1d0636;
  background-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
   Depth — the template's dark panels were flat greys. A one-stop gradient and
   a hairline keep them from reading as slabs of paint.
   -------------------------------------------------------------------------- */
.about-me-content-wrapper,
.about-me-experience-section,
.philosophy-section.extra-padding,
.service-black-card-wrapper,
.service-pricing-card.black,
.case-study-second-card.third-card {
  background-image: linear-gradient(160deg, rgba(203, 163, 88, .07), rgba(0, 0, 0, .18) 62%);
}

.service-pricing-card.black,
.case-study-second-card.third-card,
.philosophy-section.extra-padding {
  border: 1px solid var(--dk-line);
  box-shadow: var(--dk-shadow);
}

/* The mobile menu button is a Lottie whose paths carry a baked-in #333 fill.
   CSS beats the presentation attribute, so the burger simply repaints. */
.lottie-animation-2 path,
.menu-button [data-animation-type="lottie"] path {
  fill: var(--dk-text);
  stroke: none;
}

/* Anything filled gold carries violet ink, icons included. */
.about-me-contact-icon-updated,
.pricing-button-link.white,
.w-button,
.w-checkbox-input--inputType-custom.w--redirected-checked,
.color.brand-color {
  color: var(--dk-on-gold);
}

.pricing-button-link.white .pricing-button-text,
.pricing-button-link.white .white-button-text {
  color: var(--dk-on-gold);
}

/* --------------------------------------------------------------------------
   Logotypes ship as dark artwork on transparency — invert them for the dark
   ground rather than sitting them on a white plate. KSV logo is gold & purple
   so it doesn't need inverting.
   -------------------------------------------------------------------------- */
/* The Webflow nav shell hard-caps itself at max-height:77px, sized for the
   old, much shorter stock logo. With a taller logo that cap doesn't grow
   with its content (overflow stays visible instead of clipping), so the
   logo simply spilled out past the header's own background/border — never
   actually mis-positioned, just taller than the box drawn behind it. Letting
   the shell grow restores real vertical centering (its own 12px/12px
   top/bottom padding is already symmetric) and fixes mobile the same way. */
.navbar-no-shadow-container-2 {
  max-height: none !important;
}

.navbar-brand,
.navbar-brand.w--current {
  display: inline-flex !important;
  align-items: center;
  height: auto !important;
  max-height: none !important;
  min-height: 128px;
  max-width: none !important;
  overflow: visible !important;
}

.navbar-brand img[src*="ksv-logo"] {
  filter: none;
  width: 192px !important;
  height: 128px !important;
  object-fit: contain;
}

@media screen and (max-width: 479px) {
  .navbar-brand,
  .navbar-brand.w--current {
    min-height: 88px;
  }
  .navbar-brand img[src*="ksv-logo"] {
    width: 132px !important;
    height: 88px !important;
  }
}

.navbar-brand .image,
.navbar-brand img:not([src*="ksv-logo"]),
.footer-brand img,
.footer-logo img {
  filter: brightness(0) invert(1);
}

.why-choose-icon {
  filter: brightness(0) invert(1);
  opacity: .58;
  transition: opacity .3s ease;
}

.why-choose-icon:hover {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Client marquee — real, full-colour client logos read best on a bright
   plate rather than the dark ground, so this section gets its own white
   card. A seamless CSS-driven scroll (two copies of the same run, shifted
   by exactly one copy-width) replaces the old IX2-driven strip.
   -------------------------------------------------------------------------- */
.client-marquee-card {
  width: 100%;
  min-width: 0;
  max-width: 1200px;
  margin: 0 auto;
  /* Pure white, not a tint: the client logos are PNGs with their own white
     backgrounds baked in, so anything off-white makes each logo read as a
     visible rectangle sitting on the card. */
  background: #fff;
  border-radius: 24px;
  padding: 52px 0;
  box-shadow:
    0 30px 70px rgba(20, 0, 38, .35),
    0 1px 0 rgba(255, 255, 255, .6) inset;
  border: 1px solid rgba(203, 163, 88, .25);
}

.client-marquee-viewport {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.client-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 72px;
  padding-right: 72px;
  animation: client-marquee-scroll 32s linear infinite;
}


@keyframes client-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.client-logo-item {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  min-width: 170px;
}

/* Logos stay in their real colours at all times — no desaturation, no
   hover treatment. The strip just scrolls. */
.client-logo-item img {
  height: 100%;
  width: auto;
  max-width: 250px;
  object-fit: contain;
}

@media screen and (max-width: 767px) {
  .client-marquee-card {
    border-radius: 18px;
    padding: 36px 0;
  }
  .client-marquee-track {
    gap: 52px;
    padding-right: 52px;
  }
  .client-logo-item {
    height: 92px;
    min-width: 130px;
  }
  .client-logo-item img {
    max-width: 170px;
  }
}

/* --------------------------------------------------------------------------
   Header — logo on the left, a single "Let's Connect" button on the right.
   No nav menu, no hamburger, identical layout on mobile and desktop.
   -------------------------------------------------------------------------- */
.menu-button,
.w-nav-button,
.nav-menu-wrapper {
  display: none !important;
}

.navbar-wrapper {
  justify-content: space-between !important;
}

/* ==========================================================================
   Intro preloader — full black screen, plays the KSV intro video once
   (start to finish, muted so autoplay is guaranteed across browsers), then
   slides up to reveal the site. Homepage only.
   ========================================================================== */
html.ksv-preloading,
html.ksv-preloading body {
  overflow: hidden;
  height: 100%;
}

#ksv-preloader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.9s cubic-bezier(.65, 0, .35, 1);
  will-change: transform;
}

#ksv-preloader.ksv-preloader-out {
  transform: translateY(-100%);
}

.ksv-preloader-video-wrap {
  width: min(90vw, 960px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

#ksv-preloader-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

/* 16:9 letterboxes badly on tall narrow screens, so the frame is scaled up
   a little here and cropped (overflow:hidden on the parent, above) instead
   of shrinking it down small with big black bars — keeps the logo/content
   in the video legible on a phone. */
@media screen and (max-width: 767px) {
  .ksv-preloader-video-wrap {
    width: 100vw;
    transform: scale(1.45);
  }
}

/* ==========================================================================
   Hero photo flip-reveal — after the preloader finishes and the site is
   visible, the hero image briefly shows a "Co-Founder / Planets Development"
   card, then flips (3D rotateY) to reveal the real portrait. LinkedIn and
   Instagram icons fade in once the flip completes.
   ========================================================================== */
.hero-flip-card {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1600px;
}

.hero-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 1s cubic-bezier(.65, 0, .35, 1);
  transform-style: preserve-3d;
}

.hero-flip-inner.is-flipped {
  transform: rotateY(180deg);
}

.hero-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero-flip-front {
  transform: rotateY(0deg);
}

.hero-flip-back {
  transform: rotateY(180deg);
}

.hero-flip-face .hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Icons start hidden and fade in once the flip finishes, rather than sitting
   over a card face that hasn't revealed her yet. */
#ksv-hero-social-icons {
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}

#ksv-hero-social-icons.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* The base theme moves this to the bottom, centered, on small phones — kept
   at the top-right on every breakpoint instead, per request. */
@media screen and (max-width: 479px) {
  .hero-social-icon-wrapper {
    flex-flow: column !important;
    justify-content: flex-start !important;
    align-items: flex-end !important;
    inset: 30px 22px auto auto !important;
  }
}

/* Fix: nested divs (flip-card faces) have no intrinsic size the way a bare
   <img> did, so height:100% down the chain resolved to 0. An explicit
   aspect-ratio matching the photos (914:1280) gives the holder real height
   without needing a percentage to resolve against. */
.hero-image-holder {
  aspect-ratio: 914 / 1280;
}

/* This wrapper's Webflow fade-in was wired to a data-w-id on the original
   plain <img>, which the flip-card markup no longer carries — so it never
   fires and the whole hero photo stayed invisible. Not relying on that
   IX2 timing at all here. */
.hero-image-wrapper {
  opacity: 1 !important;
}

/* ==========================================================================
   Skills section — replacing the fragile scroll-driven accordion
   --------------------------------------------------------------------------
   The base theme runs this as a 400vh scroll-linked accordion (position:
   sticky wrapper, position:sticky main wrapper, headings that scale up and
   force nowrap, content collapsed to height:0 until an IX2 interaction
   expands it). With this page's longer skill titles ("PREMIUM WEBSITE
   DEVELOPMENT" etc.) and the JS-driven reveal not reliably running here,
   that produced cut-off headings and content with no real spacing. Replaced
   with a plain, always-visible, properly spaced card layout that behaves
   identically on every device.
   ========================================================================== */
.service-section {
  height: auto !important;
  overflow: visible !important;
}

.service-main-wrapper {
  position: static !important;
  top: auto !important;
  height: auto !important;
}

.service-item {
  padding: 36px 0 !important;
  border-bottom: 1px solid var(--dk-line);
}

.service-item:last-child {
  border-bottom: none;
}

.service-heading-top {
  padding: 0 !important;
}

.service-heading-left {
  width: 100% !important;
  padding: 0 0 20px !important;
}

.service-h3-heading,
.service-h3-heading.first,
.service-h3-heading.second,
.service-h3-heading.third,
.service-h3-heading.fourth {
  white-space: normal !important;
  transform: none !important;
  word-break: break-word;
}

.service-heading-main-bottom-wrapper,
.service-heading-main-bottom-wrapper.first,
.service-heading-main-bottom-wrapper.second,
.service-heading-main-bottom-wrapper.third,
.service-heading-main-bottom-wrapper.fourth {
  height: auto !important;
  overflow: visible !important;
}

.dervice-bottom {
  flex-flow: column !important;
  gap: 28px;
  padding: 0 !important;
  margin-top: 16px !important;
  overflow: visible !important;
}

.bottom-left-part {
  max-width: none !important;
  padding: 0 !important;
}

.service-image {
  width: 100%;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto;
  max-height: none !important;
  /* The 4 skill images are all real 1:1 squares (627x627) — match that
     instead of forcing a wider ratio, which was cropping their content. */
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 20px !important;
  margin: 0 !important;
  display: block;
  box-shadow: var(--dk-shadow);
}

@media screen and (min-width: 768px) {
  .dervice-bottom {
    flex-flow: row !important;
    align-items: center !important;
    gap: 48px;
  }
  .bottom-left-part {
    flex: 1 1 44%;
    max-width: 44% !important;
  }
  .service-image {
    /* A definite width (not width:auto) so the flex item + aspect-ratio
       system has something concrete to size against — auto collapsed it
       to 0. Capped in pixels, not just column %, so on wide screens it
       doesn't grow to fill the whole available height. */
    flex: 0 0 min(50%, 360px);
    width: min(50%, 360px) !important;
    max-width: min(50%, 360px) !important;
  }
}

/* ==========================================================================
   Sticky compact header — appears once the visitor scrolls past the main
   header, so the brand stays reachable without the full-size logo taking
   up room. Text-only (no logo), fades in/out rather than snapping.
   ========================================================================== */
#ksv-sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 0, 38, .62);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid rgba(203, 163, 88, .28);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
  text-decoration: none;
}

#ksv-sticky-header.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#ksv-sticky-header .ksv-sticky-text {
  font-family: "Times New Roman", Times, Georgia, serif;
  font-weight: 700;
  color: var(--dk-gold);
  letter-spacing: 3.5px;
  font-size: 26px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

@media screen and (max-width: 479px) {
  #ksv-sticky-header {
    height: 52px;
  }
  #ksv-sticky-header .ksv-sticky-text {
    font-size: 16px;
    letter-spacing: 1.8px;
  }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
  #ksv-sticky-header .ksv-sticky-text {
    font-size: 19px;
    letter-spacing: 2.4px;
  }
}

/* The Apple-glass treatment above (.navbar) already applies identically on
   mobile and desktop, so no separate mobile override is needed here. */

/* "Co-Founder / Planets Development" text — left-aligned on desktop only
   (the base theme right-aligns it there; mobile already centers it via its
   own breakpoint rules, left untouched). */
@media screen and (min-width: 992px) {
  .hero-skill-wrapper {
    align-items: flex-start !important;
  }
}

/* ==========================================================================
   About-me work carousel — replaces the Webflow slider (which needs its own
   runtime JS to move one slide at a time; here it was rendering every slide
   at once instead) with a simple, dependency-free crossfade between the two
   real project screenshots.
   ========================================================================== */
.ksv-work-carousel {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1038 / 1516;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--dk-shadow);
  border: 1px solid var(--dk-line);
}

.ksv-work-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}

.ksv-work-slide.is-active {
  opacity: 1;
}

@media screen and (max-width: 767px) {
  .ksv-work-carousel {
    max-width: 280px;
    margin: 0 auto;
  }
}

/* ==========================================================================
   CTA stat blocks — the outer grid defaulted to 1fr/1fr columns, so with
   .cta-details-text capped at max-width:400px it sat alone in an oversized
   column, leaving a big gap before 02/03. Columns now shrink to their
   content so all three sit evenly spaced instead.
   Desktop only (min-width: 992px) — the base theme already switches this
   grid to a single stacked column at 991px and below. Without this guard
   the max-content columns don't shrink for a narrow viewport (max-content
   is the content's natural unwrapped width, not a shrink-to-fit value), so
   the grid forced itself wider than the screen and the whole page was
   pushed into a horizontally-scrollable, zoomed-out layout on mobile.
   ========================================================================== */
@media screen and (min-width: 992px) {
  .cta-details-grid {
    grid-template-columns: max-content max-content !important;
    justify-content: start;
    align-items: start;
  }

  .cta-details-text {
    max-width: none;
  }
}

/* Small inner margin on mobile so the heading/image don't sit flush against
   the screen edges — each skill item should read as its own card with a
   little breathing room, not text touching the container boundary. */
@media screen and (max-width: 767px) {
  .service-item {
    padding: 36px 18px !important;
  }
}

/* Recent-work cards: name+description and category share one row via flex
   at every size. On mobile the card narrows enough that the two columns
   collide (category text crammed beside a wrapping title). Stack them
   instead so each reads cleanly full-width. */
@media screen and (max-width: 767px) {
  .recent-work-content-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .work-project-wrapper {
    max-width: 100%;
  }
}

/* ==========================================================================
   Premium hero, desktop only (>= 992px). The right column of the hero was a
   small "Website Development / Expert" label pinned to the bottom, leaving a
   large empty area beside the photo. On desktop it becomes a full-height
   panel: availability pill at the top, a serif "Expert" title, a short
   tagline and her four specialties, with the button anchored at the bottom
   so the column lines up with the photo frame. Below 992px the new panel is
   hidden and the original mobile/tablet layout is untouched.
   ========================================================================== */
.ksv-hero-panel {
  display: none;
}

@media screen and (min-width: 992px) {
  /* Column layout: panel at the top, button + note at the bottom */
  .hero-skill-wrapper {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    grid-row-gap: 0 !important;
    grid-column-gap: 0 !important;
    padding: 30px 0 30px 8px;
  }
  .hero-skill-wrapper > .hero-profession-wrapper {
    display: none !important;
  }
  .hero-skill-wrapper > .secondry-button.desktop {
    margin-top: auto;
  }
  .hero-skill-wrapper > .hero-client-component {
    margin-top: 22px;
    padding: 0;
  }
  .hero-skill-wrapper .loved-by {
    position: relative;
    padding-left: 34px;
    font-size: 15px;
    letter-spacing: .02em;
    color: var(--dk-text-3);
  }
  .hero-skill-wrapper .loved-by::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 22px;
    height: 1px;
    background: var(--dk-gold);
  }

  .ksv-hero-panel {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    max-width: 420px;
  }

  /* Availability pill */
  .ksv-hero-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    padding: 9px 18px 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--dk-line-2);
    background: rgba(203, 163, 88, .07);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--dk-text);
    font-size: 14px;
    letter-spacing: .03em;
  }
  .ksv-hero-status-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dk-gold-2);
    box-shadow: 0 0 10px rgba(224, 193, 132, .8);
  }
  .ksv-hero-status-dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid var(--dk-gold-2);
    animation: ksv-hero-pulse 2.4s ease-out infinite;
  }
  @keyframes ksv-hero-pulse {
    0%   { transform: scale(.6); opacity: .9; }
    100% { transform: scale(2.2); opacity: 0; }
  }

  /* Title block */
  .ksv-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--dk-gold);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
  }
  .ksv-hero-eyebrow::after {
    content: "";
    flex: 1;
    max-width: 64px;
    height: 1px;
    background: linear-gradient(90deg, var(--dk-gold), transparent);
  }
  .ksv-hero-role {
    margin-top: 10px;
    font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(64px, 6vw, 112px);
    line-height: .95;
    letter-spacing: -.01em;
    padding-right: .08em; /* keeps the italic "t" from being clipped by background-clip */
    background: linear-gradient(120deg, #f3dfae 0%, var(--dk-gold-2) 35%, var(--dk-gold) 65%, var(--dk-gold-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--dk-gold-2);
  }
  .ksv-hero-tagline {
    margin: 18px 0 0;
    max-width: 340px;
    color: var(--dk-text-2);
    font-size: 17px;
    line-height: 1.6;
  }

  /* Specialties */
  .ksv-hero-specialties {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--dk-line);
  }
  .ksv-hero-specialties li {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--dk-line);
    color: var(--dk-text);
    font-size: 17px;
    letter-spacing: .01em;
    transition: padding-left .35s ease, color .35s ease;
  }
  .ksv-hero-specialties li:hover {
    padding-left: 8px;
    color: var(--dk-gold-2);
  }
  .ksv-hero-num {
    color: var(--dk-gold);
    font-size: 12px;
    letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
  }

  /* Photo frame: gold hairline gradient border and a soft warm glow */
  .hero-image-wrapper {
    border: 1px solid transparent;
    background:
      linear-gradient(var(--dk-surface), var(--dk-surface)) padding-box,
      linear-gradient(150deg, rgba(224, 193, 132, .85), rgba(203, 163, 88, .10) 35%, rgba(203, 163, 88, .10) 65%, rgba(224, 193, 132, .65)) border-box !important;
    box-shadow:
      0 40px 90px rgba(0, 0, 0, .55),
      0 0 140px -30px rgba(203, 163, 88, .35) !important;
  }

  /* Gentle staggered entrance once the preloader has gone */
  html:not(.ksv-preloading) .ksv-hero-panel > * {
    animation: ksv-hero-rise .9s cubic-bezier(.2, .7, .2, 1) both;
  }
  html:not(.ksv-preloading) .ksv-hero-panel > :nth-child(2) { animation-delay: .12s; }
  html:not(.ksv-preloading) .ksv-hero-panel > :nth-child(3) { animation-delay: .24s; }
  @keyframes ksv-hero-rise {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to   { opacity: 1; transform: none; }
  }
}

@media screen and (min-width: 992px) and (prefers-reduced-motion: reduce) {
  .ksv-hero-status-dot::after,
  html:not(.ksv-preloading) .ksv-hero-panel > * {
    animation: none;
  }
}