/* ==========================================================================
   KUTAVAR — Redesign homepage (html/index.html)

   Homepage-only components. Shared typography, buttons, split sections,
   feature lists, capability cards, technology cards and the CTA band come from
   css/kvt-redesign.css, which always loads first.

   Scope: .kvt-page-home (body class from emberweb_redesign_page_ids()).

   Direction carried over from the technology pages, as signed off:
   hero type matches the live homepage hero (Raleway), no diamond markers, and
   no kerf hairline. The three diagonal panels themselves stay — they ARE the
   three-way hero from the brief — but the seam is left clean.
   ========================================================================== */

.kvt-page-home{
  --kvt-3way-h:  clamp(620px, 88vh, 900px);
  --kvt-lean-px: 56px;   /* horizontal travel of each diagonal, top to bottom */
}

/* --------------------------------------------------------------------------
   1. Three-way hero
   One full-width row; inside it an inner row whose three columns are the
   panels. Uncode lays inner columns out as table cells, which can't overlap,
   so the inner row is switched to flex and each panel after the first is
   pulled left by one lean and clipped on the diagonal.
   -------------------------------------------------------------------------- */
.kvt-page-home .vc_row.kvt-3way > .row{
  padding:0 !important;
  margin:0 !important;          /* measured: Uncode's .col-no-gutter row carries margin-left:12px */
  max-width:none !important;
  width:100% !important;
}
/* Outer column reset. Child combinators all the way down, so it can't also
   match the panels' own .uncont and override their padding. */
.kvt-page-home .kvt-3way > .row > .row-inner > .wpb_column,
.kvt-page-home .kvt-3way > .row > .row-inner > .wpb_column > .uncol,
.kvt-page-home .kvt-3way > .row > .row-inner > .wpb_column > .uncol > .uncoltable,
.kvt-page-home .kvt-3way > .row > .row-inner > .wpb_column > .uncol > .uncoltable > .uncell,
.kvt-page-home .kvt-3way > .row > .row-inner > .wpb_column > .uncol > .uncoltable > .uncell > .uncont{ padding:0 !important; margin:0 !important; }
.kvt-page-home .kvt-3way > .row > .row-inner{ margin:0 !important; width:100% !important; }

/* Kicker — the page H1, sat over the top of the panels */
.kvt-page-home .kvt-3way .kvt-kicker{
  position:absolute; left:0; right:0; z-index:8;
  top:calc(var(--kvt-nav-clear) + clamp(28px, 4vh, 44px));
  padding:0 24px !important; pointer-events:none; text-align:center;
}
.kvt-page-home .kvt-3way .kvt-kicker h1{
  font-family:var(--kvt-sans) !important;
  font-size:11.5px !important;
  font-weight:600 !important;
  letter-spacing:.24em !important;
  line-height:1.6 !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.86) !important;
  margin:0 !important;
  text-shadow:0 1px 14px rgba(0,0,0,.5);
}

.kvt-page-home .vc_row.kvt-panels{ margin:0 !important; padding:0 !important; width:100% !important; }
.kvt-page-home .kvt-panels > .row{ padding:0 !important; margin:0 !important; }
.kvt-page-home .kvt-panels .row-inner{
  display:flex !important;
  align-items:stretch !important;       /* measured: panels collapsed to h=0 without this */
  width:100% !important;
  min-height:var(--kvt-3way-h);
  margin:0 !important;
}
.kvt-page-home .kvt-panel{
  position:relative;
  float:none !important;
  flex:none;
  width:calc(33.3334% + var(--kvt-lean-px)) !important;
  margin-left:calc(-1 * var(--kvt-lean-px)) !important;
  padding:0 !important;
  clip-path:polygon(var(--kvt-lean-px) 0, 100% 0, calc(100% - var(--kvt-lean-px)) 100%, 0 100%);
}
.kvt-page-home .kvt-panel:first-child{
  width:33.3333% !important; margin-left:0 !important;
  clip-path:polygon(0 0, 100% 0, calc(100% - var(--kvt-lean-px)) 100%, 0 100%);
}
.kvt-page-home .kvt-panel:last-child{
  clip-path:polygon(var(--kvt-lean-px) 0, 100% 0, 100% 100%, 0 100%);
}

