/* =============================================================
   Hero display weight — Webflow defaults the giant homepage text
   (.page-intro-title) to 900 / Black, which reads as too heavy
   against the tight letter-spacing. Drop to 800 / Extra Bold.
   ============================================================= */
.page-intro-title,
.page-intro-title.is-webdesign,
.page-intro-title.is-animation,
.page-intro-title.is-skills {
  font-weight: 800 !important;
}

/* =============================================================
   Light / Dark mode theming
   ============================================================= */

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* ── Brand red override ────────────────────────────────────────────
   Webflow's --red was a washed-out pink (#ffc3c3). Replace it with the
   actual logo red (#ff4c4b, sampled directly from the YL mark) so every
   pink surface on the site picks up the brand colour automatically —
   buttons, hover states, the contact form background, tag pills, the
   .red-background card variant, etc. */
:root {
  --red: #ff4c4b;
}

/* ── Dark palette (soft greys + Liquid-Glass surfaces) ──────────── */
html[data-theme="dark"] {
  /* Page — warm near-black, slightly darker so glass panels stand out */
  --dk-bg:           #14161b;
  --dk-bg-raised:    #1b1e25;  /* used only for inputs / solid fills  */
  --dk-bg-elevated:  #232730;
  --dk-border:       #2c2f38;
  --dk-border-soft:  #24262e;
  --dk-text:         #e5e0d5;  /* primary — warm off-white            */
  --dk-text-muted:   #8f8c84;  /* secondary / meta                    */
  --dk-text-dim:     #61605b;  /* captions, disabled                  */
  --dk-accent:       #ff6b6a;  /* logo red, slightly lifted for dark bg */
  --dk-accent-soft:  #3a1515;  /* deep red-tinted dark surface         */

  /* ── Liquid-Glass surface tokens ── */
  --dk-glass-bg:     rgba(255, 255, 255, 0.045);
  --dk-glass-bg-lo:  rgba(255, 255, 255, 0.028);
  --dk-glass-border: rgba(255, 255, 255, 0.08);
  --dk-glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.45),
                     inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --dk-glass-blur:   blur(22px) saturate(160%);

  /* ── Override Webflow's own CSS custom properties ── */
  /* Webflow uses these everywhere via var(--grey) etc. Redefining them
     in dark mode automatically restyles every selector that reads them —
     30+ classes at once (.cta-card, .project-item, .stats-component-
     wrapper, .services-component-wrapper, .team-item, ...). */
  --grey:       rgba(255, 255, 255, 0.045);
  --light-grey: rgba(255, 255, 255, 0.028);
}

/* ── Base surfaces and text ──────────────────────────────────────── */
html[data-theme="dark"] body,
html[data-theme="dark"] .body,
html[data-theme="dark"] .page-wrapper,
html[data-theme="dark"] .main-wrapper,
html[data-theme="dark"] .main-wrapper-2,
html[data-theme="dark"] .section-page-intro,
html[data-theme="dark"] .section-hero-header,
html[data-theme="dark"] .section-case-study-header,
html[data-theme="dark"] .section-contact {
  background-color: var(--dk-bg) !important;
  color: var(--dk-text);
}

html[data-theme="dark"] {
  background-color: var(--dk-bg);
}

/* Pull the right-side nav (Work + Get in touch) inwards so they don't
   crowd the rounded edge of the navbar pill. Webflow's default lets
   them sit flush against the 0.5rem container padding. */
.navbar-menu {
  margin-right: 2rem;
}
@media (max-width: 991px) {
  .navbar-menu {
    margin-right: 0;
  }
}

/* Fixed navbar (24px offset + ~88px tall) sits above the contact section,
   so the Webflow default margin-top: 4rem only leaves ~16px of breathing
   room between the navbar and the "Get in touch" pill. Bump it so the
   top gap matches the ~64px gap between the form and the footer. */
.section-contact {
  margin-top: 7rem;
}

/* Contact page content is short enough that on tall viewports (e.g. a
   MacBook fullscreen) the footer floats in the middle of the screen.
   Pin it to the viewport bottom with a classic sticky-footer pattern. */
body:has(.section-contact) .page-wrapper {
  min-height: 100dvh;
}
body:has(.section-contact) .main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Override Webflow's dormant .main-wrapper.max-width-full rules
     (flex-flow: wrap; justify-content: center; align-items: center)
     that only activate once we turn this into a flex container and
     otherwise shrink section + footer to their natural content width. */
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
}
body:has(.section-contact) .footer-component {
  margin-top: auto;
}

/* All text elements inherit colour from the nearest section so they
   pick up the dark palette without needing per-class overrides. */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] span,
html[data-theme="dark"] div,
html[data-theme="dark"] a,
html[data-theme="dark"] strong,
html[data-theme="dark"] em,
html[data-theme="dark"] label {
  color: inherit;
}

/* Slightly dim muted copy */
html[data-theme="dark"] .text-size-medium,
html[data-theme="dark"] .text-size-regular,
html[data-theme="dark"] .text-size-small,
html[data-theme="dark"] .copy-medium,
html[data-theme="dark"] .infotext,
html[data-theme="dark"] .footer-credit-text {
  color: var(--dk-text-muted) !important;
}

html[data-theme="dark"] .navbar-link,
html[data-theme="dark"] .navbar-logo-link,
html[data-theme="dark"] .navbar-menu-link-wrapper {
  color: var(--dk-text);
}

