/* Portfolio palette with subtly darker cool page backgrounds.
   Also contains the shell menu's mobile sizing overrides. */
:root {
  color-scheme: light;
  --palette-paper: #e7f1f6;
  --palette-paper-warm: #ffffff;
  --palette-surface: #ffffff;
  --palette-surface-muted: #e7f1f6;
  --palette-ink: #171716;
  --palette-muted: #65635e;
  --palette-muted-soft: #85827c;
  --palette-line: #d8d5cd;
  --palette-blush: #b58d93;
  --palette-blush-soft: #f0e5e6;
  --palette-shadow: rgba(23, 39, 61, 0.06);
  --palette-button: #2bb3b8;
  --palette-button-hover: #239da2;
}

html,
body {
  color-scheme: light !important;
  background-color: var(--palette-paper) !important;
  color: var(--palette-ink) !important;
}

body.shell-page {
  background: var(--palette-paper) !important;
}

body.frame-page {
  background: var(--palette-paper) !important;
  color: var(--palette-ink) !important;
}

body.frame-page .site-bg {
  background: var(--palette-paper) !important;
}

/* Shell header: recolor the existing controls without changing their layout. */
body.shell-page .mobile-bar-bg {
  background: #fff !important;
  border-bottom-color: var(--palette-line) !important;
}

body.shell-page .mobile-logo img {
  filter: grayscale(1) brightness(0.16) !important;
}

body.shell-page .desktop-works-menu a,
body.shell-page .fullscreen-menu .menu-inner a,
body.shell-page .menu-parent-label {
  color: var(--palette-ink) !important;
  text-shadow: none !important;
}

body.shell-page .desktop-works-menu a::after {
  background: var(--palette-button) !important;
  box-shadow: none !important;
}

body.shell-page .desktop-works-menu a:hover,
body.shell-page .desktop-works-menu a:focus-visible,
body.shell-page .desktop-works-menu a.is-active {
  color: var(--palette-blush) !important;
}

body.shell-page .hamburger {
  background: #fff !important;
  border-color: var(--palette-line) !important;
  color: var(--palette-ink) !important;
}

body.shell-page .hamburger span {
  background-color: var(--palette-ink) !important;
}

body.shell-page .fullscreen-menu,
body.shell-page .menu-sub {
  background: var(--palette-paper-warm) !important;
  border-color: var(--palette-line) !important;
  box-shadow: 0 16px 48px var(--palette-shadow) !important;
}

body.shell-page .menu-close,
body.shell-page .menu-close:hover,
body.shell-page .menu-close:active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Light page surfaces; image and video elements inside them are unchanged. */
body.frame-page :is(
  .glass,
  .about-card,
  .about-founder-highlights li,
  .uid-card,
  .contact-card,
  .ct-card,
  .experience-panel,
  .experience-card,
  .process-card,
  .process-step,
  .portfolio-card,
  .project-card,
  .video-card,
  .blog-featured,
  .blog-card,
  .blog-promo,
  .blog-side-post,
  .stat-card
) {
  background: var(--palette-surface) !important;
  border-color: var(--palette-line) !important;
  box-shadow: 0 3px 14px var(--palette-shadow) !important;
}

body.frame-page :is(
  .uid-hero,
  .about-hero,
  .contact-hero,
  .blog-hero,
  .experience-hero,
  .page-hero
) {
  background-color: var(--palette-paper) !important;
  background-image: none !important;
}

/* Replace dark and cyan headline treatments with charcoal and soft rose accents. */
body.frame-page :is(h1, h2, h3, h4, h5, h6) {
  color: var(--palette-ink) !important;
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: var(--palette-ink) !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  filter: none !important;
  text-shadow: none !important;
}

body.frame-page :is(
  p,
  li,
  label,
  figcaption,
  blockquote,
  .hero-kicker,
  .experience-label,
  .uid-hero p,
  .contact-eyebrow,
  .section-eyebrow,
  .blog-excerpt
) {
  color: var(--palette-muted) !important;
}

