/* ==========================================================================
   KUTAVAR — Redesign shared styles: homepage + CNC Plasma, Oxy-Fuel, Laser

   Shared components for every redesign page, recreating the concept
   (html/index.html, html/cnc-*.html) inside Uncode. Homepage-only components
   live in css/kvt-home.css. The page content is ordinary Uncode
   rows/columns/headings/text/buttons, so every word and image is editable in
   the builder; this file supplies the visual treatments Uncode can't express
   natively.

   Scope: every rule sits under .kvt-redesign, a body class added in
   functions.php (emberweb_tech_page_ids) — so this file never needs editing
   when the pages move to staging/live and get new IDs. Only that function does.
   Element hooks are the "kvt-" classes in each element's "Extra class name".

   !important is used deliberately where Uncode or the Customizer out-rank us:
   - paragraph font-size/weight vs `div.post-content p { ... !important }`
   - heading font/size vs Uncode's fontsize-* preset classes
   - button hover colours vs Uncode's own (0,6,0) hover rules — see section 2
   ========================================================================== */

.kvt-redesign{
  --kvt-red:#cc2c24;  --kvt-red-dark:#bf1f17;  --kvt-red-line:rgba(204,44,36,.42);
  --kvt-ink:#212222;  --kvt-head:#303133;      --kvt-body:#777777;
  --kvt-d1:#101213;   --kvt-d2:#141618;        --kvt-d3:#1b1d1f;
  --kvt-l1:#f7f7f7;   --kvt-l2:#eaeaea;        --kvt-l3:#dddddd;
  --kvt-line:rgba(255,255,255,.13); --kvt-line-soft:rgba(255,255,255,.07);

  --kvt-display:'Barlow Condensed','Arial Narrow',sans-serif;
  --kvt-sans:'Raleway','Helvetica Neue',Arial,sans-serif;

  /* neutral default; cross-link cards set their own via .kvt-tone-* */
  --kvt-tone:#8a8f94;
  --kvt-nav-clear:0px;    /* header no longer overlaps content (redesigned header is solid, in flow) — was 97px */
  --kvt-ease:cubic-bezier(.22,.61,.36,1);
}
.kvt-redesign .kvt-tone-plasma { --kvt-tone:#9e4526; }   /* ember red — Hypertherm */
.kvt-redesign .kvt-tone-oxyfuel{ --kvt-tone:#d19a3a; }   /* gold */
.kvt-redesign .kvt-tone-laser  { --kvt-tone:#5a7f9c; }

/* --------------------------------------------------------------------------
   1. Typography
   -------------------------------------------------------------------------- */
.kvt-redesign .kvt-row h1,
.kvt-redesign .kvt-row h2,
.kvt-redesign .kvt-row h3{
  font-family:var(--kvt-display) !important;
  letter-spacing:.005em !important;
  margin:0 !important;
  text-wrap:balance;
}
.kvt-redesign .kvt-display-l h1{
  font-size:clamp(38px,4.6vw,72px) !important;
  font-weight:700 !important;
  line-height:.96 !important;
  text-transform:uppercase;
  max-width:15ch;
  margin:16px 0 20px !important;
}
.kvt-redesign .kvt-display-m h2{
  font-size:clamp(30px,3.2vw,52px) !important;
  font-weight:600 !important;
  line-height:1 !important;
  margin:0 0 18px !important;
}
.kvt-redesign .kvt-row .style-light h1,
.kvt-redesign .kvt-row .style-light h2,
.kvt-redesign .kvt-row .style-light h3{ color:var(--kvt-head) !important; }
.kvt-redesign .kvt-row .style-dark h1,
.kvt-redesign .kvt-row .style-dark h2,
.kvt-redesign .kvt-row .style-dark h3{ color:#fff !important; }

.kvt-redesign .kvt-row p{
  font-family:var(--kvt-sans);
  font-size:15.5px !important;
  font-weight:400 !important;
  line-height:1.65;
  margin:0;
}
.kvt-redesign .kvt-row .style-light p{ color:var(--kvt-body); }
.kvt-redesign .kvt-row .style-dark  p{ color:rgba(255,255,255,.72); }

/* Uncode spaces consecutive modules; the concept's rhythm is set per element */
.kvt-redesign .kvt-row .uncode_text_column,
.kvt-redesign .kvt-row .vc_custom_heading_wrap{ margin-top:0 !important; margin-bottom:0 !important; }

/* Heading spacing lives on the module WRAPPER as padding. Uncode resets heading
   margins with rules that out-rank ours (measured: margin computes to 0 despite
   !important), and padding sidesteps that fight entirely. */
.kvt-redesign .kvt-row .vc_custom_heading_wrap.kvt-display-l { padding:16px 0 20px !important; }
.kvt-redesign .kvt-row .vc_custom_heading_wrap.kvt-display-m { padding:0 0 18px !important; }
.kvt-redesign .kvt-row .vc_custom_heading_wrap.kvt-cap-title { padding:0 0 11px !important; }
.kvt-redesign .kvt-row .vc_custom_heading_wrap.kvt-card-title{ padding:0 0 12px !important; }
.kvt-redesign .kvt-row .vc_custom_heading_wrap.kvt-cta-title { padding:0 0 12px !important; }

/* Eyebrow — red uppercase with a diamond in the technology tone */
.kvt-redesign .kvt-eyebrow p{
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:11.5px !important;
  font-weight:600 !important;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--kvt-red) !important;
  margin:0 0 16px;
}

/* Lede */
.kvt-redesign .kvt-lede p{
  font-size:17.5px !important;
  line-height:1.7;
  max-width:62ch;
  margin-bottom:26px;
}

/* Arrow link */
.kvt-redesign .kvt-link p{ margin-top:4px; }
.kvt-redesign .kvt-link-arrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--kvt-red) !important; text-decoration:none !important;
  padding-bottom:3px; border-bottom:1px solid var(--kvt-red-line);
  transition:gap .25s var(--kvt-ease), border-color .25s var(--kvt-ease);
}
.kvt-redesign .kvt-link-arrow::after{ content:"\2192"; font-size:1.15em; line-height:1; }
.kvt-redesign .kvt-link-arrow:hover{ gap:15px; border-color:var(--kvt-red); }
.kvt-redesign .style-dark .kvt-link-arrow{ color:#fff !important; border-color:rgba(255,255,255,.35); }
.kvt-redesign .style-dark .kvt-link-arrow:hover{ border-color:#fff; }

/* --------------------------------------------------------------------------
   2. Buttons — the live KUTAVAR CTA spec
   -------------------------------------------------------------------------- */
.kvt-redesign .kvt-row .btn-container{ display:inline-block; margin:0 12px 12px 0; }
.kvt-redesign .kvt-row .btn{
  font-family:var(--kvt-sans) !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  padding:15px 32px !important;
  border-radius:999px !important;
  transition:background .25s var(--kvt-ease), color .25s var(--kvt-ease), border-color .25s var(--kvt-ease) !important;
}
.kvt-redesign .kvt-row .btn-accent{ background:var(--kvt-red) !important; border-color:var(--kvt-red) !important; color:#fff !important; }
/* Uncode's accent hover rule forces color:#cc2c24 !important at (0,6,0):
     .btn-accent:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):hover
   which is red text on our near-black hover fill. Outranked at (0,6,2) —
   .custom-link is the sixth class; every Uncode button carries it. */
body.kvt-redesign .kvt-row a.btn.custom-link.btn-accent:hover,
body.kvt-redesign .kvt-row a.btn.custom-link.btn-accent:focus-visible{
  background:var(--kvt-ink) !important; border-color:var(--kvt-ink) !important; color:#fff !important;
}
.kvt-redesign .kvt-row .btn-outline{ background:transparent !important; border:1px solid rgba(255,255,255,.34) !important; color:#fff !important; }
/* Uncode's own white-outline hover rule fills the button white AND forces
   color:#fff !important, with specificity (0,6,0):
     .btn-color-xsdn.btn-outline:not(.btn-hover-nobg):not(.btn-text-skin):not(.icon-animated):hover
   so its label vanishes. These selectors are (0,6,2) to outrank it. */
body.kvt-redesign .kvt-row a.btn.btn-color-xsdn.btn-outline:hover,
body.kvt-redesign .kvt-row a.btn.btn-color-xsdn.btn-outline:focus-visible{
  background:#fff !important; border-color:#fff !important; color:var(--kvt-ink) !important;
}
.kvt-redesign .kvt-hero .btn-accent::after,
.kvt-redesign .kvt-cta .btn::after{
  content:"\2192"; display:inline-block; margin-left:10px; font-size:1.15em; line-height:1;
  transition:transform .25s var(--kvt-ease);
}
.kvt-redesign .kvt-hero .btn-accent:hover::after,
.kvt-redesign .kvt-cta .btn:hover::after{ transform:translateX(3px); }

/* --------------------------------------------------------------------------
   3. Hero
   Typography and treatment match the live homepage hero (css/custom-slider.css):
   centred Raleway, red rule above the title, untinted photograph under a
   neutral scrim. Keep the two in step if either changes.
   -------------------------------------------------------------------------- */
.kvt-redesign .vc_row.kvt-hero{ position:relative; overflow:hidden; }
/* Same height as the homepage hero, content centred vertically. Done here
   rather than with Uncode's row height setting, which grows the row but
   leaves the content pinned to the top. */
.kvt-redesign .vc_row.kvt-hero > .row{
  position:relative; z-index:3;
  display:flex !important; flex-direction:column; justify-content:center;
  min-height:clamp(500px, 68vh, 740px);
  /* the site header is absolutely positioned over the top of this row, so
     reserve its height before centring — same approach as the homepage hero */
  padding-top:calc(var(--kvt-nav-clear) + clamp(40px, 6vh, 72px)) !important;
  padding-bottom:clamp(40px, 6vh, 72px) !important;
}
.kvt-redesign .vc_row.kvt-hero > .row > .row-inner{ width:100%; }
.kvt-redesign .kvt-hero .uncont{ text-align:center; }

/* The homepage hero's scrim, with the centre deepened (.46 -> .64): these
   heroes carry a longer subtitle, and the plasma spark shot is brighter behind
   the copy than the homepage image. */
.kvt-redesign .kvt-hero .block-bg-overlay{
  opacity:1 !important;
  background:
    linear-gradient(to bottom,
      rgba(16,18,19,.74) 0%, rgba(16,18,19,.34) 26%,
      rgba(16,18,19,.38) 55%, rgba(16,18,19,.80) 100%),
    radial-gradient(ellipse 72% 62% at 50% 52%,
      rgba(16,18,19,.64) 0%, rgba(16,18,19,0) 100%) !important;
}

/* Title — flex column on the wrapper centres the capped-width heading
   without relying on auto margins, which Uncode resets. */
.kvt-redesign .kvt-hero .vc_custom_heading_wrap.kvt-display-l{
  display:flex !important; flex-direction:column; align-items:center;
  padding:0 0 clamp(14px,2vh,20px) !important;
}
.kvt-redesign .kvt-hero .vc_custom_heading_wrap.kvt-display-l::before{
  content:""; display:block; width:52px; height:3px; flex:none;
  background:var(--kvt-red); margin-bottom:clamp(18px,2.6vh,26px);
}
.kvt-redesign .kvt-hero .kvt-display-l h1{
  font-family:var(--kvt-sans) !important;
  font-size:clamp(1.9rem, 4.3vw, 3.5rem) !important;
  font-weight:700 !important;
  line-height:1.05 !important;
  letter-spacing:-.02em !important;
  text-transform:none !important;
  text-align:center !important;
  max-width:20ch;
  margin:0 !important;
  color:#fff !important;
  text-shadow:0 2px 26px rgba(0,0,0,.45);
}

/* Lede */
.kvt-redesign .kvt-hero .uncode_text_column.kvt-lede{
  display:flex !important; flex-direction:column; align-items:center;
}
.kvt-redesign .kvt-hero .kvt-lede p{
  font-size:clamp(1rem, 1.35vw, 1.125rem) !important;
  line-height:1.65 !important;
  color:rgba(255,255,255,.86) !important;
  text-align:center !important;
  max-width:56ch;
  margin:0 0 clamp(22px,3vh,32px) !important;
  text-shadow:0 1px 14px rgba(0,0,0,.45);
}

/* Buttons */
.kvt-redesign .kvt-hero .btn-container{ margin:6px !important; }   /* even gap, also when buttons wrap */

/* --------------------------------------------------------------------------
   4. Split image + copy
   -------------------------------------------------------------------------- */
.kvt-redesign .kvt-split-media .uncode-single-media,
.kvt-redesign .kvt-split-media .single-wrapper{ position:relative; margin:0 !important; }
/* without this the frame's z-index:-1 escapes behind the row background */
.kvt-redesign .kvt-split-media .single-wrapper{ isolation:isolate; }
.kvt-redesign .kvt-split-media img{
  width:100% !important; aspect-ratio:4/3; object-fit:cover; display:block;
}
.kvt-redesign .kvt-split-media .single-wrapper::after{   /* offset registration frame */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border:1px solid var(--kvt-red-line); transform:translate(16px,16px);
}

/* Feature list */
.kvt-redesign .kvt-features ul{
  list-style:none !important; margin:6px 0 28px !important; padding:0 !important;
  display:grid; gap:1px; background:var(--kvt-l2);
}
.kvt-redesign .kvt-features li{
  list-style:none !important; margin:0 !important;
  /* block, not flex: each item is "<strong>Lead.</strong> text", and flex
     would split those into two side-by-side columns */
  display:block;
  background:#fff; padding:17px 20px;
  font-size:14.5px; line-height:1.6; color:var(--kvt-body);
}

.kvt-redesign .kvt-features li strong{ color:var(--kvt-ink); font-weight:700; }

/* --------------------------------------------------------------------------
   5. Specification table
   -------------------------------------------------------------------------- */
.kvt-redesign .kvt-spec{ overflow-x:auto; margin-top:10px !important; }
.kvt-redesign .kvt-spec-table{ width:100%; min-width:520px; border-collapse:collapse; border:0 !important; font-size:14.5px; }
.kvt-redesign .kvt-spec-table td{
  text-align:left; padding:15px 18px !important; border:0 !important;
  border-bottom:1px solid var(--kvt-line-soft) !important;
  color:rgba(255,255,255,.72);
}
.kvt-redesign .kvt-spec-table td:first-child{ color:#fff; font-weight:600; width:48%; }

/* --------------------------------------------------------------------------
   6. Laser sources cards
   -------------------------------------------------------------------------- */
.kvt-redesign .kvt-cap-grid{ margin-top:clamp(28px,3vw,48px) !important; }
.kvt-redesign .kvt-cap > .uncol{
  height:100%;
  background:#fff; border:1px solid var(--kvt-l2);
  padding:34px 30px !important;
  transition:border-color .3s var(--kvt-ease), transform .3s var(--kvt-ease);
}
.kvt-redesign .kvt-cap > .uncol:hover{ border-color:var(--kvt-red-line); transform:translateY(-3px); }
.kvt-redesign .kvt-num p{
  font-family:var(--kvt-display) !important; font-size:13px !important; font-weight:600 !important;
  letter-spacing:.16em; color:var(--kvt-red) !important; margin-bottom:16px;
}
.kvt-redesign .kvt-cap-title h3{ font-size:21px !important; font-weight:600 !important; margin-bottom:11px !important; }
.kvt-redesign .kvt-cap p:not(.kvt-num p){ font-size:14.5px !important; }

/* Specification tables scroll sideways on a phone; js/kvt-redesign.js adds the
   hint below the table and clears it once the reader scrolls. */
.kvt-redesign .kvt-swipe-hint{
  display:none;
  margin:10px 0 0 !important;
  font-size:12px !important; font-weight:600 !important;
  letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.6) !important;
}
.kvt-redesign .kvt-swipe-hint::after{
  content:"\2192"; display:inline-block; margin-left:8px;
  animation:kvt-swipe 1.6s var(--kvt-ease) infinite;
}
@keyframes kvt-swipe{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(7px); } }
.kvt-redesign .kvt-swipe-hint.is-done{ opacity:0; transition:opacity .3s ease; }
.kvt-redesign .kvt-is-scrollable{
  -webkit-mask-image:linear-gradient(90deg, #000 85%, rgba(0,0,0,.25) 100%);
          mask-image:linear-gradient(90deg, #000 85%, rgba(0,0,0,.25) 100%);
}
.kvt-redesign .kvt-is-scrollable.kvt-at-end{ -webkit-mask-image:none; mask-image:none; }
@media (max-width:959px){
  .kvt-redesign .kvt-swipe-hint{ display:block; }
}

/* reCAPTCHA's floating badge overlaps content at the right edge on a phone.
   These pages carry no reCAPTCHA-protected form, so the badge is hidden here;
   pages with forms keep it (and its attribution). */
@media (max-width:959px){
  body.kvt-redesign .grecaptcha-badge,
  body.kvt-configurator-page .grecaptcha-badge{ visibility:hidden !important; }
}

/* Anchored sections (menu links like /cnc-plasma/#service) must clear the
   sticky header when the browser jumps to them. */
.kvt-redesign .vc_row[id]{ scroll-margin-top:96px; }
@media (max-width:959px){ .kvt-redesign .vc_row[id]{ scroll-margin-top:72px; } }

/* Flat hero (service and software pages): no photo behind it, so it needs its
   own breathing room rather than a viewport-height block. */
.kvt-redesign .kvt-hero-flat .kvt-display-l h1{ max-width:24ch; }
.kvt-redesign .kvt-hero-flat .kvt-lede p{ max-width:62ch; margin-left:auto; margin-right:auto; }

/* --------------------------------------------------------------------------
   7. Application chips
   -------------------------------------------------------------------------- */
.kvt-redesign .kvt-chips ul{
  list-style:none !important; margin:6px 0 0 !important; padding:0 !important;
  display:flex; flex-wrap:wrap; gap:9px;
}
.kvt-redesign .kvt-chips li{
  list-style:none !important; margin:0 !important;
  padding:9px 18px; border:1px solid var(--kvt-l3); border-radius:999px;
  font-size:12.5px; font-weight:600; letter-spacing:.05em; color:var(--kvt-ink);
  background:#fff;
}
.kvt-redesign .kvt-chips li::before{ content:none !important; }

/* Applications as icon tiles — el_class "kvt-chips kvt-chips-icons", and a
   kvt-i-* class on each <li> picks its icon. A <li> without one gets a plain dot. */
.kvt-redesign .kvt-chips-icons ul{
  display:grid !important; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px;
}
.kvt-redesign .kvt-chips-icons li{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  padding:20px 20px 18px; border-radius:0; border-color:var(--kvt-l2);
  font-size:13.5px; letter-spacing:.02em; line-height:1.35;
}
.kvt-redesign .kvt-chips-icons li::before{
  content:"" !important; display:block; width:30px; height:30px; flex:none;
  background:var(--kvt-red);
  -webkit-mask:var(--kvt-icon, radial-gradient(circle, #000 32%, transparent 34%)) center / contain no-repeat;
          mask:var(--kvt-icon, radial-gradient(circle, #000 32%, transparent 34%)) center / contain no-repeat;
}
.kvt-redesign .kvt-chips-icons li.kvt-i-structural{ --kvt-icon:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 4h16M4 20h16M12 4v16M8 4v2M16 4v2M8 20v-2M16 20v-2"/%3E%3C/svg%3E'); }
.kvt-redesign .kvt-chips-icons li.kvt-i-fabrication{ --kvt-icon:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 3l7.8 4.5v9L12 21l-7.8-4.5v-9z"/%3E%3Ccircle cx="12" cy="12" r="3"/%3E%3C/svg%3E'); }
.kvt-redesign .kvt-chips-icons li.kvt-i-agri{ --kvt-icon:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="8" cy="16" r="4"/%3E%3Ccircle cx="18.5" cy="17.5" r="2.5"/%3E%3Cpath d="M4.5 12.5V6h6.5l2 6.5h6.5v3.5M11 6l-1 6.5"/%3E%3C/svg%3E'); }
.kvt-redesign .kvt-chips-icons li.kvt-i-auto{ --kvt-icon:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M3 13l2.2-5.2A2 2 0 0 1 7 6.5h10a2 2 0 0 1 1.8 1.3L21 13v4H3z M3 13h18"/%3E%3Ccircle cx="7.5" cy="17" r="1.8"/%3E%3Ccircle cx="16.5" cy="17" r="1.8"/%3E%3C/svg%3E'); }
.kvt-redesign .kvt-chips-icons li.kvt-i-hvac{ --kvt-icon:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="9"/%3E%3Ccircle cx="12" cy="12" r="1.4"/%3E%3Cpath d="M12 10.6c-.4-3.4 1.2-5 3-4.3s1 3.4-3 4.3M13.4 12c3.4-.4 5 1.2 4.3 3s-3.4 1-4.3-3M12 13.4c.4 3.4-1.2 5-3 4.3s-1-3.4 3-4.3M10.6 12c-3.4.4-5-1.2-4.3-3s3.4-1 4.3 3"/%3E%3C/svg%3E'); }
.kvt-redesign .kvt-chips-icons li.kvt-i-signage{ --kvt-icon:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 4.5h16v9H4zM12 13.5V20M8 20h8M7.5 9h9"/%3E%3C/svg%3E'); }
.kvt-redesign .kvt-chips-icons li.kvt-i-repair{ --kvt-icon:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M14.7 6.3a4 4 0 0 0-5.3 5.2L3.5 17.4a1.4 1.4 0 0 0 0 2l1.1 1.1a1.4 1.4 0 0 0 2 0l5.9-5.9a4 4 0 0 0 5.2-5.3l-2.4 2.4-2.3-.6-.6-2.3z"/%3E%3C/svg%3E'); }
.kvt-redesign .kvt-chips-icons li.kvt-i-subcontract{ --kvt-icon:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4z"/%3E%3Ccircle cx="16.5" cy="16.5" r="3.5"/%3E%3C/svg%3E'); }
@media (max-width:959px){ .kvt-redesign .kvt-chips-icons ul{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:479px){ .kvt-redesign .kvt-chips-icons li{ padding:16px; font-size:12.5px; } }

/* Visually hidden, still read by search engines and screen readers
   (the homepage keeps its H1 this way). */
.kvt-redesign .kvt-sr-only{
  position:absolute !important; width:1px !important; height:1px !important;
  margin:-1px !important; padding:0 !important; overflow:hidden !important;
  clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; white-space:nowrap !important; border:0 !important;
}

/* Hero with a photo behind it, for pages whose imagery ships with the theme.
   The row already carries a dark background colour, so the photo goes on top of
   it with a scrim over the photo. */
.kvt-redesign .vc_row.kvt-hero-photo{ background-size:cover !important; background-position:center !important; }
.kvt-redesign .vc_row.kvt-hero-photo::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(16,18,19,.62) 0%, rgba(16,18,19,.78) 100%);
}
.kvt-redesign .vc_row.kvt-hero-photo > .row{ position:relative; z-index:1; }
.kvt-redesign .vc_row.kvt-hero-photo-machine { background-image:url(../configurator/images/laser/card-machine.webp); }
.kvt-redesign .vc_row.kvt-hero-photo-software{ background-image:url(../configurator/images/laser/card-software.webp); }
.kvt-redesign .vc_row.kvt-hero-photo-cutting { background-image:url(../configurator/images/laser/card-cutting.webp); }

/* Hub pages: the cards are the whole section, so they need room beneath them.
   (On the technology pages the cards deliberately sit flush against the CTA —
   that rule is further down the file, so this one has to out-rank it.) */
.kvt-redesign .kvt-others.kvt-hub .kvt-tech-grid{ margin-bottom:clamp(48px,5vw,88px) !important; }
.kvt-redesign .kvt-others.kvt-hub > .row{ padding-bottom:clamp(36px,4vw,64px) !important; }

/* Flat heroes carry no eyebrow, so they don't need the little red rule either */
.kvt-redesign .kvt-hero-flat .vc_custom_heading_wrap.kvt-display-l::before{ content:none !important; }
.kvt-redesign .kvt-hero-flat .vc_custom_heading_wrap.kvt-display-l{ padding-top:0 !important; }

/* Contact details in place of a button */
.kvt-redesign .kvt-contact-details p{ margin:0 !important; font-size:16px !important; line-height:1.9; }
.kvt-redesign .kvt-contact-details a{ color:var(--kvt-red) !important; text-decoration:none; border-bottom:1px solid var(--kvt-red-line); }
.kvt-redesign .kvt-contact-details a:hover{ border-color:var(--kvt-red); }
.kvt-redesign .style-dark .kvt-contact-details p{ color:rgba(255,255,255,.82) !important; }
.kvt-redesign .style-dark .kvt-contact-details a{ color:#fff !important; border-bottom-color:rgba(255,255,255,.4); }

/* Uncode accordion inside our sections */
.kvt-redesign .kvt-faq-accordion .wpb_accordion_header a{ font-family:var(--kvt-sans) !important; font-size:15.5px !important; font-weight:600 !important; color:var(--kvt-head) !important; }
.kvt-redesign .kvt-faq-accordion .wpb_accordion_content p{ font-size:14.5px !important; }

/* Images that ship with the theme rather than the media library */
.kvt-redesign .kvt-theme-image img{ display:block; width:100%; height:auto; }

/* FAQ pairs, two to a row */
.kvt-redesign .kvt-faq .kvt-cap-title h3{ font-size:19px !important; font-weight:600 !important; margin-bottom:9px !important; }
.kvt-redesign .kvt-faq p{ font-size:14.5px !important; }
.kvt-redesign .kvt-faq-grid .vc_column_container{ margin-bottom:26px; }

/* Laser photography ships with the theme, so hub cards can use it without a
   media-library upload (and without IDs that differ per environment).
   Add kvt-card-photo-<name> to the column's Extra class name. */
.kvt-redesign [class*="kvt-card-photo-"] .column-background{
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.kvt-redesign .kvt-card-photo-machine .column-background{ background-image:url(../configurator/images/laser/card-machine.webp); }
.kvt-redesign .kvt-card-photo-software .column-background{ background-image:url(../configurator/images/laser/card-software.webp); }
.kvt-redesign .kvt-card-photo-cutting .column-background{ background-image:url(../configurator/images/laser/card-cutting.webp); }

/* --------------------------------------------------------------------------
   8. Cross-link technology cards
   -------------------------------------------------------------------------- */
.kvt-redesign .kvt-tech-grid{ margin-top:clamp(28px,3vw,48px) !important; }
.kvt-redesign .kvt-tech-card > .uncol{
  position:relative; overflow:hidden; isolation:isolate;
  /* height, not min-height: the inner .uncoltable is position:relative and the
     background image is positioned against IT, so it must resolve to the full
     card height — a percentage can't resolve against a min-height parent. */
  height:clamp(360px,34vw,440px);
  /* chamfered corner, like a cut plate edge */
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
.kvt-redesign .kvt-tech-card .uncoltable,
.kvt-redesign .kvt-tech-card .uncell{ height:100%; }
.kvt-redesign .kvt-tech-card .uncell{ vertical-align:bottom !important; }
.kvt-redesign .kvt-tech-card .uncont{ padding:34px !important; position:relative; z-index:3; }
.kvt-redesign .kvt-tech-card .background-inner{ transition:transform .8s var(--kvt-ease); }
.kvt-redesign .kvt-tech-card:hover .background-inner{ transform:scale(1.08); }
.kvt-redesign .kvt-tech-card .background-inner::after{
  content:""; position:absolute; inset:0;
  background:var(--kvt-tone); mix-blend-mode:color; opacity:.62;
}
.kvt-redesign .kvt-tech-card .block-bg-overlay{
  opacity:1 !important;
  background:linear-gradient(to bottom, rgba(16,18,19,.26) 0%, rgba(16,18,19,.62) 44%, rgba(16,18,19,.93) 82%, #101213 100%) !important;
}
.kvt-redesign .kvt-card-title h3{ font-size:clamp(26px,2.2vw,34px) !important; font-weight:600 !important; text-transform:uppercase; margin-bottom:12px !important; }
.kvt-redesign .kvt-tech-card p{ max-width:34ch; margin-bottom:18px; }
.kvt-redesign .kvt-tech-card .kvt-eyebrow p{ color:#fff !important; }
/* whole card is the click target */
.kvt-redesign .kvt-tech-card .kvt-stretch::before{ content:""; position:absolute; inset:0; z-index:4; }
/* registration brackets on hover */
.kvt-redesign .kvt-tech-card > .uncol::before,
.kvt-redesign .kvt-tech-card > .uncol::after{
  content:""; position:absolute; width:13px; height:13px; z-index:5; opacity:0;
  border:1px solid var(--kvt-red); transition:opacity .3s var(--kvt-ease), transform .3s var(--kvt-ease);
}
.kvt-redesign .kvt-tech-card > .uncol::before{ top:12px; left:12px; border-right:0; border-bottom:0; transform:translate(4px,4px); }
.kvt-redesign .kvt-tech-card > .uncol::after{ bottom:12px; right:12px; border-left:0; border-top:0; transform:translate(-4px,-4px); }
.kvt-redesign .kvt-tech-card:hover > .uncol::before,
.kvt-redesign .kvt-tech-card:hover > .uncol::after{ opacity:1; transform:translate(0,0); }

/* --------------------------------------------------------------------------
   9. CTA band
   -------------------------------------------------------------------------- */
.kvt-redesign .vc_row.kvt-cta > .row{ padding-top:0 !important; padding-bottom:0 !important; }
.kvt-redesign .kvt-cta-col > .uncol{ height:100%; }
.kvt-redesign .kvt-cta-col .uncont{
  display:flex; flex-direction:column; align-items:flex-start; height:100%;
  padding:clamp(38px,4vw,60px) clamp(24px,3vw,48px) !important;
}
.kvt-redesign .kvt-cta-col + .kvt-cta-col .uncont{ border-left:1px solid rgba(255,255,255,.2); }
.kvt-redesign .kvt-cta-title h3{ font-size:clamp(25px,2.4vw,36px) !important; font-weight:600 !important; text-transform:uppercase; margin-bottom:12px !important; }
.kvt-redesign .kvt-cta p{ color:rgba(255,255,255,.86) !important; font-size:14.5px !important; margin-bottom:24px; max-width:40ch; }
.kvt-redesign .kvt-cta .btn-container{ margin:auto 0 0 !important; }  /* buttons share a baseline */
.kvt-redesign .kvt-cta .btn-outline{ border-color:rgba(255,255,255,.6) !important; }
body.kvt-redesign .kvt-cta a.btn.btn-color-xsdn.btn-outline:hover,
body.kvt-redesign .kvt-cta a.btn.btn-color-xsdn.btn-outline:focus-visible{
  background:#fff !important; border-color:#fff !important; color:var(--kvt-red) !important;
}

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:959px){
  .kvt-redesign{ --kvt-nav-clear:0px; }
  .kvt-redesign .kvt-cta-col + .kvt-cta-col .uncont{ border-left:0; border-top:1px solid rgba(255,255,255,.2); }
  .kvt-redesign .kvt-split-media .single-wrapper::after{ transform:translate(10px,10px); }
  /* the offset frame sits 10px below the image, so the text under it needs room */
  .kvt-redesign .kvt-split-media .single-wrapper{ margin-bottom:26px !important; }
  /* reading order is copy-then-image; on a single column show the image first, as the concept does */
  .kvt-redesign .kvt-split-reverse .row-inner{ display:flex; flex-direction:column; }
  .kvt-redesign .kvt-split-reverse .kvt-split-media{ order:-1; }
}
@media (max-width:767px){
  .kvt-redesign{ --kvt-nav-clear:0px; }
  .kvt-redesign .kvt-lede p{ font-size:16px !important; }
  .kvt-redesign .kvt-spec-table{ font-size:13.5px; }
  .kvt-redesign .kvt-tech-card .uncont{ padding:26px !important; }
  .kvt-redesign .kvt-row .btn-container{ margin-right:8px; }
}

@media (prefers-reduced-motion:reduce){
  .kvt-redesign .kvt-tech-card .background-inner,
  .kvt-redesign .kvt-cap > .uncol,
  .kvt-redesign .kvt-link-arrow{ transition:none !important; }
  .kvt-redesign .kvt-tech-card:hover .background-inner{ transform:none; }
}

/* The concept runs the cross-link cards straight into the CTA band */
.kvt-redesign .vc_row.kvt-others > .row{ padding-bottom:0 !important; }
.kvt-redesign .kvt-others .kvt-tech-grid{ margin-bottom:0 !important; }