/* Mattia portfolio production polish layer.
   This file is intentionally loaded last to settle older section variants into one visual system. */

:root {
  --wp-bg: #061016;
  --wp-text: #f7f2e8;
  --wp-muted: rgba(247, 242, 232, 0.72);
  --wp-panel-bg:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.026) 44%, rgba(255, 255, 255, 0.055)),
    linear-gradient(180deg, rgba(43, 52, 65, 0.88), rgba(21, 29, 40, 0.9));
  --wp-panel-border: rgba(142, 219, 255, 0.18);
  --wp-radius-card: 18px;
  --wp-radius-panel: 20px;
  --wp-section-gap: clamp(3.8rem, 7vw, 7rem);
  --wp-icon-cyan: 68, 217, 255;
  --wp-icon-gold: 255, 203, 87;
  --wp-icon-orange: 255, 139, 50;
  --wp-icon-red: 255, 78, 94;
  --wp-icon-blue: 79, 151, 255;
  --wp-icon-green: 87, 223, 120;
  --wp-icon-purple: 150, 87, 255;
  --wp-icon-pink: 255, 60, 165;
  --wp-icon-lime: 200, 239, 68;
  --wp-icon-teal: 46, 208, 187;
}

html {
  overflow-x: clip;
}

body {
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(68, 217, 255, 0.08), transparent 70%),
    linear-gradient(180deg, #07131b, var(--wp-bg) 44%, #050b10 100%) !important;
}

.content,
.stage,
.scene,
.section,
.site-footer--unified {
  max-width: 100%;
  min-width: 0;
}

.scene {
  gap: 0 !important;
}

.home-scene .section:not(.home-hero),
.about-scene .section,
.process-scene .section,
.portfolio-scene .section,
.contact-scene .section,
.legal-scene .section {
  padding-block: var(--wp-section-gap) !important;
}

.home-scene .section + .section,
.about-scene .section + .section,
.process-scene .section + .section,
.portfolio-scene .section + .section,
.contact-scene .section + .section,
.legal-scene .section + .section {
  margin-top: 0 !important;
}

.section-heading {
  gap: clamp(0.65rem, 1.15vw, 0.95rem) !important;
  margin-bottom: clamp(1.6rem, 3.3vw, 2.7rem) !important;
  max-width: min(980px, 100%);
}

.section-heading h1,
.section-heading h2,
.faq.section > h2,
.legal-hero h1,
.portfolio-hero h1,
.process-hero h1,
.contact-hero h1,
.about-hero h1 {
  color: var(--wp-text) !important;
  text-wrap: balance;
}

.section-heading h2,
.faq.section > h2,
.case-studies-section .section-heading h2,
.about-scene .section-heading h2,
.process-scene .section-heading h2,
.portfolio-scene .section-heading h2,
.contact-scene .section-heading h2 {
  font-size: clamp(2rem, 3.65vw, 3.35rem) !important;
  line-height: 1.04 !important;
  letter-spacing: 0.038em !important;
  max-width: 16.5ch !important;
}

.legal-hero h1,
.portfolio-hero h1,
.process-hero h1,
.contact-hero h1,
.about-hero h1 {
  font-size: clamp(2.25rem, 4.8vw, 4.85rem) !important;
  line-height: 0.98 !important;
  letter-spacing: 0.05em !important;
}

.section-intro,
.section-heading p,
.legal-lead,
.portfolio-hero p,
.process-hero p,
.contact-hero p,
.about-hero p {
  max-width: 760px !important;
  color: var(--wp-muted) !important;
  font-size: clamp(0.94rem, 1.05vw, 1.05rem) !important;
  line-height: 1.68 !important;
}

.feature-grid,
.services-matrix,
.case-studies-grid,
.home-case-grid,
.values-grid,
.tool-board,
.packages,
.portfolio-grid {
  gap: clamp(1rem, 1.8vw, 1.45rem) !important;
}

.feature-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.services-matrix {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 218px), 1fr)) !important;
}

.card-3d,
.feature-panel,
.service-card-button,
.process-panel,
.portfolio-panel,
.about-panel,
.contact-panel,
.package-card,
.concept-card,
.home-case-card,
.legal-card,
.faq-answer,
.faq-answer-panel--inline,
.work-vibes-carousel,
.timeline-support__box,
.availability-card,
.contact-method-card,
.summary-panel,
.form-wizard {
  border-radius: var(--wp-radius-card) !important;
  border-color: var(--wp-panel-border) !important;
  background: var(--wp-panel-bg) !important;
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28) !important;
}

.feature-panel,
.service-card-button,
.package-card,
.concept-card,
.home-case-card,
.about-panel,
.process-panel,
.portfolio-panel,
.contact-panel {
  min-width: 0 !important;
  height: 100%;
  padding: clamp(1rem, 1.65vw, 1.35rem) !important;
}

.feature-panel,
.service-card-button {
  align-items: stretch;
  gap: clamp(0.6rem, 1.1vw, 0.85rem) !important;
}

.feature-panel h3,
.service-card-button h3,
.package-card h3,
.concept-card h3,
.home-case-card h3,
.values-card h3,
.vibe-card h3,
.stack-card h3,
.timeline-support h3,
.signal-card h3,
.faq-answer h3 {
  font-size: clamp(1.12rem, 1.45vw, 1.55rem) !important;
  line-height: 1.12 !important;
  letter-spacing: 0.025em !important;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.feature-panel p,
.service-card-button p,
.package-card p,
.concept-card p,
.home-case-card p,
.values-card p,
.vibe-card p,
.signal-card p,
.timeline-support p,
.faq-answer p,
.legal-prose p,
.legal-prose li {
  color: rgba(247, 242, 232, 0.78) !important;
  font-size: clamp(0.9rem, 0.98vw, 0.98rem) !important;
  line-height: 1.64 !important;
}

.panel-kicker,
.concept-card__kicker,
.signal-card__kicker,
.timeline-year,
.footer-eyebrow,
.portfolio-kicker,
.legal-badge,
.service-card-button .tag {
  letter-spacing: 0.12em !important;
}

.feature-panel,
.service-card-button,
.package-card,
.values-card,
.signal-card,
.stack-card,
.timeline-entry,
.concept-card,
.home-case-card,
.contact-method-card,
.availability-card,
.summary-panel {
  --icon-accent-rgb: var(--wp-icon-cyan);
  --icon-accent: rgb(var(--icon-accent-rgb));
}

.feature-grid > :nth-child(1),
.values-grid > :nth-child(1),
.packages > :nth-child(1) {
  --icon-accent-rgb: var(--wp-icon-blue);
}

.feature-grid > :nth-child(2),
.values-grid > :nth-child(4),
.packages > :nth-child(3) {
  --icon-accent-rgb: var(--wp-icon-gold);
}

.feature-grid > :nth-child(3),
.values-grid > :nth-child(3),
.packages > :nth-child(2) {
  --icon-accent-rgb: var(--wp-icon-purple);
}

.feature-grid > :nth-child(4),
.values-grid > :nth-child(2) {
  --icon-accent-rgb: var(--wp-icon-green);
}

.services-matrix > :nth-child(10n + 1),
.portfolio-grid > :nth-child(8n + 1),
.tool-board > :nth-child(3n + 1) {
  --icon-accent-rgb: var(--wp-icon-cyan);
}

.services-matrix > :nth-child(10n + 2),
.portfolio-grid > :nth-child(8n + 2) {
  --icon-accent-rgb: var(--wp-icon-green);
}

.services-matrix > :nth-child(10n + 3),
.portfolio-grid > :nth-child(8n + 3) {
  --icon-accent-rgb: var(--wp-icon-purple);
}

.services-matrix > :nth-child(10n + 4),
.portfolio-grid > :nth-child(8n + 4) {
  --icon-accent-rgb: var(--wp-icon-orange);
}

.services-matrix > :nth-child(10n + 5),
.portfolio-grid > :nth-child(8n + 5) {
  --icon-accent-rgb: var(--wp-icon-pink);
}

.services-matrix > :nth-child(10n + 6),
.portfolio-grid > :nth-child(8n + 6),
.tool-board > :nth-child(3n + 2) {
  --icon-accent-rgb: var(--wp-icon-gold);
}

.services-matrix > :nth-child(10n + 7),
.portfolio-grid > :nth-child(8n + 7) {
  --icon-accent-rgb: var(--wp-icon-blue);
}

.services-matrix > :nth-child(10n + 8),
.portfolio-grid > :nth-child(8n + 8) {
  --icon-accent-rgb: var(--wp-icon-teal);
}

.services-matrix > :nth-child(10n + 9) {
  --icon-accent-rgb: var(--wp-icon-lime);
}

.services-matrix > :nth-child(10n) {
  --icon-accent-rgb: var(--wp-icon-red);
}

.tool-board > :nth-child(3n) {
  --icon-accent-rgb: var(--wp-icon-green);
}

.panel-icon,
.value-icon,
.vibe-card__icon,
.timeline-support__icon,
.stack-card__header .value-icon,
.footer-icon,
.process-step__icon,
.contact-method-card__icon,
.availability-card__icon {
  color: rgb(var(--icon-accent-rgb, var(--wp-icon-cyan))) !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.28), transparent 58%),
    linear-gradient(145deg, rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.15), rgba(255, 255, 255, 0.035)) !important;
  border: 1px solid rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.25) !important;
  box-shadow:
    0 0 26px rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.panel-icon {
  width: clamp(52px, 5vw, 58px) !important;
  height: clamp(52px, 5vw, 58px) !important;
  border-radius: 16px !important;
  align-self: flex-start !important;
}

