/* web kit 5acf44d | skin: lgs | built 2026-11-09 | do not edit: change base/, components/ or skins/ in 07_web_kit */

/* ---- base: GeoCloud Kit custom CSS ---- */
/* ============================================================
   CURRENT STATE: Elementor Site Settings > Custom CSS
   Pulled from Kit ID 9417 on staging — 2026-04-10
   ============================================================ */

/* Custom Global Theme Variables */
:root {
  --gridSideSpacing: clamp(12px, 2vw, 36px);
  --thinLineWidth: 0.5px;
  --thickLineWidth: clamp(8px, 0.7vw, 10px);
  --gridContainerPadding: clamp(32px, 5vw, 96px);
  --containerVerticalSpacing: clamp(16px, 2vw, 24px);
  --cardBorderRadius: clamp(10px, 0.8vw, 14px);
  --cardSpacing: clamp(16px, 1.5vw, 21px);
  --expandableSectionSpacing: clamp(32px, 3.5vw, 48px);
  --button-arrow-color: #ffffff;
  --mask-img-1-height: clamp(400px, 43vw, 620px);
  --mask-img-2-height: clamp(400px, 43vw, 620px);
  --blog-mask-img-1-height: clamp(320px, 33vw, 420px);
  --blog-mask-img-2-height: clamp(320px, 33vw, 420px);
}

@media (max-width: 1440px) {
  :root {
    --gridContainerPadding: 80px;
    --gridSideSpacing: 28px;
    --containerVerticalSpacing: 22px;
    --cardSpacing: 20px;
    --expandableSectionSpacing: 44px;
  }
}

@media (max-width: 1200px) {
  :root {
    --gridContainerPadding: 64px;
    --gridSideSpacing: 20px;
    --containerVerticalSpacing: 20px;
    --cardSpacing: 18px;
    --expandableSectionSpacing: 40px;
    --mask-img-1-height: 520px;
    --mask-img-2-height: 520px;
    --blog-mask-img-1-height: 400px;
    --blog-mask-img-2-height: 400px;
  }
}

@media (max-width: 1024px) {
  :root {
    --gridContainerPadding: 64px;
    --gridSideSpacing: 20px;
    --containerVerticalSpacing: 18px;
    --cardSpacing: 18px;
    --expandableSectionSpacing: 36px;
    --mask-img-1-height: 400px;
    --mask-img-2-height: 400px;
    --blog-mask-img-1-height: 400px;
    --blog-mask-img-2-height: 400px;
  }
}

@media (max-width: 880px) {
  :root {
    --gridContainerPadding: 40px;
    --gridSideSpacing: 16px;
    --containerVerticalSpacing: 16px;
    --cardSpacing: 16px;
    --expandableSectionSpacing: 32px;
  }
  .custom-vidyard-wrapper { width: 100%; }
  .wp-element-button, .wp-block-button__link { padding: 14px 34px !important; }
}

@media (max-width: 767px) {
  :root {
    --gridContainerPadding: 32px;
    --gridSideSpacing: 12px;
    --containerVerticalSpacing: 14px;
    --cardSpacing: 14px;
    --expandableSectionSpacing: 28px;
  }
  .custom-vidyard-wrapper iframe { aspect-ratio: 16 / 9; height: clamp(260px, 56vw, 400px); }
  .wp-element-button, .wp-block-button__link { padding: 14px 28px !important; }
}

/* --- Thin lines overlapping fix --- */
.e-con.outerGridContainer { margin-top: -1px; }

/* --- Rounded Divider --- */
.rounded-divider .elementor-divider-separator { display: block; height: var(--thickLineWidth); background-color: var(--e-global-color-0e01939); border-radius: 999px; border: none; width: 100%; }
.rounded-divider.land-divider .elementor-divider-separator { background: #82C40F; }
.rounded-divider.sky-dark-divider .elementor-divider-separator { background: #005298; }
.rounded-divider.sea-divider .elementor-divider-separator { background: #04CFE6; }

/* --- Push Right Button --- */
.push-right-btn .elementor-button { display: inline-flex; align-items: center; justify-content: flex-start; transition: padding 0.5s ease, background-color 0.8s ease, color 0.8s ease, transform 0.6s ease; gap: clamp(10px, 0.9vw, 12px); width: auto; max-width: fit-content; fill: var(--e-global-color-text); }
.elementor-button svg path, .elementor-button:hover svg path, .elementor-button:active svg path, .elementor-button:focus svg path, .elementor-button:visited svg path { fill: var(--button-arrow-color) !important; }
.push-right-btn .elementor-button-icon { margin-top: -3px; transition: transform 0.6s ease; margin-left: auto; }
.push-right-btn .elementor-button:hover { padding-right: clamp(44px, 4vw, 56px) !important; }
.push-right-btn:hover .elementor-button-icon { transform: translateX(clamp(14px, 2vw, 25px)); }

/* --- Flex Column Classes --- */
.flex-row-fit-fill { display: flex; width: 100%; }
.flex-row-fit-fill > .fit-column { width: fit-content; flex: 0 0 auto; max-width: 50%; }
.flex-row-fit-fill > .fill-column { flex: 1 1 auto; min-width: 0; }
@media (max-width: 1024px) { .flex-row-fit-fill { display: flex; width: 100%; } .flex-row-fit-fill > .fit-column { width: fit-content; flex: 0 0 auto; max-width: 100%; } .flex-row-fit-fill > .fill-column { flex: 1 1 auto; min-width: 0; } }

/* --- 4-6 Expanding Columns --- */
.contentExpandBorder1 { border: none; }
.contentExpandBorder2, .contentExpandBorder3, .contentExpandBorder4 { border-left: var(--thinLineWidth) solid var(--e-global-color-d7fa53c) !important; }
.innerExpandGridContainer { display: flex; width: 100%; height: 75vh; overflow: hidden; }
.contentExpandContainer { position: relative; flex: 1; transition: flex 0.7s ease !important; overflow: hidden; cursor: pointer; border-left: 1px solid rgba(255, 255, 255, 0.2); padding: clamp(24px, 2.8vw, 42px); }
.contentExpandContainer.active { flex: 4; }
.contentExpandContainer:not(.active) { flex: 1; }
.contentExpandContainer h3 { z-index: 2; position: relative; }
.contentExpandColumn, .buttonExpandColumn { position: absolute; top: 0; left: 0; width: 70%; opacity: 0; visibility: hidden; transition: opacity 0.4s ease; z-index: 1; }
.contentExpandContainer.active .contentExpandColumn, .contentExpandContainer.active .buttonExpandColumn { opacity: 1; visibility: visible; }
.contentExpandContainer > * { position: relative; z-index: 1; }
@media (max-width: 1200px) { /* tablet expanding columns overrides */ }
@media (max-width: 880px) { /* mobile landscape expanding columns overrides */ }
@media (max-width: 767px) { /* mobile portrait expanding columns overrides */ }

/* --- Vidyard --- */
.custom-vidyard-wrapper { width: 75%; margin: 0 auto; }
.custom-vidyard-wrapper iframe { border-radius: 24px; padding: 10px; border: solid 1px var(--e-global-color-secondary); background-color: transparent; height: 100%; }
.responsive-vidyard-container { padding: clamp(32px, 4vw, 48px) 0; }
.responsive-vidyard-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--cardBorderRadius); }
.responsive-vidyard-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: var(--cardBorderRadius); }

/* --- Utility classes --- */
.hxdr-hidden { display: none !important; }
.small-font { font-size: clamp(12px, 0.85vw, 13px); }
.text-light-mode { color: var(--e-global-color-b0ec2a8); }
.card-thumbnail-container { background-size: cover !important; background-position: center center !important; }
span.post-navigation__next--title { padding: 0 10px; }

/* --- Gutenberg Button Override --- */
.wp-element-button, .wp-block-button__link { background-color: var(--e-global-color-primary) !important; color: var(--e-global-color-text) !important; font-family: var(--e-global-typography-text-font-family), Sans-serif !important; font-weight: var(--e-global-typography-text-font-weight) !important; border: 1px solid var(--e-global-color-text) !important; border-radius: 100px !important; padding: clamp(14px, 1.1vw, 16px) clamp(28px, 3vw, 42px) !important; text-decoration: none !important; display: inline-block; cursor: pointer; transition: all 0.25s ease !important; line-height: 1.2 !important; }
.wp-element-button:hover, .wp-element-button:focus, .wp-block-button__link:hover, .wp-block-button__link:focus { background-color: var(--e-global-color-secondary) !important; color: var(--e-global-color-text) !important; border: 1px solid var(--e-global-color-secondary) !important; }

/* --- Testimonial Card --- */
.testimonial-card-label { font-size: clamp(0.889rem, 0.6vw + 0.7rem, 1.111rem); font-style: normal; font-weight: 400; line-height: normal; }
.testimonial-card-text { font-size: clamp(1.222rem, 1.4vw + 0.7rem, 1.778rem); font-style: normal; font-weight: 400; line-height: normal; }
.testimonial-card-author { font-size: clamp(0.889rem, 0.6vw + 0.7rem, 1.111rem); font-style: normal; font-weight: 700; line-height: normal; }
.testimonial-card-company { font-size: clamp(0.889rem, 0.6vw + 0.7rem, 1.111rem); font-style: normal; font-weight: 400; line-height: normal; }

/* --- Fluid Type Scale --- */
.elementor-kit-5 h1 { font-size: clamp(2rem, calc(1.524rem + 2.286vw), 4rem); }
.elementor-kit-5 h2 { font-size: clamp(1.667rem, calc(1.381rem + 1.371vw), 3rem); }
.elementor-kit-5 h3 { font-size: clamp(1.333rem, calc(1.143rem + 0.914vw), 2.222rem); }
.elementor-kit-5 h4 { font-size: clamp(1.111rem, calc(0.984rem + 0.610vw), 1.722rem); }
.elementor-kit-5 h5 { font-size: clamp(1rem, calc(0.921rem + 0.381vw), 1.222rem); }
.elementor-kit-5 h6 { font-size: clamp(0.889rem, calc(0.857rem + 0.152vw), 1rem); }
@media (max-width: 767px) { .elementor-kit-5 h1 { line-height: 1.2; } .elementor-kit-5 h2 { line-height: 1.25; } .elementor-kit-5 h3 { line-height: 1.3; } }

/* ---- base: GeoCloud animated line system ---- */
/* ============================================================
ANIMATED LINE SYSTEM CSS
WPCode Snippet — Type: CSS Snippet (Site Wide Header)
Name: "Animated Line System CSS"
============================================================ */

/* --- Animated Line Variables --- */
:root {
--animatedThinLineWidth: 1px;
--animatedThickLineWidth: 20px;
}

/* --- Line Section Container --- */
.hxdr-line-section {
position: relative;
overflow: hidden;
}

/* --- SVG Canvas --- */
.hxdr-line-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
}

/* Make absolute HTML widgets fill their parent inside line sections */
.hxdr-line-section > .elementor-widget-html.elementor-absolute,
.hxdr-line-section > .elementor-widget-html.elementor-absolute > .elementor-widget-container {
height: 100%;
}

/* --- Individual Line Paths --- */
.hxdr-line-path {
vector-effect: non-scaling-stroke;
fill: none;
stroke-dashoffset: var(--path-length, 1000);
stroke-dasharray: var(--path-length, 1000);
transition: stroke-dashoffset var(--line-duration, 1.8s) var(--line-easing, cubic-bezier(0.4, 0, 0.2, 1)) var(--line-delay, 0s);
}

/* Line width variants */
.hxdr-line-path--thin {
stroke-width: var(--animatedThinLineWidth);
}
.hxdr-line-path--thick {
stroke-width: var(--animatedThickLineWidth);
}

/* Drawn state — triggered when .is-drawn is added by JS */
.is-drawn .hxdr-line-path {
stroke-dashoffset: 0;
}

/* --- Sweep Reveal Animation (optional) --- */
.hxdr-sweep-reveal {
position: relative;
overflow: hidden;
}

.hxdr-sweep-reveal::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
transform: translateX(0);
}

/* White sweep (for dark section backgrounds) */
.hxdr-sweep-reveal--white::after {
background: #FFFFFF;
}

/* Dark sweep (for light section backgrounds) */
.hxdr-sweep-reveal--dark::after {
background: #00284C;
}

/* Sweep left (image on right) */
.hxdr-sweep-reveal.is-revealed::after {
animation: hxdr-sweep-out 1.6s cubic-bezier(0.7, 0, 0.2, 1) forwards;
}

@keyframes hxdr-sweep-out {
0%   { transform: translateX(0); }
100% { transform: translateX(110%); }
}

/* Sweep right variant (image on left) */
.hxdr-sweep-reveal--right.is-revealed::after {
animation-name: hxdr-sweep-out-right;
}

@keyframes hxdr-sweep-out-right {
0%   { transform: translateX(0); }
100% { transform: translateX(-110%); }
}

/* --- Height overrides for animated line sections --- */
/* When JS handles height matching, prevent parent containers from
imposing their own min-height (e.g. from height-fixer snippets) */
.e-con:has(> .hxdr-line-section) {
min-height: auto !important;
}

/* Image inside the line section fills the container height set by JS,
not the global --mask-img-2-height var from the height fixer */
.hxdr-line-section .elementor-widget-image img {
height: 100% !important;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
/* When columns stack, remove fixed heights so section wraps content */
.hxdr-line-section {
height: auto !important;
}

/* Let the outer container shrink to fit stacked content */
.outerGridContainer:has(.hxdr-line-section) {
min-height: auto !important;
}
}

@media (max-width: 767px) {
.hxdr-line-path {
--line-duration: 1s;
}
}

/* ---- components ---- */
/* Overlay on base/css/animated-line-system.css (GeoCloud, unchanged). Three changes:
   1. thick line width scales 10-24 px (24 px = the supplied Hexagon tile at 1920; GeoCloud used a fixed 20 px)
   2. the sweep-reveal colour follows the ground variable instead of the hard-coded Hexagon dark blue
   3. no transition until lines.js has measured the paths (see components/js/lines.js, "MANTIS patch") */
:root { --animatedThickLineWidth: clamp(10px, 1.25vw, 24px); }
.hxdr-sweep-reveal--dark::after { background: var(--kit-ground, #000); }
.hxdr-line-section:not(.is-ready) .hxdr-line-path { transition: none; }

/* kit-components.css: colour-neutral components for any site on the GeoCloud kit.
   Colours come only from --kit-* variables (set per site in skins/<skin>/skin.css, mapped to the GeoCloud Elementor
   global colour IDs below). Nothing here names a brand colour. */
:root { --marginLine: 24px; --sideNavWidth: 444px; --sectionPadX: 72px; }
@media (max-width: 1440px) { :root { --sectionPadX: 56px; --sideNavWidth: 340px; } }
@media (max-width: 1200px) { :root { --sideNavWidth: 280px; } }
@media (max-width: 880px)  { :root { --sectionPadX: 32px; } }
@media (max-width: 767px)  { :root { --sectionPadX: 20px; } }
/* Elementor defines its globals on body.elementor-kit-N, so the mapping lives on body, not :root. The IDs are the
   GeoCloud kit's own (design-tokens.md), which is what lets a skin swap the colourway without touching any CSS. */
body {
  --kit-ground: var(--e-global-color-primary);
  --kit-text: var(--e-global-color-text);
  --kit-accent: var(--e-global-color-0e01939);          /* Thick Line Color Main */
  --kit-accent-deep: var(--e-global-color-3e9edd3);      /* Thick Line Color Secondary */
  --kit-line: var(--e-global-color-d7fa53c);             /* Thin Line Color */
  --kit-surface: var(--e-global-color-971704b);          /* cardColor */
  --kit-surface-text: var(--e-global-color-b47d37c);     /* Card Text Color */
  --kit-surface-deep: var(--e-global-color-4f90202);     /* cardSecondaryColor */
  --kit-text-secondary: var(--e-global-color-15df7d5);   /* 4C */
  --kit-muted: var(--e-global-color-8049851);            /* 9C */
  --kit-white: #FFFFFF;
}

/* =============================================================
   2. BASE
   ============================================================= */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--kit-ground);
  color: var(--kit-text);
  font-family: var(--kit-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--kit-text); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { font-family: var(--kit-font); font-weight: 400; color: var(--kit-text); margin: 0; }
p { margin: 0; }
.elementor .elementor-widget-text-editor, .elementor .elementor-widget-text-editor p { color: var(--kit-text-secondary); font-family: var(--kit-font); font-size: 16px; }
.kit-hero .elementor-widget-text-editor p, .kit-quote .elementor-widget-text-editor p { color: var(--kit-text); }
.elementor-widget-heading .elementor-heading-title, .elementor .elementor-widget-heading .elementor-heading-title { font-weight: 400 !important; color: var(--kit-text) !important; font-family: var(--kit-font); }
.site-main, .elementor { background: transparent; }
.e-con { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; --gap: 0px; --row-gap: 0px; --column-gap: 0px; }
.kit-padx { padding: 48px 48px 48px var(--sectionPadX); }
.kit-gap16 { --gap: 16px; --row-gap: 16px; --column-gap: 16px; }
.kit-gap24 { --gap: 24px; --row-gap: 24px; --column-gap: 24px; }
.page-header, .entry-title { display: none; }

/* =============================================================
   3. LINE SYSTEM
   Thin = precision (Cool Grey 4 C, always grey). Thick = humanity (Red / Carmine, rounded ends).
   ============================================================= */
.e-con.outerGridContainer { margin-top: -1px; }           /* GeoCloud overlap fix, kept */
.kit-section { position: relative; border-bottom: var(--thinLineWidth) solid var(--kit-line); }
.kit-section::before {                                      /* visible vertical margin line */
  content: ""; position: absolute; left: var(--marginLine); top: 0; bottom: 0;
  width: var(--thinLineWidth); background: var(--kit-line); pointer-events: none; z-index: 1;
}
.kit-main .kit-section::before { display: none; }
.rounded-divider .elementor-divider-separator {             /* GeoCloud rounded divider, recoloured */
  display: block; height: var(--thickLineWidth); background: var(--kit-accent); border-radius: 999px; border: none; width: 100%;
}
.rounded-divider.carmine-divider .elementor-divider-separator { background: var(--kit-accent-deep); }

/* =============================================================
   4. BUTTONS (GeoCloud pill, push-right arrow)
   ============================================================= */
.kit-btn .elementor-button, .kit-btn a.elementor-button {
  display: inline-flex; align-items: center; gap: 24px;
  background: var(--kit-accent); color: var(--kit-on-accent);
  font-family: var(--kit-font); font-weight: 700; font-size: 14px; line-height: 1;
  padding: 14px 24px; border-radius: 100px; border: 1px solid var(--kit-accent);
  transition: padding .5s ease, background-color .4s ease, color .4s ease;
}
.kit-btn .elementor-button::after, .kit-link-arrow::after {
  content: ""; width: 18px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'><path d='M0 8H17M10 1L17 8L10 15' fill='none' stroke='black' stroke-width='1.5'/></svg>") no-repeat center/contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'><path d='M0 8H17M10 1L17 8L10 15' fill='none' stroke='black' stroke-width='1.5'/></svg>") no-repeat center/contain;
  display: inline-block; transition: transform .5s ease;
}
.kit-btn .elementor-button:hover { background: var(--kit-accent-deep); border-color: var(--kit-accent-deep); color: var(--kit-white); text-decoration: none; padding-right: 32px; }
.kit-btn .elementor-button:hover::after { transform: translateX(6px); }
.kit-btn .elementor-button-icon { display: none; }
.kit-btn--noarrow .elementor-button::after { display: none; }
.kit-btn--outline .elementor-button { background: transparent; color: var(--kit-text); border-color: var(--kit-accent); }
.kit-btn--outline .elementor-button:hover { background: var(--kit-accent); color: var(--kit-on-accent); }
.kit-btn--carmine .elementor-button { background: var(--kit-accent-deep); border-color: var(--kit-accent-deep); color: var(--kit-white); }
.kit-btn--carmine .elementor-button:hover { background: var(--kit-accent); color: var(--kit-on-accent); }
.kit-btn--white .elementor-button { background: var(--kit-white); border-color: var(--kit-white); color: var(--kit-on-accent); }
.kit-link-arrow { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; }

/* =============================================================
   5. HEADER / FOOTER (theme templates)
   ============================================================= */
.kit-header { display: flex; align-items: center; gap: 48px; height: 80px; padding: 0 var(--gridSideSpacing); border-bottom: var(--thinLineWidth) solid var(--kit-line); background: var(--kit-ground); position: relative; z-index: 20; }
.kit-logo-fpo { display: inline-flex; padding: 8px 16px; border: 1px dashed var(--kit-line); color: var(--kit-muted); font-size: 12px; white-space: nowrap; }
.kit-nav { display: flex; gap: 48px; list-style: none; margin: 0; padding: 0; }
.kit-nav a { color: var(--kit-text-secondary); font-size: 16px; padding: 6px 0 8px; border-bottom: 2px solid transparent; text-decoration: none; }
.kit-nav a:hover { color: var(--kit-text); border-bottom-color: var(--kit-line); }
.kit-nav .current-menu-item a, .kit-nav .current_page_item a { color: var(--kit-text); border-bottom-color: var(--kit-accent); }
.kit-header__spacer { flex: 1; }
.kit-pill { display: inline-flex; align-items: center; padding: 14px 24px; border-radius: 100px; font-weight: 700; font-size: 14px; line-height: 1; text-decoration: none !important; }
.kit-pill--red { background: var(--kit-accent); color: var(--kit-on-accent); border: 1px solid var(--kit-accent); }
.kit-pill--red:hover { background: var(--kit-accent-deep); color: #fff; border-color: var(--kit-accent-deep); }
.kit-pill--outline { color: var(--kit-text); border: 1px solid var(--kit-accent); }
.kit-footer { border-top: var(--thinLineWidth) solid var(--kit-line); padding: 64px var(--gridSideSpacing) 32px; display: flex; flex-direction: column; gap: 48px; background: var(--kit-ground); }
.kit-footer__top { display: flex; align-items: center; justify-content: space-between; }
.kit-social { display: flex; gap: 16px; }
.kit-social span { width: 32px; height: 32px; border: 1px solid var(--kit-text-secondary); border-radius: 50%; display: block; }
.kit-footer__links { display: flex; gap: 32px; font-size: 14px; }
.kit-footer__legal { border-top: var(--thinLineWidth) solid var(--kit-line); padding-top: 24px; color: var(--kit-muted); font-size: 12px; }
@media (max-width: 880px) { .kit-header { gap: 20px; } .kit-nav { gap: 20px; } .kit-header .kit-pill--outline { display: none; } }
@media (max-width: 600px) { .kit-nav { display: none; } }

/* =============================================================
   6. HERO (hero line artwork on the right)
   ============================================================= */
.kit-hero { position: relative; min-height: 700px; overflow: hidden; }
.kit-hero .kit-hero__copy { position: relative; z-index: 2; padding: 0 var(--sectionPadX); max-width: 1000px; }
.kit-hero h1 .elementor-heading-title, .kit-hero h1 { font-size: clamp(2.25rem, 3.3vw, 4rem); }
.kit-hero .elementor-widget-text-editor { max-width: 760px; }

/* =============================================================
   7. PLACEHOLDER IMAGES, COLOUR BLOCK, IMAGE SHAPES
   ============================================================= */
.kit-ph { position: relative; background: var(--kit-surface); border-radius: var(--cardBorderRadius); min-height: 200px; width: 100%; }
.kit-block { background: var(--kit-accent-deep); border-radius: 8px; min-height: 360px; width: 100%; }
.kit-shape-a, .kit-shape-b, .kit-shape-c { background: var(--kit-surface); width: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.kit-shape-a { aspect-ratio: 305 / 468; max-width: 213px; -webkit-mask-image: url("tiles/shape-a.svg"); mask-image: url("tiles/shape-a.svg"); }
.kit-shape-b { aspect-ratio: 582 / 720; max-width: 320px; -webkit-mask-image: url("tiles/shape-b.svg"); mask-image: url("tiles/shape-b.svg"); }
.kit-shape-c { aspect-ratio: 620 / 701; -webkit-mask-image: url("tiles/shape-c.svg"); mask-image: url("tiles/shape-c.svg"); }
.kit-video { position: relative; height: 0; padding-bottom: 56.25%; background: var(--kit-surface); border-radius: var(--cardBorderRadius); width: 100%; display: block; }
.kit-video::after { content: ""; position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--kit-accent); }
.kit-video::before { content: ""; position: absolute; z-index: 1; top: 50%; left: 50%; width: 0; height: 0; margin: -12px 0 0 -8px; border-left: 20px solid var(--kit-on-accent); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }

/* =============================================================
   8. SECTION LAYOUTS
   ============================================================= */
.kit-explain { align-items: center; gap: 64px; padding: 48px 48px 48px var(--sectionPadX); }
.kit-explain > .e-con { flex: 1 1 0; min-width: 0; }
.kit-bar { padding: 20px 24px; border-bottom: var(--thinLineWidth) solid var(--kit-line); }
.kit-pad { padding: 24px; }
.kit-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.kit-grid3 > .e-con { border-right: var(--thinLineWidth) solid var(--kit-line); border-bottom: var(--thinLineWidth) solid var(--kit-line); padding: 16px 16px 20px; gap: 16px; }
.kit-grid3 > .e-con:nth-child(3n) { border-right: none; }
.kit-grid3 > .e-con:nth-last-child(-n+3) { border-bottom: none; }
.kit-usp > .e-con { padding: 24px 24px 32px; gap: 16px; }
.kit-usp > .e-con:not(:last-child) { border-right: var(--thinLineWidth) solid var(--kit-line); }
.kit-gallery { display: grid; grid-template-columns: 1fr 188px; border-top: var(--thinLineWidth) solid var(--kit-line); }
.kit-gallery__main { padding: 24px; gap: 12px; border-right: var(--thinLineWidth) solid var(--kit-line); }
.kit-gallery__thumbs { padding: 24px; gap: 12px; align-items: center; }
.kit-thumb { width: 140px; height: 84px; background: var(--kit-surface); border-radius: var(--cardBorderRadius); }
.kit-thumb--on { background: var(--kit-muted); }
.kit-two { padding: 24px; gap: 64px; align-items: flex-start; }
.kit-intro-card { background: var(--kit-surface); border-radius: var(--cardBorderRadius); padding: 20px; gap: 10px; }
.kit-stats { display: flex; justify-content: center; gap: 48px; padding: 24px 24px 48px; }
.kit-stats .elementor-counter { text-align: center; }
.kit-stats .elementor-counter-number-wrapper { font-family: var(--kit-font); font-size: clamp(2.5rem, 4vw, 4rem); line-height: 1; color: var(--kit-text); justify-content: center; }
.kit-stats .elementor-counter-title { color: var(--kit-text); font-size: 16px; margin-top: 8px; }
.kit-quote .elementor-heading-title { font-size: clamp(1.667rem, calc(1.381rem + 1.371vw), 3rem); }
.kit-card { border: var(--thinLineWidth) solid var(--kit-line); border-radius: var(--cardBorderRadius); overflow: hidden; gap: 0; }
.kit-card > .kit-ph { border-radius: 0; min-height: 280px; }
.kit-card__body { padding: 24px; gap: 16px; }
.kit-card--event { background: var(--kit-surface-deep); }
.kit-card--event > .kit-ph { min-height: 200px; }
.kit-tag { display: inline-block; background: var(--kit-accent); color: var(--kit-on-accent); font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 6px; width: fit-content; }
.kit-eyebrow, .kit-eyebrow p { color: var(--kit-text-secondary); font-size: 12px; }
.kit-feature { background: var(--kit-surface); padding: 32px 24px 64px; gap: 12px; }
.kit-links { border-top: var(--thinLineWidth) solid var(--kit-line); border-bottom: var(--thinLineWidth) solid var(--kit-line); padding: 20px 0; gap: 16px; width: min(700px, 100%); margin-left: auto; }
.kit-partners { padding: 40px 48px 48px var(--sectionPadX); gap: 32px; }
.kit-logos { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.kit-logo-box { width: 180px; height: 72px; border: 1px dashed var(--kit-line); color: var(--kit-muted); font-size: 12px; display: flex; align-items: center; justify-content: center; }

/* side nav + content */
.kit-main { display: flex; flex-direction: row; align-items: stretch; }
.kit-sidenav { flex: 0 0 var(--sideNavWidth); width: var(--sideNavWidth); border-right: var(--thinLineWidth) solid var(--kit-line); }
.kit-sidenav__inner { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 24px 0; box-sizing: border-box; }
.kit-sidenav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kit-sidenav li a { position: relative; display: block; padding: 10px 16px 10px 24px; font-size: 14px; color: var(--kit-text-secondary); text-decoration: none; }
.kit-sidenav li a:hover { color: var(--kit-text); }
.kit-sidenav li a.is-active { color: var(--kit-text); }
.kit-sidenav li a.is-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--kit-accent); }
.kit-sidenav__cta { margin-top: auto; padding-left: 24px; }
.kit-content { flex: 1 1 0; min-width: 0; }
@media (max-width: 1024px) { .kit-main { flex-direction: column; } .kit-sidenav { flex-basis: auto; width: 100%; border-right: none; border-bottom: var(--thinLineWidth) solid var(--kit-line); } .kit-sidenav__inner { position: static; height: auto; padding: 12px 0; } .kit-sidenav ul { flex-direction: row; flex-wrap: wrap; } .kit-sidenav__cta { display: none; } }

/* accordion (native details) */
.kit-acc { display: block; }
.kit-acc details { border-top: var(--thinLineWidth) solid var(--kit-line); }
.kit-acc details:last-child { border-bottom: var(--thinLineWidth) solid var(--kit-line); }
.kit-acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 14px 8px; font-size: 14px; color: var(--kit-text); }
.kit-acc summary::-webkit-details-marker { display: none; }
.kit-acc summary::after { content: ""; width: 14px; height: 14px; flex: 0 0 14px; background: linear-gradient(currentColor, currentColor) center/100% 1.2px no-repeat, linear-gradient(currentColor, currentColor) center/1.2px 100% no-repeat; }
.kit-acc details[open] summary::after { background: linear-gradient(currentColor, currentColor) center/100% 1.2px no-repeat; }
.kit-acc .kit-acc__body { padding: 0 8px 16px; color: var(--kit-text-secondary); font-size: 13px; }
.kit-acc .kit-acc__body strong { display: block; color: var(--kit-text); font-weight: 400; font-size: 14px; margin-bottom: 4px; }
.kit-acc--cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 880px) { .kit-acc--cols { grid-template-columns: 1fr; } }

/* download / resource links */
.kit-dl { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.kit-dl svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.2; }

/* =============================================================
   9. GET IN TOUCH (form + line artwork). HubSpot embed replaces the placeholder form.
   ============================================================= */
.kit-touch { position: relative; overflow: hidden; min-height: 1105px; }
.kit-touch > .e-con { position: relative; z-index: 2; }
.kit-touch__heading { padding: 64px var(--sectionPadX) 48px; }
.kit-touch__cols { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 420px); gap: 96px; padding: 0 var(--sectionPadX) 96px 464px; }
@media (max-width: 1440px) { .kit-touch__cols { padding-left: var(--sectionPadX); } }
@media (max-width: 880px) { .kit-touch__cols { grid-template-columns: 1fr; gap: 32px; } }
.kit-touch__intro { border-left: var(--thinLineWidth) solid var(--kit-line); padding-left: 24px; font-size: 14px; display: flex; flex-direction: column; gap: 16px; }
.kit-form { display: flex; flex-direction: column; gap: 24px; }
.kit-form__chip { align-self: flex-start; background: var(--kit-accent-deep); color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 4px; }
.kit-field { display: flex; flex-direction: column; gap: 8px; }
.kit-field label { font-size: 12px; color: var(--kit-text-secondary); }
.kit-field label i { color: var(--kit-accent); font-style: normal; margin-left: 4px; }
.kit-field input, .kit-field select, .kit-field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--kit-line); border-radius: 0; color: var(--kit-text); font: inherit; font-size: 14px; padding: 8px; outline: none; }
.kit-field input::placeholder, .kit-field textarea::placeholder { color: var(--kit-text-secondary); }
.kit-field input:focus, .kit-field select:focus, .kit-field textarea:focus { border-bottom: 2px solid var(--kit-text); }
.kit-field select { color: var(--kit-text-secondary); }
.kit-field select option { background: var(--kit-ground); color: var(--kit-text); }
.kit-field textarea { min-height: 96px; resize: vertical; }
.kit-captcha { width: 304px; height: 78px; border: 1px dashed var(--kit-line); border-radius: var(--cardBorderRadius); display: flex; align-items: center; padding-left: 16px; color: var(--kit-muted); font-size: 12px; }
.kit-form button { align-self: flex-start; cursor: pointer; display: inline-flex; align-items: center; gap: 24px; background: var(--kit-accent); color: var(--kit-on-accent); border: 1px solid var(--kit-accent); border-radius: 100px; padding: 14px 24px; font: 700 14px/1 var(--kit-font); }
.kit-form button:hover { background: var(--kit-accent-deep); border-color: var(--kit-accent-deep); color: #fff; }

/* Shots page */
.kit-shot { padding: 32px 24px 0; gap: 16px; border-bottom: var(--thinLineWidth) solid var(--kit-line); }
.kit-shot__specs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--thinLineWidth) solid var(--kit-line); margin: 0 -24px; }
.kit-shot__specs > .e-con { padding: 20px 20px 24px; gap: 8px; }
.kit-shot__specs > .e-con:not(:last-child) { border-right: var(--thinLineWidth) solid var(--kit-line); }
@media (max-width: 767px) { .kit-shot__specs { grid-template-columns: 1fr; } .kit-grid3 { grid-template-columns: 1fr; } .kit-grid3 > .e-con { border-right: none; } .kit-explain { flex-direction: column; padding-left: 20px; padding-right: 20px; } .kit-gallery { grid-template-columns: 1fr; } }
@media (max-width: 1024px) { .kit-explain { flex-direction: column; align-items: stretch; } .kit-usp { flex-direction: column; } .kit-usp > .e-con { border-right: none !important; border-bottom: var(--thinLineWidth) solid var(--kit-line); } .kit-two { flex-direction: column; } }

.kit-ph .kit-tag { position: absolute; left: 16px; bottom: 16px; }

/* ---- fixes after first render ---- */
.kit-hero { display: flex; flex-direction: column; justify-content: center; }
.kit-hero .kit-hero__copy { padding-top: 96px; padding-bottom: 96px; }
.kit-stats .elementor-counter-number-wrapper, .kit-stats .elementor-counter-number-wrapper * { color: var(--kit-text) !important; }
.kit-stats .elementor-counter-title { color: var(--kit-text) !important; }
.kit-footer a, .kit-footer a:visited { color: var(--kit-text); }
.kit-two > .elementor-widget-html { flex: 0 0 320px; max-width: 320px; }
.kit-two > .e-con { flex: 1 1 0; min-width: 0; }
@media (max-width: 1024px) { .kit-two > .elementor-widget-html { flex-basis: auto; } }
.kit-sidenav li a, .kit-sidenav li a:visited { color: var(--kit-text-secondary); }
.kit-sidenav li a.is-active { color: var(--kit-text); }
.kit-card .kit-eyebrow, .kit-feature .kit-eyebrow { color: var(--kit-text-secondary); }
.kit-link-arrow, .kit-link-arrow:visited { color: var(--kit-text); }

