/* ========================================================================== 
   CTK final polish — V55
   Restrained finishing layer: no redesign, only consistency, stability,
   performance-minded motion and tighter mobile/desktop rhythm.
   ========================================================================== */

:root {
  --polish-line: rgba(21,25,29,.085);
  --polish-line-strong: rgba(21,25,29,.13);
  --polish-shadow: 0 16px 44px rgba(15,20,24,.065);
  --polish-shadow-hover: 0 22px 56px rgba(15,20,24,.10);
  --polish-radius-card: 14px;
}

html {
  scroll-padding-top: 96px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body { font-synthesis: none; }
section[id] { scroll-margin-top: 96px; }

h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

/* A restrained motion language reads more premium and is less likely to jank. */
.reveal {
  transition-duration: .55s, .55s, .65s;
}
.reveal-up { transform: translateY(18px); }

/* Fixed header: remove expensive live blur; preserve the existing dark glass look. */
.site-header.is-scrolled {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: linear-gradient(180deg, rgba(20,27,33,.975), rgba(14,20,24,.965));
}

/* Hero: keep motion subtle and avoid unnecessary compositor pressure. */
.hero-eyebrow {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(15,22,27,.58);
}
.hero h1 { text-wrap: balance; }

/* Direction cards: same design, more precise borders/shadows and less jumpy hover. */
.direction-card {
  border: 1px solid var(--polish-line);
  border-radius: var(--polish-radius-card);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
}
@media (hover:hover) and (pointer:fine) {
  .direction-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--polish-shadow-hover);
  }
}

/* Statistics glass: clean white hierarchy and consistent edge treatment. */
.stat-card {
  border-color: rgba(255,255,255,.22);
  border-radius: 14px;
}
.stat-card strong,
.stat-card .stat-word { color: rgba(255,255,255,.985); }
.stat-card p { color: rgba(255,255,255,.88); }

/* Product catalogue: tighter, calmer cards with consistent image geometry. */
.product-card {
  border: 1px solid var(--polish-line);
  border-radius: var(--polish-radius-card);
  background: #fbfbfb;
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset;
}
.product-image {
  overflow: hidden;
  border-radius: 11px;
  background: #eceeef;
}
.product-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-card h4 {
  color: #171b1f;
  letter-spacing: -.01em;
}
.product-packaging { color: #858c92; }
.product-card .product-actions {
  border-top: 1px solid rgba(21,25,29,.055);
  margin-top: auto;
  padding-top: 13px;
}
.product-card .product-actions a {
  text-decoration-color: rgba(116,123,130,.48);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@media (hover:hover) and (pointer:fine) {
  .product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--polish-shadow);
  }
}

/* Advantages: reduce the oversized empty areas while keeping the original cards. */
.features-grid { align-items: stretch; }
.feature-card {
  min-height: 315px;
  border-radius: var(--polish-radius-card);
  border-color: var(--polish-line);
  box-shadow: 0 1px 0 rgba(255,255,255,.96) inset;
}
.feature-card h3 { margin-top: 38px; }
.feature-card p { line-height: 1.46; }
@media (hover:hover) and (pointer:fine) {
  .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--polish-shadow-hover);
  }
}

/* Documents: slightly quieter borders and deterministic touch behaviour. */
.document-card {
  border-color: var(--polish-line-strong);
  box-shadow: 0 10px 30px rgba(15,20,24,.055);
}
.documents-viewport { overscroll-behavior-inline: contain; }