/* =============================================================
   Liquid Glass — DARK MODE ONLY
   =============================================================
   Earlier I had this applied in both modes, but that hid the
   original Webflow card colours in light mode (warm cream
   .stats-item, dark .is-dark, pink .red-background, near-white
   wrappers, etc.). Light mode now falls through to Webflow's
   defaults, which match the live ylgraphicdesign.com. */
html[data-theme="dark"] {
  --glass-bg:     var(--dk-glass-bg);
  --glass-border: var(--dk-glass-border);
  --glass-shadow: var(--dk-glass-shadow);
  --glass-blur:   var(--dk-glass-blur);
}

/* Every card, panel and the navbar pill — DARK MODE ONLY */
html[data-theme="dark"] .navbar-container,
html[data-theme="dark"] .cta-card,
html[data-theme="dark"] .project-item,
html[data-theme="dark"] .case-study-item,
/* NOTE: .case-study-item-link is deliberately OUT of this list —
   it's the <a> wrapper inside .case-study-item with no border-radius,
   which would create a sharp-cornered glass pane nested inside the
   rounded parent. The parent already has glass, so the child doesn't
   need its own. */
html[data-theme="dark"] .case-studies-component-wrapper,
html[data-theme="dark"] .stats-component-wrapper,
html[data-theme="dark"] .services-component-wrapper,
html[data-theme="dark"] .faq-component-wrapper,
html[data-theme="dark"] .testimonials-component-wrapper,
html[data-theme="dark"] .team-item,
html[data-theme="dark"] .utility-form-block,
html[data-theme="dark"] .license-wrapper,
html[data-theme="dark"] .changelog-wrapper,
html[data-theme="dark"] .stats-item,
html[data-theme="dark"] .stats-item.white-background,
html[data-theme="dark"] .process-card,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .empty-box,
html[data-theme="dark"] .div-block-18,
html[data-theme="dark"] .div-block-17,
html[data-theme="dark"] .case-study-details-wrapper {
  background-color: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  color: var(--dk-text);
}

/* "is-dark" variant — lighter glass, stands out from the plain card.
   Original light-mode: solid dark grey (#2c2c2c) with white text. */
html[data-theme="dark"] .stats-item.is-dark {
  background-color: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

/* Plain .stats-item (no modifier) — warm-tinted glass surface.
   Original light-mode: warm cream (#f7f2ef). */
html[data-theme="dark"] .stats-item:not(.is-dark):not(.red-background):not(.white-background) {
  background-color: rgba(200, 180, 150, 0.07) !important;
  border-color: rgba(200, 180, 150, 0.16) !important;
}

/* "red-background" variant — brand-red tinted glass.
   Original light-mode: pink (#ffc3c3). */
html[data-theme="dark"] .stats-item.red-background {
  background-color: rgba(255, 76, 75, 0.10) !important;
  border-color: rgba(255, 76, 75, 0.24) !important;
  color: var(--dk-text);
}

/* NOTE: .stats-item.is-dark no longer needs a light-mode text override.
   Light mode now falls through to Webflow's original dark bg + white
   text, so the contrast is correct. Dark mode is handled below. */

/* ── Force white text on every red-background surface ───────────────
   Applies in BOTH light and dark modes, because a solid #ff4c4b bg
   gives poor contrast with the default dark body text. The one exception
   is the dark-mode .stats-item.red-background variant which uses a
   subtle translucent red-glass bg instead of solid — that one keeps
   the light off-white text. */

/* Override the "Cross Platform / Visual Consistancy" card to warm gold */
.stats-item.red-background {
  background-color: #D9BF9E !important;
}

.stats-item.red-background,
.stats-item.red-background * {
  color: #1a1a1a !important;
}

html[data-theme="dark"] .stats-item.red-background,
html[data-theme="dark"] .stats-item.red-background * {
  color: var(--dk-text) !important;
}

/* White text on all accent-coloured surfaces */
.contact-form-block,
.contact-form-block *,
.button-secondary,
.button-secondary *,
/* NOTE: .stats-item.red-background is excluded from white text —
   its gold bg #D9BF9E works better with dark text. */
.project-tag,
.project-tag *,
.tagline-pill,
.tagline-pill *,
.tag-list > div,
.tag-list > div * {
  color: #ffffff !important;
}

/* Hover states that swap to a solid red background (Webflow default) */
.button.is-alternate:hover,
.button-2.is-bright:hover,
.button-small.is-alternate:hover,
.button-secondary-small.is-alternate:hover,
.navbar-link:hover,
.footer-link:hover {
  color: #ffffff !important;
}

/* Dark-mode overrides that reuse solid red — keep text white */
html[data-theme="dark"] .button-secondary,
html[data-theme="dark"] .button-secondary *,
html[data-theme="dark"] .button-secondary:hover,
html[data-theme="dark"] .button.is-alternate:hover,
html[data-theme="dark"] .button-2.is-bright:hover,
html[data-theme="dark"] .button-small.is-alternate:hover,
html[data-theme="dark"] .button-secondary-small.is-alternate:hover {
  color: #ffffff !important;
}

/* Inputs on the pink contact form still need their own dark-mode look:
   dark input boxes with light text so they're distinct from the red surround. */
html[data-theme="dark"] .contact-form-block .input-form,
html[data-theme="dark"] .contact-form-block .w-input,
html[data-theme="dark"] .contact-form-block textarea {
  color: var(--dk-text) !important;
}

/* ── Stabilise the masonry card layout ───────────────────────────────
   Keep Webflow's column-count masonry (staggered heights) but prevent
   cards from splitting across columns mid-load. */
.case-study-item {
  break-inside: avoid;
}

/* Mobile: single column stack — two narrow columns look cramped */
@media (max-width: 767px) {
  .case-studies-list {
    column-count: 1 !important;
    grid-template-columns: 1fr !important;
  }
}

/* =============================================================
   Hover effects — every clickable surface gets a response
   ============================================================= */

/* ── Project cards: lift + glow + image zoom ─────────────────────── */
.case-study-item {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light mode hover */
.case-study-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.12),
              0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Dark mode: liquid-glass glow (matching liquid-glass-blush reference) */
html[data-theme="dark"] .case-study-item {
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.08) inset,
              0 1px 0 rgba(255, 255, 255, 0.05) inset,
              0 16px 48px rgba(0, 0, 0, 0.35),
              0 4px 16px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .case-study-item:hover {
  transform: translateY(-4px);
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.12) inset,
              0 1px 0 rgba(255, 255, 255, 0.08) inset,
              0 20px 56px rgba(0, 0, 0, 0.45),
              0 6px 20px rgba(0, 0, 0, 0.30);
}