.panel-icon svg {
  width: clamp(24px, 2.6vw, 28px) !important;
  height: clamp(24px, 2.6vw, 28px) !important;
}

.panel-link,
.service-card-button .tag,
.concept-tag,
.stack-tag,
.about-foundation-pill,
.legal-badge {
  border-radius: 999px !important;
}

.feature-panel:hover,
.feature-panel:focus-visible,
.service-card-button:hover,
.service-card-button:focus-visible,
.package-card:hover,
.concept-card:hover,
.contact-method-card:hover,
.timeline-entry:hover,
.timeline-entry:focus-visible {
  border-color: rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.36) !important;
  box-shadow:
    0 26px 62px rgba(0, 0, 0, 0.36),
    0 0 32px rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.11) !important;
}

.footer-contact-link:nth-of-type(1) {
  --icon-accent-rgb: var(--wp-icon-cyan);
}

.footer-contact-link:nth-of-type(2) {
  --icon-accent-rgb: var(--wp-icon-green);
}

.footer-contact-link:nth-of-type(3) {
  --icon-accent-rgb: var(--wp-icon-blue);
}

.nav-icons li:nth-child(1),
.bottom-nav a:nth-child(1) {
  --nav-accent-rgb: var(--wp-icon-cyan);
}

.nav-icons li:nth-child(2),
.bottom-nav a:nth-child(2) {
  --nav-accent-rgb: var(--wp-icon-teal);
}

.nav-icons li:nth-child(3),
.bottom-nav a:nth-child(3) {
  --nav-accent-rgb: var(--wp-icon-gold);
}

.nav-icons li:nth-child(4),
.bottom-nav a:nth-child(4) {
  --nav-accent-rgb: var(--wp-icon-purple);
}

.nav-icons li:nth-child(5),
.bottom-nav a:nth-child(5) {
  --nav-accent-rgb: var(--wp-icon-pink);
}

.nav-btn {
  color: rgba(247, 242, 232, 0.66) !important;
}

.nav-btn.active,
.nav-btn[aria-current="page"],
.nav-btn:hover,
.nav-btn:focus-visible {
  color: rgb(var(--nav-accent-rgb, var(--wp-icon-cyan))) !important;
  background: rgba(var(--nav-accent-rgb, var(--wp-icon-cyan)), 0.12) !important;
  border-color: rgba(var(--nav-accent-rgb, var(--wp-icon-cyan)), 0.24) !important;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid rgba(255, 203, 87, 0.95) !important;
  outline-offset: 3px !important;
}

.btn,
.cc-btn,
.faq-question,
.carousel-btn,
.concept-modal__close {
  min-height: 44px;
}

.btn {
  border-radius: 13px !important;
  letter-spacing: 0.02em !important;
}

.faq-container {
  gap: clamp(1rem, 2vw, 1.5rem) !important;
}

.faq-question {
  border-radius: 14px !important;
  font-size: clamp(0.82rem, 0.9vw, 0.94rem) !important;
  line-height: 1.28 !important;
}

.faq-answer {
  padding: clamp(1.2rem, 2.2vw, 1.8rem) !important;
}

.faq-answer h3 {
  color: rgb(var(--wp-icon-cyan)) !important;
}

.legal-hero {
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.62fr) !important;
  gap: clamp(1.1rem, 2.8vw, 2rem) !important;
}

.legal-prose {
  max-width: 980px !important;
}

.legal-card,
.legal-prose {
  border-radius: var(--wp-radius-panel) !important;
}

.legal-card h2,
.legal-prose h2 {
  font-size: clamp(1.35rem, 2.2vw, 2.05rem) !important;
  line-height: 1.14 !important;
  letter-spacing: 0.035em !important;
  margin-top: clamp(2rem, 4vw, 3rem) !important;
}

.legal-card h2:first-child,
.legal-prose h2:first-child {
  margin-top: 0 !important;
}

.legal-prose h3 {
  font-size: clamp(1.06rem, 1.45vw, 1.32rem) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.025em !important;
}

html:not(.js-reveal-ready) .reveal-item {
  opacity: 1 !important;
  transform: none !important;
}

.reveal-item {
  transition-duration: 420ms !important;
  transition-delay: 0ms !important;
}

.cc-banner {
  width: min(720px, calc(100vw - 112px)) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  padding: 0.72rem 0.82rem !important;
}

.cc-banner-inner {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
}

.cc-actions {
  flex-wrap: nowrap !important;
}

@media (max-width: 1180px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .services-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  :root {
    --wp-section-gap: clamp(2.5rem, 9vw, 4rem);
  }

  .section-heading {
    margin-bottom: clamp(1.1rem, 5vw, 1.7rem) !important;
  }

  .section-heading h2,
  .faq.section > h2,
  .case-studies-section .section-heading h2,
  .about-scene .section-heading h2,
  .process-scene .section-heading h2,
  .portfolio-scene .section-heading h2,
  .contact-scene .section-heading h2 {
    font-size: clamp(1.62rem, 7.4vw, 2.25rem) !important;
    line-height: 1.08 !important;
    letter-spacing: 0.026em !important;
    max-width: 13.5ch !important;
  }

  .legal-hero h1,
  .portfolio-hero h1,
  .process-hero h1,
  .contact-hero h1,
  .about-hero h1 {
    font-size: clamp(1.95rem, 9vw, 2.9rem) !important;
    letter-spacing: 0.035em !important;
  }

  .feature-grid,
  .services-matrix,
  .packages,
  .portfolio-grid,
  .legal-hero {
    grid-template-columns: 1fr !important;
  }

  .feature-panel,
  .service-card-button,
  .package-card,
  .concept-card,
  .home-case-card,
  .about-panel,
  .process-panel,
  .portfolio-panel,
  .contact-panel,
  .legal-card,
  .legal-prose {
    padding: clamp(0.9rem, 4vw, 1.14rem) !important;
    border-radius: 16px !important;
  }

  .feature-panel h3,
  .service-card-button h3,
  .package-card h3,
  .concept-card h3,
  .home-case-card h3,
  .values-card h3,
  .vibe-card h3,
  .stack-card h3,
  .timeline-support h3,
  .signal-card h3,
  .faq-answer h3 {
    font-size: clamp(1.02rem, 5vw, 1.28rem) !important;
    letter-spacing: 0.018em !important;
  }

  .panel-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
  }

  .panel-icon svg {
    width: 23px !important;
    height: 23px !important;
  }

  .faq-container {
    grid-template-columns: 1fr !important;
  }

  .cc-banner {
    width: auto !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    bottom: calc(4.8rem + env(safe-area-inset-bottom, 0)) !important;
    transform: none !important;
  }

  .cc-banner-inner {
    grid-template-columns: 1fr !important;
  }

  .cc-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
  }

  .cc-btn {
    padding-inline: 0.5rem !important;
    font-size: 0.68rem !important;
  }
}

