/* ==========================================================================
   ZIPPTORK 2026 design system - light
   Hand-authored CSS, no utility framework.

   Contrast on white was recalculated rather than inverted: the signature cyan
   #3ED8E8 reads at 1.6:1 on white and had to become a deep teal, and the same
   applies to every status colour.
   ========================================================================== */

:root{
  --zt-ink:#FFFFFF;
  --zt-ink2:#F5F7F8;
  --zt-panel:#FFFFFF;
  --zt-line:#E1E6EA;
  --zt-line-hi:#C6CED5;
  --zt-txt:#111A20;        /* 17:1 on white */
  --zt-muted:#56626C;      /* 5.8:1 */
  --zt-dim:#6E7881;        /* 4.8:1 */
  --zt-brand:#C82126;      /* 5.6:1 */
  --zt-brand-hi:#A3181D;
  --zt-sig:#0C7385;        /* 5.2:1 - the dark-theme cyan is unreadable here */
  --zt-ok:#0E7A4F;         /* 5.2:1 */
  --zt-ng:#C0272D;         /* 5.9:1 */
  --zt-warn:#8A5A00;       /* 5.6:1 */

  --zt-display:"Archivo","Arial Narrow","Helvetica Neue",sans-serif;
  --zt-body:"Public Sans","Segoe UI","Helvetica Neue",sans-serif;
  --zt-mono:"IBM Plex Mono",Consolas,monospace;

  --zt-wrap:1240px;
  --zt-gap:20px;

  color-scheme:light;
}

/* --------------------------------------------------------------- ground ---- */
html.zt, body.zt{ background:var(--zt-ink); }
body.zt{
  color:var(--zt-txt);
  font-family:var(--zt-body);
  -webkit-font-smoothing:antialiased;
}
body.zt #wrapper,
body.zt #main,
body.zt .page-wrapper{ background:var(--zt-ink); }

body.zt h1, body.zt h2, body.zt h3, body.zt h4,
body.zt .zt-display{
  font-family:var(--zt-display);
  color:var(--zt-txt);
  text-wrap:balance;
}
body.zt a{ color:var(--zt-sig); }
body.zt a:hover{ color:var(--zt-brand); }
body.zt p{ color:var(--zt-muted); }

.zt-mono,
body.zt code, body.zt kbd{
  font-family:var(--zt-mono);
  font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------- layout ---- */
.zt-wrap{ max-width:var(--zt-wrap); margin:0 auto; padding:0 20px; }
.zt-band{ border-top:1px solid var(--zt-line); border-bottom:1px solid var(--zt-line); background:var(--zt-ink2); }
.zt-sec{ padding:76px 0; }
.zt-sec--tight{ padding:52px 0; }

.zt-grid{ display:grid; gap:var(--zt-gap); }
@media (min-width:640px){
  .zt-g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .zt-g3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .zt-g4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1024px){
  .zt-g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .zt-g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .zt-split{ grid-template-columns:1.05fr 1fr; gap:56px; align-items:center; }
}

/* ------------------------------------------------------- section rule ------ */
.zt-srule{ display:flex; align-items:center; gap:16px; margin-bottom:34px; }
.zt-srule i{ flex:1; height:1px; background:linear-gradient(90deg,var(--zt-line-hi),transparent); }
/* The label is an h2 for the document outline, so every property a theme heading
   would otherwise bring - size, weight, margin, line-height - is stated here.
   body.zt keeps this ahead of Flatsome's own h2 rules. */
body.zt .zt-srule h2{
  font-family:var(--zt-mono); font-weight:500; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--zt-sig);
  margin:0; padding:0; line-height:1.3;
}
.zt-srule s{
  font-family:var(--zt-mono); text-decoration:none; font-size:11px;
  letter-spacing:.1em; color:var(--zt-dim);
}
.zt-eyebrow{
  font-family:var(--zt-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--zt-muted); margin:0 0 6px;
}

