/*! TCC site bundle v1.0.0, github.com/thecolorcompanyeurope/tcc-site. Built from src/; do not edit dist/ by hand. */

/* ---- src/css/10-site.css ---- */
/* TCC site-wide CSS: only what the Designer cannot express. Tokens live in Webflow Variables. */
:root { --ease-tcc: cubic-bezier(0.62, 0.05, 0, 1); --ease-link: cubic-bezier(0.625, 0.05, 0, 1); }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background-color: var(--color--ink-0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, h5, h6, p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--_theme---focus-ring); outline-offset: 3px; }
html.is-nav-open { overflow: hidden; }

/* Button: fill travels across the frame */
@media (hover: hover) {
  .button:hover .button_fill { width: 100%; }
  .button:hover .button_label { color: var(--_theme---background--primary); }
}
.button:focus-visible .button_fill { width: 100%; }
.button:focus-visible .button_label { color: var(--_theme---background--primary); }
.button:active { transform: scale(0.98); }

/* Osmo underline link */
[data-underline-link] { position: relative; text-decoration: none; }
[data-underline-link]::before { content: ""; position: absolute; left: 0; bottom: -0.0625em; width: 100%; height: 0.0625em; background-color: currentColor; transform-origin: right; transform: scaleX(0) rotate(0.001deg); transition: transform 0.735s var(--ease-link); }
@media (hover: hover) and (pointer: fine) {
  [data-underline-link]:hover::before { transform-origin: left; transform: scaleX(1) rotate(0.001deg); }
}

/* Mega nav (Osmo Directional Hover): states the Designer can't express. Open/close motion runs in the nav module. */
.navbar_panel-col:last-child { border-right: 0; }
@media (hover: hover) { .navbar_panel-link:hover .navbar_panel-link-text { color: var(--_theme---text--accent); } }
.navbar_panel-link:focus-visible { background-color: var(--_theme---hover-tint); }
.navbar_burger-line { transition: transform 0.4s var(--ease-link), opacity 0.2s ease; }
[data-burger-toggle][aria-expanded="true"] [data-burger-line="top"] { transform: translateY(6.5px) rotate(45deg); }
[data-burger-toggle][aria-expanded="true"] [data-burger-line="mid"] { opacity: 0; }
[data-burger-toggle][aria-expanded="true"] [data-burger-line="bot"] { transform: translateY(-6.5px) rotate(-45deg); }
@media (min-width: 992px) {
  [data-dropdown-toggle][aria-expanded="true"] { color: var(--_theme---text--primary); background-color: var(--_theme---hover-tint); }
  [data-dropdown-toggle][aria-expanded="true"] .navbar_link-icon { transform: rotate(180deg); }
}
@media (max-width: 991px) { .navbar_action > * { flex: 1; justify-content: center; } }
/* Designer only: data-panel-state="active" shows a panel, data-mobile-nav="active" shows the mobile list */
.wf-design-mode [data-nav-content][data-panel-state="active"] { opacity: 1; visibility: visible; pointer-events: auto; position: relative; }
.wf-design-mode [data-dropdown-container]:has([data-panel-state="active"]) { height: auto; }
.wf-design-mode [data-mobile-nav="active"] { opacity: 1; visibility: visible; }

/* Copy email (Osmo) */
@media (hover: hover) { .copy-email-button:hover .copy-email_text { transform: translateY(-100%); } }
.copy-email-button:focus-visible .copy-email_text { transform: translateY(-100%); }
[data-copy-button="copied"] .copy-email_text { transform: translateY(-200%) !important; }

/* FAQ item on native details/summary */
.faq_question::-webkit-details-marker { display: none; }
.faq_question::marker { content: ""; }
.faq_item[open] .faq_icon-line.is-vertical { transform: rotate(0deg); }
.faq_question:focus-visible { outline-offset: -3px; }