@media (max-width: 420px) {
  .cc-actions {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .feature-panel,
  .service-card-button,
  .package-card,
  .concept-card,
  .timeline-entry,
  .nav-btn,
  .btn {
    transition-duration: 0.01ms !important;
  }
}

/* Late conflict fixes for older page-specific rules that shipped with very strong selectors. */
.home-scene .home-foundations .section-heading h2 {
  font-size: clamp(2.05rem, 3.65vw, 3.35rem) !important;
  line-height: 1.04 !important;
  letter-spacing: 0.038em !important;
  max-width: 16ch !important;
}

.process-scene .process-hero h1,
.about-scene .about-hero h1,
.portfolio-scene .portfolio-hero h1,
.contact-scene .contact-hero h1,
.legal-scene .legal-hero h1 {
  font-size: clamp(2.25rem, 4.1vw, 4rem) !important;
  line-height: 1 !important;
}

.process-scene .process-step h3,
.process-scene .package-card h3,
.process-scene .faq-answer-panel h3,
.contact-scene .contact-card h3,
.contact-scene .availability-card h2 {
  font-size: clamp(1.2rem, 1.75vw, 1.72rem) !important;
  line-height: 1.14 !important;
  letter-spacing: 0.024em !important;
  text-wrap: balance;
}

.process-scene .faq-answer-panel h3,
.contact-scene .availability-card h2 {
  color: rgb(var(--wp-icon-cyan)) !important;
}

.feature-grid > :nth-child(1),
.feature-grid > :nth-child(1) .panel-icon,
.services-matrix > :nth-child(10n + 7),
.services-matrix > :nth-child(10n + 7) .panel-icon,
.contact-cards > :nth-child(1),
.contact-cards > :nth-child(1) .contact-card__icon {
  --icon-accent-rgb: var(--wp-icon-blue);
}

.feature-grid > :nth-child(2),
.feature-grid > :nth-child(2) .panel-icon,
.services-matrix > :nth-child(10n + 6),
.services-matrix > :nth-child(10n + 6) .panel-icon {
  --icon-accent-rgb: var(--wp-icon-gold);
}

.feature-grid > :nth-child(3),
.feature-grid > :nth-child(3) .panel-icon,
.services-matrix > :nth-child(10n + 3),
.services-matrix > :nth-child(10n + 3) .panel-icon {
  --icon-accent-rgb: var(--wp-icon-purple);
}

.feature-grid > :nth-child(4),
.feature-grid > :nth-child(4) .panel-icon,
.services-matrix > :nth-child(10n + 2),
.services-matrix > :nth-child(10n + 2) .panel-icon,
.contact-cards > :nth-child(2),
.contact-cards > :nth-child(2) .contact-card__icon {
  --icon-accent-rgb: var(--wp-icon-green);
}

.services-matrix > :nth-child(10n + 1),
.services-matrix > :nth-child(10n + 1) .panel-icon {
  --icon-accent-rgb: var(--wp-icon-cyan);
}

.services-matrix > :nth-child(10n + 4),
.services-matrix > :nth-child(10n + 4) .panel-icon {
  --icon-accent-rgb: var(--wp-icon-orange);
}

.services-matrix > :nth-child(10n + 5),
.services-matrix > :nth-child(10n + 5) .panel-icon {
  --icon-accent-rgb: var(--wp-icon-pink);
}

.services-matrix > :nth-child(10n + 8),
.services-matrix > :nth-child(10n + 8) .panel-icon,
.contact-cards > :nth-child(3),
.contact-cards > :nth-child(3) .contact-card__icon {
  --icon-accent-rgb: var(--wp-icon-teal);
}

.services-matrix > :nth-child(10n + 9),
.services-matrix > :nth-child(10n + 9) .panel-icon {
  --icon-accent-rgb: var(--wp-icon-lime);
}

.services-matrix > :nth-child(10n),
.services-matrix > :nth-child(10n) .panel-icon {
  --icon-accent-rgb: var(--wp-icon-red);
}

.contact-card__icon {
  color: rgb(var(--icon-accent-rgb, var(--wp-icon-cyan))) !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.24), transparent 58%),
    linear-gradient(145deg, rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.14), rgba(255, 255, 255, 0.035)) !important;
  border-color: rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.24) !important;
}

.home-scene .feature-panel .panel-icon,
.home-scene .service-card-button .panel-icon,
.about-scene .values-card .value-icon,
.about-scene .stack-card .value-icon,
.contact-scene .contact-card .contact-card__icon {
  color: rgb(var(--icon-accent-rgb, var(--wp-icon-cyan))) !important;
}

.home-scene .feature-panel .panel-icon svg,
.home-scene .service-card-button .panel-icon svg,
.about-scene .values-card .value-icon svg,
.about-scene .stack-card .value-icon svg,
.contact-scene .contact-card .contact-card__icon svg {
  color: inherit !important;
  stroke: currentColor !important;
}

@media (max-width: 760px) {
  .process-scene .process-hero h1 {
    font-size: clamp(2rem, 9vw, 2.85rem) !important;
  }

  .process-scene .process-step h3,
  .process-scene .package-card h3,
  .process-scene .faq-answer-panel h3,
  .contact-scene .contact-card h3,
  .contact-scene .availability-card h2 {
    font-size: clamp(1.08rem, 5.1vw, 1.32rem) !important;
    line-height: 1.16 !important;
  }

  .process-scene .process-icons--bar {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
    overflow: visible !important;
    width: min(100%, 100vw - 2rem) !important;
  }

  .process-scene .process-icons--bar a {
    min-width: 0 !important;
    width: auto !important;
  }
}

/* Final type-and-layout normalization pass. */
:root {
  --wp-section-gap: clamp(3.1rem, 5.4vw, 5.6rem);
}

.home-scene .section:not(.home-hero),
.about-scene .section,
.process-scene .section,
.portfolio-scene .section,
.contact-scene .section,
.legal-scene .section {
  padding-block: var(--wp-section-gap) !important;
}

.home-scene .section-heading h2,
.about-scene .section-heading h2,
.process-scene .section-heading h2,
.portfolio-scene .section-heading h2,
.contact-scene .section-heading h2,
.case-studies-section .section-heading h2,
.faq.section > h2 {
  max-width: 17ch !important;
  font-size: clamp(1.85rem, 2.75vw, 2.65rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.032em !important;
  text-wrap: balance;
}

.home-scene .home-foundations .section-heading h2 {
  max-width: 15ch !important;
  font-size: clamp(1.9rem, 2.8vw, 2.7rem) !important;
  line-height: 1.08 !important;
}

.process-scene .process-hero h1,
.about-scene .about-hero h1,
.portfolio-scene .portfolio-hero h1,
.contact-scene .contact-hero h1,
.legal-scene .legal-hero h1 {
  max-width: 14ch !important;
  font-size: clamp(2.15rem, 3.15vw, 3.25rem) !important;
  line-height: 1.04 !important;
  letter-spacing: 0.038em !important;
  text-wrap: balance;
}

.feature-panel,
.service-card-button,
.values-card,
.stack-card,
.package-card,
.concept-card,
.contact-card,
.availability-card,
.portfolio-card,
.case-study-card,
.timeline-entry,
.legal-card {
  padding: clamp(1rem, 1.45vw, 1.25rem) !important;
}

.feature-panel h3,
.service-card-button h3,
.values-card h3,
.stack-card h3,
.portfolio-card h3,
.case-study-card h3,
.concept-card h3,
.timeline-entry h3,
.signal-card h3,
.faq-answer h3 {
  font-size: clamp(1rem, 1.08vw, 1.28rem) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.02em !important;
  text-wrap: balance;
}

.process-scene .process-step h3,
.process-scene .package-card h3,
.process-scene .faq-answer-panel h3,
.contact-scene .contact-card h3,
.contact-scene .availability-card h2 {
  font-size: clamp(1.06rem, 1.34vw, 1.35rem) !important;
  line-height: 1.16 !important;
  letter-spacing: 0.02em !important;
  text-wrap: balance;
}

.legal-card h2,
.legal-prose h2 {
  font-size: clamp(1.24rem, 1.65vw, 1.65rem) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.02em !important;
}

.legal-prose h3 {
  font-size: clamp(1rem, 1.12vw, 1.14rem) !important;
  line-height: 1.25 !important;
}

.feature-panel p,
.service-card-button p,
.values-card p,
.stack-card p,
.package-card p,
.concept-card p,
.contact-card p,
.availability-card p,
.portfolio-card p,
.case-study-card p,
.timeline-entry p,
.legal-card p,
.legal-prose p,
.legal-prose li {
  font-size: clamp(0.92rem, 0.95vw, 1rem) !important;
  line-height: 1.64 !important;
}

.panel-icon,
.value-icon,
.contact-card__icon {
  width: clamp(46px, 4.1vw, 54px) !important;
  height: clamp(46px, 4.1vw, 54px) !important;
  min-width: clamp(46px, 4.1vw, 54px) !important;
  border-radius: 15px !important;
}

.panel-icon svg,
.value-icon svg,
.contact-card__icon svg {
  width: clamp(21px, 1.9vw, 25px) !important;
  height: clamp(21px, 1.9vw, 25px) !important;
}

.feature-grid,
.services-matrix,
.values-grid,
.stack-grid,
.portfolio-grid,
.package-grid,
.contact-cards,
.case-studies-grid {
  gap: clamp(1rem, 1.75vw, 1.45rem) !important;
}

@media (max-width: 980px) {
  :root {
    --wp-section-gap: clamp(2.7rem, 7vw, 4.6rem);
  }

  .home-scene .section-heading h2,
  .about-scene .section-heading h2,
  .process-scene .section-heading h2,
  .portfolio-scene .section-heading h2,
  .contact-scene .section-heading h2,
  .case-studies-section .section-heading h2,
  .faq.section > h2 {
    font-size: clamp(1.65rem, 4.2vw, 2.28rem) !important;
  }
}

@media (max-width: 760px) {
  :root {
    --wp-section-gap: clamp(2.25rem, 8.5vw, 3.45rem);
  }

  .home-scene .section-heading h2,
  .about-scene .section-heading h2,
  .process-scene .section-heading h2,
  .portfolio-scene .section-heading h2,
  .contact-scene .section-heading h2,
  .case-studies-section .section-heading h2,
  .faq.section > h2,
  .home-scene .home-foundations .section-heading h2 {
    max-width: 100% !important;
    font-size: clamp(1.42rem, 6.1vw, 1.96rem) !important;
    line-height: 1.1 !important;
    letter-spacing: 0.028em !important;
  }

  .process-scene .process-hero h1,
  .about-scene .about-hero h1,
  .portfolio-scene .portfolio-hero h1,
  .contact-scene .contact-hero h1,
  .legal-scene .legal-hero h1 {
    max-width: 100% !important;
    font-size: clamp(1.8rem, 7.6vw, 2.42rem) !important;
    line-height: 1.08 !important;
  }

  .feature-panel,
  .service-card-button,
  .values-card,
  .stack-card,
  .package-card,
  .concept-card,
  .contact-card,
  .availability-card,
  .portfolio-card,
  .case-study-card,
  .timeline-entry,
  .legal-card {
    padding: clamp(0.9rem, 4.4vw, 1.1rem) !important;
  }

  .feature-panel h3,
  .service-card-button h3,
  .values-card h3,
  .stack-card h3,
  .portfolio-card h3,
  .case-study-card h3,
  .concept-card h3,
  .timeline-entry h3,
  .signal-card h3,
  .faq-answer h3,
  .process-scene .process-step h3,
  .process-scene .package-card h3,
  .process-scene .faq-answer-panel h3,
  .contact-scene .contact-card h3,
  .contact-scene .availability-card h2 {
    font-size: clamp(0.98rem, 4.35vw, 1.16rem) !important;
    line-height: 1.2 !important;
    letter-spacing: 0.018em !important;
  }

  .feature-panel p,
  .service-card-button p,
  .values-card p,
  .stack-card p,
  .package-card p,
  .concept-card p,
  .contact-card p,
  .availability-card p,
  .portfolio-card p,
  .case-study-card p,
  .timeline-entry p,
  .legal-card p,
  .legal-prose p,
  .legal-prose li {
    font-size: clamp(0.88rem, 3.8vw, 0.96rem) !important;
    line-height: 1.58 !important;
  }

  .panel-icon,
  .value-icon,
  .contact-card__icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 13px !important;
  }

  .panel-icon svg,
  .value-icon svg,
  .contact-card__icon svg {
    width: 20px !important;
    height: 20px !important;
  }
}