/* Form and CTA finishing. Contact geometry is consolidated below. */
.contact-form {
  border: 1px solid rgba(255,255,255,.20);
}
.button {
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
@media (hover:hover) and (pointer:fine) {
  .button:hover { transform: translateY(-1px); }
}
.button:active { transform: translateY(0); }

/* Avoid fake motion on touchscreens: it looks like layout instability. */
@media (hover:none), (pointer:coarse) {
  .direction-card:hover,
  .feature-card:hover,
  .product-card:hover {
    transform: none !important;
  }
}

/* Tablet refinement: retain the composition, just tighten vertical rhythm. */
@media (min-width: 701px) and (max-width: 1024px) {
  .feature-card { min-height: 285px; padding: 28px; }
  .feature-card h3 { margin-top: 32px; }
  .direction-card { min-height: 300px; }
}

/* Mobile: stability over decorative movement. Keep every element immediately
   readable, prevent sticky hover states, and remove oversized empty card areas. */
@media (max-width: 768px) {
  html { scroll-padding-top: 80px; }
  section[id] { scroll-margin-top: 80px; }

  .reveal,
  .reveal-up,
  .reveal-clip,
  .reveal.is-visible,
  .reveal-up.is-visible,
  .reveal-clip.is-visible {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  .hero-media-image { animation: none !important; }

  .direction-card,
  .direction-image {
    min-height: 238px;
    border-radius: 14px;
  }
  .direction-card { padding: 24px 22px; }
  .direction-card p {
    font-size: 16px;
    line-height: 1.38;
  }

  .product-card {
    min-height: 390px;
    border-radius: 14px;
  }
  .product-card h4 {
    font-size: 16px;
    line-height: 1.18;
  }
  .product-card .product-actions {
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
  }
  .product-card .product-actions a {
    font-size: 12.5px;
    white-space: nowrap;
  }

  .feature-card {
    min-height: auto;
    padding: 24px;
    border-radius: 14px;
  }
  .feature-card h3 {
    margin: 28px 0 12px;
    font-size: 22px;
  }
  .feature-card p {
    font-size: 16px;
    line-height: 1.45;
  }

  .documents-controls button,
  .product-group-label button,
  .menu-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  .product-detail-dialog { scroll-behavior: smooth; }
}

@media (max-width: 390px) {
  .product-card { min-height: 382px; }
  .product-card .product-actions { gap: 8px; }
  .product-card .product-actions a { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media-image { animation: none !important; }
}


/* ========================================================================== 
   V56 — catalogue navigation reliability + refined modal transitions +
   unobtrusive cross-site link
   ========================================================================== */

/* Prevent desktop width shift when a product modal locks page scrolling. */
html { scrollbar-gutter: stable; }

/* Direction-to-catalogue expansion now waits for the real accordion animation.
   Make that motion a touch shorter and more deliberate. */
.product-grid-wrap {
  transition: max-height .34s cubic-bezier(.22,.72,.24,1), opacity .22s ease !important;
}
.product-group.is-jump-highlight .product-group-label {
  transition: color .22s ease, background-color .22s ease;
}

/* Product dialog: no expensive backdrop blur; animate only compositor-safe
   opacity/transform. This removes the abrupt 'pop' without making it floaty. */
.product-detail-overlay {
  opacity: 0;
  background: rgba(9,13,16,.66) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: opacity .2s ease;
}
.product-detail-overlay.is-active { opacity: 1; }
.product-detail-dialog {
  opacity: 0;
  transform: translateY(12px) scale(.987);
  transform-origin: center center;
  transition: transform .22s cubic-bezier(.22,.72,.24,1), opacity .18s ease;
  will-change: transform, opacity;
}
.product-detail-overlay.is-active .product-detail-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.product-detail-overlay.is-closing { pointer-events: none; }
.product-card.is-dialog-return {
  box-shadow: 0 0 0 2px rgba(210,106,49,.18), var(--polish-shadow);
  transition: box-shadow .28s ease !important;
}

/* The requested link to the other CTK web presence is present, but treated as
   secondary navigation rather than a loud new tab/button. */

.footer-external-site {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.66) !important;
  font-size: 15px !important;
}
.footer-external-site:hover { color: #fff !important; }

@media (max-width: 768px) {
  .product-grid-wrap {
    transition: max-height .30s cubic-bezier(.22,.72,.24,1), opacity .18s ease !important;
  }
  .product-detail-dialog {
    transform: translateY(8px) scale(.992);
    transition-duration: .19s, .16s;
  }
  .product-card.is-dialog-return {
    box-shadow: 0 0 0 2px rgba(210,106,49,.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-detail-overlay,
  .product-detail-dialog,
  .product-grid-wrap { transition: none !important; }
}


/* ==========================================================================
   V57 — modal closes in place, without page return/jump
   ========================================================================== */
.product-detail-overlay.is-closing.is-active {
  opacity: 1 !important;
  pointer-events: none;
}
.product-detail-overlay.is-closing.is-active .product-detail-dialog {
  opacity: 0 !important;
  transform: translateY(5px) scale(.994) !important;
  transition: transform .17s cubic-bezier(.22,.72,.24,1), opacity .14s ease !important;
}
.product-card.is-dialog-return {
  box-shadow: var(--polish-shadow) !important;
}
.footer-external-site .i18n-text::after { content: none !important; }


/* ==========================================================================
   V58 — modal closes exactly in place: no body:fixed, no scroll restoration
   ========================================================================== */
html.product-dialog-open,
body.product-dialog-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}
/* Keep the background fully inert while allowing only the dialog itself to
   scroll vertically. */
.product-detail-overlay {
  overscroll-behavior: none !important;
  touch-action: none !important;
}
.product-detail-dialog {
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
}


/* V59 — one contact layout, shared by full-screen and windowed desktop.
   Both columns participate in normal flow: longer copy/status text grows the
   card without consuming the bottom inset or clipping the form. */
.contact-card {
  --contact-inset: clamp(38px, 4.2vw, 100px);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(32px, 3vw, 60px);
  position: relative;
  min-width: 0;
  padding: var(--contact-inset);
}
.contact-title,
.contact-form {
  position: relative;
  min-width: 0;
  width: 100%;
}
.contact-title h2 {
  max-width: 100%;
  font-size: clamp(28px, 2.35vw, 45px);
  line-height: 1.08;
  letter-spacing: -.015em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.contact-form {
  justify-self: end;
  max-width: 735px;
  min-height: 690px;
  padding: 25px clamp(30px, 2.6vw, 50px) 50px;
}
@media (min-width: 1025px) and (max-width: 1360px) {
  .contact-card { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
}
@media (max-width: 1024px) {
  .contact-card { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .contact-title h2 { max-width: 700px; font-size: clamp(28px, 4.2vw, 40px); }
  .contact-form { max-width: none; min-height: 0; padding: 30px 40px 40px; }
}
@media (max-width: 700px) {
  .contact-card { --contact-inset: 20px; gap: 28px; }
  .contact-form { padding: 22px 18px 30px; }
}
@media (max-width: 380px) {
  .contact-card { --contact-inset: 16px; }
  .contact-form { padding-inline: 15px; }
}

/* One readable navigation treatment at every width using the compact menu.
   Labels no longer inherit the former number-column font/width/color. */
@media (max-width: 1360px) {
  .mobile-menu { overscroll-behavior: contain; }
  .mobile-menu nav a {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 56px;
    padding: 15px 4px;
    border-bottom: 1px solid rgba(255,255,255,.115);
    color: rgba(255,255,255,.97);
    font: 600 clamp(19px, 2.2vw, 22px)/1.25 var(--onest);
    letter-spacing: 0;
    transition: color .2s ease;
  }
  .mobile-menu nav a > .i18n-text {
    flex: 1;
    min-width: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    white-space: normal;
    overflow-wrap: break-word;
  }
  .mobile-menu nav a::after {
    content: '↗';
    flex: 0 0 18px;
    color: rgba(255,255,255,.65);
    font: 400 16px/1 var(--onest);
    text-align: right;
  }
  .mobile-menu nav a:hover { color: #f1a26f; }
  .mobile-menu nav a.external-site-link::after { content: none; }
}

/* V60 — accessible document link inside the consent label. */
.consent .privacy-document-link { color: inherit; text-underline-offset: 3px; }
.consent .privacy-document-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }

/* V61 — intrinsic-size-safe card headings and catalogue controls. */
.direction-card { min-width: 0; container-type: inline-size; }
.direction-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px;
  gap: 18px;
  min-width: 0;
  align-items: start;
}
.direction-head h3 { min-width: 0; overflow-wrap: anywhere; }
.direction-head .round-arrow { justify-self: end; }
/* Narrowness belongs to the card, not the device: also covers window resizing
   and browser zoom without guessing a single viewport breakpoint. */
@container (max-width: 300px) {
  .direction-head { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .direction-head .round-arrow {
    width: 46px;
    height: 46px;
    justify-self: end;
  }
}
.product-group,
.product-group-label { min-width: 0; }
.product-group-label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 16px;
}
.product-group-label h3 { min-width: 0; max-width: none; overflow-wrap: anywhere; }
.product-group-label:hover h3 { transform: none; }
.product-group-label .group-toggle-icon { justify-self: end; }
@media (max-width: 1360px) {
  .product-group { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .product-group-label { align-items: center; }
}
/* Avoid filtered/translated image surfaces behind translucent foreground cards
   on compact layouts; keep each card's paint within its own rounded box. */
.about { isolation: isolate; }
@media (max-width: 1024px) {
  .about-bg { filter: none; transform: none !important; }
  .about-inner,
  .about-intro,
  .about-copy { background: transparent; }
  .about .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .about .stat-card { isolation: isolate; contain: paint; }
}
/* V62 — the photograph must not contribute its intrinsic aspect ratio to
   the auto-sized grid row. Text, not image dimensions, determines row height. */
.direction-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.direction-card { min-height: 0; gap: 36px; }
.direction-image { min-height: 0; }
.directions-grid { grid-template-rows: repeat(2, minmax(300px, auto)); }
@media (max-width: 1360px) {
  .directions-grid { grid-template-rows: repeat(2, minmax(280px, auto)); }
}
@media (max-width: 1024px) {
  .directions-grid { grid-template-rows: auto repeat(2, minmax(280px, auto)); }
}
@media (max-width: 700px) {
  .directions-grid { grid-template-rows: auto; }
  .direction-card { min-height: 238px; gap: 28px; }
  .direction-image { min-height: 260px; }
}

/* Compact names use the reading face; major section titles retain Xolonium. */
.direction-head h3,
html[lang="en"] .direction-card h3 {
  font-family: var(--onest);
  font-size: clamp(21px, 1.65vw, 26px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.015em;
}
.product-card h4,
.product-card h4 .i18n-text {
  font-family: var(--onest);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  hyphens: none;
  text-wrap: pretty;
}
/* Restrained photographic grading, preserving image assets and existing overlays. */
.hero .hero-media-image,
.direction-image img,
.contact-card .contact-bg { filter: saturate(.92) contrast(1.015) brightness(1.01); }

/* Stable controls: the circle stays put, only the arrow inside can turn. */
.direction-card .round-arrow,
.direction-card:hover .round-arrow,
.direction-card.is-navigating .round-arrow { transform: none; }
.direction-card,
.product-card,
.feature-card,
.button,
.direction-card .round-arrow {
  transition-duration: .22s;
  transition-timing-function: cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  .direction-card, .product-card, .feature-card, .button,
  .direction-card .round-arrow { transition: none !important; }
}