.case-study-image {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.case-study-item:hover .case-study-image {
  transform: scale(1.04);
}

/* ── "View project" arrow nudge ───────────────────────────────────── */
.button-arrow {
  transition: transform 0.3s ease;
}

.case-study-item:hover .button-arrow {
  transform: translateX(4px);
}

/* ── Buttons: lift + glow ─────────────────────────────────────────── */
.button,
.button-2,
.button-secondary,
.button-small,
.button-secondary-small {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease,
              color 0.2s ease,
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s ease;
}

/* All button-shaped hovers share one language:
   light mode → solid red bg + white text (Webflow's "Work" navbar-link)
   dark mode  → red-accent bg + dark-bg text (Webflow's "Get in touch")
   No glows, no inset rings — just a clean colour swap with a light
   lift. */
.button:hover,
.button-2:hover,
.button-small:hover,
.button.is-navbar:hover {
  transform: translateY(-2px);
  background-color: var(--red) !important;
  border-color: var(--red) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

html[data-theme="dark"] .button:hover,
html[data-theme="dark"] .button-2:hover,
html[data-theme="dark"] .button-small:hover,
html[data-theme="dark"] .button.is-navbar:hover {
  background-color: var(--dk-accent) !important;
  border-color: var(--dk-accent) !important;
  color: var(--dk-bg) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Buttons that are ALREADY red at rest (.button-secondary "Book a call",
   .button-secondary-small) get a lighter-red wash on hover instead of
   the same red — otherwise there's no visible feedback. The pale tint
   reads as "this is interactive" while staying in the red family. */
.button-secondary:hover,
.button-secondary-small:hover {
  transform: translateY(-2px);
  background-color: color-mix(in srgb, var(--red) 55%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--red) 55%, #ffffff) !important;
  color: var(--black) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

html[data-theme="dark"] .button-secondary:hover,
html[data-theme="dark"] .button-secondary-small:hover {
  background-color: color-mix(in srgb, var(--dk-accent) 55%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--dk-accent) 55%, #ffffff) !important;
  color: var(--dk-bg) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Lang + theme toggles get the same red-on-hover treatment.
   Dark mode: red bg + dark text; light mode: red bg + white text. */
.theme-toggle:hover,
.lang-toggle:hover {
  background-color: var(--red) !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .lang-toggle:hover {
  background-color: var(--dk-accent) !important;
  color: var(--dk-bg) !important;
}
/* The track-thumb (sliding white circle) covers half the toggle, so
   keep it visible against the red. */
.theme-toggle:hover .track-thumb,
.lang-toggle:hover .track-thumb {
  background: #ffffff;
}

/* ── Stats / service / process cards: glass glow ──────────────────── */
.stats-item,
.services-component-wrapper,
.process-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.stats-item:hover,
.process-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
}

html[data-theme="dark"] .stats-item:hover,
html[data-theme="dark"] .process-card:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.1) inset,
              0 1px 0 rgba(255, 255, 255, 0.06) inset,
              0 16px 48px rgba(0, 0, 0, 0.4),
              0 4px 16px rgba(0, 0, 0, 0.25);
}

/* The Verve "verve" wordmark inside the Office Furniture stats card is
   a near-black PNG — invisible on the dark-glass card surface. In dark
   mode flatten the entire mark — including the brown 'v' accent — to
   a uniform cream (≈ --dk-text #f5f4f0). brightness(0) collapses every
   pixel to black, invert(1) flips it to pure white, then sepia +
   saturate dial in the warm off-white tone so it doesn't read as
   harsh cold white. */
html[data-theme="dark"] .image-54 {
  filter: brightness(0) invert(1) sepia(0.12) saturate(0.55) brightness(0.97);
}

/* ── Footer social icons ──────────────────────────────────────────── */
.footer-social-link {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s ease;
}

.footer-social-link:hover {
  transform: translateY(-3px) scale(1.08);
  opacity: 0.85;
}

/* ── Navbar: brighter glass surface (dark mode) ───────────────────── */
html[data-theme="dark"] .navbar-container {
  background: linear-gradient(to right,
    rgba(255, 255, 255, 0.26),
    rgba(255, 255, 255, 0.14) 28%,
    rgba(255, 255, 255, 0.09)) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.10) inset,
              0 1px 0 rgba(255, 255, 255, 0.08) inset,
              0 12px 40px rgba(0, 0, 0, 0.35) !important;
  transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Generic link underline sweep ─────────────────────────────────── */
.button-link {
  position: relative;
}

.button-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: currentColor;
  transition: width 0.3s ease;
}

.case-study-item:hover .button-link::after {
  width: 100%;
}

/* ── Tag pills: gentle glow on card hover ─────────────────────────── */
.case-study-item:hover .project-tag {
  transition: background-color 0.3s ease;
}

html[data-theme="dark"] .case-study-item:hover .project-tag {
  background-color: rgba(255, 76, 75, 0.14) !important;
}

/* ── Lightbox image triggers: glow + lift, NO zoom ────────────────── */
.lightbox-link,
.lightbox-link-2,
.lightbox-link-3 {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 0.75rem;
  cursor: pointer;
}

.lightbox-link:hover,
.lightbox-link-2:hover,
.lightbox-link-3:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12),
              0 4px 16px rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] .lightbox-link:hover,