.feature-panel h3,
.service-card-button h3,
.values-card h3,
.vibe-card h3,
.stack-card h3,
.portfolio-card h3,
.case-study-card h3,
.concept-card h3,
.timeline-entry h3,
.timeline-support h3,
.timeline-inline-panel h3,
.about-story-card h3,
.qualification-reference__header h3,
.signal-card h3,
.faq-answer h3,
.faq-answer-panel h3,
.home-dialog h3 {
  width: 100% !important;
  max-width: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: manual !important;
}

@media (min-width: 761px) {
  .feature-panel h3,
  .service-card-button h3,
  .values-card h3,
  .vibe-card h3,
  .stack-card h3,
  .portfolio-card h3,
  .case-study-card h3,
  .concept-card h3 {
    font-size: clamp(1.05rem, 1.12vw, 1.3rem) !important;
  }
}

@media (max-width: 760px) {
  .home-scene .faq-answer h3,
  .home-scene .faq-answer-panel h3,
  .about-scene .timeline-support h3,
  .about-scene .timeline-inline-panel h3,
  .about-scene .about-story-card h3,
  .about-scene .qualification-reference__header h3,
  .about-scene .values-card h3,
  .about-scene .vibe-card h3,
  .about-scene .stack-card h3,
  .about-scene .signal-card h3 {
    font-size: clamp(1rem, 4.1vw, 1.18rem) !important;
    line-height: 1.2 !important;
    letter-spacing: 0.018em !important;
  }
}

@media (max-width: 520px) {
  .cc-banner {
    max-height: min(25svh, 188px) !important;
    padding: 0.62rem !important;
  }

  .cc-banner-inner {
    gap: 0.52rem !important;
  }

  .cc-title {
    font-size: 0.68rem !important;
  }

  .cc-text {
    font-size: 0.66rem !important;
    line-height: 1.32 !important;
  }

  .cc-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
  }

  .cc-btn {
    min-height: 42px !important;
    width: 100% !important;
    padding: 0.5rem 0.36rem !important;
    white-space: normal !important;
    font-size: clamp(0.62rem, 2.65vw, 0.72rem) !important;
    line-height: 1.05 !important;
  }
}

/* About page contrast repair and richer icon accent system. */
.about-scene .about-story-card,
.about-scene .values-card,
.about-scene .stack-card,
.about-scene .signal-card {
  --icon-accent-rgb: var(--wp-icon-cyan);
  --icon-accent: rgb(var(--icon-accent-rgb));
}

.about-scene .about-story-grid > :nth-child(1),
.about-scene .about-method-grid > :nth-child(1) {
  --icon-accent-rgb: var(--wp-icon-blue);
}

.about-scene .about-story-grid > :nth-child(2),
.about-scene .about-method-grid > :nth-child(2) {
  --icon-accent-rgb: var(--wp-icon-teal);
}

.about-scene .about-story-grid > :nth-child(3),
.about-scene .refined-tool-board > :nth-child(2) {
  --icon-accent-rgb: var(--wp-icon-orange);
}

.about-scene .about-story-grid > :nth-child(4),
.about-scene .about-method-grid > :nth-child(4),
.about-scene .refined-tool-board > :nth-child(3) {
  --icon-accent-rgb: var(--wp-icon-purple);
}

.about-scene .about-story-grid > :nth-child(5),
.about-scene .about-method-grid > :nth-child(3) {
  --icon-accent-rgb: var(--wp-icon-gold);
}

.about-scene .about-story-grid > :nth-child(6),
.about-scene .refined-tool-board > :nth-child(1) {
  --icon-accent-rgb: var(--wp-icon-pink);
}

.about-scene .signal-stack > :nth-child(1) {
  --icon-accent-rgb: var(--wp-icon-blue);
}

.about-scene .signal-stack > :nth-child(2) {
  --icon-accent-rgb: var(--wp-icon-teal);
}

.about-scene .signal-stack > :nth-child(3) {
  --icon-accent-rgb: var(--wp-icon-gold);
}

.about-scene .about-story-card {
  border-color: rgba(var(--icon-accent-rgb), 0.22) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(var(--icon-accent-rgb), 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.about-scene .about-story-card::before,
.about-scene .values-card::before,
.about-scene .stack-card::before,
.about-scene .signal-card::before {
  background:
    radial-gradient(circle at 16% 14%, rgba(var(--icon-accent-rgb), 0.15), transparent 36%),
    linear-gradient(135deg, rgba(var(--icon-accent-rgb), 0.055), transparent 48%) !important;
}

.about-scene .about-story-card__icon,
.about-scene .value-icon,
.about-scene .timeline-support__icon,
.about-scene .vibe-card__icon,
.about-scene .stack-card__header .value-icon {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: rgb(var(--icon-accent-rgb, var(--wp-icon-cyan))) !important;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.16), transparent 34%),
    radial-gradient(circle at 35% 30%, rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.32), transparent 58%),
    linear-gradient(145deg, rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.16), rgba(255, 255, 255, 0.035)) !important;
  border: 1px solid rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.32) !important;
  box-shadow:
    0 0 0 1px rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.06),
    0 0 28px rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -12px 20px rgba(0, 0, 0, 0.18) !important;
}

.about-scene .about-story-card__icon::before,
.about-scene .value-icon::before,
.about-scene .timeline-support__icon::before,
.about-scene .vibe-card__icon::before,
.about-scene .stack-card__header .value-icon::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 0;
  border-radius: inherit;
  border: 1px solid rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.22);
  opacity: 0.72;
}