/* ---- mobile + lazy-load fixes ---- */
.e-con > .elementor-widget { flex-shrink: 0; }
.elementor-widget-html { height: auto !important; }
.kit-pill { white-space: nowrap; }
@media (max-width: 1024px) {
  .kit-explain { flex-direction: column !important; --flex-direction: column; padding: 32px var(--sectionPadX); gap: 24px; }
  .kit-explain > .e-con { flex: 0 0 auto; width: 100%; }
  .kit-padx { padding: 32px var(--sectionPadX); }
  .kit-two, .kit-usp { flex-direction: column !important; --flex-direction: column; }
  .kit-two > .elementor-widget-html { max-width: 240px; }
}
@media (max-width: 767px) {
  .kit-header { padding: 0 16px; gap: 12px; }
  .kit-logo-fpo { font-size: 10px; padding: 6px 10px; }
  .kit-pill { padding: 12px 18px; }
  .kit-hero .kit-hero__copy { padding-top: 64px; padding-bottom: 64px; }
  .kit-stats { flex-direction: column; align-items: center; }
  .kit-links { margin-left: 0; }
  .kit-logos { justify-content: center; }
}

/* video placeholder: the widget itself carries the 16:9 box (a collapsed height on mobile otherwise) */
.elementor-widget-html:has(> .kit-video) { position: relative; aspect-ratio: 16 / 9; width: 100%; height: auto !important; }
.elementor-widget-html > .kit-video { position: absolute; inset: 0; height: 100%; padding: 0; }

/* ---- animated line sections (GeoCloud system, MANTIS geometry) ---- */
.kit-hero { flex-direction: row; align-items: stretch; }
.kit-hero .kit-hero__copy { flex: 1 1 52%; min-height: 700px; justify-content: center; position: relative; z-index: 2; }
.kit-hero .kit-hero__art { flex: 0 0 48%; min-height: 700px; position: relative; overflow: hidden; }
.kit-hero--short .kit-hero__copy, .kit-hero--short .kit-hero__art { min-height: 560px; }
.hxdr-line-section > .elementor-widget-html { position: absolute; inset: 0; width: 100%; height: 100% !important; margin: 0; }
.hxdr-line-section > .elementor-widget-html .hxdr-line-svg { position: absolute; inset: 0; }
.kit-touch > .kit-touch__art { position: absolute; left: var(--marginLine); bottom: 0; top: 0; right: 0; z-index: 0; pointer-events: none; }
.hxdr-line-path--line  { stroke: var(--kit-line); }
.hxdr-line-path--accent   { stroke: var(--kit-accent); }
.hxdr-line-path--accent-deep { stroke: var(--kit-accent-deep); }
.hxdr-line-path { stroke-linecap: round; stroke-linejoin: round; }
.hxdr-line-svg .kit-mask { fill: var(--kit-line); }  /* image-mask placeholder; swap for the photo */
@media (max-width: 1024px) {
  .kit-hero { flex-direction: column; }
  .kit-hero .kit-hero__copy { min-height: 0; flex-basis: auto; padding-top: 64px; padding-bottom: 48px; }
  .kit-hero .kit-hero__art { flex-basis: auto; min-height: 340px; width: 100%; }
}

/* text that sits on a raised surface follows the surface text colour (white on a dark grey tile, dark on a white card) */
.kit-intro-card .elementor-heading-title, .kit-intro-card .elementor-widget-text-editor p,
.kit-feature .elementor-heading-title, .kit-feature .elementor-widget-text-editor p { color: var(--kit-surface-text) !important; }

/* kit-v1.css: page-level patterns from the MANTIS v1 wireframes (story pages, one hairline per section).
   Colour-neutral like kit-components.css: only --kit-* variables. Rules behind these: UX-PRINCIPLES.md (1, 2, 5, 6). */

/* ---- side nav: text sits 32px right of the margin line, the active tick sits with its label, no CTA in the nav ---- */
.kit-sidenav li a { padding: 10px 16px 10px calc(var(--marginLine) + 32px); }
.kit-sidenav li a.is-active::before { left: calc(var(--marginLine) + 16px); }
.kit-sidenav__cta { display: none; }
.kit-main { position: relative; }
.kit-main::before { content: ""; position: absolute; left: var(--marginLine); top: 0; bottom: 0; width: var(--thinLineWidth); background: var(--kit-line); pointer-events: none; z-index: 1; }
@media (max-width: 1024px) {
  .kit-main::before { display: none; }
  .kit-sidenav li a { padding: 10px 16px; }
  .kit-sidenav li a.is-active::before { left: 0; }
}

/* ---- section: space separates, one hairline closes it ---- */
.kit-sec { display: flex; flex-direction: column; gap: 56px; padding: 96px 48px; border-bottom: var(--thinLineWidth) solid var(--kit-line); }
.kit-content > .kit-sec:last-child { border-bottom: none; }
.kit-sec--wide { padding-left: var(--sectionPadX); padding-right: var(--sectionPadX); }
.kit-head { gap: 16px; max-width: 720px; }
.kit-head .elementor-heading-title { font-size: clamp(2rem, 2.5vw, 3rem); line-height: 1.15; }
.kit-kicker, .kit-kicker p, .elementor .kit-kicker.elementor-widget-text-editor p { color: var(--kit-accent) !important; font-size: 12px !important; letter-spacing: .02em; }
.kit-muted, .kit-muted p, .elementor .kit-muted.elementor-widget-text-editor p { color: var(--kit-muted) !important; font-size: 12px !important; }

/* ---- split: copy on one side, image on the other ---- */
.kit-split { display: flex; flex-direction: row; gap: 96px; align-items: center; }
.kit-split > .e-con, .kit-split > .elementor-widget { flex: 1 1 0; min-width: 0; }
.kit-split .kit-copy { gap: 16px; }
.kit-image { background: var(--kit-surface); width: 100%; min-height: 440px; }
.kit-image--square { aspect-ratio: 1 / 1; min-height: 0; }
.kit-sec .kit-split { align-items: flex-start; }

/* ---- pillars: equal square images, number, title, one line ---- */
.kit-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.kit-pillar { gap: 16px; }
.kit-pillar .kit-image { min-height: 0; aspect-ratio: 1 / 1; }

/* ---- tabs (Hardware / Software) ---- */
.kit-tabs__row { display: flex; gap: 40px; margin-bottom: 40px; }
.kit-tabs__row button { all: unset; cursor: pointer; font: 400 22px/1.3 var(--kit-font); color: var(--kit-muted); padding-bottom: 12px; border-bottom: 3px solid var(--kit-line); }
.kit-tabs__row button.is-on { color: var(--kit-text); border-bottom-color: var(--kit-accent); }
.kit-tabs__panel { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.kit-tabs__panel[hidden] { display: none; }
.kit-tabs__panel .kit-image { min-height: 0; aspect-ratio: 16 / 9; }
.kit-tabs__list { display: flex; flex-direction: column; gap: 24px; }
.kit-tabs__list h6 { font-size: 18px; margin-bottom: 4px; }
.kit-tabs__list p { color: var(--kit-text-secondary); }

/* ---- tiles: applications and the shot index (image, title, link) ---- */
.kit-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.kit-tile { display: flex; flex-direction: column; gap: 16px; text-decoration: none !important; color: var(--kit-text); }
.kit-tile .kit-image { min-height: 0; aspect-ratio: 16 / 9; }
.kit-tile__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.kit-tile__row b { font-weight: 400; font-size: 22px; line-height: 1.3; }
.kit-tile__row i { font-style: normal; font-size: 14px; color: var(--kit-text-secondary); white-space: nowrap; }
.kit-tile__no { color: var(--kit-muted); font-size: 12px; margin-right: 12px; }

/* ---- stats, quote, logos ---- */
.kit-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.kit-stat__v { font-size: clamp(2.5rem, 4vw, 4rem); line-height: 1; color: var(--kit-text); }
.kit-stat__l { margin-top: 8px; color: var(--kit-text-secondary); }
.kit-quote-card { background: var(--kit-surface); border-radius: var(--cardBorderRadius); padding: 48px; display: flex; flex-direction: column; gap: 24px; min-height: 360px; color: var(--kit-surface-text); }
.kit-quote-card .q-mark { color: var(--kit-accent); font-size: 48px; line-height: 1; }
.kit-quote-card .q-text { font-size: clamp(1.4rem, 2vw, 2rem); line-height: 1.3; flex: 1; }
.kit-quote-card .q-by { font-weight: 700; font-size: 14px; }
.kit-quote-card .q-co { font-size: 12px; opacity: .7; }
.kit-logos--six { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.kit-logos--six .kit-logo-box { width: auto; border-style: solid; height: 64px; }

/* ---- collapsed reference: video + grouped accordions + download rows ---- */
.kit-ref { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 64px; align-items: start; }
.kit-ref__lists { display: flex; flex-direction: column; gap: 48px; }
.kit-ref__lists h5 { font-size: 22px; margin-bottom: 8px; }
.kit-dl-row { display: flex; justify-content: space-between; padding: 14px 8px; font-size: 14px; border-top: var(--thinLineWidth) solid var(--kit-line); color: var(--kit-text); }
.kit-dl-row:last-child { border-bottom: var(--thinLineWidth) solid var(--kit-line); }
.kit-dl-row span { color: var(--kit-text-secondary); }
.kit-caption { margin-top: 12px; font-size: 14px; color: var(--kit-text-secondary); }

/* ---- a shot: video and facts side by side ---- */
.kit-shotv1 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.kit-facts { display: flex; flex-direction: column; gap: 32px; }
.kit-facts dl { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.kit-facts dt { color: var(--kit-muted); font-size: 12px; }
.kit-facts dd { margin: 0; }
.kit-facts__specs { display: flex; flex-direction: column; gap: 14px; font-size: 14px; }
.kit-facts__specs div { display: flex; gap: 24px; }
.kit-facts__specs span { width: 120px; flex: 0 0 120px; color: var(--kit-muted); }
.kit-facts__next { font-weight: 700; font-size: 14px; }

@media (max-width: 1024px) {
  .kit-split { flex-direction: column !important; --flex-direction: column; gap: 32px; align-items: stretch !important; }
  .kit-split > .e-con, .kit-split > .elementor-widget { flex: 0 0 auto; width: 100%; }
  .kit-pillars, .kit-tiles, .kit-stats-row { grid-template-columns: 1fr; gap: 32px; }
  .kit-tabs__panel, .kit-ref, .kit-shotv1 { grid-template-columns: 1fr; gap: 32px; }
  .kit-sec { padding: 64px var(--sectionPadX); gap: 40px; }
  .kit-logos--six { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) { .kit-sec { padding: 48px 20px; } .kit-tile__row { flex-direction: column; gap: 4px; } }

.kit-image { display: flex; align-items: center; justify-content: center; }
.kit-image-label { color: var(--kit-muted); font-size: 12px; }

.kit-tile__row b { font-weight: 400 !important; }
.kit-quote-card .q-by { color: var(--kit-surface-text); }

/* column-flex items measure their height at max-content width unless the width is definite (aspect-ratio children overflowed on phones) */
.kit-sec > .elementor-widget, .kit-sec > .e-con { width: 100%; }

/* kit-v3.css: page patterns for the MANTIS v3.3 design (six pages, five breakpoints).
   Colour-neutral: only --kit-* variables. Spacing comes from the GeoCloud kit variables (kit-custom-css.css):
   --gridSideSpacing (x of the left margin line), --gridContainerPadding, --expandableSectionSpacing, --cardSpacing.
   Above 1440 the design uses the 1920 frame values (line x=24, 47/72 side padding, 96/48 vertical).
   Breakpoints follow the kit: 1440, 1200, 1024, 880, 767. Prefix k3-. */

/* ============================================================ tokens */
:root {
  --k3-arrow: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 18 16%22 fill=%22none%22%3E%3Cpath d=%22M0 8H17M10 15L17 8L10 1%22 stroke=%22black%22 stroke-width=%221.5%22/%3E%3C/svg%3E");
  --k3-chev: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 12 8%22 fill=%22none%22%3E%3Cpath d=%22M1 1.5L6 6.5L11 1.5%22 stroke=%22black%22 stroke-width=%221.2%22/%3E%3C/svg%3E");
  --k3-play: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 24%22%3E%3Cpath d=%22M0 0L20 12L0 24V0Z%22 fill=%22black%22/%3E%3C/svg%3E");
  --k3-line: 24px;
  --k3-padL: 47px; --k3-padR: 72px; --k3-padY: 96px; --k3-gap: 48px; --k3-card: 24px;
  --k3-cpad: 72px; --k3-nav: 260px;
  --k3-hero: 700px; --k3-hdr: 80px; --k3-hdr-pad: 36px; --k3-tx: 72px;
  --k3-r: 8px; --k3-split: 72px;
  --k3-art-h: var(--k3-hero);
  --k3-media-h: 640px;
}
@media (max-width: 1440px) {
  :root {
    --k3-line: var(--gridSideSpacing);
    --k3-padL: var(--gridContainerPadding); --k3-padR: var(--gridContainerPadding); --k3-padY: var(--gridContainerPadding);
    --k3-gap: var(--expandableSectionSpacing); --k3-card: var(--cardSpacing); --k3-cpad: var(--gridContainerPadding);
    --k3-nav: 240px; --k3-hero: 620px; --k3-hdr: 73px; --k3-hdr-pad: calc(var(--gridSideSpacing) + 12px);
    --k3-tx: calc(var(--gridSideSpacing) + 1px + var(--gridContainerPadding));
    --k3-split: calc(var(--expandableSectionSpacing) + 28px);
    --k3-media-h: 550px;
  }
}
@media (max-width: 1200px) { :root { --k3-nav: 220px; --k3-hero: 520px; --k3-media-h: 512px; } }
@media (max-width: 1024px) { :root { --k3-media-h: 491px; --k3-nav: 0px; --k3-art-h: calc((100vw - var(--k3-line) - 1px) * .526); } }
@media (max-width: 880px)  { :root { --k3-media-h: 460px; --k3-hdr: 64px; --k3-hdr-pad: calc(var(--gridSideSpacing) + 5px); } }
@media (max-width: 767px)  { :root { --k3-art-h: calc((100vw - var(--k3-line) - 1px) * .526 + 20px); } }

/* ============================================================ type (kit fluid scale, same maths as the Figma frames) */
.k3-page .k3-t64 { font-size: clamp(32px, calc(24.38px + 2.286vw), 64px); line-height: 1.1; }
.k3-page .k3-t56 { font-size: clamp(28px, calc(21.33px + 2vw), 56px); line-height: 1.3; }
.k3-page .k3-t48 { font-size: clamp(26.67px, calc(22.1px + 1.371vw), 48px); line-height: 1.3; }
.k3-page .k3-t40 { font-size: clamp(22.22px, calc(18.42px + 1.143vw), 40px); line-height: 1.3; }
.k3-page .k3-t36 { font-size: clamp(21.59px, calc(18.51px + .925vw), 36px); line-height: 1.3; }
.k3-page .k3-t34 { font-size: clamp(20.39px, calc(17.49px + .874vw), 34px); line-height: 1.2; }
.k3-page .k3-t32 { font-size: clamp(19.2px, calc(16.46px + .823vw), 32px); line-height: 1.3; }
.k3-page .k3-t28 { font-size: clamp(16.79px, calc(14.4px + .72vw), 28px); line-height: 1.3; }
.k3-page .k3-t24 { font-size: clamp(15.5px, calc(13.786px + .532vw), 24px); line-height: 1.3; }
.k3-page .k3-t22 { font-size: clamp(14.2px, calc(12.650px + .487vw), 22px); line-height: 1.3; }
.k3-page .k3-t20 { font-size: clamp(12.9px, calc(11.494px + .443vw), 20px); line-height: 1.3; }
.k3-page .k3-t18 { font-size: clamp(11.62px, calc(10.320px + .4vw), 18px); line-height: 1.3; }

/* ============================================================ page, line, header, footer */
.k3-page { --k3-stroke: var(--kit-muted); position: relative; background: var(--kit-ground); color: var(--kit-text); font-family: var(--kit-font); font-size: 16px; line-height: 1.3; overflow-x: clip; }
.k3-page::before { content: ""; position: absolute; left: var(--k3-line); top: 0; bottom: 0; width: 1px; background: var(--kit-line); z-index: 6; pointer-events: none; }
.k3-page h1, .k3-page h2, .k3-page h3, .k3-page h4, .k3-page p, .k3-page figure { margin: 0; font-weight: 400; }
.k3-page a { color: inherit; text-decoration: none; }
.k3-page a:hover { text-decoration: none; }
.k3-page img { display: block; max-width: 100%; }
.k3-page .elementor-widget-html, .k3-page .elementor-widget-container, .k3-page .e-con { margin: 0; padding: 0; }
.k3-page .elementor-widget-html { width: 100%; }
.k3-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.k3-header { position: relative; z-index: 30; display: flex; align-items: center; height: var(--k3-hdr); padding: 0 var(--k3-hdr-pad); gap: 48px; background: var(--kit-ground); box-sizing: border-box; }
.k3-header::after { content: ""; position: absolute; left: calc(var(--k3-line) + 1px); right: 0; bottom: 0; height: .5px; background: var(--kit-line); pointer-events: none; }
.k3-header__logo { display: block; padding: 8px 16px; flex: 0 0 auto; order: 0; }
.k3-header__logo img { width: 79px; height: 56px; }
.k3-nav-wrap { order: 1; }
.k3-header__spacer { flex: 1 1 auto; order: 2; }
.k3-header__cta { order: 3; }
.k3-nav { display: flex; gap: 48px; margin: 0; padding: 0; list-style: none; }
.k3-nav li { margin: 0; }
.k3-nav a { display: block; padding-top: 6px; font-size: 16px; line-height: 1.5; color: var(--kit-text); border-bottom: 2px solid transparent; }
.k3-nav a:hover { border-bottom-color: var(--kit-line); }
.k3-header::before { content: ""; position: absolute; left: var(--k3-line); top: 0; bottom: 0; width: 1px; background: var(--kit-line); pointer-events: none; }
.k3-burger { display: none; width: 40px; height: 40px; padding: 8px; border: 0; background: none; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; box-sizing: border-box; order: 4; }
.k3-burger i { display: block; width: 24px; height: 2px; background: #fff; transition: transform .25s; }
.k3-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.k3-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.k3-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.k3-drawer { display: none; }

/* buttons */
.k3-btn { display: inline-flex; align-items: center; gap: 24px; padding: 14px 24px; border-radius: 100px; background: var(--kit-accent); color: var(--kit-on-accent) !important; border: 0; font: 700 14px/1 var(--kit-font); cursor: pointer; transition: padding .5s ease, background-color .4s ease, color .4s ease; white-space: nowrap; text-decoration: none; }
.k3-btn::after { content: ""; width: 18px; height: 16px; flex: 0 0 18px; background: currentColor; -webkit-mask: var(--k3-arrow) no-repeat center/contain; mask: var(--k3-arrow) no-repeat center/contain; transition: transform .5s ease; }
.k3-btn:hover { background: var(--kit-accent-deep); color: #fff !important; padding-right: 32px; }
.k3-btn:hover::after { transform: translateX(6px); }
.k3-header .k3-btn { border: 0; padding: 14px 24px; }
.k3-header .k3-btn::after { display: none; }
.k3-header .k3-btn:hover { padding-right: 24px; }

@media (max-width: 1024px) {
  .k3-header__spacer { order: 1; }
  .k3-nav-wrap { order: 2; }
}
@media (max-width: 880px) {
  .k3-header { gap: 0; padding-right: var(--k3-line); }
  .k3-nav-wrap, .k3-header__cta, .k3-header__spacer { display: none; }
  .k3-header__logo { padding: 4px 16px; }
  .k3-burger { display: flex; margin-left: auto; }
  .k3-drawer { position: absolute; z-index: 40; left: 0; right: 0; top: var(--k3-hdr); background: var(--kit-ground); border-bottom: 1px solid var(--kit-line); padding: 24px var(--k3-hdr-pad) 32px; flex-direction: column; gap: 16px; }
  .k3-drawer.is-open { display: flex; }
  .k3-drawer a:not(.k3-btn) { font-size: 22px; padding: 6px 0; }
  .k3-drawer .k3-btn { align-self: flex-start; margin-top: 12px; }
}

.k3-footer { position: relative; margin: 0; padding: 64px var(--k3-padR) 32px var(--k3-tx); display: flex; flex-direction: column; gap: 40px; border-top: .5px solid var(--kit-line); background: var(--kit-ground); }
.k3-footer__logo img { width: 77px; height: 49px; }
.k3-footer__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.k3-footer__links { display: flex; gap: 32px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; }
.k3-footer__social { display: flex; gap: 14px; }
.k3-footer__social a { display: block; width: 28px; height: 28px; }
.k3-footer__social img { width: 28px; height: 28px; }
.k3-footer__legal { border-top: 1px solid var(--kit-line); padding-top: 24px; color: var(--kit-text-secondary); font-size: 12px; line-height: 1.3; }
@media (min-width: 1441px) { .k3-footer { padding-top: 64px; } .k3-footer__social { gap: 16px; } .k3-footer__social a, .k3-footer__social img { width: 32px; height: 32px; } }
@media (max-width: 880px) { .k3-footer { padding-top: 40px; } }
@media (max-width: 767px) { .k3-footer { gap: 28px; } .k3-footer__row { flex-direction: column; align-items: flex-start; gap: 24px; } .k3-footer__links { flex-wrap: wrap; gap: 8px 32px; } .k3-footer__legal { padding-top: 24px; } }

/* ============================================================ section */
.k3-sec { position: relative; margin-left: calc(var(--k3-line) + 1px); border-top: 1px solid var(--kit-line); }
.k3-sec__in { display: flex; flex-direction: column; gap: var(--k3-gap); padding: var(--k3-padY) var(--k3-padR) var(--k3-padY) var(--k3-padL); }
.k3-head { display: flex; flex-direction: column; gap: 16px; }
.k3-head p { color: var(--kit-text-secondary); font-size: 16px; line-height: 1.3; }
.k3-head h2 { color: var(--kit-text); }
.k3-grid { display: grid; gap: var(--k3-card); }
.k3-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k3-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k3-sub { color: var(--kit-text); }
@media (max-width: 767px) { .k3-grid--3, .k3-grid--2 { grid-template-columns: minmax(0, 1fr); } }

/* side-nav layout */
.k3-main { display: flex; align-items: stretch; position: relative; }
.k3-nav-col { flex: 0 0 var(--k3-nav); width: var(--k3-nav); border-right: 1px solid var(--kit-line); border-top: 1px solid var(--kit-line); }
.k3-nav-col__in { position: sticky; top: 0; padding: 24px 0; display: flex; flex-direction: column; gap: 4px; }
.k3-nav-col a { display: block; position: relative; padding: 10px 16px 10px 56px; font-size: 14px; line-height: 1.5; color: var(--kit-text-secondary); }
.k3-nav-col a:hover { color: var(--kit-text); }
.k3-nav-col a.is-active { color: var(--kit-text); }
.k3-nav-col a.is-active::before { content: ""; position: absolute; left: 40px; top: 8px; width: 3px; height: 24px; background: var(--kit-accent); }
.k3-content { flex: 1 1 0; min-width: 0; }
.k3-content > .k3-sec { margin-left: 0; }
.k3-content > .k3-sec > .k3-sec__in { padding-left: var(--k3-cpad); padding-right: var(--k3-cpad); }
@media (max-width: 1024px) {
  .k3-main { display: block; }
  .k3-nav-col { display: none; }
  .k3-content > .k3-sec { margin-left: calc(var(--k3-line) + 1px); }
}

/* ============================================================ hero */
.k3-hero { position: relative; height: var(--k3-hero); overflow: hidden; background: var(--kit-ground); }
.k3-hero::after { content: ""; position: absolute; left: calc(var(--k3-line) + 1px); right: 0; bottom: 0; height: 1px; background: var(--kit-line); z-index: 4; }
.k3-hero__artrow { display: contents; }
.k3-hero__art { position: absolute; right: 0; top: 0; height: var(--k3-art-h); width: calc(var(--k3-art-h) * 920 / 700); --animatedThickLineWidth: calc(var(--k3-art-h) * 24 / 700); }
.k3-hero__art svg { position: absolute; right: 0; top: 0; height: 100%; width: calc(100% * 944 / 920); overflow: visible; }
.k3-hero__copy { position: absolute; z-index: 3; left: var(--k3-tx); top: 50%; transform: translateY(-50%); width: calc(100% - var(--k3-hero) * 920 / 700 - var(--k3-tx) - 80px); display: flex; flex-direction: column; gap: 28px; }
.k3-hero__copy h1 { font-size: clamp(32px, calc(24.38px + 2.286vw), 64px); line-height: 1.1; color: var(--kit-text); }
.k3-hero__copy p { font-size: 16px; line-height: 1.5; color: var(--kit-text); }
.k3-hero__ctas { display: flex; gap: 16px; }
@media (min-width: 1441px) {
  .k3-hero__copy { top: 230px; transform: none; width: min(760px, calc(100% - var(--k3-hero) * 920 / 700 - var(--k3-tx) - 48px)); }
  .k3-hero__ctas { margin-top: 24px; }
  .k3-hero--event .k3-hero__copy { top: 170px; }
}
.k3-hero .hxdr-line-path--line { stroke: var(--kit-line); }
.hxdr-line-path { stroke-linecap: round; stroke-linejoin: round; }
.hxdr-line-path--accent { stroke: var(--kit-accent); }
.hxdr-line-path--accent-deep { stroke: var(--kit-accent-deep); }

/* hero stacked at 1024 and below: copy, hairline, art row, hairline */
@media (max-width: 880px) {
  .k3-hero--photo, .k3-hero--event { height: auto; padding-left: calc(var(--k3-line) + 1px); overflow: visible; }
  .k3-hero--photo::after, .k3-hero--event::after { display: none; }
  .k3-hero--photo .k3-hero__copy, .k3-hero--event .k3-hero__copy { position: static; transform: none; width: auto; padding: var(--k3-padY) var(--k3-padR); }
  .k3-hero--photo .k3-hero__ctas, .k3-hero--event .k3-hero__ctas { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 0; }
  .k3-hero--photo .k3-hero__artrow, .k3-hero--event .k3-hero__artrow { display: block; position: relative; overflow: hidden; height: var(--k3-art-h); border-top: 1px solid var(--kit-line); border-bottom: 1px solid var(--kit-line); box-sizing: content-box; }
  .k3-hero--photo .k3-hero__art, .k3-hero--event .k3-hero__art { top: 0; }
}

/* outline hero (Product): proportional to the 1920 frame, copy beside it down to 880, stacked below 768 */
.k3-hero--outline { --k3-hero: calc(100vw * 700 / 1920); height: var(--k3-hero); min-height: 0; }
.k3-hero--outline .k3-hero__outline { position: absolute; z-index: 1; left: calc(785.5 / 1920 * 100%); top: calc(var(--k3-hero) * -238 / 700); width: calc(1011 / 1920 * 100%); }
.k3-hero--outline .k3-hero__outline img { width: 100%; height: auto; }
.k3-hero--outline .k3-hero__copy { width: calc(785.5 / 1920 * 100vw - var(--k3-tx) - 72px); }
@media (min-width: 1441px) { .k3-hero--outline { --k3-hero: 700px; } .k3-hero--outline .k3-hero__outline { left: 785.5px; top: -238px; width: 1011px; } .k3-hero--outline .k3-hero__copy { width: 640px; top: 230px; } }
@media (max-width: 767px) {
  .k3-hero--outline { height: auto; padding-left: calc(var(--k3-line) + 1px); overflow: visible; }
  .k3-hero--outline::after { display: none; }
  .k3-hero--outline .k3-hero__copy { position: static; transform: none; width: auto; padding: var(--k3-padY) var(--k3-padR) calc(var(--k3-padY) / 2); }
  .k3-hero--outline .k3-hero__ctas { flex-direction: column; align-items: flex-start; gap: 14px; }
  .k3-hero--outline .k3-hero__outline { position: relative; left: 0; top: 0; width: calc(100% - 64px); margin: 24px 0 32px 32px; }
  .k3-hero--outline .k3-hero__outline-row { border-top: 1px solid var(--kit-line); border-bottom: 1px solid var(--kit-line); }
}

/* ============================================================ cards */
.k3-card { background: var(--kit-surface-deep); border: 1px solid var(--k3-stroke); border-radius: var(--k3-r); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.k3-card h3 { color: var(--kit-text); }
.k3-card p { color: var(--kit-text-secondary); font-size: 16px; line-height: 1.3; }
@media (max-width: 1440px) { .k3-card--pad { padding: 28px; } }
.k3-mcard { background: var(--kit-surface-deep); border: 1px solid var(--k3-stroke); border-radius: var(--k3-r); overflow: hidden; display: flex; flex-direction: column; }
.k3-mcard__img { position: relative; background: var(--kit-ground); border-bottom: 1px solid var(--k3-stroke); overflow: hidden; }
.k3-mcard__img img { width: 100%; height: 100%; object-fit: cover; }
.k3-mcard__img--fit img { object-fit: contain; }
.k3-mcard__body { padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 16px; }
.k3-mcard__body h3 { color: var(--kit-text); }
.k3-mcard__body p { color: var(--kit-text-secondary); font-size: 16px; line-height: 1.3; }
.k3-mcard--event .k3-mcard__body { gap: 12px; }
.k3-icard { display: flex; flex-direction: column; gap: 16px; background: var(--kit-surface-deep); border: 1px solid var(--k3-stroke); border-radius: var(--k3-r); padding: 32px; }
.k3-icard img { width: 40px; height: 40px; }
.k3-icard p { color: var(--kit-text-secondary); font-size: 16px; line-height: 1.3; }

/* ============================================================ split (steps + image), accordion */
.k3-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--k3-split); align-items: start; }
.k3-split--home { grid-template-columns: 780px 664px; }
.k3-split--prod { grid-template-columns: 644px 800px; }
@media (max-width: 1440px) { .k3-split--home, .k3-split--prod { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.k3-split__img { position: relative; height: var(--k3-media-h); border: 1px solid var(--k3-stroke); border-radius: var(--k3-r); overflow: hidden; background: var(--kit-surface-deep); }
.k3-split__img img { width: 100%; height: 100%; object-fit: cover; }
.k3-steps { display: flex; flex-direction: column; }
.k3-step { border-top: 1px solid var(--k3-stroke); padding: 22px 0; }
.k3-step:last-child { border-bottom: 1px solid var(--k3-stroke); }
.k3-step__t { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 0; width: 100%; cursor: pointer; }
.k3-step__n { flex: 0 0 38px; font-size: 14px; line-height: 1.2; color: var(--kit-text-secondary); align-self: center; }
.k3-step__h { flex: 1 1 auto; color: var(--k3-stroke); transition: color .25s; }
.k3-step__t:hover .k3-step__h { color: var(--kit-text-secondary); }
.k3-step__m { flex: 0 0 auto; font-size: 28px; line-height: 1.2; color: var(--kit-text-secondary); }
.k3-step__m::before { content: "+"; }
.k3-step.is-open .k3-step__h { color: var(--kit-text); }
.k3-step.is-open .k3-step__m { color: var(--kit-text); }
.k3-step.is-open .k3-step__m::before { content: "\2212"; }
.k3-step__d { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.k3-step__d > div { overflow: hidden; min-height: 0; color: var(--kit-text-secondary); font-size: 16px; line-height: 1.3; }
.k3-step.is-open .k3-step__d { grid-template-rows: 1fr; }
.k3-step.is-open .k3-step__d > div { padding-top: 8px; }
.k3-step__img { display: none; }
.k3-step__t:focus-visible { outline: 2px solid var(--kit-text); outline-offset: 4px; }
@media (max-width: 1440px) { .k3-step { padding: calc(var(--cardSpacing) + 2px) 0; } .k3-step__n { flex-basis: 38px; } }
@media (max-width: 767px) {
  .k3-split { grid-template-columns: minmax(0, 1fr); gap: var(--k3-card); }
  .k3-split__img { display: none; }
  .k3-step__img { display: block; height: 200px; margin-top: 14px; border: 1px solid var(--k3-stroke); border-radius: var(--k3-r); overflow: hidden; }
  .k3-step:not(.is-open) .k3-step__img { display: none; }
  .k3-step__img img { width: 100%; height: 100%; object-fit: cover; }
  .k3-step__d > div { overflow: visible; }
}

/* plus accordion rows (About uses, hotspot list) */
.k3-uses { display: flex; flex-direction: column; }
.k3-use { border-top: 1px solid var(--k3-stroke); padding: 16px 0; }
.k3-use:last-child { border-bottom: 1px solid var(--k3-stroke); }
.k3-use__t { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 14px; width: 100%; cursor: pointer; }
.k3-use__h { flex: 1 1 auto; color: var(--k3-stroke); transition: color .25s; }
.k3-use__t:hover .k3-use__h { color: var(--kit-text-secondary); }
.k3-use.is-open .k3-use__h { color: var(--kit-text); }
.k3-use__m { flex: 0 0 auto; font-size: 22px; line-height: 1.2; color: var(--kit-text-secondary); }
.k3-use__m::before { content: "+"; }
.k3-use.is-open .k3-use__m::before { content: "\2212"; }
.k3-use__d { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.k3-use__d > div { overflow: hidden; min-height: 0; color: var(--kit-text-secondary); }
.k3-use.is-open .k3-use__d { grid-template-rows: 1fr; }
.k3-use.is-open .k3-use__d > div { padding-top: 8px; }
.k3-use__t:focus-visible { outline: 2px solid var(--kit-text); outline-offset: 4px; }

/* ============================================================ gallery (slider with captions) */
.k3-gc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--k3-split); align-items: start; }
.k3-gc--home { grid-template-columns: 860px 584px; }
@media (max-width: 1440px) { .k3-gc--home { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.k3-gal { display: flex; flex-direction: column; gap: 20px; }
.k3-gal__stage { position: relative; aspect-ratio: 860 / 484; border: 1px solid var(--k3-stroke); border-radius: var(--k3-r); overflow: hidden; background: var(--kit-surface-deep); }
.k3-gal__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; }
.k3-gal__stage img.is-on { opacity: 1; }
.k3-gal__cap { display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; }
.k3-gal__txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--kit-line); padding-top: 7px; min-width: 0; }
.k3-gal__txt > [data-cap] { display: flex; flex-direction: column; gap: 6px; }
.k3-gal__txt > [hidden] { display: none; }
.k3-gal__txt h3 { color: var(--kit-text); }
.k3-gal__txt p { font-size: 14px; line-height: 1.3; color: var(--kit-text-secondary); }
.k3-gal__ctl { display: flex; gap: 12px; flex: 0 0 auto; }
.k3-gal__ctl button { all: unset; box-sizing: border-box; width: 44px; height: 44px; border: 1px solid var(--kit-text); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; cursor: pointer; transition: background-color .25s, color .25s; }
.k3-gal__ctl button:hover { background: var(--kit-text); color: var(--kit-ground); }
.k3-gal__ctl button:focus-visible { outline: 2px solid var(--kit-text); outline-offset: 3px; }
.k3-gal__pos { display: flex; align-items: center; gap: 6px; height: 16px; }
.k3-gal__pos i { display: block; width: 20px; height: 2px; background: var(--kit-line); }
.k3-gal__pos i.is-on { width: 40px; background: var(--kit-accent); }
.k3-gal__pos span { margin-left: 0; font-size: 12px; line-height: 1.3; color: var(--kit-text-secondary); }
.k3-callout { display: flex; flex-direction: column; gap: 20px; padding-top: 36px; }
.k3-callout .k3-eyebrow { margin-bottom: 0; }
.k3-callout h3 { color: var(--kit-text); }
.k3-callout p { color: var(--kit-text-secondary); }
.k3-callout .k3-btn { align-self: flex-start; margin-top: 0; }
.k3-eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--kit-accent); line-height: 1.3; }
@media (max-width: 1440px) { .k3-callout { padding-top: var(--k3-padY); } }
/* 1200 and below: caption under the stage, then position bar left and arrows right on one 32 px row */
@media (max-width: 1200px) {
  .k3-gal { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; row-gap: 20px; }
  .k3-gal__stage, .k3-gal__txt { grid-column: 1 / -1; }
  .k3-gal__cap { display: contents; }
  .k3-gal__txt { width: 100%; }
  .k3-gal__pos { grid-column: 2; grid-row: 3; align-self: center; }
  .k3-gal__ctl { grid-column: 1; grid-row: 3; gap: 10px; }
  .k3-gal__ctl button { width: 32px; height: 32px; font-size: 14px; }
}
@media (max-width: 767px) { .k3-gc { grid-template-columns: minmax(0, 1fr); gap: var(--k3-card); } .k3-callout { padding-top: 0; } .k3-gal__stage { aspect-ratio: 313 / 235; } }

/* ============================================================ partners / logos, touch bar, image nav */
.k3-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.k3-logo { height: 120px; border: 1px solid var(--k3-stroke); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--k3-stroke); }
@media (max-width: 1440px) { .k3-logo { height: 88px; } }
@media (max-width: 767px) { .k3-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .k3-logo { height: 72px; } }

.k3-touch { margin-left: calc(var(--k3-line) + 1px); border-top: 1px solid var(--kit-line); border-bottom: 1px solid var(--kit-line); }
.k3-touch__in { display: flex; align-items: center; justify-content: space-between; gap: 0; padding: 64px var(--k3-padR) 64px var(--k3-padL); }
.k3-touch__in h2 { max-width: 1032px; }
@media (max-width: 1440px) { .k3-touch__in { padding: var(--k3-padY) var(--k3-padR) var(--k3-padY) var(--k3-padL); } }
@media (max-width: 767px) { .k3-touch__in { flex-direction: column; align-items: flex-start; gap: 36px; } }

.k3-inav { margin-left: calc(var(--k3-line) + 1px); position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--kit-line); }
.k3-inav__c { position: relative; height: 800px; border-left: 1px solid var(--kit-line); overflow: hidden; background: var(--kit-surface-deep); color: var(--kit-text); }
.k3-inav__c:first-child { border-left: 0; }
.k3-inav__c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k3-inav__txt { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 300px; box-sizing: border-box; padding: 42px 42px 120px 48px; display: flex; flex-direction: column; gap: 14px; background: linear-gradient(180deg, rgba(25, 32, 38, .96) 0%, rgba(25, 32, 38, .8) 55%, rgba(25, 32, 38, 0) 100%); }
.k3-inav__txt h3 { font-weight: 700; color: var(--kit-text); }
.k3-inav__txt p { color: var(--kit-text-secondary); font-size: 16px; line-height: 1.3; }
.k3-inav__txt .k3-btn { align-self: flex-start; }
@media (max-width: 1440px) {
  .k3-inav__c { height: calc((100vw - var(--k3-line) - 1px) / 4 * 1.69); }
  .k3-inav__txt { height: 45%; padding: calc(var(--gridContainerPadding) * .55) calc(var(--gridContainerPadding) * .6) calc(var(--gridContainerPadding) * 1.4); }
}
@media (max-width: 1024px) {
  .k3-inav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k3-inav__c { height: calc((100vw - var(--k3-line) - 1px) / 2 * 1.05); border-top: 1px solid var(--kit-line); border-left: 0; }
  .k3-inav__c:nth-child(2n) { border-left: 1px solid var(--kit-line); }
  .k3-inav__c:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 767px) {
  .k3-inav { grid-template-columns: minmax(0, 1fr); }
  .k3-inav__c { height: 300px; border-left: 0 !important; }
  .k3-inav__c:nth-child(-n+2) { border-top: 1px solid var(--kit-line); }
  .k3-inav__c:first-child { border-top: 0; }
}

/* ============================================================ product: viewer, specs, ask, faq */
.k3-viewrow { display: grid; grid-template-columns: 840px minmax(0, 1fr); gap: var(--k3-split); align-items: start; }
@media (max-width: 1440px) { .k3-viewrow { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); } }
.k3-viewer { position: relative; aspect-ratio: 840 / 640; border: 1px solid var(--k3-stroke); border-radius: var(--k3-r); overflow: hidden; background: #000; touch-action: pan-y; user-select: none; }
.k3-viewer__stage { position: absolute; inset: 0; transition: transform .3s ease; will-change: transform; cursor: grab; }
.k3-viewer__stage.is-drag { cursor: grabbing; transition: none; }
.k3-viewer__stage img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.k3-viewer__pill { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid #fff; border-radius: 999px; background: rgba(0, 0, 0, .55); font-size: 12px; line-height: 1.3; color: #fff; pointer-events: none; }
.k3-viewer__pill--a { left: 12px; top: 12px; }
.k3-viewer__pill--b { left: 50%; transform: translateX(-50%); bottom: 12px; white-space: nowrap; }
.k3-viewer__ctl { position: absolute; z-index: 3; right: 12px; top: 12px; display: flex; gap: 8px; }
.k3-viewer__ctl button { all: unset; box-sizing: border-box; width: 36px; height: 36px; border: 1px solid #fff; border-radius: var(--k3-r); background: rgba(0, 0, 0, .55); color: #fff; font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.k3-viewer__ctl button:hover { background: #fff; color: #000; }
.k3-viewer__ctl button:focus-visible { outline: 2px solid var(--kit-text); outline-offset: 2px; }
.k3-hot { position: absolute; z-index: 2; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 1px solid #fff; border-radius: 50%; background: none; cursor: pointer; padding: 0; }
.k3-hot span { position: absolute; left: 8px; top: 8px; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--kit-ground); font: 700 13px/28px var(--kit-font); text-align: center; }
.k3-hot.is-on, .k3-hot:hover { border-color: var(--kit-accent); }
.k3-hot.is-on span { background: var(--kit-accent); color: #fff; }
.k3-hot:focus-visible { outline: 2px solid var(--kit-accent); outline-offset: 3px; }
.k3-hotlist { display: flex; flex-direction: column; }
.k3-hotlist .k3-hi { border-top: 1px solid var(--k3-stroke); }
.k3-hotlist .k3-hi:first-child { border-top: 0; }
.k3-hi__t { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 0; width: 100%; padding: 32px 40px 32px 0; cursor: pointer; }
.k3-hi__h { flex: 1 1 auto; }
.k3-hi__h b { font-weight: 400; margin-right: 12px; }
.k3-hi__m { color: var(--kit-accent); flex: 0 0 auto; }
.k3-hi__m::before { content: "+"; }
.k3-hi.is-open .k3-hi__m::before { content: "\2212"; }
.k3-hi__d { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.k3-hi__d > div { overflow: hidden; min-height: 0; padding-right: 40px; font-size: 16px; line-height: 1.3; color: var(--kit-text-secondary); }
.k3-hi.is-open .k3-hi__d { grid-template-rows: 1fr; }
.k3-hi.is-open .k3-hi__d > div { padding-bottom: 28px; }
.k3-hi__t:focus-visible { outline: 2px solid var(--kit-text); outline-offset: -2px; }

@media (max-width: 880px) { .k3-viewrow { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .k3-viewer__pill--b { font-size: 11px; padding: 6px 10px; } }

.k3-specs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.k3-spec { padding: 8px 24px; display: flex; flex-direction: column; gap: 6px; border-left: 1px solid var(--kit-line); }
.k3-spec:first-child { border-left: 0; }
.k3-spec b { font-weight: 400; color: var(--kit-text); }
.k3-spec span { font-size: 13px; line-height: 1.3; color: var(--kit-text-secondary); }
/* no horizontal lines in At a glance (Paul, 14 Oct): vertical dividers only */
@media (max-width: 1440px) { .k3-spec { padding: 20px; } }
@media (max-width: 1200px) { .k3-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .k3-spec { padding: 20px 16px; } .k3-spec:nth-child(3n+1) { border-left: 0; } }
@media (max-width: 880px) { .k3-spec { padding: 20px 12px; } }
@media (max-width: 767px) { .k3-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .k3-spec:nth-child(3n+1) { border-left: 1px solid var(--kit-line); } .k3-spec:nth-child(2n+1) { border-left: 0; } }

.k3-chips { display: flex; flex-wrap: wrap; gap: 24px 24px; }
.k3-chip { display: flex; align-items: center; gap: 10px; }
.k3-chip i { width: 44px; height: 44px; border: 1px solid var(--k3-stroke); border-radius: var(--k3-r); display: flex; align-items: center; justify-content: center; font: 400 16px/1.3 var(--kit-font); font-style: normal; color: var(--kit-text-secondary); }
.k3-chip span { font-size: 13px; line-height: 1.3; color: var(--kit-text-secondary); }
.k3-slot { display: flex; align-items: center; justify-content: center; text-align: center; background: var(--kit-surface); color: var(--kit-text-secondary); font-size: 14px; }
.k3-cmp__body { padding: 28px 32px 28px; display: flex; flex-direction: column; gap: 18px; }
.k3-cmp__body h3 { color: var(--kit-text); }
@media (max-width: 767px) { .k3-chips { gap: 12px 18px; } .k3-slot { font-size: 11px; } }

.k3-ask { margin-left: calc(var(--k3-line) + 1px); border-top: 1px solid var(--kit-line); }
.k3-ask__in { display: flex; flex-direction: column; gap: 32px; padding: var(--k3-padY) var(--k3-padR) var(--k3-padY) var(--k3-padL); }
.k3-ask__field { display: flex; align-items: center; gap: 16px; padding: 24px 24px 24px 40px; background: var(--kit-surface-deep); border: 1px solid #fff; border-radius: var(--k3-r); box-shadow: 0 0 48px rgba(255, 255, 255, .07); }
.k3-ask__field input { flex: 1 1 auto; min-width: 0; background: none; border: 0; outline: 0; color: var(--kit-text); font: 400 32px/1.3 var(--kit-font); }
.k3-ask__field input::placeholder { color: var(--k3-stroke); opacity: 1; }
.k3-ask__field button { all: unset; box-sizing: border-box; flex: 0 0 auto; font-size: 36px; line-height: 1.3; cursor: pointer; padding: 0 4px; }
.k3-ask__field button:focus-visible { outline: 2px solid var(--kit-text); }
.k3-ask__chips { display: flex; flex-wrap: wrap; gap: 12px; }
.k3-ask__chips button { all: unset; box-sizing: border-box; padding: 10px 20px; border: 1px solid var(--k3-stroke); border-radius: 999px; font-size: 15px; line-height: 1.3; cursor: pointer; transition: border-color .25s; }
.k3-ask__chips button:hover { border-color: var(--kit-text); }
.k3-ask__chips button:focus-visible { outline: 2px solid var(--kit-text); outline-offset: 2px; }
.k3-ask__note { font-size: 13px; line-height: 1.3; color: var(--kit-text-secondary); }
.k3-ask__ans { display: none; padding: 24px 28px; border: 1px solid var(--k3-stroke); border-radius: var(--k3-r); background: var(--kit-surface-deep); color: var(--kit-text-secondary); }
.k3-ask__ans.is-on { display: block; }
.k3-ask__ans b { display: block; font-weight: 400; color: var(--kit-text); margin-bottom: 8px; font-size: 18px; }
@media (max-width: 1440px) { .k3-ask__field { padding: 20px 20px 20px calc(var(--gridContainerPadding) * .5); } .k3-ask__field input { font-size: clamp(18px, 2.2vw, 32px); } .k3-ask__field button { font-size: 28px; } }
@media (max-width: 767px) { .k3-ask__field { padding: 16px 16px 16px 20px; } .k3-ask__field input { font-size: 18px; } .k3-ask__field button { font-size: 24px; } .k3-ask__in { gap: 20px; } }

.k3-faq { display: flex; flex-direction: column; }
.k3-faq details { border-top: 1px solid var(--kit-line); }
.k3-faq details:last-child { border-bottom: 1px solid var(--kit-line); }
.k3-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 32px 24px 0; }
.k3-faq summary::-webkit-details-marker { display: none; }
.k3-faq summary::after { content: ""; flex: 0 0 12px; width: 12px; height: 8px; background: var(--kit-accent); -webkit-mask: var(--k3-chev) no-repeat center/contain; mask: var(--k3-chev) no-repeat center/contain; transition: transform .25s; }
.k3-faq details[open] summary::after { transform: rotate(180deg); }
.k3-faq summary:focus-visible { outline: 2px solid var(--kit-text); outline-offset: -2px; }
.k3-faq .k3-faq__a { padding: 0 32px 20px 0; font-size: 15px; line-height: 1.3; color: var(--kit-text-secondary); }
@media (max-width: 767px) { .k3-faq summary { padding-right: 12px; } .k3-faq .k3-faq__a { padding-right: 12px; } }

/* ============================================================ shots */
.k3-vf { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 72px; align-items: start; }
@media (max-width: 1440px) { .k3-vf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--k3-split); } }
.k3-video { position: relative; display: block; aspect-ratio: 16 / 9; border: 1px solid var(--k3-stroke); border-radius: 14px; overflow: hidden; background: var(--kit-surface-deep); cursor: pointer; width: 100%; padding: 0; }
.k3-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k3-video__play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--kit-accent); transition: transform .25s; }
.k3-video__play::before { content: ""; position: absolute; left: 29px; top: 24px; width: 20px; height: 24px; background: var(--kit-ground); -webkit-mask: var(--k3-play) no-repeat center/contain; mask: var(--k3-play) no-repeat center/contain; }
.k3-video:hover .k3-video__play { transform: scale(1.08); }
.k3-video:focus-visible { outline: 2px solid var(--kit-text); outline-offset: 3px; }
.k3-video iframe, .k3-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.k3-facts { display: flex; flex-direction: column; gap: 32px; }
.k3-facts ul { display: flex; flex-direction: column; gap: 28px; margin: 0; padding: 0; list-style: none; }
.k3-facts li { display: flex; flex-direction: column; gap: 4px; }
.k3-facts li b { font: 400 11px/1.3 var(--kit-font); letter-spacing: .18em; text-transform: uppercase; color: var(--kit-text-secondary); }
.k3-facts li span { color: var(--kit-text-secondary); }
.k3-facts .k3-btn { align-self: flex-start; }
.k3-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }   /* one column per shot, however many (6 since 28 Oct) */
.k3-strip button { all: unset; box-sizing: border-box; display: block; position: relative; aspect-ratio: 282 / 150; border-radius: 8px; overflow: hidden; border: 1px solid transparent; cursor: pointer; }
.k3-strip button img { width: 100%; height: 100%; object-fit: cover; }
.k3-strip button.is-on { border-color: #fff; }
.k3-strip button:focus-visible { outline: 2px solid var(--kit-text); outline-offset: 2px; }
@media (max-width: 1440px) { .k3-strip { gap: calc(var(--cardSpacing) - 4px); } }
@media (max-width: 767px) { .k3-strip { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); } .k3-strip button { aspect-ratio: 16 / 9; } }
.k3-vsel { display: flex; flex-direction: column; gap: 16px; }
.k3-vsel .k3-video { border-radius: 8px; aspect-ratio: 1776 / 640; }
.k3-vsel__cap { color: var(--kit-text); }
.k3-vrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--k3-card); }
.k3-vitem { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; cursor: pointer; }
.k3-vitem__img { position: relative; aspect-ratio: 576 / 300; border: 1px solid var(--k3-stroke); border-radius: 8px; overflow: hidden; }
.k3-vitem__img img { width: 100%; height: 100%; object-fit: cover; }
.k3-vitem.is-on .k3-vitem__img { border-color: var(--kit-accent); }
.k3-vitem:focus-visible .k3-vitem__img { outline: 2px solid var(--kit-text); outline-offset: 3px; }
@media (max-width: 767px) { .k3-vrow { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================ about */
.k3-sec--bleed .k3-sec__in { padding-left: 0; padding-right: 0; gap: 56px; }
.k3-sec--bleed .k3-pad { padding-left: var(--k3-padL); padding-right: var(--k3-padR); }
@media (max-width: 1440px) { .k3-sec--bleed .k3-sec__in { gap: var(--k3-gap); } }
.k3-hrow { display: grid; grid-template-columns: 880px minmax(0, 1fr); gap: 72px; align-items: start; }
.k3-hrow p { font-size: 20px; line-height: 1.3; color: var(--kit-text-secondary); }
.k3-hrow.k3-hrow--stack { grid-template-columns: minmax(0, 880px); gap: 24px; }   /* text under the title (About, Paul 28 Oct) */
@media (max-width: 1440px) { .k3-hrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--k3-split); } .k3-hrow p { font-size: clamp(15px, 1.4vw, 20px); } }
@media (max-width: 767px) { .k3-hrow { grid-template-columns: minmax(0, 1fr); gap: 24px; } .k3-hrow p { font-size: 13px; } }
.k3-banner { height: 480px; border: 1px solid var(--k3-stroke); border-radius: 8px; overflow: hidden; }
.k3-banner img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1440px) { .k3-banner { height: auto; aspect-ratio: 1776 / 480; } }
@media (max-width: 767px) { .k3-banner { aspect-ratio: auto; height: 220px; } }
.k3-facts3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.k3-fact { border-top: 1px solid var(--k3-stroke); padding-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.k3-fact span { font-size: 13px; line-height: 1.3; color: var(--kit-text-secondary); }
@media (max-width: 767px) { .k3-facts3 { grid-template-columns: minmax(0, 1fr); gap: var(--k3-card); } }
.k3-pu { display: grid; grid-template-columns: 780px minmax(0, 1fr); gap: 72px; align-items: start; }
.k3-pu__img { height: 672px; border: 1px solid var(--k3-stroke); border-radius: 8px; overflow: hidden; }
.k3-pu__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1440px) { .k3-pu { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--k3-split); } .k3-pu__img { height: auto; aspect-ratio: 1; } }
@media (max-width: 1024px) { .k3-pu { grid-template-columns: minmax(0, 1fr); gap: 28px; } .k3-pu__img { aspect-ratio: 780 / 330; height: auto; } .k3-pu .k3-uses { order: -1; } }
@media (max-width: 767px) { .k3-pu__img { aspect-ratio: auto; height: 220px; } }
.k3-more { margin-left: calc(var(--k3-line) + 1px); position: relative; border-top: 1px solid var(--kit-line); }
.k3-more__in { position: relative; height: 560px; overflow: hidden; }
.k3-more__in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k3-more__in::before { content: ""; position: absolute; z-index: 1; inset: 0 auto 0 0; width: 1200px; max-width: 100%; background: linear-gradient(90deg, rgba(17, 22, 26, .9), rgba(17, 22, 26, 0)); }
.k3-more__txt { position: absolute; z-index: 2; left: var(--k3-padL); top: 50%; transform: translateY(-50%); width: 640px; display: flex; flex-direction: column; gap: 24px; }
.k3-more__txt p { color: var(--kit-text-secondary); font-size: 16px; line-height: 1.3; }
.k3-more__txt .k3-btn { align-self: flex-start; }
@media (max-width: 1440px) { .k3-more__in { height: clamp(360px, 30vw, 560px); } .k3-more__txt { left: var(--gridContainerPadding); width: min(640px, calc(100% - 2 * var(--gridContainerPadding))); } }
@media (max-width: 767px) {
  .k3-more__in { height: auto; overflow: visible; display: flex; flex-direction: column-reverse; background: var(--kit-surface-deep); }
  .k3-more__in::before { display: none; }
  .k3-more__in img { position: static; height: 200px; }
  .k3-more__txt { position: static; transform: none; width: auto; padding: var(--k3-padY) var(--gridContainerPadding); }
}

