/**
 * Public Webflow theme overlay.
 * Brand hexes mirror src/styles/tokens.css primitives (SSOT for Next.js).
 * Keep --navy / --night / --mint / --paper / --ink in sync when brand paint changes.
 *
 * Dark-first; light remaps via prefers-color-scheme only.
 */

:root {
  --navy: #000055;
  --navy-deep: #000033;
  --night: #0a0a0a;
  --mint: #88d5bf;
  --indigo: #5d6bf8;
  --magenta: #e27fcb;
  --paper: #f3eee4;
  --ink: #0b0b18;

  --background: var(--night);
  --primary: var(--mint);
  --secondary: var(--indigo);
  --third: var(--magenta);

  /* Webflow uses --black for surfaces; align with dark canvas (not legacy navy). */
  --black: var(--night);

  color-scheme: dark;
}

html {
  color-scheme: dark;
}

body,
.body,
.body-2,
.cm-header,
.cm-welcome,
.cm-capabilities,
.cm-logosoup,
.about,
.about-2,
._003,
.cm-tabs,
.w-tab-content,
.tab-pane-tab-1,
.main-slide,
.ach-slider,
.slide-nav-2,
.cm-craftsmanship {
  background-color: var(--background) !important;
  background: var(--background) !important;
  background-image: none !important;
}

.text-78 {
  color: var(--grey);
}

body {
  overflow: auto;
}

.blue,
.cm-capabilities.services,
.cm-capabilities.services.profile,
.cm-capabilities.about.profile,
.cm-capabilities.footer {
  background-color: var(--background) !important;
}

.keywords.color,
.keywords._2 {
  background-image: none !important;
  background-color: var(--background) !important;
}