html[data-theme="dark"] .lightbox-link-2:hover,
html[data-theme="dark"] .lightbox-link-3:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.12) inset,
              0 1px 0 rgba(255, 255, 255, 0.06) inset,
              0 20px 56px rgba(0, 0, 0, 0.45),
              0 6px 20px rgba(0, 0, 0, 0.30);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Explicitly block image zoom inside lightbox triggers */
.lightbox-link img,
.lightbox-link-2 img,
.lightbox-link-3 img {
  transition: none;
  transform: none !important;
}

/* ── "Other projects" cards (.project-item on case-study pages) ───── */
.project-item {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.12),
              0 6px 20px rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] .project-item {
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.08) inset,
              0 1px 0 rgba(255, 255, 255, 0.05) inset,
              0 16px 48px rgba(0, 0, 0, 0.35),
              0 4px 16px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .project-item:hover {
  transform: translateY(-4px);
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.12) inset,
              0 1px 0 rgba(255, 255, 255, 0.08) inset,
              0 20px 56px rgba(0, 0, 0, 0.45),
              0 6px 20px rgba(0, 0, 0, 0.30);
}

/* Image zoom on project-item hover (same as case-study cards) */
.project-item:hover img {
  transform: scale(1.04);
}

.project-item img {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── CTA card (call-to-action on case study pages) ────────────────── */
.cta-card {
  transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="dark"] .cta-card {
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.06) inset,
              0 1px 0 rgba(255, 255, 255, 0.04) inset,
              0 16px 48px rgba(0, 0, 0, 0.35),
              0 4px 16px rgba(0, 0, 0, 0.25);
}

