/* Volca identity applied to the original components. No replacement layouts. */
@font-face {
  font-family: Camera;
  src: url('../fonts/ABCCamera-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Camera Plain';
  src: url('../fonts/ABCCameraPlain-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --baseFont: 'Camera Plain', Arial, sans-serif;
  --titleFont: Camera, Arial, sans-serif;
  --volca-white: #fefefe;
  --volca-light-grey: #c4c4c4;
  --volca-grey: #777272;
  --volca-red: #ff3737;
  --volca-red-dark: #d4190c;
  --volca-tint: #fde7e5;
  --textColor: #000;
  --black: #000;
  --color1: var(--volca-red);
  --color2: #000;
  --grey: var(--volca-light-grey);
  /* Retain the matte used by the original videos and transparent WebM assets. */
  --lightGrey: #f0f0f0;
  --gradient: var(--volca-light-grey);
  /* Inverse video response: black studio matte, red capsule-shadow detail. */
  --hero-reactive-red: url('#volca-hero-response');
}
body { background-color: var(--volca-white); font-synthesis: none; }
::selection { background: var(--volca-tint); color: #000; }
.title > *, h1, h2, h3, h4, .team-preview-card h2, .team-preview-card h3 {
  font-family: var(--titleFont);
  font-weight: 400;
  hyphens: none;
}
.text, .btn, .btn-plus, nav, .team-preview-copy { font-family: var(--baseFont); }
a:focus-visible, [role='button']:focus-visible, [role='slider']:focus-visible {
  outline: 2px solid var(--volca-red-dark);
  outline-offset: 4px;
}
header {
  background-color: rgba(254, 254, 254, .88) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  filter: none;
  mix-blend-mode: normal;
}
.header-logo img { filter: none; }
.home-intro > .video { opacity: .52; }
.home-intro.has-hero-video > .video { opacity: 1; }
.home-intro > .content { mix-blend-mode: normal; }
.home-intro .content .title.special,
.market-hero-subtitle { color: #000; text-shadow: none; }
.market-hero > .content { text-shadow: none; }
.market-hero .content .big-logo img { filter: none; }
.home-intro .content .big-logo img { height: auto; }
.home-intro .content .big-logo { width: 26em; aspect-ratio: 1281 / 794; margin-left: auto; margin-right: auto; }
/* A native channel matrix retains the moving shadow detail of the original
   difference blend. No duplicate video or per-frame JavaScript is needed. */
.hero-response-definitions { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
@supports ((backdrop-filter: invert(1)) or (-webkit-backdrop-filter: invert(1))) {
  .home-intro .content .big-logo {
    -webkit-mask: url('../brand/volca-mark.svg') center / contain no-repeat;
    mask: url('../brand/volca-mark.svg') center / contain no-repeat;
    -webkit-backdrop-filter: var(--hero-reactive-red);
    backdrop-filter: var(--hero-reactive-red);
  }
  .home-intro .content .big-logo img { visibility: hidden; }
}
.no-reveal .reveal-cascade-children > * { transform: none; }
.title span, .market-benefit-statement span { color: var(--volca-red-dark); }
.home-intro .title span { color: inherit; }
.home-vision .grid > .ill .overlay {
  width: clamp(10rem, 30vw, 22rem);
  aspect-ratio: 1281 / 794;
  background-color: var(--volca-red);
  -webkit-mask: url('../brand/volca-mark.svg') center / contain no-repeat;
  mask: url('../brand/volca-mark.svg') center / contain no-repeat;
}
.vision-ill {
  -webkit-mask-image: url('../brand/volca-vision-grid.png');
  mask-image: url('../brand/volca-vision-grid.png');
  -webkit-mask-size: contain;
  mask-size: contain;
}
.vision-ill::after { padding-bottom: 100%; }
/* Match the ingredients photo to its text panel without letterboxing. */
.home-markets .grid { align-items: stretch; }
.home-markets .grid > .ill { min-height: 0; }
.home-markets .grid > .ill img { object-fit: cover; }
.main-nav a[aria-current='page'], .ingredient-menu-product { color: var(--volca-red-dark); }
.main-nav .sub-menu li:hover .ingredient-menu-product { color: #000; }
.mobile-menu { background: var(--volca-white); top: var(--headerHeight); height: calc(100dvh - var(--headerHeight)); overflow-y: auto; }
body .mobile-menu-overlay { top: var(--headerHeight); height: calc(100dvh - var(--headerHeight)); }
body.w-mobile-menu { overflow: hidden; }
.mobile-menu[aria-hidden='true'] { visibility: hidden; }
.mobile-menu[aria-hidden='false'] { visibility: visible; }

/* Preserve the original outlined pill and expanding red arrow disc. */
.btn:hover, .btn.active, .btn-container a:hover, .wp-element-button:hover { color: #000; }
.btn-plus:hover, .btn-plus::before, .btn-plus::after { color: #000; }
.btn-plus { background-color: var(--volca-red) !important; }
.box-news .btn-plus:not(:hover) { background-color: var(--lightGrey) !important; }
.box-news .btn-plus:hover { background-color: var(--volca-red) !important; }
.swiper-news-arr:hover, footer .volca-to-top:hover { filter: none; }
.swiper-news-arr:hover { opacity: 1; }
.techno-nav-content > *:not(.active) { opacity: 1; color: var(--volca-grey); }
.techno-nav-content > *.active { color: #000; }
.techno-nav-content > *:hover { color: var(--volca-red-dark); }
.swiper-techno-nav a { cursor: pointer; }
.swiper-techno-nav a.active { background-color: var(--volca-red); }
.swiper-techno-content .swiper-slide[aria-hidden='true'] { visibility: hidden; }
.swiper-news-arr[aria-disabled='true'] { pointer-events: none; }
.compare-layout { background: var(--lightGrey); }
.compare-layout .box-compare { opacity: .75; }

footer { background: var(--volca-light-grey); }
footer .grid.bottom > * { color: #000; }
footer .footer-col-logo img { filter: none; }
footer .volca-to-top { opacity: .8; }
.page-intro .op50, .page-intro .text.f-tiny { opacity: 1; color: #000; }
.page-intro .text.f-tiny a { color: #000; }
.page-intro { padding: calc(var(--gutter) * 1.5) var(--gutter); }
.page-intro .ill { opacity: .4; pointer-events: none; }
.page-intro .inner { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; }
.page-content .text, .page-content p, .page-content li { font-family: var(--baseFont); }
body.team-preview-page, .team-preview { background: var(--volca-white); }
.team-preview h1 { font-weight: 400; line-height: .95; }
.team-preview-kicker, .team-preview-section-title { color: var(--volca-grey); font-weight: 400; }
.team-preview-linkedin { background: #000; }
.team-preview-linkedin:hover { background: var(--volca-red-dark); }
.team-preview .btn:hover { color: #000; }
@media (max-width: 700px) {
  .home-markets .grid > .ill { aspect-ratio: 1537 / 1023; }
  .home-intro .title.big > * { overflow-wrap: normal; }
  .page-intro h1 { font-size: clamp(28px, 7.5vw, 42px); overflow-wrap: break-word; }
  .team-preview-grid.team h3 { font-size: clamp(1rem, 4.7vw, 1.22rem); }
  .product-form-name, .product-form-card--beta .product-form-name { font-size: 12px; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
  .product-form-description { font-size: 11px; line-height: 1.3; }
  .compare-layout .box-compare { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}