/* ------------------------------------------------------------- status ------ */
.zt-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--zt-mono); font-size:11px; font-weight:500; letter-spacing:.08em;
  padding:4px 9px; border-radius:3px; border:1px solid;
}
.zt-chip i{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.zt-chip--ok{ color:var(--zt-ok); border-color:rgba(14,122,79,.32); background:rgba(14,122,79,.07); }
.zt-chip--ng{ color:var(--zt-ng); border-color:rgba(192,39,45,.32); background:rgba(192,39,45,.06); }
.zt-chip--warn{ color:var(--zt-warn); border-color:rgba(138,90,0,.32); background:rgba(138,90,0,.06); }

/* ------------------------------------------------- product plate + card ----
   On a white page the plate cannot also be white, or the product floats. It
   becomes a light grey panel so the shot still sits on a defined surface. */
.zt-plate{
  /* Plain white: the product shots carry their own white or transparent
     backgrounds, and a tinted plate made those read as pale boxes on grey. */
  background:#fff;
  border:1px solid var(--zt-line);
  display:grid;
  grid-template-rows:minmax(0,1fr);   /* definite row, so % heights resolve */
  place-items:center;
  padding:20px;
}
.zt-plate img{
  width:100%; height:100%;
  max-width:100%; max-height:100%;
  object-fit:contain; object-position:center;
  filter:drop-shadow(0 3px 9px rgba(18,28,38,.22));
}
.zt-plate--h40{ height:160px; }
.zt-plate--h44{ height:176px; }
.zt-plate--h48{ height:192px; }
.zt-plate--tall{ height:320px; padding:32px; }

.zt-card{
  background:var(--zt-panel);
  border:1px solid var(--zt-line);
  border-radius:10px;
  overflow:hidden;
  display:block;
  transition:border-color .16s ease, box-shadow .16s ease;
}
a.zt-card:hover{ border-color:var(--zt-sig); box-shadow:0 2px 14px rgba(17,26,32,.07); }
.zt-card__body{ padding:20px; }
.zt-card__code{ font-family:var(--zt-mono); font-size:11px; letter-spacing:.04em; color:var(--zt-sig); }
.zt-card__name{ font-family:var(--zt-display); font-weight:700; font-size:17px; margin:6px 0 0; }
a.zt-card:hover .zt-card__name{ color:var(--zt-sig); }
.zt-card__desc{ font-size:14px; line-height:1.6; color:var(--zt-muted); margin:8px 0 0; }

/* ------------------------------------------------------------ buttons ------ */
.zt-btn{
  display:inline-block; font-family:var(--zt-body); font-weight:600; font-size:15px;
  padding:14px 26px; border-radius:5px; border:1px solid transparent;
  text-decoration:none; transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
.zt-btn--primary{ background:var(--zt-brand); }
.zt-btn--ghost{ border-color:var(--zt-line-hi); }
/* `body.zt a` outranks a single class, so the button's own colour needs the
   same weight or the link colour wins and white text turns teal on red. */
body.zt a.zt-btn--primary,
body.zt a.zt-btn--primary:hover{ color:#fff; }
body.zt a.zt-btn--primary:hover{ background:var(--zt-brand-hi); }
body.zt a.zt-btn--ghost{ color:var(--zt-txt); }
body.zt a.zt-btn--ghost:hover{ border-color:var(--zt-sig); color:var(--zt-sig); }
.zt-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

/* ------------------------------------------------------------- tables ------ */
.zt-tablewrap{ overflow-x:auto; border:1px solid var(--zt-line); border-radius:10px; }
body.zt table.zt-table{
  width:100%; min-width:820px; margin:0; border:0; font-size:14px; background:transparent;
}
body.zt table.zt-table thead tr{ background:var(--zt-ink2); border-bottom:1px solid var(--zt-line); }
body.zt table.zt-table th{
  font-family:var(--zt-mono); font-size:11px; font-weight:500; letter-spacing:.12em;
  color:var(--zt-muted); text-transform:uppercase; text-align:left;
  padding:16px 20px; border:0;
}
body.zt table.zt-table td{ padding:13px 20px; border:0; border-top:1px solid var(--zt-line); color:var(--zt-muted); }
body.zt table.zt-table tbody th{
  text-align:left; text-transform:none; letter-spacing:0; font-size:14px;
  padding:13px 20px; border-top:1px solid var(--zt-line); color:var(--zt-txt);
}
body.zt table.zt-table tbody tr:hover{ background:rgba(12,115,133,.045); }
.zt-num{ font-family:var(--zt-mono); text-align:right; }
.zt-tnote{ font-family:var(--zt-mono); font-size:12px; color:var(--zt-dim); margin-top:12px; }

/* ---------------------------------------------------- definition lists ----- */
.zt-dl{ border-top:1px solid var(--zt-line); margin:0; }
.zt-dl div{
  display:grid; grid-template-columns:1fr 1.2fr; gap:16px;
  padding:13px 0; border-bottom:1px solid var(--zt-line);
}
.zt-dl dt{
  font-family:var(--zt-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--zt-muted); align-self:center; margin:0;
}
.zt-dl dd{ margin:0; font-family:var(--zt-mono); font-size:14px; color:var(--zt-txt); align-self:center; }

/* ------------------------------------------------------- code decoder ------ */
.zt-code{ background:var(--zt-ink2); border:1px solid var(--zt-line); border-radius:10px; padding:28px; }
.zt-code__row{ display:flex; align-items:flex-end; gap:6px; min-width:max-content; }
.zt-code__scroll{ overflow-x:auto; padding-bottom:4px; }
.zt-seg{
  background:var(--zt-panel); border:1px solid var(--zt-line-hi); border-radius:5px;
  padding:10px 12px; text-align:center; flex-shrink:0; font-family:var(--zt-mono);
}
.zt-seg b{ display:block; font-size:18px; font-weight:600; color:var(--zt-txt); }
.zt-seg s{ display:block; text-decoration:none; font-size:10px; color:var(--zt-dim); margin-top:4px; white-space:nowrap; }
.zt-seg--brand{ border-color:rgba(200,33,38,.55); } .zt-seg--brand b{ color:var(--zt-brand); }
.zt-seg--sig{ border-color:rgba(12,115,133,.5); } .zt-seg--sig b{ color:var(--zt-sig); }
.zt-fit{ flex-shrink:0; }
.zt-fit__label{ font-family:var(--zt-mono); font-size:10px; letter-spacing:.14em; color:var(--zt-sig); text-align:center; margin-bottom:6px; }
.zt-fit__box{ display:flex; gap:6px; border:1px solid rgba(12,115,133,.32); border-radius:5px; padding:6px; }
.zt-legend{ display:grid; gap:28px; margin-top:32px; font-size:14px; }
@media (min-width:640px){ .zt-legend{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .zt-legend{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.zt-legend h4{
  font-family:var(--zt-mono); font-size:11px; letter-spacing:.12em; color:var(--zt-sig);
  border-bottom:1px solid var(--zt-line); padding-bottom:8px; margin:0;
}
.zt-legend h4.is-brand{ color:var(--zt-brand); }
.zt-legend dl{ display:grid; gap:6px; margin:10px 0 0; }
.zt-legend dl.is-two{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px; }
.zt-legend dl > div{ display:flex; gap:12px; }
.zt-legend dt{ font-family:var(--zt-mono); color:var(--zt-txt); width:42px; flex-shrink:0; margin:0; }
.zt-legend dd{ color:var(--zt-muted); margin:0; }

/* ------------------------------------------------------ resource card ------ */
.zt-res{
  display:block; background:var(--zt-panel); border:1px solid var(--zt-line);
  border-radius:10px; padding:24px; text-decoration:none;
  transition:border-color .16s ease, box-shadow .16s ease;
}
a.zt-res:hover{ border-color:var(--zt-sig); box-shadow:0 2px 14px rgba(17,26,32,.07); }
.zt-res__k{ font-family:var(--zt-mono); font-size:11px; letter-spacing:.12em; color:var(--zt-sig); }
.zt-res h3{ font-size:19px; margin:8px 0 0; }
a.zt-res:hover h3{ color:var(--zt-sig); }
.zt-res p{ font-size:14px; line-height:1.65; margin:10px 0 0; }
.zt-res ul{ margin:14px 0 0; padding:0; list-style:none; display:grid; gap:6px; }
.zt-res li{ font-family:var(--zt-mono); font-size:12px; color:var(--zt-dim); }
.zt-res__cta{
  font-family:var(--zt-mono); font-size:12px; font-weight:500; letter-spacing:.06em;
  color:var(--zt-sig); margin-top:18px;
}

/* -------------------------------------------------- technology briefing ---- */
.zt-tech-sub{
  font-size:17px; line-height:1.6; color:var(--zt-muted);
  max-width:68ch; margin:-22px 0 30px;
}
.zt-tech-tagline{
  font-family:var(--zt-display); font-weight:700; font-size:22px;
  color:var(--zt-brand); margin:16px 0 0;
}
.zt-tech-banner{
  font-family:var(--zt-mono); font-size:13px; font-weight:500; letter-spacing:.12em;
  color:var(--zt-sig); background:rgba(12,115,133,.06);
  border-left:3px solid var(--zt-sig); border-radius:0 5px 5px 0;
  padding:12px 16px; margin:0 0 26px;
}
.zt-tech-card{
  background:var(--zt-panel); border:1px solid var(--zt-line);
  border-radius:10px; padding:24px;
}
.zt-tech-card h3{ font-size:18px; margin:0; }
.zt-tech-card p{ font-size:14px; line-height:1.7; margin:10px 0 0; }
.zt-tech-marker{
  display:inline-block; font-family:var(--zt-mono); font-size:12px; font-weight:600;
  letter-spacing:.08em; color:#fff; background:var(--zt-brand);
  border-radius:4px; padding:2px 8px; margin-bottom:12px;
}
.zt-tech-note{
  font-size:15px; line-height:1.7; color:var(--zt-muted);
  border-top:1px solid var(--zt-line); padding-top:20px; margin:32px 0 0;
  max-width:74ch;
}
.zt-tech-fig{
  margin:0; background:#fff; border:1px solid var(--zt-line);
  border-radius:10px; padding:20px; display:grid; place-items:center;
}
.zt-tech-fig img{ max-width:100%; height:auto; display:block; }
.zt-tech-fig--lead{ padding:28px; }
a.zt-tech-link .zt-plate{ border-left:0; border-right:0; border-top:0; }

/* ----------------------------------------------------------- measure bg ---- */
.zt-measure{
  background-image:linear-gradient(var(--zt-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--zt-line) 1px,transparent 1px);
  background-size:56px 56px;
}
.zt-hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--zt-line); }
.zt-hero__bg{ position:absolute; inset:0; opacity:.7; }
.zt-hero__fade{ position:absolute; inset:0; background:linear-gradient(to bottom,transparent,rgba(255,255,255,.55),var(--zt-ink)); }
.zt-hero__in{ position:relative; padding:72px 0; }
.zt-hero h1{
  font-weight:800; letter-spacing:-.03em; line-height:.98;
  font-size:clamp(2.4rem,6.5vw,4.25rem); margin:18px 0 0;
}
.zt-hero h1 span{ color:var(--zt-brand); }
.zt-lead{ font-size:18px; line-height:1.65; color:var(--zt-muted); margin-top:22px; max-width:52ch; }

/* --------------------------------------------------------- stat strip ------ */
.zt-stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:1024px){ .zt-stats{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.zt-stats > div{ padding:26px 22px; border-left:1px solid var(--zt-line); }
.zt-stats > div:first-child{ border-left:0; }
.zt-stats b{ display:block; font-family:var(--zt-mono); font-size:30px; font-weight:600; color:var(--zt-txt); }
.zt-stats b em{ font-style:normal; font-size:18px; color:var(--zt-muted); margin-left:5px; }
.zt-stats span{ display:block; font-size:14px; color:var(--zt-muted); margin-top:5px; }

/* ------------------------------------------------------ run-down trace ----- */
.zt-trace{ stroke-dasharray:1200; stroke-dashoffset:1200; animation:ztDraw 2s cubic-bezier(.4,.1,.3,1) forwards; }
@keyframes ztDraw{ to{ stroke-dashoffset:0; } }
.zt-readout{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--zt-line); }
.zt-readout > div{ padding:12px 16px; border-left:1px solid var(--zt-line); }
.zt-readout > div:first-child{ border-left:0; }
.zt-readout dt{ font-family:var(--zt-mono); font-size:10px; letter-spacing:.12em; color:var(--zt-dim); margin:0; }
.zt-readout dd{ font-family:var(--zt-mono); font-size:24px; font-weight:600; margin:2px 0 0; color:var(--zt-txt); }
.zt-readout dd em{ font-style:normal; font-size:14px; color:var(--zt-muted); margin-left:4px; }

/* ------------------------------------------------- themed SVG elements -----
   Figures take their colours from the tokens, so a palette change never leaves
   an invisible curve behind. */
.zt-sv-grid{ stroke:var(--zt-line); }
.zt-sv-axis{ fill:var(--zt-dim); }
.zt-sv-muted{ fill:var(--zt-muted); }
.zt-sv-sig{ stroke:var(--zt-sig); }
.zt-sv-sig-f{ fill:var(--zt-sig); }
.zt-sv-ok{ stroke:var(--zt-ok); }
.zt-sv-ok-f{ fill:var(--zt-ok); }
.zt-sv-ng{ stroke:var(--zt-ng); }
.zt-sv-ng-f{ fill:var(--zt-ng); }
.zt-sv-metal{ fill:#2A343D; }
.zt-sv-metal-2{ fill:#48545E; }
.zt-sv-metal-3{ fill:#1B222A; }
.zt-sv-edge{ stroke:#5C6A75; }

/* --------------------------------------------------- numbered sequence ----- */
.zt-step{ border-top:2px solid var(--zt-brand); padding-top:22px; }
.zt-step b{ font-family:var(--zt-mono); font-size:14px; font-weight:600; color:var(--zt-brand); }
.zt-step h3{ font-size:20px; margin:8px 0 0; }
.zt-step p{ margin:12px 0 0; line-height:1.65; }

/* -------------------------------------------------- Flatsome overrides ----- */
body.zt #header,
body.zt #header .header-main,
body.zt #header .header-bottom,
body.zt #header .header-top,
body.zt .header-wrapper.stuck #header-inner{
  background-color:var(--zt-ink) !important;
  border-color:var(--zt-line) !important;
}
body.zt #header .nav > li > a{ color:var(--zt-txt) !important; font-weight:500; }
body.zt #header .nav > li > a:hover{ color:var(--zt-brand) !important; }
body.zt #header .nav-dropdown{
  background:var(--zt-panel); border:1px solid var(--zt-line);
  box-shadow:0 8px 26px rgba(17,26,32,.10);
  /* Flatsome ships min-width:260px, which wraps the longer product labels.
     max-content sizes the panel to its longest line; the max-width is only a
     guard, and text wraps normally if anything ever exceeds it. */
  width:max-content;
  min-width:320px;
  max-width:min(480px, 92vw);
}
/* Flatsome renders any item that has children as a fixed 160px table-cell
   column, which squeezed the transducer group into three-line labels. For a
   list this short one full-width column reads far better. */
body.zt #header .nav-dropdown > li.nav-dropdown-col{ display:block; width:100%; }
body.zt #header .nav-dropdown .nav-column{ width:100%; }
body.zt #header .nav-dropdown li > a{ white-space:normal; }
body.zt #header .nav-dropdown li > a{ color:var(--zt-muted); }
body.zt #header .nav-dropdown .nav-dropdown-col > a{ color:var(--zt-txt); }

/* Flatsome's bold dropdown paints hover with --fs-color-primary and forces white
   text with !important. That colour is white on this site, so the label vanished.
   One near-black hover for every dropdown row, at matching weight. */
body.zt #header .nav-dropdown li > a:hover,
body.zt #header .nav-dropdown li > a:focus-visible,
body.zt #header .nav-dropdown .nav-column li > a:hover{
  background-color:var(--zt-txt) !important;
  color:#fff !important;
}

/* ---- Products mega panel ---- */
body.zt #header .nav > li.zt-mega > .nav-dropdown{
  width:860px;
  min-width:0;
  max-width:min(920px, 94vw);
  padding:18px 22px;
  /* Multi-column, not grid: a grid row track spanning the transducer group
     stretches to its height and pushes the single items apart. Columns let the
     browser balance the two halves and keep every row tight. */
  display:block;
  column-count:2;
  column-gap:34px;
  column-rule:1px solid var(--zt-line);
}
body.zt #header .nav > li.zt-mega > .nav-dropdown > li{
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
}
body.zt #header .nav > li.zt-mega > .nav-dropdown > li.nav-dropdown-col{
  border-right:0; padding-right:0; margin-bottom:4px;
}

.zt-mm-thumb{
  display:inline-flex; width:52px; height:40px; margin-right:12px;
  align-items:center; justify-content:center; vertical-align:middle;
  background:radial-gradient(115% 95% at 50% 10%, #F7F9FA 0%, #E7ECEF 100%);
  border:1px solid var(--zt-line); border-radius:5px; flex:0 0 auto;
}
.zt-mm-thumb img{ max-width:82%; max-height:82%; width:auto; height:auto; object-fit:contain; }
.zt-mm-label{ vertical-align:middle; }
body.zt #header .nav-dropdown li > a:hover .zt-mm-thumb{ border-color:var(--zt-txt); }

body.zt #footer,
body.zt .footer-wrapper,
body.zt .absolute-footer{
  background-color:var(--zt-ink2) !important;
  border-top:1px solid var(--zt-line);
  color:var(--zt-muted);
}
body.zt #footer a{ color:var(--zt-muted); }
body.zt #footer a:hover{ color:var(--zt-sig); }

body.zt .button,
body.zt input[type="submit"],
body.zt .wpforms-submit{
  background-color:var(--zt-brand) !important;
  border-color:var(--zt-brand) !important;
  color:#fff !important;
  border-radius:5px !important;
  font-family:var(--zt-body); font-weight:600;
  text-transform:none; letter-spacing:0;
}
body.zt .button:hover,
body.zt input[type="submit"]:hover,
body.zt .wpforms-submit:hover{
  background-color:var(--zt-brand-hi) !important;
  border-color:var(--zt-brand-hi) !important;
}

body.zt input[type="text"], body.zt input[type="email"], body.zt input[type="url"],
body.zt input[type="tel"], body.zt input[type="number"], body.zt input[type="search"],
body.zt textarea, body.zt select{
  background:var(--zt-panel) !important;
  border:1px solid var(--zt-line-hi) !important;
  color:var(--zt-txt) !important;
  box-shadow:none !important;
  border-radius:5px;
}
body.zt input:focus, body.zt textarea:focus, body.zt select:focus{
  border-color:var(--zt-sig) !important;
}
body.zt ::placeholder{ color:var(--zt-dim); }

body.zt .woocommerce-breadcrumb,
body.zt .breadcrumbs{ font-family:var(--zt-mono); font-size:12px; color:var(--zt-dim); }
body.zt .product-title, body.zt .woocommerce-loop-product__title{ color:var(--zt-txt); }
body.zt .price, body.zt .amount{ color:var(--zt-txt); font-family:var(--zt-mono); }

body.zt a:focus-visible, body.zt button:focus-visible,
body.zt input:focus-visible, body.zt select:focus-visible,
body.zt textarea:focus-visible, body.zt summary:focus-visible{
  outline:2px solid var(--zt-sig); outline-offset:2px; border-radius:2px;
}

/* --------------------------------------------------------------- misc ------ */
.zt-figure{ background:var(--zt-ink2); border:1px solid var(--zt-line); border-radius:10px; padding:24px; display:grid; place-items:center; }
.zt-figure img{ width:100%; max-width:900px; height:auto; }
.zt-figure--dark{ background:#171A19; border-color:#2A2E2C; }
.zt-note{ display:flex; gap:12px; align-items:flex-start; border:1px solid rgba(138,90,0,.28); background:rgba(138,90,0,.05); border-radius:6px; padding:16px; }
.zt-note p{ font-size:14px; line-height:1.65; margin:0; }
.zt-rfq{ position:relative; overflow:hidden; border-top:1px solid var(--zt-line); text-align:center; }
.zt-rfq h2{ font-weight:800; letter-spacing:-.02em; font-size:clamp(1.9rem,4.5vw,3rem); }
.zt-rfq p{ font-size:18px; line-height:1.65; max-width:56ch; margin:16px auto 0; }
.zt-rfq .zt-btns{ justify-content:center; margin-top:32px; }

@media (prefers-reduced-motion:reduce){
  .zt-trace{ animation:none; stroke-dashoffset:0; }
  body.zt *{ scroll-behavior:auto !important; }
}

/* ==========================================================================
   Company page
   ========================================================================== */

/* Hero figures. Tabular numerals so the four columns line up on their digits. */
.zt-stats{ display:flex; flex-wrap:wrap; gap:26px 46px; margin-top:34px;
  padding-top:26px; border-top:1px solid var(--zt-line); }
.zt-stats div{ display:flex; flex-direction:column; gap:5px; }
.zt-stats b{ font-family:var(--zt-mono); font-weight:700; font-size:30px;
  line-height:1; letter-spacing:-.02em; color:var(--zt-txt);
  font-variant-numeric:tabular-nums; }
.zt-stats s{ text-decoration:none; font-family:var(--zt-mono); font-size:10px;
  letter-spacing:.14em; color:var(--zt-dim); }

/* Group divisions. The current one carries the accent edge; the others stay quiet. */
.zt-div{ border:1px solid var(--zt-line); background:var(--zt-panel);
  padding:24px 22px; display:flex; flex-direction:column; gap:8px; }
.zt-div.is-current{ border-color:var(--zt-line-hi);
  box-shadow:inset 3px 0 0 var(--zt-brand); }
.zt-div h3{ font-size:19px; font-weight:700; letter-spacing:-.01em; margin:0; }
.zt-div__role{ font-family:var(--zt-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--zt-sig); }
.zt-div p{ font-size:15px; line-height:1.6; color:var(--zt-muted); margin:0; }

/* Family code list inside a group card. The grid lives on the list, not on each
   row, so every code shares one track and the descriptions line up. */
.zt-codes{ list-style:none; margin:14px 0 0; padding:0;
  display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr);
  column-gap:16px; align-items:baseline; }
.zt-codes li{ display:contents; }
.zt-codes b,
.zt-codes span{ padding:9px 0; border-top:1px solid var(--zt-line); }
.zt-codes li:first-child b,
.zt-codes li:first-child span{ border-top:0; padding-top:4px; }
.zt-codes b{ font-family:var(--zt-mono); font-size:12px; font-weight:700;
  letter-spacing:.02em; color:var(--zt-txt); white-space:nowrap; }
.zt-codes span{ font-size:14px; line-height:1.45; color:var(--zt-muted); }
/* Narrow cards stack the pair, so drop back to one column. */
@media (max-width:560px){
  .zt-codes{ grid-template-columns:minmax(0,1fr); }
  .zt-codes b{ white-space:normal; padding-bottom:0; }
  .zt-codes span{ border-top:0; padding-top:2px; }
  .zt-codes li:first-child span{ padding-top:2px; }
}

/* Numbered phase. The number is real sequence information, not decoration. */
.zt-phase{ border:1px solid var(--zt-line); background:var(--zt-panel);
  padding:24px 22px; display:flex; flex-direction:column; gap:8px; }
.zt-phase__n{ font-family:var(--zt-mono); font-size:12px; font-weight:700;
  line-height:1; color:#fff; background:var(--zt-txt);
  width:26px; height:26px; display:grid; place-items:center;
  border-radius:50%; margin-bottom:4px; }
.zt-phase h3{ font-size:18px; font-weight:700; letter-spacing:-.01em; margin:0; }
.zt-phase p{ font-size:15px; line-height:1.6; color:var(--zt-muted); margin:0; }

/* Sector list. */
.zt-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.zt-tag{ font-family:var(--zt-mono); font-size:12px; letter-spacing:.06em;
  color:var(--zt-muted); border:1px solid var(--zt-line);
  background:var(--zt-panel); padding:8px 14px; }

/* The company page puts two definition lists side by side; keep them aligned. */
.zt-sec .zt-dl{ margin:0; align-content:start; }

/* ==========================================================================
   Support section
   ========================================================================== */

/* Sibling strip. None of these pages linked to each other before. */
.zt-subnav{ display:flex; flex-wrap:wrap; gap:8px; margin-top:28px;
  padding-top:22px; border-top:1px solid var(--zt-line); }
.zt-subnav a{ font-family:var(--zt-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--zt-muted); text-decoration:none;
  border:1px solid var(--zt-line); background:var(--zt-panel);
  padding:8px 13px; transition:color .12s, border-color .12s, background-color .12s; }
.zt-subnav a:hover,
.zt-subnav a:focus-visible{ color:var(--zt-txt); border-color:var(--zt-line-hi); }
body.zt .zt-subnav a[aria-current="page"]{ color:#fff; background:var(--zt-txt);
  border-color:var(--zt-txt); }

/* Download card. The button sits on the baseline of every card in the row. */
.zt-dlcard{ border:1px solid var(--zt-line); background:var(--zt-panel);
  padding:24px 22px; display:flex; flex-direction:column; gap:16px; }
.zt-dlcard__plat{ font-family:var(--zt-mono); font-size:10px; letter-spacing:.14em;
  color:#fff; background:var(--zt-sig); padding:4px 9px; display:inline-block; }
.zt-dlcard__top h3{ font-size:19px; font-weight:700; letter-spacing:-.01em;
  margin:10px 0 0; }
.zt-dlcard__role{ font-size:14px; color:var(--zt-muted); margin:4px 0 0; }
.zt-dlcard__spec{ margin:0; display:flex; flex-direction:column; }
.zt-dlcard__spec > div{ display:grid;
  grid-template-columns:minmax(0,84px) minmax(0,1fr); gap:4px 14px;
  padding:9px 0; border-top:1px solid var(--zt-line); }
.zt-dlcard__spec dt{ font-family:var(--zt-mono); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--zt-dim); margin:0; }
.zt-dlcard__spec dd{ font-size:14px; line-height:1.5; color:var(--zt-txt); margin:0; }
.zt-dlcard__req{ font-size:13px; line-height:1.55; color:var(--zt-warn);
  border-left:3px solid var(--zt-warn); padding:2px 0 2px 12px; margin:0; }
.zt-dlcard__req b{ color:var(--zt-warn); }
.zt-dlcard .zt-btn{ margin-top:auto; align-self:flex-start; }
@media (max-width:560px){
  .zt-dlcard__spec > div{ grid-template-columns:minmax(0,1fr); }
}

/* Plain capability panel - deliberately not a card, so it does not compete
   with the download cards above it. */
.zt-feat{ border-top:2px solid var(--zt-line-hi); padding:18px 0 0; }
.zt-feat h3{ font-size:17px; font-weight:700; letter-spacing:-.01em; margin:0; }
.zt-feat p{ font-size:15px; line-height:1.6; color:var(--zt-muted); margin:8px 0 0; }
.zt-feat a{ font-family:var(--zt-mono); font-size:12px; letter-spacing:.04em; }

/* Catalog card. */
.zt-cat{ border:1px solid var(--zt-line); background:var(--zt-panel);
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:border-color .12s, transform .12s; }
.zt-cat:hover,
.zt-cat:focus-visible{ border-color:var(--zt-line-hi); transform:translateY(-2px); }
.zt-cat__body{ padding:24px 22px 18px; display:flex; flex-direction:column;
  gap:8px; flex:1; }
.zt-cat__code{ font-family:var(--zt-mono); font-size:10px; letter-spacing:.14em;
  color:var(--zt-sig); }
.zt-cat h3{ font-size:19px; font-weight:700; letter-spacing:-.015em; margin:0; }
.zt-cat--lead h3{ font-size:22px; }
.zt-cat p{ font-size:15px; line-height:1.6; color:var(--zt-muted); margin:0; }
.zt-cat__foot{ display:flex; flex-wrap:wrap; gap:8px 16px;
  justify-content:space-between; align-items:center;
  padding:14px 22px; border-top:1px solid var(--zt-line);
  background:var(--zt-ink2); }
.zt-cat__foot .zt-mono{ font-size:11px; letter-spacing:.06em; color:var(--zt-dim); }
.zt-cat__cta{ font-family:var(--zt-mono); font-size:11px; letter-spacing:.08em;
  color:var(--zt-brand); }
body.zt a.zt-cat:hover .zt-cat__cta{ color:var(--zt-brand-hi); }

/* Video: static thumbnail, swapped for the player only on click. */
.zt-vid{ display:flex; flex-direction:column; }
.zt-vid__thumb{ position:relative; display:block; width:100%; padding:0;
  border:1px solid var(--zt-line); background:var(--zt-ink2); cursor:pointer;
  aspect-ratio:16/9; overflow:hidden; }
.zt-vid__thumb img{ width:100%; height:100%; object-fit:cover; display:block;
  /* hqdefault is 4:3 with letterbox bars; crop them off. */
  transform:scale(1.35); transition:transform .2s; }
.zt-vid__thumb:hover img,
.zt-vid__thumb:focus-visible img{ transform:scale(1.4); }
.zt-vid__play{ position:absolute; inset:0; margin:auto; width:56px; height:56px;
  border-radius:50%; background:var(--zt-brand);
  box-shadow:0 3px 14px rgba(18,28,38,.35); }
.zt-vid__play::after{ content:""; position:absolute; inset:0; margin:auto;
  width:0; height:0; border-style:solid; border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff; transform:translateX(2px); }
.zt-vid__thumb:hover .zt-vid__play{ background:var(--zt-brand-hi); }
.zt-vid__frame{ width:100%; aspect-ratio:16/9; border:1px solid var(--zt-line);
  display:block; }
.zt-vid__meta{ padding:12px 2px 0; }
.zt-vid__plat{ font-family:var(--zt-mono); font-size:10px; letter-spacing:.12em;
  color:var(--zt-sig); }
.zt-vid h3{ font-size:16px; font-weight:600; line-height:1.4; letter-spacing:-.01em;
  margin:5px 0 0; }
@media (prefers-reduced-motion:reduce){
  .zt-vid__thumb img{ transition:none; }
  .zt-cat{ transition:border-color .12s; }
  .zt-cat:hover{ transform:none; }
}

/* --------------------------------------------------------------------------
   Pages that keep their own content. These selectors only align existing
   components with the palette - no layout is taken over, so the FAQ filters,
   the calculators and the form keep working exactly as before.
   -------------------------------------------------------------------------- */

.zt-toolbody > .row-main,
.zt-toolbody > .row{ max-width:none; padding:0; margin:0; }
.zt-toolbody > .row > .col,
.zt-toolbody > .row-main > .col{ padding:0; }
/* Only the theme's own title bar remains; a content heading that repeats the
   page title is now removed server-side in inc/seo.php rather than hidden here,
   so crawlers do not see text that readers cannot. */
.zt-toolbody .entry-header,
.zt-toolbody .entry-title{ display:none; }

/* FAQ */
body.zt .tcf-header{ border-bottom:1px solid var(--zt-line); padding-bottom:20px; }
body.zt .tcf-title{ font-weight:800; letter-spacing:-.02em; }
body.zt .tcf-sub{ color:var(--zt-muted); }
body.zt .tcf-count-badge{ font-family:var(--zt-mono); font-size:11px;
  letter-spacing:.1em; color:#fff; background:var(--zt-sig); padding:4px 10px; }
body.zt .tcf-filter-label{ font-family:var(--zt-mono); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--zt-dim); }
body.zt .tcf-fbtn,
body.zt .tcf-tbtn{ font-family:var(--zt-mono); font-size:11px; letter-spacing:.06em;
  border:1px solid var(--zt-line); background:var(--zt-panel);
  color:var(--zt-muted); border-radius:0; }
body.zt .tcf-fbtn:hover,
body.zt .tcf-tbtn:hover{ border-color:var(--zt-line-hi); color:var(--zt-txt); }
body.zt .tcf-fbtn.active,
body.zt .tcf-tbtn.active,
body.zt .tcf-fbtn[aria-pressed="true"],
body.zt .tcf-tbtn[aria-pressed="true"]{ background:var(--zt-txt); color:#fff;
  border-color:var(--zt-txt); }
body.zt .tcf-search-row input{ border:1px solid var(--zt-line); border-radius:0;
  background:var(--zt-panel); color:var(--zt-txt); }

/* Unit converter */
body.zt .zptk-uc-wrap,
body.zt .zptk-uc-panel,
body.zt .zptk-calc-group{ border-color:var(--zt-line); border-radius:0;
  background:var(--zt-panel); }
body.zt .zptk-uc-tab{ font-family:var(--zt-mono); font-size:11px;
  letter-spacing:.07em; border-radius:0; border:1px solid var(--zt-line);
  background:var(--zt-panel); color:var(--zt-muted); }
body.zt .zptk-uc-tab:hover{ border-color:var(--zt-line-hi); color:var(--zt-txt); }
body.zt .zptk-uc-tab.active,
body.zt .zptk-uc-tab[aria-selected="true"]{ background:var(--zt-txt); color:#fff;
  border-color:var(--zt-txt); }
body.zt .zptk-uc-wrap input,
body.zt .zptk-uc-wrap select,
body.zt .zptk-calc-field input,
body.zt .zptk-calc-field select{ border:1px solid var(--zt-line); border-radius:0;
  background:var(--zt-panel); color:var(--zt-txt);
  font-variant-numeric:tabular-nums; }
body.zt .zptk-calc-group-label,
body.zt .zptk-uc-unit{ font-family:var(--zt-mono); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--zt-dim); }
body.zt .zptk-uc-value,
body.zt .zptk-calc-results{ font-family:var(--zt-mono);
  font-variant-numeric:tabular-nums; color:var(--zt-txt); }
body.zt .zptk-uc-results-wrap,
body.zt .zptk-calc-results{ background:var(--zt-ink2);
  border:1px solid var(--zt-line); border-radius:0; }
body.zt .zptk-calc-desc{ color:var(--zt-muted); }

/* ASTM torque tables. Wide data, so each one scrolls inside its own box. */
body.zt .zt-toolbody .table-wrapper{ overflow-x:auto;
  border:1px solid var(--zt-line); background:var(--zt-panel); }
body.zt .zt-toolbody .pb-table-title{ font-family:var(--zt-mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--zt-sig);
  margin:34px 0 10px; }
body.zt .zt-toolbody .highlight-table{ border-collapse:collapse; width:100%;
  min-width:660px; font-variant-numeric:tabular-nums; }
body.zt .zt-toolbody .highlight-table th,
body.zt .zt-toolbody .highlight-table td{ border:0;
  border-bottom:1px solid var(--zt-line); padding:10px 14px;
  font-size:13px; text-align:right; }
body.zt .zt-toolbody .highlight-table thead th{ position:sticky; top:0; z-index:1;
  background:var(--zt-ink2); font-family:var(--zt-mono); font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--zt-dim);
  border-bottom:1px solid var(--zt-line-hi); text-align:right; }
body.zt .zt-toolbody .highlight-table th:first-child,
body.zt .zt-toolbody .highlight-table td:first-child{ text-align:left;
  font-family:var(--zt-mono); color:var(--zt-sig); }
body.zt .zt-toolbody .highlight-table tbody tr:hover{ background:var(--zt-ink2); }

/* WPForms job survey */
body.zt .zt-toolbody .wpforms-container{ max-width:none; }
body.zt .zt-toolbody .wpforms-field-label{ font-family:var(--zt-mono);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--zt-dim); font-weight:500; }
body.zt .zt-toolbody .wpforms-field-sublabel{ color:var(--zt-dim); }
body.zt .zt-toolbody input[type="text"],
body.zt .zt-toolbody input[type="email"],
body.zt .zt-toolbody input[type="tel"],
body.zt .zt-toolbody input[type="url"],
body.zt .zt-toolbody input[type="number"],
body.zt .zt-toolbody textarea,
body.zt .zt-toolbody select{ border:1px solid var(--zt-line); border-radius:0;
  background:var(--zt-panel); color:var(--zt-txt); box-shadow:none; }