/* ── Case-study details wrapper (project info panel) ──────────────── */
.case-study-details-wrapper {
  transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Round off any glass panel that Webflow left with sharp corners ── */
.utility-form-block,
.process-card,
.empty-box,
.div-block-17 {
  border-radius: 1.75rem !important;
}

/* ── Consistent breathing room for the lightbox sections ─────────────
   The case-study pages use either .div-block-17 (verve + 6 others) or
   .div-block-18 (apricot) to wrap the full-width lightbox block. Webflow
   left one with 0/0 spacing and the other with 64px/0, which meant the
   photos butted against adjacent sections. Normalise both. */
.div-block-17,
.div-block-18 {
  margin-top:    3rem !important;
  margin-bottom: 3rem !important;
  padding-top:    3rem !important;
  padding-bottom: 3rem !important;
}

.empty-state {
  border-radius: 1.75rem !important;   /* was 0.5rem, too small for glass */
}

/* Any block that contains a glass card and currently has a zero radius
   gets a rounded overflow so child corners sit flush against the parent. */
.section-case-study-details,
.container-large,
.container-medium,
.container-small {
  /* leave intrinsic radius alone; only ensure overflow cannot expose
     sharp sub-pixel corners when glass children sit at the edges. */
}

/* ── Section backgrounds that Webflow hardcoded to pure #000 ────────
   Replace with a warm near-black that matches the site palette. */
.page-intro-splitscreen-top,
.page-intro-splitscreen-bottom {
  background-color: #14161b !important;
}

html[data-theme="dark"] .page-intro-splitscreen-top,
html[data-theme="dark"] .page-intro-splitscreen-bottom {
  background-color: var(--dk-bg) !important;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
/* Webflow's primary buttons are black on light; invert for dark mode. */
html[data-theme="dark"] .button,
html[data-theme="dark"] .button-2 {
  background-color: var(--dk-text) !important;
  color: var(--dk-bg) !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

html[data-theme="dark"] .button:hover,
html[data-theme="dark"] .button-2:hover {
  background-color: var(--dk-accent) !important;
  color: var(--dk-bg) !important;
}

html[data-theme="dark"] .button.is-alternate,
html[data-theme="dark"] .button-2.is-bright {
  background-color: var(--dk-bg-elevated) !important;
  color: var(--dk-text) !important;
}

html[data-theme="dark"] .button-2.is-bright.is-secondary,
html[data-theme="dark"] .button-secondary-small,
html[data-theme="dark"] .button-link {
  background-color: transparent !important;
  color: var(--dk-text) !important;
}

/* "Book a call" style — Webflow's .button-secondary keeps its pink
   var(--red) background in dark mode, so force the text to dark for
   readability (light pink on light off-white was zero contrast). */
html[data-theme="dark"] .button-secondary {
  color: var(--dk-bg) !important;
}

html[data-theme="dark"] .button-secondary:hover {
  background-color: var(--dk-accent) !important;
  color: var(--dk-bg) !important;
}

/* .button.is-alternate hover: Webflow paints a pink bg with the default
   text colour, producing poor contrast on dark. Use the soft salmon-tinted
   surface with dark text instead. */
html[data-theme="dark"] .button.is-alternate:hover,
html[data-theme="dark"] .button-2.is-bright:hover,
html[data-theme="dark"] .button-secondary-small.is-alternate:hover,
html[data-theme="dark"] .button-small.is-alternate:hover {
  background-color: var(--dk-accent) !important;
  color: var(--dk-bg) !important;
  border-color: var(--dk-accent) !important;
}

/* Navbar link hover (dark): solid red pill with dark text — same
   treatment as every other button so "Work" hover matches "Get in
   touch" hover exactly. */
html[data-theme="dark"] .navbar-link:hover {
  background-color: var(--dk-accent) !important;
  color: var(--dk-bg) !important;
  box-shadow: none;
}

/* ── Tag pills ───────────────────────────────────────────────────── */
html[data-theme="dark"] .tag-list > div,
html[data-theme="dark"] .tag-list span,
html[data-theme="dark"] .project-tag,
html[data-theme="dark"] .tagline-pill {
  background-color: var(--dk-accent-soft) !important;
  color: var(--dk-accent) !important;
}

/* ── Form inputs ─────────────────────────────────────────────────── */
html[data-theme="dark"] .w-input,
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .input-form,
html[data-theme="dark"] .w-select {
  background-color: var(--dk-bg-raised) !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
}

html[data-theme="dark"] .w-input::placeholder,
html[data-theme="dark"] .form-input::placeholder,
html[data-theme="dark"] .input-form::placeholder {
  color: var(--dk-text-dim) !important;
}

/* ── Contact form: keep inputs distinct from the red form surround ──
   Labels, headings and paragraphs are handled by the white-on-red rule
   above. Inputs themselves are dark boxes with light text so they stay
   visually separate from the solid red form background. */
/* Light mode: white input boxes on the red form card */
.contact-form-block .input-form,
.contact-form-block .w-input,
.contact-form-block textarea {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}

.contact-form-block .input-form::placeholder,
.contact-form-block .w-input::placeholder,
.contact-form-block textarea::placeholder {
  color: rgba(0, 0, 0, 0.35) !important;
}

/* Dark mode: dark translucent input boxes */
html[data-theme="dark"] .contact-form-block .input-form,
html[data-theme="dark"] .contact-form-block .w-input,
html[data-theme="dark"] .contact-form-block textarea {
  background-color: rgba(0, 0, 0, 0.3) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="dark"] .contact-form-block .input-form::placeholder,
html[data-theme="dark"] .contact-form-block .w-input::placeholder,
html[data-theme="dark"] .contact-form-block textarea::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* Submit button — dark pill with white text on the red form card */
.contact-form-block .button,
.contact-form-block .submit-button,
.contact-form-block .w-button,
html[data-theme="dark"] .contact-form-block .button,
html[data-theme="dark"] .contact-form-block .submit-button,
html[data-theme="dark"] .contact-form-block .w-button {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}

.contact-form-block .button:hover,
.contact-form-block .submit-button:hover,
.contact-form-block .w-button:hover,
html[data-theme="dark"] .contact-form-block .button:hover,
html[data-theme="dark"] .contact-form-block .submit-button:hover,
html[data-theme="dark"] .contact-form-block .w-button:hover {
  background-color: #2d2d2d !important;
}


/* =============================================================
   Homepage — Data Visualization section (sketch-matched layout)
   =============================================================
   Top-left: CO2 landscape image
   Bottom-left: single text card
   Right column: Sony poster (portrait), spans both rows
   Below: full-width live-dashboard iframe                         */

/* Shrink the subtitle sitting under each stats-section-header h2.
   Default .text-size-medium is 1.25rem which feels too large as a
   subtitle companion to the h2 title. */
.stats-section-header .text-size-medium {
  font-size: 1rem;
  line-height: 1.5;
}

/* Mobile: rebalance headings vs. stat labels.
   Default mobile has .stat-number at 3.2rem (too big) and
   .heading-style-h2 at 1.5rem (too small) — swap that emphasis. */
@media (max-width: 767px) {
  .stat-number {
    font-size: 2.5rem !important;
  }
  .stats-section-header .heading-style-h2 {
    font-size: 2rem !important;
  }
}

@media (max-width: 479px) {
  .stat-number {
    font-size: 2.5rem !important;
  }
  .stats-section-header .heading-style-h2 {
    font-size: 1.875rem !important;
  }
}

.dv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;   /* row 1 = CO2 natural, row 2 = fills */
  gap: 2rem;                      /* match Webflow stats-list */
  margin: 0;
  width: 100%;
  min-width: 0;                   /* allow children to shrink */
}

.dv-grid > * {
  min-width: 0;                   /* prevent content from overflowing cell */
  overflow: hidden;
}

.dv-cell-co2   { grid-column: 1; grid-row: 1; }
.dv-cell-card  { grid-column: 1; grid-row: 2; align-self: stretch; }
.dv-cell-sony  { grid-column: 2; grid-row: 1 / -1; align-self: stretch; }

.dv-cell-co2,
.dv-cell-sony {
  border-radius: 2rem;            /* match Webflow .stats-item */
  background: rgba(0, 0, 0, 0.04);
}

/* Match .stats-item exactly so the text card doesn't look out of place. */
.dv-cell-card.stats-item {
  padding: 2rem;
  border-radius: 2rem;
}

/* Webflow's .stat-item-content has margin: auto, which center-shifts it
   inside wide cards (content's natural width < card inner width). The
   Verve cards are narrow enough that text fills the row and the auto
   margins collapse to 0; this wider card needs an explicit override. */
.dv-cell-card .stat-item-content {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

/* Sony poster is portrait — its natural height drives right column;
   CO2 fills its cell (natural aspect), card stretches to fill the
   remaining row 2 space, so left and right columns end up the same
   height without cropping the CO2 image. */
.dv-cell-co2 img {
  width: 100%;
  height: auto;
  display: block;
}
.dv-cell-sony img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.dv-iframe-wrapper {
  border-radius: 2rem;             /* match stats-item radius */
  overflow: hidden;
  margin-top: 2rem;                /* match dv-grid gap */
  width: 100%;
  position: relative;
}
.dv-iframe-wrapper iframe {
  width: 100%;
  /* Heights tuned against the actual Liquid Glass dashboard content
     at each iframe-width / layout breakpoint, with a small (~30–60px)
     buffer so the iframe ends just past the footer — no void on
     desktop, no crop on mobile. The iframe sits inside .container-
     large nested under .section-stat (which has its own outer margin
     on desktop), so the parent breakpoints below are calibrated by
     measuring iframe width at each body width on this site, not by
     formula. Layout transitions:
       body ≥1232 → iframe ≥1024 → lg (6-col KPI, content ~1370)
       body ≤1231 → iframe <1024 → md (3-col KPI, content ~1900)
       body ≤905  → iframe <768  → mobile (2-col KPI, content ~2050)
       body ≤599  → iframe <485  → footer wraps (content ~2150)
       body ≤424  → iframe <320  → narrowest (content ~2300)        */
  height: 1380px;
  border: 0;
  display: block;
}

@media (max-width: 1231px) {
  .dv-iframe-wrapper iframe { height: 1950px; }
}

@media (max-width: 905px) {
  .dv-iframe-wrapper iframe { height: 2100px; }
}

@media (max-width: 599px) {
  .dv-iframe-wrapper iframe { height: 2220px; }
}

@media (max-width: 424px) {
  .dv-iframe-wrapper iframe { height: 2380px; }
}

@media (max-width: 991px) {
  .dv-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 1rem;
  }
  .dv-cell-co2   { grid-column: 1; grid-row: 1; }
  .dv-cell-sony  { grid-column: 1; grid-row: 2; }
  .dv-cell-card  { grid-column: 1; grid-row: 3; }
}

/* 2-col gallery grids collapse to single column on mobile */
@media (max-width: 767px) {
  .wood-cut-gallery,
  .oil-painting-gallery {
    grid-template-columns: 1fr !important;
  }
}

/* Pair each 2-row of the oil-painting gallery so the taller portrait
   aligns with its matching portrait (both rows balance naturally). */
.oil-painting-gallery > a {
  align-self: start;
}

/* Same dashboard, embedded on the case-study page via Webflow's
   .code-embed.w-iframe wrapper. Heights mirror the homepage block
   above (aligned to the dashboard's lg/md/mobile transitions).
   !important overrides Webflow's inline 2050px fallback.           */
.code-embed.w-iframe iframe {
  height: 1380px !important;
}
@media (max-width: 1231px) {
  .code-embed.w-iframe iframe { height: 1950px !important; }
}
@media (max-width: 905px) {
  .code-embed.w-iframe iframe { height: 2100px !important; }
}
@media (max-width: 599px) {
  .code-embed.w-iframe iframe { height: 2220px !important; }
}
@media (max-width: 424px) {
  .code-embed.w-iframe iframe { height: 2380px !important; }
}

/* Hide the footer logo — not needed, navbar logo is enough */
.footer-logo-link,
.footer-logo {
  display: none !important;
}

/* ── Footer ──────────────────────────────────────────────────────── */
html[data-theme="dark"] .footer-component {
  background-color: var(--dk-bg);
  border-top: 1px solid var(--dk-border-soft);
}

html[data-theme="dark"] .footer-link {
  color: var(--dk-text-muted);
}

/* Footer link hover: Webflow paints a pink pill behind the link which
   looks washed-out on dark + light text. Swap for a subtle glass tint. */
html[data-theme="dark"] .footer-link:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--dk-accent) !important;
}