.kvt-page-home .kvt-panel{ display:flex !important; flex-direction:column; min-height:var(--kvt-3way-h); height:auto !important; }
.kvt-page-home .kvt-panel > .uncol{ flex:1 1 auto; height:auto !important; display:flex !important; flex-direction:column; }
.kvt-page-home .kvt-panel .uncoltable{ flex:1 1 auto; height:auto !important; display:flex !important; flex-direction:column; justify-content:flex-end; }
/* Measured stacking: Uncode puts the photograph (.column-background, absolute)
   INSIDE .uncell as a sibling of .uncont. Static content therefore paints
   beneath the photo and its near-opaque bottom scrim — which hid the buttons.
   So .uncell just fills the panel, and .uncont becomes the positioned,
   full-height content layer: above the photo, and the anchor for the
   whole-panel stretched link. */
.kvt-page-home .kvt-panel .uncell{
  flex:1 1 auto; height:auto !important;
  display:flex !important; flex-direction:column;
}
.kvt-page-home .kvt-panel .uncoltable{ position:relative; }   /* the photograph resolves against this */
.kvt-page-home .kvt-panel .uncont{
  position:relative !important; z-index:2;
  flex:1 1 auto;
  display:flex !important; flex-direction:column; justify-content:flex-end;
  padding:0 calc(var(--kvt-lean-px) + 30px) clamp(44px, 6vh, 64px) !important;
  transition:opacity .5s var(--kvt-ease), transform .5s var(--kvt-ease);
}

/* photography: technology tone, then a scrim that keeps the lower copy legible */
.kvt-page-home .kvt-panel .background-inner{ transition:transform 1.1s var(--kvt-ease); transform:scale(1.03); }
.kvt-page-home .kvt-panel .background-inner::after{
  content:""; position:absolute; inset:0;
  background:var(--kvt-tone); mix-blend-mode:color; opacity:.62;
}
.kvt-page-home .kvt-panel .block-bg-overlay{
  opacity:1 !important;
  background:linear-gradient(to bottom,
    rgba(16,18,19,.84) 0%, rgba(16,18,19,.36) 22%,
    rgba(16,18,19,.52) 50%, rgba(16,18,19,.90) 80%, rgba(16,18,19,.97) 100%) !important;
}
.kvt-page-home .kvt-panel .column-background{ transition:filter .55s var(--kvt-ease); }