.about-scene .about-story-card__icon::after,
.about-scene .value-icon::after,
.about-scene .timeline-support__icon::after,
.about-scene .vibe-card__icon::after,
.about-scene .stack-card__header .value-icon::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 9px;
  z-index: 1;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.9));
  transform: rotate(-28deg);
  opacity: 0.68;
}

.about-scene .about-story-card__icon svg,
.about-scene .value-icon svg,
.about-scene .timeline-support__icon svg,
.about-scene .vibe-card__icon svg,
.about-scene .stack-card__header .value-icon svg {
  position: relative;
  z-index: 2;
  color: inherit !important;
  stroke: currentColor !important;
  filter: drop-shadow(0 0 8px rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.28));
}

.about-scene .about-story-card__meta,
.about-scene .signal-card__kicker,
.about-scene .timeline-support__kicker {
  color: rgb(var(--icon-accent-rgb, var(--wp-icon-cyan))) !important;
  text-shadow: 0 0 14px rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.18);
}

.about-scene .timeline-entry[data-icon="systems"],
.about-scene .timeline-support[data-active-icon="systems"],
.about-scene .timeline-inline-panel[data-active-icon="systems"] {
  --timeline-accent-rgb: var(--wp-icon-blue);
  --icon-accent-rgb: var(--wp-icon-blue);
}

.about-scene .timeline-entry[data-icon="workflow"],
.about-scene .timeline-support[data-active-icon="workflow"],
.about-scene .timeline-inline-panel[data-active-icon="workflow"] {
  --timeline-accent-rgb: var(--wp-icon-gold);
  --icon-accent-rgb: var(--wp-icon-gold);
}

.about-scene .timeline-entry[data-icon="communication"],
.about-scene .timeline-support[data-active-icon="communication"],
.about-scene .timeline-inline-panel[data-active-icon="communication"] {
  --timeline-accent-rgb: var(--wp-icon-teal);
  --icon-accent-rgb: var(--wp-icon-teal);
}

.about-scene .timeline-entry[data-icon="leadership"],
.about-scene .timeline-support[data-active-icon="leadership"],
.about-scene .timeline-inline-panel[data-active-icon="leadership"] {
  --timeline-accent-rgb: var(--wp-icon-purple);
  --icon-accent-rgb: var(--wp-icon-purple);
}

.about-scene .timeline-entry[data-icon="web"],
.about-scene .timeline-support[data-active-icon="web"],
.about-scene .timeline-inline-panel[data-active-icon="web"] {
  --timeline-accent-rgb: var(--wp-icon-orange);
  --icon-accent-rgb: var(--wp-icon-orange);
}

.about-scene .timeline-entry[data-icon="growth"],
.about-scene .timeline-support[data-active-icon="growth"],
.about-scene .timeline-inline-panel[data-active-icon="growth"] {
  --timeline-accent-rgb: var(--wp-icon-green);
  --icon-accent-rgb: var(--wp-icon-green);
}

.about-scene .timeline-entry[data-icon="launch"],
.about-scene .timeline-support[data-active-icon="launch"],
.about-scene .timeline-inline-panel[data-active-icon="launch"] {
  --timeline-accent-rgb: var(--wp-icon-pink);
  --icon-accent-rgb: var(--wp-icon-pink);
}

.about-scene .timeline-entry {
  --timeline-accent-rgb: var(--icon-accent-rgb, var(--wp-icon-cyan));
  color: rgba(247, 242, 232, 0.82) !important;
}

.about-scene .timeline-entry .timeline-year {
  color: rgba(247, 242, 232, 0.82) !important;
}

.about-scene .timeline-entry .timeline-detail {
  color: rgba(247, 242, 232, 0.72) !important;
}

.about-scene .timeline-entry.active {
  color: var(--wp-text) !important;
  border-color: rgba(var(--timeline-accent-rgb), 0.38) !important;
  border-left-color: rgb(var(--timeline-accent-rgb)) !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(var(--timeline-accent-rgb), 0.18), transparent 34%),
    linear-gradient(145deg, rgba(var(--timeline-accent-rgb), 0.12), rgba(255, 255, 255, 0.04) 42%, rgba(8, 14, 21, 0.54)),
    linear-gradient(180deg, rgba(46, 55, 69, 0.92), rgba(22, 30, 42, 0.96)) !important;
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.34),
    0 0 32px rgba(var(--timeline-accent-rgb), 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.11) !important;
}

.about-scene .timeline-entry.active .timeline-year {
  color: rgb(var(--timeline-accent-rgb)) !important;
}

.about-scene .timeline-entry.active .timeline-detail {
  color: rgba(247, 242, 232, 0.88) !important;
}

.about-scene .timeline-support[data-active-icon],
.about-scene .timeline-inline-panel[data-active-icon] {
  border-color: rgba(var(--timeline-accent-rgb, var(--wp-icon-cyan)), 0.28) !important;
}

.about-scene .timeline-support,
.about-scene .timeline-inline-panel {
  grid-template-rows: auto auto auto auto !important;
  align-content: start !important;
}

.about-scene .timeline-support {
  min-height: 0 !important;
  height: auto !important;
}

.about-scene .timeline-support__copy {
  margin-top: 0.2rem !important;
}

.about-scene .timeline-support__keywords {
  align-items: flex-start !important;
  align-content: flex-start !important;
  margin-top: 0.15rem !important;
}

.about-scene .timeline-support__keywords span {
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 38px !important;
  align-self: flex-start !important;
}

.about-scene .timeline-support__grid {
  margin-top: 0.65rem !important;
}

.about-scene .timeline-support[data-active-icon] .timeline-support__keywords span,
.about-scene .timeline-inline-panel[data-active-icon] .timeline-support__keywords span {
  border-color: rgba(var(--timeline-accent-rgb, var(--wp-icon-cyan)), 0.24) !important;
  background: rgba(var(--timeline-accent-rgb, var(--wp-icon-cyan)), 0.08) !important;
}

.about-scene .timeline-support[data-active-icon] .timeline-support__box h4,
.about-scene .timeline-inline-panel[data-active-icon] .timeline-support__box h4 {
  color: rgb(var(--timeline-accent-rgb, var(--wp-icon-cyan))) !important;
}

/* === Mattia portfolio refinement pass: copy, hero atmospheres, process panel, cards, buttons === */
:root {
  --wp-focus-ring: rgba(126, 232, 255, 0.95);
  --wp-glass-button: linear-gradient(135deg, rgba(255,255,255,0.13), rgba(255,255,255,0.035) 46%, rgba(255,255,255,0.075));
}

/* Hero brand: keep the Mattia Corona byline, but use the short personal mark as the main title. */
.home-hero .brand-label,
.home-hero .hero-text--widget .brand-label {
  font-size: clamp(3.15rem, 7vw, 6.25rem) !important;
  letter-spacing: 0.18em !important;
  text-indent: 0.18em !important;
  color: var(--wp-text) !important;
}

.home-hero .hero-byline--brand {
  margin-top: 0.2rem !important;
  max-width: min(92vw, 760px) !important;
  color: rgba(247, 242, 232, 0.9) !important;
  text-shadow: 0 0 16px rgba(var(--hero-mode-rgb, 68, 217, 255), 0.28), 0 10px 28px rgba(0,0,0,0.42) !important;
}

.home-hero .hero-radial-widget__label {
  letter-spacing: 0.12em !important;
}

