@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');

/* Cutlab brand v3 (11.10.2026): cream, night, walnut, amber, blue. Light theme only. */
:root{
  color-scheme:light;
  --cl-cream:#FAF9F5; --cl-night:#080402; --cl-walnut:#3B342D;
  --cl-amber:#F6B463; --cl-blue:#0F29D6; --cl-line:#E3E0D8;
  --cl-on-dark-muted:#C9C1B6; --cl-on-walnut-muted:#E2D9CC;
  --cl-display:'Inter Tight',Inter,'Arial Narrow',sans-serif;
  --cl-body:Inter,Arial,sans-serif;
  --cl-mono:'IBM Plex Mono',ui-monospace,monospace;
}
body,.t-body{background-color:var(--cl-cream);}
body,.t-text,.t-descr,.t-input,.t-select,.t-textarea,.t-menu__link-item,.t-card__descr,.t-uptitle{font-family:var(--cl-body) !important;}
.t-title,.t-name,.t-heading,.t-card__title,.t-btn,.t-submit,.t-menu__link-item.t-btntext{font-family:var(--cl-display) !important;}
.t-btn,.t-submit{border-radius:5px !important;font-weight:600 !important;}
.t-input,.t-select,.t-textarea{border-radius:5px !important;}
/* hover for links inside native text blocks only (custom HTML blocks style their own links and buttons) */
.t-text a:hover,.t-descr a:hover{color:var(--cl-night);}
/* marker: only on cream, under dark text. On dark surfaces the key word is amber text (no bar). */
.cl-marker{background:linear-gradient(transparent 58%,var(--cl-amber) 58%,var(--cl-amber) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.cl-amber{color:var(--cl-amber) !important;}
.cl-mono{font-family:var(--cl-mono) !important;font-size:13px;letter-spacing:.1em;text-transform:uppercase;}
/* white logo in the walnut footer: one black SVG, inverted */
[data-record-type="420"] img[src*="cutlab-wordmark"],[data-record-type="420"] img[data-original*="cutlab-wordmark"]{filter:brightness(0) invert(1);}
/* links on dark surfaces (footer on walnut): cream, no underline; hover amber + 1px underline. Overrides the page-wide blue link style. */
[data-record-type="420"] a,[data-record-type="420"] a:visited{color:var(--cl-cream) !important;text-decoration:none !important;border-bottom:0 !important;box-shadow:none !important;background-image:none !important;}
[data-record-type="420"] a:hover{color:var(--cl-amber) !important;text-decoration:underline !important;text-decoration-thickness:1px !important;text-underline-offset:3px;}
/* contact icons on cream (block 560): walnut instead of black */
[data-record-type="560"] svg path,[data-record-type="560"] svg circle,[data-record-type="560"] svg rect,[data-record-type="560"] svg polygon{fill:var(--cl-walnut) !important;}
/* contact tiles (.clcta, used on /cnc, /toostus and the next pages): value stays night, blue only on hover; overrides the page link style */
.clcta a.clcta__tile,.clcta a.clcta__tile:visited{color:var(--cl-night) !important;text-decoration:none !important;border-bottom:0;}
.clcta a.clcta__tile .clcta__val{color:var(--cl-night) !important;text-decoration:none !important;}
.clcta a.clcta__tile:hover .clcta__val{color:var(--cl-blue) !important;}
/* cookie banner (T972): hide the hardcoded English 'Disabled'/'Enabled' label; the switch itself shows the state */
.t972__toggle-txt{display:none !important;}
/* header menu (T228): five items stay on one line (the layout is a table, so the list must not wrap); tighter gaps; on narrower screens drop the social icons first, then the tagline, then tighten again, so nothing overlaps before the burger menu (980px) */
.t228__list,.t228__centerside,.t228__list_item,.t228__list_item a{white-space:nowrap;}
.t228 .t228__list_item{padding-right:18px !important;}
.t228 .t228__padding40px{width:24px !important;}
@media (max-width:1450px){.t228 .t-sociallinks{display:none !important;}}
@media (max-width:1270px){.t228 .t228__right_descr{display:none !important;}}
@media (max-width:1060px){
  .t228 .t228__list_item{padding-right:10px !important;}
  .t228 .t228__padding40px{width:12px !important;}
}
/* footer (T420): 1px #4A4239 line between the four columns (cols 3-4 sit in a nested wrapper, so target the class, not :first-child of the parent); on narrow screens a line above each stacked column */
@media (min-width:960px){
  .t420 .t420__col{border-left:1px solid #4A4239;box-sizing:border-box;padding-left:24px;}
  .t420 .t-container > .t420__col:first-child{border-left:0;padding-left:0;}
}
@media (max-width:959px){
  .t420 .t420__col{border-top:1px solid #4A4239;box-sizing:border-box;padding-top:24px;margin-top:24px;}
  .t420 .t-container > .t420__col:first-child{border-top:0;padding-top:0;margin-top:0;}
}