/* ============================================================ contact */
.k3-contact { position: relative; overflow: hidden; margin: 0; }
.k3-contact__art { position: absolute; z-index: 0; left: calc(var(--k3-line) + 1px); top: 0; width: 1452px; height: 1153px; pointer-events: none; }
.k3-contact__art svg { width: 100%; height: 100%; display: block; overflow: visible; }
.k3-contact__in { position: relative; z-index: 2; min-height: 1031px; padding: 64px 96px 96px 96px; display: flex; flex-direction: column; gap: 48px; }
.k3-contact__cols { display: grid; grid-template-columns: 440px 420px; gap: 96px; padding-left: 464px; }
.k3-intro { border-left: 1px solid var(--kit-line); padding-left: 24px; display: flex; flex-direction: column; gap: 16px; font-size: 14px; line-height: 1.5; color: var(--kit-text); }
.k3-form { display: flex; flex-direction: column; gap: 24px; }
.k3-form__chip { align-self: flex-start; background: var(--kit-accent-deep); color: #fff; font-size: 12px; line-height: 1.3; padding: 4px 8px; border-radius: 4px; }
.k3-field { display: flex; flex-direction: column; gap: 8px; }
.k3-field label { font-size: 12px; line-height: 1.3; color: var(--kit-text-secondary); }
.k3-field label i { color: var(--kit-accent); font-style: normal; margin-left: 4px; }
.k3-field input, .k3-field select, .k3-field textarea { box-sizing: border-box; width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--kit-line); border-radius: 0; color: var(--kit-text); font: 400 14px/1.5 var(--kit-font); padding: 8px; outline: none; }
.k3-field select { appearance: none; -webkit-appearance: none; padding-right: 32px; background: url("../svg/chevron.svg") no-repeat right 8px center; color: var(--kit-text-secondary); cursor: pointer; }
.k3-field select option { background: var(--kit-ground); color: var(--kit-text); }
.k3-field textarea { min-height: 96px; resize: vertical; }
.k3-field input::placeholder, .k3-field textarea::placeholder { color: var(--kit-text-secondary); opacity: 1; }
.k3-field input:focus, .k3-field select:focus, .k3-field textarea:focus { border-bottom: 2px solid var(--kit-text); padding-bottom: 7px; }
.k3-field.is-bad input, .k3-field.is-bad select, .k3-field.is-bad textarea { border-bottom-color: var(--kit-accent); }
.k3-field__err { display: none; font-size: 12px; color: var(--kit-accent); }
.k3-field.is-bad .k3-field__err { display: block; }
.k3-captcha { width: 304px; max-width: 100%; height: 78px; border: 1px dashed var(--kit-line); border-radius: 14px; display: flex; align-items: center; padding-left: 16px; color: var(--k3-stroke); font-size: 12px; box-sizing: border-box; }
.k3-form__ok { display: none; padding: 16px 20px; border: 1px solid var(--k3-stroke); border-radius: var(--k3-r); background: var(--kit-surface-deep); color: var(--kit-text); }
.k3-form__ok.is-on { display: block; }
.k3-form .k3-btn { align-self: flex-start; }
.k3-hp { position: absolute; left: -9999px; }
@media (max-width: 1440px) {
  .k3-contact { --k3-art-row: 200px; --k3-evg: 72px; padding-bottom: var(--k3-art-row); }
  .k3-contact__art { top: auto; bottom: 0; left: calc(var(--k3-line) + 1px); width: 73.33vw; height: auto; aspect-ratio: 1452 / 1153; }
  .k3-contact__in { min-height: 0; padding: var(--k3-padY) var(--k3-padR) var(--k3-line) calc(var(--k3-line) + 1px + var(--k3-padL)); gap: 48px; }
  .k3-contact__cols { grid-template-columns: calc((100% - var(--k3-evg)) / 2 + 12px) minmax(0, 1fr); gap: var(--k3-evg); padding-left: 14.5vw; }
  .k3-contact__cols .k3-intro { width: auto; }
}
@media (max-width: 1200px) { .k3-contact { --k3-art-row: 160px; --k3-evg: 60px; } }
@media (max-width: 1024px) { .k3-contact { --k3-art-row: 225px; } .k3-contact__cols { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-left: 0; } }
@media (max-width: 880px) { .k3-contact { --k3-art-row: 192px; } }
@media (max-width: 767px) { .k3-contact { --k3-art-row: 142px; } }

/* ============================================================ Also-from band (Product) */
.k3-band { display: flex; border: 1px solid var(--k3-stroke); border-radius: var(--k3-r); background: var(--kit-surface-deep); overflow: hidden; align-items: stretch; }
.k3-band__img { position: relative; box-sizing: border-box; flex: 0 0 561px; width: 561px; height: 360px; border-right: 1px solid var(--k3-stroke); overflow: hidden; }
.k3-band__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k3-band__txt { flex: 1 1 auto; padding: 48px 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; align-self: flex-start; }
.k3-band__txt h3 { color: var(--kit-text); max-width: 841px; }
.k3-band__txt p { color: var(--kit-text-secondary); max-width: 841px; }
.k3-eyebrow--g { color: var(--kit-text-secondary); }
@media (min-width: 1441px) { .k3-mcard--x .k3-mcard__body { padding-bottom: 62px; } }  /* Figma Product cards are fixed 30px taller than their text */


/* ============================================================ Event landing */
.k3-hero__meta { margin: 0; font-size: 14px; line-height: 1.5; color: var(--kit-text); }
.k3-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.k3-ecard { display: flex; flex-direction: column; border: .5px solid var(--k3-stroke); border-radius: 14px; background: var(--kit-surface-deep); overflow: hidden; color: inherit; }
.k3-ecard__img { background: var(--kit-surface); overflow: hidden; }
.k3-ecard__img img { width: 100%; height: 100%; object-fit: cover; }
.k3-ecard__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.k3-ecard__m { font-size: 12px; line-height: 1.3; color: var(--kit-text-secondary); }
.k3-ecard__body h3 { color: var(--kit-text); }
.k3-ecard__body p { font-size: 12px; line-height: 1.3; color: var(--kit-text-secondary); }
.k3-ecard__go { display: none; }
@media (max-width: 880px) { .k3-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .k3-grid--4 { grid-template-columns: minmax(0, 1fr); } }
.k3-evform { display: grid; grid-template-columns: 440px 420px; gap: 96px; }
@media (max-width: 1024px) { .k3-evform { grid-template-columns: minmax(0, 1fr); gap: var(--k3-gap); } }
.k3-sec--count .k3-count { flex-direction: row; justify-content: space-between; align-items: center; gap: 72px; padding-top: 40px; padding-bottom: 40px; }
.k3-units { display: flex; gap: 24px; }
.k3-unit { width: 150px; border-top: 1px solid var(--k3-stroke); padding-top: 16px; display: flex; flex-direction: column; gap: 4px; }
.k3-unit span { font-size: 11px; line-height: 1.3; letter-spacing: .12em; color: var(--kit-text-secondary); }
.k3-unit b { font-weight: 400; color: var(--kit-text); }
@media (max-width: 1440px) { .k3-sec--count .k3-count { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--k3-gap); align-items: center; padding-top: var(--k3-padY); padding-bottom: var(--k3-padY); } .k3-units { gap: 16px; width: 100%; } .k3-unit { flex: 1 1 0; width: auto; } }
@media (max-width: 1024px) { .k3-sec--count .k3-count { grid-template-columns: minmax(0, 1fr); gap: var(--k3-gap); } }
@media (max-width: 767px) { .k3-units { flex-wrap: wrap; } .k3-unit { flex: 0 0 calc(50% - 8px); } }
.k3-footer__social { margin-left: auto; }
.k3-contact h1 { line-height: 1.146; }
.k3-ecard__body::after { content: ""; display: block; height: 16px; flex: 0 0 16px; }
.k3-page .k3-contact h1 { line-height: 1.146; }
@media (min-width: 1441px) { .k3-more__txt { top: 164px; transform: none; } }
.k3-hero--event .k3-hero__copy { gap: 24px; }
.k3-hero__meta { margin-top: 7px; font-size: 16px; line-height: 26px; }
.k3-hero--event .k3-hero__ctas { margin-top: 0; }
.k3-hero--event .k3-hero__ctas { margin-top: 4px; }

