/* ==========================================================================
   KUTAVAR — CNC Fibre Laser landing page
   Page: https://www.kutavar.com/laser-v2/   ·   Page ID: 120799

   Every rule is scoped under .page-id-120799 so it can never leak onto
   another page, AND the file is conditionally enqueued (see functions.php).
   Belt and braces — the scope survives even if the enqueue condition is
   later relaxed.

   Brand tokens are taken from the live Uncode theme options so this page
   stays inside KUTAVAR's existing identity:
     accent  #cc2c24  "Kutavar Red"  (_uncode_accent_color / color-128718)
     hover   #bf1f17  Uncode-derived accent-darker
     heading #303133  ·  body #777777  ·  ink #212222 (the wordmark fill)
     dark    #141618 / #101213        ·  light #f7f7f7 / #eaeaea / #dddddd
   Type stays Raleway — already loaded site-wide, so this page adds no extra
   font request and still matches the rest of kutavar.com.
   ========================================================================== */

.page-id-120799{
  --lz-red:      #cc2c24;
  --lz-red-dark: #bf1f17;
  --lz-red-soft: rgba(204,44,36,.12);

  --lz-ink:      #212222;
  --lz-head:     #303133;
  --lz-body:     #5f6467;   /* a touch darker than #777 for body legibility */
  --lz-muted:    #8a8f92;

  --lz-d1:       #101213;
  --lz-d2:       #141618;
  --lz-d3:       #1b1d1f;

  --lz-l1:       #f7f7f7;
  --lz-l2:       #eaeaea;
  --lz-l3:       #dddddd;

  /* Supporting cool-steel tone for the laser range. Used only for quiet
     hairlines and hover states — red remains the only saturated colour. */
  --lz-steel:    #5a7f9c;

  --lz-ease:     cubic-bezier(.22,.61,.36,1);
  --lz-radius:   4px;
}

/* --------------------------------------------------------------------------
   1. Page rhythm
   Consistent vertical breathing between the six builder rows.
   -------------------------------------------------------------------------- */
.page-id-120799 .post-content > .vc_row[data-parent] > .row-parent{
  padding-top:    clamp(52px, 6.5vw, 104px);
  padding-bottom: clamp(52px, 6.5vw, 104px);
}

/* Rows 3 and 4 belong together (copy, then the pair of images) — close the
   gap between them so they read as one block. */
.page-id-120799 .post-content > .vc_row:nth-of-type(3) > .row-parent{ padding-bottom: clamp(28px,3vw,44px); }
.page-id-120799 .post-content > .vc_row:nth-of-type(4) > .row-parent{ padding-top:    clamp(28px,3vw,44px); }

/* --------------------------------------------------------------------------
   2. Hero  (row 1)
   -------------------------------------------------------------------------- */
.page-id-120799 .post-content > .vc_row:nth-of-type(1){
  position:relative;
  background:var(--lz-d1);
}
.page-id-120799 .post-content > .vc_row:nth-of-type(1) > .row-parent{
  min-height:clamp(440px, 62vh, 680px);
  padding-bottom:clamp(48px, 5vw, 76px);
}

/* Replace the flat 50% overlay with a directional scrim: keeps the machine
   visible on the right while giving the headline real contrast bottom-left,
   and resolves cleanly into the white section beneath. */
.page-id-120799 .post-content > .vc_row:nth-of-type(1) .block-bg-overlay{
  opacity:1 !important;
  background:
    linear-gradient(to right,  rgba(16,18,19,.88) 0%, rgba(16,18,19,.55) 46%, rgba(16,18,19,.25) 100%),
    linear-gradient(to bottom, rgba(16,18,19,.55) 0%, rgba(16,18,19,0) 34%, rgba(16,18,19,.30) 72%, rgba(16,18,19,.86) 100%) !important;
}

/* Anchor the headline to the bottom-left rather than floating mid-panel. */
.page-id-120799 .post-content > .vc_row:nth-of-type(1) .uncell{ vertical-align:bottom; }

/* Short red rule above the H1 — decorative only, no injected text, so
   nothing here needs translating by WPML. */
.page-id-120799 .post-content > .vc_row:nth-of-type(1) .heading-text{ position:relative; }
.page-id-120799 .post-content > .vc_row:nth-of-type(1) .heading-text::before{
  content:"";
  display:block;
  width:56px; height:3px;
  background:var(--lz-red);
  margin-bottom:clamp(18px,2vw,26px);
}

/* NOTE: the heading module currently contains a nested second <h1> with an
   inline text-align:center (see the markup notes handed over with this file).
   Both are styled so the rendered headline is governed either way, and the
   inline centring is neutralised to match the left-anchored hero. */