/* Stronger colour identity per orbital mood, kept dark enough for readability. */
.home-hero[data-hero-theme="yellow"] { --hero-mode-color: #ffd34a; --hero-mode-rgb: 255, 211, 74; --hero-bg-deep: 24, 18, 7; }
.home-hero[data-hero-theme="red"] { --hero-mode-color: #ff4e5e; --hero-mode-rgb: 255, 78, 94; --hero-bg-deep: 28, 6, 9; }
.home-hero[data-hero-theme="blue"] { --hero-mode-color: #2f85ff; --hero-mode-rgb: 47, 133, 255; --hero-bg-deep: 4, 12, 28; }
.home-hero[data-hero-theme="orange"] { --hero-mode-color: #ff8b32; --hero-mode-rgb: 255, 139, 50; --hero-bg-deep: 30, 12, 4; }
.home-hero[data-hero-theme="purple"] { --hero-mode-color: #9657ff; --hero-mode-rgb: 150, 87, 255; --hero-bg-deep: 16, 8, 31; }
.home-hero[data-hero-theme="green"] { --hero-mode-color: #57df78; --hero-mode-rgb: 87, 223, 120; --hero-bg-deep: 5, 22, 13; }
.home-hero[data-hero-theme="teal"] { --hero-mode-color: #2ed0bb; --hero-mode-rgb: 46, 208, 187; --hero-bg-deep: 4, 22, 22; }
.home-hero[data-hero-theme="cyan"] { --hero-mode-color: #44d9ff; --hero-mode-rgb: 68, 217, 255; --hero-bg-deep: 4, 18, 30; }
.home-hero[data-hero-theme="indigo"] { --hero-mode-color: #6b73ff; --hero-mode-rgb: 107, 115, 255; --hero-bg-deep: 9, 11, 32; }
.home-hero[data-hero-theme="magenta"] { --hero-mode-color: #ff3ca5; --hero-mode-rgb: 255, 60, 165; --hero-bg-deep: 28, 5, 22; }
.home-hero[data-hero-theme="lime"] { --hero-mode-color: #c8ef44; --hero-mode-rgb: 200, 239, 68; --hero-bg-deep: 15, 24, 5; }
.home-hero[data-hero-theme="gold"] { --hero-mode-color: #ffb62e; --hero-mode-rgb: 255, 182, 46; --hero-bg-deep: 28, 15, 4; }

.home-hero .hero-ambient {
  background:
    radial-gradient(820px 520px at 50% 45%, rgba(var(--hero-mode-rgb, 68, 217, 255), 0.18), transparent 46%),
    radial-gradient(760px 420px at 18% 20%, rgba(var(--hero-mode-rgb, 68, 217, 255), 0.11), transparent 58%),
    radial-gradient(920px 560px at 84% 82%, rgba(var(--hero-mode-rgb, 68, 217, 255), 0.08), transparent 64%),
    linear-gradient(180deg, rgba(var(--hero-bg-deep, 4, 18, 30), 0.98), #050a10 78%) !important;
}

.home-hero .ambient-layer.is-ambient-live {
  mix-blend-mode: screen !important;
  filter: saturate(1.2) contrast(1.08) brightness(1.03) !important;
}

.home-hero .ambient-layer::before,
.home-hero .ambient-layer::after {
  opacity: 0.92;
}

.home-hero .ambient-layer--red {
  background:
    radial-gradient(ellipse at 52% 92%, rgba(255, 76, 52, 0.42), transparent 46%),
    radial-gradient(circle at 18% 72%, rgba(255, 133, 82, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(35, 6, 9, 0.96), rgba(7, 9, 13, 0.1)) !important;
}
.home-hero .ambient-layer--red::before {
  background:
    linear-gradient(105deg, transparent 0 22%, rgba(255, 92, 64, 0.28) 38%, transparent 52% 100%),
    radial-gradient(ellipse at 50% 98%, rgba(255, 116, 64, 0.36), transparent 34%) !important;
  animation: mattiaHeroHeat 8.5s ease-in-out infinite !important;
}
.home-hero .ambient-layer--red::after {
  background:
    radial-gradient(circle, rgba(255, 205, 138, 0.55) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255, 75, 94, 0.36) 0 1px, transparent 2px) !important;
  background-size: 78px 112px, 132px 172px !important;
  animation: mattiaHeroEmbers 12s linear infinite !important;
}

.home-hero .ambient-layer--cyan,
.home-hero .ambient-layer--blue {
  background:
    radial-gradient(circle at 50% 35%, rgba(82, 222, 255, 0.22), transparent 40%),
    radial-gradient(ellipse at 50% 90%, rgba(58, 132, 255, 0.22), transparent 48%),
    linear-gradient(180deg, rgba(4, 24, 38, 0.94), rgba(5, 9, 14, 0.15)) !important;
}
.home-hero .ambient-layer--cyan::before,
.home-hero .ambient-layer--blue::before {
  background:
    linear-gradient(118deg, transparent 0 18%, rgba(101, 236, 255, 0.28) 32%, transparent 47% 100%),
    linear-gradient(68deg, transparent 0 42%, rgba(225, 255, 255, 0.12) 54%, transparent 68% 100%) !important;
  animation: mattiaHeroAquaBeam 9.4s cubic-bezier(.45,0,.2,1) infinite !important;
}
.home-hero .ambient-layer--cyan::after,
.home-hero .ambient-layer--blue::after {
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 34px, rgba(120, 237, 255, 0.18) 36px 37px, transparent 39px 72px),
    radial-gradient(circle, rgba(180, 248, 255, 0.28) 0 1px, transparent 2px) !important;
  background-size: 100% 100%, 78px 92px !important;
  animation: mattiaHeroRipples 11s ease-in-out infinite !important;
}

.home-hero .ambient-layer--indigo {
  background:
    radial-gradient(circle at 50% 54%, rgba(107, 115, 255, 0.24), transparent 38%),
    linear-gradient(180deg, rgba(10, 12, 38, 0.96), rgba(4, 7, 13, 0.18)) !important;
}
.home-hero .ambient-layer--indigo::before {
  background:
    linear-gradient(rgba(142, 153, 255, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142, 153, 255, 0.13) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(160, 168, 255, 0.14), transparent 42%) !important;
  background-size: 52px 52px, 52px 52px, 100% 100% !important;
  animation: mattiaHeroGrid 8.5s ease-in-out infinite !important;
}
.home-hero .ambient-layer--indigo::after {
  background:
    linear-gradient(90deg, transparent, rgba(190, 198, 255, 0.32), transparent),
    radial-gradient(circle, rgba(170, 180, 255, 0.26) 0 1px, transparent 2px) !important;
  background-size: 100% 100%, 90px 90px !important;
  animation: mattiaHeroScan 7.8s ease-in-out infinite !important;
}

.home-hero .ambient-layer--teal {
  background:
    radial-gradient(circle at 50% 42%, rgba(50, 222, 198, 0.22), transparent 38%),
    linear-gradient(180deg, rgba(4, 28, 25, 0.96), rgba(5, 9, 14, 0.16)) !important;
}
.home-hero .ambient-layer--teal::before {
  background:
    repeating-radial-gradient(circle at 50% 49%, transparent 0 38px, rgba(88, 245, 225, 0.22) 40px 41px, transparent 44px 84px),
    radial-gradient(circle at 32% 68%, rgba(110, 255, 235, 0.15), transparent 26%) !important;
  animation: mattiaHeroClarity 8.8s ease-in-out infinite !important;
}
.home-hero .ambient-layer--teal::after {
  background:
    repeating-linear-gradient(0deg, transparent 0 50px, rgba(128, 255, 239, 0.14) 52px 53px, transparent 55px 110px),
    linear-gradient(90deg, transparent, rgba(156, 255, 244, 0.12), transparent) !important;
  animation: mattiaHeroGlassPass 9.4s ease-in-out infinite !important;
}

.home-hero .ambient-layer--gold,
.home-hero .ambient-layer--orange,
.home-hero .ambient-layer--yellow {
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 190, 68, 0.28), transparent 38%),
    radial-gradient(ellipse at 22% 80%, rgba(255, 135, 48, 0.19), transparent 32%),
    linear-gradient(180deg, rgba(32, 16, 5, 0.96), rgba(5, 9, 14, 0.15)) !important;
}
.home-hero .ambient-layer--gold::before,
.home-hero .ambient-layer--orange::before,
.home-hero .ambient-layer--yellow::before {
  background:
    conic-gradient(from 24deg at 50% 50%, transparent 0 12%, rgba(255, 198, 80, 0.24) 16% 19%, transparent 24% 54%, rgba(255, 235, 170, 0.14) 58% 62%, transparent 68% 100%),
    radial-gradient(circle at 50% 50%, rgba(255, 196, 80, 0.22), transparent 33%) !important;
  animation: mattiaHeroLaunchGlow 8.7s ease-in-out infinite !important;
}
.home-hero .ambient-layer--gold::after,
.home-hero .ambient-layer--orange::after,
.home-hero .ambient-layer--yellow::after {
  background:
    linear-gradient(110deg, transparent 0 34%, rgba(255, 232, 160, 0.34) 47%, transparent 60% 100%),
    radial-gradient(circle, rgba(255, 213, 105, 0.24) 0 1px, transparent 2px) !important;
  background-size: 100% 100%, 82px 96px !important;
  animation: mattiaHeroGoldSweep 9.8s ease-in-out infinite !important;
}

.home-hero .ambient-layer--purple,
.home-hero .ambient-layer--magenta {
  background:
    radial-gradient(circle at 22% 68%, rgba(164, 92, 255, 0.24), transparent 34%),
    radial-gradient(circle at 80% 36%, rgba(255, 76, 180, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(20, 8, 34, 0.96), rgba(5, 9, 14, 0.16)) !important;
}
.home-hero .ambient-layer--purple::before,
.home-hero .ambient-layer--magenta::before {
  background:
    conic-gradient(from 15deg at 50% 50%, transparent 0 10%, rgba(181, 94, 255, 0.22) 12% 16%, transparent 20% 44%, rgba(255, 91, 187, 0.16) 47% 52%, transparent 56% 100%),
    radial-gradient(circle at 40% 74%, rgba(255, 66, 176, 0.18), transparent 24%) !important;
  animation: mattiaHeroCreative 9.5s ease-in-out infinite !important;
}
.home-hero .ambient-layer--purple::after,
.home-hero .ambient-layer--magenta::after {
  background-image:
    radial-gradient(circle, rgba(255, 92, 190, 0.32) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(199, 168, 255, 0.18) 0 1px, transparent 2px) !important;
  background-size: 72px 86px, 130px 154px !important;
  animation: mattiaHeroStarDrift 12.5s linear infinite !important;
}

.home-hero .ambient-layer--green,
.home-hero .ambient-layer--lime {
  background:
    radial-gradient(circle at 50% 56%, rgba(110, 232, 126, 0.2), transparent 38%),
    radial-gradient(ellipse at 50% 100%, rgba(198, 239, 68, 0.16), transparent 44%),
    linear-gradient(180deg, rgba(7, 25, 12, 0.96), rgba(5, 9, 14, 0.16)) !important;
}
.home-hero .ambient-layer--green::before,
.home-hero .ambient-layer--lime::before {
  background:
    repeating-radial-gradient(circle at 50% 54%, transparent 0 36px, rgba(136, 255, 158, 0.18) 38px 40px, transparent 44px 84px),
    radial-gradient(circle at 72% 28%, rgba(214, 250, 92, 0.12), transparent 24%) !important;
  animation: mattiaHeroGrowthPulse 8.2s ease-in-out infinite !important;
}

.hero-mode-readout {
  border-color: rgba(var(--hero-mode-rgb, 68, 217, 255), 0.24) !important;
  background:
    radial-gradient(circle at 14% 16%, rgba(var(--hero-mode-rgb, 68, 217, 255), 0.16), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.026) 48%, rgba(255,255,255,0.055)) !important;
  box-shadow: 0 22px 52px rgba(0,0,0,0.32), 0 0 34px rgba(var(--hero-mode-rgb, 68, 217, 255), 0.09), inset 0 1px 0 rgba(255,255,255,0.09) !important;
}
.hero-mode-readout strong { color: rgb(var(--hero-mode-rgb, 68, 217, 255)) !important; }

@keyframes mattiaHeroHeat { 0%,100% { transform: translate3d(-1%,1%,0) scale(1); opacity: .62; } 50% { transform: translate3d(1.4%,-1%,0) scale(1.08); opacity: .94; } }
@keyframes mattiaHeroEmbers { from { background-position: 0 120px, 0 180px; } to { background-position: 34px -160px, -28px -140px; } }
@keyframes mattiaHeroAquaBeam { 0%,100% { background-position: -120px 0, 80px 0; transform: translate3d(0,0,0); } 50% { background-position: 160px -40px, -140px 44px; transform: translate3d(-1%,.8%,0); } }
@keyframes mattiaHeroRipples { 0%,100% { transform: scale(.98); opacity: .48; } 50% { transform: scale(1.06); opacity: .88; } }
@keyframes mattiaHeroGrid { 0%,100% { background-position: 0 0, 0 0, 0 0; } 50% { background-position: 20px 20px, 20px 20px, 0 0; } }
@keyframes mattiaHeroScan { 0%,100% { background-position: 0 -120%, 0 0; opacity: .38; } 50% { background-position: 0 120%, 40px 40px; opacity: .9; } }
@keyframes mattiaHeroClarity { 0%,100% { transform: scale(.98); opacity: .5; } 55% { transform: scale(1.07); opacity: .92; } }
@keyframes mattiaHeroGlassPass { 0%,100% { background-position: 0 0, -100% 0; } 50% { background-position: 0 104px, 100% 0; } }
@keyframes mattiaHeroLaunchGlow { 0%,100% { transform: scale(.98) rotate(0deg); opacity: .54; } 50% { transform: scale(1.08) rotate(2deg); opacity: .95; } }
@keyframes mattiaHeroGoldSweep { 0%,16% { transform: translateX(-72%); opacity: .12; } 50% { opacity: .86; } 82%,100% { transform: translateX(72%); opacity: .12; } }
@keyframes mattiaHeroCreative { 0%,100% { transform: scale(.98) rotate(0deg); opacity: .5; } 50% { transform: scale(1.08) rotate(2deg); opacity: .9; } }
@keyframes mattiaHeroStarDrift { from { background-position: 0 0, 0 0; } to { background-position: -56px -136px, 48px -172px; } }
@keyframes mattiaHeroGrowthPulse { 0%,100% { transform: scale(.97); opacity: .5; } 60% { transform: scale(1.08); opacity: .86; } }

/* Remove the disconnected 2024/2025/2026 strip if older cached markup remains. */
.about-profile-strip { display: none !important; }
.about-side { align-content: start !important; }
.about-side .signal-stack { margin-top: clamp(1rem, 2vw, 1.4rem) !important; }

/* Process page: slightly larger and fully scrollable right detail panel. */
.process-scene > .section,
.process-scene > .site-footer {
  width: min(1440px, 100%) !important;
}

.process-scene .step-tunnel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px) !important;
  gap: clamp(1.25rem, 2.2vw, 2rem) !important;
  align-items: start !important;
  overflow: visible !important;
}

.process-scene .process-steps,
.process-scene .process-step,
.process-scene .process-columns,
.process-scene .deliver,
.process-scene .need {
  min-width: 0 !important;
}

.process-scene .deliverables-panel {
  width: 100% !important;
  max-width: none !important;
  position: sticky !important;
  top: 92px !important;
  max-height: calc(100svh - 116px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  padding: clamp(1.25rem, 1.8vw, 1.6rem) clamp(1.2rem, 1.75vw, 1.55rem) max(2.75rem, env(safe-area-inset-bottom)) !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 220, 255, 0.72) rgba(255,255,255,0.08);
}

.process-scene .deliverables-panel::-webkit-scrollbar { width: 10px; }
.process-scene .deliverables-panel::-webkit-scrollbar-track { background: rgba(255,255,255,0.07); border-radius: 999px; }
.process-scene .deliverables-panel::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(70,220,255,0.86), rgba(113,240,215,0.72)); border-radius: 999px; }

.process-scene .process-detail-shell {
  min-height: auto !important;
  padding-bottom: 0.5rem !important;
}

.process-scene .process-detail {
  gap: clamp(1rem, 1.7vw, 1.35rem) !important;
}

.process-scene .process-detail__title {
  font-size: clamp(1.9rem, 2.75vw, 2.75rem) !important;
  max-width: 11ch !important;
}

.process-scene .process-flow__item {
  grid-template-columns: 64px 1fr !important;
  gap: 1rem !important;
  padding: 1rem !important;
}

.process-scene .process-flow__icon {
  width: 64px !important;
  height: 64px !important;
  color: rgb(var(--detail-accent-rgb, var(--wp-icon-cyan))) !important;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,0.15), transparent 34%),
    radial-gradient(circle at 42% 34%, rgba(var(--detail-accent-rgb, var(--wp-icon-cyan)), 0.30), transparent 62%),
    linear-gradient(145deg, rgba(var(--detail-accent-rgb, var(--wp-icon-cyan)), 0.12), rgba(255,255,255,0.04)) !important;
  border-color: rgba(var(--detail-accent-rgb, var(--wp-icon-cyan)), 0.34) !important;
  box-shadow: 0 0 28px rgba(var(--detail-accent-rgb, var(--wp-icon-cyan)), 0.14), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

.process-scene .deliverables-panel[data-active-step="step1"] { --detail-accent-rgb: var(--wp-icon-blue); }
.process-scene .deliverables-panel[data-active-step="step2"] { --detail-accent-rgb: var(--wp-icon-teal); }
.process-scene .deliverables-panel[data-active-step="step3"] { --detail-accent-rgb: var(--wp-icon-green); }
.process-scene .deliverables-panel[data-active-step="step4"] { --detail-accent-rgb: var(--wp-icon-purple); }
.process-scene .deliverables-panel[data-active-step="step5"] { --detail-accent-rgb: var(--wp-icon-cyan); }
.process-scene .deliverables-panel[data-active-step="step6"] { --detail-accent-rgb: var(--wp-icon-gold); }
.process-scene .deliverables-panel[data-active-step="step7"] { --detail-accent-rgb: var(--wp-icon-orange); }
.process-scene .deliverables-panel[data-active-step] {
  border-color: rgba(var(--detail-accent-rgb, var(--wp-icon-cyan)), 0.28) !important;
  box-shadow: 0 22px 54px rgba(0,0,0,0.34), 0 0 34px rgba(var(--detail-accent-rgb, var(--wp-icon-cyan)), 0.09), inset 0 1px 0 rgba(255,255,255,0.09) !important;
}
.process-scene .deliverables-panel[data-active-step] .process-detail__title,
.process-scene .deliverables-panel[data-active-step] .process-flow__arrow {
  color: rgb(var(--detail-accent-rgb, var(--wp-icon-cyan))) !important;
}

/* Card accent system: icon colour also informs card edge, glow and CTA treatment. */
.home-scene .feature-panel,
.home-scene .service-card-button,
.about-scene .about-story-card,
.about-scene .values-card,
.about-scene .vibe-card,
.about-scene .stack-card,
.process-scene .package-card,
.portfolio-scene .concept-card {
  position: relative !important;
  overflow: hidden !important;
  border-color: rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.22) !important;
}

.home-scene .feature-panel::before,
.home-scene .service-card-button::before,
.about-scene .about-story-card::before,
.about-scene .values-card::before,
.about-scene .vibe-card::before,
.about-scene .stack-card::before,
.process-scene .package-card::before,
.portfolio-scene .concept-card::before {
  background:
    radial-gradient(circle at 14% 12%, rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.18), transparent 36%),
    linear-gradient(135deg, rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.06), transparent 45%) !important;
}

.home-scene .feature-panel::after,
.home-scene .service-card-button::after,
.process-scene .package-card::after,
.portfolio-scene .concept-card::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.55), transparent);
  opacity: 0.7;
  pointer-events: none;
}