body.frame-page a:not(.btn):not(.liquid-btn) {
  color: var(--palette-ink) !important;
}

body.frame-page :is(
  .hero-kicker,
  .experience-label,
  .uid-label,
  .contact-eyebrow,
  .section-eyebrow,
  .blog-category
) {
  color: var(--palette-blush) !important;
}

/* Buttons keep their existing dimensions and interaction behavior. */
body.frame-page :is(
  .btn,
  .liquid-btn,
  .subscribe,
  .ct-submit,
  .contact-submit,
  .blog-save,
  input[type="submit"]
) {
  background: var(--palette-ink) !important;
  border-color: var(--palette-ink) !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.frame-page :is(
  .btn:hover,
  .liquid-btn:hover,
  .subscribe:hover,
  .ct-submit:hover,
  .contact-submit:hover,
  .blog-save:hover,
  input[type="submit"]:hover
) {
  background: var(--palette-blush) !important;
  border-color: var(--palette-blush) !important;
  color: #fff !important;
}

/* Forms, dividers, and utility surfaces use the same neutral palette. */
body.frame-page :is(input, textarea, select) {
  background-color: var(--palette-surface) !important;
  border-color: var(--palette-line) !important;
  color: var(--palette-ink) !important;
}

body.frame-page :is(input, textarea, select)::placeholder {
  color: var(--palette-muted-soft) !important;
}

body.frame-page select option {
  background: var(--palette-surface) !important;
  color: var(--palette-ink) !important;
}

body.frame-page :is(hr, .divider, .section-divider, .card-img-wrap) {
  border-color: var(--palette-line) !important;
}

body.frame-page .footer,
body.shell-page .footer {
  background: var(--palette-paper-warm) !important;
  border-color: var(--palette-line) !important;
}

body.frame-page :is(.footer h3, .footer p, .footer a, .copyright),
body.shell-page :is(.footer h3, .footer p, .footer a, .copyright) {
  color: var(--palette-muted) !important;
}

body.frame-page .copyright,
body.shell-page .copyright {
  background: #fff !important;
  border-color: var(--palette-line) !important;
}

::-webkit-scrollbar-track {
  background: var(--palette-paper) !important;
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
  background: var(--palette-blush) !important;
}

:focus-visible {
  outline-color: var(--palette-blush) !important;
}

/* Some standalone portfolio pages use their own body classes rather than
   frame-page; apply the same palette there while excluding the outer shell. */
body:not(.shell-page) {
  background-color: var(--palette-paper) !important;
  color: var(--palette-ink) !important;
}

body:not(.shell-page) .site-bg {
  background: var(--palette-paper) !important;
}

body:not(.shell-page) :is(
  .glass,
  .about-card,
  .uid-card,
  .contact-card,
  .ct-card,
  .ct-form-wrap,
  .experience-panel,
  .experience-card,
  .process-card,
  .process-step,
  .portfolio-card,
  .project-card,
  .video-card,
  .blog-featured,
  .blog-card,
  .blog-promo,
  .blog-side-post,
  .stat-card,
  .error-box
) {
  background: var(--palette-surface) !important;
  border-color: var(--palette-line) !important;
  box-shadow: 0 10px 32px var(--palette-shadow) !important;
}

body:not(.shell-page) :is(
  .uid-hero,
  .about-hero,
  .contact-hero,
  .blog-hero,
  .experience-hero,
  .page-hero
) {
  background-color: var(--palette-paper) !important;
  background-image: none !important;
}

body:not(.shell-page) :is(h1, h2, h3, h4, h5, h6) {
  color: var(--palette-ink) !important;
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: var(--palette-ink) !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  filter: none !important;
  text-shadow: none !important;
}

body:not(.shell-page) :is(
  p,
  li,
  label,
  figcaption,
  blockquote,
  .subtitle,
  .description,
  .ct-subtitle,
  .ct-form-sub,
  .ct-card-value,
  .ct-card-label,
  .ct-char,
  .uid-card-subtitle,
  .uid-card-description,
  .uid-card-description strong,
  .uid-hero p
) {
  color: var(--palette-muted) !important;
}

body:not(.shell-page) :is(
  .ct-eyebrow,
  .ct-card-label,
  .uid-card-subtitle,
  .uid-label,
  .section-eyebrow
) {
  color: var(--palette-blush) !important;
}

body.frame-page.home-page #home.hero > .hero-copy .hero-kicker,
body.frame-page.home-page #home.hero > .hero-copy h1,
body.frame-page.home-page #home.hero > .hero-copy h1 .hero-title-line {
  color: var(--palette-ink) !important;
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: var(--palette-ink) !important;
  filter: none !important;
}