.page-id-120799 .post-content > .vc_row:nth-of-type(1) .heading-text h1,
.page-id-120799 .post-content > .vc_row:nth-of-type(1) .heading-text h1 h1{
  font-size:clamp(2.35rem, 5vw, 4.15rem) !important;
  line-height:1.02 !important;
  font-weight:700 !important;
  letter-spacing:-.022em !important;
  color:#fff !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
  max-width:16ch;
  text-wrap:balance;
}
/* Inline font-weight / colour on the inner spans must not win. */
.page-id-120799 .post-content > .vc_row:nth-of-type(1) .heading-text h1 span,
.page-id-120799 .post-content > .vc_row:nth-of-type(1) .heading-text h1 strong{
  font-weight:inherit !important;
  font-size:inherit !important;
  color:#fff !important;
  letter-spacing:inherit !important;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
.page-id-120799 .post-content h2{
  font-size:clamp(1.6rem, 2.5vw, 2.45rem) !important;
  line-height:1.12 !important;
  font-weight:700 !important;
  letter-spacing:-.018em !important;
  color:var(--lz-head);
  margin:0 0 .7em !important;
  text-wrap:balance;
  position:relative;
}
/* Accent rule above every section heading — the page currently carries no
   brand colour at all in its content. */
/* Four of the six H2s have an inline font-weight:400 on an inner <span>,
   which beats a rule on the h2 itself — so the span has to be reset too. */
.page-id-120799 .post-content h2 span{
  font-weight:inherit !important;
  font-size:inherit !important;
  color:inherit !important;
  letter-spacing:inherit !important;
}

.page-id-120799 .post-content > .vc_row:not(:nth-of-type(1)) h2::before{
  content:"";
  display:block;
  width:40px; height:3px;
  background:var(--lz-red);
  margin-bottom:clamp(14px,1.6vw,20px);
}

.page-id-120799 .post-content p{
  font-size:1.0625rem;
  line-height:1.75;
  color:var(--lz-body);
  margin:0 0 1.15em;
  max-width:66ch;
}
.page-id-120799 .post-content p:last-child{ margin-bottom:0; }

/* Opening paragraph of the intro column reads as a lede. */
.page-id-120799 .post-content > .vc_row:nth-of-type(2) .uncode_text_column > p:first-child{
  font-size:1.1875rem;
  line-height:1.7;
  color:var(--lz-ink);
}

.page-id-120799 .post-content strong{ color:var(--lz-ink); font-weight:600; }

.page-id-120799 .post-content a:not(.btn){
  color:var(--lz-red);
  text-decoration:none;
  border-bottom:1px solid rgba(204,44,36,.35);
  transition:border-color .2s var(--lz-ease);
}
.page-id-120799 .post-content a:not(.btn):hover{ border-bottom-color:var(--lz-red); }

/* --------------------------------------------------------------------------
   4. Lists
   The component bullets are cramped by default.
   -------------------------------------------------------------------------- */
.page-id-120799 .post-content ul{
  list-style:none;
  margin:0 0 1.2em;
  padding:0;
}
.page-id-120799 .post-content ul li{
  position:relative;
  padding:0 0 0 26px;
  margin-bottom:1.05em;
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--lz-body);
  max-width:62ch;
}
.page-id-120799 .post-content ul li:last-child{ margin-bottom:0; }
.page-id-120799 .post-content ul li{ list-style:none; }
.page-id-120799 .post-content ul li::marker{ content:""; }
/* each item is <strong>Lead-in</strong><br />description — the <strong> is
   promoted to its own line below, so the <br> would double the break. */
.page-id-120799 .post-content ul li > br{ display:none; }
.page-id-120799 .post-content ul li::before{
  content:"";
  position:absolute;
  left:0; top:.62em;
  width:7px; height:7px;
  background:var(--lz-red);
  transform:rotate(45deg);
}
/* Bold lead-in ("Yaskawa Servo Motors – Built for Precision") onto its own
   line so each bullet reads as a titled point. */
.page-id-120799 .post-content ul li > strong{
  display:block;
  color:var(--lz-ink);
  font-weight:700;
  font-size:1rem;
  letter-spacing:.005em;
  margin-bottom:.25em;
}

/* --------------------------------------------------------------------------
   5. Media
   -------------------------------------------------------------------------- */