/* panel copy — Raleway, matching the live homepage hero */
.kvt-page-home .kvt-panel .kvt-eyebrow p{ color:#fff !important; margin-bottom:14px; }
.kvt-page-home .kvt-panel .vc_custom_heading_wrap.kvt-panel-title{ padding:0 0 14px !important; }
.kvt-page-home .kvt-panel .kvt-panel-title h2{
  font-family:var(--kvt-sans) !important;
  font-size:clamp(26px, 2.35vw, 38px) !important;
  font-weight:700 !important;
  line-height:1.05 !important;
  letter-spacing:-.02em !important;
  text-transform:none !important;
  color:#fff !important;
  max-width:13ch;
  min-height:2.1em;                     /* two lines reserved, so all three share a baseline */
  display:flex; align-items:flex-end;
  text-shadow:0 2px 22px rgba(0,0,0,.4);
}
.kvt-page-home .kvt-panel .kvt-panel-copy p{
  color:rgba(255,255,255,.76) !important;
  font-size:14.5px !important;
  line-height:1.6 !important;
  max-width:32ch;
  min-height:4.8em;
  margin-bottom:22px !important;
}
.kvt-page-home .kvt-panel .btn-container{ position:static; margin:0 !important; align-self:flex-start; }
.kvt-page-home .kvt-panel a.btn{ position:static !important; padding:11px 24px !important; font-size:11.5px !important; }
/* the whole panel is the click target */
.kvt-page-home .kvt-panel a.btn::before{ content:""; position:absolute; inset:0; z-index:4; }
.kvt-page-home .kvt-panel a.btn::after{
  content:"\2192"; display:inline-block; margin-left:10px; font-size:1.15em; line-height:1;
  transition:transform .25s var(--kvt-ease);
}
.kvt-page-home .kvt-panel:hover a.btn::after{ transform:translateX(3px); }

/* focus: the chosen technology lights, the other two recede */
@media (hover:hover) and (min-width:960px){
  .kvt-page-home .kvt-panels:has(.kvt-panel:hover) .kvt-panel:not(:hover) .column-background{ filter:brightness(.5) saturate(.55); }
  .kvt-page-home .kvt-panels:has(.kvt-panel:hover) .kvt-panel:not(:hover) .uncont{ opacity:.4; }
  .kvt-page-home .kvt-panel:hover .background-inner{ transform:scale(1.09); }
  .kvt-page-home .kvt-panel:hover .uncont{ transform:translateY(-6px); }
}

/* --------------------------------------------------------------------------
   2. Brand statement
   -------------------------------------------------------------------------- */
.kvt-page-home .kvt-brand .uncont{ text-align:center; }
.kvt-page-home .kvt-brand .kvt-eyebrow p{ justify-content:center; }
.kvt-page-home .kvt-brand .vc_custom_heading_wrap.kvt-display-l{
  display:flex !important; flex-direction:column; align-items:center;
  padding:4px 0 0 !important;
}
.kvt-page-home .kvt-brand .kvt-display-l h1,
.kvt-page-home .kvt-brand .kvt-display-l h2{
  font-family:var(--kvt-display) !important;
  font-size:clamp(38px, 4.6vw, 72px) !important;
  font-weight:700 !important;
  line-height:.96 !important;
  text-transform:uppercase !important;
  text-align:center !important;
  color:var(--kvt-head) !important;
  max-width:19ch;
}
.kvt-page-home .kvt-brand .vc_custom_heading_wrap.kvt-display-l::after{
  content:""; display:block; width:64px; height:2px; background:var(--kvt-red);
  margin:26px 0 26px;
}
.kvt-page-home .kvt-brand .uncode_text_column.kvt-lede{ display:flex !important; flex-direction:column; align-items:center; }
.kvt-page-home .kvt-brand .kvt-lede p{ text-align:center !important; margin-bottom:30px !important; }
.kvt-page-home .kvt-brand .btn-container{ margin:6px !important; }
.kvt-page-home .kvt-brand a.btn.btn-accent::after{
  content:"\2192"; display:inline-block; margin-left:10px; font-size:1.15em; line-height:1;
  transition:transform .25s var(--kvt-ease);
}
.kvt-page-home .kvt-brand a.btn.btn-accent:hover::after{ transform:translateX(3px); }
/* dark outline button on a light ground. Selectors outrank Uncode's (0,6,0)
   outline rules the same way as in kvt-redesign.css section 2. */
body.kvt-page-home .kvt-brand a.btn.custom-link.btn-outline{
  background:transparent !important; border:1px solid rgba(33,34,34,.22) !important; color:var(--kvt-ink) !important;
}
body.kvt-page-home .kvt-brand a.btn.custom-link.btn-outline:hover,
body.kvt-page-home .kvt-brand a.btn.custom-link.btn-outline:focus-visible{
  background:var(--kvt-ink) !important; border-color:var(--kvt-ink) !important; color:#fff !important;
}

/* --------------------------------------------------------------------------
   3. Trust bar
   -------------------------------------------------------------------------- */
.kvt-page-home .vc_row.kvt-trust{ border-top:1px solid var(--kvt-l2); border-bottom:1px solid var(--kvt-l2); }
.kvt-page-home .vc_row.kvt-trust > .row{ padding:0 !important; }
.kvt-page-home .kvt-stat-col .uncont{ padding:44px 24px !important; text-align:center; }
.kvt-page-home .kvt-stat-col + .kvt-stat-col .uncont{ border-left:1px solid var(--kvt-l2); }
.kvt-page-home .kvt-stat,
.kvt-page-home .kvt-stat p{ margin:0 !important; text-align:center !important; }   /* beats the column's own text-left */
.kvt-page-home .kvt-stat-num{
  display:block; white-space:nowrap;
  font-family:var(--kvt-display); font-weight:700;
  font-size:clamp(38px, 4vw, 60px); line-height:1; letter-spacing:.01em;
  color:var(--kvt-ink); margin-bottom:8px;
}
.kvt-page-home .kvt-unit{ font-size:.46em; font-weight:600; margin-left:.12em; letter-spacing:.04em; }
.kvt-page-home .kvt-stat-label{
  display:block; font-family:var(--kvt-sans);
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--kvt-body);
}
.kvt-page-home .kvt-ast{ font-size:.45em; vertical-align:super; line-height:0; margin-left:.06em; color:var(--kvt-red); }
.kvt-page-home .kvt-stat-note{
  display:block; margin-top:6px; font-family:var(--kvt-sans);
  font-size:11.5px; font-weight:500; letter-spacing:.02em; color:var(--kvt-body); opacity:.8;
}