body.frame-page.home-page #home.hero > .hero-copy p {
  color: var(--palette-muted) !important;
}

/* Contact and project-detail pages have custom, page-local card styles. */
body:not(.shell-page) :is(.ct-form-title, .uid-card-name) {
  color: var(--palette-ink) !important;
}

body:not(.shell-page) .ct-card-icon {
  background: var(--palette-blush-soft) !important;
  border-color: var(--palette-line) !important;
  color: var(--palette-blush) !important;
}

body:not(.shell-page) .uid-card-img-wrap {
  background: var(--palette-surface-muted) !important;
}

body:not(.shell-page) .uid-card-visit {
  background: var(--palette-ink) !important;
  border-color: var(--palette-ink) !important;
  color: #fff !important;
}

body:not(.shell-page) :is(.left-brand, .topbar) {
  background: var(--palette-paper-warm) !important;
  border-color: var(--palette-line) !important;
}

body:not(.shell-page) :is(.left-brand, .topbar) a {
  color: var(--palette-ink) !important;
}

body:not(.shell-page) .real-logo {
  filter: grayscale(1) brightness(0.2) !important;
}

/* Keep every visible text label dark on the light page surfaces. */
body:not(.shell-page) :is(
  h1, h2, h3, h4, h5, h6,
  p, a, span, strong, em, b, i, small, label, li, dt, dd, summary,
  legend, output, figcaption, blockquote, cite, button, th, td,
  input, textarea, select, option,
  [class*="title"], [class*="subtitle"], [class*="description"],
  [class*="quote"], [class*="caption"], [class*="label"], [class*="kicker"],
  [class*="eyebrow"], [class*="name"], [class*="role"], [class*="value"],
  [class*="meta"], [class*="summary"], [class*="status"], [class*="text"]
),
body.shell-page :is(
  h1, h2, h3, h4, h5, h6,
  p, a, span, strong, em, b, i, small, label, li, dt, dd, summary,
  legend, output, figcaption, blockquote, cite, button, th, td,
  input, textarea, select, option
) {
  color: var(--palette-ink) !important;
  -webkit-text-fill-color: var(--palette-ink) !important;
  text-shadow: none !important;
}

body:not(.shell-page) :is(input, textarea, select)::placeholder,
body.shell-page :is(input, textarea, select)::placeholder {
  color: var(--palette-muted) !important;
  -webkit-text-fill-color: var(--palette-muted) !important;
}

/* Action buttons retain white labels only on their dark button surfaces. */
body:not(.shell-page) :is(
  .btn, .liquid-btn, .subscribe, .ct-submit, .contact-submit, .blog-save,
  .uid-card-visit, .uid-modal-ok, input[type="submit"]
),
body.shell-page :is(.btn, .liquid-btn, .subscribe, input[type="submit"]) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* All content cards are white against the sampled page background. */
body:not(.shell-page) :is(
  .glass,
  .about-card,
  .about-founder-highlights li,
  .uid-card,
  .contact-card,
  .ct-card,
  .ct-form-wrap,
  .experience-panel,
  .experience-card,
  .experience-video-card,
  .career-card,
  .process-card,
  .process-step,
  .portfolio-card,
  .project-card,
  .video-card,
  .blog-featured,
  .blog-card,
  .blog-promo,
  .blog-side-post,
  .hero-blog-card,
  .service-card,
  .estimate-step-card,
  .stat-card,
  .testimonial-card,
  .error-box,
  .card
) {
  background: var(--palette-surface) !important;
  background-color: var(--palette-surface) !important;
  border-color: var(--palette-line) !important;
  box-shadow: 0 10px 32px var(--palette-shadow) !important;
}