.page-id-120799 .post-content .tmb .t-inside{
  overflow:hidden;
  border-radius:var(--lz-radius);
  background:var(--lz-l1);
}
.page-id-120799 .post-content .tmb img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--lz-radius);
  box-shadow:0 18px 44px -20px rgba(16,18,19,.5);
  transition:transform .7s var(--lz-ease);
}
.page-id-120799 .post-content .tmb:hover img{ transform:scale(1.03); }

/* --------------------------------------------------------------------------
   6. Specification table
   NOTE: the spec grid on this page is currently a flat PNG (Table.png,
   1090x248) with none of its text in the HTML — it cannot reflow on mobile
   and is invisible to search engines and screen readers. These rules do two
   things: make the PNG behave as well as it can for now, and fully style a
   real <table> for when the content is converted (markup supplied separately).
   -------------------------------------------------------------------------- */

/* (a) the interim PNG */
.page-id-120799 .post-content img[src*="Table.png"]{
  width:100%;
  height:auto;
  border:1px solid var(--lz-l2);
  border-radius:var(--lz-radius);
  box-shadow:none;
  background:#fff;
  padding:4px;
}
.page-id-120799 .post-content .tmb:hover img[src*="Table.png"]{ transform:none; }

/* (b) a real table, once the PNG is replaced */
.page-id-120799 .post-content .lz-spec{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--lz-l2);
  border-radius:var(--lz-radius);
}
.page-id-120799 .post-content .lz-spec table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  font-size:.9375rem;
  margin:0;
}
.page-id-120799 .post-content .lz-spec th,
.page-id-120799 .post-content .lz-spec td{
  padding:14px 16px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--lz-l2);
  border-right:1px solid var(--lz-l2);
  color:var(--lz-body);
  line-height:1.6;
}
.page-id-120799 .post-content .lz-spec th:last-child,
.page-id-120799 .post-content .lz-spec td:last-child{ border-right:0; }
.page-id-120799 .post-content .lz-spec tr:last-child td{ border-bottom:0; }
.page-id-120799 .post-content .lz-spec thead th{
  background:var(--lz-l1);
  color:var(--lz-ink);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  white-space:nowrap;
}
.page-id-120799 .post-content .lz-spec tbody th{
  background:#fff;
  color:var(--lz-ink);
  font-weight:700;
  width:22%;
  min-width:170px;
}
.page-id-120799 .post-content .lz-spec td span{ display:block; }
.page-id-120799 .post-content .lz-spec td span + span{ margin-top:.35em; }

/* --------------------------------------------------------------------------
   7. Section bands
   Alternating grounds give the page rhythm instead of one long white scroll.
   Row 3 = "Premium Components / Integrated CNC Software".
   Row 6 = the enquiry form.
   -------------------------------------------------------------------------- */
.page-id-120799 .post-content > .vc_row:nth-of-type(3),
.page-id-120799 .post-content > .vc_row:nth-of-type(4){
  background:var(--lz-l1);
}

/* --------------------------------------------------------------------------
   8. Enquiry form  (row 6, on a dark ground)
   -------------------------------------------------------------------------- */
.page-id-120799 .post-content > .vc_row:nth-of-type(6){
  background:var(--lz-d2);
}
.page-id-120799 .post-content > .vc_row:nth-of-type(6) h2{
  color:#fff;
  max-width:34ch;
}
.page-id-120799 .post-content > .vc_row:nth-of-type(6) p{ color:rgba(255,255,255,.68); }

.page-id-120799 .wpcf7{ margin-top:clamp(26px,3vw,40px); }

.page-id-120799 .wpcf7-form{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:22px 24px;
  max-width:880px;
}
.page-id-120799 .wpcf7-form > .hidden-fields-container{
  grid-column:1 / -1;
  margin:0; padding:0; border:0;
}
/* name | email side by side; everything else full width */
.page-id-120799 .wpcf7-form > p:nth-of-type(3),
.page-id-120799 .wpcf7-form > p:nth-of-type(4),
.page-id-120799 .wpcf7-form > p:nth-of-type(5),
.page-id-120799 .wpcf7-form > .wpcf7-response-output{ grid-column:1 / -1; }

.page-id-120799 .wpcf7-form p{ margin:0 !important; max-width:none; }

.page-id-120799 .wpcf7-form label{
  display:block;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  line-height:1.4;
}
.page-id-120799 .wpcf7-form label br{ display:none; }
.page-id-120799 .wpcf7-form .wpcf7-form-control-wrap{ display:block; margin-top:9px; }