/* --------------------------------------------------------------------------
   4. Three technology cards (with spec rows)
   -------------------------------------------------------------------------- */
.kvt-page-home .kvt-tech-grid-3 .kvt-tech-card > .uncol{ height:clamp(470px, 38vw, 520px); }
.kvt-page-home .kvt-card-specs p{
  display:flex; gap:28px; margin:4px 0 22px !important; padding-top:18px;
  border-top:1px solid var(--kvt-line);
  max-width:none !important;
}
.kvt-page-home .kvt-spec-pair{ display:block; }
.kvt-page-home .kvt-spec-label{
  display:block; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-bottom:3px;
}
.kvt-page-home .kvt-spec-pair strong{
  font-family:var(--kvt-display); font-size:21px; font-weight:600; color:#fff;
}

/* --------------------------------------------------------------------------
   5. Testimonial
   -------------------------------------------------------------------------- */
.kvt-page-home .kvt-testimonial-media img{
  width:100% !important; max-width:200px; aspect-ratio:1; object-fit:cover;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
.kvt-page-home .kvt-testimonial-media .uncode-single-media{ margin:0 !important; }
.kvt-page-home .kvt-testimonial-media .single-wrapper{ max-width:200px !important; margin-left:auto !important; }
.kvt-page-home .kvt-quote blockquote{
  margin:14px 0 0 !important; padding:0 !important; border:0 !important;
}
.kvt-page-home .kvt-quote blockquote p{
  font-family:var(--kvt-display) !important; font-weight:600 !important;
  font-size:clamp(23px, 2.5vw, 38px) !important; line-height:1.18 !important;
  color:#fff !important; max-width:34ch; margin:0 !important;
}
.kvt-page-home .kvt-quote blockquote p::before{ content:"\201C"; }
.kvt-page-home .kvt-quote blockquote p::after{ content:"\201D"; }
.kvt-page-home .kvt-cite p{
  margin:20px 0 24px !important;
  font-size:12px !important; font-weight:600 !important; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.5) !important;
}

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:959px){
  /* the diagonal split stops being legible, so the panels become stacked bands */
  .kvt-page-home .kvt-3way .kvt-kicker{
    position:relative; top:auto;
    padding:calc(var(--kvt-nav-clear) + 24px) 22px 26px !important;
    background:var(--kvt-d1);
  }
  .kvt-page-home .kvt-panels .row-inner{ flex-direction:column; min-height:0; }
  .kvt-page-home .kvt-panel,
  .kvt-page-home .kvt-panel:first-child{
    width:100% !important; margin-left:0 !important; clip-path:none;
    min-height:clamp(320px, 52vw, 400px);
  }
  .kvt-page-home .kvt-panel + .kvt-panel{ border-top:1px solid var(--kvt-line-soft); }
  .kvt-page-home .kvt-panel .uncont{ padding:0 26px 38px !important; }
  .kvt-page-home .kvt-panel .kvt-panel-title h2{ max-width:18ch; min-height:0; }
  .kvt-page-home .kvt-panel .kvt-panel-copy p{ min-height:0; max-width:46ch; }
  .kvt-page-home .kvt-stat-col:nth-child(3) .uncont{ border-left:0; }
  .kvt-page-home .kvt-stat-col:nth-child(n+3) .uncont{ border-top:1px solid var(--kvt-l2); }
  .kvt-page-home .kvt-testimonial-media .single-wrapper{ margin-left:0 !important; margin-bottom:24px !important; max-width:140px !important; }
}
@media (max-width:767px){
  .kvt-page-home .kvt-stat-col + .kvt-stat-col .uncont{ border-left:0; border-top:1px solid var(--kvt-l2); }
  .kvt-page-home .kvt-card-specs p{ gap:22px; }
}

@media (prefers-reduced-motion:reduce){
  .kvt-page-home .kvt-panel .background-inner,
  .kvt-page-home .kvt-panel .column-background,
  .kvt-page-home .kvt-panel .uncont{ transition:none !important; }
}