body.zt .zt-toolbody input:focus,
body.zt .zt-toolbody textarea:focus,
body.zt .zt-toolbody select:focus{ border-color:var(--zt-sig); outline:none;
  box-shadow:0 0 0 2px rgba(12,115,133,.16); }
body.zt .zt-toolbody .wpforms-submit{ background:var(--zt-brand);
  border:1px solid var(--zt-brand); color:#fff; border-radius:0;
  font-family:var(--zt-mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; padding:14px 28px; }
body.zt .zt-toolbody .wpforms-submit:hover{ background:var(--zt-brand-hi);
  border-color:var(--zt-brand-hi); }
body.zt .zt-toolbody .wpforms-required-label{ color:var(--zt-brand); }

/* dFlip flipbook, embedded from the page's own content. The plugin needs an
   explicit height or the book collapses; it is also wrapped in the page's
   centred paragraph markup, which the design system does not want. */
.zt-flip{ border:1px solid var(--zt-line); background:var(--zt-ink2);
  padding:14px; }
.zt-flip .entry-title{ display:none; }
.zt-flip p:empty{ display:none; }
.zt-flip p{ margin:0; text-align:left !important; }
/* Give the book room but let the plugin decide its own layout - forcing height
   with !important fights dFlip's own sizing. */
.zt-flip ._df_book{ width:100%; min-height:min(74vh,700px); margin:0 auto; }
@media (max-width:768px){
  .zt-flip{ padding:8px; }
  .zt-flip ._df_book{ min-height:min(62vh,500px); }
}

/* Figure caption, carried over from the deck's own image label. */
.zt-tech-fig figcaption{ font-family:var(--zt-mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--zt-dim);
  padding:10px 2px 0; text-align:left; }

/* ------------------------------------------------------------- contact ---- */
/* A 5:7 split: the guidance column stays narrow enough to read, the form gets
   the room it needs for two-column name/email rows. Stacks below 900px. */
.zt-g3-1{ grid-template-columns:minmax(0,1fr); }
@media (min-width:900px){
  .zt-g3-1{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
}

/* Contact details as label/value pairs rather than six loose paragraphs, so the
   address, the numbers and the hours can be scanned instead of read. */
.zt-contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.zt-contact-list li{ display:grid; gap:3px; padding-bottom:14px; border-bottom:1px solid var(--zt-line); }
.zt-contact-list li:last-child{ border-bottom:0; padding-bottom:0; }
.zt-contact-list b{ font-family:var(--zt-mono); font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--zt-dim); }
.zt-contact-list span{ font-size:15px; line-height:1.6; color:var(--zt-muted); }
.zt-contact-list a{ color:var(--zt-txt); text-decoration:underline; text-underline-offset:3px; }
.zt-contact-list a:hover{ color:var(--zt-brand); }
.zt-contact-list--wide span{ max-width:48ch; }

.zt-contact-aside .zt-note{ margin-top:18px; }
.zt-contact-form{ border:1px solid var(--zt-line); background:var(--zt-panel);
  border-radius:8px; padding:clamp(18px,3vw,32px); }

/* The Flatsome map ships its own bottom margin; the frame supplies the spacing. */
.zt-contact-map{ border:1px solid var(--zt-line); border-radius:8px; overflow:hidden; }
.zt-contact-map .google-map{ margin-bottom:0; }
.zt-contact-map h3{ font-size:14px; line-height:1.5; margin:0; }