@media (max-width: 1440px) { .k3-gal__stage { aspect-ratio: 1 / 1; } }
@media (max-width: 1200px) { .k3-gal__stage { aspect-ratio: 4 / 3; } }
@media (max-width: 1440px) { .k3-gal__ctl button { font-size: 16px; } }
/* Event / About cards: fixed image heights at every width (Figma) */
.k3-mcard--event .k3-mcard__img { aspect-ratio: auto !important; height: 220px; }
.k3-ecard__img { aspect-ratio: auto !important; height: 200px; }
/* Event hero heading sizes and form columns (Figma) */
@media (max-width: 1440px) { .k3-page .k3-hero--event h1 { font-size: 46px; line-height: 1.1; } }
@media (max-width: 1200px) { .k3-page .k3-hero--event h1 { font-size: 40px; } }
@media (max-width: 1024px) { .k3-page .k3-hero--event h1 { font-size: 48px; } }
@media (max-width: 880px) { .k3-page .k3-hero--event h1 { font-size: 44px; } }
@media (max-width: 767px) { .k3-page .k3-hero--event h1 { font-size: 33px; } }
@media (max-width: 1440px) { .k3-evform { --evg: 72px; grid-template-columns: calc((100% - var(--evg)) / 2 + 12px) minmax(0, 1fr); gap: var(--evg); } .k3-evform .k3-form { width: 100%; } }
@media (max-width: 1200px) { .k3-evform { --evg: 60px; } }
@media (max-width: 1024px) { .k3-evform { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.k3-field textarea { height: 96px; min-height: 96px; }
@media (max-width: 1440px) { .k3-hero--event .k3-hero__copy { gap: 28px; } .k3-hero__meta { margin-top: 0; } .k3-hero--event .k3-hero__ctas { margin-top: 0; } }
@media (max-width: 767px) { .k3-step__m { font-size: 18px; line-height: 1; } }

@media (max-width: 1024px) { .k3-step__m { font-size: 22px; line-height: 1; } }
@media (max-width: 1200px) { .k3-gal__pos span { margin-left: auto; } }
@media (max-width: 767px) { .k3-step.is-open .k3-step__d > div { padding-top: 20px; } }
/* Shots hero: art sits further right so the longer heading keeps its gap (Figma 1440: art x 731, 1200: 606) */
@media (min-width: 1025px) and (max-width: 1440px) {
  .k3-hero--wide .k3-hero__art { right: -7.4vw; }
  .k3-hero--wide .k3-hero__copy { width: calc(100% - var(--k3-hero) * 920 / 700 - var(--k3-tx) - 80px + 7.4vw); }
}
/* Shots featured: video height follows the facts column, strip tiles 16:9 (Figma 1440 and 1200) */
@media (max-width: 1440px) { .k3-vf .k3-video { aspect-ratio: auto; height: 317px; } .k3-strip button { aspect-ratio: 16 / 9; } }
@media (max-width: 1200px) { .k3-vf .k3-video { height: 315px; } }
@media (max-width: 767px) { .k3-vf { grid-template-columns: minmax(0, 1fr); gap: var(--k3-gap); } }
@media (max-width: 767px) { .k3-vf { gap: 14px; } .k3-vf .k3-video { aspect-ratio: 16 / 9; height: auto; } }
@media (max-width: 767px) { .k3-vsel { display: none; } .k3-vitem__img { aspect-ratio: 16 / 9; } .k3-vrow { gap: 14px; } }
/* Product: step image and Also-from band per width (Figma) */
@media (max-width: 1440px) {
  .k3-split--prod { --k3-media-h: 533px; }
  .k3-band { --k3-band-h: 339px; --k3-band-pad: 48px; }
  .k3-band__img { flex: 0 0 50%; width: 50%; height: calc(var(--k3-band-h) - 2px); }
  .k3-band__txt { padding: var(--k3-band-pad) 40px; }
  .k3-band__txt h3 { max-width: none; }
}
@media (max-width: 1200px) { .k3-split--prod { --k3-media-h: 497px; } .k3-band { --k3-band-h: 315px; --k3-band-pad: 38px; } }
@media (max-width: 1024px) { .k3-split--prod { --k3-media-h: 479px; } .k3-band { --k3-band-h: 311px; } }
@media (max-width: 880px) { .k3-split--prod { --k3-media-h: 449px; } .k3-band { --k3-band-h: 333px; --k3-band-pad: 24px; } }
/* Product viewer row (Figma: viewer 660/550/454 wide, stacked at 880) */
@media (max-width: 1440px) { .k3-viewrow { grid-template-columns: 63.46% minmax(0, 1fr); gap: 72px; } }
@media (max-width: 1200px) { .k3-viewrow { grid-template-columns: 64.55% minmax(0, 1fr); gap: 68px; } }
@media (max-width: 1024px) { .k3-viewrow { grid-template-columns: 51.9% minmax(0, 1fr); gap: 64px; } }
@media (max-width: 880px) { .k3-viewrow { grid-template-columns: minmax(0, 1fr); gap: 26px; } }
@media (max-width: 767px) { .k3-viewrow { gap: 24px; } .k3-viewer { aspect-ratio: 313 / 260; } }
@media (min-width: 1441px) { .k3-viewer__pill--a { left: 20px; top: 20px; } .k3-viewer__pill--b { bottom: 20px; } .k3-viewer__ctl { right: 20px; top: 20px; } }
/* phones: closed steps keep their text hidden; band stacks text first, image under */
@media (max-width: 767px) {
  .k3-step:not(.is-open) .k3-step__d > div { overflow: hidden; }
  .k3-band { flex-direction: column-reverse; }
  .k3-band__img { flex: 0 0 auto; width: 100%; height: 200px; border-right: 0; border-top: 1px solid var(--k3-stroke); }
  .k3-band__txt { padding: 20px; align-self: stretch; }
}
@media (max-width: 767px) { .k3-viewer__ctl { right: auto; left: 12px; top: 56px; } }
@media (max-width: 767px) { .k3-split--prod .k3-step.is-open .k3-step__d > div { padding-top: 8px; } }
/* compat chips are smaller at 1440 and below (Figma: 23 px high, 24/10 gaps) */
@media (max-width: 1440px) { .k3-chips { gap: 10px 24px; } .k3-chip { gap: 8px; } .k3-chip i { width: 30px; height: 23px; font-size: 13px; line-height: 1; border-radius: 6px; } }
@media (max-width: 767px) { .k3-chips { gap: 10px 24px; } }
@media (max-width: 1024px) { .k3-hero__art.hxdr-line-section { height: var(--k3-art-h) !important; } }
/* Contact: instructions chip spans the form at 1440 and below; single-column art is clipped to its row at 1024 and below */
@media (max-width: 1440px) { .k3-form__chip { align-self: stretch; } }
@media (max-width: 1024px) { .k3-contact__art { height: var(--k3-art-row) !important; width: 100%; aspect-ratio: auto; overflow: hidden; } .k3-contact__art svg { position: absolute; left: 0; top: auto; bottom: 0; right: auto; width: 36vw; height: auto; aspect-ratio: 1452 / 1153; } }
@media (max-width: 1440px) { .k3-chip { gap: 14px; } .k3-chip i { width: 36px; } }
@media (min-width: 1025px) and (max-width: 1200px) { .k3-hi__t { padding-top: 29px; padding-bottom: 29px; } }
.k3-grid--cmp { row-gap: var(--k3-gap); }

/* normalisation the Hello reset used to give us */
.k3-page, .k3-page *, .k3-page *::before, .k3-page *::after { box-sizing: border-box; }
body { margin: 0; background: var(--kit-ground, #11161A); }
.k3-page button, .k3-page [type=button], .k3-page [type=submit] { font-family: inherit; }


/* ============================================================ interaction states (one system)
   Focus: 2 px white ring, 3 px off the element (red on the hotspots, which are white themselves).
   Hover: buttons go carmine; clickable cards lift their border and zoom the photo; text links underline in line grey;
   icons dim; form fields darken their underline. Press: buttons sink 1 px. Nothing falls back to the browser or Hello defaults. */
.k3-page :is(a, button, summary, [tabindex]):focus { outline: none; }
.k3-page :is(a, button, summary, [tabindex="0"], select):focus-visible { outline: 2px solid var(--kit-text); outline-offset: 3px; }
.k3-page .k3-hot:focus-visible { outline-color: var(--kit-accent); }
.k3-page :is(input, textarea, select):focus-visible { outline: none; }
.k3-page .k3-ask__field input:focus-visible { outline: none; }
.k3-btn { transition: padding .5s ease, background-color .3s ease, color .3s ease, transform .15s ease; }
.k3-btn:active { background: var(--kit-accent-deep); color: #fff !important; transform: translateY(1px); }
.k3-btn:focus-visible { background: var(--kit-accent); }
a.k3-header__logo, a.k3-footer__logo { transition: opacity .25s; }
a.k3-header__logo:hover, a.k3-footer__logo:hover { opacity: .8; }
.k3-footer__links a { border-bottom: 1px solid transparent; transition: border-color .25s; }
.k3-footer__links a:hover { border-bottom-color: var(--kit-line); }
.k3-footer__social a { transition: opacity .25s, transform .25s; }
.k3-footer__social a:hover { opacity: .65; transform: translateY(-2px); }
.k3-nav a { transition: border-color .25s; }
.k3-nav-col a { transition: color .25s; }
.k3-nav-col a.is-active:hover { color: var(--kit-text); }
/* clickable image cards: image nav, event cards */
.k3-inav__c img, .k3-ecard__img img { transition: transform .6s ease; }
.k3-inav__c:focus-visible { outline-offset: -4px; }
a.k3-ecard { transition: border-color .3s; }
a.k3-ecard:hover, a.k3-ecard:focus-visible { border-color: var(--kit-line); }
a.k3-ecard:hover .k3-ecard__img img { transform: scale(1.04); }
a.k3-ecard:hover .k3-ecard__go img { transform: translateX(4px); }
.k3-ecard__go img { transition: transform .3s; }
/* tiles that select something */
.k3-strip button, .k3-vitem__img { transition: border-color .25s; }
.k3-strip button img, .k3-vitem__img img { transition: filter .25s; }
.k3-strip button:not(.is-on):hover { border-color: var(--k3-stroke); }
.k3-strip button:not(.is-on):hover img, .k3-vitem:not(.is-on):hover .k3-vitem__img img { filter: brightness(1.12); }
.k3-vitem:not(.is-on):hover .k3-vitem__img { border-color: var(--kit-text-secondary); }
.k3-video:focus-visible { outline: 2px solid var(--kit-text); outline-offset: 3px; }
/* accordions: hover raises the closed title, open stays white; marker follows */
.k3-step__t:hover .k3-step__m, .k3-use__t:hover .k3-use__m, .k3-hi__t:hover .k3-hi__m { color: var(--kit-text); }
.k3-faq summary:hover { color: var(--kit-text); }
.k3-faq summary:hover::after { transform: translateY(2px); }
.k3-faq details[open] summary:hover::after { transform: rotate(180deg) translateY(2px); }
.k3-hi__h { transition: color .25s; }
.k3-hi__t:hover .k3-hi__h { color: var(--kit-text); }
/* chips, ask box, form fields */
.k3-ask__chips button { transition: border-color .25s, color .25s, background-color .25s; }
.k3-ask__chips button:hover { background: var(--kit-surface-deep); }
.k3-ask__field { transition: border-color .25s; }
.k3-ask__field button { transition: transform .25s, color .25s; }
.k3-ask__field button:hover { color: var(--kit-accent); transform: translateX(4px); }
.k3-ask__field:focus-within { box-shadow: 0 0 0 2px var(--kit-text); }
.k3-field input, .k3-field select, .k3-field textarea { transition: border-color .25s; }
.k3-field input:hover, .k3-field select:hover, .k3-field textarea:hover { border-bottom-color: var(--kit-text-secondary); }
.k3-field input:focus, .k3-field select:focus, .k3-field textarea:focus { border-bottom-color: var(--kit-text); }
.k3-burger:hover i { background: var(--kit-accent); }
.k3-drawer a:not(.k3-btn) { transition: color .25s; }
.k3-drawer a:not(.k3-btn):hover { color: var(--kit-accent); }
.k3-gal:focus-visible { outline-offset: 6px; }
.k3-viewer__ctl button { transition: background-color .25s, color .25s; }
.k3-ask__ans small { display: block; margin-top: 10px; font-size: 12px; line-height: 1.3; color: var(--kit-text-secondary); }
.k3-ask__ans .k3-ask__more { margin-top: 8px; font-size: 13px; color: var(--kit-text-secondary); }
.k3-ask__ans p { white-space: pre-line; }

/* real 3D model */
.k3-viewer__stage > img { transition: opacity .6s ease; }
.k3-viewer.is-3d .k3-viewer__stage > img { opacity: 0; pointer-events: none; }
.k3-viewer__stage model-viewer { --progress-bar-color: transparent; --progress-mask: transparent; outline: none; }
.k3-viewer__stage model-viewer > .k3-hot { left: 0 !important; top: 0 !important; transition: opacity .25s; }
.k3-viewer__stage model-viewer > .k3-hot:not([data-visible]) { opacity: .35; pointer-events: none; }
.k3-viewer__ctl .k3-viewer__explode { width: auto; padding: 0 14px; font: 400 13px/1 var(--kit-font); letter-spacing: .02em; }
.k3-viewer__ctl .k3-viewer__explode.is-on { background: #fff; color: #000; }
@media (max-width: 767px) { .k3-hot { width: 34px; height: 34px; margin: -17px 0 0 -17px; } .k3-hot span { left: 5px; top: 5px; width: 22px; height: 22px; font-size: 11px; line-height: 22px; } .k3-viewer__ctl .k3-viewer__explode { padding: 0 10px; } .k3-viewer__ctl button { width: 32px; height: 32px; } }

/* ============================================================ Paul's comments, 15 Oct
   accordions: red plus that morphs into a carmine minus, softer open/close; gallery bar grows; shots swap fades; footer logo; intro border */
.k3-step__m, .k3-use__m, .k3-hi__m { position: relative; flex: 0 0 auto; display: block; width: .62em; height: 1.2em; color: var(--kit-accent); transition: color .4s ease; }
.k3-step__m::before, .k3-use__m::before, .k3-hi__m::before, .k3-step.is-open .k3-step__m::before, .k3-use.is-open .k3-use__m::before, .k3-hi.is-open .k3-hi__m::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(2px, .07em); margin-top: calc(max(2px, .07em) / -2); background: currentColor; }
.k3-step__m::after, .k3-use__m::after, .k3-hi__m::after { content: ""; position: absolute; top: 50%; left: 50%; width: max(2px, .07em); height: .62em; margin: calc(.31em * -1) 0 0 calc(max(2px, .07em) / -2); background: currentColor; transition: transform .45s cubic-bezier(.22, .61, .36, 1); }
.k3-step.is-open .k3-step__m::after, .k3-use.is-open .k3-use__m::after, .k3-hi.is-open .k3-hi__m::after { transform: rotate(90deg) scaleY(0); }
.k3-step.is-open .k3-step__m, .k3-use.is-open .k3-use__m, .k3-hi.is-open .k3-hi__m { color: var(--kit-muted); }
.k3-step__t:hover .k3-step__m, .k3-use__t:hover .k3-use__m, .k3-hi__t:hover .k3-hi__m { color: var(--kit-accent); }
.k3-step.is-open .k3-step__t:hover .k3-step__m, .k3-use.is-open .k3-use__t:hover .k3-use__m, .k3-hi.is-open .k3-hi__t:hover .k3-hi__m { color: var(--kit-muted); }
.k3-faq summary::after { background: var(--kit-accent); transition: transform .45s cubic-bezier(.22, .61, .36, 1), background-color .4s ease; }
.k3-faq details[open] summary::after { background: var(--kit-muted); }
/* open and close: height eases, text fades and slides in a beat later */
.k3-step__d, .k3-use__d, .k3-hi__d { transition: grid-template-rows .55s cubic-bezier(.22, .61, .36, 1); }
.k3-step__d > div, .k3-use__d > div, .k3-hi__d > div { opacity: 0; transform: translateY(-6px); transition: opacity .25s ease, transform .45s cubic-bezier(.22, .61, .36, 1), padding .55s cubic-bezier(.22, .61, .36, 1); }
.k3-step.is-open .k3-step__d > div, .k3-use.is-open .k3-use__d > div, .k3-hi.is-open .k3-hi__d > div { opacity: 1; transform: none; transition-delay: .08s, .08s, 0s; }
.k3-split__img img { transition: opacity .3s ease; }
.k3-faq { interpolate-size: allow-keywords; }
.k3-faq details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size .5s cubic-bezier(.22, .61, .36, 1), opacity .35s ease, content-visibility .5s allow-discrete; }
.k3-faq details[open]::details-content { block-size: auto; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .k3-step__d, .k3-use__d, .k3-hi__d, .k3-step__d > div, .k3-use__d > div, .k3-hi__d > div, .k3-faq details::details-content, .k3-step__m::after, .k3-use__m::after, .k3-hi__m::after { transition: none !important; } }
/* home gallery position bar: the active segment grows into the long red line */
.k3-gal__pos i { transition: width .5s cubic-bezier(.22, .61, .36, 1), background-color .5s ease; }
/* shots: poster cross-fade, and the large player takes the video's own shape */
.k3-video img { transition: opacity .35s ease; }
.k3-video.is-swap img { opacity: 0; }
.k3-video.is-playing img { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.k3-video video { background: #000; }
.k3-vsel .k3-video { aspect-ratio: 1776 / 640; transition: aspect-ratio .6s cubic-bezier(.22, .61, .36, 1); }
.k3-vsel .k3-video.is-playing { aspect-ratio: var(--ar, 16 / 9); }
.k3-vsel__cap { transition: opacity .2s ease; }
.k3-vsel__cap.is-out { opacity: 0; }
.k3-stripwrap { display: flex; flex-direction: column; gap: 16px; }
.k3-strip-label { margin: 0; font-size: 11px; line-height: 1.3; letter-spacing: .18em; text-transform: uppercase; color: var(--kit-text-secondary); }
.k3-strip button.is-on { transition: border-color .4s ease; }
.k3-hero__outline img { will-change: transform; }
/* footer logo a little larger; contact intro border matches its text */
.k3-footer__logo img { width: 100px; height: 64px; }
.k3-intro { align-self: start; }

/* image nav: one cell open, the rest narrow; hover or focus moves the opening (robotics.hexagon.com pattern), rows of four only */
@media (min-width: 1025px) {
  .k3-inav { display: flex; }
  .k3-inav__c { flex: 1 1 0; min-width: 0; transition: flex-grow .7s cubic-bezier(.22, .61, .36, 1); }
  .k3-inav__c.is-active { flex-grow: 2.9; }
  .k3-inav__c img { transition: transform .9s cubic-bezier(.22, .61, .36, 1); }
  .k3-inav__c.is-active img { transform: scale(1.03); }
  .k3-inav__txt { right: auto; width: calc((100vw - var(--k3-line) - 1px) * .4915); }
  .k3-inav__txt p, .k3-inav__txt .k3-btn { opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .25s ease, transform .45s ease; }
  .k3-inav__c.is-active .k3-inav__txt p, .k3-inav__c.is-active .k3-inav__txt .k3-btn { opacity: 1; transform: none; pointer-events: auto; transition-delay: .3s; }
  .k3-inav__c:not(.is-active) .k3-inav__txt { background: linear-gradient(180deg, rgba(17, 22, 26, .88) 0%, rgba(17, 22, 26, 0) 100%); }
}
@media (prefers-reduced-motion: reduce) { .k3-inav__c, .k3-inav__c img, .k3-inav__txt p, .k3-inav__txt .k3-btn { transition: none !important; } }
.k3-slot--form { min-height: 520px; font-size: 16px; }
.k3-form__chip { background: var(--kit-surface) !important; color: var(--kit-text) !important; border: 1px dashed var(--k3-stroke); padding: 6px 10px !important; }

.k3-inav__c { cursor: default; }
@media (min-width: 1025px) { .k3-inav__c:not(.is-active) { cursor: pointer; } .k3-inav__c:not(.is-active):hover img { transform: scale(1.02); } }

/* Product outline draws itself (build flag DRAW_OUTLINE in tools/build_pages.py; False = plain image). JS drives it with inline styles. */
.k3-hero--outline .k3-hero__outline svg { display: block; width: 100%; height: auto; }

/* shots: the playing video never outgrows the screen, so the three videos below stay in view on a 1920 x 1080 monitor */
.k3-vsel .k3-video.is-playing { --maxh: min(85vh, max(340px, calc(100vh - 440px))); width: min(100%, calc(var(--maxh) * var(--arn, 1.7778))); align-self: flex-start; }
@media (max-width: 880px) { .k3-vsel .k3-video.is-playing { width: 100%; } }
.k3-strip.is-turning button { pointer-events: none; }
.k3-strip button { will-change: transform; }

/* shots: preview and playing player are the same box (no resize on play); video letterboxes inside it. Up to 95% of the viewport height. */
.k3-vsel .k3-video, .k3-vsel .k3-video.is-playing { --maxh: min(95vh, max(340px, calc(100vh - 340px))); aspect-ratio: 16 / 9; transition: none; width: min(100%, calc(var(--maxh) * 1.7778)); align-self: flex-start; }
.k3-vsel .k3-video video { object-fit: contain; }
@media (max-width: 880px) { .k3-vsel .k3-video, .k3-vsel .k3-video.is-playing { width: 100%; } }

/* light sections: the same tokens, flipped. Grey (#E7E8E9) and white are used very sparingly (Home, Product, Shots, About, Contact, Event). */
.k3-sec--light { --kit-ground: #E7E8E9; --kit-text: #11161A; --kit-text-secondary: #4A4F57; --kit-muted: #5A5E66; --kit-line: #B9B9BD; --k3-stroke: #B9B9BD; --kit-surface: #FFFFFF; --kit-surface-deep: #FFFFFF; background: var(--kit-ground); color: var(--kit-text); }
.k3-sec--light.k3-tone-white { --kit-ground: #FFFFFF; --kit-surface: #E7E8E9; --kit-surface-deep: #E7E8E9; }   /* cards on white = the lightest brand grey (1C) */
.k3-sec--light :focus-visible { outline-color: #11161A; }
.k3-sec--light .k3-btn { --kit-text: #FFFFFF; }
/* side nav follows: a matching strip behind the column, dark text while the nav sits beside a light section */
.k3-nav-col { position: relative; }
.k3-nav-col__in { z-index: 1; }
.k3-nav-col__strip { position: absolute; left: 0; right: -1px; z-index: 0; pointer-events: none; background: #E7E8E9; border-right: 1px solid #B9B9BD; border-top: 1px solid #B9B9BD; transition: none; }
.k3-nav-col__strip.k3-tone-white { background: #FFFFFF; }
.k3-nav-col__in a { transition: color .3s ease; }
.k3-nav-col__in a.on-light { color: #4A4F57; }
.k3-nav-col__in a.on-light:hover, .k3-nav-col__in a.on-light.is-active { color: #11161A; }
/* cards on light sections: white cards, grey image placeholders, photos keep a dark letterbox */
.k3-sec--light .k3-mcard, .k3-sec--light .k3-ecard, .k3-sec--light .k3-card { background: var(--kit-surface); }
.k3-sec--light .k3-mcard__img { background: #11161A; }
.k3-sec--light .k3-ecard__img, .k3-sec--light .k3-slot { background: #71737B; color: #E7E8E9; }

/* one line, not two, where the touch bar's bottom border meets the image nav's top border (GeoCloud overlap fix) */
.k3-touch + .k3-inav { margin-top: -1px; }
/* light sections: lines stay light (#B9B9BD) but text that borrowed the stroke colour uses brand 9C (#71737B) */
.k3-sec--light .k3-step__h, .k3-sec--light .k3-use__h, .k3-sec--light .k3-logo, .k3-sec--light .k3-ask__note { color: #71737B; }
.k3-sec--light .k3-ask__field input::placeholder { color: #71737B; }
.k3-touch { border-bottom: 0; }   /* the image nav below draws the line; no double rule */

/* light sections reach into the left frame too (as on GeoCloud): background and the thin rules run to the page edge; the vertical page line stays on top */
.k3-sec--light { isolation: isolate; }
.k3-sec--light::before { content: ""; position: absolute; z-index: -1; left: calc((var(--k3-line) + 1px) * -1); width: calc(var(--k3-line) + 1px); top: -1px; bottom: -1px; box-sizing: border-box; background: var(--kit-ground); border-top: 1px solid var(--kit-line); border-bottom: 1px solid var(--kit-line); pointer-events: none; }
.k3-content > .k3-sec--light::before { display: none; }
@media (max-width: 1024px) { .k3-content > .k3-sec--light::before { display: block; } }
.k3-nav-col__strip { border-bottom: 1px solid #B9B9BD; }

/* ============================================================ frame rules
   Every horizontal thin rule runs across the left frame too (GeoCloud), over the dark or light frame, under the vertical page line.
   One rule per boundary: the hero's own bottom line is dropped, the next block's top border draws it (no 2 px lines). */
.k3-header::after { left: 0; }
.k3-hero::after { display: none; }
.k3-hero--photo .k3-hero__artrow, .k3-hero--event .k3-hero__artrow, .k3-hero--outline .k3-hero__outline-row { border-bottom: 0; }
.k3-touch, .k3-ask { position: relative; }
.k3-sec::after, .k3-touch::after, .k3-inav::after, .k3-ask::after, .k3-more::after { content: ""; position: absolute; left: calc((var(--k3-line) + 1px) * -1); width: calc(var(--k3-line) + 1px); top: -1px; height: 1px; background: var(--kit-line); pointer-events: none; }
.k3-content > .k3-sec::after { display: none; }
@media (max-width: 1024px) { .k3-content > .k3-sec::after { display: block; } }

/* Cal.com inline booking embed (Event page): the iframe sizes itself; keep room while it loads */
.k3-cal { width: 100%; min-height: 640px; min-width: 0; overflow: visible; }

/* MANTIS Studio: one big software view + six output tabs (Option A, Paul 2026-10-20) */
.k3-sv { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.k3-sv__stage { position: relative; background: #11161A; border: 1px solid var(--k3-stroke); border-radius: var(--k3-r); overflow: hidden; aspect-ratio: 1516 / 780; display: flex; align-items: center; justify-content: center; }
.k3-sv__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s; }
.k3-sv__stage--fit img { object-fit: contain; }
.k3-sv__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #71737B; color: #fff; font-size: 18px; }
.k3-sv__view { position: relative; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.k3-sv__cap { position: absolute; left: 24px; bottom: 24px; max-width: 460px; background: #11161A; color: #fff; border-radius: var(--k3-r); padding: 24px 28px; display: flex; flex-direction: column; gap: 8px; }
.k3-sv__cap h3 { color: #fff; margin: 0; }
.k3-sv__cap p { color: #D9DBDD; font-size: 16px; line-height: 1.3; margin: 0; }
.k3-sv__tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }   /* one column per output, however many there are */
.k3-sv__tab { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; text-align: left; background: none; border: 0; padding: 0 24px 8px 0; cursor: pointer; font: inherit; color: var(--kit-text-secondary); }
.k3-sv__tab:hover { background: none; color: var(--kit-text); }
.k3-sv__line { align-self: stretch; height: 1px; background: var(--k3-stroke); margin-bottom: 12px; }
.k3-sv__tab img { opacity: .55; transition: opacity .2s; }
.k3-sv__n { color: #71737B; transition: color .2s; }
.k3-sv__s { font-size: 14px; line-height: 1.3; color: var(--kit-text-secondary); }
.k3-sv__tab.is-on .k3-sv__line { height: 3px; margin-top: -1px; margin-bottom: 10px; background: var(--kit-accent); }
.k3-sv__tab.is-on img { opacity: 1; }
.k3-sv__tab.is-on .k3-sv__n, .k3-sv__tab:hover .k3-sv__n { color: var(--kit-text); }
@media (max-width: 1440px) { .k3-sv__s { display: none; } .k3-sv__n { font-size: 16px; } .k3-sv__tab { padding-right: 16px; } .k3-sv__tab img { width: 32px; height: 32px; } .k3-sv__cap { max-width: 400px; padding: 18px 22px; } .k3-sv__cap h3 { font-size: 22px; } .k3-sv__cap p { font-size: 15px; } }
@media (max-width: 1024px) { .k3-sv__stage { aspect-ratio: 875 / 451; } .k3-sv__cap { position: static; max-width: none; background: none; color: var(--kit-text); padding: 0; } .k3-sv__cap h3 { color: var(--kit-text); } .k3-sv__cap p { color: var(--kit-text-secondary); font-size: 16px; } .k3-sv { gap: 24px; } .k3-sv__stage { margin-bottom: 0; } }
@media (max-width: 880px) { .k3-sv__tabs { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; } }
@media (max-width: 480px) { .k3-sv__stage { aspect-ratio: 313 / 194; } .k3-sv__tabs { display: flex; overflow-x: auto; scroll-snap-type: x proximity; gap: 0; } .k3-sv__tab { flex: 0 0 132px; scroll-snap-align: start; } }

.k3-facts__lead { color: var(--kit-text-secondary); font-size: 16px; line-height: 1.3; margin: -22px 0 -6px; }
.k3-facts.is-swap { opacity: 0; } .k3-facts { transition: opacity .2s; }

/* pre-rendered sensor viewer (Blender stills): the frame has the viewer's own ratio, so nothing is cropped; the dots are placed from spin.json */
.k3-viewer--spin .k3-viewer__stage { cursor: grab; transform-origin: 50% 50%; touch-action: pan-y; outline: none; }
.k3-viewer--spin .k3-viewer__stage:focus-visible { outline: 2px solid var(--kit-text); outline-offset: -4px; }
.k3-viewer--spin .k3-viewer__stage > img { object-fit: contain; display: block; transition: none; -webkit-user-drag: none; }
.k3-viewer--spin .k3-hot { transition: opacity .25s, border-color .2s; }
.k3-viewer--spin.is-exploded .k3-viewer__pill--b { visibility: hidden; }

/* section heading: eyebrow, lead paragraph, icon slot left of title + text (Kevin 21 Oct) */
.k3-head__eb { font-size: 11px; line-height: 1.3; letter-spacing: .18em; text-transform: uppercase; color: var(--kit-text-secondary); }
.k3-head p.k3-head__lead { font-size: clamp(18px, calc(14px + .42vw), 24px); line-height: 1.35; color: var(--kit-text-secondary); }
.k3-head--row { flex-direction: row; align-items: flex-start; gap: 40px; }
.k3-head__txt { display: flex; flex-direction: column; gap: 16px; min-width: 0; flex: 1 1 auto; }
.k3-head__icon { flex: 0 0 96px; width: 96px; height: 96px; box-sizing: border-box; }
.k3-head__icon--ph { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--kit-text-secondary); border-radius: 8px; font-size: 11px; color: var(--kit-text-secondary); text-align: center; }
@media (max-width: 1440px) { .k3-head--row { gap: 28px; } .k3-head__icon { flex-basis: 80px; width: 80px; height: 80px; } }
@media (max-width: 1024px) { .k3-head__icon { flex-basis: 72px; width: 72px; height: 72px; } }
@media (max-width: 767px) { .k3-head--row { flex-direction: column; gap: 20px; } .k3-head__icon { flex-basis: 56px; width: 56px; height: 56px; font-size: 9px; } }

/* sensor spec drawing (Figma v3.11): callouts either side of the outline, leader lines in a 1516 x 524 overlay; stacked grid at 900px and down */
.k3-sd { display: flex; flex-direction: column; gap: 38px; }
.k3-sd__t { text-align: center; color: var(--kit-text); }
.k3-sd__art { position: relative; width: 100%; aspect-ratio: 1516 / 524; container-type: inline-size; }
.k3-sd__o { position: absolute; left: 27.97%; top: 0; width: 44%; height: auto; }
.k3-sd__l { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* no vector-effect: with non-scaling-stroke Chrome measures the pathLength dash in screen px, so the drawn line stopped short of its red dot at wide screens (Paul, 28 Oct) */
.k3-sd__l line { stroke: var(--kit-text-secondary); stroke-width: 1; }
.k3-sd__l circle { fill: var(--kit-red, #ff0033); }
.k3-sd__c { position: absolute; width: 19.8%; display: flex; flex-direction: column; gap: 4px; }
.k3-sd__c--l { text-align: right; align-items: flex-end; width: auto; max-width: 27%; }
.k3-sd__c b { font-weight: 400; font-size: clamp(18px, 2.24cqw, 34px); line-height: 1.2; color: var(--kit-text); white-space: nowrap; }
.k3-sd__c > span { font-size: clamp(11px, .99cqw, 15px); line-height: 1.3; color: var(--kit-text-secondary); }
@media (max-width: 880px)   /* audit 6 Nov: was 900, aligned to the kit 880 boundary */
   {
  .k3-sd__art { aspect-ratio: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; }
  .k3-sd__o { position: static; grid-column: 1 / -1; width: min(440px, 100%); margin: 0 auto 8px; }
  .k3-sd__l { display: none; }
  .k3-sd__c, .k3-sd__c--l { position: static; width: auto; max-width: none; text-align: left; align-items: flex-start; }
  .k3-sd__c b { font-size: 22px; } .k3-sd__c > span { font-size: 13px; }
}
@media (max-width: 600px) { .k3-sd__art { grid-template-columns: repeat(2, minmax(0, 1fr)); } .k3-sd__o { width: min(270px, 100%); } .k3-sd__c b { font-size: 20px; } .k3-sd__c > span { font-size: 12px; } }

/* 23 Oct (Kevin 21 Oct): film strip in About, chip icons, transparent viewer, spec drawing animation */
.k3-card__ic { display: block; width: 28px; height: 28px; margin-bottom: 8px; }
.k3-viewer--spin { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.k3-viewer--spin .k3-spin__img { mix-blend-mode: screen; }
.k3-sd__o { display: block; }
.k3-sd__o path { stroke-dasharray: 1; }
.k3-sd__l line { stroke-dasharray: 1; }
.k3-sd.is-ready:not(.is-in) .k3-sd__o path { stroke-dashoffset: 1; }
.k3-sd.is-ready .k3-sd__o path { transition: stroke-dashoffset .8s cubic-bezier(.22, .61, .36, 1) calc(var(--i, 0) * 28ms); }
.k3-sd.is-in .k3-sd__o path { stroke-dashoffset: 0; }
.k3-sd.is-ready:not(.is-in) .k3-sd__l line { stroke-dashoffset: 1; }
.k3-sd.is-ready .k3-sd__l line { transition: stroke-dashoffset .6s ease var(--d, .9s); }
.k3-sd.is-in .k3-sd__l line { stroke-dashoffset: 0; }
.k3-sd.is-ready:not(.is-in) .k3-sd__l circle { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2); }
.k3-sd.is-ready .k3-sd__l circle { transition: opacity .3s ease calc(var(--d, .9s) + .45s), transform .3s ease calc(var(--d, .9s) + .45s); transform-box: fill-box; transform-origin: center; }
.k3-sd.is-ready:not(.is-in) .k3-sd__c { opacity: 0; transform: translateY(6px); }
.k3-sd.is-ready .k3-sd__c { transition: opacity .5s ease var(--d, .9s), transform .5s ease var(--d, .9s); }
@media (prefers-reduced-motion: reduce) { .k3-sd * { transition: none !important; } }

.k3-fstrip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 100%; gap: 12px; height: 240px; }
.k3-fstrip img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
@media (max-width: 1440px) { .k3-fstrip { height: 11.7vw; } }
@media (max-width: 1024px)   /* audit 6 Nov: was 1100, aligned to the kit 1024 boundary */
   { .k3-fstrip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .k3-fstrip img:nth-child(5) { display: none; } }
@media (max-width: 880px)   /* audit 6 Nov: was 900, aligned to the kit 880 boundary */
   { .k3-fstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .k3-fstrip img:nth-child(4) { display: none; } }
@media (max-width: 767px) { .k3-fstrip { gap: 8px; height: 28vw; } }
.k3-sd__c b .k3-cnt { font: inherit; color: inherit; }
.k3-viewer--spin .k3-viewer__stage { will-change: auto; }

/* 23 Oct (Paul): Product has a standard photo hero; art sits twice the Shots offset further right (Figma 1440: art x 837, 1200: 694) */
@media (min-width: 1025px) and (max-width: 1440px) {
  .k3-hero--wider .k3-hero__art { right: -14.8vw; }
  .k3-hero--wider .k3-hero__copy { width: calc(100% - var(--k3-hero) * 920 / 700 - var(--k3-tx) - 80px + 14.8vw); }
}

/* 4 Nov (Kevin): MANTIS specs per shot under the featured player, like the trade-press deck slide: red tick on a hairline, big number + unit, label */
.k3-sspec, .k3-sec__in > .k3-sspec { display: flex; flex-direction: column; gap: 16px; margin: 56px 0 64px; }   /* beats kit-v4's > * + * margin reset */
.k3-sspec ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.k3-sspec li { position: relative; display: flex; flex-direction: column; gap: 6px; padding-top: 20px; border-top: 1px solid var(--k3-stroke); }
.k3-sspec li::before { content: ""; position: absolute; left: 0; top: -2px; width: 56px; height: 3px; background: var(--kit-accent); }
.k3-sspec b { font-weight: 400; color: var(--kit-text); white-space: nowrap; }
.k3-sspec b small { font-size: 18px; font-weight: 400; margin-left: 6px; }
.k3-sspec span { color: var(--kit-text-secondary); font-size: 16px; line-height: 1.3; }
.k3-sspec ul { transition: opacity .2s; } .k3-sspec.is-swap ul { opacity: 0; }
@media (max-width: 1024px) { .k3-sspec ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; } }
@media (max-width: 767px) { .k3-sspec, .k3-sec__in > .k3-sspec { margin: 32px 0 40px; } .k3-sspec b small { font-size: 14px; } .k3-sspec span { font-size: 14px; } }

/* ---- shot viewer (Shots page, Paul 4 Nov 2026): shot, description, MANTIS specs and the chooser fit one screen at every width ----
   the player width is worked out from the screen height (what is left after specs + chooser), capped so the description keeps a column;
   the description column scrolls inside itself when it is longer than the player + specs next to it */
.k3-shotv { --fit: calc(100svh - 48px); --pick-h: clamp(56px, 9svh, 104px); --below: 170px;
  display: grid; grid-template-columns: max(40%, min(calc((var(--fit) - var(--below)) * 16 / 9), 62%)) minmax(0, 1fr);
  grid-template-areas: "media desc" "pick desc"; grid-template-rows: auto 1fr; gap: 24px 56px; min-width: 0; }
.k3-shotv .k3-stripwrap { align-self: start; }
.k3-shotv__media { grid-area: media; min-width: 0; }
.k3-shotv .k3-video { border-radius: 8px; }
.k3-shotv__desc { grid-area: desc; position: relative; min-width: 0; container-type: inline-size; min-height: min(var(--fit), 720px); }   /* the column may run past the chooser so the description has room; the extra goes under the chooser */
.k3-shotv__col { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 20px; }
.k3-shotv__scroll { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--k3-stroke) transparent; padding-right: 12px; }   /* Paul 4 Nov: specs + arrows follow Delivered to directly; the description only shrinks (and scrolls) when the screen is short */
.k3-shotv__scroll.is-over { padding-bottom: 28px; -webkit-mask-image: linear-gradient(#000 calc(100% - 32px), transparent); mask-image: linear-gradient(#000 calc(100% - 32px), transparent); }
.k3-shotv .k3-facts { gap: 20px; }
.k3-shotv .k3-facts ul { gap: 16px; }
.k3-shotv .k3-facts__lead { margin: -6px 0 0; }
.k3-shotv .k3-sspec, .k3-sec__in .k3-shotv .k3-sspec { grid-area: specs; margin: 0; gap: 10px; min-width: 0; }
.k3-shotv .k3-sspec ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
@container (min-width: 560px) { .k3-shotv .k3-sspec ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.k3-shotv .k3-sspec { flex: 0 0 auto; }
.k3-shotv__nav { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; }
.k3-shotv__nav button { all: unset; box-sizing: border-box; width: 44px; height: 44px; border: 1px solid var(--kit-text); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; cursor: pointer; transition: background-color .25s, color .25s; }
.k3-shotv__nav button:hover { background: var(--kit-text); color: var(--kit-ground); }
.k3-shotv__nav button:focus-visible { outline: 2px solid var(--kit-text); outline-offset: 3px; }
.k3-shotv__count { font-size: 14px; letter-spacing: .08em; color: var(--kit-text-secondary); min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.k3-shotv__count b { font-weight: 400; color: var(--kit-text); }
.k3-shotv .k3-sspec li { padding-top: 12px; gap: 2px; }
.k3-shotv .k3-sspec b { font-size: clamp(26px, 2.1vw, 40px); line-height: 1.15; }
.k3-shotv .k3-sspec b small { font-size: 14px; }
.k3-shotv .k3-sspec span { font-size: 14px; }
.k3-shotv .k3-stripwrap, #featured .k3-shotv .k3-stripwrap { grid-area: pick; gap: 10px; min-width: 0; margin: 0; }
.k3-shotv .k3-strip { gap: 10px; }
.k3-strip.k3-strip--titled button, .k3-strip.k3-strip--titled button.is-on { aspect-ratio: auto; display: flex; flex-direction: column; gap: 6px; border: 0; border-radius: 0; overflow: visible; min-width: 0; }
.k3-strip--titled .k3-strip__img { display: block; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; border: 1px solid transparent; transition: border-color .25s; }
.k3-strip--titled .k3-strip__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter .25s; }
.k3-strip--titled button.is-on .k3-strip__img { border-color: #fff; }
.k3-strip--titled button:not(.is-on):hover .k3-strip__img { border-color: var(--k3-stroke); }
.k3-strip--titled button:not(.is-on):hover img { filter: brightness(1.12); }
.k3-strip--titled .k3-strip__t { font-size: 13px; line-height: 1.25; color: var(--kit-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .25s; }
.k3-strip--titled button.is-on .k3-strip__t, .k3-strip--titled button:hover .k3-strip__t { color: var(--kit-text); }
@media (max-width: 1440px) { .k3-shotv { column-gap: 40px; } .k3-shotv .k3-facts h3 { font-size: 28px; } }
@media (max-width: 1024px) { .k3-shotv { grid-template-columns: max(44%, min(calc((var(--fit) - var(--below)) * 16 / 9), 58%)) minmax(0, 1fr); gap: 20px 28px; }
  .k3-shotv .k3-facts h3 { font-size: 24px; } .k3-shotv .k3-facts { gap: 16px; }
  .k3-strip--titled .k3-strip__t { white-space: normal; font-size: 12px; } }   /* narrow tiles: titles wrap instead of cutting off */
@media (max-width: 767px) {
  .k3-shotv { --fit: calc(100svh - 24px); --pick-h: 52px; height: var(--fit); min-height: 560px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "media" "desc" "pick"; gap: 14px; }
  .k3-shotv__desc { min-height: 0; } .k3-shotv__col { gap: 12px; } .k3-shotv .k3-sspec ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .k3-shotv__nav button { width: 36px; height: 36px; font-size: 15px; } .k3-shotv__nav { gap: 12px; }
  .k3-shotv__scroll { padding-right: 6px; }
  .k3-shotv .k3-facts h3 { font-size: 22px; } .k3-shotv .k3-facts { gap: 12px; } .k3-shotv .k3-facts ul { gap: 10px; } .k3-shotv .k3-facts__lead, .k3-shotv .k3-facts li span { font-size: 15px; }
  .k3-shotv .k3-sspec { gap: 6px; } .k3-shotv .k3-sspec ul { gap: 8px; } .k3-shotv .k3-sspec li { padding-top: 8px; }
  .k3-shotv .k3-sspec b { font-size: 20px; } .k3-shotv .k3-sspec b small { display: block; font-size: 11px; margin: 0; line-height: 1.2; } .k3-shotv .k3-sspec span { font-size: 11px; line-height: 1.2; }
  .k3-strip.k3-strip--titled { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .k3-strip.k3-strip--titled button { flex: 0 0 92px; scroll-snap-align: start; }
  .k3-strip--titled .k3-strip__img { aspect-ratio: auto; height: var(--pick-h); }
  .k3-shotv .k3-stripwrap { gap: 6px; } .k3-strip--titled .k3-strip__t { font-size: 11px; } }

/* Product 3D viewer without a frame, pill above the list (Kevin call 5 Nov) */
.k3-sec .k3-viewer--rt { border: 0 !important; background: transparent !important; border-radius: 0; }
.k3-hotpill { display: inline-flex; align-self: flex-start; padding: 8px 14px; margin-bottom: 16px; border: 1px solid #fff; border-radius: 999px; font-size: 12px; line-height: 1.3; color: #fff; }
.k3-hotwrap { display: flex; flex-direction: column; }
/* sub-heads inside a section (Product Features): room above and below (Paul 5 Nov: Studio outputs title had no space under it) */
.k3-sec__in > h3.k3-t24 { margin: 64px 0 32px; }
.k3-sec__in > h3.k3-t24:first-of-type { margin-top: 48px; }

/* ---- Product v9 (5 Nov): sticky outline stage, rows, pair, file types ---- */
.k3-stage { position: relative; overflow-x: clip; border-top: 1px solid var(--kit-line); }
.k3-stage__in { display: grid; grid-template-columns: minmax(0, 660px) minmax(0, 1fr); padding: 0 0 0 96px; }
.k3-stage__txt { padding: clamp(60px, 6.5vw, 126px) 0 clamp(80px, 10vw, 180px); display: flex; flex-direction: column; }
.k3-stage__txt h1 { margin: 0; font-weight: 400; font-size: clamp(44px, 6vw, 96px); line-height: 1.2; }
.k3-stage__lead { margin-top: clamp(80px, 12vw, 230px); display: flex; flex-direction: column; gap: 14px; }
.k3-stage__lead p { margin: 0; max-width: 11em; }
.k3-stage__rows { margin-top: clamp(40px, 5vw, 80px); }
.k3-stage__row { display: grid; grid-template-columns: 50px 1fr; border-top: 1px solid var(--kit-line); padding: 28px 0 80px; }
.k3-stage__row:last-child { border-bottom: 1px solid var(--kit-line); }
.k3-stage__n { font-size: 14px; color: var(--kit-accent); padding-top: 8px; }
.k3-stage__row h3 { margin: 0 0 10px; font-weight: 400; }
.k3-stage__row p { margin: 0; color: var(--kit-text-secondary); max-width: 560px; }
.k3-stage__art { position: relative; margin-left: clamp(24px, 15.8vw, 304px); padding: 56px 0 96px; }
.k3-stage__sticky { position: sticky; top: calc(var(--k3-hdr, 80px) + 56px); width: min(820px, 43vw); }
.k3-stage__sticky svg { display: block; width: 100%; height: auto; }
.k3-stage__render { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; pointer-events: none; }
.k3-stage__sticky svg.k3-draw { position: relative; }
@media (max-width: 880px) {
  .k3-stage__in { display: block; padding: 0 24px 0 48px; }
  .k3-stage__txt { padding: 48px 0 32px; }
  .k3-stage__lead { margin-top: 40px; }
  .k3-stage__row { padding-bottom: 32px; }
  .k3-stage__art { margin: 0 0 40px; padding: 0; }
  .k3-stage__sticky { position: relative; top: auto; width: 100%; }
}
.k3-bfp.k3-bfp--rows { grid-template-columns: 1fr; }
.k3-bfp--rows .k3-bfp__i { grid-template-columns: minmax(150px, 420px) 1fr; min-height: 220px; }
.k3-bfp--rows .k3-bfp__i div span { color: var(--kit-accent); }
.k3-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.k3-pair__c { display: flex; flex-direction: column; gap: 10px; }
.k3-pair__img { border-radius: 14px; overflow: hidden; aspect-ratio: 690/420; background: #000; }
.k3-pair__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k3-pair__tag { margin-top: 18px; font-size: 14px; color: var(--kit-accent); }
.k3-pair__c h3 { margin: 0; font-weight: 400; }
.k3-pair__c p { margin: 0; color: var(--kit-text-secondary); max-width: 560px; }
.k3-pair__ttl { display: flex; align-items: center; gap: 16px; }
.k3-pair__ttl img { width: 48px; height: 48px; flex: none; }
.k3-pair__btn { margin-top: 14px; }
@media (max-width: 880px) { .k3-pair { grid-template-columns: 1fr; gap: 32px; } .k3-bfp--rows .k3-bfp__i { grid-template-columns: 1fr; } }
.k3-ftypes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.k3-ftypes__i { display: grid; grid-template-columns: 28px 1fr; column-gap: 16px; border-top: 1px solid var(--kit-line); padding-top: 20px; align-items: start; }
.k3-ftypes__i img { grid-row: 1 / 3; width: 28px; height: 28px; margin-top: 2px; }
.k3-ftypes__i h3 { margin: 0; font-weight: 400; }
.k3-ftypes__i p { margin: 8px 0 0; color: var(--kit-text-secondary); font-size: 14px; }
@media (max-width: 880px) { .k3-ftypes { grid-template-columns: 1fr; gap: 24px; } }

.k3-cn1 { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.k3-cn1__txt { display: flex; flex-direction: column; gap: 18px; }
.k3-cn1__lead { margin: 0; font-size: clamp(18px, 1.4vw, 24px); line-height: 1.5; }
.k3-cn1__note { margin: 0; color: var(--kit-text-secondary); }
.k3-cn1__rows { margin-top: 12px; }
.k3-cn1__row { display: grid; grid-template-columns: 44px 1fr; border-top: 1px solid var(--kit-line); padding: 20px 0 22px; }
.k3-cn1__row > span { font-size: 18px; padding-top: 3px; }
.k3-cn1__row h3 { margin: 0 0 6px; font-weight: 400; }
.k3-cn1__row p { margin: 0; color: var(--kit-text-secondary); font-size: 14px; }
.k3-cn1__img img { display: block; width: 100%; height: auto; }
@media (max-width: 1024px)   /* audit 6 Nov: was 1100, aligned to the kit 1024 boundary */
   { .k3-cn1 { grid-template-columns: 1fr; } }

.k3-ftypes__i img { filter: invert(1); }
.k3-cn1 { padding: 72px 0; }
.k3-features-first { margin-top: 40px; }
.k3-viewer--rt .k3-viewer__stage { height: 100%; }
.k3-viewer--rt::after { display: none !important; }

/* kit-v4.css: the MANTIS v4.6 design-system alignment (Figma page v4.6, Hexagon DS components as mapped by Rupa Parekh).
   Loaded after kit-v3.css and only overrides it, so removing this file from tools/build.py brings v3 back.
   Values are the 1920 frame values; responsive steps follow v4.6: H2 44 at 1920-1200, 36 at 1024, 32 at 880, 28 at 390, component padding 40/40/40/32/32/24.
   Colours stay on --kit-* variables; the DS greys (#E7E8E9 light section, #F5F5F6 closed feature, #41454F card, #999BA1 card stroke)
   are named here once as --v4-* so a skin can override them. */

:root {
  --v4-pad: 40px; --v4-h2: 44px; --v4-h2-lh: 48px; --v4-nav: 420px;
  --v4-card: #41454F; --v4-card-stroke: #999BA1; --v4-feature: #F5F5F6; --v4-light: #E7E8E9; --v4-dark-text: #11161A;
  --v4-crop: polygon(0 0, 40.9% 0, 96.3% 23.9%, 100% 28.8%, 100% 100%, 38.9% 100%, 0 82.8%);   /* Rupa's angled image crop (582 x 720) */
  --v4-tile: polygon(0 0, 100% 0, 100% 65.9%, 83.5% 100%, 0 100%);                               /* image-nav tile corner (450 x 293) */
}
@media (max-width: 1440px) { :root { --v4-h2: 44px; --v4-h2-lh: 48px; --v4-nav: 240px; } }
@media (max-width: 1200px) { :root { --v4-h2: 44px; --v4-h2-lh: 48px; --v4-nav: 220px; } }
@media (max-width: 1024px) { :root { --v4-h2: 34px; --v4-h2-lh: 40px; --v4-pad: 32px; --v4-nav: 0px; } }
@media (max-width: 880px)  { :root { --v4-h2: 27px; --v4-h2-lh: 32px; } }
@media (max-width: 767px)  { :root { --v4-h2: 28px; --v4-h2-lh: 34px; --v4-pad: 24px; } }
:root { --k3-nav: var(--v4-nav); }

/* ------------------------------------------------------------ buttons (Rupa pt 1: Primary label and arrow black on red) */
.k3-page .k3-btn, .k3-header .k3-btn { gap: 8px; padding: 16px 48px; font: 400 18px/28px var(--kit-font); color: var(--kit-on-accent) !important; }
.k3-page .k3-btn::after, .k3-header .k3-btn::after { width: 23px; height: 18px; flex: 0 0 23px; margin: 11px 8px; }
.k3-page .k3-btn:hover, .k3-page .k3-btn:active { background: var(--kit-accent-deep); color: #FFFFFF !important; padding-right: 48px; }   /* hover: Carmine, white label (Paul) */
/* Secondary: red outline, white label (header CTA, Rupa pt 2: no Primary CTA in the header) */
.k3-page .k3-btn--sec, .k3-header .k3-header__cta { background: transparent !important; color: var(--kit-text) !important; box-shadow: inset 0 0 0 2px var(--kit-accent); }
.k3-page .k3-btn--sec:hover, .k3-header .k3-header__cta:hover { background: var(--kit-accent-deep) !important; color: #FFFFFF !important; box-shadow: inset 0 0 0 2px var(--kit-accent-deep); }
.k3-header .k3-header__cta { padding: 12px 40px; font-size: 16px; line-height: 24px; }
.k3-header .k3-header__cta::after { width: 14px; height: 11px; flex: 0 0 14px; margin: 6px 5px; }
.k3-sec--light .k3-btn--sec { --kit-text: var(--v4-dark-text); }
/* text link with arrow (CTA band) */
.k3-link { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; line-height: 24px; color: var(--kit-text); }
.k3-link::after { content: ""; width: 23px; height: 18px; margin: 11px 8px; background: currentColor; -webkit-mask: var(--k3-arrow) no-repeat center/contain; mask: var(--k3-arrow) no-repeat center/contain; transition: transform .4s ease; }
.k3-link:hover::after { transform: translateX(6px); }
@media (max-width: 767px) { .k3-page .k3-btn { padding: 12px 32px; font-size: 16px; line-height: 24px; } .k3-page .k3-btn::after { margin: 3px 4px; } }

/* ------------------------------------------------------------ hero (DS Hero) */
.k3-hero__copy { gap: 32px; }
.k3-hero__copy h1 { font-size: clamp(36px, calc(20px + 3.02vw), 78px); line-height: 1.14; }
.k3-hero__copy p { font-size: 20px; line-height: 28px; }
@media (max-width: 767px) { .k3-hero__copy p { font-size: 16px; line-height: 24px; } }

/* ------------------------------------------------------------ sections and headings (Rupa pt 3 + 4) */
.k3-sec__in { gap: 0; padding: 0; }
.k3-sec__in > * { padding-left: var(--v4-pad); padding-right: var(--v4-pad); }
.k3-sec__in > :last-child { padding-bottom: var(--v4-pad); }
.k3-content > .k3-sec > .k3-sec__in { padding-left: 0; padding-right: 0; }
.k3-head { gap: 24px; padding-top: var(--v4-pad); padding-bottom: var(--v4-pad); }
.k3-head h2, .k3-page .k3-head .k3-t48, .k3-page .k3-head .k3-t56 { font-size: var(--v4-h2); line-height: var(--v4-h2-lh); }
.k3-head p { font-size: 20px; line-height: 28px; color: var(--kit-text); }
.k3-head__eb { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--kit-text-secondary); }
@media (max-width: 767px) { .k3-head p { font-size: 16px; line-height: 24px; } }
.k3-sec__in > .k3-head + * { padding-top: 0; }
.k3-sec__in > * + * { margin-top: 0; }
.k3-sec__in > .k3-grid, .k3-sec__in > .k3-split, .k3-sec__in > .k3-sv, .k3-sec__in > .k3-faq, .k3-sec__in > .k3-viewrow, .k3-sec__in > .k3-sd, .k3-sec__in > .k3-vfeat, .k3-sec__in > .k3-ccard, .k3-sec__in > .k3-logos { margin-bottom: var(--v4-pad); }
.k3-sec__in > .k3-sd { margin-top: var(--v4-pad); }

/* light sections: the DS Alternate (grey) and white modes */
.k3-sec--light { --kit-ground: var(--v4-light); }
.k3-sec--light.k3-tone-white { --kit-ground: #FFFFFF; }
.k3-sec--light .k3-head p { color: var(--kit-text); }

/* side nav column: v3 behaviour kept (strips follow the light sections, dark text beside them, red bar), 20 px type as in v4.6 */
.k3-nav-col a { font-size: 20px; line-height: 28px; padding-top: 12px; padding-bottom: 12px; }
.k3-nav-col a.is-active::before { top: 14px; }

/* ------------------------------------------------------------ Content Object row (What it is / does / helps) */
#what .k3-grid--3 { gap: 0; padding-left: 0; padding-right: 0; margin-bottom: 0; border-top: 0; }
#what .k3-grid--3 .k3-card { background: var(--kit-ground); border: 0; border-right: 1px solid var(--kit-line); border-top: 1px solid var(--kit-line); border-bottom: 1px solid var(--kit-line); border-radius: 0; padding: var(--v4-pad); gap: 16px; }
#what .k3-grid--3 .k3-card:last-child { border-right: 0; }
#what .k3-grid--3 .k3-card h3 { font-size: 26px; line-height: 36px; }
#what .k3-grid--3 .k3-card p { color: var(--kit-text-secondary); font-size: 16px; line-height: 24px; }
@media (max-width: 880px) { #what .k3-grid--3 { grid-template-columns: 1fr; } #what .k3-grid--3 .k3-card { border-right: 0; border-top: 0; } }

/* ------------------------------------------------------------ Common Card (photo cards) */
.k3-grid { gap: 24px; }
.k3-sec__in > .k3-grid { padding-top: var(--v4-pad); }
#what .k3-grid--3 + .k3-grid { padding-top: var(--v4-pad); }
.k3-mcard, .k3-ecard { position: relative; background: var(--v4-card); border: 1px solid var(--v4-card-stroke); border-radius: 8px; padding-right: 24px; overflow: hidden; }
.k3-mcard__img, .k3-ecard__img { border: 0; border-bottom-right-radius: 8px; background: #2A2E33; }
.k3-mcard__body, .k3-ecard__body { padding: 24px 0 72px 24px; gap: 24px; }
.k3-mcard__body h3, .k3-ecard__body h3 { font-size: 26px; line-height: 36px; color: #FFFFFF; }
.k3-mcard__body p, .k3-ecard__body p { font-size: 16px; line-height: 24px; color: #FFFFFF; }
.k3-mcard::after { content: ""; position: absolute; right: 24px; bottom: 24px; width: 23px; height: 18px; background: #FFFFFF; -webkit-mask: var(--k3-arrow) no-repeat center/contain; mask: var(--k3-arrow) no-repeat center/contain; }
.k3-ecard .k3-ecard__go { right: 24px; bottom: 24px; }
.k3-sec--light .k3-mcard, .k3-sec--light .k3-ecard { background: #FFFFFF; border-color: var(--v4-card-stroke); }
.k3-sec--light .k3-mcard__body h3, .k3-sec--light .k3-mcard__body p, .k3-sec--light .k3-ecard__body h3, .k3-sec--light .k3-ecard__body p { color: var(--v4-dark-text); }
.k3-sec--light .k3-mcard::after { background: var(--v4-dark-text); }
.k3-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 880px) { .k3-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .k3-grid--4, .k3-grid--3, .k3-grid--2 { grid-template-columns: 1fr; } .k3-mcard__body h3, .k3-ecard__body h3 { font-size: 22px; line-height: 30px; } }

/* ------------------------------------------------------------ Feature list + Rupa's angled image (Where used, On set) */
.k3-split { gap: 40px; align-items: start; }
.k3-split--home { grid-template-columns: minmax(0, 582fr) minmax(0, 798fr); }
.k3-split--home .k3-split__img { order: -1; }
.k3-split--prod { grid-template-columns: minmax(0, 766fr) minmax(0, 582fr); gap: 72px; }
.k3-split__img { height: auto; aspect-ratio: 582 / 720; border: 0; border-radius: 0; background: transparent; clip-path: var(--v4-crop); }
.k3-steps { display: flex; flex-direction: column; gap: 12px; }
.k3-step, .k3-step:last-child { border: 0; border-radius: 8px; background: var(--v4-feature); padding: 24px; }
.k3-step.is-open { background: #FFFFFF; padding-bottom: 48px; }
.k3-step__n { display: none; }
.k3-step__h, .k3-sec--light .k3-step__h { color: var(--v4-dark-text); font-size: 26px !important; line-height: 36px !important; }
.k3-step__m, .k3-step.is-open .k3-step__m, .k3-step__t:hover .k3-step__m { color: var(--v4-dark-text); font-size: 20px; width: 20px; height: 20px; margin: 10px; }
.k3-step.is-open .k3-step__m { display: none; }
.k3-step__d > div, .k3-sec--light .k3-step__d > div { color: var(--v4-dark-text); font-size: 18px; line-height: 28px; }
.k3-step.is-open .k3-step__d > div { padding-top: 24px; }
@media (max-width: 880px) { .k3-split--home, .k3-split--prod { grid-template-columns: 1fr; } .k3-split__img { max-width: 445px; } .k3-split--prod .k3-split__img { order: -1; } }
@media (max-width: 767px) { .k3-split__img { display: none; } .k3-step__h, .k3-sec--light .k3-step__h { font-size: 20px !important; line-height: 28px !important; } }

/* ------------------------------------------------------------ Video feature (See the device): DS Video, caption under the player (Rupa pt 5) */
.k3-vfeat { display: flex; flex-direction: column; }
.k3-vfeat .k3-video { display: block; width: 100%; aspect-ratio: 1420 / 609; border-radius: 8px; overflow: hidden; }
.k3-vfeat .k3-video img { width: 100%; height: 100%; object-fit: cover; }
.k3-vfeat .k3-video__play { width: 84px; height: 84px; border-radius: 50%; background: #000000; }
.k3-vfeat__cap { display: flex; flex-direction: column; gap: 12px; padding: 24px 16px 0; }
.k3-vfeat__cap h3 { font-size: 18px; line-height: 28px; color: var(--kit-text); }
.k3-vfeat__cap p { font-size: 18px; line-height: 28px; color: var(--kit-text-secondary); }
.k3-vfeat__more { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; padding-top: var(--v4-pad); }
.k3-vfeat__more h3 { font-size: 32px; line-height: 40px; }
@media (max-width: 767px) { .k3-vfeat__more h3 { font-size: 24px; line-height: 32px; } .k3-vfeat__cap h3, .k3-vfeat__cap p { font-size: 16px; line-height: 24px; } }

/* ------------------------------------------------------------ Call out card (Already scanning): 1420 x 500 at 1920, copy left, photo right with Rupa's crop */
.k3-sec__in > .k3-ccard { margin: 0 var(--v4-pad) var(--v4-pad); padding: 0; }
.k3-ccard { display: grid; grid-template-columns: 1fr 1fr; background: var(--v4-card); border-radius: 8px; overflow: hidden; min-height: 500px; }
.k3-ccard__txt { padding: 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 36px; }
.k3-ccard__txt h3 { font-size: 36px; line-height: 42px; color: #F2F2F3; }
.k3-ccard__txt div { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.k3-ccard__txt p { font-size: 18px; line-height: 28px; color: #F2F2F3; }
.k3-ccard .k3-btn--sec { --kit-text: #FFFFFF; }
.k3-ccard__img { border-left: 1px solid var(--kit-line); padding: 0 0 24px 24px; display: flex; }
.k3-ccard__img img { width: 100%; height: 100%; object-fit: cover; clip-path: polygon(0 25.2%, .8% 29.8%, 32.9% 100%, 100% 100%, 100% 0, 0 0); clip-path: polygon(0 0, 100% 0, 100% 100%, 32.9% 100%, .8% 29.8%, 0 25.2%); }
@media (max-width: 880px) { .k3-ccard { grid-template-columns: 1fr; } .k3-ccard__img { border-left: 0; border-top: 1px solid var(--kit-line); padding: 0 0 24px 24px; } .k3-ccard__img img { aspect-ratio: 686 / 476; height: auto; } .k3-ccard__txt h3 { font-size: 28px; line-height: 34px; } }

/* ------------------------------------------------------------ Logo Rail (Partners, on white) */
.k3-logos { display: flex; gap: 24px; overflow: hidden; padding-left: 24px !important; padding-right: 0 !important; }
.k3-logo { flex: 0 0 180px; height: 180px; border: 0; border-radius: 8px; background: var(--v4-feature); color: #71737B; padding: 16px; box-sizing: border-box; text-align: center; }

/* ------------------------------------------------------------ Get in touch bar (DS Feature content item): its vertical line continues the side-nav divider, two thin lines run through it */
.k3-touch { margin-left: 0; position: relative; border-top: 0; border-bottom: 0; overflow: hidden; }
.k3-touch::before, .k3-touch::after { content: ""; position: absolute; left: var(--k3-line); right: 0; height: 1px; background: var(--kit-line); z-index: 2; }
.k3-touch::before { top: 0; } .k3-touch::after { bottom: 0; }
.k3-touch__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 24px 40px 24px 64px; margin-left: calc(var(--v4-nav) - 1px); min-height: 154px; box-sizing: border-box; border-left: 1px solid var(--kit-line); }
.k3-touch__in h2 { font-size: 36px; line-height: 42px; max-width: 1000px; }
.k3-touch__art { position: absolute; z-index: 0; top: 0; bottom: 0; left: calc(var(--v4-nav) - 1px); right: 0; pointer-events: none; }
.k3-touch__art svg { width: 100%; height: 100%; display: block; overflow: hidden; }
.k3-touch__art .hxdr-line-path { stroke: var(--kit-line); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
@media (max-width: 1024px) { .k3-touch__in { margin-left: calc(var(--k3-line) + 1px); border-left: 0; padding: 32px; } .k3-touch__in h2 { font-size: 28px; line-height: 34px; } .k3-touch__art { left: calc(var(--k3-line) + 1px); } }

/* ------------------------------------------------------------ Image Nav / 4-col (DS Content Objects, copy under the photo: Rupa pt 5) */
.k3-inav { border-top: 1px solid var(--kit-line); }
.k3-inav__c { height: auto; display: flex; flex-direction: column; background: var(--kit-ground); border-left: 1px solid var(--kit-line); overflow: visible; }
.k3-inav__img { padding-right: 24px; }
.k3-inav__c img { position: static; width: 100%; height: auto; aspect-ratio: 450 / 293; object-fit: cover; clip-path: var(--v4-tile); }
.k3-inav__txt { position: static; height: auto; padding: 40px; gap: 16px; background: none; flex: 1 1 auto; }
.k3-inav__txt h3 { font-weight: 400; font-size: 26px !important; line-height: 36px !important; }
.k3-inav__txt p { font-size: 16px; line-height: 24px; color: var(--kit-text-secondary); }
.k3-inav__go { align-self: flex-end; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.k3-inav__go::after { content: ""; width: 23px; height: 18px; background: #FFFFFF; -webkit-mask: var(--k3-arrow) no-repeat center/contain; mask: var(--k3-arrow) no-repeat center/contain; transition: transform .4s ease; }
.k3-inav__c:hover .k3-inav__go::after { transform: translateX(6px); }
.k3-inav__c:hover img { transform: none; }
@media (max-width: 1024px) { .k3-inav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .k3-inav__c:nth-child(3) { border-left: 0; } .k3-inav__c:nth-child(n+3) { border-top: 1px solid var(--kit-line); } }
@media (max-width: 767px) { .k3-inav { grid-template-columns: 1fr; } .k3-inav__c { border-left: 0; } .k3-inav__c + .k3-inav__c { border-top: 1px solid var(--kit-line); } .k3-inav__txt { padding: 24px; } }

/* ------------------------------------------------------------ FAQ (DS Accordion) */
.k3-faq summary { padding: 24px; font-size: 18px; line-height: 28px; }
.k3-faq summary::after { width: 20px; height: 20px; flex: 0 0 20px; -webkit-mask: none; mask: none; background:
  linear-gradient(currentColor, currentColor) center/20px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center/1.5px 20px no-repeat; color: var(--kit-text); }
.k3-faq details[open] summary::after { transform: none; background: linear-gradient(currentColor, currentColor) center/20px 1.5px no-repeat; }
.k3-faq .k3-faq__a { padding: 0 24px 24px; font-size: 18px; line-height: 28px; color: var(--kit-text); }

/* ------------------------------------------------------------ Studio and file-type chips on the grey section */
.k3-sec--light .k3-sv__view { border-radius: 8px; }
.k3-sec--light .k3-sv__cap { background: #2A2E33; }
.k3-sec--light .k3-grid--3 .k3-card { background: #FFFFFF; border: 1px solid #B9B9BD; border-radius: 4px; padding: 16px; gap: 8px; }

/* ------------------------------------------------------------ footer */
.k3-footer { border-top-width: .5px; }

/* ------------------------------------------------------------ About: Who is (H2 + intro row), and the Large Image Feature banner */
.k3-page .k3-hrow h2 { font-size: var(--v4-h2); line-height: var(--v4-h2-lh); }
.k3-hrow p { font-size: 20px; line-height: 28px; color: var(--kit-text); }
.k3-sec--bleed .k3-sec__in { padding-top: var(--v4-pad); gap: var(--v4-pad); }
.k3-sec--bleed .k3-pad { padding-left: var(--v4-pad); padding-right: var(--v4-pad); }
.k3-fstrip img { border-radius: 8px; }
.k3-more--v4 { padding: 80px 0 0; }
.k3-more--v4 .k3-more__in { height: auto; overflow: visible; }
.k3-more--v4 .k3-more__in::before { display: none; }
.k3-more--v4 .k3-more__in img { position: static; width: 100%; height: auto; aspect-ratio: 1895 / 640; object-fit: cover; }
.k3-more--v4 .k3-more__txt { position: absolute; left: 24px; top: -56px; transform: none; width: 425px; min-height: 256px; box-sizing: border-box; padding: 24px; gap: 16px; background: var(--kit-accent); border-bottom-right-radius: 24px; }
.k3-more--v4 .k3-more__txt h2 { font-size: 26px; line-height: 36px; color: #FFFFFF; }
.k3-more--v4 .k3-more__txt p { font-size: 16px; line-height: 24px; color: #FFFFFF; }
@media (max-width: 767px) { .k3-more--v4 .k3-more__txt { width: 350px; max-width: calc(100% - 48px); min-height: 0; } .k3-more--v4 .k3-more__in img { object-position: var(--more-pos, 50% 50%); } }

/* image nav: v4.6 is a fixed four-column grid (the v3 open-one-tile pattern is off) */
@media (min-width: 1025px) {
  .k3-page .k3-inav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .k3-inav__c, .k3-inav__c.is-active { flex: none; cursor: pointer; }
  .k3-inav__c img, .k3-inav__c.is-active img, .k3-inav__c:not(.is-active):hover img { transform: none; }
  .k3-inav__txt, .k3-inav__c:not(.is-active) .k3-inav__txt { width: auto; background: none; }
  .k3-inav__txt p, .k3-inav__c .k3-inav__txt p { opacity: 1; transform: none; pointer-events: auto; }
}
.k3-inav__c { cursor: pointer; color: var(--kit-text); }

/* Works with your pipeline: four Common-Card tiles in one row (2 x 2 at 1200 and 1024, one column on phones) */
.k3-mcard--cmp { display: flex; flex-direction: column; }
.k3-mcard--cmp::after { display: none; }
.k3-mcard--cmp .k3-slot { aspect-ratio: 412 / 200; border: 0; border-bottom-right-radius: 8px; background: #2A2E33; color: #B9B9BD; font-size: 12px; padding: 16px; text-align: center; display: flex; align-items: center; justify-content: center; }
.k3-mcard--cmp .k3-cmp__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; padding: 24px 0 24px 24px; }
.k3-cmp__eb { font-size: 12px; line-height: 16px; color: #FFFFFF; }
.k3-mcard--cmp h3 { font-size: 26px; line-height: 36px; color: #FFFFFF; }
.k3-mcard--cmp p { font-size: 16px; line-height: 24px; color: #FFFFFF; flex: 1 1 auto; }
.k3-mcard--cmp .k3-chips { margin-top: auto; gap: 8px 16px; }
.k3-mcard--cmp .k3-chip { background: none; border: 0; padding: 0; font-size: 12px; color: #FFFFFF; }
@media (max-width: 1200px) and (min-width: 768px) { .k3-grid--cmp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* MANTIS Studio: the caption sits under the software view, not on it (Rupa pt 5) */
.k3-sv__view { display: flex; flex-direction: column; }
.k3-sv__cap { position: static !important; inset: auto !important; transform: none !important; width: auto !important; max-width: none !important; background: #2A2E33 !important; padding: 24px !important; }
.k3-sv__cap h3 { color: #FFFFFF; } .k3-sv__cap p { color: #B9B9BD; }

/* Hardware: the two cards sit on the right two thirds, a hairline above them */
.k3-hwpair { border-top: 1px solid var(--kit-line); padding-top: var(--v4-pad) !important; margin-bottom: var(--v4-pad); }
.k3-hwpair .k3-grid { width: 66.6%; margin-left: auto; }
@media (max-width: 1024px) { .k3-hwpair .k3-grid { width: 100%; } }

/* event / reality-capture cards: DS Common Card type, arrow bottom right; Contact events have no photo (text-only cards) */
.k3-page .k3-ecard__body h3 { font-size: 26px; line-height: 36px; }
.k3-ecard__body .k3-ecard__m { font-size: 14px; line-height: 20px; color: inherit; }
.k3-ecard__img:empty { display: none; }
.k3-ecard::after { content: ""; position: absolute; right: 24px; bottom: 24px; width: 23px; height: 18px; background: #FFFFFF; -webkit-mask: var(--k3-arrow) no-repeat center/contain; mask: var(--k3-arrow) no-repeat center/contain; }
.k3-sec--light .k3-ecard::after { background: var(--v4-dark-text); }
.k3-ecard .k3-ecard__go { display: none; }
.k3-ecard:has(.k3-ecard__img:empty) { padding-right: 0; }
.k3-ecard:has(.k3-ecard__img:empty) .k3-ecard__body { padding: 24px 24px 72px; }
@media (max-width: 767px) { .k3-page .k3-ecard__body h3 { font-size: 22px; line-height: 30px; } }

/* plus markers: DS icon/plus, 20 px, thin, dark on the light Feature cards, red on the sensor list */
.k3-step__m, .k3-step.is-open .k3-step__m, .k3-step__t:hover .k3-step__m { width: 20px; height: 20px; margin: 10px; font-size: 20px; color: var(--v4-dark-text); }
.k3-step__m::before { height: 1.5px !important; margin-top: -.75px !important; }
.k3-step__m::after { width: 1.5px !important; height: 20px !important; margin: -10px 0 0 -.75px !important; }

/* sensor viewer: one bordered unit (8 px), controls top right, the two pills in a bar under the stage */
.k3-viewrow { grid-template-columns: minmax(0, 840fr) minmax(0, 520fr); gap: 72px; }
.k3-viewer, .k3-viewer--spin { border: 1px solid var(--kit-line); border-radius: 8px; background: #000; padding-bottom: 72px; box-sizing: border-box; aspect-ratio: 840 / 712; }
.k3-viewer__stage { bottom: 72px; }
.k3-viewer::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: #1A1F24; border-top: 1px solid #2A2E33; }
.k3-viewer__pill--a, .k3-viewer__pill--b { top: auto; bottom: 20px; transform: none; z-index: 4; }
.k3-viewer__pill--a { left: 24px; } .k3-viewer__pill--b { left: 210px; }
@media (max-width: 880px) { .k3-viewrow { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .k3-viewer__pill--b { display: none; } }

/* Studio heading: eyebrow, then the app icon beside the title, then the line */
.k3-head__trow { display: flex; align-items: center; gap: 16px; }
.k3-head__trow .k3-head__icon { width: 64px; height: 64px; flex: 0 0 64px; }

.k3-mcard--cmp .k3-chip { display: inline-flex; align-items: center; gap: 8px; }
.k3-mcard--cmp .k3-chip img { width: 18px; height: 18px; object-fit: contain; }
.k3-mcard--cmp .k3-chip i { width: auto; height: auto; border: 0; background: none; font-style: normal; font-size: 14px; }
/* header CTA keeps its arrow (DS Secondary button with icon) */
.k3-header .k3-header__cta::after { content: ""; display: block; background: currentColor; -webkit-mask: var(--k3-arrow) no-repeat center/contain; mask: var(--k3-arrow) no-repeat center/contain; }
/* Product on set: in v4.6 the heading block sits inside the section's own 40 px inset (80 from the edge) */
#onset, #works, #featured, #launch, #media, #capture, #events, #chapter, #festival, #book { --v4-head-in: 80px; }
:is(#onset, #works, #featured, #launch, #media, #capture, #events, #chapter, #festival, #book) > .k3-sec__in > .k3-head { padding: var(--v4-head-in) var(--v4-head-in) 48px; }
@media (max-width: 1024px) { :is(#onset, #works, #featured, #launch, #media, #capture, #events, #chapter, #festival, #book) > .k3-sec__in > .k3-head { padding: 48px calc(var(--v4-pad) * 2) 32px; } }
@media (max-width: 767px) { :is(#onset, #works, #featured, #launch, #media, #capture, #events, #chapter, #festival, #book) > .k3-sec__in > .k3-head { padding: 32px var(--v4-pad) 24px; } }

/* About (v4.6): grey intro beside the H2; DS Caption Card #8B0019, 425 x 256, 32 px padding, cut corner bottom right */
.k3-hrow p { color: #B9B9BD; }
.k3-more--v4 .k3-more__in img { border-radius: 0; }   /* square corners (Paul, round 3) */
.k3-more--v4 .k3-more__txt { background: #8B0019; padding: 32px; border-radius: 8px 0 0 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 93px), calc(100% - 70px) 100%, 0 100%); }
.k3-more--v4 .k3-more__txt p { font-size: 18px; line-height: 28px; color: #F5F5F6; }
.k3-mcard--event .k3-mcard__img { height: auto !important; }
.k3-ecard--4 .k3-ecard__img { aspect-ratio: 412 / 274 !important; }

/* Form Submit is the DS Primary button at the small size: 138 x 44, 14/24 padding (Contact, Event) */
.k3-page .k3-form .k3-btn { padding: 14px 24px; font-size: 16px; line-height: 16px; gap: 24px; }
/* Contact events: text-only Common Cards are 288 tall with 24 px body padding */
.k3-ecard:not(:has(.k3-ecard__img img)) { min-height: 288px; }
.k3-ecard:not(:has(.k3-ecard__img img)) .k3-ecard__body { padding: 24px 24px 24px 24px; }
.k3-page .k3-form .k3-btn { height: 44px; min-height: 44px; }
.k3-page .k3-ecard .k3-ecard__img { height: auto !important; }
.k3-page .k3-ecard .k3-ecard__body h3 + p { margin-top: -8px; }   /* DS Title & Description gap 16 */
.k3-page .k3-ecard:not(:has(.k3-ecard__img img)) .k3-ecard__body { gap: 18px; padding: 24px 24px 64px 24px; }

/* DS Hero copy (v4.6): content box 975 x 700 under the header, 48 px side padding, copy centred vertically, 879 px wide */
@media (min-width: 1441px) {
  .k3-page .k3-hero .k3-hero__copy { top: 50%; transform: translateY(-50%); width: min(879px, calc(100% - var(--k3-hero) * 920 / 700 - var(--k3-tx) - 48px)); }
  .k3-hero__ctas { margin-top: 0; }
}
.k3-hero__copy .k3-hero__meta { margin-top: -4px; }   /* the date lines read as part of the description (28 px line) */
/* About "Who is Leica Geosystems?" is set at 56 / 1.3 in v4.6 */
.k3-page .k3-hrow h2 { font-size: clamp(32px, 2.92vw, 56px); line-height: 1.3; }

/* Shots (v4.6): 48 px from heading to content, featured video 1036 / facts 707, strip tiles 245 x 150 48 px under it,
   selected launch video 1316 x 740 (72.5 %), caption 16 under it, thumbnails 589 x 300 48 px under the caption */
@media (min-width: 1441px) {
  #featured .k3-vf { grid-template-columns: minmax(0, 1036fr) minmax(0, 707fr); }
  #launch .k3-vsel .k3-video { width: min(72.5%, calc(var(--vsel-max, 95vh) * 1.7778)); }
}
#featured .k3-vf, #launch .k3-vsel { margin-top: 40px; }
#featured .k3-stripwrap { margin-top: 48px; }
#featured .k3-strip button { aspect-ratio: 245 / 150; }
#launch .k3-vrow { margin-top: 48px; }
#launch .k3-vitem__img { aspect-ratio: 589 / 300; }

/* 1024 band (881-1024, v4.6 "Desktop 1024"): desktop layouts stay; hero 600 tall, copy 419 wide in a 499 column,
   artwork at its 1920 size clipped from x 520 (photo heroes), outline 982 wide from x 534 (Product) */
@media (min-width: 881px) and (max-width: 1024px) {
  .k3-hero--photo, .k3-hero--event, .k3-hero--outline { --k3-hero: 600px; height: 600px; }
  .k3-page .k3-hero .k3-hero__copy { left: calc(var(--k3-line) + 41px); width: 419px; top: 50%; transform: translateY(-50%); gap: 24px; }
  .k3-page .k3-hero .k3-hero__copy h1 { font-size: 51px; line-height: 1.2; }
  .k3-hero__copy p { font-size: 18px; line-height: 28px; }
  .k3-hero__ctas { margin-top: 0; }
  .k3-hero--photo .k3-hero__art, .k3-hero--event .k3-hero__art { left: 501px; right: auto; top: -50px; width: 920px; height: 700px !important; --animatedThickLineWidth: 24px; }
  .k3-hero--outline .k3-hero__outline { left: 534px; top: -53px; width: 982px; }
  #what .k3-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 1024 band: the photo inside the mask is 598 x 600 from x 426 (cover), not the 1920 size (SVG geometry properties) */
@media (min-width: 881px) and (max-width: 1024px) {
  .k3-hero--photo .k3-hero__art svg > image, .k3-hero--event .k3-hero__art svg > image { x: -96px; y: 51px; width: 614px; height: 616px; }
}
@media (min-width: 881px) and (max-width: 1024px) {
  .k3-hero__art image.k3-crop { x: -96px; width: 614px; height: calc(614px / var(--ar)); y: calc(51px - var(--v0) * 614px / var(--ar)); }
  .k3-hero__art image.k3-crop.k3-mir { x: 430px; }
}
/* 1024 band type (v4.6 About/Home 1024): H2 36/42, card titles 21/28, card text 14/20, eyebrow 12/18,
   About "Who" H2 42/1.3 with a 16 px intro, caption card 21 / 16, CTA band 26/30, image nav tiles 498 tall */
@media (min-width: 881px) and (max-width: 1024px) {
  :root { --v4-h2: 36px; --v4-h2-lh: 42px; }
  .k3-page .k3-hrow h2 { font-size: 42px; line-height: 1.3; }
  .k3-hrow p { font-size: 16px; line-height: 1.3; }
  .k3-page .k3-mcard h3, .k3-page .k3-ecard h3, .k3-page .k3-inav__txt h3, .k3-more--v4 .k3-more__txt h2 { font-size: 21px; line-height: 28px; }
  .k3-page .k3-mcard p, .k3-page .k3-ecard p, .k3-page .k3-inav__txt p { font-size: 14px; line-height: 20px; }
  .k3-page .k3-ecard .k3-ecard__m { font-size: 12px; line-height: 18px; }
  .k3-more--v4 .k3-more__txt p { font-size: 16px; line-height: 24px; }
  .k3-touch__in h2 { font-size: 26px; line-height: 30px; }
  .k3-inav__c { height: 498px; }
  .k3-header .k3-nav a { font-size: 16px; line-height: 24px; }
}
/* the 1024 caption card title is an h2 */
@media (min-width: 881px) and (max-width: 1024px) { .k3-more--v4 .k3-more__txt h2 { font-size: 21px; line-height: 28px; } }
/* About banner at 390: image 377 x 500, Caption Card 350 wide from x 16, 24 padding, title 20/28, text 16/24 */
@media (max-width: 767px) {
  .k3-more--v4 .k3-more__in img { aspect-ratio: 377 / 500; }
  .k3-more--v4 .k3-more__txt { left: 16px; padding: 24px; min-height: 211px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 62px), calc(100% - 47px) 100%, 0 100%); }
  .k3-more--v4 .k3-more__txt h2 { font-size: 20px; line-height: 28px; }
  .k3-more--v4 .k3-more__txt p { font-size: 16px; line-height: 24px; }
}

/* 1440 and 1200 bands (v4.6 "Desktop 1440 / 1200"): side nav 240 / 220 (above), hero 650 tall, copy 48 px in from the line,
   689 / 457 wide, H1 67/76; artwork at its 1920 size with the mask at x 814 / 574, photo 626 x 650 from the mask's left edge;
   CTA band without the nav offset; image-nav tiles 449 / 436 tall, photo padding 16 */
@media (min-width: 1025px) and (max-width: 1440px) {
  .k3-hero--photo, .k3-hero--event, .k3-hero--outline { --k3-hero: 650px; height: 650px; }
  .k3-page .k3-hero .k3-hero__copy { left: calc(var(--k3-line) + 49px); width: 689px; top: 50%; transform: translateY(-50%); gap: 32px; }
  .k3-page .k3-hero .k3-hero__copy h1 { font-size: 67px; line-height: 76px; }
  .k3-hero__copy p { font-size: 20px; line-height: 28px; }
  .k3-hero__ctas { margin-top: 0; }
  .k3-hero--photo .k3-hero__art, .k3-hero--event .k3-hero__art { left: 795px; right: auto; top: -25px; width: 920px; height: 700px !important; --animatedThickLineWidth: 24px; }
  .k3-hero--photo .k3-hero__art svg > image, .k3-hero--event .k3-hero__art svg > image { x: 0px; y: 26px; width: 642px; height: 667px; }
  .k3-hero__art image.k3-crop { x: 0px; width: 642px; height: calc(642px / var(--ar)); y: calc(26px - var(--v0) * 642px / var(--ar)); }
  .k3-hero__art image.k3-crop.k3-mir { x: 306px; }
  .k3-touch__in { margin-left: calc(var(--k3-line) + 1px); border-left: 0; padding: 24px 40px; }
  .k3-touch__art { left: calc(var(--k3-line) + 1px); }
  .k3-inav__c { height: 449px; }
  .k3-inav__img { padding-right: 16px; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  .k3-page .k3-hero .k3-hero__copy { width: 457px; }
  .k3-hero--photo .k3-hero__art, .k3-hero--event .k3-hero__art { left: 555px; }
  .k3-inav__c { height: 436px; }
}
/* 880 band: stacked hero copy with 40 px padding and 24 px gap, H1 46/53, text 18/28; CTA band 16/32 padding; tiles 445 tall */
@media (min-width: 768px) and (max-width: 880px) {
  .k3-page .k3-hero--photo .k3-hero__copy, .k3-page .k3-hero--event .k3-hero__copy { padding: 40px; gap: 24px; }
  .k3-page .k3-hero .k3-hero__copy h1 { font-size: 46px; line-height: 53px; }
  .k3-hero__copy p { font-size: 18px; line-height: 28px; }
  .k3-touch__in { padding: 16px 32px; }
  .k3-inav__c { height: 445px; }
  .k3-inav__img { padding-right: 16px; }
}
/* What is MANTIS: the four cards sit 40 px under the content objects (DS gap), not 80 */
#what .k3-sec__in > .k3-grid--4 { padding-top: var(--v4-pad); }   /* Paul, 26 Oct: room between the three-column row and the cards */
/* Logo Rail at 1440 and 1200: 160 px tiles, 64 px under the rail */
@media (min-width: 1025px) and (max-width: 1440px) { .k3-logo { flex-basis: 160px; height: 160px; } #partners .k3-logos { margin-bottom: 64px; padding-bottom: 0 !important; } }
/* About "Who" H2 50 / 45 with an 18 / 17 intro at 1440 / 1200 */
@media (min-width: 1201px) and (max-width: 1440px) { .k3-page .k3-hrow h2 { font-size: 50px; } .k3-hrow p { font-size: 18px; line-height: 1.3; } }
@media (min-width: 1025px) and (max-width: 1200px) { .k3-page .k3-hrow h2 { font-size: 45px; } .k3-hrow p { font-size: 17px; line-height: 1.3; } }

/* Leica Geosystems logo tile: darkest brand ground (433 C) with the logo centred where a photo would be */
.k3-mcard--logo .k3-mcard__img { background: #11161A; display: flex; align-items: center; justify-content: center; }
.k3-mcard--logo .k3-mcard__img img.k3-mcard__badge { position: static; width: 140px; height: auto; }
/* event cards: every image area is the same 565:376 shape, so a logo tile and photos line up */
.k3-mcard--event .k3-mcard__img { aspect-ratio: 565 / 376 !important; }

/* ============================================================ review round 1 on v4.6 (Paul, 26 Oct) */
/* image shapes: brand tiles with rounded cut corners (tools/round_masks.py builds the masks; was a sharp polygon) */
:root {
  --v4-crop-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 582 720' preserveAspectRatio='none'%3E%3Cpath d='M0.00 0.00 L234.19 0.00 A32 32 0 0 1 249.43 3.86 L565.23 174.82 A32 32 0 0 1 582.00 202.96 L582.00 720.00 L234.77 720.00 A32 32 0 0 1 219.43 716.09 L16.67 605.40 A32 32 0 0 1 0.00 577.31Z'/%3E%3C/svg%3E");
  --v4-tile-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 450 293' preserveAspectRatio='none'%3E%3Cpath d='M0.00 0.00 L450.00 0.00 L450.00 182.49 A32 32 0 0 1 443.66 201.61 L385.20 280.11 A32 32 0 0 1 359.53 293.00 L0.00 293.00Z'/%3E%3C/svg%3E");
  --v4-ccard-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 686 476' preserveAspectRatio='none'%3E%3Cpath d='M4.37 139.58 A32 32 0 0 1 0.00 123.44 L0.00 0.00 L686.00 0.00 L686.00 476.00 L219.27 476.00 A32 32 0 0 1 191.64 460.14Z'/%3E%3C/svg%3E");
}
.k3-split__img { clip-path: none; -webkit-mask: var(--v4-crop-mask) no-repeat 0 0 / 100% 100%; mask: var(--v4-crop-mask) no-repeat 0 0 / 100% 100%; }
.k3-inav__c img { clip-path: none; -webkit-mask: var(--v4-tile-mask) no-repeat 0 0 / 100% 100%; mask: var(--v4-tile-mask) no-repeat 0 0 / 100% 100%; }
.k3-ccard__img img { clip-path: none; -webkit-mask: var(--v4-ccard-mask) no-repeat 0 0 / 100% 100%; mask: var(--v4-ccard-mask) no-repeat 0 0 / 100% 100%; }

/* cards that link nowhere lose the arrow; linked cards (Contact event) keep it */
.k3-mcard::after, div.k3-ecard::after { display: none; }
.k3-mcard .k3-mcard__body, div.k3-ecard .k3-ecard__body { padding-bottom: var(--v4-pad); }
/* cards slide in from the left with the scroll (kit-v3.js sets transform and opacity) */
.k3-grid--slide { overflow-x: clip; }
.k3-grid--slide > .k3-mcard, .k3-grid--slide > .k3-ecard { will-change: transform, opacity; transition: none; }
/* shots: the big player shrinks so the player, caption and the video row below fit one screen (kit-v3.js sets --vsel-max);
   on short screens the thumbnails give up height first, so the player stays the biggest thing */
@media (min-width: 881px) { #launch .k3-vitem__img { max-height: 26vh; } }
.k3-vsel .k3-video, .k3-vsel .k3-video.is-playing { width: min(100%, calc(var(--vsel-max, 95vh) * 1.7778)); }
/* software icon in front of the card title, as tall as the type */
.k3-mcard__body h3:has(.k3-mcard__ic) { display: flex; align-items: center; gap: .45em; }
.k3-mcard__ic { flex: 0 0 auto; width: 1.1em; height: 1.1em; position: relative; top: -.1em; }   /* centred on the capitals, not the line box (Akkurat caps sit high) */

/* side nav: one laser line travels from link to link */
.k3-nav-col__in.has-laser a.is-active::before { display: none; }
.k3-laser { position: absolute; left: 40px; top: 0; width: 3px; height: 24px; border-radius: 2px; background: var(--kit-accent); pointer-events: none; will-change: transform, height; }   /* solid red; only the motion reads as a laser (Paul, round 2) */

/* video feature: the play button reads as one (red, larger, a slow pulse) */
.k3-vfeat .k3-video__play { width: 112px; height: 112px; margin: -56px 0 0 -56px; background: var(--kit-accent); animation: k3-pulse 2.4s ease-out infinite; }
.k3-vfeat .k3-video__play::before { left: 44px; top: 37px; width: 32px; height: 38px; background: #FFFFFF; }
.k3-vfeat .k3-video::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .18); transition: background .3s ease; pointer-events: none; }
.k3-vfeat .k3-video:hover::before { background: rgba(0, 0, 0, .05); }
@keyframes k3-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 0, 51, .55); } 70% { box-shadow: 0 0 0 28px rgba(255, 0, 51, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 0, 51, 0); } }
@media (prefers-reduced-motion: reduce) { .k3-vfeat .k3-video__play { animation: none; } }
@media (max-width: 880px) { .k3-vfeat .k3-video__play { width: 80px; height: 80px; margin: -40px 0 0 -40px; } .k3-vfeat .k3-video__play::before { left: 31px; top: 26px; width: 23px; height: 28px; } }

/* plus markers: both strokes 2 px on whole pixels, cool grey */
.k3-step__m, .k3-step.is-open .k3-step__m, .k3-step__t:hover .k3-step__m { color: #71737B; }
.k3-step__m::before { top: 9px !important; height: 2px !important; margin-top: 0 !important; }
.k3-step__m::after { top: 0 !important; left: 9px !important; width: 2px !important; height: 20px !important; margin: 0 !important; }
.k3-faq summary::after { color: #71737B; background: linear-gradient(currentColor, currentColor) center/20px 2px no-repeat, linear-gradient(currentColor, currentColor) center/2px 20px no-repeat; }
.k3-faq details[open] summary::after { background: linear-gradient(currentColor, currentColor) center/20px 2px no-repeat; }

/* Studio view: the picture shrinks so tabs, picture and caption fit one screen (kit-v3.js sets --sv-max) */
.k3-sv__stage { max-height: var(--sv-max, none); }
.k3-sv[style*="--sv-max"] .k3-sv__stage img { object-fit: contain; }

/* shots video row turns like the shot strip */
.k3-vrow.is-turning button { pointer-events: none; }
.k3-vrow .k3-vitem { will-change: transform; }

/* CTA band with no side-nav column above: one container from the left line */
.k3-touch--full .k3-touch__in { margin-left: calc(var(--k3-line) + 1px); border-left: 0; padding-left: var(--v4-pad); }
.k3-touch--full .k3-touch__art { left: calc(var(--k3-line) + 1px); }

/* About: thin brand lines draw in behind the photo strip, bottom right */
#who { position: relative; overflow: hidden; padding-bottom: 80px; }
#who .k3-pad { position: relative; z-index: 1; }
.k3-corner-lines { position: absolute; right: 0; bottom: 0; width: min(760px, 50%); height: 340px; z-index: 0; pointer-events: none; }
.k3-corner-lines svg { width: 100%; height: 100%; display: block; }
.k3-corner-lines .hxdr-line-path { stroke: var(--kit-line); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
@media (max-width: 767px) { #who { padding-bottom: 48px; } .k3-corner-lines { width: 100%; height: 220px; } }

/* hardware diagram title one step up the type scale */
.k3-page .k3-sd__t.k3-t32 { font-size: 32px; line-height: 40px; }
@media (max-width: 1024px) { .k3-page .k3-sd__t.k3-t32 { font-size: 26px; line-height: 34px; } }
@media (max-width: 767px) { .k3-page .k3-sd__t.k3-t32 { font-size: 22px; line-height: 30px; } }

/* About family banner: <picture> with a phone version (Paul PSD, 27 Oct) */
.k3-more--v4 .k3-more__in picture { display: block; }

/* section-wide brand lines, same as the CTA band (About "Who is", 29 Oct) */
.k3-sec-lines { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.k3-sec-lines svg { width: 100%; height: 100%; display: block; }
.k3-sec-lines .hxdr-line-path { stroke: var(--kit-line); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }

/* partner quote row (Home Partners, 29 Oct) */
.k3-pq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; margin: 0 0 var(--v4-pad); }
.k3-pq__logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 240px; background: #FFFFFF; border: 1px solid #B9B9BD; border-radius: 8px; color: #11161A; font-size: 22px; }
.k3-pq__logo img { width: 72px; height: 72px; }
.k3-pq__q { margin: 0; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 40px 48px; background: #F5F5F6; border-radius: 8px; }
.k3-pq__q p { margin: 0; font-size: 28px; line-height: 1.3; color: #11161A; }
.k3-pq__q p::before { content: "“"; } .k3-pq__q p::after { content: "”"; }
.k3-pq__q figcaption { font-size: 16px; color: #4A4F57; }
@media (max-width: 1024px) { .k3-pq__q { padding: 28px 32px; } .k3-pq__q p { font-size: 22px; } .k3-pq__logo { min-height: 180px; } }
@media (max-width: 767px) { .k3-pq { grid-template-columns: minmax(0, 1fr); } .k3-pq__q p { font-size: 18px; } .k3-pq__logo { min-height: 140px; } }
/* narrower screens: keep the section lines below the copy, across the photo strip and the space under it (QA 29 Oct) */
@media (max-width: 1200px) { .k3-sec-lines { top: 45%; } }
@media (max-width: 767px) { .k3-sec-lines { top: 68%; } }
/* phones: the four Studio outputs as a 2 x 2 grid instead of a sideways scroll that cut off the first tab (QA 29 Oct) */
@media (max-width: 480px) { .k3-sv__tabs { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; row-gap: 16px; } .k3-sv__tab { flex: none; } }

/* cookie consent bar (29 Oct): bottom of the screen, Accept and Reject the same size */
.k3-consent { position: fixed; z-index: 2147482000; left: 24px; right: 24px; bottom: 24px; max-width: 880px; margin: 0 auto; display: flex; align-items: center; gap: 24px; padding: 20px 24px; background: #2A2E33; border: 1px solid #B9B9BD; border-radius: 8px; color: #FFFFFF; box-shadow: 0 8px 32px rgba(0, 0, 0, .45); }
.k3-consent p { margin: 0; flex: 1; font-size: 14px; line-height: 1.45; color: #E7E8E9; }
.k3-consent a { color: #FFFFFF; text-decoration: underline; }
.k3-consent__b { display: flex; gap: 12px; flex: none; }
.k3-consent .k3-btn { padding: 12px 22px; min-width: 104px; justify-content: center; --kit-text: #FFFFFF; }
@media (max-width: 767px) { .k3-consent { left: 12px; right: 12px; bottom: 12px; flex-direction: column; align-items: stretch; gap: 16px; padding: 16px; } .k3-consent__b .k3-btn { flex: 1; } }
.k3-footer__legal a { color: inherit; text-decoration: underline; margin-left: 16px; }
.k3-consent .k3-btn::after { display: none; }
.k3-consent .k3-btn--sec { background: transparent; color: #FFFFFF !important; box-shadow: inset 0 0 0 2px var(--kit-accent); }
.k3-consent .k3-btn--sec:hover { background: var(--kit-accent-deep); box-shadow: inset 0 0 0 2px var(--kit-accent-deep); }

/* Collage hero (Product, Paul 2 Nov "B5"): pattern-tile image container, right-anchored, 1 px divider on its left.
   Art width leaves the copy its column; where that is narrower than four columns at hero height, the lattice scales to the width. */
.k3-hero--collage .k3-hero__art.k3-col { left: auto; right: 0; top: 0; height: 100%; width: min(calc(var(--k3-hero) * 1217.4 / 700), calc(100% - var(--k3-col-copy, 632px))); border-left: 1px solid var(--kit-line); overflow: hidden; }
.k3-hero__art.k3-col svg.k3-col__svg { position: absolute; right: 0; top: 50%; width: 100%; height: auto; aspect-ratio: 1217.4 / 700; transform: translateY(-50%); display: block; }
.k3-col__ta { fill: var(--kit-ground); }
.k3-col__tb { fill: #192026; }   /* 432 C: LGS dark-mode pattern tone */
.k3-col__l { fill: none; stroke: var(--kit-line); stroke-width: 1px; vector-effect: non-scaling-stroke; }
@media (min-width: 1441px) { .k3-page .k3-hero--collage .k3-hero__copy { width: min(560px, calc(100% - var(--k3-tx) - 360px)); } }
@media (min-width: 1025px) and (max-width: 1440px) {
  .k3-hero--collage { --k3-hero: 650px; height: 650px; --k3-col-copy: calc(var(--k3-line) + 49px + 520px + 48px); }
  .k3-page .k3-hero--collage .k3-hero__copy { width: 520px; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  .k3-hero--collage { --k3-col-copy: calc(var(--k3-line) + 49px + 457px + 40px); }
  .k3-page .k3-hero--collage .k3-hero__copy { width: 457px; }
}
@media (min-width: 881px) and (max-width: 1024px) {
  .k3-hero--collage { --k3-hero: 600px; height: 600px; --k3-col-copy: calc(var(--k3-line) + 41px + 419px + 40px); }
}
/* stacked (880 and below): copy, then the full lattice in a row whose height fits all four columns */
@media (max-width: 880px) {
  .k3-hero--collage { height: auto; padding-left: calc(var(--k3-line) + 1px); overflow: visible; --k3-art-h: calc((100vw - var(--k3-line) - 1px) * 700 / 1217.4); }
  .k3-hero--collage .k3-hero__copy { position: static; transform: none; width: auto; padding: var(--k3-padY) var(--k3-padR); }
  .k3-page .k3-hero--collage .k3-hero__copy { width: auto; }
  .k3-hero--collage .k3-hero__ctas { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 0; }
  .k3-hero--collage .k3-hero__artrow { display: block; position: relative; overflow: hidden; height: var(--k3-art-h); border-top: 1px solid var(--kit-line); box-sizing: content-box; }
  .k3-hero--collage .k3-hero__art.k3-col { width: 100%; border-left: 0; }
  /* the row shows exactly four columns, so lattice vertices would sit on all four corners and read as rounded corners
     (Paul, 2 Nov): shift the lattice half a cell (R/2 = 87.85 of 700) up so the corners fall mid-edge */
  .k3-hero--collage .k3-hero__art.k3-col svg.k3-col__svg { transform: translateY(calc(-50% - 100% * 87.85 / 700)); }
}

/* ---------- HubSpot form embed (raw markup) in the kit field look, same as .k3-form / .k3-field ---------- */
.k3-hsform form { display: flex; flex-direction: column; gap: 24px; }
.k3-hsform fieldset { max-width: none !important; border: 0; margin: 0; padding: 0; display: flex; gap: 24px; }
.k3-hsform fieldset > div { flex: 1; width: auto !important; float: none !important; }
.k3-hsform .hs-form-field { display: flex; flex-direction: column; gap: 8px; }
.k3-hsform .hs-form-field > label { font-size: 12px; line-height: 1.3; color: var(--kit-text-secondary); }
.k3-hsform .hs-form-required { color: var(--kit-accent); margin-left: 4px; }
.k3-hsform .hs-input { box-sizing: border-box; width: 100% !important; background: transparent; border: 0; border-bottom: 1px solid var(--kit-line); border-radius: 0; color: var(--kit-text); font: 400 14px/1.5 var(--kit-font); padding: 8px; outline: none; }
.k3-hsform select.hs-input { appearance: none; -webkit-appearance: none; padding-right: 32px; background: url("../svg/chevron.svg") no-repeat right 8px center; color: var(--kit-text-secondary); cursor: pointer; }
.k3-hsform select.hs-input option { background: var(--kit-ground); color: var(--kit-text); }
.k3-hsform textarea.hs-input { min-height: 96px; resize: vertical; }
.k3-hsform .hs-input::placeholder { color: var(--kit-text-secondary); opacity: 1; }
.k3-hsform .hs-input:focus { border-bottom: 2px solid var(--kit-text); padding-bottom: 7px; }
.k3-hsform .hs-input.invalid.error { border-bottom-color: var(--kit-accent); }
.k3-hsform .hs-error-msgs { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--kit-accent); }
.k3-hsform .hs-error-msgs label { color: var(--kit-accent); }
.k3-hsform .inputs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--kit-text); }
.k3-hsform .inputs-list input[type=checkbox] { width: auto !important; accent-color: var(--kit-accent); margin-right: 8px; }
.k3-hsform .legal-consent-container, .k3-hsform .hs-richtext { font-size: 12px; line-height: 1.5; color: var(--kit-text-secondary); }
.k3-hsform .legal-consent-container a, .k3-hsform .hs-richtext a { color: var(--kit-text); }
.k3-hsform .hs_submit .actions { display: flex; }
.k3-hsform .submitted-message { padding: 16px 20px; border: 1px solid var(--k3-stroke); border-radius: var(--k3-r); background: var(--kit-surface-deep); color: var(--kit-text); }
@media (max-width: 880px) { .k3-hsform fieldset { flex-direction: column; } }
/* HubSpot field order = the site form's order (the HubSpot editor puts Email first); fields are direct children of the form */
.k3-hsform form > .hs_firstname { order: 1; }
.k3-hsform form > .hs_lastname { order: 2; }
.k3-hsform form > .hs_company { order: 3; }
.k3-hsform form > .hs_email { order: 4; }
.k3-hsform form > .hs_area_of_interest { order: 5; }
.k3-hsform form > .hs_message { order: 6; }
.k3-hsform form > .legal-consent-container { order: 8; }
.k3-hsform form > .hs_submit { order: 9; }

/* 3 Nov 2026 (Paul): transparent viewer frames (spin-e, RGBA WebP) and the real-time option float on the section colour.
   The bordered unit and the pill bar stay (v4.3); only the black stage fill goes. Opaque frames (spin-c) keep the old box. */
.k3-viewer--alpha, .k3-viewer--rt { background: transparent; }
.k3-viewer--alpha .k3-spin__img { mix-blend-mode: normal; }
/* 3 Nov 2026 phone check: at 390 the controls covered the sensor (stage ~208 px tall). Taller unit and the controls move into the
   bottom bar (the interactive pill steps aside; the hint pill is already hidden below 768). */
@media (max-width: 767px) {
  .k3-viewer, .k3-viewer--spin { aspect-ratio: 1 / 1.08; }
  .k3-viewer__pill--a { display: none; }
  .k3-viewer__ctl { top: auto; bottom: 18px; left: 12px; right: 12px; justify-content: space-between; z-index: 4; }
}

/* spin viewer paints decoded frames to a canvas (no flashing while dragging, 3 Nov); the <img> stays as the no-JS first frame */
.k3-spin__cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.k3-viewer--spin .k3-spin__cv { mix-blend-mode: screen; }
.k3-viewer--alpha .k3-spin__cv { mix-blend-mode: normal; }
.k3-viewer--spin.has-cv .k3-spin__img { visibility: hidden; }

/* real-time viewer (3 Nov, Paul): dots on the far side are hidden, not ghosted (a ghosted rear dot sat on the front lens), and all dots
   step aside while the sensor is opened, as in the rendered viewer */
.k3-viewer__stage model-viewer > .k3-hot:not([data-visible]) { opacity: 0; }
.k3-viewer--rt.is-exploded .k3-hot { opacity: 0 !important; pointer-events: none; }

/* annotation hotspots (4 Nov, Kevin call): the number sits up and to the right of the feature on a thin leader, so it labels
   the part instead of covering it. Tag styled like the UI chips in the MANTIS reveal video (mantis_animation_v02c, 0:68 "Accurate Depth",
   "Camera Track"): dark rounded pill, faint light border and top highlight, light grey sans label; solid fill, not frosted (frosted
   glass is background only, Kevin 4 Nov). Pill = hotlist number + short name (span data-l); number only below 768. */
.k3-viewer--ann .k3-hot { width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 0; border-radius: 50%; overflow: visible; --ld: 38px; --ann: rgba(255,255,255,.78); }
.k3-viewer--ann .k3-hot::before { content: ""; position: absolute; left: 4px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.16), 0 0 0 4px rgba(0,0,0,.4); transition: background .2s, box-shadow .2s; }
.k3-viewer--ann .k3-hot::after { content: ""; position: absolute; left: 7px; top: 7px; width: var(--ld); height: 1px; background: var(--ann); transform-origin: 0 50%; transform: rotate(-45deg); transition: background .2s; pointer-events: none; }
.k3-viewer--ann .k3-hot span { left: calc(7px + var(--ld) * .7071); top: calc(7px - var(--ld) * .7071 - 34px); width: auto; min-width: 0; height: 34px; padding: 0 16px 0 14px; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(255,255,255,.16); background: linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,0) 60%), rgba(24,25,29,.9); box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  color: rgba(255,255,255,.5); font: 500 13px/32px var(--kit-font); letter-spacing: .04em; font-variant-numeric: tabular-nums; text-align: left; transition: border-color .2s, box-shadow .2s, color .2s; }
.k3-viewer--ann .k3-hot span::before { content: "0"; }
.k3-viewer--ann .k3-hot span { word-spacing: normal; }
.k3-viewer--ann .k3-hot.is-ul::after { transform: rotate(-135deg); }
.k3-viewer--ann .k3-hot.is-dr::after { transform: rotate(45deg); }
.k3-viewer--ann .k3-hot.is-dl::after { transform: rotate(135deg); }
.k3-viewer--ann .k3-hot:is(.is-ul, .is-dl) span { left: auto; right: calc(7px + var(--ld) * .7071); }
.k3-viewer--ann .k3-hot:is(.is-dr, .is-dl) span { top: calc(7px + var(--ld) * .7071); }
.k3-viewer--ann .k3-hot span[data-l]::after { content: attr(data-l); margin-left: 10px; color: #e9e9ea; font-weight: 400; letter-spacing: .01em; }
.k3-viewer--ann .k3-hot:hover, .k3-viewer--ann .k3-hot.is-on { --ann: var(--kit-accent); border: 0; }
.k3-viewer--ann .k3-hot.is-on::before { background: var(--kit-accent); box-shadow: 0 0 0 3px rgba(255,0,51,.25), 0 0 0 4px rgba(0,0,0,.4); }
.k3-viewer--ann .k3-hot.is-on span, .k3-viewer--ann .k3-hot:hover span { border-color: var(--kit-accent); color: var(--kit-accent); box-shadow: 0 0 18px rgba(255,0,51,.28), 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); }
.k3-viewer--ann .k3-hot:focus-visible { outline: 0; }
.k3-viewer--ann .k3-hot:focus-visible span { outline: 2px solid var(--kit-accent); outline-offset: 2px; }
@media (max-width: 767px) { .k3-viewer--ann .k3-hot { --ld: 24px; } .k3-viewer--ann .k3-hot span { height: 26px; padding: 0 10px; font-size: 11px; line-height: 24px; top: calc(7px - var(--ld) * .7071 - 26px); }
  .k3-viewer--ann .k3-hot span[data-l]::after { content: none; } }

/* MANTIS Studio view, option C mix (Paul 3 Nov 2026): the stage fills (no bars); depth and position tabs are a wipe,
   camera plate left of the handle, output right, both on the same frame so they line up. Cover beats the --sv-max contain above. */
.k3-sv .k3-sv__stage.k3-sv__stage--cover img { object-fit: cover; }
.k3-wipe { position: absolute; inset: 0; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.k3-wipe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.k3-wipe .k3-wipe__before { clip-path: inset(0 calc(100% - var(--wipe, 50%)) 0 0); }
/* handle = Paul's W5 (Figma 760:2): 2 px white divider, 10 x 218 Leica red rounded bar on it, white chevrons 16 px outside.
   labels = W1: white kit eyebrow (12 px caps, .18em) with a 24 x 2 red lead rule, over a soft shade across the top. */
.k3-wipe::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 140px; z-index: 1; pointer-events: none; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0)); }
.k3-wipe__bar { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--wipe, 50%); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.k3-wipe__knob { position: absolute; top: 50%; left: 50%; width: 10px; height: 218px; margin: -109px 0 0 -5px; border-radius: 999px; background: #FF0033; transition: transform .15s; }
.k3-wipe__knob::before, .k3-wipe__knob::after { content: ""; position: absolute; top: 50%; width: 8.5px; height: 8.5px; margin-top: -4.25px; border: 0 solid #fff; border-radius: 1px; filter: drop-shadow(0 0 2px rgba(0,0,0,.45)); }
.k3-wipe__knob::before { right: calc(100% + 14px); border-left-width: 2.5px; border-bottom-width: 2.5px; transform: rotate(45deg); }
.k3-wipe__knob::after { left: calc(100% + 14px); border-right-width: 2.5px; border-top-width: 2.5px; transform: rotate(45deg); }
.k3-wipe.is-drag .k3-wipe__knob, .k3-wipe:hover .k3-wipe__knob { transform: scaleX(1.2); }
.k3-wipe__tag { position: absolute; z-index: 2; top: 32px; left: 32px; display: flex; align-items: center; gap: 12px; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .18em; text-transform: uppercase; pointer-events: none; }
.k3-wipe__tag::before { content: ""; width: 24px; height: 2px; background: #FF0033; }
.k3-wipe__tag--r { left: auto; right: 32px; }
.k3-wipe__range { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.k3-wipe:focus-within .k3-wipe__knob { outline: 2px solid #fff; outline-offset: 4px; }
@media (max-width: 1024px) { .k3-wipe__knob { height: 160px; margin-top: -80px; } }
@media (max-width: 480px) { .k3-wipe::before { height: 80px; } .k3-wipe__tag { top: 14px; left: 14px; gap: 8px; font-size: 10px; } .k3-wipe__tag::before { width: 16px; } .k3-wipe__tag--r { left: auto; right: 14px; } .k3-wipe__knob { width: 8px; height: 96px; margin: -48px 0 0 -4px; } .k3-wipe__knob::before { right: calc(100% + 9px); } .k3-wipe__knob::after { left: calc(100% + 9px); } }

/* ------------------------------------------------------------ Home "What is MANTIS" (Paul's design, Figma 767:2, 3 Nov; Kevin pin 139: "very dense ... give the content more space")
   Only on #what.k3-what--open (tools/build_pages.py home()). Drop that class to go back to the boxed three-card row above (backup, in case it is called off brand;
   screenshots of the old look in 06_mantis_website/build/home-what-options/backup-boxed_*.png).
   Statements: title, a 1 px #B9B9BD rule across the column with a 5 px round-capped Leica red bar centred on it (title width + 18 px), then the text 30 px under the rule.
   1920: 96 px above the heading, 72 px heading -> statements, 64 px column gap, 96 px statements -> cards, 120 px under the cards. */
#what.k3-what--open { --what-top: 96px; --what-head-gap: 72px; --what-col-gap: 64px; --what-cards-gap: 96px; --what-bottom: 120px; }
@media (max-width: 1024px) { #what.k3-what--open { --what-top: 72px; --what-head-gap: 56px; --what-col-gap: 32px; --what-cards-gap: 72px; --what-bottom: 96px; } }
@media (max-width: 880px)  { #what.k3-what--open { --what-top: 56px; --what-head-gap: 40px; --what-col-gap: 40px; --what-cards-gap: 56px; --what-bottom: 72px; } }
@media (max-width: 767px)  { #what.k3-what--open { --what-top: 48px; --what-head-gap: 32px; --what-col-gap: 32px; --what-cards-gap: 48px; --what-bottom: 64px; } }
#what.k3-what--open > .k3-sec__in > .k3-head { padding-top: var(--what-top); padding-bottom: 0; }
#what.k3-what--open .k3-grid--3 { gap: var(--what-col-gap); padding: var(--what-head-gap) var(--v4-pad) 0; }
#what.k3-what--open .k3-grid--3 .k3-card { background: linear-gradient(#B9B9BD, #B9B9BD) no-repeat 0 65.5px / 100% 1px; border: 0; border-radius: 0; padding: 0; gap: 0; }
#what.k3-what--open .k3-grid--3 .k3-card h3 { position: relative; width: fit-content; padding: 0 18px 32.5px 0; }
#what.k3-what--open .k3-grid--3 .k3-card h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 5px; border-radius: 2.5px; background: #FF0033; }
#what.k3-what--open .k3-grid--3 .k3-card p { margin-top: 27.5px; }
#what.k3-what--open .k3-sec__in > .k3-grid--4 { padding-top: var(--what-cards-gap); padding-bottom: 0; margin-bottom: var(--what-bottom); }
/* Scroll-in (kit-v3.js adds .is-ready, then .is-in at 30 % in view; nothing moves with reduced motion or no JS): per column, the grey rule draws across,
   the red bar grows out of the left end, title and text rise 12 px and fade in; columns 120 ms apart. */
#what.k3-what--open .k3-grid--3.is-ready .k3-card { background-size: 0% 1px; transition: background-size 900ms cubic-bezier(.22, .61, .36, 1) var(--d, 0ms); }
#what.k3-what--open .k3-grid--3.is-ready .k3-card h3::after { clip-path: inset(0 100% 0 0 round 2.5px); transition: clip-path 700ms cubic-bezier(.22, .61, .36, 1) calc(var(--d, 0ms) + 250ms); }
#what.k3-what--open .k3-grid--3.is-ready .k3-card :is(h3, p) { opacity: 0; transform: translateY(12px); transition: opacity 600ms ease calc(var(--d, 0ms) + var(--dd, 0ms)), transform 600ms cubic-bezier(.22, .61, .36, 1) calc(var(--d, 0ms) + var(--dd, 0ms)); }
#what.k3-what--open .k3-grid--3.is-ready .k3-card p { --dd: 350ms; }
#what.k3-what--open .k3-grid--3.is-ready .k3-card:nth-child(2) { --d: 120ms; }
#what.k3-what--open .k3-grid--3.is-ready .k3-card:nth-child(3) { --d: 240ms; }
#what.k3-what--open .k3-grid--3.is-in .k3-card { background-size: 100% 1px; }
#what.k3-what--open .k3-grid--3.is-in .k3-card h3::after { clip-path: inset(0 0 0 0 round 2.5px); }
#what.k3-what--open .k3-grid--3.is-in .k3-card :is(h3, p) { opacity: 1; transform: none; }

/* ===== Home rebuild, 5 Nov (Kevin call): punch line, reveal video, system pair, How it works (scroll line), workflows, testimonials, built for production, shot cards ===== */
.k3-punch .k3-sec__in { gap: 28px; padding-top: calc(var(--k3-padY) * 1.4); padding-bottom: calc(var(--k3-padY) * 1.4); }
.k3-punch__l { margin: 0; max-width: 1180px; font-size: clamp(26.67px, calc(18px + 2.2vw), 56px); line-height: 1.18; font-weight: 400; color: var(--kit-text); }
.k3-punch__l b { font-weight: 400; color: var(--kit-text-secondary); }
.k3-punch__m { margin: 0; font-size: clamp(34px, calc(22px + 3.4vw), 88px); line-height: 1.05; font-weight: 400; color: var(--kit-text); }
.k3-punch .k3-punch__m { margin-top: clamp(20px, 2.2vw, 40px); }
.k3-reveal .k3-sec__in { padding: 0; }
.k3-reveal .k3-video { border-radius: 0; border-width: 0 0 1px; aspect-ratio: auto; height: min(56.25vw, 95vh); }
.k3-reveal .k3-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k3-reveal .k3-video__play { transform: scale(1.35); }
.k3-sys { display: grid; grid-template-columns: 1fr; gap: 24px; }
.k3-syscard { display: grid; grid-template-columns: 1fr 1fr; background: color-mix(in srgb, var(--kit-ground), #fff 6%); color: var(--kit-text); border: 1px solid var(--k3-stroke); border-radius: 14px; overflow: hidden; min-height: 420px; }
.k3-syscard__img { position: relative; min-height: 320px; background: transparent; }
.k3-syscard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k3-syscard__txt { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; padding: 48px clamp(24px, 4.4vw, 72px); }
.k3-syscard__tag { display: inline-flex; align-items: center; height: 28px; box-sizing: border-box; line-height: 1; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #E4002B; border: 1px solid #E4002B; border-radius: 100px; padding: 0 14px; }
.k3-syscard__txt h3 { margin: 0; font-weight: 400; }
.k3-syscard__txt p { margin: 0; color: var(--kit-text-secondary); max-width: 560px; }
@media (max-width: 880px) { .k3-syscard { grid-template-columns: 1fr; } .k3-syscard__img { min-height: 0; aspect-ratio: 36/25; } .k3-syscard__txt { padding: 32px 24px 40px; } }
/* How it works: a timeline rail per step, the red line fills as the step scrolls through the viewport (JS sets --fill 0..1) */
.k3-how { display: flex; flex-direction: column; gap: 72px; }
.k3-hstep { display: grid; grid-template-columns: minmax(260px, 1fr) 2.4fr; gap: var(--k3-split); }
.k3-hstep__rail { position: relative; padding-left: 44px; }
.k3-hstep__rail::before { content: ""; position: absolute; left: 9px; top: 20px; bottom: 0; width: 2px; border-radius: 2px; background: var(--kit-line); }
.k3-hstep__rail::after { content: ""; position: absolute; left: 9px; top: 20px; bottom: 0; width: 2px; border-radius: 2px; background: var(--kit-accent); transform-origin: top; transform: scaleY(var(--fill, 0)); }
.k3-hstep__dot { position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--kit-line); background: var(--kit-ground); box-sizing: border-box; transition: border-color .3s, background-color .3s; z-index: 1; }
.k3-hstep.is-on .k3-hstep__dot { border-color: var(--kit-accent); background: var(--kit-accent); }
.k3-hstep__rail > div { position: sticky; top: calc(var(--k3-hdr) + 24px); display: flex; flex-direction: column; gap: 14px; }
.k3-hstep__n { font-size: 14px; color: var(--kit-text-secondary); }
.k3-hstep__rail h3 { margin: 0; font-weight: 400; }
.k3-hstep__rail p { margin: 0; color: var(--kit-text-secondary); max-width: 440px; }
.k3-hstep__body { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.k3-hstep__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.k3-hstep__pair img, .k3-hstep__wide img { display: block; width: 100%; border-radius: 14px; object-fit: cover; }
.k3-hstep__pair img { aspect-ratio: 565/440; }
.k3-hstep__wide img { aspect-ratio: 1152/620; }
.k3-layers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.k3-layer { display: flex; flex-direction: column; gap: 12px; }
.k3-layer img { width: 64px; height: 64px; }
.k3-layer h4 { margin: 0; font-size: 18px; font-weight: 400; }
.k3-layer p { margin: 0; color: var(--kit-text-secondary); font-size: 15px; }
.k3-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; padding: 40px; border-radius: 14px; background: var(--kit-surface); }
.k3-tools > p { grid-column: 1 / -1; margin: 0; color: var(--kit-text-secondary); }
.k3-tools span { display: flex; align-items: center; gap: 14px; font-size: 20px; }
.k3-tools img { width: 48px; height: 48px; }
@media (max-width: 1024px) { .k3-hstep { grid-template-columns: 1fr; gap: 28px; } .k3-hstep__rail > div { position: static; } .k3-layers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .k3-hstep__pair, .k3-tools { grid-template-columns: 1fr; } .k3-tools { padding: 24px; } .k3-how { gap: 56px; } }
/* Workflows: five columns, hairline under every use, short red rule on top */
.k3-uses5 { align-items: start; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.k3-uses5__c { counter-reset: u; display: flex; flex-direction: column; background: color-mix(in srgb, var(--kit-ground), #fff 6%); border: 1px solid var(--k3-stroke); border-radius: 14px; overflow: hidden; }
.k3-uses5__c h3 { margin: 0; display: flex; align-items: center; gap: 12px; height: 80px; box-sizing: border-box; padding: 0 18px; font-weight: 400; font-size: 17px; line-height: 1.2; text-align: left; background: color-mix(in srgb, var(--kit-ground), #fff 4%); border-bottom: 2px solid var(--kit-accent); }
.k3-uses5__c h3 img { flex: 0 0 32px; width: 32px; height: 32px; }
.k3-uses5__c ul { list-style: none; margin: 0; padding: 0; flex: 1; }
.k3-uses5__c li { counter-increment: u; display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 15px 22px; border-top: 1px solid var(--kit-line); font-size: 15px; line-height: 1.3; }
.k3-uses5__c li:first-child { border-top: 0; }
.k3-uses5__c li::before { content: counter(u, decimal-leading-zero); color: var(--kit-text-secondary); font-size: 12px; padding-top: 2px; }
@media (max-width: 1200px) { .k3-uses5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .k3-uses5 { grid-template-columns: 1fr; } }
/* Testimonials: any number of quotes, one card at a time with arrows and dots (controls hidden when there is one) */
.k3-tq { position: relative; margin-top: 24px; padding-top: 64px; border-top: 1px solid var(--kit-line); }
.k3-tq__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 24px; }
.k3-tq__track::-webkit-scrollbar { display: none; }
.k3-tq__slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; padding: 56px clamp(24px, 4vw, 64px); min-height: 360px; box-sizing: border-box; border-radius: 14px; background: var(--kit-surface); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.k3-tq__brand { display: flex; align-items: center; gap: 14px; font-size: 18px; }
.k3-tq__brand img { height: 32px; width: auto; }
.k3-tq__q { margin: 0; font-size: clamp(20px, calc(14px + 1.1vw), 32px); line-height: 1.3; font-weight: 400; max-width: 1280px; }
.k3-tq__by { font-size: 15px; color: var(--kit-text-secondary); }
.k3-tq__ctl { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
/* 10 Nov: arrows match the Shots viewer (.k3-shotv__nav): outline circle in text colour, fills on hover */
.k3-tq__ctl button { all: unset; box-sizing: border-box; width: 44px; height: 44px; border: 1px solid var(--kit-text); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; color: var(--kit-text); cursor: pointer; transition: background-color .25s, color .25s; }
.k3-tq__ctl button:hover { background: var(--kit-text); color: var(--kit-ground); }
.k3-tq__ctl button:focus-visible { outline: 2px solid var(--kit-text); outline-offset: 3px; }
.k3-tq__track { touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
.k3-tq__slide { scroll-snap-stop: always; }
@media (max-width: 1200px) { .k3-tq, .k3-tq__track, .k3-hstep__duo > * { min-width: 0; max-width: 100%; } }   /* several slides must not widen the one-column grid (390) */
@media (max-width: 767px) { .k3-tq__ctl button { width: 36px; height: 36px; font-size: 15px; } .k3-tq__ctl { gap: 12px; } }
.k3-tq__dots { display: flex; gap: 8px; align-items: center; }
.k3-tq__dots i { display: block; width: 10px; height: 10px; border-radius: 6px; background: var(--kit-line); }
.k3-tq__dots i.is-on { background: var(--kit-accent); width: 28px; }
.k3-tq--one .k3-tq__ctl { display: none; }
/* Built for production */
.k3-bfp { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.k3-bfp__i { display: grid; grid-template-columns: minmax(150px, 300px) 1fr; align-items: stretch; border: 1px solid var(--kit-line); border-radius: 14px; overflow: hidden; min-height: 240px; }
.k3-bfp__i img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; display: block; }
.k3-bfp__i div { padding: 24px 32px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.k3-bfp__i span { font-size: 14px; color: var(--kit-text-secondary); }
.k3-bfp__i h3 { margin: 0; font-weight: 400; }
.k3-bfp__i p { margin: 0; color: var(--kit-text-secondary); }
@media (max-width: 1200px) { .k3-bfp { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .k3-bfp__i { grid-template-columns: 1fr; } .k3-bfp__i img { min-height: 0; aspect-ratio: 5/3; } }
/* Shot cards (link to /shots/?shot=<slug>) */
.k3-shotcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.k3-shotcard { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 16/10; color: #fff; text-decoration: none; background: #101214; }
.k3-shotcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.k3-shotcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.7)); }
.k3-shotcard b { position: absolute; z-index: 2; left: 18px; bottom: 16px; font-weight: 400; font-size: 17px; }
.k3-shotcard i { position: absolute; z-index: 2; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.7); opacity: 0; transform: scale(.85); transition: opacity .3s, transform .3s; }
.k3-shotcard i::before { content: ""; position: absolute; left: 22px; top: 18px; border-left: 14px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.k3-shotcard:hover img, .k3-shotcard:focus-visible img { transform: scale(1.04); }
.k3-shotcard:hover i, .k3-shotcard:focus-visible i { opacity: 1; transform: none; }
.k3-shotcard:focus-visible { outline: 2px solid var(--kit-text); outline-offset: 3px; }
@media (max-width: 1200px) { .k3-shotcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .k3-shotcards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .k3-shotcard img { transition: none; } .k3-shotcard:hover img { transform: none; } }

/* Home round 2 (Paul's pins, 5 Nov) */
.k3-sec__in > p.k3-shots-more { margin: 56px 0 0 !important; }
.k3-hstep__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.k3-hstep__duo .k3-tools { grid-template-columns: 1fr 1fr; align-content: start; }
.k3-hstep__duo .k3-tq { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; }
.k3-hstep__duo .k3-tq__slide { padding: 32px; min-height: 0; flex: 0 0 100%; }
.k3-hstep__duo .k3-tq__q { font-size: clamp(15px, 1.05vw, 18px); line-height: 1.45; }
.k3-hstep__duo .k3-tq__track { flex: 1; }
@media (max-width: 1200px) { .k3-hstep__duo { grid-template-columns: 1fr; } }
/* cinematic entrance, scroll-driven: JS sets --p (0..1) on each line from its position in the viewport; "Meet MANTIS" lags the first line */
.k3-anim .k3-punch__l, .k3-anim .k3-punch__m { opacity: var(--p, 0); transform: translateY(calc((1 - var(--p, 0)) * 48px)); filter: blur(calc((1 - var(--p, 0)) * 12px)); will-change: opacity, transform; } .k3-anim .k3-punch__l.is-p1, .k3-anim .k3-punch__m.is-p1 { filter: none; will-change: auto; }
.k3-anim .k3-rv { opacity: 0; transform: translateY(34px); filter: blur(10px); transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.2s cubic-bezier(.2,.7,.2,1), filter 1.1s ease; }
.k3-anim .k3-rv.is-in { opacity: 1; transform: none; filter: none; }
.k3-anim .k3-rv:nth-child(2) { transition-delay: .15s; }
.k3-punch .k3-sec__in { padding-top: calc(var(--k3-padY) * 2); padding-bottom: calc(var(--k3-padY) * 2.4); }
@media (prefers-reduced-motion: reduce) { .k3-anim .k3-punch__l, .k3-anim .k3-punch__m, .k3-anim .k3-rv { opacity: 1 !important; transform: none !important; filter: none !important; transition: none; } }

.k3-tools { background: #F1F2F3; }
.k3-tq__slide { background: #DADBDD; }
.k3-tools img { filter: invert(1) brightness(.15); }
/* official partner lockups (6 Nov): supplied colour file, no filter; max-height/max-width scale both sides, never stretch.
   Houdini needs >= 0.75 in (72 px) wide, Autodesk well above its digital minimum; the cell padding is the clear space */
.k3-tools .k3-tools__logo { min-height: 48px; }
.k3-tools .k3-tools__logo img { filter: none; width: auto; height: auto; max-height: 22px; max-width: 100%; }
.k3-tools .k3-tools__logo--md img { max-height: 27px; }
.k3-tools .k3-tools__logo--lg img { max-height: 40px; }
.k3-tq__brand .k3-tq__logo { width: auto; height: auto; max-height: 22px; max-width: 100%; }
.k3-mcard--cmp .k3-chip--logo img { height: 16px; width: auto; aspect-ratio: 362.48 / 60.81; }   /* Houdini lockup: 16 px tall = 95 px wide, above the 72 px minimum */
.k3-bfp__i { background: #fff; }

/* Product v9: rows stay dark (the Home cards are white on grey) */
.k3-bfp--rows .k3-bfp__i { background: #192026; }
.k3-bfp--rows .k3-bfp__i span { font-size: 14px; }

/* Home opener device (exploratory, 5 Nov): MANTIS front rises from behind the video as you scroll; its centre meets "Meet MANTIS" when that line is in focus. Revert: HOME_DEVICE = False in build_pages.py */
.k3-punch--dev { overflow: hidden; }
.k3-punch__dev { position: absolute; z-index: 0; left: 50%; top: 0; width: min(40vw, 770px); height: auto; pointer-events: none; transform: translateY(100vh); backface-visibility: hidden; }
.k3-punch--dev .k3-sec__in { position: relative; z-index: 1; }
.k3-punch--dev .k3-punch__l { max-width: 75%; position: relative; z-index: 2; }
.k3-punch--dev .k3-sec__in { padding-bottom: calc(var(--k3-padY) * 3.4); }
@media (max-width: 767px) { .k3-punch .k3-punch__dev { display: none !important; } .k3-punch--dev .k3-punch__l { max-width: none; } }

/* reveal video: autoplays muted while in view, sound toggle */
.k3-reveal .k3-sec__in { position: relative; }
.k3-sound { position: absolute; z-index: 4; right: 24px; top: 24px; display: block; width: auto; height: 44px; padding: 0 20px; margin: 0; box-sizing: border-box; border-radius: 100px; border: 1px solid rgba(255,255,255,.6); background: rgba(10,12,14,.66); color: #fff; font: 600 14px/42px var(--kit-font); letter-spacing: 0; text-transform: none; text-align: center; white-space: nowrap; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.k3-sound svg, .k3-sound span { display: inline-block; vertical-align: middle; margin: 0; }
.k3-sound svg { margin-right: 10px; margin-top: -3px; }
.k3-sound:hover { border-color: #fff; }
.k3-sound svg { width: 20px; height: 20px; }
@media (max-width: 767px) { .k3-sound { right: 12px; top: 12px; height: 40px; padding: 0 14px; } }

/* reveal that plays both ways (Product stage + Connect rows): in on the way down, back out on the way up */
.k3-anim .k3-rw { opacity: 0; transform: translateY(34px); filter: blur(10px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1), filter .9s ease; }
.k3-anim .k3-rw.is-in { opacity: 1; transform: none; filter: none; }
.k3-anim .k3-rw.is-in:nth-child(2) { transition-delay: .12s; } .k3-anim .k3-rw.is-in:nth-child(3) { transition-delay: .24s; } .k3-anim .k3-rw.is-in:nth-child(4) { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) { .k3-anim .k3-rw { opacity: 1 !important; transform: none !important; filter: none !important; transition: none; } }

/* Opener device at full strength; the text sits on a soft dark scrim that is part of the text block itself, so it tracks the text at every scroll position and width (Paul picked the scrim, 5 Nov). Glow and mask variants dropped. */
.k3-punch--dev { --devo: 1; }
.k3-punch--dev .k3-punch__l::before { content: ""; position: absolute; z-index: -1; left: -8%; right: -24%; top: -190px; bottom: -120px; background: radial-gradient(ellipse closest-side at 56% 50%, rgba(17,22,26,.96) 0%, rgba(17,22,26,.9) 40%, rgba(17,22,26,0) 98%); pointer-events: none; }
@media (max-width: 767px) { .k3-punch--dev .k3-punch__l::before { display: none; } }

/* About 5 Nov (931:22): trio + portfolio card */
.k3-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.k3-trio__i h3 { margin: 0; padding-bottom: 12px; font-weight: 400; font-size: 28px; line-height: 1.2; border-bottom: 1px solid var(--kit-line); position: relative; }
.k3-trio__i h3::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 80px; height: 3px; background: var(--kit-accent); }
.k3-trio__i p { margin: 16px 0 0; color: var(--kit-text-secondary); }
.k3-trio--big .k3-trio__i h3 { font-size: clamp(48px, 5vw, 96px); line-height: 1.05; }
.k3-trio--big .k3-trio__i h3::after { width: 120px; }
.k3-pcard { display: grid; grid-template-columns: 1fr 1fr; background: #11171c; border-radius: 14px; overflow: hidden; color: #fff; }
.k3-pcard__img img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block; }
.k3-pcard__txt { padding: clamp(32px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; gap: 32px; }
.k3-pcard__txt h3 { margin: 0; font-weight: 400; }
.k3-pcard__txt .k3-btn { align-self: flex-start; }
.k3-pcard .k3-trio { gap: 24px; }
.k3-pcard .k3-trio__i p { color: rgba(255,255,255,.72); font-size: 14px; }
.k3-hsplit { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 48px; }
.k3-hsplit > p { margin: 0; color: var(--kit-text-secondary); max-width: 520px; }
@media (max-width: 1024px) { .k3-pcard { grid-template-columns: 1fr; } .k3-pcard__img img { min-height: 0; aspect-ratio: 16/10; } }
@media (max-width: 880px) { .k3-trio { grid-template-columns: 1fr; gap: 40px; } .k3-hsplit { grid-template-columns: 1fr; gap: 16px; } }
.k3-sec--light .k3-pcard, .k3-sec--light .k3-pcard h3, .k3-sec--light .k3-pcard .k3-btn { color: #fff; }
.k3-sec--light .k3-pcard .k3-trio__i h3 { border-bottom-color: rgba(255,255,255,.3); }
.k3-sec--light .k3-pcard .k3-btn--sec { border-color: var(--kit-accent); background: transparent; }
.k3-pcard .k3-btn.k3-btn--sec, .k3-pcard .k3-btn.k3-btn--sec::after { color: #fff !important; }
.k3-pcard .k3-btn.k3-btn--sec { width: auto; }
.k3-sec:has(.k3-pcard) { padding-bottom: 80px; }
@media (max-width: 880px) { .k3-pcard { margin: 0 24px; } .k3-hsplit > p { padding: 0 24px; } }
/* 6 Nov About pins: light section runs to the page edge, page line drawn through it, visible top rule */
.k3-sec.k3-sec--edge { margin-left: 0; padding-left: calc(var(--k3-line) + 1px); border-top: 1px solid #B9B9BD;
  background-image: linear-gradient(to right, transparent var(--k3-line), #B9B9BD var(--k3-line), #B9B9BD calc(var(--k3-line) + 1px), transparent calc(var(--k3-line) + 1px)); }
#fit .k3-sec__in { padding-bottom: 120px; }
.k3-pcard__img img { object-position: 50% 20%; }
/* trio scroll-in: words rise, red accent draws (kit-v3.js adds .is-in) */
.k3-trio .k3-trio__i { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 120ms); }
.k3-trio .k3-trio__i h3::after { width: 0; transition: width .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 120ms + 250ms); }
.k3-trio.is-in .k3-trio__i { opacity: 1; transform: none; }
.k3-trio.is-in .k3-trio__i h3::after { width: 80px; }
.k3-trio--big.is-in .k3-trio__i h3::after { width: 120px; }
@media (prefers-reduced-motion: reduce) { .k3-trio .k3-trio__i { opacity: 1; transform: none; transition: none; } .k3-trio .k3-trio__i h3::after { transition: none; width: 80px; } .k3-trio--big .k3-trio__i h3::after { width: 120px; } }
.k3-pcard { margin: 0 40px; }
@media (max-width: 880px) { .k3-pcard { margin: 0 24px; } }
.k3-trio__ic { display: block; width: 56px; height: 56px; object-fit: contain; margin-bottom: 16px; }
.k3-trio__ic--ph { border: 1px dashed rgba(255,255,255,.45); border-radius: 8px; font-size: 10px; line-height: 1.2; color: rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px; box-sizing: border-box; }
.k3-sec .k3-pcard { padding: 0; }

/* About 6 Nov: photos in the trio and a smaller in-section photo */
.k3-trio__img{width:100%;aspect-ratio:3/2;overflow:hidden;margin-bottom:24px}
.k3-trio__img img{width:100%;height:100%;object-fit:cover;display:block}
.k3-media{margin-top:48px;width:50%;aspect-ratio:3/2;overflow:hidden}
.k3-media img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:880px){.k3-media{width:100%}}

/* Hardware/Software pair buttons: compact size at every width, same as the kit mobile button (Paul 6 Nov) */
.k3-page .k3-pair__btn .k3-btn { padding: 12px 32px; font-size: 16px; line-height: 24px; }
.k3-page .k3-pair__btn .k3-btn::after { margin: 3px 4px; }

/* 6 Nov Paul: About images take the kit image radius (--k3-r) */
.k3-media, .k3-trio__img { border-radius: var(--k3-r); }
.k3-pcard { border-radius: var(--k3-r); }
/* 6 Nov Paul: small red accent line = round end caps everywhere (radius = half thickness); About trio line 3 -> 4 px */
.k3-trio__i h3::after { height: 4px; bottom: -2.5px; border-radius: 2px; }
.k3-sspec li::before { border-radius: 1.5px; }
.k3-sv__tab.is-on .k3-sv__line { border-radius: 1.5px; }

/* k3-mside: text left, image right in the GeoCloud "large-angleimage-nose-faceleft-alignright" mask.
   Copied from geocloud.hexagon.com/industry/survey-rc ("Scalable data collaboration", measured 6 Nov):
   image column = 37.5% of the row at >=1200 (699/1866 at 1920), height = text column height (stretch), flush right,
   mask-size cover anchored 0% 50%, object-fit cover 0% 50%; 1024-768: two columns ~50/50, image column padding-left 64 (1024) / 40 (880);
   <=767: stacked, image full width under the text, 16:9, padding-left 32. */
.k3-sec.k3-mside{padding-bottom:0!important}
.k3-mside .k3-sec__in{display:grid!important;grid-template-columns:1fr 37.5%;align-items:stretch;padding-right:0!important;margin-right:0;max-width:none}
.k3-mside .k3-head{margin:0!important;max-width:none!important;padding-top:clamp(64px,5vw,97px)!important;padding-bottom:clamp(64px,5vw,97px)!important;padding-right:clamp(32px,5vw,97px)!important;align-self:center}
.k3-mside .k3-media{margin:0!important;padding:0!important;width:auto!important;height:100%!important;aspect-ratio:auto!important;border-radius:0!important;
  -webkit-mask:url("masks/large-angleimage-nose-faceleft-alignright.svg") no-repeat 0% 50%/cover;mask:url("masks/large-angleimage-nose-faceleft-alignright.svg") no-repeat 0% 50%/cover}
.k3-mside .k3-media img{width:100%;height:100%;object-fit:cover;object-position:0% 50%}
@media (max-width:1199px){.k3-mside .k3-sec__in{grid-template-columns:1fr 1fr}.k3-mside .k3-media{margin-left:64px!important}}
@media (max-width:880px){.k3-mside .k3-media{margin-left:40px!important}}
@media (max-width:767px){.k3-mside .k3-sec__in{display:block!important}.k3-mside .k3-head{padding-top:48px!important;padding-bottom:32px!important}.k3-mside .k3-media{margin:0 0 0 32px!important;height:auto!important;aspect-ratio:16/9!important}}
/* k3-mside: the text sets the row height, never the photo (6 Nov, option round showed taller photos stretching the row) */
@media (min-width:768px){ .k3-mside .k3-media{position:relative} .k3-mside .k3-media img{position:absolute;inset:0} }
@media (min-width:1200px){ .k3-mside .k3-sec__in{min-height:clamp(360px,24.7vw,475px)} }   /* keeps the approved v6.4 height (475 at 1920) */


/* ---- site audit fixes (6 Nov, docs/site-audit-findings-2026-11.md) ---- */
/* F7: touch targets of at least 44 px at tablet and phone widths. Hit areas grow with an invisible ::after; nothing moves. */
@media (max-width: 1024px) {
  .k3-footer__social a, .k3-footer__links a, .k3-footer__legal a, .k3-nav a, .k3-drawer a { position: relative; }
  .k3-footer__social a::after, .k3-footer__links a::after, .k3-footer__legal a::after, .k3-nav a::after, .k3-drawer a::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
  .k3-burger { position: relative; } .k3-burger::after { content: ""; position: absolute; inset: -2px; }
  .k3-consent .k3-btn { min-height: 44px; }
}
/* F2: Shots spec labels ran into the next column at 360-390 ("measurements", "positions"): fixed with soft hyphens in the copy (build_pages.py). */

/* F4 (Paul, 7 Nov): the card's 24 px right space squeezed the photo (white strip). Move it onto the text area instead:
   same text margins and heights, photo runs to the card edge. */
.k3-mcard, .k3-ecard { padding-right: 0; }
.k3-mcard__body, .k3-ecard__body { padding-right: 24px; }

/* F6 (Paul, 7 Nov): section text started 7-8 px left of the hero text (section --v4-pad 40/32/24 vs hero --k3-padL 47/40/32).
   Start section content on the hero's text line, site-wide. Same on the right so cards and images stay centred (Paul: both sides). */
.k3-sec__in > * { padding-left: var(--k3-padL); padding-right: var(--k3-padL); }

/* Kevin pin 305 (9 Nov): the longer Home punch copy ran into the device image. From 768 up the text stays in the left half,
   clear of the image (which starts at ~51%); the glow behind it stays. Phones have no image. */
@media (min-width: 768px) { .k3-punch--dev .k3-punch__l { max-width: 48%; } }

/* Kevin pin 308 (9 Nov): Product "MANTIS Studio" row. The monitor mockup is a transparent PNG: show it whole, never crop it */
.k3-syscard--fit .k3-syscard__img img { object-fit: contain; padding: clamp(16px, 2.5vw, 40px); box-sizing: border-box; }
.k3-syscard--fit .k3-syscard__steps { color: var(--kit-text); letter-spacing: .02em; }
@media (max-width: 880px) { .k3-syscard--fit .k3-syscard__img { aspect-ratio: 1800 / 1497; } }
/* #324 Studio call-outs: native 16:9 UI stills, never cropped */
.k3-bfp--ui .k3-bfp__i { grid-template-columns: minmax(200px, 520px) 1fr; }
.k3-bfp--ui .k3-bfp__i { min-height: 0; align-items: start; }
.k3-bfp--ui .k3-bfp__i img { width: 100%; height: auto; min-height: 0; aspect-ratio: auto; object-fit: fill; align-self: start; }
@media (max-width: 560px) { .k3-bfp--ui .k3-bfp__i img { aspect-ratio: auto; height: auto; } }
.k3-studio-intro { color: var(--kit-text-secondary); max-width: 62ch; margin: 0 0 24px; }
@media (max-width: 880px) { .k3-bfp--ui .k3-bfp__i { grid-template-columns: 1fr; } }
.k3-sec__in > p.k3-studio-intro { margin: 16px 0 32px; }
/* #325 (Kevin, 9 Nov): a section intro with no title above it stands in for the title, so it takes the t32 step */
.k3-page .k3-head:not(:has(h1, h2, h3)) p { font-size: clamp(19.2px, calc(16.46px + .823vw), 32px); line-height: 1.3; max-width: 40ch; }
.k3-page .k3-syscard__txt p { font-size: 18px; line-height: 1.5; }

/* ---- native Elementor elements (6 Nov). Front end: each block's elements sit straight in the page's chunk container, where
   one HTML widget wrapper used to sit. Give them what Elementor gave that wrapper (.e-con .elementor-widget{min-width:0},
   .e-con>.elementor-widget{max-width:100%}) and no gap between them, so layout is the same as before. */
.e-con.k3-chunk { --gap: 0px; --row-gap: 0px; --column-gap: 0px; }
.e-con.k3-chunk > :not(.elementor-element) { min-width: 0; max-width: 100%; }

/* ---- native Elementor elements: editor preview only (6 Nov). The front end gets the kit markup unchanged
   (components/php/k3-native.php), so nothing here applies there. In the editor, Elementor wraps every widget and gives
   containers 10 px padding and 20 px gaps by default; take those defaults away so the preview reads like the page. */
.elementor-editor-active .e-con.k3n, .elementor-editor-preview .e-con.k3n {
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px; --widgets-spacing: 0px; --widgets-spacing-row: 0px; --widgets-spacing-column: 0px;
  --min-height: 0; --flex-wrap: nowrap;
}
.elementor-editor-active .elementor-widget.k3n .elementor-heading-title { font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; text-transform: inherit; margin: 0; }
.elementor-editor-active .elementor-widget.k3n { margin: 0; }

/* ------------------------------------------------------------ Point cloud band (MANTIS Product option C, 9 Nov; redesign after Paul's review).
   The section's own .k3-sec border-top is the thin top line. The viewer runs edge to edge in the band (no side or bottom padding).
   Orbit (default, still): tools top left, "Play camera path" bottom left, zoom bottom right. Camera path: timeline along the bottom only. */
.k3-sec--pc .k3-sec__in > .k3-pc { padding: 0; }
.k3-pc { width: 100%; color: var(--kit-text, #fff); font-size: 14px; line-height: 20px; }
.k3-pc__box { position: relative; }
.k3-sec--pc .k3-pc__view { border-top: 1px solid var(--kit-line); }   /* Paul 9 Nov: thin line between the intro row and the viewer, full band width */
.k3-pc__view { position: relative; width: 100%; aspect-ratio: 21 / 9; background: #000; overflow: hidden; }
.k3-pc__stage { position: absolute; inset: 0; }
.k3-pc__stage canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.k3-pc.is-orbit .k3-pc__stage canvas { cursor: grab; }
.k3-pc.is-orbit .k3-pc__stage canvas:active { cursor: grabbing; }
.k3-pc .k3-pc__poster { position: absolute; inset: 0; width: 100%; height: 100% !important; max-width: none; object-fit: cover; transition: opacity .6s ease; }
.k3-pc.is-ready .k3-pc__poster { opacity: 0; pointer-events: none; }
.k3-pc__hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 16px; border-radius: 12px; background: rgba(17, 22, 26, .85); pointer-events: none; opacity: 0; transition: opacity .3s; white-space: nowrap; }
.k3-pc__hint.is-on { opacity: 1; }
.k3-pc.is-error .k3-pc__hint { opacity: 1; }
/* floating containers */
.k3-pc__tools, .k3-pc__time, .k3-pc__zoom { position: absolute; z-index: 2; display: flex; align-items: center; background: rgba(17, 22, 26, .85); border: 1px solid var(--kit-line); border-radius: 12px; }
.k3-pc__tools { left: 24px; top: 24px; gap: 4px; padding: 4px; }
.k3-pc__time { left: 24px; right: 24px; bottom: 24px; gap: 16px; padding: 6px 6px 6px 6px; }
.k3-pc__zoom { right: 24px; bottom: 24px; flex-direction: column; padding: 4px; gap: 4px; }
.k3-pc__cta { position: absolute; left: 24px; bottom: 24px; z-index: 2; }
.k3-pc:not(.is-ready) :is(.k3-pc__tools, .k3-pc__time, .k3-pc__zoom, .k3-pc__cta) { opacity: .5; pointer-events: none; }
.k3-pc.is-orbit .k3-pc__time, .k3-pc:not(.is-orbit) .k3-pc__zoom, .k3-pc:not(.is-orbit) .k3-pc__cta { display: none; }
/* buttons */
.k3-pc__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--kit-text, #fff); font: inherit; cursor: pointer; white-space: nowrap; }
.k3-pc__btn:hover, .k3-pc__btn[aria-expanded="true"] { background: rgba(255, 255, 255, .08); }
.k3-pc__btn[aria-expanded="true"] { color: var(--kit-accent); }
.k3-pc__cta { background: var(--kit-accent); color: var(--kit-on-accent, #11161A); font-weight: 700; border-radius: 12px; min-height: 44px; padding: 0 18px; }
.k3-pc__cta:hover { background: var(--kit-accent); filter: brightness(1.08); }
.k3-pc__zoom button { width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--kit-text, #fff); font: 400 22px/1 var(--kit-font, sans-serif); cursor: pointer; }
.k3-pc__zoom button:hover { background: rgba(255, 255, 255, .08); }
.k3-pc__play { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--kit-accent); color: var(--kit-on-accent, #11161A); cursor: pointer; }
.k3-pc__time input { flex: 1; min-width: 0; height: 28px; }
.k3-pc__tc { min-width: 132px; text-align: right; font-variant-numeric: tabular-nums; color: var(--kit-text-secondary, #B9B9BD); }
.k3-pc__exit { border: 1px solid var(--kit-line); }
/* popovers */
.k3-pc__menu { position: relative; }
.k3-pc__pop { position: absolute; top: calc(100% + 10px); left: 0; display: grid; gap: 12px; min-width: 220px; padding: 12px; background: rgba(17, 22, 26, .96); border: 1px solid var(--kit-line); border-radius: 12px; z-index: 3; }
.k3-pc__pop[hidden] { display: none; }
.k3-pc__pop > label:not(.k3-pc__sw) { display: flex; justify-content: space-between; font-size: 12px; color: var(--kit-text-secondary, #B9B9BD); }
.k3-pc__seg { display: flex; padding: 3px; border-radius: 8px; background: var(--kit-surface-deep, #0b0d0f); }
.k3-pc__seg button { flex: 1; min-height: 36px; padding: 0 14px; border: 0; border-radius: 6px; background: none; color: var(--kit-text-secondary, #B9B9BD); font: inherit; cursor: pointer; white-space: nowrap; }
.k3-pc__seg button[aria-checked="true"] { background: var(--kit-accent); color: var(--kit-on-accent, #11161A); font-weight: 700; }
.k3-pc__sw { display: flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; user-select: none; }
.k3-pc__sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.k3-pc__sw i { position: relative; flex: none; width: 36px; height: 20px; border-radius: 10px; background: #4a4f55; transition: background .2s; }
.k3-pc__sw i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .2s; }
.k3-pc__sw input:checked + i { background: var(--kit-accent); }
.k3-pc__sw input:checked + i::after { left: 18px; }
.k3-pc input[type=range] { accent-color: var(--kit-accent); width: 100%; }
.k3-pc__sw input:focus-visible + i, .k3-pc button:focus-visible, .k3-pc input[type=range]:focus-visible { outline: 2px solid var(--kit-accent); outline-offset: 2px; }
.k3-pc-cap { margin-top: 16px; max-width: 60ch; color: var(--kit-muted, #B9B9BD); font-size: 16px; line-height: 24px; }
@media (max-width: 1023px) { .k3-pc__tools, .k3-pc__cta { left: 16px; } .k3-pc__tools { top: 16px; } .k3-pc__time { left: 16px; right: 16px; } .k3-pc__zoom { right: 16px; } .k3-pc__time, .k3-pc__zoom, .k3-pc__cta { bottom: 16px; } }
.k3-pc__open, .k3-pc__close { display: none; }
/* Phones: M1 (Paul 9 Nov). Inline = poster still + "Open 3D viewer"; nothing loads until tapped. The viewer then runs full screen with the
   same controls (one finger orbits there, since there is no page to scroll) and a close button top right. */
@media (max-width: 767px) {
  .k3-pc__view { aspect-ratio: 4 / 3; }
  .k3-pc:not(.is-full) :is(.k3-pc__tools, .k3-pc__time, .k3-pc__zoom, .k3-pc__cta, .k3-pc__stage) { display: none; }
  .k3-pc:not(.is-full) .k3-pc__poster { opacity: 1; }
  .k3-pc:not(.is-full) .k3-pc__open { display: inline-flex; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; min-height: 48px; padding: 0 22px; border-radius: 12px; background: var(--kit-accent); color: var(--kit-on-accent, #11161A); font-weight: 700; }
  .k3-pc.is-full .k3-pc__box { position: fixed; inset: 0; z-index: 10000; background: #000; }
  .k3-pc.is-full .k3-pc__view { aspect-ratio: auto; height: 100%; }
  .k3-pc.is-full .k3-pc__stage canvas { touch-action: none; }
  .k3-pc.is-full .k3-pc__close { display: grid; place-items: center; position: absolute; top: 16px; right: 16px; z-index: 3; width: 44px; height: 44px; padding: 0; border-radius: 12px; background: rgba(17, 22, 26, .85); border: 1px solid var(--kit-line); font-size: 26px; }
  .k3-pc__btn, .k3-pc__play, .k3-pc__zoom button { min-height: 44px; }
  .k3-pc__play, .k3-pc__zoom button { width: 44px; height: 44px; }
  .k3-pc__time { flex-wrap: wrap; gap: 8px 12px; }
  .k3-pc__tc { min-width: 0; font-size: 12px; }
  .k3-pc__pop { min-width: 200px; }
}

/* ---- skin ---- */
/* skin: LGS (Leica Geosystems dark). Everything brand-specific lives here and in skin.json. */
@font-face { font-family: "Hexagon Akkurat"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/akkurat-light.woff2") format("woff2"); }
@font-face { font-family: "Hexagon Akkurat"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/akkurat-regular.woff2") format("woff2"); }
@font-face { font-family: "Hexagon Akkurat"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/akkurat-bold.woff2") format("woff2"); }
body { --kit-font: "Hexagon Akkurat", Arial, sans-serif; --kit-on-accent: #11161A; --kit-surface-text: #FFFFFF; }
/* GeoCloud's Land / Sea divider variants keep working but resolve to LGS red / carmine / greys */
.rounded-divider.land-divider .elementor-divider-separator { background: var(--e-global-color-aa561fe); }
.rounded-divider.sky-dark-divider .elementor-divider-separator { background: var(--e-global-color-13ed3c5); }
.rounded-divider.sea-divider .elementor-divider-separator { background: var(--e-global-color-3b7837d); }

/* #288: a Studio UI screen in the outputs viewer - the stage takes the screen's own ratio at every width, no bars */
.k3-sv .k3-sv__stage.k3-sv__stage--ui { aspect-ratio: 1837 / 1072; max-height: none; }
.k3-sv .k3-sv__stage.k3-sv__stage--ui img { object-fit: contain; }

/* Home hero loop (9 Nov): the video sits under the SVG lines, inside the photo mask; the poster image hides once it plays */
.k3-hero__art .k3-hero__video { position: absolute; left: 0; top: 0; width: 0; height: 0; object-fit: cover; object-position: 50% 50%; pointer-events: none; }
.k3-hero__art.is-video svg > image { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .k3-hero__art .k3-hero__video { display: none; } }

/* 9 Nov (Paul): every image + text card has a thin divider where the image meets the text, in the card's own stroke colour; vertical side by side, horizontal when stacked */
.k3-bfp__i > div, .k3-syscard__txt { align-self: stretch; border-left: 1px solid; border-left-color: inherit; }
.k3-bfp__i > div { border-left-color: var(--kit-line); }
.k3-mcard__body, .k3-ecard__body { border-top: 1px solid; border-top-color: inherit; }
@media (max-width: 880px) { .k3-bfp--ui .k3-bfp__i > div, .k3-syscard__txt { border-left: 0; border-top: 1px solid; } .k3-bfp--ui .k3-bfp__i > div { border-top-color: var(--kit-line); } .k3-syscard__txt { border-top-color: var(--k3-stroke); } }
@media (max-width: 560px) { .k3-bfp__i > div { border-left: 0; border-top: 1px solid var(--kit-line); } }

/* 10 Nov audit (Paul: best responsive site): footer and legal links were 12-15 px tall tap targets; invisible hit area, no visual change */
.k3-footer__links a, .k3-footer__legal a { position: relative; }
.k3-footer__links a::before, .k3-footer__legal a::before { content: ""; position: absolute; inset: -10px -4px; }
/* Product "What MANTIS is" option A (Paul 10 Nov): device centred right of the text, equal gaps, 4K render locked to the outline */
.k3-stage--fit .k3-stage__in { grid-template-columns: minmax(0, min(660px, 40vw)) minmax(0, 1fr); }
.k3-stage--fit .k3-stage__art { margin-left: 0; }
.k3-stage--fit .k3-stage__sticky { margin-inline: auto; width: min(820px, 43vw, 100%); }
.k3-stage--fit .k3-stage__render { height: 100%; }
@media (max-width: 880px) { .k3-stage--fit .k3-stage__sticky { width: 100%; } }
/* 10 Nov audit item 1 (Paul "a"): below 768 the device is hidden, so drop its extra bottom room; the video follows "Meet MANTIS" at the normal section gap */
@media (max-width: 767px) { .k3-punch--dev .k3-sec__in { padding-bottom: calc(var(--k3-padY) * 2); } .k3-punch--dev .k3-punch__m { padding-bottom: 0; } }

/* 11 Nov GDPR B3: Leica corporate legal line; wraps on phones, same link style */
.k3-footer__legal { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 8px; }
.k3-footer__legal a { margin-left: 0; }
.k3-footer__copy { margin-right: 8px; }
/* 11 Nov Open House: HubSpot radio + consent checkbox */
.k3-hsform .inputs-list label { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.k3-hsform .inputs-list input[type=radio], .k3-hsform .inputs-list input[type=checkbox] { width: 18px !important; height: 18px; margin: 0; padding: 0; flex: none; accent-color: var(--kit-accent); }
.k3-hsform .hs-fieldtype-radio .inputs-list { gap: 12px; padding-top: 4px; }
.k3-hsform .inputs-list label { align-items: flex-start; }
.k3-hsform .inputs-list label > span { margin: 0 !important; font-size: 14px; line-height: 18px; }
.k3-ccard__txt .k3-ccard__hd { gap: 12px; }
.k3-sec__in > .k3-ccard--compact:first-child { margin-top: var(--v4-pad); }
.k3-ccard--compact { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); min-height: 0; }
.k3-ccard--compact .k3-ccard__txt { padding: 32px 40px; justify-content: center; gap: 20px; }
.k3-ccard--compact .k3-ccard__txt h3 { font-size: 32px; line-height: 38px; }
.k3-ccard--compact .k3-ccard__txt > div:last-child { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
.k3-ccard--compact .k3-ccard__txt p { max-width: 60ch; }
.k3-ccard--compact .k3-ccard__img { padding: 0 0 16px 16px; max-height: 300px; }
.k3-ccard--compact .k3-ccard__img img { object-position: 50% 100%; }
@media (max-width: 1200px) { .k3-ccard--compact .k3-ccard__txt > div:last-child { flex-direction: column; align-items: flex-start; gap: 20px; } }
@media (max-width: 880px) { .k3-ccard--compact { grid-template-columns: 1fr; } .k3-ccard--compact .k3-ccard__txt { padding: 24px; } .k3-ccard--compact .k3-ccard__txt h3 { font-size: 26px; line-height: 32px; } .k3-ccard--compact .k3-ccard__img { max-height: none; } .k3-ccard--compact .k3-ccard__img img { aspect-ratio: 16 / 7; } }

/* Design sweep 11 Nov (Paul "a"): DS Video play control, plain eyebrow instead of tag pill, 12 px credit, no dev chip in the newsletter form */
.k3-video__play, .k3-vfeat .k3-video__play { background: rgba(255,255,255,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .25s, background-color .25s; }
.k3-video__play::before, .k3-vfeat .k3-video__play::before { background: #FFFFFF; }
.k3-video:hover .k3-video__play, .k3-video:focus-visible .k3-video__play { background: var(--kit-accent); }
.k3-syscard__tag { display: block; height: auto; border: 0; border-radius: 0; padding: 0; font-size: 11px; letter-spacing: .18em; line-height: 1.3; color: var(--kit-accent); }
.k3-credit, .k3-credit a { font-size: 12px; }
.k3-news__form .k3-form__chip { display: none !important; }
@keyframes k3-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.45); } 70% { box-shadow: 0 0 0 28px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }

/* image nav with three tiles (Shots hidden, 11 Nov): three columns, and the odd tile spans the row on the two-column breakpoint */
.k3-inav:has(> .k3-inav__c:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .k3-inav:has(> .k3-inav__c:nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k3-inav__c:nth-child(3):last-child { grid-column: 1 / -1; border-left: 0; }
}
@media (max-width: 767px) { .k3-inav:has(> .k3-inav__c:nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); } }

/* 11 Nov (Paul): testimonial arrows sit inside the card, bottom-left, inside the card padding; Shots viewer buttons (.k3-shotv__nav look) */
.k3-tq { --tq-px: clamp(24px, 4vw, 64px); --tq-pb: 56px; --tq-btn: 44px; }
.k3-hstep__duo .k3-tq { --tq-px: 32px; --tq-pb: 32px; }
@media (max-width: 767px) { .k3-tq { --tq-btn: 36px; } }
.k3-tq:not(.k3-tq--one) .k3-tq__slide { padding-bottom: calc(var(--tq-pb) + var(--tq-btn) + 24px); }
.k3-tq__ctl { position: absolute; left: var(--tq-px); bottom: var(--tq-pb); margin: 0; z-index: 2; }
/* 11 Nov (Paul): arrows only, no dots or red progress pill */
.k3-tq__dots { display: none; }
.k3-tq__ctl { gap: 12px; }


/* MANTIS-PINS-1111 start: tools row optical logo sizes (Kevin pins 345/348) */
.k3-tools .k3-tools__logo--ad img { max-height: 18px; }
.k3-tools .k3-tools__logo--sx img { max-height: 25px; }
.k3-tools .k3-tools__logo--fd img { max-height: 24px; }
.k3-tools .k3-tools__logo--md img { max-height: 28px; }
.k3-tools .k3-tools__logo--lg img { max-height: 50px; }
/* MANTIS-PINS-1111 end */

/* MANTIS-REVEAL-169 start (11 Nov, option B 80vh, production, Paul approved) */
.k3-reveal { width: calc(100% - var(--k3-line) - 1px) !important; }
.k3-reveal .k3-sec__in { display: block !important; }
.k3-reveal .k3-video, .k3-reveal .k3-video.is-playing { display: block !important; aspect-ratio: 16 / 9 !important; height: auto !important; width: 100% !important; max-width: calc(80vh * 16 / 9) !important; margin-inline: auto !important; }
.k3-reveal .k3-video img, .k3-reveal .k3-video video { object-fit: contain !important; }
/* MANTIS-REVEAL-169 end */

/* MANTIS-REVEAL-LINES start (11 Nov, staging preview): thin brand lines in the reveal side space. 1 px = visible margin line weight (1:20), Cool Grey 4 C #B9B9BD, 30 deg, max 4 thin lines, legs exit the frame or end on the divider; never over the video. */
.k3-reveal-lines { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.k3-reveal-lines svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; }
.k3-reveal-lines .hxdr-line-path { stroke: #B9B9BD; stroke-width: 1px; stroke-linecap: butt; }
@media (max-width: 880px) { .k3-reveal-lines { display: none; } }
@media (prefers-reduced-motion: reduce) { .k3-reveal-lines .hxdr-line-path { transition: none !important; stroke-dashoffset: 0 !important; } }
/* MANTIS-REVEAL-LINES end */

/* MANTIS-HEXROW-1111 start: About Hexagon row (Kevin 11 Nov) - button keeps its own width in the k3-mside text column */
.k3-mside .k3-head>.k3-btn{align-self:flex-start}
/* MANTIS-HEXROW-1111 end */

/* MANTIS-IPHONE-1111 start (Paul's iPhone 16 pass on production, 11 Nov night). Revert: delete this block. */
/* 1 Drawer "Contact us": the 6 Nov touch-target rule (F7) turned every drawer link's ::after into a centred hit box, which took the
   button's arrow off its place and laid it over the label. The button is 44 px tall already; give the arrow back to the row. */
@media (max-width: 1024px) {
  .k3-drawer a.k3-btn { min-height: 44px; }
  .k3-drawer a.k3-btn::after { position: static; left: auto; top: auto; width: 18px; height: 16px; flex: 0 0 18px; transform: none; }
}
/* 2 Home "Meet MANTIS": phones had no picture (the rising device is desktop only). Show the same transparent front, still, under the line. */
@media (max-width: 767px) {
  .k3-punch.k3-punch--dev { display: flex; flex-direction: column; }
  .k3-punch.k3-punch--dev .k3-punch__dev { display: block !important; order: 2; position: relative; left: auto; top: auto; width: min(78%, 340px); height: auto; margin: -16px auto 56px; transform: none !important; opacity: 1 !important; filter: none !important; }
}
/* 3 Cards with no background on Paul's iPhone (Home "Built for production", Product, Discover); Chrome draws them fine. Likely WebKit:
   the stacked card's photo had height:100% in an auto-height grid row, which Safari can resolve to the whole card and push the text out
   under the card. Phones size the photo from its 5:3 ratio instead (same 178 px in Chrome, so nothing moves there). */
@media (max-width: 560px) { .k3-bfp__i { grid-template-rows: auto auto; } .k3-bfp__i img { height: auto; } }
/*   confirmed on Paul's iPhone screenshots (7:43/7:45 PM): photo ran the full card height with the text drawn on it. Product/Discover rows stack
     up to 880 (iPad portrait): same fix; Chrome already draws them at the photo's own ratio (16:9, 3:2), so nothing moves there either. */
@media (max-width: 880px) { .k3-bfp--rows .k3-bfp__i { grid-template-rows: auto auto; } .k3-bfp--rows .k3-bfp__i img { height: auto; } }
/* 4 Before/after labels ran into each other on phones: the "after" label moves to the bottom right, over its own soft shade. */
@media (max-width: 767px) {
  .k3-wipe::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; z-index: 1; pointer-events: none; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.55)); }
  .k3-wipe__tag--r { top: auto; bottom: 32px; }
}
@media (max-width: 480px) { .k3-wipe__tag--r { bottom: 14px; } }
/* 5 Product "Hardware and software": the 1fr column took the cards' min-content width and ran 30 px off a 390 screen. */
@media (max-width: 880px) { .k3-pair { grid-template-columns: minmax(0, 1fr); } .k3-pair__c { min-width: 0; } }
/*   the real culprit: "See the features of MANTIS Studio" could not wrap (nowrap) and was 360 px wide in a 300 px column */
@media (max-width: 767px) { .k3-pair__btn .k3-btn { white-space: normal; max-width: 100%; text-align: left; } }
/* 6 Product 3D viewer on phones: controls grouped in the middle of the bottom bar; the selected hotspot shows its name again;
   a "3D model · Drag to rotate" pill (added by kit.js) at the top left on touch screens and tablet/phone widths, gone after the first drag. */
@media (max-width: 767px) {
  .k3-viewer--rt .k3-viewer__ctl { left: 50%; right: auto; transform: translateX(-50%); justify-content: center; gap: 8px; }
  .k3-viewer--ann .k3-hot.is-on span[data-l]::after { content: attr(data-l); margin-left: 6px; color: #e9e9ea; font-weight: 400; letter-spacing: .01em; }
}
.k3-viewer__pill--touch { display: none; left: 12px; top: 12px; bottom: auto; transform: none; z-index: 4; transition: opacity .4s; }
.k3-viewer__pill--touch.is-off { opacity: 0; }
@media (max-width: 1024px), (pointer: coarse) { .k3-viewer__pill--touch { display: inline-flex; } }
@media (max-width: 767px) { .k3-viewer__pill--touch { font-size: 11px; padding: 6px 10px; } }
/* 7 Point cloud on touch: the hint names the gestures (pinch zoom and two-finger move are on for touch in kit.js); two lines if needed. */
@media (pointer: coarse) { .k3-pc__hint { white-space: normal; width: max-content; max-width: min(320px, calc(100% - 48px)); text-align: center; } }
/* 8 Shots: iOS hides scrollbars, so the shot text box gets a "Scroll for more" cue under it while there is more to read (kit.js). */
.k3-shotv__more { display: none; }
@media (max-width: 1024px), (pointer: coarse) {
  .k3-shotv__more.is-over { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; align-self: flex-start; margin: -6px 0 14px; padding: 4px 0; border: 0; background: none; color: var(--kit-text-secondary, #B9B9BD); font: 700 11px/1 var(--kit-font); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: opacity .25s; }
  .k3-shotv__more.is-over::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .k3-shotv__more.is-end { opacity: 0; pointer-events: none; }
}
/* 9 About on phones: the "Measured, not estimated" and AEON images had a bare hard top edge. A thin margin line (#B9B9BD, 1 px)
   runs from the left page line to the right edge along the image's top (the image's mask clips its own borders, so the line sits on the heading block). */
@media (max-width: 767px) {
  .k3-mside .k3-head { position: relative; }
  .k3-mside .k3-head::after { content: ""; position: absolute; left: -1px; right: 0; bottom: 0; height: 1px; background: #B9B9BD; pointer-events: none; }
}
/* ---- round 2 (Paul's iPhone re-test, 11 Nov ~21:20) ---- */
/* 11 Open House CTAs = the kit Primary button and its standard hover (red, dark label per Rupa 23 Oct AA; hover Carmine + white).
   The Home band's "Register" was the outline secondary; it now matches every other primary. */
.k3-page a.k3-btn.k3-btn--sec[href$="/open-house/"] { background: var(--kit-accent) !important; color: var(--kit-on-accent) !important; box-shadow: none !important; }
.k3-page a.k3-btn.k3-btn--sec[href$="/open-house/"]:hover, .k3-page a.k3-btn.k3-btn--sec[href$="/open-house/"]:active { background: var(--kit-accent-deep) !important; color: #FFFFFF !important; box-shadow: none !important; }
/*    touch screens: a tap on a same-page primary (Open House hero "Register" -> #register) left the button stuck in its hover colour */
@media (hover: none) {
  .k3-page a.k3-btn[href^="#"]:not(.k3-btn--sec):hover:not(:active) { background: var(--kit-accent); color: var(--kit-on-accent) !important; }
  .k3-page a.k3-btn[href^="#"]:not(.k3-btn--sec):hover::after { transform: none; }
}
/* 12 CTA band ("Want to see MANTIS on your next production?"): the animated line art collided with the text on phones; off at <=880 on every page */
@media (max-width: 880px) { .k3-touch__art { display: none !important; } }
/* 13 Shots on phones and small tablets (<=880): no scrolling text box. The shot title stays; "Expand for more info" (kit DS Accordion item look:
   18/28 label, 1 px rules, plus that becomes a minus) opens the details (lead, Shot on, Made possible, Delivered to). Markup added by kit.js around
   the existing elements, so the shot switcher keeps filling them from data-shot (titles stay data-driven); a shot change closes it. Desktop unchanged. */
.k3-shotv__acc-t { display: none; }
.k3-shotv__acc-a { display: contents; }
@media (max-width: 880px) {
  .k3-shotv { height: auto !important; min-height: 0 !important; }
  .k3-shotv__col { position: static; inset: auto; }
  .k3-shotv__scroll { overflow: visible; max-height: none; padding: 0 !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .k3-shotv__more { display: none !important; }
  .k3-shotv__acc-t { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; margin: 4px 0 0; padding: 16px 0;
    border-top: 1px solid var(--kit-line); border-bottom: 1px solid var(--kit-line); font: 400 18px/28px var(--kit-font); color: var(--kit-text); cursor: pointer; }
  .k3-shotv__acc-t::after { content: ""; flex: 0 0 20px; width: 20px; height: 20px; color: var(--kit-text); transition: transform .25s;
    background: linear-gradient(currentColor, currentColor) center/20px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center/1.5px 20px no-repeat; }
  .k3-facts.k3-acc-open .k3-shotv__acc-t { border-bottom-color: transparent; }
  .k3-facts.k3-acc-open .k3-shotv__acc-t::after { background: linear-gradient(currentColor, currentColor) center/20px 1.5px no-repeat; }
  .k3-shotv__acc-t:focus-visible { outline: 2px solid var(--kit-text); outline-offset: 2px; }
  .k3-shotv__acc-a { display: none; flex-direction: column; gap: 12px; padding: 0 0 20px; border-bottom: 1px solid var(--kit-line); }
  .k3-facts.k3-acc-open .k3-shotv__acc-a { display: flex; }
  .k3-shotv .k3-shotv__acc-a .k3-facts__lead { margin: 0; }
}
/* MANTIS-IPHONE-1111 end */

/* MANTIS-NEWS-1111 start: sitewide newsletter band (Paul 11 Nov). Source 07_web_kit kit-v3.css */

/* ---------- newsletter band (sitewide, above the footer, under the image nav) ---------- */
.k3-news { margin-left: calc(var(--k3-line) + 1px); border-top: 1px solid var(--kit-line); }
.k3-news__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; padding: 80px var(--k3-padR) 80px var(--k3-padL); }
.k3-news__txt { display: flex; flex-direction: column; gap: 16px; }
.k3-news__txt p { color: var(--kit-text-secondary); font-size: 18px; line-height: 1.4; max-width: 560px; }
.k3-news__form { display: flex; flex-direction: column; gap: 20px; }
.k3-news__row { display: flex; align-items: flex-end; gap: 24px; }
.k3-news__row .k3-field { flex: 1 1 auto; }
.k3-news__row .k3-btn { flex: 0 0 auto; }
.k3-news__consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--kit-text-secondary); cursor: pointer; }
.k3-news__consent input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--kit-accent); cursor: pointer; }
.k3-news__consent a { color: var(--kit-text); text-decoration: underline; }
.k3-news__consent.is-bad span { color: var(--kit-accent); }
.k3-news__err { font-size: 12px; color: var(--kit-accent); }
.k3-news__err:empty { display: none; }
.k3-news.is-done .k3-news__form { display: none; }
.k3-news.is-done .k3-news__ok { display: block; }
@media (max-width: 1440px) { .k3-news__in { padding: var(--k3-padY) var(--k3-padR) var(--k3-padY) var(--k3-padL); gap: 48px; } }
@media (max-width: 1024px) { .k3-news__in { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
@media (max-width: 767px) { .k3-news__row { display: contents; } .k3-news__row .k3-field { order: 1; } .k3-news__consent { order: 2; } .k3-news__err { order: 3; } .k3-news__row .k3-btn { order: 4; align-self: flex-start; } }
/* MANTIS-NEWS-1111 end */

/* MANTIS-HERO-AUTOPLAY (11 Nov): the poster <image> shows until the loop is really playing; play button only when autoplay is blocked. */
.k3-hero__art .k3-hero__video { opacity: 0; transition: opacity .4s ease; }
.k3-hero__art.is-video .k3-hero__video { opacity: 1; }
.k3-hero__art .k3-hero__video::-webkit-media-controls-start-playback-button,
.k3-hero__art .k3-hero__video::-webkit-media-controls { display: none !important; -webkit-appearance: none; }
.k3-hero__play { position: absolute; z-index: 3; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.45); color: #fff; display: none; align-items: center; justify-content: center; cursor: pointer; padding: 0; transform: translate(-50%,-50%); }
.k3-hero__art.is-blocked .k3-hero__play { display: flex; }
.k3-hero__play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* /MANTIS-HERO-AUTOPLAY */

/* MANTIS-EPIC-1112: Epic Games shield, stacked mark optical size */
.k3-tools .k3-tools__logo--ep img { max-height: 48px; }

/* MANTIS-PIPE-1112: Product "Works in your pipeline" image slots hidden for launch (Kevin owes the images). Remove this block to bring them back. */
.k3-mcard--cmp .k3-slot { display: none; }
/* /MANTIS-PIPE-1112 */

/* MANTIS-INAV-1112: image-nav tiles grow to their content at <=1024 (the fixed tile height let text overflow into the next band); cap the full-width third tile's image */
@media (max-width: 1024px) {
  .k3-inav .k3-inav__c { height: auto; }
  .k3-inav .k3-inav__c:nth-child(3):last-child img { max-height: 420px; }
}
/* /MANTIS-INAV-1112 */

/* MANTIS-TQ-1112 start: arrows inside each card (see kit.js block) */
.k3-tq__slide { position: relative; }
.k3-tq__ctl.is-moved { display: none; }
.k3-tq__ctl--in { position: absolute; left: var(--tq-px); bottom: var(--tq-pb); margin: 0; z-index: 2; display: flex; align-items: center; gap: 12px; }
/* MANTIS-TQ-1112 end */