.feature-panel,
.service-card-button {
  display: flex !important;
  flex-direction: column !important;
}

.feature-panel .panel-link,
.service-card-button .panel-link {
  width: fit-content !important;
  min-height: 42px !important;
  margin-top: auto !important;
  padding: 0.68rem 1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.34) !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.18), transparent 48%),
    var(--wp-glass-button) !important;
  color: rgb(var(--icon-accent-rgb, var(--wp-icon-cyan))) !important;
  font-weight: 900 !important;
  letter-spacing: 0.03em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: 0 12px 24px rgba(0,0,0,0.22), 0 0 22px rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.08), inset 0 1px 0 rgba(255,255,255,0.09) !important;
  transition: transform 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
}

.feature-panel .panel-link::after,
.service-card-button .panel-link::after {
  content: "→" !important;
  display: inline-block !important;
  margin-left: 0.15rem !important;
  transform: translateX(0) !important;
  transition: transform 180ms ease !important;
}

.feature-panel:hover .panel-link,
.feature-panel:focus-visible .panel-link,
.service-card-button:hover .panel-link,
.service-card-button:focus-visible .panel-link {
  transform: translateY(-1px) !important;
  border-color: rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.58) !important;
  box-shadow: 0 16px 30px rgba(0,0,0,0.28), 0 0 30px rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.16), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