/* Testimonials and Clients & Partners share the same solid page background. */
body.frame-page.home-page .home-social-proof-bg {
  background: var(--palette-paper) !important;
}

body.frame-page.home-page .home-testimonials {
  color: var(--palette-ink) !important;
}

body.frame-page.home-page :is(
  .testimonials-kicker,
  .testimonials-heading h2,
  .testimonials-heading p,
  .testimonial-person h3,
  .testimonial-person p,
  .testimonial-quote,
  .testimonials-arrow
) {
  color: var(--palette-ink) !important;
  -webkit-text-fill-color: var(--palette-ink) !important;
  text-shadow: none !important;
}

body.frame-page.home-page .testimonial-card {
  background: var(--palette-surface) !important;
  background-color: var(--palette-surface) !important;
  border-color: var(--palette-line) !important;
  box-shadow: 0 10px 32px var(--palette-shadow) !important;
}

body.frame-page.home-page :is(.testimonial-scrollbar, .testimonial-quote::-webkit-scrollbar-track) {
  background: var(--palette-surface-muted) !important;
  box-shadow: inset 0 0 0 1px var(--palette-line) !important;
}

body.frame-page.home-page .testimonial-scrollbar-thumb,
body.frame-page.home-page .testimonial-quote::-webkit-scrollbar-thumb {
  background: #9bc9c6 !important;
  box-shadow: none !important;
}

body.frame-page.home-page .testimonial-quote {
  scrollbar-color: #9bc9c6 var(--palette-surface-muted) !important;
}

body.frame-page.home-page :is(.testimonials-dot, .testimonials-dot.is-active) {
  border-color: var(--palette-blush) !important;
  background: var(--palette-blush-soft) !important;
  box-shadow: none !important;
}

body.frame-page.home-page .testimonials-arrow:hover,
body.frame-page.home-page .testimonials-arrow:focus-visible {
  color: var(--palette-blush) !important;
  -webkit-text-fill-color: var(--palette-blush) !important;
  filter: none !important;
}

body.frame-page.home-page .clients-logo-item img {
  filter: grayscale(1) brightness(0.35) opacity(0.78) !important;
}

body.frame-page.home-page .clients-logo-item:hover img {
  filter: grayscale(1) brightness(0.28) opacity(0.92) !important;
}

/* Dialogs and image viewers also use light surfaces, with dark controls. */
body:not(.shell-page) :is(.uid-add-modal-box, .uid-modal-box, .modal-content, .modal-box) {
  background: var(--palette-paper) !important;
  border-color: var(--palette-line) !important;
  box-shadow: 0 18px 48px var(--palette-shadow) !important;
}