html[data-theme="dark"] .footer-line-divider {
  background-color: var(--dk-border);
}

/* ── Process elements (hover lines) ──────────────────────────────── */
html[data-theme="dark"] .process-head-line,
html[data-theme="dark"] .process-hover-line,
html[data-theme="dark"] .process-second-hover-line,
html[data-theme="dark"] .process-third-hover-line {
  background-color: var(--dk-text) !important;
  color: var(--dk-bg) !important;
}

html[data-theme="dark"] .process-line {
  background-color: var(--dk-border) !important;
}

html[data-theme="dark"] .process-number {
  background-color: var(--dk-bg-raised) !important;
  color: var(--dk-text) !important;
}

/* ── Webflow default overrides ───────────────────────────────────── */
html[data-theme="dark"] .w-nav { background-color: transparent; }
html[data-theme="dark"] .w-lightbox-caption {
  background-color: rgba(24, 26, 31, 0.85) !important;
}

/* ── Image handling: leave case study work alone so the designer's
       own colour choices are preserved. No global filter. ────────── */

/* Logo in dark mode: diffuse glow for legibility.
   Navbar link has overflow:hidden so glow stays contained. */
html[data-theme="dark"] .navbar-logo-link,
html[data-theme="dark"] .footer-logo-link {
  overflow: visible;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Desktop-only: clip the glow inside the navbar pill. On mobile the
   hamburger menu expands and needs overflow:visible to show the dropdown. */
@media (min-width: 992px) {
  html[data-theme="dark"] .navbar-container {
    overflow: hidden;
  }
}

html[data-theme="dark"] .navbar_logo,
html[data-theme="dark"] .footer-logo {
  transition: filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="dark"] .navbar_logo:hover,
html[data-theme="dark"] .footer-logo:hover {
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.30))
          drop-shadow(0 0 40px rgba(255, 255, 255, 0.18))
          drop-shadow(0 0 80px rgba(255, 255, 255, 0.10));
}