@media (prefers-color-scheme: light) {
  :root {
    --background: var(--paper);
    /* Remap Webflow type tokens so light surfaces stay readable */
    --grey: var(--ink);
    --grey-mid: #5d5d5d;
    --dark-grey: #333333;
    --black: var(--paper);
    --blue-black: var(--navy-deep);
    --light-grey: #e8e2d6;
    color-scheme: light;
  }

  html {
    color-scheme: light;
  }

  body,
  .body,
  .body-2 {
    color: var(--ink);
  }

  /* Hero core is painted white for the night canvas. CSS beats the SVG
     presentation attribute the animation runner writes. */
  #hexagon1-path[stroke="white"],
  #hexagon1-path[stroke="#ffffff"],
  #hexagon1-path[stroke="#FFFFFF"] {
    stroke: var(--ink);
  }

  .cm-logosoup {
    border-top-color: color-mix(in srgb, var(--navy) 12%, transparent);
  }

  /* Soup marks are #C2C2C2 (drawn for the original black band). invert +
     hue-rotate maps grey to ~#3D3D3D and keeps any brand hue. Tetra’s fill
     is already #1A1A1A — inverting it would wash the mark out. */
  .cm-logosoup img {
    filter: invert(1) hue-rotate(180deg);
  }

  .cm-logosoup .vectors-wrapper-171 {
    filter: none;
  }

  /* Night-drawn UI marks (white / baby-blue). Same invert as the soup. */
  .vectors-wrapper-216,
  .vectors-wrapper-217,
  .vectors-wrapper-218,
  .vectors-wrapper-224,
  .vectors-wrapper-226,
  .vectors-wrapper-227,
  .vectors-wrapper-229,
  .layer_1 .vectors-wrapper {
    filter: invert(1) hue-rotate(180deg);
  }

  /* Webflow hardcodes #c2c2c2 on these — they ignore --grey remaps. */
  .cm-logosoup .text-13,
  .cm-logosoup .text-14,
  .cm-logosoup .text-15,
  .cm-logosoup .text-17,
  .cm-logosoup .text-19 {
    color: var(--ink);
  }

  .cm-logosoup .text-16,
  .cm-logosoup .text-18 {
    color: var(--grey-mid);
  }

  .cm-logosoup a:focus-visible {
    outline: 2px solid var(--indigo);
    outline-offset: 3px;
  }

  .cm-logosoup .partner-4,
  .cm-logosoup .remote-2,
  .cm-logosoup .subcontracted-3,
  .cm-logosoup .frame-363 {
    border-color: color-mix(in srgb, var(--navy) 12%, transparent);
  }

  .blue,
  .cm-capabilities.services,
  .cm-capabilities.services.profile,
  .cm-capabilities.about.profile,
  .cm-capabilities.footer {
    background-color: color-mix(in srgb, var(--navy) 4%, var(--paper)) !important;
  }

  .keywords.color,
  .keywords._2 {
    background-image: none !important;
    background-color: color-mix(in srgb, var(--navy) 5%, var(--paper)) !important;
  }

  .tag {
    border-color: color-mix(in srgb, var(--navy) 18%, transparent);
  }

  .tag:hover {
    background-color: color-mix(in srgb, var(--navy) 6%, var(--paper));
    border-color: var(--secondary);
  }

  .strategy-consulting {
    color: var(--ink);
  }

  .tag-2 {
    background-color: color-mix(in srgb, var(--navy) 8%, var(--paper));
  }

  .tag-2:hover {
    background-color: color-mix(in srgb, var(--navy) 12%, var(--paper));
  }

  .brand-text,
  .hero-heading,
  .hero-heading-2,
  .h1,
  .h3,
  .h5,
  .main-text,
  .text-about,
  .heading,
  .heading-2,
  .text-36,
  .text-40,
  .text-43,
  .text-50,
  .text-53,
  .text-55,
  .text-63,
  .text-64,
  .text-65,
  .text-70,
  .text-74,
  .text-75,
  .text-78,
  .text-11,
  .text-48,
  .text-71,
  .master,
  .section-subheading,
  .core-capabilities-3,
  .core-capabilities-5,
  .core-capabilities-9,
  .core-capabilities-10,
  .bold-text-7,
  .ach-bold {
    color: var(--ink);
  }

  /* Gradient fill was white→baby-blue for the night canvas. */
  .core-capabilities {
    background-image: none;
    -webkit-text-fill-color: var(--ink);
    color: var(--ink);
  }

  .main-text a,
  .link-4,
  .link-5,
  .link-7,
  .text-64 a,
  .texxt,
  .text-42,
  .text-73.color,
  .creative-director-christopher-mena-designs-consultancy-2022-present-2 {
    color: var(--dark-blue);
  }

  .link-4:hover {
    color: var(--indigo);
  }

  .navigation-link.white {
    color: var(--grey-mid);
  }

  .navigation-link.white:hover {
    border-bottom-color: var(--dark-grey);
  }

  .hamburger-button.white {
    color: var(--dark-grey);
  }

  /* Tabs were hardcoded night chrome; --grey remap made labels ink-on-navy. */
  .tab-link-tab-1,
  .tab-link-tab-2,
  .tab-link-tab-1-2,
  .tab-link-tab-2-2,
  .mini-tab-link-tab-1,
  .next-tab.port {
    background-color: color-mix(in srgb, var(--navy) 6%, var(--paper));
  }

  .tab-link-tab-1:hover,
  .tab-link-tab-2:hover,
  .tab-link-tab-1-2:hover,
  .tab-link-tab-2-2:hover,
  .mini-tab-link-tab-1:hover,
  .next-tab:hover,
  .next-tab.port:hover {
    background-color: color-mix(in srgb, var(--navy) 10%, var(--paper));
    color: var(--ink);
    border-bottom-color: var(--indigo);
  }

  .tab-link-tab-1.w--current,
  .tab-link-tab-1-2.w--current,
  .tab-link-tab-2-2.w--current,
  .mini-tab-link-tab-1.w--current,
  .tab-link-tab-1.w--current:hover,
  .tab-link-tab-1-2.w--current:hover,
  .tab-link-tab-2-2.w--current:hover,
  .mini-tab-link-tab-1.w--current:hover {
    background-color: color-mix(in srgb, var(--navy) 8%, var(--paper));
    border-bottom-color: var(--indigo);
  }

  .text-block-3,
  .text-block-4,
  .text-block-5,
  .text-block-6,
  .text-block-7,
  .text-block-8,
  .text-block-9 {
    color: var(--ink);
  }

  .cm-tabs {
    border-bottom-color: color-mix(in srgb, var(--navy) 12%, transparent);
  }

  .headline-2,
  .headline-achievements,
  .slide-nav-2 {
    border-bottom-color: color-mix(in srgb, var(--navy) 16%, transparent);
  }

  .copy-8 {
    background-image: none;
    background-color: color-mix(in srgb, var(--navy) 4%, var(--paper));
  }

  /* --blue-black stays navy (it is also used as type). These bands
     still painted with it, so remap the surfaces — not the token. */
  .cm-thank-you,
  .cm-thank-you.about,
  .cm-thank-you.footer,
  .cm-thank-you.services,
  .cm-service,
  .cm-service.footer,
  .welcome,
  .welcome.footer {
    background-color: var(--background) !important;
    color: var(--ink);
  }

  .work,
  .design-2,
  .creed-2 {
    background-color: color-mix(in srgb, var(--navy) 5%, var(--paper)) !important;
    color: var(--ink);
  }

  .design-2,
  .creed-2 {
    border-color: color-mix(in srgb, var(--navy) 16%, transparent);
  }

  .design-2:hover,
  .creed-2:hover {
    background-color: color-mix(in srgb, var(--navy) 8%, var(--paper)) !important;
  }

  .cm-service.footer {
    color: var(--ink);
  }

  .hero-heading-2.foot,
  .section-subheading.center,
  .section-subheading.center.sasd-asd-as {
    color: var(--ink);
  }

  .email-button {
    background-color: color-mix(in srgb, var(--navy) 5%, var(--paper));
    border-color: color-mix(in srgb, var(--navy) 18%, transparent);
    color: var(--dark-blue);
  }

  /* Isolation_Mode.png is mid-grey (~#969696) at ~60% alpha — invert
     stays mid. Crush to ink so it reads on paper. */
  .signature {
    filter: brightness(0);
  }

  .social-icon-link {
    opacity: 0.72;
  }

  .social-icon-link:hover {
    opacity: 1;
  }

  .image-11,
  .image-12,
  .image-14 {
    filter: brightness(0);
  }

  .image-9,
  .next-tab.port img {
    filter: brightness(0);
  }

  .next-tab.port {
    color: var(--ink);
  }

  .cm-footer.accent,
  .cm-footer.accent.gigio,
  .cm-footer.accent.main,
  .legal,
  .button-resume {
    background-color: var(--background);
    border-top-color: color-mix(in srgb, var(--navy) 12%, transparent);
  }

  .book,
  .resume-cta {
    background-color: color-mix(in srgb, var(--navy) 5%, var(--paper));
    border-color: color-mix(in srgb, var(--navy) 18%, transparent);
  }

  .button-resume .resume-cta {
    background-color: var(--background);
    border-color: transparent;
  }

  .button-8:hover,
  .book:hover,
  .resume-cta:hover {
    background-color: color-mix(in srgb, var(--navy) 10%, var(--paper));
    color: var(--ink);
  }

  .text-block-2 {
    color: var(--ink);
  }

  .w-slider-arrow-left,
  .w-slider-arrow-right,
  .w-icon-slider-left,
  .w-icon-slider-right,
  .icon-2,
  .icon-3 {
    color: var(--ink);
  }
}

@media screen and (max-width: 800px) {
  .hexagon-container {
    flex-direction: column;
    padding: 20px;
  }
}

.hexagon-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hexagon-container svg {
  width: 100%;
  height: 100%;
  max-width: 80vmin;
  max-height: 80vmin;
}

svg path {
  transition: d 0s;
}

.hexagons {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.hexagon-items {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: relative;
}

.hexagon-items svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#hexagon1-path {
  z-index: 10;
}
#hexagon2-path {
  z-index: 6;
}
#hexagon3-path {
  z-index: 5;
}
#hexagon4-path {
  z-index: 4;
}
#hexagon5-path {
  z-index: 3;
}
#hexagon6-path {
  z-index: 2;
}
#hexagon7-path {
  z-index: 0;
}