/* Logo slider marquee */
@keyframes logo-slider { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.logo-slider_track.is-running { animation: logo-slider var(--logo-slider-duration, 40s) linear infinite; }
.logo-slider_component:hover .logo-slider_track { animation-play-state: paused; }

/* Homepage: hover states (child selectors the Designer cannot express) */
@media (hover: hover) {
  .situ_tile:hover .situ_image { transform: scale(1.05); }
  .situ_tile:hover .situ_go { background-color: var(--color--magenta); border-color: var(--color--magenta); transform: translateX(6px); }
  .tech_tile:hover .tech_image { transform: scale(1.04); }
  .service_row:hover .service_arrow { transform: translateX(6px); color: var(--_theme---text--accent); }
  .pick_row:hover .pick_go { transform: translateX(6px); color: var(--_theme---text--accent); }
  .team_member:hover .team_image { transform: scale(1.03); filter: grayscale(1) contrast(1.08) brightness(1.06); }
  .tech-hub_brand:hover { border-color: var(--_theme---text--primary); }
}

/* Situation pages: recommendation cards, their "+", next-step cards (design: technologie.css .rcard/.jnext__card, tsmodal.css .rcard-plus) */
.rec_card, .next_card { transition: transform 0.4s var(--ease-tcc), border-color 0.3s ease, box-shadow 0.3s ease; }
.rec_image, .rec_photo { transition: transform 0.8s var(--ease-tcc); }
.next_go { transition: transform 0.4s var(--ease-tcc), color 0.3s ease; }
.rec_plus { transition: background-color 0.25s ease, transform 0.4s var(--ease-link); }
.rec_plus:focus-visible { outline: 2px solid var(--color--magenta); outline-offset: 3px; }
@media (hover: hover) {
  .rec_card:hover { transform: translateY(-3px); border-color: rgba(0,0,0,0.2); box-shadow: 0 8px 30px rgba(0,0,0,0.1); }
  .rec_card:hover .rec_image, .rec_card:hover .rec_photo { transform: scale(1.04); }
  .rec_plus:hover { background-color: var(--color--magenta); transform: rotate(90deg); }
  .next_card:hover { transform: translateY(-3px); border-color: rgba(0,0,0,0.2); box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
  .next_card:hover .next_go { transform: translateX(6px); color: var(--_theme---text--accent); }
}

/* Recommendation modals: the design's tsmodal sequence on the Designer classes. .rec_modal stays display:none in the Designer;
   on load JS removes [hidden] and adds .is-ready, then .is-open runs it: backdrop blurs in, the panel grows from a 25em bar,
   the header line fades in, the body unfolds, the two columns rise in, the × bars cross. .is-settled lets the body scroll. */
.rec_modal.is-ready { display: flex; visibility: hidden; pointer-events: none; transition: visibility 0s linear 1s; }
.rec_modal.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.rec_modal.is-ready .rec_modal-bg { background-color: rgba(10,10,11,0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.5s var(--ease-link); }
.rec_modal.is-open .rec_modal-bg { opacity: 1; }
.rec_modal.is-ready .rec_modal-panel { display: grid; grid-template-rows: auto 0fr; overflow: hidden; max-width: 25em; opacity: 0; transform: scale(0.96); box-shadow: 0 30px 80px rgba(0,0,0,0.25); transition: max-width 0.75s var(--ease-link) 0.2s, opacity 0.3s ease 0.5s, transform 0.5s var(--ease-link) 0.45s, grid-template-rows 0.5s var(--ease-link); }
.rec_modal.is-open .rec_modal-panel { max-width: 1000px; opacity: 1; transform: none; grid-template-rows: auto 1fr; transition: max-width 0.5s var(--ease-link) 0.12s, opacity 0.2s ease, transform 0.5s var(--ease-link), grid-template-rows 0.75s var(--ease-link) 0.25s; }
.rec_modal.is-ready .rec_modal-top { border-bottom-color: transparent; transition: border-color 0.5s var(--ease-link); }
.rec_modal.is-open .rec_modal-top { border-bottom-color: rgba(0,0,0,0.1); transition-delay: 0.1s; }
.rec_modal.is-ready .rec_modal-body { min-height: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; transition: padding 0.5s var(--ease-link); }
.rec_modal.is-open .rec_modal-body { padding-top: 32px; padding-bottom: 32px; transition: padding 0.75s var(--ease-link) 0.25s; }
.rec_modal.is-settled .rec_modal-body { overflow-y: auto; overscroll-behavior: contain; }
.rec_modal.is-ready .rec_modal-body > * { opacity: 0; transform: translateY(2em); transition: opacity 0.5s var(--ease-link), transform 0.5s var(--ease-link); }
.rec_modal.is-ready .rec_modal-body > :nth-child(2) { transition-delay: 0.075s; }
.rec_modal.is-open .rec_modal-body > * { opacity: 1; transform: none; transition-duration: 0.75s; transition-delay: 0.5s; }
.rec_modal.is-open .rec_modal-body > :nth-child(2) { transition-delay: 0.575s; }
html.is-modal-open { overflow: hidden; }
/* Close: two bars that cross into an × as the modal opens (the "×" glyph in the Designer is hidden) */
.rec_modal-close { position: relative; font-size: 0; color: transparent; transition: background-color 0.25s ease; }
.rec_modal-close::before, .rec_modal-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; margin: -1px 0 0 -10px; background-color: var(--_theme---text--primary); transition: transform 0.5s var(--ease-link); }
.rec_modal-close::before { transform: translateY(-3px); }
.rec_modal-close::after { transform: translateY(3px); }
.rec_modal.is-open .rec_modal-close::before { transform: rotate(45deg); }
.rec_modal.is-open .rec_modal-close::after { transform: rotate(-45deg); }
@media (hover: hover) { .rec_modal-close:hover { background-color: rgba(0,0,0,0.06); } }
/* Modal CTA: the design's btn--sweep btn--dark. A white block with the arrow sits inside the dark frame and grows across it on hover. */
.rec_modal-cta, .post-cta_button { position: relative; isolation: isolate; min-height: 56px; padding: 6px 20px 6px 62px; border-radius: 12px; background-color: var(--color--ink-1); color: #fff; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; transition: color 0.42s var(--ease-tcc); }
.rec_modal-cta::before, .post-cta_button::before { content: ""; position: absolute; z-index: -1; left: 6px; top: 6px; bottom: 6px; width: 44px; border-radius: 7px; background-color: #fff; transition: width 0.62s var(--ease-tcc); }
.rec_modal-cta::after, .post-cta_button::after { content: ""; position: absolute; left: 6px; top: 6px; width: 44px; height: 44px; background-color: var(--color--ink-0); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / 20px no-repeat; }
@media (hover: hover) {
  .rec_modal-cta:hover, .post-cta_button:hover { color: var(--color--ink-0); }
  .rec_modal-cta:hover::before, .post-cta_button:hover::before { width: calc(100% - 12px); }
}
.rec_modal-cta:focus-visible, .post-cta_button:focus-visible { color: var(--color--ink-0); }
.rec_modal-cta:focus-visible::before, .post-cta_button:focus-visible::before { width: calc(100% - 12px); }
.rec_modal-cta:active, .post-cta_button:active { transform: scale(0.98); }
/* On the post CTA panel (ink-1) the frame needs the lighter ink to read, as in the design's btn--sweep */
.post-cta_button { background-color: #1c1c1f; }

/* Line-grid spark (design: wire.css): drawn by the wire module on [data-wire] */
.wire { position: absolute; left: 0; top: 0; z-index: 2; overflow: visible; pointer-events: none; }
.wire path { fill: none; stroke: var(--color--magenta); stroke-opacity: 0.55; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(255,0,155,0.22)) drop-shadow(0 0 14px rgba(255,0,155,0.1)); }


/* Contact form states (design: kontakt.css .ff.is-bad / .ff__consent.is-bad); .is-bad and [data-form-error] are set by initContactForm */
.form_input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,0,155,0.18); }
.form_field.is-bad .form_input { border-color: var(--_theme---text--accent); box-shadow: 0 0 0 3px rgba(255,0,155,0.12); }
.form_field.is-bad .form_label { color: var(--_theme---text--accent); }
.form_consent.is-bad { color: var(--_theme---text--accent); }
.form_done:focus { outline: none; }

/* Footer: the TCC ball as a faint background mark in the panel, behind the content (isolation keeps z-index -1 above the panel fill) */
.footer_panel { isolation: isolate; }
.footer_panel::before { content: ""; position: absolute; z-index: -1; right: -7%; bottom: -34%; width: min(56vw, 780px); aspect-ratio: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 485 485'%3E%3Cpath fill='%23fdb827' d='M470.4,159.62c-10.86-29.89-27.44-57.04-48.41-80.12H62.93c-20.97,23.09-37.54,50.23-48.41,80.12'/%3E%3Cpath fill='%23009ddc' d='M58.14,399.99c44.47,51.98,110.54,84.93,184.32,84.93,73.45,0,139.27-32.66,183.74-84.25'/%3E%3Cpath fill='%23963d97' d='M426.2,400.66c20.21-23.45,36.01-50.81,46.1-80.8H12.62c10,29.7,25.59,56.82,45.52,80.12'/%3E%3Cpath fill='%23e03a3e' d='M472.3,319.87c8.18-24.31,12.62-50.34,12.62-77.41H0c0,27.07,4.44,53.1,12.62,77.41'/%3E%3Cpath fill='%23f5821f' d='M484.92,242.46c0-29.09-5.12-56.99-14.52-82.84H14.52C5.12,185.47,0,213.37,0,242.46'/%3E%3Cpath fill='%2361bb46' d='M62.93,79.5C107.28,30.66,171.29,0,242.46,0c71.17,0,135.18,30.66,179.53,79.5'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0.08; pointer-events: none; }
@media (max-width: 767px) { .footer_panel::before { width: 120vw; right: -45%; bottom: -12%; opacity: 0.07; } }

/* Odometer: digit columns are separate inline boxes, so keep a number on one line while it rolls */
[data-count] { white-space: nowrap; }

/* Fedar DTF path (design: fedar.css .dtf__bar): bars fill from zero when the path scrolls in, 0.15s apart. data-dtf-ready is set by JS, so without JS the bars stay full. */
[data-dtf-ready] .dtf-step_bar-fill { transform-origin: left center; transform: scaleX(0); transition: transform 1.4s var(--ease-tcc); }
[data-dtf-ready].is-in .dtf-step_bar-fill { transform: scaleX(1); }
[data-dtf-ready] > :nth-child(2) .dtf-step_bar-fill { transition-delay: 0.15s; }
[data-dtf-ready] > :nth-child(3) .dtf-step_bar-fill { transition-delay: 0.3s; }

/* Highlight marker reveal (design: marker.js, Osmo): a magenta bar covers each line of the title and shrinks away to the right.
   .js-marker is set in the head script (not under reduced motion); the failsafe shows the title if the script never runs. */
[data-marker-reveal] { position: relative; }
.js-marker [data-marker-reveal]:not(.is-marker-ready) { visibility: hidden; animation: marker-failsafe 0s linear 2.5s forwards; }
@keyframes marker-failsafe { to { visibility: visible; } }
.marker-bar { position: absolute; z-index: 1; pointer-events: none; background-color: #ff009b; transform-origin: right center; transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1); }
.marker-bar.is-off { transform: scaleX(0); }

/* Blog listing: hover states and progressive "show more" */
@media (hover: hover) {
  .blog-row:hover .blog-row_image, .post-card:hover .post-card_image { transform: scale(1.04); }
  .blog-row:hover .blog-row_title { color: #9b005c; }
  .blog-row:hover .blog-row_go { transform: translateX(6px); color: #9b005c; border-color: currentColor; }
  .blog_more-button:hover { background-color: #0f0f11; border-color: #0f0f11; color: #fff; }
  .pcard:hover, .post-card:hover { transform: translateY(-3px); border-color: rgba(0,0,0,0.2); box-shadow: 0 8px 30px rgba(0,0,0,0.1); }
}
.blog-row:focus-visible { outline-offset: 4px; border-radius: 10px; }
[data-blog-rt]::after { content: " min"; }
.blog-meta > * + *::before { content: "·"; margin-right: 10px; opacity: 0.7; }

/* Blog post: table of contents (links are built by initPost) */
.post-toc_link { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid rgba(0,0,0,0.1); font-size: 14px; line-height: 1.35; color: #444; text-decoration: none; transition: color 0.2s ease; }
.post-toc_link::before { content: ""; width: 5px; height: 5px; transform: translateY(-2px); background-color: transparent; transition: background-color 0.2s ease; }
.post-toc_link:hover { color: #1d1d1f; }
.post-toc_link[aria-current] { color: #1d1d1f; font-weight: 600; }
.post-toc_link[aria-current]::before { background-color: #ff009b; }
@media (max-width: 991px) { [data-toc-wrap] { order: -1; } }

/* Blog post: rich text (design: blog.css .prose, .post-tldr) */
.post-tldr .w-richtext { margin-top: 14px; }
.post-tldr ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.post-tldr li { position: relative; padding-left: 20px; font-size: 17px; line-height: 1.45; font-weight: 500; }
.post-tldr li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; background-color: #1d1d1f; }
.post-body .w-richtext { font-size: 18px; line-height: 1.62; color: #1d1d1f; }
.post-body h2 { margin: clamp(48px, 5vw, 72px) 0 0; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 600; text-wrap: balance; scroll-margin-top: 110px; }
.post-body h3 { margin: 36px 0 0; font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; }
.post-body p { margin: 18px 0 0; }
.post-body h2 + p { margin-top: 20px; }
.post-body strong { font-weight: 600; }
.post-body a, .post-cta_text a { color: #9b005c; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-body a:hover { color: #1d1d1f; }
.post-cta_text a { color: #fff; }
.post-cta_text a:hover { color: #ff4fb8; }
.post-cta_text p { margin: 14px 0 0; max-width: 58ch; }
.post-cta_text p:first-child { margin-top: 0; }
.post-body ul, .post-body ol { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.post-body ul li { position: relative; padding-left: 22px; }
.post-body ul li::before { content: ""; position: absolute; left: 2px; top: 0.68em; width: 5px; height: 5px; background-color: #ff009b; }
.post-body ol { counter-reset: s; gap: 0; border-top: 1px solid rgba(0,0,0,0.1); }
.post-body ol li { counter-increment: s; position: relative; padding: 14px 0 14px 44px; border-bottom: 1px solid rgba(0,0,0,0.1); }
.post-body ol li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 19px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: #9b005c; }
.post-body figure { margin: 28px 0 0; }
.post-body figure.w-richtext-figure-type-video > div { border-radius: 10px; overflow: hidden; background-color: #0f0f11; }
.post-body figure.w-richtext-figure-type-image img { border-radius: 10px; }
.post-body figcaption { margin-top: 10px; font-size: 13px; font-weight: 500; text-align: left; color: #616161; }
.post-body [data-post-machines] { margin-top: 0; }
.post-faq .faq_item { background-color: #f5f5f7; border-color: transparent; }

/* Blog post: hide blocks whose CMS field is empty; lists waiting for a multi-reference source (set in the Designer) stay hidden */
.post-header_lead.w-dyn-bind-empty, .post-author_bio.w-dyn-bind-empty, .post-byline_role.w-dyn-bind-empty, .post-author_role.w-dyn-bind-empty, .pcard_text.w-dyn-bind-empty { display: none; }
.post-header_figure:has(img.w-dyn-bind-empty), .post-facts > div:has(.w-dyn-bind-empty), .post-tldr:has(.w-richtext.w-dyn-bind-empty), .post-faq:has(.w-richtext.w-dyn-bind-empty), .post-cta:has(.post-cta_title.w-dyn-bind-empty), .post-cta_button.w-dyn-bind-empty { display: none; }
[data-multiref-pending] { display: none !important; }
.post-machines:not(:has(.w-dyn-item)) { display: none; }

/* Marquee band */
.marquee_track { animation: logo-slider 46s linear infinite; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Subpages: timeline rail, line-grid registration marks, brand cells */
.timeline_list::before, .timeline_list::after { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1px; background-color: var(--_theme---border--default); }
.timeline_list::after { background-color: var(--color--magenta); transform-origin: top; transform: scaleY(var(--tl-progress, 1)); }
.timeline_item::before { content: ""; position: absolute; left: calc(clamp(32px, 4vw, 56px) * -1); top: 10px; z-index: 1; width: 9px; height: 9px; background-color: var(--_theme---background--secondary); box-shadow: inset 0 0 0 1px var(--_theme---text--tertiary); transition: background-color 0.3s ease, box-shadow 0.3s ease; }
.timeline_list:not([data-timeline-ready]) .timeline_year, .timeline_item.is-on .timeline_year { color: var(--_theme---text--primary); }
.timeline_list:not([data-timeline-ready]) .timeline_item::before, .timeline_item.is-on::before { background-color: var(--color--magenta); box-shadow: none; }
.timeline_item.is-now.is-on .timeline_year { color: var(--_theme---text--accent); }
.line-grid::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 5px; height: 5px; background-color: var(--_theme---text--primary); }
.line-grid_cell::before { content: ""; position: absolute; left: -3px; top: -3px; width: 5px; height: 5px; background-color: var(--_theme---text--primary); }
@media (hover: hover) { .brand-cell:hover { background-color: var(--_theme---background--secondary); } }

/* Contact form: topic chips, maps */
.form_chip-input:checked + .form_chip-label { background-color: var(--color--ink-1); border-color: var(--color--ink-1); color: #fff; }
.form_chip-input:focus-visible + .form_chip-label { outline: 2px solid var(--_theme---focus-ring); outline-offset: 2px; }
.location_map .w-embed { height: 100%; }
.location_map iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(0.4); }

/* Finder filter chips: pressed state set by initFinder via aria-pressed */
.finder_chip { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; }
@media (hover: hover) { .finder_chip:hover { border-color: var(--_theme---text--primary); } }
.finder_chip[aria-pressed="true"] { background-color: var(--_theme---text--primary); border-color: var(--_theme---text--primary); color: var(--_theme---background--primary); }

/* CMS templates and cards: hide rows whose bound field is empty (Webflow adds w-dyn-bind-empty) */
.spec-panel_row:has(.w-dyn-bind-empty), .pd-spec_row:has(.pd-spec_value.w-dyn-bind-empty), .line-grid_cell:has(.line-grid_title.w-dyn-bind-empty), .product-card_spec:has(.w-dyn-bind-empty) { display: none; }
.page-header_lead.w-dyn-bind-empty, .section-head p.w-dyn-bind-empty, .text-style-eyebrow.w-dyn-bind-empty, .pd-render:has(img.w-dyn-bind-empty) { display: none; }
.pd-spec_download:not([href]), .pd-spec_download[href="#"], .pd-spec_download[href=""] { display: none; }

/* Section nav (technology pages): JS-driven states */
.subnav.is-on { opacity: 1; transform: none; pointer-events: auto; }
.subnav_bar { scrollbar-width: none; }
.subnav_bar::-webkit-scrollbar { display: none; }
@media (hover: hover) { .subnav_link:hover { color: #fff; background-color: rgba(255,255,255,0.06); } }
.subnav_link.is-active { color: var(--color--ink-1); background-color: #fff; }
.subnav_link.is-active .subnav_index { color: var(--_theme---text--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .rec_modal, .rec_modal *, .rec_modal *::before, .rec_modal *::after { transition-delay: 0s !important; }
  .logo-slider_track.is-running, .marquee_track { animation: none; }
  .subnav { transition: none; }
}

/* ---- src/css/20-gallery.css ---- */
/* Homepage gallery ([data-gallery]). Carousel: transform-driven once 50-gallery.js runs (native scroll without JS). */
.gallery_viewport::-webkit-scrollbar { display: none; }
[data-gallery-ready] .gallery_viewport { overflow: hidden; scroll-snap-type: none; padding-left: 0; padding-right: 0; touch-action: pan-y; }
[data-gallery-ready] .gallery_track { position: relative; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; }
[data-gallery-ready] .gallery_card:not(.is-active) { opacity: 0.55; cursor: pointer; }
[data-gallery-snap] .gallery_track, [data-gallery-snap] .gallery_card { transition: none !important; }
.gallery_dot { appearance: none; border: 0; background: none; cursor: pointer; line-height: 0; }
.gallery_dot > span { display: block; position: relative; overflow: hidden; border-radius: 999px; }
.gallery_dot > span > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; }
/* Play button icon per state (data-state set by the script): pause while playing, play when paused, replay at the end */
.gallery_play .gallery_icon-play, .gallery_play .gallery_icon-replay { display: none; }
.gallery_play[data-state="paused"] .gallery_icon-pause, .gallery_play[data-state="ended"] .gallery_icon-pause { display: none; }
.gallery_play[data-state="paused"] .gallery_icon-play, .gallery_play[data-state="ended"] .gallery_icon-replay { display: block; }

/* Gallery nav (Apple "All Access Pass" style): glass pill of dots + round play button, sticky at the
   viewport bottom while the gallery is on screen. Pill colours follow the nearest .theme-light / .theme-dark ancestor. */
.theme-light { --gnav-bg: rgb(232 232 237 / 70%); --gnav-glow: rgb(0 0 0 / 11%); --gnav-dot: rgb(29 29 31 / 42%); --gnav-dot-hover: rgb(29 29 31 / 70%); --gnav-track: rgb(29 29 31 / 18%); --gnav-ink: #1d1d1f; }
.theme-dark { --gnav-bg: rgb(66 66 69 / 70%); --gnav-glow: rgb(232 232 237 / 11%); --gnav-dot: rgb(255 255 255 / 42%); --gnav-dot-hover: rgb(255 255 255 / 70%); --gnav-track: rgb(255 255 255 / 22%); --gnav-ink: #f5f5f7; }
/* clip, not hidden: hidden makes the section a scroll container and sticky stops working */
[data-gallery] { overflow: clip; }
[data-gallery] [data-gallery-ui] { position: sticky; bottom: 30px; z-index: 5; gap: 14px; pointer-events: none; }
[data-gallery] [data-gallery-dots], [data-gallery] [data-gallery-play] {
  pointer-events: auto; min-height: 56px; border-radius: 32px;
  background-color: var(--gnav-bg); box-shadow: inset 0 0 1px var(--gnav-glow);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  transition: background-color 250ms linear;
}
[data-gallery] [data-gallery-dots] { gap: 0; padding: 0 16px; }
[data-gallery] [data-gallery-play] { width: 56px; height: 56px; flex: 0 0 56px; color: var(--gnav-ink); }
/* Intro ring (Apple's colour-picker contour, in magenta): --ring / --ring-a / --tint are driven by the script below */
[data-gallery] [data-gallery-play] {
  background-image: linear-gradient(rgb(255 0 155 / calc(var(--tint, 0) * 20%)), rgb(255 0 155 / calc(var(--tint, 0) * 20%)));
  box-shadow: inset 0 0 1px var(--gnav-glow), 0 0 0 var(--ring, 0px) rgb(255 0 155 / var(--ring-a, 1));
}
[data-gallery] .gallery_dot { padding: 0 8px; height: 56px; }
[data-gallery] .gallery_dot > span { width: 8px; height: 8px; background-color: var(--gnav-dot); transition: width 400ms cubic-bezier(.33, 0, .67, 1), background-color 250ms linear; }
[data-gallery] .gallery_dot:hover > span { background-color: var(--gnav-dot-hover); }
[data-gallery] .gallery_dot[aria-current="true"] > span { width: 48px; background-color: var(--gnav-track); }
[data-gallery] .gallery_dot > span > i { background-color: var(--gnav-ink); }
[data-gallery] .gallery_dot:focus-visible, [data-gallery] [data-gallery-play]:focus-visible { outline: 2px solid var(--_theme---focus-ring); outline-offset: 2px; }
@media (max-width: 734px) {
  [data-gallery] [data-gallery-dots] { padding: 0 12px; }
  [data-gallery] .gallery_dot { padding: 0 5px; }
  [data-gallery] .gallery_dot[aria-current="true"] > span { width: 32px; }
}

/* ---- src/css/30-rec-modal-close.css ---- */
/* Recommendation / quick-view modals: the × sits under the panel (Webflow: rec_modal > panel + close), as a 56 px glass circle
   like the homepage gallery button. It only
   touches modals whose × was moved out of .rec_modal-top, so pages with the old corner × (/trade-show) are unchanged. */
.rec_modal.is-ready:has(> .rec_modal-close) { flex-direction: column; gap: 20px; }
.rec_modal.is-ready:has(> .rec_modal-close) > .rec_modal-panel { max-height: calc(90vh - 76px); }
.rec_modal > .rec_modal-close {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  background-color: rgb(232 232 237 / 80%);
  /* --ring / --ring-a / --tint are driven by the pop-in: a magenta contour that swells and thins away (Apple's blue ring) */
  background-image: linear-gradient(rgb(255 0 155 / calc(var(--tint, 0) * 20%)), rgb(255 0 155 / calc(var(--tint, 0) * 20%)));
  box-shadow: inset 0 0 1px rgb(0 0 0 / 11%), 0 0 0 var(--ring, 0px) rgb(255 0 155 / var(--ring-a, 1));
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  transition: background-color 250ms linear;
}
.rec_modal > .rec_modal-close::before, .rec_modal > .rec_modal-close::after { background-color: #1d1d1f; }
@media (hover: hover) { .rec_modal > .rec_modal-close:hover { background-color: rgb(255 255 255 / 92%); } }