/* =============================================================
   Navbar layout overrides (applied in both light + dark modes)
   ============================================================= */

/* Push the Work / Get-in-touch menu all the way to the right so it sits
   next to the theme toggle, leaving the logo alone on the left. */
.navbar-container .navbar-menu {
  margin-left: auto;
}

/* Auto-hide / show the navbar on scroll. */
.navbar-component {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.navbar-component.is-hidden {
  transform: translateY(-120%);
}

/* =============================================================
   Theme toggle button (lives in the navbar)
   ============================================================= */

/* Apple iOS-style toggle — coloured track + sliding circular thumb. */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 52px;
  height: 30px;
  padding: 2px;
  margin: 0 0.5rem;
  background: rgba(120, 120, 128, 0.16);
  border: none;
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-appearance: none;
          appearance: none;
  font: inherit;
}

/* Dark mode → track turns blue (iOS "on" state) */
html[data-theme="dark"] .theme-toggle {
  background: rgba(40, 40, 45, 0.55);
  color: var(--dk-text);
}

.theme-toggle:focus-visible {
  outline: 2px solid #4d65ff;
  outline-offset: 2px;
}

/* Sliding thumb — a circle that moves left/right based on theme */
.theme-toggle .track-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.15),
    0 3px 1px rgba(0, 0, 0, 0.06);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  pointer-events: none;
}

html[data-theme="dark"] .theme-toggle .track-thumb {
  transform: translateX(22px);
}

/* Icons live at each end, dimmed; the active one is under the thumb.
   The SVGs ARE these elements (class="icon-sun" lives on the <svg>),
   so width here directly controls the rendered glyph size. Smaller +
   wider horizontal padding gives the icons breathing room inside the
   pill instead of filling each half edge-to-edge. */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  display: flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  margin: 0 5px; /* extra padding around each icon */
  opacity: 0.55;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.25s ease, color 0.25s ease;
  stroke-width: 2.2; /* keep strokes visible at the smaller size */
}

.theme-toggle svg {
  display: block;
  filter: none !important;
}

/* Active icon (under thumb) gets full strength */
html[data-theme="light"] .theme-toggle .icon-sun,
html:not([data-theme="dark"]) .theme-toggle .icon-sun {
  opacity: 1;
  color: #1a1a1a;
}

html[data-theme="dark"] .theme-toggle .icon-moon {
  opacity: 1;
  color: #1a1a1a;
}

/* =============================================================
   Language toggle button (same style family as theme toggle)
   ============================================================= */

/* Apple iOS-style language switch */
.lang-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 52px;
  height: 30px;
  padding: 2px;
  margin: 0 0.25rem;
  background: rgba(120, 120, 128, 0.16);
  border: none;
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-appearance: none;
          appearance: none;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* ZH active → track turns blue like iOS on state */
.lang-toggle[data-active="zh"] {
  background: rgba(40, 40, 45, 0.55);
}

html[data-theme="dark"] .lang-toggle {
  color: var(--dk-text);
}

.lang-toggle:focus-visible {
  outline: 2px solid #4d65ff;
  outline-offset: 2px;
}

/* Sliding thumb */
.lang-toggle .track-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.15),
    0 3px 1px rgba(0, 0, 0, 0.06);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  pointer-events: none;
}

.lang-toggle[data-active="zh"] .track-thumb {
  transform: translateX(22px);
}

/* Both labels visible; active (under thumb) is bold and dark */
.lang-toggle [data-lang-label] {
  display: flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.25s ease, color 0.25s ease;
}

.lang-toggle:not([data-active="zh"]) [data-lang-label="en"],
.lang-toggle[data-active="en"] [data-lang-label="en"] {
  opacity: 1;
  color: #1a1a1a;
}