.feature-panel:hover .panel-link::after,
.feature-panel:focus-visible .panel-link::after,
.service-card-button:hover .panel-link::after,
.service-card-button:focus-visible .panel-link::after {
  transform: translateX(4px) !important;
}

.feature-panel:focus-visible,
.service-card-button:focus-visible,
.carousel-btn:focus-visible,
.work-vibes-dots button:focus-visible,
.process-icons a:focus-visible,
.nav-icons .nav-btn:focus-visible,
.bottom-nav .nav-btn:focus-visible {
  outline: 2px solid var(--wp-focus-ring) !important;
  outline-offset: 4px !important;
}

.home-scene .service-card-button .tag {
  border: 1px solid rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.28) !important;
  background: rgba(var(--icon-accent-rgb, var(--wp-icon-cyan)), 0.065) !important;
  color: rgba(247,242,232,0.92) !important;
}

/* Sidebar/bottom navigation polish. */
.sidebar .nav-icons .nav-btn,
.bottom-nav .nav-btn {
  display: inline-grid !important;
  place-items: center !important;
  border-color: rgba(var(--nav-accent-rgb, var(--wp-icon-cyan)), 0.18) !important;
}
.sidebar .nav-icons .nav-btn svg,
.bottom-nav .nav-btn svg { margin: 0 !important; }
.sidebar .nav-icons .nav-btn.active,
.bottom-nav .nav-btn.active {
  background: linear-gradient(135deg, rgba(var(--nav-accent-rgb, var(--wp-icon-cyan)), 0.94), rgba(255,255,255,0.68)) !important;
  color: #061016 !important;
  box-shadow: 0 0 26px rgba(var(--nav-accent-rgb, var(--wp-icon-cyan)), 0.24), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}

@media (max-width: 1180px) {
  .process-scene .step-tunnel {
    grid-template-columns: minmax(0, 1fr) minmax(315px, 380px) !important;
  }
}

@media (max-width: 980px) {
  .process-scene .step-tunnel {
    grid-template-columns: 1fr !important;
  }
  .process-scene .deliverables-panel {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 768px) {
  .home-hero .brand-label,
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(2.3rem, 14vw, 4.2rem) !important;
    letter-spacing: 0.10em !important;
    text-indent: 0.10em !important;
  }
  .home-hero .hero-byline--brand {
    font-size: clamp(0.75rem, 3.8vw, 1rem) !important;
    letter-spacing: 0.08em !important;
  }
  .feature-panel .panel-link,
  .service-card-button .panel-link {
    min-height: 44px !important;
    width: 100% !important;
  }
  .work-vibes-carousel {
    scroll-margin-top: calc(var(--nav-height-mobile, 64px) + 1rem) !important;
  }
}

@media (max-width: 520px) {
  .home-hero .hero-text--widget .brand-label {
    font-size: clamp(2rem, 16vw, 3.35rem) !important;
    letter-spacing: 0.08em !important;
    text-indent: 0.08em !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero .ambient-layer::before,
  .home-hero .ambient-layer::after,
  .feature-panel .panel-link,
  .service-card-button .panel-link,
  .feature-panel .panel-link::after,
  .service-card-button .panel-link::after {
    animation: none !important;
    transition: none !important;
  }
}


/* Final correction: keep the visible hero byline as “MATTIA CORONA - WEB DESIGNER”, remove the old project label as the page/site title, and compact the process step bar on mobile. */
@media (max-width: 760px) {
  .process-scene .process-icons--bar {
    width: min(100%, calc(100vw - 1rem)) !important;
    max-width: min(100%, calc(100vw - 1rem)) !important;
    margin: 0 auto 0.85rem !important;
    padding: 0.48rem 0.44rem 0.56rem !important;
    border-radius: 18px !important;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 0.28rem !important;
    align-items: start !important;
    overflow: visible !important;
    top: 0.35rem !important;
  }

  .process-scene .process-icons--bar a {
    min-width: 0 !important;
    width: 100% !important;
    flex: none !important;
    padding: 0.18rem 0.04rem 0.08rem !important;
    gap: 0.22rem !important;
    transform: none !important;
  }

  .process-scene .process-icons .icon-circle {
    width: clamp(31px, 8.8vw, 39px) !important;
    height: clamp(31px, 8.8vw, 39px) !important;
    border-width: 1px !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 5px 12px rgba(0,0,0,0.22) !important;
  }

  .process-scene .process-icons .icon-circle span {
    font-size: clamp(0.82rem, 3.6vw, 1rem) !important;
    line-height: 1 !important;
  }

  .process-scene .process-icons .icon-label {
    font-size: clamp(0.42rem, 1.65vw, 0.55rem) !important;
    letter-spacing: 0.065em !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  .process-scene .process-step {
    scroll-margin-top: 6.9rem !important;
  }

  .process-scene .step-tunnel {
    margin-top: 0.55rem !important;
  }

  .process-scene .process-step h3 {
    font-size: clamp(1.22rem, 6.2vw, 1.62rem) !important;
    line-height: 1.12 !important;
  }
}

@media (max-width: 420px) {
  .process-scene .process-icons--bar {
    width: calc(100vw - 0.72rem) !important;
    max-width: calc(100vw - 0.72rem) !important;
    padding-inline: 0.32rem !important;
    gap: 0.2rem !important;
  }

  .process-scene .process-icons .icon-circle {
    width: clamp(29px, 8.2vw, 34px) !important;
    height: clamp(29px, 8.2vw, 34px) !important;
  }

  .process-scene .process-icons .icon-label {
    font-size: clamp(0.39rem, 1.55vw, 0.5rem) !important;
  }
}