.page-id-120799 .wpcf7-form input[type="text"],
.page-id-120799 .wpcf7-form input[type="email"],
.page-id-120799 .wpcf7-form textarea{
  width:100%;
  box-sizing:border-box;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--lz-radius);
  padding:14px 16px;
  color:#fff;
  font-family:inherit;
  font-size:16px;           /* 16px stops iOS zooming the field on focus */
  line-height:1.5;
  transition:border-color .2s var(--lz-ease), background .2s var(--lz-ease), box-shadow .2s var(--lz-ease);
}
.page-id-120799 .wpcf7-form textarea{ min-height:170px; resize:vertical; display:block; }

.page-id-120799 .wpcf7-form input::placeholder,
.page-id-120799 .wpcf7-form textarea::placeholder{ color:rgba(255,255,255,.34); }

.page-id-120799 .wpcf7-form input[type="text"]:hover,
.page-id-120799 .wpcf7-form input[type="email"]:hover,
.page-id-120799 .wpcf7-form textarea:hover{ border-color:rgba(255,255,255,.3); }

.page-id-120799 .wpcf7-form input[type="text"]:focus,
.page-id-120799 .wpcf7-form input[type="email"]:focus,
.page-id-120799 .wpcf7-form textarea:focus{
  outline:none;
  background:rgba(255,255,255,.07);
  border-color:var(--lz-red);
  box-shadow:0 0 0 3px var(--lz-red-soft);
}

/* Submit — matches the site's existing CTA pill (red, going to ink on hover). */
.page-id-120799 .wpcf7-form input[type="submit"]{
  -webkit-appearance:none;
  appearance:none;
  background:var(--lz-red);
  color:#fff;
  border:0;
  border-radius:999px;
  padding:15px 40px;
  font-family:inherit;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .25s var(--lz-ease), transform .25s var(--lz-ease);
}
.page-id-120799 .wpcf7-form input[type="submit"]:hover{ background:#fff; color:var(--lz-ink); }
.page-id-120799 .wpcf7-form input[type="submit"]:active{ transform:translateY(1px); }

.page-id-120799 .wpcf7-spinner{ margin:0 0 0 12px; }

.page-id-120799 .wpcf7 form .wpcf7-response-output{
  margin:4px 0 0;
  padding:13px 16px;
  border-radius:var(--lz-radius);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-size:.9375rem;
}
.page-id-120799 .wpcf7 form.sent .wpcf7-response-output{ border-color:#3f9d63; }
.page-id-120799 .wpcf7 form.invalid .wpcf7-response-output,
.page-id-120799 .wpcf7 form.failed .wpcf7-response-output{ border-color:var(--lz-red); }
.page-id-120799 .wpcf7-not-valid-tip{
  color:#ff8a80;
  font-size:.8125rem;
  letter-spacing:0;
  text-transform:none;
  margin-top:7px;
}

/* --------------------------------------------------------------------------
   9. Responsive
   Uncode already collapses col-lg-6 to full width; these are the type,
   spacing and form adjustments that go with it.
   -------------------------------------------------------------------------- */
@media (max-width:959px){
  .page-id-120799 .post-content > .vc_row:nth-of-type(1) h1{ max-width:18ch; }
  .page-id-120799 .wpcf7-form{ grid-template-columns:1fr; }
  .page-id-120799 .wpcf7-form > p:nth-of-type(1),
  .page-id-120799 .wpcf7-form > p:nth-of-type(2){ grid-column:1 / -1; }
}

@media (max-width:767px){
  .page-id-120799 .post-content > .vc_row[data-parent] > .row-parent{
    padding-top:clamp(40px,9vw,60px);
    padding-bottom:clamp(40px,9vw,60px);
  }
  .page-id-120799 .post-content > .vc_row:nth-of-type(1) > .row-parent{
    min-height:clamp(360px,54vh,460px);
  }
  .page-id-120799 .post-content > .vc_row:nth-of-type(1) .block-bg-overlay{
    /* the machine sits centre-frame on narrow screens, so weight the scrim
       vertically instead of horizontally */
    background:linear-gradient(to bottom,
      rgba(16,18,19,.62) 0%, rgba(16,18,19,.28) 30%,
      rgba(16,18,19,.55) 68%, rgba(16,18,19,.92) 100%) !important;
  }
  .page-id-120799 .post-content p,
  .page-id-120799 .post-content ul li{ font-size:1rem; }
  .page-id-120799 .wpcf7-form input[type="submit"]{ width:100%; }
}

/* --------------------------------------------------------------------------
   10. Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .page-id-120799 .post-content .tmb img,
  .page-id-120799 .wpcf7-form input,
  .page-id-120799 .wpcf7-form textarea{ transition:none; }
  .page-id-120799 .post-content .tmb:hover img{ transform:none; }
}