.lang-toggle[data-active="zh"] [data-lang-label="zh"] {
  opacity: 1;
  color: #1a1a1a;
}

/* Small screen: tighten spacing next to the hamburger. */
@media (max-width: 991px) {
  .theme-toggle {
    margin: 0 0.25rem;
  }
  .lang-toggle {
    margin: 0 0.25rem 0 auto;
  }
}

/* =============================================================
   Floating utility cluster (lang + theme toggles).
   theme-toggle.js relocates both buttons out of the navbar into a
   <div class="utility-cluster"> appended to <body> at DOM ready,
   because the navbar uses transform/will-change which would trap
   any position:fixed descendant inside its containing block. */
.utility-cluster {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none; /* let children own pointer hits */
  /* JS sets translateY when the footer is in view, lifting the cluster
     above it. Transition smooths the lift while the user scrolls. */
  transition: transform 0.18s cubic-bezier(0.2, 0, 0.2, 1);
  will-change: transform;
}
.utility-cluster .lang-toggle,
.utility-cluster .theme-toggle {
  position: relative; /* override the navbar-scoped relative-position rule */
  margin: 0;
  pointer-events: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* Pre-relocation flash guard: while the toggles are still children of
   the navbar (i.e. between first paint and DOMContentLoaded when JS
   moves them into .utility-cluster), keep them hidden so the user
   doesn't see them flicker in the top-right then jump to the bottom.
   Once the script reparents them into .utility-cluster the selector
   no longer matches and they appear in their final position. */
.navbar-container .lang-toggle,
.navbar-container .theme-toggle {
  display: none !important;
}

/* =============================================================
   Neon edge ring (follows each element's shape)
   =============================================================
   A thin 1px blue ring around the full edge of every clickable
   element. Follows border-radius naturally via padding + mask.
   Ring intensity rises with cursor proximity (via JS).           */

/* Glow effect — DARK MODE + NAVBAR ONLY. */
html[data-theme="dark"] .navbar-component .theme-toggle,
html[data-theme="dark"] .navbar-component .lang-toggle,
html[data-theme="dark"] .navbar-component .navbar-link,
html[data-theme="dark"] .navbar-component .button.is-navbar {
  /* Toggles are floated (position: fixed) by the rule above; the
     navbar-link / nav button still need a positioning context for the
     glow ::before. fixed also creates one, so leave the toggles alone. */
  --neon-intensity: 0.35;
  --glow-angle: 0deg;
}
html[data-theme="dark"] .navbar-component .navbar-link,
html[data-theme="dark"] .navbar-component .button.is-navbar {
  position: relative;
}

/* Footer social icons — rounded pill shape */
.footer-social-link {
  border-radius: 999px;
  padding: 0.5rem 0.75rem;
}

/* Thin edge ring with cursor-facing spike */
html[data-theme="dark"] .navbar-component .theme-toggle::before,
html[data-theme="dark"] .navbar-component .lang-toggle::before,
html[data-theme="dark"] .navbar-component .navbar-link::before,
html[data-theme="dark"] .navbar-component .button.is-navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  z-index: 3;
  background: conic-gradient(
    from calc(var(--glow-angle) - 25deg),
    rgba(110, 182, 255, 0.075) 0deg,
    rgba(220, 240, 255, 0.5) 25deg,
    rgba(110, 182, 255, 0.075) 50deg,
    rgba(110, 182, 255, 0.075) 360deg
  );
  opacity: var(--neon-intensity);
  filter: drop-shadow(0 0 2px rgba(140, 200, 255, 0.35));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  transition: opacity 0.25s ease;
}

/* Subtle glass surface sheen + refraction highlight */
html[data-theme="dark"] .navbar-component .theme-toggle::after,
html[data-theme="dark"] .navbar-component .lang-toggle::after,
html[data-theme="dark"] .navbar-component .navbar-link::after,
html[data-theme="dark"] .navbar-component .button.is-navbar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  background:
    radial-gradient(
      ellipse farthest-corner at var(--hotspot-x, 50%) var(--hotspot-y, 0%),
      rgba(240, 250, 255, 0.175) 0%,
      rgba(140, 200, 255, 0.08) 35%,
      rgba(110, 182, 255, 0.025) 75%,
      rgba(110, 182, 255, 0) 100%
    ),
    radial-gradient(
      circle 14px at calc(100% - var(--hotspot-x, 50%)) calc(100% - var(--hotspot-y, 0%)),
      rgba(240, 250, 255, 0.12) 0%,
      rgba(140, 200, 255, 0.045) 60%,
      rgba(110, 182, 255, 0) 90%
    );
  opacity: var(--neon-intensity);
  transition: opacity 0.25s ease;
  mix-blend-mode: screen;
}

/* Dark mode — hamburger menu lines should be white, not black */
html[data-theme="dark"] .menu-icon-line-top,
html[data-theme="dark"] .menu-icon-line-middle,
html[data-theme="dark"] .menu-icon-line-bottom {
  background-color: var(--dk-text) !important;
}

/* Webflow's tablet breakpoint trims .button padding, which lets long
   labels like "View More" wrap to two lines. Lock buttons to a single
   line so the rounded pill keeps its shape across all widths. */
.button,
.button-text-item {
  white-space: nowrap;
  word-break: keep-all;
}