/* One translucent, blurred veil for image, video, case-study, and home viewers. */
body:not(.shell-page) :is(.uid-lightbox, .lb-backdrop) {
  background: rgba(231, 241, 246, 0.28) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

body:not(.shell-page) :is(.uid-lb-close, .uid-lb-nav, .uid-modal-cancel, .uid-modal-close-x) {
  background: var(--palette-surface) !important;
  border-color: var(--palette-line) !important;
  color: var(--palette-ink) !important;
  -webkit-text-fill-color: var(--palette-ink) !important;
}

body:not(.shell-page) .uid-modal-ok {
  background: var(--palette-ink) !important;
  border-color: var(--palette-ink) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body:not(.shell-page) :is(.ct-status.success, .ct-status.error) {
  background: var(--palette-surface) !important;
  border-color: var(--palette-line) !important;
  color: var(--palette-ink) !important;
}

@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  body.frame-page.home-page .home-social-proof-bg {
    background-attachment: scroll !important;
  }
}

/* Uniform content surfaces on every page. Media and action-button colors stay intact. */
body:not(.shell-page) :is(
  .clients-section, .ct-card-icon, .ct-social-btn, .ct-social-btn:hover,
  .card-tags span, .experience-footer, .uid-card-img-wrap
) {
  background-color: var(--palette-paper) !important;
}

/* The shared navigation and footer also use white surfaces. */
body :is(.footer, .site-footer, .experience-footer, .copyright),
body.shell-page :is(.mobile-bar-bg, .fullscreen-menu, .menu-sub, .hamburger),
body:not(.shell-page) :is(.left-brand, .topbar) {
  background: #fff !important;
  background-color: #fff !important;
}

/* Consistent light surfaces for every carousel and image-viewer arrow. */
body:not(.shell-page) :is(
  .uid-carousel-nav, .uid-lb-nav, .lb-arrow, .cflow-arrow, .testimonials-arrow
),
body.frame-page.home-page .testimonials-arrow {
  background: #fff !important;
  background-color: #fff !important;
  border-color: var(--palette-line) !important;
  color: var(--palette-ink) !important;
  -webkit-text-fill-color: var(--palette-ink) !important;
  box-shadow: none !important;
}

body:not(.shell-page) :is(
  .uid-carousel-nav, .uid-lb-nav, .lb-arrow, .cflow-arrow, .testimonials-arrow
):is(:hover, :focus-visible),
body.frame-page.home-page .testimonials-arrow:is(:hover, :focus-visible) {
  background: #f3f3f3 !important;
  background-color: #f3f3f3 !important;
  border-color: var(--palette-line) !important;
  color: var(--palette-ink) !important;
  -webkit-text-fill-color: var(--palette-ink) !important;
  box-shadow: none !important;
}

body:not(.shell-page) :is(
  .uid-carousel-nav, .uid-lb-nav, .lb-arrow, .cflow-arrow, .testimonials-arrow
) svg [stroke] {
  stroke: var(--palette-ink) !important;
}

body:not(.shell-page) :is(
  .uid-carousel-nav, .uid-lb-nav, .lb-arrow, .cflow-arrow, .testimonials-arrow
) svg [fill]:not([fill="none"]) {
  fill: var(--palette-ink) !important;
}

/* Match every site button to the hero CTA, including page-local and generated controls.
   Important layer rules take precedence over legacy important color overrides. */
@layer portfolio-button-colors {
  body :is(
    button, [role="button"], input[type="submit"], input[type="reset"], input[type="button"],
    .btn, .liquid-btn, .subscribe, .contact-submit, .uid-card-visit,
    .ct-social-btn, .blog-share-btn, .uid-play-btn, .social-link, .footer-social-link
  ):where(:not(.uid-card):not(.menu-close)) {
    background: var(--palette-button) !important;
    border-color: var(--palette-button) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  body :is(
    button, [role="button"], input[type="submit"], input[type="reset"], input[type="button"],
    .btn, .liquid-btn, .subscribe, .contact-submit, .uid-card-visit,
    .ct-social-btn, .blog-share-btn, .uid-play-btn, .social-link, .footer-social-link
  ):where(:not(.uid-card):not(.menu-close)):is(:hover, :active, .active, .is-active, [aria-pressed="true"], [aria-selected="true"]) {
    background: var(--palette-button-hover) !important;
    border-color: var(--palette-button-hover) !important;
  }

  /* Graphic Design category filters are navigation, not filled action buttons. */
  body.frame-page .gd-filter button.gd-filter-btn,
  body.frame-page .gd-filter button.gd-filter-btn:is(
    :hover, :active, :focus-visible, .is-active, [aria-pressed="true"], [aria-selected="true"]
  ) {
    background: #fff !important;
    background-color: #fff !important;
    border: 0 !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    box-shadow: none !important;
  }

  body.frame-page .gd-filter button.gd-filter-btn.is-active {
    border: 0 !important;
    box-shadow: none !important;
  }

  body :is(
    button, [role="button"], .btn, .liquid-btn, .subscribe, .contact-submit,
    .uid-card-visit, .ct-social-btn, .blog-share-btn, .uid-play-btn, .social-link, .footer-social-link
  ):where(:not(.uid-card)) :is(span, strong, em, i, svg) {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  body :is(button, [role="button"], .btn, .uid-card-visit, .ct-social-btn, .blog-share-btn, .uid-play-btn, .social-link, .footer-social-link):where(:not(.uid-card)) svg [stroke]:not([stroke="none"]) {
    stroke: #fff !important;
  }

  body :is(button, [role="button"], .btn, .uid-card-visit, .ct-social-btn, .blog-share-btn, .uid-play-btn, .social-link, .footer-social-link):where(:not(.uid-card)) svg [fill]:not([fill="none"]) {
    fill: #fff !important;
  }

  body :is(.social-link, .footer-social-link, .ct-social-btn) svg[fill]:not([fill="none"]) {
    fill: #fff !important;
  }

  /* Keep the YouTube play cutout visible inside its white icon. */
  body :is(#soc-youtube, .footer-social-youtube) svg polygon[fill] {
    fill: var(--palette-button) !important;
  }

  body :is(#soc-youtube, .footer-social-youtube):is(:hover, :active) svg polygon[fill] {
    fill: var(--palette-button-hover) !important;
  }

  body.shell-page .footer-social-youtube::after {
    background: #fff !important;
  }

  body.shell-page .hamburger span {
    background-color: #fff !important;
  }

  /* Pagination indicators are quieter than action buttons. */
  body button:is(.uid-carousel-dot, .testimonials-dot) {
    width: 8px !important;
    height: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    background: #8eaeae !important;
  }

  body button.testimonials-dot {
    width: 7px !important;
    height: 7px !important;
  }

  body button:is(.uid-carousel-dot, .testimonials-dot):is(
    .active, .is-active, :hover, :active, :focus-visible
  ) {
    background: #638a8a !important;
    transform: scale(1.25) !important;
  }

  /* Testimonial chevrons sit directly on the page, without a filled button. */
  body button.testimonials-arrow,
  body button.testimonials-arrow:is(:hover, :active, :focus-visible) {
    background: transparent !important;
    border-color: transparent !important;
    color: #555c63 !important;
    -webkit-text-fill-color: #555c63 !important;
    filter: none !important;
  }

  body .testimonials-arrow :is(span, svg, i) {
    color: #555c63 !important;
    -webkit-text-fill-color: #555c63 !important;
  }

  /* Works is a text-only submenu toggle, not a filled action button. */
  body.shell-page #menuWorksItem .menu-parent-label {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  body.shell-page #menuWorksItem .menu-parent-label span {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  /* The opened menu uses the button turquoise, with doubled link typography. */
  body.shell-page .fullscreen-menu {
    width: 100vw !important;
    box-sizing: border-box !important;
    background: var(--palette-button) !important;
    background-color: var(--palette-button) !important;
    color: #fff !important;
    justify-content: flex-start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.shell-page .fullscreen-menu .menu-inner {
    flex-shrink: 0 !important;
    gap: 4px !important;
  }

  body.shell-page .fullscreen-menu :is(a, span, button) {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  body.shell-page .fullscreen-menu :is(.menu-sub, .menu-parent-label) {
    background: transparent !important;
  }

  body.shell-page .fullscreen-menu .menu-inner > a:not(.menu-logo),
  body.shell-page .fullscreen-menu .menu-parent-label {
    font-size: 72px !important;
    line-height: 1.4 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    overflow-wrap: anywhere;
  }

  body.shell-page .fullscreen-menu .menu-sub a {
    font-size: 56px !important;
    line-height: 1.4 !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    overflow-wrap: anywhere;
  }

  body.shell-page .fullscreen-menu .menu-inner .menu-logo {
    font-size: 28px !important;
    opacity: 1 !important;
  }

  body.shell-page .fullscreen-menu .menu-chevron {
    font-size: 56px !important;
  }

  body.shell-page .fullscreen-menu :is(a, .menu-parent-label):focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 3px;
  }

  @media (max-width: 1024px) {
    body.shell-page .fullscreen-menu .menu-parent-label {
      font-size: 56px !important;
      line-height: 1.2 !important;
    }
  }

  @media (max-width: 768px) {
    body.shell-page .fullscreen-menu .menu-inner > a:not(.menu-logo) {
      font-size: 56px !important;
      overflow-wrap: anywhere;
    }

    body.shell-page .fullscreen-menu #menuWorksItem > .menu-parent-label {
      font-size: clamp(36px, 11vw, 44px) !important;
      gap: 6px !important;
      white-space: nowrap !important;
    }

    body.shell-page .fullscreen-menu #menuWorksItem .menu-chevron {
      font-size: clamp(32px, 10vw, 40px) !important;
    }

    body.shell-page .fullscreen-menu .menu-sub a {
      box-sizing: border-box !important;
      font-size: clamp(20px, 6.2vw, 26px) !important;
      letter-spacing: 0.3px !important;
      padding: 3px 0 3px 8px !important;
      white-space: nowrap !important;
      overflow-wrap: normal !important;
    }

    body.shell-page .fullscreen-menu .menu-sub a:hover {
      letter-spacing: 0.3px !important;
      padding-left: 12px !important;
    }

    body.shell-page .fullscreen-menu #menuWorksItem > .menu-parent-label:hover {
      letter-spacing: 1px !important;
      padding-left: 6px !important;
    }
  }

  @media (min-width: 701px) {
    body.shell-page .fullscreen-menu {
      width: 40vw !important;
      padding-left: clamp(16px, 2vw, 56px) !important;
      padding-right: clamp(16px, 2vw, 56px) !important;
    }
  }
}

/* Keep legacy glows and button shadows off; allow only subtle content-card shadows. */
@layer portfolio-flat-effects {
  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body:not(.shell-page) :is(
    .glass:not(.hero-copy), .about-card, .about-founder-highlights li,
    .uid-card, .uid-vid-card, .contact-card, .ct-card, .ct-form-wrap,
    .experience-panel, .experience-card, .experience-video-card,
    .career-card, .process-card, .process-step, .portfolio-card,
    .project-card, .video-card, .blog-featured, .blog-card, .blog-promo,
    .blog-side-post, .hero-blog-card, .service-card, .estimate-step-card,
    .stat-card, .testimonial-card, .error-box, .card
  ) {
    border: 0 !important;
    box-shadow: 0 3px 14px var(--palette-shadow) !important;
  }

  /* Remove image-frame strokes as well, without changing form or button borders. */
  body:not(.shell-page) :is(.card-img-wrap, .uid-card-img-wrap, .uid-thumb) {
    border: 0 !important;
  }

  body:not(.shell-page) .career-card-current::after {
    display: none !important;
  }

  body.frame-page.home-page .services .service-card {
    border-radius: 20px !important;
  }

  .interactive-cube-shadow {
    display: none !important;
  }

  .hero-submarine,
  .footer-logo-img,
  .floating-video-widget,
  .hero-video-widget,
  .blog-direct-logo img,
  .uid-page-sub,
  .interactive-cube-face img {
    filter: none !important;
  }

  /* Keep the white search icon; remove only its drop shadow. */
  .services .service-card .card-img-wrap .service-card-search-icon {
    filter: brightness(0) invert(1) !important;
  }

  /* Remove animated button waves and hover shine without touching icons. */
  .liquid-btn::before,
  .ct-submit::before {
    content: none !important;
    display: none !important;
    animation: none !important;
  }
}