/* ==========================================================================
   GTM — inner pages
   --------------------------------------------------------------------------
   Services & Support, About, Products, News, Contact and the detail pages.
   Loads AFTER gtm-theme.css and uses the same tokens, so the inner pages and
   the homepage read as one site. Nothing here overrides the original theme
   except where a page explicitly opts in with a gtm- class.

   Contrast note: #F2A900 on white is ~1.9:1, far under AA, so yellow is only
   ever a rule, a border, or a background carrying navy text — never text on
   a light surface.
   ========================================================================== */

/* ---- shared ------------------------------------------------------------ */
.gtm-section{padding-block:clamp(56px,7.5vw,104px)}
.gtm-section.tight{padding-block:clamp(40px,5vw,68px)}
.gtm-section.panel{background:var(--gtm-panel)}
.gtm-section.navy{background:var(--gtm-navy)}

.gtm-lede{font-size:clamp(17px,1.5vw,19.5px);line-height:1.62;color:var(--gtm-muted);max-width:62ch}
.gtm-section.navy .gtm-lede{color:#C3D2E2}

/* focus visible everywhere, never removed */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--gtm-yellow);
  outline-offset:2px;
  border-radius:4px;
}

/* ---- 1. page hero ------------------------------------------------------ */
/* Inner pages get a short navy band, not a copy of the homepage slider. */
.gtm-phero{position:relative;background:var(--gtm-navy);isolation:isolate;overflow:hidden;
  padding-block:clamp(52px,7vw,96px)}
.gtm-phero .auto-container{position:relative;z-index:2}
.gtm-phero-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 20px;padding:0;list-style:none;
  font-family:var(--fb);font-size:12.5px;letter-spacing:.03em}
.gtm-phero-crumb a{color:#9FB2C6}
.gtm-phero-crumb a:hover{color:var(--gtm-yellow)}
.gtm-phero-crumb li{display:flex;align-items:center;gap:8px;color:#D7E0EA}
.gtm-phero-crumb li+li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--gtm-navy-muted)}
.gtm-phero .gtm-rule{margin-bottom:18px}
.gtm-phero h1{font-family:var(--fs);font-weight:800;color:#fff;margin:0 0 16px;
  font-size:clamp(30px,4.6vw,56px);line-height:1.08;letter-spacing:-.022em;max-width:19ch}
.gtm-phero p{color:#C3D2E2;max-width:58ch;margin:0;font-size:clamp(15.5px,1.35vw,18px);line-height:1.62}
.gtm-phero .gtm-phero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* a photograph behind the band, held back so the words stay readable */
.gtm-phero-img{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
.gtm-phero-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(16,35,63,.95) 0%,rgba(16,35,63,.82) 52%,rgba(16,35,63,.58) 100%)}

/* ---- 2. the claim band ------------------------------------------------- */
/* One sentence that does the positioning work, on panel grey. */
.gtm-claim{display:grid;gap:18px 46px;align-items:center}
@media(min-width:900px){.gtm-claim{grid-template-columns:auto 1fr}}
.gtm-claim-mark{display:grid;place-items:center;width:62px;height:62px;border-radius:14px;
  background:var(--gtm-yellow);color:var(--gtm-navy);flex:none}
.gtm-claim-mark svg{width:30px;height:30px}
.gtm-claim p{margin:0;font-family:var(--fs);font-weight:600;color:var(--gtm-navy);
  font-size:clamp(18px,2.1vw,26px);line-height:1.42;letter-spacing:-.01em;max-width:46ch}
.gtm-claim p b{color:var(--gtm-navy);font-weight:800;box-shadow:inset 0 -.42em 0 rgba(242,169,0,.38)}

/* ---- 3. capability cards ---------------------------------------------- */
.gtm-caps{display:grid;gap:clamp(14px,1.8vw,22px);grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.gtm-cap{position:relative;background:#fff;border:1px solid var(--gtm-border);border-radius:11px;
  padding:26px 24px 28px;display:flex;flex-direction:column;gap:12px;
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .35s}
.gtm-cap:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(16,35,63,.13);border-color:var(--gtm-yellow)}
.gtm-cap-ico{display:grid;place-items:center;width:50px;height:50px;border-radius:12px;
  background:var(--gtm-panel);color:var(--gtm-navy);transition:background .3s,color .3s}
.gtm-cap:hover .gtm-cap-ico{background:var(--gtm-yellow);color:var(--gtm-navy)}
.gtm-cap-ico svg{width:26px;height:26px}
.gtm-cap h3{font-family:var(--fs);font-weight:700;font-size:17.5px;color:var(--gtm-navy);margin:0;line-height:1.3}
.gtm-cap p{margin:0;font-size:14.6px;line-height:1.62;color:var(--gtm-muted)}
.gtm-cap .gtm-cap-note{font-family:var(--fb);font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gtm-label);border-top:1px dashed var(--gtm-border);padding-top:11px;margin-top:auto}

/* on navy */
.gtm-section.navy .gtm-cap{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.14)}
.gtm-section.navy .gtm-cap h3{color:#fff}
.gtm-section.navy .gtm-cap p{color:#B9C7D7}
.gtm-section.navy .gtm-cap-ico{background:rgba(255,255,255,.09);color:var(--gtm-yellow)}
.gtm-section.navy .gtm-cap .gtm-cap-note{color:var(--gtm-navy-muted);border-top-color:rgba(255,255,255,.14)}

/* ---- 4. the process rail ---------------------------------------------- */
/* How a job actually runs, left to right, numbered. */
.gtm-rail{display:grid;gap:clamp(14px,1.8vw,20px);grid-template-columns:repeat(auto-fit,minmax(210px,1fr));counter-reset:step}
.gtm-rail-item{position:relative;padding-top:26px;counter-increment:step}
.gtm-rail-item::before{content:"";position:absolute;left:0;right:0;top:9px;height:3px;background:var(--gtm-border);border-radius:2px}
.gtm-rail-item:first-child::before{left:9px}
.gtm-rail-item:last-child::before{right:calc(100% - 12px)}
.gtm-rail-item::after{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0;
  width:21px;height:21px;border-radius:50%;background:var(--gtm-yellow);color:var(--gtm-navy);
  display:grid;place-items:center;font-family:var(--fb);font-weight:700;font-size:9.5px}
.gtm-rail-item h4{font-family:var(--fs);font-weight:700;font-size:16px;color:var(--gtm-navy);margin:0 0 7px}
.gtm-rail-item p{margin:0;font-size:14px;line-height:1.6;color:var(--gtm-muted)}
@media(max-width:700px){
  .gtm-rail{grid-template-columns:1fr;gap:20px}
  .gtm-rail-item{padding-top:0;padding-left:36px}
  .gtm-rail-item::before{left:10px;right:auto;top:0;bottom:-20px;width:3px;height:auto}
  .gtm-rail-item:last-child::before{display:none}
  .gtm-rail-item:first-child::before{left:10px;top:10px}
}

/* ---- 5. before / after ------------------------------------------------- */
.gtm-ba{position:relative;border:1px solid var(--gtm-border);border-radius:12px;overflow:hidden;
  background:var(--gtm-navy);aspect-ratio:16/8;max-height:560px}
.gtm-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.gtm-ba-after,.gtm-ba-before{position:absolute;inset:0;overflow:hidden}
.gtm-ba-before{width:50%;border-right:3px solid #fff}
.gtm-ba-tag{position:absolute;top:14px;z-index:5;font-family:var(--fb);font-weight:600;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.gtm-ba-tag.is-before{left:14px;background:#fff;color:var(--gtm-navy)}
.gtm-ba-tag.is-after{right:14px;background:var(--gtm-yellow);color:var(--gtm-navy)}
.gtm-ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:10;margin:0}
.gtm-ba-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9;pointer-events:none;
  width:48px;height:48px;border-radius:50%;background:#fff;border:3px solid var(--gtm-yellow);
  display:grid;place-items:center;color:var(--gtm-navy);box-shadow:0 8px 22px rgba(16,35,63,.4)}
.gtm-ba-handle svg{width:22px;height:22px}
.gtm-ba-range:focus-visible + .gtm-ba-handle{outline:3px solid var(--gtm-yellow);outline-offset:3px}


/* ---- 6. work gallery --------------------------------------------------- */
.gtm-works{display:grid;gap:clamp(14px,1.8vw,22px);grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.gtm-work{border:1px solid var(--gtm-border);border-radius:11px;overflow:hidden;background:#fff;
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .35s}
.gtm-work:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(16,35,63,.13);border-color:var(--gtm-yellow)}
.gtm-work-img{position:relative;aspect-ratio:4/3;background:var(--gtm-panel);overflow:hidden}
.gtm-work-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.gtm-work:hover .gtm-work-img img{transform:scale(1.045)}
.gtm-work-img .gtm-work-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--gtm-navy-muted)}
.gtm-work-img .gtm-work-empty svg{width:38px;height:38px}
.gtm-work-body{padding:15px 18px 18px;display:flex;align-items:baseline;gap:10px}
.gtm-work-body .n{font-family:var(--fb);font-weight:700;font-size:11.5px;color:var(--gtm-yellow);
  background:var(--gtm-navy);border-radius:4px;padding:2px 7px;flex:none}
.gtm-work-body h4{font-family:var(--fs);font-weight:700;font-size:15.5px;color:var(--gtm-navy);margin:0;line-height:1.35}

/* ---- 7. the two legs (About) ------------------------------------------ */
.gtm-legs{display:grid;gap:clamp(18px,2.4vw,28px)}
@media(min-width:920px){.gtm-legs{grid-template-columns:1fr 1fr}}
.gtm-leg{background:#fff;border:1px solid var(--gtm-border);border-radius:13px;padding:clamp(24px,2.6vw,34px);
  display:flex;flex-direction:column;gap:14px;border-top:4px solid var(--gtm-yellow)}
.gtm-leg .gtm-leg-no{font-family:var(--fb);font-weight:700;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gtm-label)}
.gtm-leg h3{font-family:var(--fs);font-weight:800;font-size:clamp(20px,2.2vw,27px);color:var(--gtm-navy);margin:0;line-height:1.2}
.gtm-leg p{margin:0;color:var(--gtm-muted);font-size:15.4px;line-height:1.65}
.gtm-leg ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.gtm-leg li{display:flex;gap:11px;align-items:flex-start;font-size:14.8px;color:var(--gtm-ink);line-height:1.55}
.gtm-leg li svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--gtm-yellow)}

/* the partner strip */
.gtm-partner{display:grid;gap:22px 42px;align-items:center;background:#fff;border:1px solid var(--gtm-border);
  border-radius:13px;padding:clamp(22px,2.6vw,34px)}
@media(min-width:860px){.gtm-partner{grid-template-columns:220px 1fr}}
.gtm-partner-logo{display:grid;place-items:center;min-height:96px;background:var(--gtm-panel);border-radius:10px;padding:18px}
.gtm-partner-logo img{max-width:100%;max-height:60px;width:auto;height:auto;object-fit:contain}
.gtm-partner h3{font-family:var(--fs);font-weight:800;font-size:clamp(19px,2vw,25px);color:var(--gtm-navy);margin:0 0 10px}
.gtm-partner p{margin:0;color:var(--gtm-muted);font-size:15.2px;line-height:1.65}
.gtm-chiplist{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding:0;list-style:none}
.gtm-chiplist li{font-family:var(--fb);font-weight:600;font-size:12px;letter-spacing:.04em;color:var(--gtm-navy);
  background:var(--gtm-panel);border:1px solid var(--gtm-border);border-radius:999px;padding:6px 12px}

/* ---- 8. figures -------------------------------------------------------- */
.gtm-figures{display:grid;gap:clamp(14px,1.8vw,22px);grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.gtm-figure{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:22px}
.gtm-figure b{display:block;font-family:var(--fs);font-weight:800;font-size:clamp(28px,3.4vw,42px);
  color:#fff;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gtm-figure span{display:block;margin-top:9px;font-family:var(--fb);font-size:13px;color:#9FB2C6;line-height:1.5}
.gtm-figure em{font-style:normal;color:var(--gtm-yellow)}

/* ---- 9. product index -------------------------------------------------- */
.gtm-filterbar{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(24px,3vw,36px)}
.gtm-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 17px;border-radius:999px;
  border:1px solid var(--gtm-border);background:#fff;color:var(--gtm-navy);
  font-family:var(--fb);font-weight:600;font-size:13.6px;cursor:pointer;
  transition:background .25s,border-color .25s,color .25s,transform .25s}
.gtm-chip:hover{border-color:var(--gtm-yellow);transform:translateY(-2px);color:var(--gtm-navy)}
.gtm-chip[aria-pressed="true"],.gtm-chip.is-on{background:var(--gtm-navy);border-color:var(--gtm-navy);color:#fff}
.gtm-chip .c{font-size:11.5px;opacity:.7;font-variant-numeric:tabular-nums}
.gtm-chip[aria-pressed="true"] .c{color:var(--gtm-yellow);opacity:1}

.gtm-brandrow{display:flex;align-items:center;gap:14px;margin:clamp(34px,4vw,54px) 0 20px}
.gtm-brandrow:first-of-type{margin-top:0}
.gtm-brandrow img{max-height:34px;width:auto}
.gtm-brandrow h2{font-family:var(--fs);font-weight:800;font-size:clamp(19px,2.1vw,26px);color:var(--gtm-navy);margin:0}
.gtm-brandrow .line{flex:1;height:1px;background:var(--gtm-border)}
.gtm-brandrow .n{font-family:var(--fb);font-size:12px;font-weight:600;color:var(--gtm-label);
  letter-spacing:.1em;text-transform:uppercase;font-variant-numeric:tabular-nums}

.gtm-empty{text-align:center;padding:clamp(40px,6vw,76px) 20px;border:1px dashed var(--gtm-border);border-radius:12px;background:#fff}
.gtm-empty svg{width:42px;height:42px;color:var(--gtm-navy-muted);margin-bottom:14px}
.gtm-empty h3{font-family:var(--fs);font-weight:700;font-size:19px;color:var(--gtm-navy);margin:0 0 8px}
.gtm-empty p{margin:0 auto 20px;color:var(--gtm-muted);max-width:46ch;font-size:15px}

/* ---- 10. product detail ------------------------------------------------ */
.gtm-pd{display:grid;gap:clamp(24px,3.4vw,52px);align-items:start}
@media(min-width:940px){.gtm-pd{grid-template-columns:1.05fr .95fr}}
.gtm-pd-media{position:relative;background:var(--gtm-panel);border:1px solid var(--gtm-border);
  border-radius:13px;overflow:hidden;aspect-ratio:4/3;display:grid;place-items:center;padding:clamp(16px,2vw,28px)}
.gtm-pd-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.gtm-pd h1{font-family:var(--fs);font-weight:800;font-size:clamp(26px,3.3vw,40px);color:var(--gtm-navy);
  margin:14px 0 16px;line-height:1.12;letter-spacing:-.02em}
.gtm-pd-body{font-size:15.6px;line-height:1.72;color:var(--gtm-muted)}
.gtm-pd-body p{margin:0 0 15px}
.gtm-pd-body ul{padding-left:20px;margin:0 0 15px}
.gtm-pd-body li{margin-bottom:7px}
.gtm-pd-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.gtm-btn-ghost{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 22px;border-radius:999px;
  border:2px solid var(--gtm-navy);background:transparent;color:var(--gtm-navy);
  font-family:var(--fb);font-weight:600;font-size:15px;transition:background .25s,color .25s,transform .25s}
.gtm-btn-ghost:hover{background:var(--gtm-navy);color:#fff;transform:translateY(-2px)}
.gtm-btn-ghost svg{width:17px;height:17px}

.gtm-spec{width:100%;border-collapse:collapse;margin-top:8px;font-size:14.8px}
.gtm-spec th,.gtm-spec td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--gtm-border);vertical-align:top}
.gtm-spec th{font-family:var(--fb);font-weight:600;color:var(--gtm-navy);width:40%;background:var(--gtm-panel)}
.gtm-spec td{color:var(--gtm-muted);font-variant-numeric:tabular-nums}
html[dir="rtl"] .gtm-spec th,html[dir="rtl"] .gtm-spec td{text-align:right}

/* ---- 11. news ---------------------------------------------------------- */
/* auto-FILL, not auto-fit (2026-10-18). auto-fit collapses the empty tracks
   and lets the surviving ones stretch, so a single article took the whole
   container width and rendered as one enormous card — and two articles came
   out at half the page each. auto-fill keeps the empty tracks in place, so
   one post is exactly the size a post is in a full row. The homepage never
   showed this because its grid carries count-1 / count-2 classes that cap the
   track; this grid gets no count class, so the fix has to be in the grid
   itself. */
.gtm-posts{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(auto-fill,minmax(276px,1fr))}
.gtm-post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--gtm-border);
  border-radius:11px;overflow:hidden;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .35s}
.gtm-post:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(16,35,63,.13);border-color:var(--gtm-yellow)}
.gtm-post-img{aspect-ratio:16/10;background:var(--gtm-panel);overflow:hidden}
.gtm-post-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.gtm-post:hover .gtm-post-img img{transform:scale(1.045)}
.gtm-post-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.gtm-post time{font-family:var(--fb);font-weight:600;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gtm-label)}
.gtm-post h3{font-family:var(--fs);font-weight:700;font-size:18px;color:var(--gtm-navy);margin:0;line-height:1.3}
.gtm-post p{margin:0;font-size:14.4px;color:var(--gtm-muted);flex:1}
.gtm-readon{display:inline-flex;align-items:center;gap:8px;font-family:var(--fb);font-weight:600;
  font-size:14px;color:var(--gtm-navy);min-height:28px}
.gtm-readon svg{width:15px;height:15px;transition:transform .25s}
.gtm-post:hover .gtm-readon svg{transform:translateX(4px)}
html[dir="rtl"] .gtm-readon svg{transform:scaleX(-1)}
html[dir="rtl"] .gtm-post:hover .gtm-readon svg{transform:scaleX(-1) translateX(4px)}

/* article body */
.gtm-article{max-width:72ch;margin-inline:auto}
.gtm-article-hero{border-radius:13px;overflow:hidden;border:1px solid var(--gtm-border);
  aspect-ratio:16/9;background:var(--gtm-panel);margin-bottom:clamp(24px,3vw,40px)}
.gtm-article-hero img{width:100%;height:100%;object-fit:cover}
.gtm-prose{font-size:16.6px;line-height:1.78;color:var(--gtm-ink)}
.gtm-prose p{margin:0 0 1.15em;color:var(--gtm-muted)}
.gtm-prose h2{font-family:var(--fs);font-weight:800;font-size:clamp(21px,2.3vw,28px);color:var(--gtm-navy);
  margin:1.9em 0 .6em;line-height:1.22}
.gtm-prose h3{font-family:var(--fs);font-weight:700;font-size:clamp(18px,1.9vw,22px);color:var(--gtm-navy);margin:1.6em 0 .5em}
.gtm-prose ul,.gtm-prose ol{margin:0 0 1.15em;padding-left:22px;color:var(--gtm-muted)}
.gtm-prose li{margin-bottom:.5em}
.gtm-prose img{max-width:100%;height:auto;border-radius:10px;margin:1.4em 0}
.gtm-prose a{color:var(--gtm-label);text-decoration:underline;text-underline-offset:3px}
.gtm-prose a:hover{color:var(--gtm-navy)}
.gtm-prose blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:4px solid var(--gtm-yellow);
  font-family:var(--fs);font-weight:600;font-size:1.08em;color:var(--gtm-navy);line-height:1.5}
html[dir="rtl"] .gtm-prose ul,html[dir="rtl"] .gtm-prose ol{padding-left:0;padding-right:22px}
html[dir="rtl"] .gtm-prose blockquote{border-left:0;border-right:4px solid var(--gtm-yellow);padding:4px 22px 4px 0}

/* ---- 12. contact ------------------------------------------------------- */
.gtm-contact{display:grid;gap:clamp(24px,3.4vw,46px);align-items:start}
@media(min-width:940px){.gtm-contact{grid-template-columns:1fr .78fr}}
.gtm-form{background:#fff;border:1px solid var(--gtm-border);border-radius:13px;padding:clamp(22px,2.8vw,36px)}
.gtm-field{margin-bottom:19px}
.gtm-field label{display:block;font-family:var(--fb);font-weight:600;font-size:13.6px;
  color:var(--gtm-navy);margin-bottom:7px}
.gtm-field label .req{color:#C0392B;margin-left:3px}
.gtm-field .hint{display:block;margin-top:6px;font-size:12.6px;color:var(--gtm-muted)}
.gtm-field input,.gtm-field select,.gtm-field textarea{
  width:100%;min-height:48px;padding:12px 15px;border:1px solid var(--gtm-border);border-radius:8px;
  font-family:var(--fb);font-size:15.5px;color:var(--gtm-ink);background:#fff;
  transition:border-color .25s,box-shadow .25s}
.gtm-field textarea{min-height:140px;resize:vertical;line-height:1.6}
.gtm-field input:focus,.gtm-field select:focus,.gtm-field textarea:focus{
  outline:none;border-color:var(--gtm-label);box-shadow:0 0 0 3px rgba(61,109,148,.16)}
.gtm-field input[aria-invalid="true"],.gtm-field textarea[aria-invalid="true"]{border-color:#C0392B}
.gtm-field .err{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:13px;color:#C0392B}
.gtm-field .err svg{width:14px;height:14px;flex:none}
.gtm-form-note{font-size:13px;color:var(--gtm-muted);margin:0 0 18px}

.gtm-contact-aside{display:flex;flex-direction:column;gap:14px}
.gtm-infocard{background:var(--gtm-navy);border-radius:13px;padding:clamp(22px,2.6vw,30px);color:#B9C7D7}
.gtm-infocard h3{font-family:var(--fs);font-weight:700;font-size:18px;color:#fff;margin:0 0 16px}
.gtm-infocard ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px}
.gtm-infocard li{display:flex;gap:13px;align-items:flex-start;font-size:14.8px;line-height:1.55}
.gtm-infocard li svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--gtm-yellow)}
.gtm-infocard a{color:#B9C7D7}
.gtm-infocard a:hover{color:var(--gtm-yellow)}
.gtm-map{border:1px solid var(--gtm-border);border-radius:13px;overflow:hidden;aspect-ratio:4/3;background:var(--gtm-panel)}
.gtm-map iframe{width:100%;height:100%;border:0;display:block}

/* ---- 13. pagination ---------------------------------------------------- */
.gtm-pager{display:flex;justify-content:center;margin-top:clamp(30px,4vw,48px)}
.gtm-pager .pagination{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
.gtm-pager .page-link,.gtm-pager .page-item span,.gtm-pager .page-item a{
  display:grid;place-items:center;min-width:44px;min-height:44px;padding:0 13px;border-radius:9px;
  border:1px solid var(--gtm-border);background:#fff;color:var(--gtm-navy);
  font-family:var(--fb);font-weight:600;font-size:14.5px;text-decoration:none}
.gtm-pager .page-item.active .page-link,.gtm-pager .page-item.active span{
  background:var(--gtm-navy);border-color:var(--gtm-navy);color:#fff}
.gtm-pager .page-item.disabled .page-link,.gtm-pager .page-item.disabled span{opacity:.45}
.gtm-pager .page-link:hover{border-color:var(--gtm-yellow)}

/* ---- 14. motion -------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .gtm-cap:hover,.gtm-work:hover,.gtm-post:hover,.gtm-chip:hover,
  .gtm-btn-ghost:hover{transform:none}
  .gtm-work:hover .gtm-work-img img,.gtm-post:hover .gtm-post-img img{transform:none}
}

/* ==========================================================================
   15. Uniform product cards  (added 2026-10-14)
   --------------------------------------------------------------------------
   Two separate causes of the ragged catalogue, fixed separately:

   a) auto-fit collapsed the empty grid tracks, so a category with two items
      stretched them across the full row while a category with four kept them
      small. auto-fill keeps the empty tracks, so a card is the same width
      whatever its neighbours do.

   b) the photographs themselves were all different — canvas sizes from
      120x104 to 1100x1100, subjects filling 29% to 100% of their frame, on
      white, grey or transparent backgrounds. Those are normalised in the
      files now (tools/gtm-normalize-images.py): every product image is 4:3
      with the machine at 84% on white. Because the file and the frame are
      both 4:3, the frame needs no padding and no letterboxing shows.
   ========================================================================== */

.gtm-cards{grid-template-columns:repeat(auto-fill,minmax(254px,1fr))}

/* the image is already 4:3 with its own margin baked in */
.gtm-card-img{background:#fff}
.gtm-card-img .gtm-img--product{padding:0;width:100%;display:block}
.gtm-pd-media{background:#fff}

/* a row that ends with one lonely card still reads as a grid, not a banner */
.gtm-cards > .gtm-card{max-width:100%}

/* ==========================================================================
   16. Brand header  (added 2026-10-14)
   --------------------------------------------------------------------------
   The logo was a small mark in a tight white box, which read as a broken
   image rather than a brand. It now sits in a proper white plate sized to the
   headline beside it. An optional background photograph per brand is set in
   the admin and darkened here, the same treatment as the homepage slides, so
   the name stays legible whatever photo is chosen.
   ========================================================================== */

.gtm-brandhero .gtm-phero-img::after{
  background:linear-gradient(90deg,rgba(16,35,63,.94) 0%,rgba(16,35,63,.86) 46%,rgba(16,35,63,.66) 100%);
}

.gtm-brandhead{display:grid;gap:clamp(20px,3vw,38px);align-items:center}
@media(min-width:760px){.gtm-brandhead{grid-template-columns:auto 1fr}}

.gtm-brandmark{
  display:grid;place-items:center;background:#fff;border-radius:14px;
  width:clamp(180px,22vw,248px);height:clamp(118px,14vw,156px);
  padding:clamp(18px,2.2vw,28px);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.gtm-brandmark img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}

.gtm-brandtext h1{margin:14px 0 14px}
.gtm-brandtext p{color:#C3D2E2;max-width:60ch;margin:0;font-size:clamp(15px,1.3vw,17px);line-height:1.65}
.gtm-btn-ghost.on-navy{border-color:rgba(255,255,255,.4);color:#fff}
.gtm-btn-ghost.on-navy:hover{background:#fff;color:var(--gtm-navy);border-color:#fff}

@media(max-width:759px){
  .gtm-brandmark{width:min(220px,62vw);height:auto;aspect-ratio:3/2}
}

/* a chip that navigates rather than filters — navy so it reads as a destination */
.gtm-chip--link{
  background:var(--gtm-navy);border-color:var(--gtm-navy);color:#fff;text-decoration:none;
}
.gtm-chip--link:hover{background:var(--gtm-navy-light);border-color:var(--gtm-yellow);color:#fff}
.gtm-chip--link svg{color:var(--gtm-yellow)}

/* ==========================================================================
   17. Images inside fixed plates  (fix, 2026-10-14)
   --------------------------------------------------------------------------
   The brand logo overflowed its white plate. Cause: the plate was a grid with
   place-items:center, and the logo was sized with max-width/max-height:100%.
   In that context Chrome never resolves the percentage max-height against the
   grid area, so a square logo took max-width (192px), kept its aspect ratio,
   and rendered 192px tall inside a 100px content box — spilling out the
   bottom. Wide logos happened to fit, which is why only some looked wrong.

   Fix: the plate is a plain block, and the image is given real width AND
   height of 100% with object-fit:contain. Percentages resolve reliably
   against a block's content box, and contain letterboxes without distortion,
   so a square logo and a wide logo both sit correctly in the same plate.

   The same max-* inside place-items:center pattern was used for the product
   detail image and the About partner logo, so both are corrected here before
   they bite.
   ========================================================================== */

.gtm-brandmark{display:block}
.gtm-brandmark img,
.gtm-pd-media img,
.gtm-partner-logo img{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  display:block;
}
.gtm-pd-media,
.gtm-partner-logo{display:block}

/* ==========================================================================
   18. Language menu — behaves like the Products menu  (2026-10-14)
   --------------------------------------------------------------------------
   First attempt only flipped opacity/visibility on hover, which left the list
   showing as faint ghost text you still had to click. Two reasons, both in the
   original theme:

     - the panel's background was painted only by the .open class the old click
       handler added, so on hover it was transparent
     - every <li> carries z-index:-1, which renders the items BEHIND the panel

   So the list is styled here outright: navy panel, real border and shadow, the
   items brought back to z-index:auto, and a yellow hover on each row. Opening
   is hover (plus :focus-within for keyboard), exactly like the Products
   dropdown, and an invisible strip bridges the gap under the button so the
   list does not close while the pointer travels to it.
   ========================================================================== */

.header-top-area .header-top-right-part .language{position:relative}

.header-top-area .header-top-right-part .language .language-dropdown{
  top:34px;
  visibility:hidden;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
  background:var(--gtm-navy);
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.35);
}

.header-top-area .header-top-right-part .language:hover .language-dropdown,
.header-top-area .header-top-right-part .language:focus-within .language-dropdown,
.header-top-area .header-top-right-part .language .language-dropdown.open{
  visibility:visible;
  opacity:1;
  transform:none;
  pointer-events:auto;
}

/* the theme sent these behind the panel */
.header-top-area .header-top-right-part .language .language-dropdown li{
  background-color:transparent;
  z-index:auto;
  position:relative;
}
.header-top-area .header-top-right-part .language .language-dropdown li a{
  padding:9px 14px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.header-top-area .header-top-right-part .language .language-dropdown li:last-child a{border-bottom:0}
.header-top-area .header-top-right-part .language .language-dropdown li a:hover{
  background:var(--gtm-yellow);
  color:var(--gtm-navy);
}

/* bridge the gap between button and list so it does not close in transit */
.header-top-area .header-top-right-part .language::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:34px;
}

/* ==========================================================================
   19. Journey stations that link to a machine  (2026-10-14)
   --------------------------------------------------------------------------
   A station pointing at a product becomes an anchor, so it needs the link
   styling neutralised and a clear affordance that it is clickable.
   ========================================================================== */

a.gtm-stop-card{text-decoration:none;cursor:pointer}
a.gtm-stop-card:hover .mach{background:var(--gtm-yellow);color:var(--gtm-navy)}
a.gtm-stop-card .mach{transition:background .25s ease,color .25s ease}
a.gtm-stop-card:focus-visible{outline:3px solid var(--gtm-yellow);outline-offset:3px}

/* ==========================================================================
   20. The GTM mark where it belongs  (2026-10-15)
   --------------------------------------------------------------------------
   The "Built by GTM" badge used to sit on top of every machine photograph, on
   every page. On a page that is entirely GTM machines it said nothing, and on
   a product photo it covered the product. It is gone. The mark now appears
   once, beside the headline of the section that is actually about GTM's own
   manufacturing, and at the head of the GTM block in the catalogue.
   ========================================================================== */

.gtm-head-mark{display:flex;align-items:center;gap:clamp(12px,1.4vw,18px);flex-wrap:wrap}
.gtm-head-mark img{height:clamp(30px,3.4vw,44px);width:auto;display:block;flex:none}

.gtm-ownblock .gtm-brandrow img{max-height:30px}
.gtm-ownblock .gtm-brandrow h2{color:var(--gtm-navy)}
.gtm-ownblock .gtm-brandrow::after{
  content:"MANUFACTURED IN CAIRO";
  font-family:var(--fb);font-weight:600;font-size:10.5px;letter-spacing:.14em;
  color:var(--gtm-navy);background:var(--gtm-yellow);
  border-radius:999px;padding:4px 11px;white-space:nowrap;
}
@media(max-width:620px){.gtm-ownblock .gtm-brandrow::after{display:none}}

/* ==========================================================================
   21. Brand logos in the catalogue rows  (fix, 2026-10-15)
   --------------------------------------------------------------------------
   The logo showed as an empty white plate. .gtm-img--logo carries padding:18px
   for the homepage grid, where the box is ~190x126 and that padding is right.
   In a catalogue row the box is capped at 34px tall, so 18px top plus 18px
   bottom left a content area of 18x0 — the logo loaded correctly and was then
   squeezed out of existence.

   A row logo needs no inner padding: the row's own gap does that job. Height
   drives the size, width follows the logo's real proportions.
   ========================================================================== */

.gtm-brandrow img{
  padding:0;
  aspect-ratio:auto;
  background:transparent;
  max-height:32px;
  max-width:160px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.gtm-ownblock .gtm-brandrow img{max-height:30px}

/* ==========================================================================
   22. Journey that adapts to any number of stations  (2026-10-15)
   --------------------------------------------------------------------------
   The grid was repeat(5,1fr) — five columns, hard-coded, because five was the
   number when it was written. A sixth station wrapped onto a second row, and
   the connecting line, which was positioned across the section rather than
   across the stations, stayed on the first row. The result was two stray
   cards under a line that did not reach them.

   Now the stations lay out as one continuous rail whatever the count. Up to
   about five they share the width as before; beyond that each keeps a legible
   minimum and the rail scrolls sideways, with snap points so it comes to rest
   on a station rather than mid-card.

   The line is drawn by the rail itself rather than by the section, so it is
   always exactly as long as the stations it connects — at any count, and at
   any scroll position. The yellow progress fill still draws itself in when
   the section comes into view.
   ========================================================================== */

/* the rail scrolls; the stations size themselves */
.gtm-journey{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:var(--gtm-border) transparent;
  padding-bottom:4px}
.gtm-journey::-webkit-scrollbar{height:6px}
.gtm-journey::-webkit-scrollbar-track{background:transparent}
.gtm-journey::-webkit-scrollbar-thumb{background:var(--gtm-border);border-radius:3px}
.gtm-journey:hover::-webkit-scrollbar-thumb{background:var(--gtm-navy-muted)}

.gtm-journey-stops{
  position:relative;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(232px,1fr);
  grid-template-columns:none;      /* overrides the old repeat(5,1fr) */
  width:max-content;
  min-width:100%;
  gap:12px;
}
.gtm-stop{scroll-snap-align:center}

/* the connecting line belongs to the stations, so it is always their length */
.gtm-journey-track{display:none}
.gtm-journey-stops::before,
.gtm-journey-stops::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:3px;border-radius:2px;
  transform:translateY(-50%);z-index:0;pointer-events:none;
}
.gtm-journey-stops::before{background:var(--gtm-border)}
.gtm-journey-stops::after{
  background:var(--gtm-yellow);
  transform:translateY(-50%) scaleX(0);
  transform-origin:left center;
  transition:transform 2.4s cubic-bezier(.33,.9,.4,1) .15s;
}
.gtm-journey.go .gtm-journey-stops::after{transform:translateY(-50%) scaleX(1)}
html[dir="rtl"] .gtm-journey-stops::after{transform-origin:right center}

.gtm-stop-card,.gtm-stop-dot{position:relative;z-index:1}

/* vertical on narrow screens — unchanged in spirit, now count-independent */
@media(max-width:900px){
  .gtm-journey{overflow-x:visible;scroll-snap-type:none}
  .gtm-journey-stops{
    grid-auto-flow:row;
    grid-auto-columns:auto;
    width:auto;
    gap:16px;
  }
  .gtm-journey-stops::before,
  .gtm-journey-stops::after{
    left:26px;right:auto;top:0;bottom:0;width:3px;height:auto;transform:none;
  }
  .gtm-journey-stops::after{
    transform:scaleY(0);transform-origin:top center;
  }
  .gtm-journey.go .gtm-journey-stops::after{transform:scaleY(1)}
}

@media (prefers-reduced-motion:reduce){
  .gtm-journey-stops::after{transition:none;transform:translateY(-50%) scaleX(1)}
}

/* the station reveal follows --d when the page supplies it (admin-driven
   stations), and falls back to the original fixed rhythm for the built-in
   five, so both paths stay in step with the line drawing itself */
.gtm-journey.go .gtm-stop-dot{
  transition-delay:var(--d, calc(.25s + var(--i) * .46s));
}
.gtm-journey.go .gtm-stop-card{
  transition-delay:var(--d, calc(.3s + var(--i) * .46s));
}

/* ==========================================================================
   23. Scroll-driven journey  (2026-10-15)
   --------------------------------------------------------------------------
   Two fixes and one new behaviour.

   Fix 1 — the cards became enormous. Section 22 set width:max-content on the
   rail so the connecting line could span the whole scroll width. But inside a
   max-content box a 1fr column resolves to the column's own max-content, and
   a card holding a paragraph is very wide indeed. Column width is now stated
   outright (--col) rather than left to 1fr, so max-content stays predictable.

   Fix 2 — dragging a scrollbar to read a section is poor. On a wide screen,
   when the stations do not fit, the section now pins to the viewport and the
   rail is driven sideways by ordinary downward scrolling; once the last
   station arrives the page carries on as normal. Everything is driven from
   the real scroll position, so it works with a wheel, a trackpad, a dragged
   scrollbar, or Page Down, and it can be scrolled backwards.

   It only engages when it helps: wide screen, more stations than fit, motion
   not reduced. Otherwise this whole block does nothing and section 22's
   ordinary rail (or the vertical mobile layout) applies unchanged.
   ========================================================================== */

.gtm-journey-stops{
  grid-auto-columns:var(--col, 300px);
  width:var(--railw, max-content);
}
/* this block sits after section 22, so the narrow-screen layout has to be
   restated here or the two rules above would win on a phone */
@media(max-width:900px){
  .gtm-journey-stops{grid-auto-columns:auto;width:auto}
}

/* overflow:clip clips identically to overflow:hidden but, unlike hidden, it
   does not make the element a scroll container — which is what lets the
   sticky stage inside it park against the viewport. Added by gtm.js only. */
.gtm-noclip{overflow:clip !important}

/* --- pinned mode: switched on by gtm.js, never by CSS alone --------------- */
.gtm-journey-pin.is-pinned{position:relative}
.gtm-journey-pin.is-pinned .gtm-journey-stage{
  position:sticky;
  top:var(--stage-top, clamp(112px, 12vh, 150px));  /* always clears the fixed header */
  display:flex;
  align-items:center;
  min-height:var(--stage-h, 70vh);
}
.gtm-journey-pin.is-pinned .gtm-journey{
  overflow:hidden;              /* the page scroll drives it, not a scrollbar */
  scroll-snap-type:none;
  /* full-bleed: the road and the stations run the whole width of the screen,
     not just the width of the text column, so the focused station sits in the
     middle of the window rather than the middle of the container */
  margin-inline:calc(50% - 50vw);
  padding-inline:0;
  width:100vw;
  /* overflow:hidden above clips vertically as well as horizontally, which
     sliced the bottom off the focused card: it is scaled up 1.04 and carries
     a 48px shadow, so it reaches past the box. Symmetric vertical padding
     gives both the scale and the shadow room. Symmetric matters — the road
     is positioned at 50% of this element, so uneven padding would shift it
     off the stations' centre line. */
  padding-block:34px;
}
.gtm-journey-pin.is-pinned .gtm-journey-stops{
  --col:300px;
  --railw:max-content;
  will-change:transform;
}

/* both screen edges soften, so the road reads as continuing past them */
.gtm-journey-pin.is-pinned .gtm-journey::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  /* These two 110px bands hide the road where it runs off screen. They were
     hard-coded #fff, which was invisible while the page was white — against
     the blue-grey canvas they became two bright vertical slabs with a hard
     bottom edge where the section ends. They follow the canvas now, and the
     middle stop is the SAME colour at zero alpha: plain `transparent` is
     rgba(0,0,0,0), so the ramp would pass through grey on the way out. */
  background:linear-gradient(90deg,
    var(--gtm-fade) 0, var(--gtm-fade-0) 110px,
    var(--gtm-fade-0) calc(100% - 110px), var(--gtm-fade) 100%);
}
/* with glass off the page is white again, so the fade is too */
:root{--gtm-fade:#fff;--gtm-fade-0:rgba(255,255,255,0)}
.gtm-journey-pin.is-pinned .gtm-journey{position:relative}

@media(max-width:1023px){
  .gtm-journey-pin.is-pinned .gtm-journey-stage{position:static;min-height:0}
  .gtm-journey-pin.is-pinned .gtm-journey{overflow-x:auto}
  .gtm-journey-pin.is-pinned .gtm-journey-stops{transform:none !important}
  .gtm-journey-pin.is-pinned .gtm-journey::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .gtm-journey-pin.is-pinned .gtm-journey-stage{position:static;min-height:0}
  .gtm-journey-pin.is-pinned .gtm-journey{overflow-x:auto}
  .gtm-journey-pin.is-pinned .gtm-journey-stops{transform:none !important}
}

/* ==========================================================================
   24. Step-by-step journey  (2026-10-15)
   --------------------------------------------------------------------------
   Section 23 pinned the section and slid the rail continuously. This turns
   that into a presentation: the section holds still, and each screen-ful of
   scrolling moves the focus from one station to the next — the active card
   comes forward while the rest fall back, and the road fills in behind it.
   Scrolling up walks back through them. When the last station is reached the
   page releases and carries on to the next section.

   Nothing here is driven by a scrollbar; the station index is read from the
   page's own scroll position, so a wheel, a trackpad and Page Down all step
   it identically. The movement between stations is a CSS transition, which
   is what makes it read as a morph rather than a jump.
   ========================================================================== */

/* The grey road runs the full width of the screen, not just the length of the
   rail, so the stations always travel along a road that is already there. The
   yellow stays on the rail, where it can fill from the first station up to the
   active one and travel with them — anchored to the road it would be measuring
   the screen instead of the progress. */
.gtm-journey-pin.is-pinned .gtm-journey-stops::before{display:none}
.gtm-journey-pin.is-pinned .gtm-journey-stops::after{
  display:block;height:5px;border-radius:3px;z-index:0;
  transform:translateY(-50%) scaleX(var(--fill, 0));
  transition:transform .62s cubic-bezier(.65,0,.35,1);
}
html[dir="rtl"] .gtm-journey-pin.is-pinned .gtm-journey-stops::after{
  transform-origin:right center;
}

.gtm-journey-pin.is-pinned .gtm-journey-track{
  display:block;left:-50vw;right:-50vw;height:15px;border-radius:9px;
  background:#E4E9F0;overflow:hidden;
}
/* the painted centre line */
.gtm-journey-pin.is-pinned .gtm-journey-track::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:3px;
  transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,#fff 0 16px,transparent 16px 34px);
  opacity:.85;z-index:2;pointer-events:none;
}
.gtm-journey-pin.is-pinned .gtm-journey-fill{display:none}

/* the rail itself is moved one station at a time, and the move is animated */
.gtm-journey-pin.is-pinned .gtm-journey-stops{
  transition:transform .62s cubic-bezier(.65,0,.35,1);
}

/* --- the morph: one station forward, the rest back --------------------- */
.gtm-journey-pin.is-pinned .gtm-journey.go .gtm-stop-card,
.gtm-journey-pin.is-pinned .gtm-journey.go .gtm-stop-dot{
  transition:opacity .5s ease, transform .55s cubic-bezier(.34,1.3,.64,1),
             box-shadow .45s ease, border-color .45s ease, background .45s ease,
             color .45s ease, filter .5s ease;
  transition-delay:0s;              /* the entrance stagger is over by now */
}
.gtm-journey-pin.is-pinned .gtm-journey.go .gtm-stop-card{
  opacity:.26;transform:scale(.93);filter:saturate(.3);
}
.gtm-journey-pin.is-pinned .gtm-journey.go .gtm-stop.is-active .gtm-stop-card{
  opacity:1;transform:scale(1.04);filter:none;
  box-shadow:0 22px 48px rgba(16,35,63,.16);border-color:var(--gtm-yellow);
}
.gtm-journey-pin.is-pinned .gtm-journey.go .gtm-stop.is-near .gtm-stop-card{
  opacity:.5;transform:scale(.96);filter:saturate(.6);
}

.gtm-journey-pin.is-pinned .gtm-journey.go .gtm-stop-dot{
  transform:scale(.82);opacity:.55;
}
.gtm-journey-pin.is-pinned .gtm-journey.go .gtm-stop.is-done .gtm-stop-dot{
  opacity:1;border-color:var(--gtm-navy);color:var(--gtm-navy);
}
.gtm-journey-pin.is-pinned .gtm-journey.go .gtm-stop.is-active .gtm-stop-dot{
  transform:scale(1.28);opacity:1;
  background:var(--gtm-yellow);border-color:var(--gtm-yellow);color:var(--gtm-navy);
  box-shadow:0 0 0 7px rgba(242,169,0,.16);
}

/* --- skip controls ------------------------------------------------------ */
/* No position on the stage here: it is already sticky, which is itself a
   containing block for the absolutely placed controls below. Restating
   position:relative would quietly cancel the sticky and unpin the whole
   section. */
.gtm-journey-skip{display:none}
.gtm-journey-pin.is-pinned.is-live .gtm-journey-skip{
  /* Moved off the bottom edge, then off the container edge (2026-10-18).

     Centred underneath, these sat below the fold on anything short of a
     full-height window and most people never saw them. Moving them to the
     stage's right edge fixed that but not the look: the stage lives inside
     .container, so its right edge is the CONTENT edge, which on a wide
     monitor is a long way from the screen and reads as "somewhere in the
     middle" rather than as an edge control.

     So they are fixed to the viewport instead of absolute in the stage.
     That puts them against the real right edge at any window width, and
     vertically at the true centre of the screen rather than the centre of a
     stage that is offset downwards by its own sticky top. They are only
     ever displayed while .is-pinned, which is exactly when the section
     holds the screen, so fixed never leaks outside that.

     One condition to know about: position:fixed resolves against the
     viewport ONLY while no ancestor has a transform, filter, perspective or
     contain. Nothing between here and <body> has one today. If a transform
     is ever added to .gtm-journey-stage or .gtm-journey-pin, these buttons
     will silently re-anchor to it and drift back toward the middle — that
     is the symptom to recognise, not a new bug.

     z-index sits at 12: above section content, which tops out at 5, and far
     below the header and back-to-top at 999, so neither gets covered. */
  display:flex;flex-direction:column;gap:12px;
  position:fixed;
  right:clamp(12px,1.7vw,28px);
  top:50%;transform:translateY(-50%);
  z-index:12;
}
html[dir="rtl"] .gtm-journey-pin.is-pinned.is-live .gtm-journey-skip{
  right:auto;left:clamp(12px,1.7vw,28px);
}
.gtm-skip-btn{
  width:42px;height:42px;border-radius:50%;padding:0;
  display:grid;place-items:center;cursor:pointer;
  color:var(--gtm-navy);
  transition:transform .2s ease, color .2s ease, box-shadow .25s ease, opacity .25s ease;
}
.gtm-skip-btn svg{width:19px;height:19px}
.gtm-skip-btn:hover{transform:translateY(-2px);color:var(--gtm-navy)}
.gtm-skip-btn:active{transform:translateY(0)}
.gtm-skip-btn:focus-visible{outline:3px solid var(--gtm-yellow);outline-offset:3px}
/* the direction you have already exhausted dims rather than disappears, so
   the pair never shifts position under the cursor */
.gtm-skip-btn[disabled]{opacity:.35;pointer-events:none}

/* room under the rail for the skip controls, without moving the road: the
   stage grows, the view does not, so the road stays on the stations' centre
   line */
/* the 58px gutter under the rail existed only to clear the skip controls
   that used to sit there; they are on the right edge now, so the stage gets
   that vertical space back and the rail re-centres. */
.gtm-journey-pin.is-pinned .gtm-journey-stage{padding-bottom:0}

/* opted out exactly where section 23 opts out */
@media(max-width:1023px){
  .gtm-journey-pin.is-pinned.is-live .gtm-journey-skip{display:none}
  .gtm-journey-pin.is-pinned .gtm-journey-track{display:none}
  .gtm-journey-pin.is-pinned .gtm-journey-stops::before,
  .gtm-journey-pin.is-pinned .gtm-journey-stops::after{display:block}
  .gtm-journey-pin.is-pinned .gtm-journey.go .gtm-stop-card{opacity:1;transform:none;filter:none}
  .gtm-journey-pin.is-pinned .gtm-journey.go .gtm-stop-dot{transform:scale(1);opacity:1}
}

/* ==========================================================================
   25. GTM stations stay brand blue  (2026-10-15)
   Yellow is the colour the focus uses, so a GTM-built station highlighted in
   yellow was indistinguishable from "the one you are looking at". GTM
   stations take navy instead — still obviously the active one, but readable
   as ours at a glance.
   ========================================================================== */
.gtm-journey-pin.is-pinned .gtm-journey.go .gtm-stop.is-gtm.is-active .gtm-stop-card{
  border-color:var(--gtm-navy);
  box-shadow:0 22px 48px rgba(16,35,63,.18), inset 0 3px 0 var(--gtm-navy);
}
.gtm-journey-pin.is-pinned .gtm-journey.go .gtm-stop.is-gtm.is-active .gtm-stop-dot{
  background:var(--gtm-navy);border-color:var(--gtm-navy);color:#fff;
  box-shadow:0 0 0 7px rgba(16,35,63,.14);
}
/* and when it is not the focus, keep the navy edge rather than the yellow one */
.gtm-journey-pin.is-pinned .gtm-journey.go .gtm-stop.is-gtm .gtm-stop-card{
  border-color:rgba(16,35,63,.45);box-shadow:inset 0 3px 0 var(--gtm-navy);
}

/* legend follows the same change: GTM-built reads navy, not yellow */
.gtm-journey-key .k-own i{background:var(--gtm-navy)}

/* ==========================================================================
   26. Liquid glass  (2026-10-18, rebuilt)
   --------------------------------------------------------------------------
   A layered approximation of Apple's Liquid Glass, for the things that FLOAT
   over the page: the two dropdowns, the sticky header and the journey
   controls. Four layers, because one blurred translucent box reads as
   frosted plastic, not glass:

     1. the backdrop   — blur, plus a saturation and brightness lift, which
                         is what stops glass looking like grey fog
     2. the rim        — a gradient hairline, bright where light would strike
                         and dim on the opposite edge, drawn as a masked
                         border so it follows the corner radius exactly
     3. the inner lens — inset shading that makes the panel read as having
                         thickness rather than being a flat sheet
     4. the specular   — a soft highlight that follows the pointer, which is
                         what makes it feel liquid instead of static

   WHAT IS DELIBERATELY MISSING: true refraction. Apple bends the content
   behind the panel at its edges. In a browser that needs an SVG displacement
   map fed into backdrop-filter, which Chromium accepts and Safari and
   Firefox do not — and on iPhone every browser uses Safari's engine. Rather
   than ship an effect that silently does nothing for a large share of
   visitors, this uses only filter functions every engine supports.

   TWO TINTS, forced by the text, not by taste. The language menu holds white
   text (color:#fff from the theme), so its glass is navy; light glass there
   would leave white on near-white and the options would vanish. The Products
   submenu holds dark text, so its glass is light.

   Every rule is scoped to html:not(.gtm-noglass). That class does not paint a
   replacement — it stops these rules applying so the original styling shows
   through exactly as it was. gtm.js adds it when the URL carries ?glass=off.
   ========================================================================== */

:root{
  /* light glass — dark text on top */
  --gtm-glass-bg:rgba(247,250,252,.92);          /* no-backdrop-filter fallback */
  --gtm-glass-tint:rgba(255,255,255,.50);
  --gtm-glass-rim-a:rgba(255,255,255,.95);
  --gtm-glass-rim-b:rgba(255,255,255,.22);
  --gtm-glass-rim-c:rgba(16,35,63,.16);
  --gtm-glass-inner:inset 0 1px 1px rgba(255,255,255,.80),
                    inset 0 -10px 22px rgba(255,255,255,.22),
                    inset 0 0 20px rgba(255,255,255,.10);
  --gtm-glass-drop:0 16px 40px rgba(16,35,63,.17), 0 2px 8px rgba(16,35,63,.07);

  /* dark glass — white text on top */
  --gtm-glassd-bg:rgba(16,35,63,.95);
  --gtm-glassd-tint:rgba(16,35,63,.52);
  --gtm-glassd-rim-a:rgba(255,255,255,.60);
  --gtm-glassd-rim-b:rgba(255,255,255,.12);
  --gtm-glassd-rim-c:rgba(255,255,255,.06);
  --gtm-glassd-inner:inset 0 1px 1px rgba(255,255,255,.34),
                     inset 0 -10px 22px rgba(255,255,255,.07),
                     inset 0 0 22px rgba(130,180,255,.07);
  --gtm-glassd-drop:0 18px 44px rgba(0,0,0,.42);

  --gtm-glass-filter:blur(20px) saturate(185%) brightness(1.08);
  --gtm-glass-filter-d:blur(22px) saturate(160%) brightness(.92);
}

/* ---- the shared recipe ------------------------------------------------- */
html:not(.gtm-noglass) .gtm-glass{
  position:relative;
  background:var(--gtm-glass-bg);
  border:0;
  box-shadow:var(--gtm-glass-drop), var(--gtm-glass-inner);
  isolation:isolate;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html:not(.gtm-noglass) .gtm-glass{
    background:var(--gtm-glass-tint);
    -webkit-backdrop-filter:var(--gtm-glass-filter);
    backdrop-filter:var(--gtm-glass-filter);
  }
}

/* layer 2 — the rim. A gradient border drawn with two masks that cancel out
   everywhere except the 1px frame, so it follows the radius exactly rather
   than being four straight lines. */
html:not(.gtm-noglass) .gtm-glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(145deg,
             var(--gtm-glass-rim-a) 0%,
             var(--gtm-glass-rim-b) 38%,
             var(--gtm-glass-rim-c) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;z-index:2;
}

/* layer 4 — the specular highlight, positioned from --mx/--my which gtm.js
   updates as the pointer moves. It sits at 0 opacity until the pointer is
   actually over the element, so nothing glows on its own. */
html:not(.gtm-noglass) .gtm-glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(130px circle at var(--mx,50%) var(--my,0%),
             rgba(255,255,255,.85), rgba(255,255,255,.18) 42%, transparent 72%);
  opacity:0;transition:opacity .35s ease;
  pointer-events:none;z-index:1;mix-blend-mode:soft-light;
}
html:not(.gtm-noglass) .gtm-glass:hover::after,
html:not(.gtm-noglass) .gtm-glass:focus-within::after{opacity:.9}

/* ---- the language menu: DARK glass, because its text is white ---------- */
html:not(.gtm-noglass) .header-top-area .header-top-right-part .language .language-dropdown{
  background:var(--gtm-glassd-bg);
  border:0;border-radius:14px;
  box-shadow:var(--gtm-glassd-drop), var(--gtm-glassd-inner);
  /* NO position here. Both dropdowns are position:absolute in the theme,
     which is what lifts them out of the page flow and floats them over the
     content. Overriding that to relative put them back IN the flow: the
     Products submenu took up vertical space and shoved the rest of the nav
     down the page. absolute is already a positioning context, so the rim
     pseudo-element anchors to it without any help. */
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html:not(.gtm-noglass) .header-top-area .header-top-right-part .language .language-dropdown{
    background:var(--gtm-glassd-tint);
    -webkit-backdrop-filter:var(--gtm-glass-filter-d);
    backdrop-filter:var(--gtm-glass-filter-d);
  }
}
html:not(.gtm-noglass) .header-top-area .header-top-right-part .language .language-dropdown::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(145deg,var(--gtm-glassd-rim-a),var(--gtm-glassd-rim-b) 40%,var(--gtm-glassd-rim-c));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}

/* ---- the Products submenu: LIGHT glass, dark text ---------------------- */
html:not(.gtm-noglass) .header-style-two .header-wrapper .header-navigation-area .main-menu ul li ul.sub-menu,
html:not(.gtm-noglass) .header-style-one .header-wrapper .header-navigation-area .main-menu ul li ul.sub-menu{
  background:var(--gtm-glass-bg);
  border:0;border-radius:14px;
  box-shadow:var(--gtm-glass-drop), var(--gtm-glass-inner);
  /* NO position here. Both dropdowns are position:absolute in the theme,
     which is what lifts them out of the page flow and floats them over the
     content. Overriding that to relative put them back IN the flow: the
     Products submenu took up vertical space and shoved the rest of the nav
     down the page. absolute is already a positioning context, so the rim
     pseudo-element anchors to it without any help. */
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html:not(.gtm-noglass) .header-style-two .header-wrapper .header-navigation-area .main-menu ul li ul.sub-menu,
  html:not(.gtm-noglass) .header-style-one .header-wrapper .header-navigation-area .main-menu ul li ul.sub-menu{
    background:var(--gtm-glass-tint);
    -webkit-backdrop-filter:var(--gtm-glass-filter);
    backdrop-filter:var(--gtm-glass-filter);
  }
}

/* ---- the sticky header, once it detaches and floats over content ------- */
html:not(.gtm-noglass) .header-style-two .header-wrapper .header-navigation-area.fixed{
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 28px rgba(16,35,63,.10), inset 0 -1px 0 rgba(255,255,255,.6);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html:not(.gtm-noglass) .header-style-two .header-wrapper .header-navigation-area.fixed{
    background:rgba(255,255,255,.62);
    -webkit-backdrop-filter:var(--gtm-glass-filter);
    backdrop-filter:var(--gtm-glass-filter);
  }
}

/* ---- the journey skip buttons: capsules, which is the Liquid Glass shape */
html:not(.gtm-noglass) .gtm-skip-btn{border:0}

/* with glass switched off, the skip buttons still need to be something */
.gtm-noglass .gtm-glass{
  background:#fff;border:1px solid var(--gtm-border);
  box-shadow:0 8px 20px rgba(16,35,63,.12);
}

/* Respect the system setting, and give low-power devices an out: the blur is
   GPU work on every frame it is visible, so a machine asking for less of it
   gets a solid panel rather than a janky one. */
@media (prefers-reduced-transparency:reduce){
  html .gtm-glass,
  html .language .language-dropdown,
  html .main-menu ul li ul.sub-menu,
  html .header-navigation-area.fixed{
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  }
  html .gtm-glass::after,
  html .gtm-glass::before{display:none}
  html .language .language-dropdown{background:var(--gtm-navy) !important}
  html .gtm-glass,
  html .main-menu ul li ul.sub-menu,
  html .header-navigation-area.fixed{background:#fff !important}
}

/* ==========================================================================
   27. Several machines on one station  (2026-10-18)
   A station used to name a single machine, so one chip pinned to the bottom
   of the card was enough. Now it can list several: they wrap, and the card
   grows to fit rather than the chips overflowing it.
   ========================================================================== */
.gtm-stop-card .machs{
  display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;
}
.gtm-stop-card .machs .mach{align-self:auto;margin:0}
a.mach{text-decoration:none;transition:background .22s ease,color .22s ease}
a.mach:hover{background:var(--gtm-yellow);color:var(--gtm-navy)}
a.mach:focus-visible{outline:2px solid var(--gtm-yellow);outline-offset:2px}

/* ==========================================================================
   28. Glass across the site  (2026-10-18, rev 2)
   --------------------------------------------------------------------------
   Section 26 does true glass — backdrop-filter — for the handful of panels
   that FLOAT over other content. This does the rest of the site's surfaces.

   WHY THEY ARE NOT THE SAME TREATMENT. backdrop-filter is GPU work on every
   frame the element is visible. On a dropdown that costs nothing. On a
   products page with thirty cards on screen it is thirty live blurs and the
   page stutters as you scroll. There is also nothing behind a card to blur:
   it sits on the page, it does not float over it. So the cards get the look
   without the live blur.

   REV 2 — THE RIM IS NO LONGER A PSEUDO-ELEMENT. The first version drew it
   with ::before on each card class. That broke things, because ::before was
   already carrying real content on some of them — on .gtm-rail-item it IS
   the connecting line between the process steps, and the rim rule replaced
   it. A pseudo-element is a single slot per element; taking it is not
   additive.

   The rim is now an inset box-shadow instead, stacked with the other
   shadows. It cannot collide with anything, it still follows border-radius,
   and it costs nothing. The trade is that an inset ring is one flat colour
   rather than a gradient, so the cards no longer catch light on one edge the
   way the floating panels do. Worth it: section 26 still does the full
   gradient rim on the panels that float, where it is actually visible.
   ========================================================================== */

:root{
  --gtm-surface:linear-gradient(145deg, rgba(255,255,255,.94) 0%, rgba(238,243,247,.80) 100%);
  --gtm-surface-ring:inset 0 0 0 1px rgba(255,255,255,.85);
  --gtm-surface-inner:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -14px 26px rgba(255,255,255,.30);
  --gtm-surface-edge:inset 0 0 0 1px rgba(16,35,63,.07);
  --gtm-surface-drop:0 10px 30px rgba(16,35,63,.09), 0 1px 3px rgba(16,35,63,.05);
  --gtm-surface-drop-hi:0 20px 46px rgba(16,35,63,.16), 0 2px 6px rgba(16,35,63,.07);
}

/* .gtm-figure is deliberately absent, for the same reason .gtm-rail-item and
   .gtm-infocard are: it is one of the few panels that sits on the NAVY band,
   and its own styling gives it a translucent white card with a white number.
   Painting it with the light surface below left white text on a near-white
   card — the figures were effectively invisible. 2026-10-26. */
html:not(.gtm-noglass) .gtm-card,
html:not(.gtm-noglass) .gtm-cap,
html:not(.gtm-noglass) .gtm-brand,
html:not(.gtm-noglass) .gtm-work,
html:not(.gtm-noglass) .gtm-post,
html:not(.gtm-noglass) .gtm-partner,
html:not(.gtm-noglass) .gtm-spec,
html:not(.gtm-noglass) .gtm-stop-card{
  background:var(--gtm-surface);
  box-shadow:var(--gtm-surface-drop), var(--gtm-surface-inner),
             var(--gtm-surface-ring), var(--gtm-surface-edge);
  transition:box-shadow .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}

/* .gtm-rail-item is deliberately absent from the list above. Its background
   is meant to stay transparent — the step sits ON the rail rather than being
   a panel — and its ::before is the rail itself. */

html:not(.gtm-noglass) .gtm-card:hover,
html:not(.gtm-noglass) .gtm-cap:hover,
html:not(.gtm-noglass) .gtm-work:hover,
html:not(.gtm-noglass) .gtm-post:hover,
html:not(.gtm-noglass) .gtm-brand:hover{
  box-shadow:var(--gtm-surface-drop-hi), var(--gtm-surface-inner),
             var(--gtm-surface-ring), var(--gtm-surface-edge);
  transform:translateY(-2px);
}

/* form fields and the filter bar read as glass too, being interactive */
html:not(.gtm-noglass) .gtm-field input,
html:not(.gtm-noglass) .gtm-field textarea,
html:not(.gtm-noglass) .gtm-field select{
  background:rgba(255,255,255,.72);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9), inset 0 1px 0 rgba(255,255,255,.9),
             0 2px 10px rgba(16,35,63,.06);
}
html:not(.gtm-noglass) .gtm-field input:focus,
html:not(.gtm-noglass) .gtm-field textarea:focus,
html:not(.gtm-noglass) .gtm-field select:focus{
  background:rgba(255,255,255,.95);
}

/* chips are small capsules of the same material */
html:not(.gtm-noglass) .gtm-chip{
  background:linear-gradient(145deg, rgba(255,255,255,.95), rgba(238,243,247,.82));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95), inset 0 1px 0 rgba(255,255,255,.9),
             0 2px 8px rgba(16,35,63,.07);
}

/* the journey's focused card keeps its yellow identity on top of the glass */
html:not(.gtm-noglass) .gtm-journey.go .gtm-stop.is-active .gtm-stop-card{
  box-shadow:0 22px 48px rgba(16,35,63,.16), var(--gtm-surface-inner),
             inset 0 0 0 1.5px var(--gtm-yellow);
}
html:not(.gtm-noglass) .gtm-journey.go .gtm-stop.is-gtm.is-active .gtm-stop-card{
  box-shadow:0 22px 48px rgba(16,35,63,.18), var(--gtm-surface-inner),
             inset 0 0 0 1.5px var(--gtm-navy), inset 0 3px 0 var(--gtm-navy);
}

@media (prefers-reduced-transparency:reduce){
  html .gtm-card, html .gtm-cap,
  html .gtm-brand, html .gtm-work, html .gtm-post,
  html .gtm-partner, html .gtm-spec, html .gtm-stop-card{
    background:#fff !important;
  }
  /* .gtm-figure is out of that list too — white text on a forced-white card
     is exactly the blanking described below for .gtm-infocard. */
  html .gtm-figure{background:rgba(255,255,255,.10) !important}
  /* .gtm-infocard is deliberately NOT in that list. It is the one panel here
     whose text is light, so forcing it white blanks it — the same mistake,
     in the one place a reader with reduced transparency turned on would hit
     it and nobody testing normally ever would. It drops the translucency as
     asked and keeps a solid blue instead. */
  html .gtm-infocard{
    background:#0A4F9E !important;
    -webkit-backdrop-filter:none !important;
            backdrop-filter:none !important;
  }
}

/* ==========================================================================
   29. A canvas for the glass to sit on  (2026-10-18, rev 2)
   --------------------------------------------------------------------------
   Glass is blur plus translucency. On a flat white page there is nothing to
   blur and nothing to tint, so the panels built in sections 26 and 28 were
   doing their job and showing almost nothing. This gives them something to
   work against.

   THREE DEPTHS, because the right one is a judgement call and worth seeing
   rather than arguing about. gtm.js reads ?bg= from the URL:

       ?bg=soft    barely there, the first attempt
       (default)   the one in use — a soft blue-grey, glass clearly reads
       ?bg=deep    noticeably darker, strongest glass, still a light theme

   All three keep dark text on a light canvas, so contrast stays well inside
   accessible limits — this is not a dark theme, which would need all 31
   product photos cut out and every page rechecked.

   The canvas colour is one variable, so the journey dots and anything else
   that must sit opaque on the page follow it automatically instead of being
   hard-coded to a white that no longer matches.
   ========================================================================== */

html:not(.gtm-noglass){
  --gtm-canvas:#CBE3FE;
  --gtm-fade:#CBE3FE;
  --gtm-fade-0:rgba(203,227,254,0);
  --gtm-wash-navy:rgba(16,35,63,.085);
  --gtm-wash-gold:rgba(242,169,0,.070);
  --gtm-wash-steel:rgba(61,109,148,.080);
}
html:not(.gtm-noglass).bg-soft{
  --gtm-canvas:#EFF4FA;
  --gtm-fade:#EFF4FA;
  --gtm-fade-0:rgba(239,244,250,0);
  --gtm-wash-navy:rgba(16,35,63,.055);
  --gtm-wash-gold:rgba(242,169,0,.045);
  --gtm-wash-steel:rgba(61,109,148,.050);
}
html:not(.gtm-noglass).bg-deep{
  --gtm-canvas:#D9E2EC;
  --gtm-fade:#D9E2EC;
  --gtm-fade-0:rgba(217,226,236,0);
  --gtm-wash-navy:rgba(16,35,63,.130);
  --gtm-wash-gold:rgba(242,169,0,.095);
  --gtm-wash-steel:rgba(61,109,148,.120);
}

html:not(.gtm-noglass) body{
  background-color:var(--gtm-canvas);
}
html:not(.gtm-noglass) body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vw 48vw at 12% 8%,  var(--gtm-wash-navy),  transparent 62%),
    radial-gradient(52vw 44vw at 88% 32%, var(--gtm-wash-gold),  transparent 60%),
    radial-gradient(64vw 52vw at 46% 92%, var(--gtm-wash-steel), transparent 64%);
}

/* ==========================================================================
   Section tones with soft joins  (2026-10-18, rev 2)
   --------------------------------------------------------------------------
   Rev 1 ran one continuous descent from top to bottom. That removed the seams
   but it also removed the sections: a gradient that only ever travels in one
   direction has no rhythm, so the whole page read as a single melt. It also
   ramped into the navy CTA, which looked like fog rather than a footer.

   This version separates the two jobs that were confused before.

   TONE is per section and ALTERNATES — lighter, darker, lighter — so the eye
   gets a clear step at every boundary. Alternation is what reads as rhythm;
   a monotonic ladder never will, however many stops it has.

   THE JOIN is a 120px blend band at the top of each section, and nothing
   more. The section is its own flat tone for the remaining ~90% of its
   height, which is what makes the tones legible as tones. Only the handover
   is soft. That is the difference between "no hard lines" and "no sections".

   The CTA is deliberately NOT blended. A footer is a structural edge and is
   meant to be sharp — softening it just made it look unfinished.

   Nothing here is lighter than #DFEDFE, so the glare problem stays fixed.
   Each pair of literal hex values is still written twice on purpose: the
   blend depends on two neighbours agreeing, and seeing the number twice is
   the only thing that guarantees it.
   ========================================================================== */

/* flat: this section pins itself and is several screens tall, so a gradient
   would slide past as you scroll and the station dots — which paint
   themselves --gtm-canvas to hide the road behind them — would drift out of
   match and halo. Flat keeps them invisible. */
html:not(.gtm-noglass) .gtm-journey-section{
  background:#CBE3FE;
}
html:not(.gtm-noglass) .gtm-made-section{
  background:linear-gradient(180deg,#CBE3FE 0,#DFEDFE 120px,#DFEDFE 100%);
}
html:not(.gtm-noglass) .gtm-brands-section{
  background:linear-gradient(180deg,#DFEDFE 0,#CBE3FE 120px,#CBE3FE 100%);
}
html:not(.gtm-noglass) .gtm-news-section{
  background:linear-gradient(180deg,#CBE3FE 0,#DFEDFE 120px,#DFEDFE 100%);
}
/* sharp on purpose — see above */
html:not(.gtm-noglass) .gtm-cta-section{
  background-color:var(--gtm-navy);
  background-image:none;
}
html:not(.gtm-noglass) .gtm-service-section{
  background:linear-gradient(180deg,#CBE3FE 0,#DFEDFE 120px,#DFEDFE 100%);
}

/* the dot texture is what stops a large soft field looking like dead space,
   so it stays — just lighter, since it now sits on a tinted ground */
html:not(.gtm-noglass) .gtm-dotted::before{opacity:.38}

/* the page-wide washes are gone: the ladder is the background now, and a
   fixed wash floating over a scrolling gradient was half the reason the page
   read as one flat sheet */
html:not(.gtm-noglass) body::before{display:none}

/* the journey's dots must stay opaque to hide the road passing behind them,
   so they take the canvas colour rather than a white that no longer matches */
html:not(.gtm-noglass) .gtm-stop-dot{background:var(--gtm-canvas)}

/* against a deeper canvas the road reads better a shade darker */
html:not(.gtm-noglass) .gtm-journey-pin.is-pinned .gtm-journey-track{
  background:#9AC2F0;
}

/* cards lift further off a darker canvas, so they go a touch more opaque —
   otherwise a translucent panel on a mid-tone starts to look muddy */
/* A pure-white card on a tinted page is the same glare problem at a smaller
   size, and it is the brightest element on the screen when stacked in a grid.
   These sit just above the ladder rather than on top of it — enough to lift
   off the page, not enough to burn. */
html:not(.gtm-noglass) .gtm-card,
html:not(.gtm-noglass) .gtm-cap,
html:not(.gtm-noglass) .gtm-brand,
html:not(.gtm-noglass) .gtm-work,
html:not(.gtm-noglass) .gtm-post,
html:not(.gtm-noglass) .gtm-partner,
html:not(.gtm-noglass) .gtm-spec,
html:not(.gtm-noglass) .gtm-stop-card{
  background:linear-gradient(145deg,#F4F9FF 0%,#E7F1FE 100%);
}
/* the photo well behind a cut-out was flat #fff — the single brightest
   rectangle on the page, repeated once per product */
html:not(.gtm-noglass) .gtm-card-img{
  background:linear-gradient(170deg,#EAF3FE 0%,#D7E8FD 100%);
}

@media (prefers-reduced-transparency:reduce){
  html body{background-color:#fff}
  html body::before{display:none}
}


/* ==========================================================================
   26. Top bar on one line  (2026-10-18)
   --------------------------------------------------------------------------
   The address and the email are already siblings in the same column in
   header.blade.php — they were wrapping only because the theme splits the bar
   6/6 and the Cairo address does not fit in half the container. Nothing about
   the right-hand side needs half the bar: it holds two social icons and the
   language menu. So the row stops being a 50/50 grid and lets each side take
   the width it actually needs, which drops the bar from two lines to one.
   No blade change, so ?glass=off and the Arabic layout are unaffected.
   ========================================================================== */
@media(min-width:992px){
  .header-top-area .container > .row{
    flex-wrap:nowrap;
    align-items:center;
  }
  .header-top-area .header-top-left-part{
    flex:1 1 auto;max-width:none;width:auto;
    white-space:nowrap;
    display:flex;align-items:center;gap:22px;
  }
  .header-top-area .header-top-right-part{
    flex:0 0 auto;max-width:none;width:auto;
  }
  /* the theme's divider sat after the address as a trailing border; with the
     two items now side by side it belongs BETWEEN them */
  .header-top-area .header-top-left-part .address{
    padding-right:22px;
    border-right:1px solid rgba(255,255,255,.28);
  }
  html[dir="rtl"] .header-top-area .header-top-left-part .address{
    padding-right:0;padding-left:22px;
    border-right:0;border-left:1px solid rgba(255,255,255,.28);
  }
  .header-top-area .header-top-left-part .phone{margin:0}
}
/* below 992px the bar is d-none anyway, so nothing to undo */


/* ==========================================================================
   28. Blue tokens  (2026-10-18, rev 5)
   --------------------------------------------------------------------------
   Hue is now 213 — Osama's own #02479D / #7EB8FD, which are both hue 213,
   so the page sits in the same blue as the accents and the logo instead of
   near them. Rev 1 went to 36 (caramel — wrong family), rev 2 to 250
   (lavender — too violet), rev 3 to 230 (periwinkle — close). 213 at low
   saturation is the same colour as the accents, just drained of it.

   The two bands also moved APART rather than just down, which is what makes
   the sections easier to tell apart than simply darkening everything would:
       light band  L 87%  (was 90)
       dark  band  L 76%  (was 80)
   An 11-point step instead of a 10-point one, with the whole range sitting
   lower so neither band glares.

   76% is close to the floor for this layout, and the limit is not taste. As
   the dark band drops, the SECONDARY text runs out of contrast long before
   the headings do, so --gtm-muted has to chase it darker, and once muted
   approaches --gtm-ink the secondary text stops reading as secondary at all.
   At this band muted sits at L 29% against ink at L 20% — still a legible
   hierarchy. A band much below 74% collapses that gap, and the page would
   lose its text hierarchy to gain a shade of blue. Not a good trade.

   Measured against the DARKEST band #7EB8FD, so every lighter surface has
   more headroom than this:
       ink   #2A333D  6.47   muted #3F4653  4.79
       navy  #10233F  7.95   label #27455D  5.06
   All clear the 4.5 AA floor.

   Scoped to :not(.gtm-noglass), so ?glass=off still shows the original cool
   theme untouched and the comparison stays honest.
   ========================================================================== */
html:not(.gtm-noglass){
  --gtm-muted:#3A414D;
  --gtm-label:#23405A;
  --gtm-panel:#DCEAFE;
  --gtm-border:#BBD6F5;
}

/* ==========================================================================
   29. The ladder settled  (2026-10-18)
   --------------------------------------------------------------------------
       journey  #CBE3FE
       made     #DFEDFE
       brands   #CBE3FE   <- same tone as the journey, by request
       news     #DFEDFE
       cta      GTM navy, sharp

   Both tones are mixes of #7EB8FD with white (40% and 25%), so the page is
   one colour at two strengths. The journey->machines step was the one that
   read right, so brands->news is now literally that same step repeated
   rather than a second, deeper one.

   The full-strength #7EB8FD band is gone, and with it the ?blue= switch:
   that switch only ever varied the dark band's strength, and there is no
   dark band left for it to vary.

   #02479D is still nowhere in the page. Dark text on it measures 1.46:1, so
   it can only ever be a surface carrying white text. The footer stays navy.

   --gtm-muted and --gtm-label stay at #3A414D and #23405A. They were
   darkened to survive the full-strength band; against these lighter tones
   they now have more headroom than AA needs, which costs nothing and means
   a darker band can come back later without another contrast pass.
   ========================================================================== */


/* ==========================================================================
   30. Filter bar, chips and the contact card  (2026-10-18)
   --------------------------------------------------------------------------
   THE BAR. It was painted rgba(255,255,255,.72) with white inset rings,
   which on the old white page was invisible and on the blue ladder reads as
   a white tray the chips are sitting in. The chips are the control; the bar
   is only a flex container, so it carries nothing now. The form fields keep
   that treatment — a field SHOULD look like a well you type into.

   THE CHIPS. Unselected is plain glass, selected is blue glass, which is the
   state difference doing the work rather than a colour swap. Measured on the
   lightest band a chip can sit over, so every other backdrop is better:
       unselected  #111318 on it   16.9:1
       selected    white on it      6.5:1
   State is never signalled by colour alone — aria-pressed drives it and the
   weight shifts too, so it survives greyscale and a screen reader.

   THE CONTACT CARD. This was a REGRESSION I introduced. .gtm-infocard is a
   dark navy panel with deliberately light text (#fff heading, pale body, gold
   icons), and I swept it into the light-card background list with the ordinary
   cards. Light text then landed on a light card and the whole panel went
   almost blank — which is exactly what the Contact page was showing. It is out
   of both lists now and gets blue glass instead.

   Its body text could not come across unchanged: #B9C7D7 was written for navy
   #10233F and manages only 3.97:1 on this lighter blue, under the 4.5 AA
   floor. Lightened to #D2DFF0 it measures 5.26:1, and the icons go to #FFC133
   for 4.37:1 — comfortably past the 3:1 that non-text UI graphics need.
   ========================================================================== */

html:not(.gtm-noglass) .gtm-filterbar{
  background:transparent;
  box-shadow:none;
}

/* ---- unselected chip: plain glass ------------------------------------- */
html:not(.gtm-noglass) .gtm-chip{
  background:rgba(255,255,255,.65);
  border-color:rgba(255,255,255,.75);
  color:#111318;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85), inset 0 1px 0 rgba(255,255,255,.95),
             0 2px 10px rgba(16,35,63,.08);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html:not(.gtm-noglass) .gtm-chip{
    background:rgba(255,255,255,.42);
    -webkit-backdrop-filter:var(--gtm-glass-filter);
            backdrop-filter:var(--gtm-glass-filter);
  }
}
html:not(.gtm-noglass) .gtm-chip:hover{
  color:#111318;
  border-color:rgba(255,255,255,.95);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95), inset 0 1px 0 #fff,
             0 6px 18px rgba(16,35,63,.12);
}
html:not(.gtm-noglass) .gtm-chip .c{color:#3A4654;opacity:.85}

/* ---- selected chip: blue glass ---------------------------------------- */
html:not(.gtm-noglass) .gtm-chip[aria-pressed="true"],
html:not(.gtm-noglass) .gtm-chip.is-on{
  background:rgba(2,71,157,.86);
  border-color:rgba(2,71,157,.9);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), inset 0 1px 0 rgba(255,255,255,.34),
             0 8px 22px rgba(2,71,157,.30);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html:not(.gtm-noglass) .gtm-chip[aria-pressed="true"],
  html:not(.gtm-noglass) .gtm-chip.is-on{
    background:rgba(2,71,157,.78);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
            backdrop-filter:blur(18px) saturate(150%);
  }
}
html:not(.gtm-noglass) .gtm-chip[aria-pressed="true"]:hover,
html:not(.gtm-noglass) .gtm-chip.is-on:hover{color:#fff}
html:not(.gtm-noglass) .gtm-chip[aria-pressed="true"] .c,
html:not(.gtm-noglass) .gtm-chip.is-on .c{color:#FFC133;opacity:1}

/* ---- the contact card: blue glass, light text ------------------------- */
html:not(.gtm-noglass) .gtm-infocard{
  background:rgba(2,71,157,.90);
  color:#D2DFF0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.30),
             0 18px 44px rgba(2,71,157,.26);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html:not(.gtm-noglass) .gtm-infocard{
    background:rgba(2,71,157,.82);
    -webkit-backdrop-filter:blur(20px) saturate(150%);
            backdrop-filter:blur(20px) saturate(150%);
  }
}
html:not(.gtm-noglass) .gtm-infocard h3{color:#fff}
html:not(.gtm-noglass) .gtm-infocard a{color:#D2DFF0}
html:not(.gtm-noglass) .gtm-infocard a:hover{color:#FFC133}
html:not(.gtm-noglass) .gtm-infocard li svg{color:#FFC133}


/* ==========================================================================
   31. Menu chevrons and the category flyout  (2026-10-18)
   --------------------------------------------------------------------------
   THE ALIGNMENT. The theme centres both chevrons with
       top:50%; transform:translate(0,-13px)
   — a FIXED pixel nudge standing in for half the glyph's height. It is only
   correct at the exact font-size and line-height the theme shipped with, and
   the nav has not had those for a while, so the arrow sits a shade low next
   to "Products". translateY(-50%) is half of whatever the glyph actually is,
   so it stays centred at any size and needs no retuning later.

   The selectors match the theme's own depth (both header styles) so these
   win on specificity without !important.

   THE FLYOUT. style.css already positions a third-level ul at left:100% /
   top:0 and reveals it on hover, and .has-sub-child already draws the
   right-pointing chevron — the markup in header.blade.php opts into theme
   machinery that was there all along. What was missing is the glass: a
   nested menu inherits none of the parent's treatment, so it is given the
   same light-glass surface here, plus a small negative top offset so its
   first row lines up with the row that opened it.
   ========================================================================== */

.header-style-one .header-wrapper .header-navigation-area .main-menu ul li.has-sub > a::before,
.header-style-two .header-wrapper .header-navigation-area .main-menu ul li.has-sub > a::before{
  transform:translateY(-50%);
}
.header-style-one .header-wrapper .header-navigation-area .main-menu ul li ul.sub-menu li.has-sub-child > a::before,
.header-style-two .header-wrapper .header-navigation-area .main-menu ul li ul.sub-menu li.has-sub-child > a::before{
  transform:translateY(-50%);
}

/* the third level gets the same material as the second */
html:not(.gtm-noglass) .header-style-one .header-wrapper .header-navigation-area .main-menu ul li ul.sub-menu li ul.sub-menu,
html:not(.gtm-noglass) .header-style-two .header-wrapper .header-navigation-area .main-menu ul li ul.sub-menu li ul.sub-menu{
  /* NO position here — the theme already places it at left:100%/top:0, and
     restating position would drop it back into the flow. Only the offset. */
  margin-top:-8px;
  border:0;border-radius:14px;
}
/* a category name must not wrap to two lines in a narrow flyout */
.header-style-one .header-wrapper .header-navigation-area .main-menu ul li ul.sub-menu li ul.sub-menu li a,
.header-style-two .header-wrapper .header-navigation-area .main-menu ul li ul.sub-menu li ul.sub-menu li a{
  white-space:nowrap;
}
/* the chevron needs room, or it sits on top of a long category name */
.header-style-one .header-wrapper .header-navigation-area .main-menu ul li ul.sub-menu li.has-sub-child > a,
.header-style-two .header-wrapper .header-navigation-area .main-menu ul li ul.sub-menu li.has-sub-child > a{
  padding-right:30px;
}

/* a category link from the menu lands under the fixed header without this */
.gtm-anchor{scroll-margin-top:clamp(96px,11vh,140px)}

/* ==========================================================================
   26. The journey picture column  (2026-10-25)
   --------------------------------------------------------------------------
   The pinned stage splits in two: the station's photograph holds the left of
   the window, the rail and its cards travel across the right. They are flex
   siblings of one another, which is the whole point — the first attempt
   floated the picture OVER the full-bleed rail and the cards slid underneath
   it, which read as a mistake rather than a layout.

   Switched on by .has-canvas, which the page only writes when at least one
   station actually has a photograph. Without it, every rule here is inert and
   the rail keeps the full-bleed behaviour it has always had.

   POSITIONING NOTE. Nothing here sets `position` on .gtm-journey-stage or
   .gtm-journey-pin, and nothing puts a transform, filter or contain on
   either: a position on the stage cancels its sticky and unpins the whole
   section, and a transform there re-anchors the fixed skip buttons so they
   drift into the middle of the screen. Only margins, widths and flex are
   touched, none of which create a containing block.
   ========================================================================== */

.gtm-journey-canvas{display:none}

@media(min-width:1200px){

  /* The stage takes the whole window, then divides it.

     min-height is the one that removes the empty band. The base pinned stage
     is 70vh tall and starts ~118px down to clear the fixed header, so on a
     983px window it ended around 806px and left ~180px of bare background
     under BOTH columns for the whole time the section held the screen. Running
     it from its sticky top to the bottom of the window instead means the
     picture reaches the bottom edge and there is nothing left to show through.

     The clamp is written out here rather than read from --stage-top so this
     can never disagree with `top` if that variable is ever given a value. */
  .gtm-journey-pin.is-pinned.has-canvas .gtm-journey-stage{
    margin-inline:calc(50% - 50vw);
    width:100vw;
    align-items:stretch;        /* so the picture fills the full height */
    min-height:calc(100vh - clamp(112px, 12vh, 150px));
  }

  .gtm-journey-pin.is-pinned.has-canvas .gtm-journey-canvas{
    display:block;
    position:relative;          /* containing block for the stacked shots */
    flex:0 0 clamp(340px, 38vw, 720px);
    align-self:stretch;
    overflow:hidden;
    background:var(--gtm-canvas,#CBE3FE);
  }

  /* The rail gives up its full-bleed and takes whatever is left.
     min-width:0 is load-bearing: .gtm-journey-stops is width:max-content and
     a flex item defaults to min-width:auto, so without it the rail would
     demand its entire length and shove the picture off the screen. */
  .gtm-journey-pin.is-pinned.has-canvas .gtm-journey{
    margin-inline:0;
    width:auto;
    flex:1 1 auto;
    min-width:0;
  }

  /* Arabic reads the other way, so the picture takes the right-hand side. */
  html[dir="rtl"] .gtm-journey-pin.is-pinned.has-canvas .gtm-journey-stage{
    flex-direction:row-reverse;
  }
}

/* the station photographs, stacked; only one carries .is-on at a time */
.gtm-jshot{
  position:absolute;inset:0;margin:0;display:block;
  opacity:0;transform:scale(1.04);
  transition:opacity .55s ease, transform 1.2s cubic-bezier(.22,.8,.3,1);
}
.gtm-jshot.is-on{opacity:1;transform:scale(1)}
.gtm-jshot img{width:100%;height:100%;object-fit:cover;display:block}

@media (prefers-reduced-motion:reduce){
  /* Restated at THIS specificity on purpose. The rule that unpins the stage
     for reduced motion is .is-pinned .gtm-journey-stage (0,3,1); the
     .has-canvas rule above is (0,4,1) and would otherwise outrank it and
     leave a 100vh stage stuck on a page that is not pinning at all. */
  .gtm-journey-pin.is-pinned.has-canvas .gtm-journey-stage{
    position:static;min-height:0;margin-inline:0;width:auto;
  }
  .gtm-journey-pin.is-pinned.has-canvas .gtm-journey-canvas{display:none}
  .gtm-jshot{transition:none}
}

/* ==========================================================================
   27. Services — the before & after slider  (2026-10-25)
   --------------------------------------------------------------------------
   This is the homepage hero, reused. The section carries .banner-section and
   .home-carousel, so every rule that styles the hero (slide height, the navy
   gradient over the photograph, the white headline and its yellow rule) and
   main.js's own home_carousel() both apply to it without a line of new code.
   That is deliberate: the two sliders stay identical because they ARE the same
   slider, not because two sets of rules happen to agree.

   The only thing that needs writing here is the headline tag. The hero uses
   h1; on this page the h1 is the band at the top and the h2 is the section
   heading above the slider, so a slide's headline is an h3 and the hero's h1
   rules have to be restated for it. Values below are copied from
   .home-carousel .content-box h1 in style.css and .banner-section
   .content-box h1 in gtm-theme.css — if the hero's headline ever changes,
   change this with it.
   ========================================================================== */

/* Not the hero, so it does not take the whole window. It sits in a frame on
   the page at the same width as every other section's content, which is what
   stops it reading as a second banner. The hero's own rules are all scoped to
   .banner-section descendants, so constraining the outer box here changes the
   width without disturbing any of them. */
.gtm-revamp-slider{
  max-width:1200px;
  margin-inline:auto;
  padding-inline:15px;        /* matches .auto-container, so the frame lines
                                 up with the heading above it */
}
.gtm-revamp-slider .home-carousel{
  border-radius:16px;
  overflow:hidden;            /* clips the photograph to the frame's corners */
  box-shadow:0 18px 44px rgba(16,35,63,.16);
}
/* a touch shorter than the hero: tall enough to read as a feature, short
   enough that it is clearly a section rather than a landing banner */
.gtm-revamp-slider .slide-item{
  min-height:clamp(380px,52vh,560px);
}
@media(max-width:575px){
  .gtm-revamp-slider .slide-item{min-height:340px}
  .gtm-revamp-slider .home-carousel{border-radius:12px}
}

.gtm-revamp-slider .content-box h3{
  position:relative;display:block;
  color:#fff !important;
  font-size:56px;line-height:1.1;font-weight:800;letter-spacing:-.02em;
  margin-bottom:30px;
  opacity:0;transform:translateY(100px);
  transition:all 1000ms ease;
}
/* owl puts .active on the slide that is showing; that is what triggers the
   headline and paragraph to rise into place, exactly as on the hero */
.gtm-revamp-slider .active .content-box h3{
  opacity:1;transform:translateY(0);transition-delay:1000ms;
}
.gtm-revamp-slider .content-box h3::before{
  content:"";display:block;width:56px;height:4px;border-radius:2px;
  background:var(--gtm-yellow);margin-bottom:26px;
}

/* the theme shrinks the hero headline here, and its own h2 rule at this width
   carries !important, so this has to as well or the 48px would not stick */
@media(max-width:425px){
  .gtm-revamp-slider .content-box h3{
    font-size:48px !important;line-height:54px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .gtm-revamp-slider .content-box h3{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   28. Journey: equipment chips with a per-item badge, and the connector
       (2026-10-26)
   --------------------------------------------------------------------------
   Most stations mix machines GTM builds with instruments it represents, so
   the badge belongs on the CHIP rather than on the card — a single label at
   card level cannot say "these two are ours and that one is Bruker's" without
   being wrong about one of them.

   Three values only: GTM, Bruker, and everything else as a partner brand.
   They are told apart by weight and a small tag, not by colour alone, so the
   distinction survives a greyscale print and does not depend on anyone
   knowing what the yellow means.
   ========================================================================== */

.gtm-stop-card .machs .mach{
  display:inline-flex;align-items:baseline;gap:7px;
}
/* the tag itself: small, uppercase, and quieter than the equipment name */
.gtm-stop-card .machs .mach em{
  font-style:normal;font-family:var(--fb);font-weight:700;
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 5px;border-radius:4px;white-space:nowrap;
}
.gtm-stop-card .machs .mach.is-gtm em{
  background:var(--gtm-yellow);color:var(--gtm-navy);
}
.gtm-stop-card .machs .mach.is-bruker em{
  background:var(--gtm-navy);color:#fff;
}
.gtm-stop-card .machs .mach.is-partner em{
  background:transparent;color:var(--gtm-label,#23405A);
  border:1px solid currentColor;opacity:.75;
}

/* Every chip is a link to its machine. The theme turns a hovered chip yellow,
   which would swallow the yellow GTM badge sitting inside it — so on hover the
   badges flip to navy, which reads against yellow whichever badge it is. */
a.mach.is-gtm:hover em,
a.mach.is-bruker:hover em,
a.mach.is-partner:hover em{
  background:var(--gtm-navy);color:#fff;border-color:var(--gtm-navy);opacity:1;
}

/* --- the connector between two stations --------------------------------
   A link, not a step: no card, and no .gtm-stop class, so the scroll never
   stops on it. The mark paints itself the page colour for the same reason
   the station dots do — it sits ON the road and has to hide the line behind
   it, or the dashes and the road overlap into a smudge. */
.gtm-link{
  position:relative;align-self:stretch;
  display:grid;place-items:center;
}
.gtm-link-mark{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--gtm-canvas,#DFEDFE);
  border:2px dashed var(--gtm-navy-muted,#5A6472);
  color:var(--gtm-label,#23405A);
  opacity:.9;
}
.gtm-link-mark svg{width:20px;height:20px}
.gtm-link-label{
  position:absolute;top:calc(50% + 36px);left:50%;transform:translateX(-50%);
  white-space:nowrap;
  font-family:var(--fb);font-weight:600;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--gtm-label,#23405A);opacity:.7;
}

@media(max-width:900px){
  /* stacked layout on a phone: the connector becomes a short vertical gap */
  .gtm-link{min-height:74px}
  .gtm-link-label{top:calc(50% + 30px)}
}


/* ==========================================================================
   29. The contact form's hidden spam trap  (2026-10-27)
   --------------------------------------------------------------------------
   Deliberately NOT display:none. Plenty of form bots skip hidden inputs, so a
   display:none trap catches far less; parking it off-screen leaves it a real,
   fillable field in the DOM while keeping it away from everyone else. It is
   aria-hidden and tabindex=-1 in the markup, so a screen reader never reads it
   out and a keyboard user cannot land on it by accident.
   ========================================================================== */
.gtm-hp{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* ==========================================================================
   30. Services before/after slider: the picture IS the slide (2026-10-29)
   --------------------------------------------------------------------------
   The slides are finished 1600 x 800 compositions with their own wording, so
   the hero treatment is undone here: no navy gradient or tint over the image,
   no cropping, and the frame takes the picture's own 2 : 1 shape instead of a
   fixed height. background-size:contain shows the whole picture; at exactly
   2 : 1 it fills the frame edge to edge, and a picture of another shape is
   letterboxed on navy rather than cut.
   ========================================================================== */
.banner-section.gtm-revamp-slider .slide-item{
  min-height:0;
  height:auto;
  padding:0;
  aspect-ratio:2 / 1;
  background:var(--gtm-navy,#10233F);
}
.banner-section.gtm-revamp-slider .slide-item::before,
.banner-section.gtm-revamp-slider .slide-item .image-layer::before,
.banner-section.gtm-revamp-slider .slide-item .image-layer::after{
  content:none;
  display:none;
}
.banner-section.gtm-revamp-slider .slide-item .image-layer{
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  filter:none;
  opacity:1;
}
/* if a slide does have typed text, keep it legible without a tint */
.banner-section.gtm-revamp-slider .content-box h3,
.banner-section.gtm-revamp-slider .content-box p{
  text-shadow:0 2px 14px rgba(0,0,0,.55);
}
@media(max-width:575px){
  .banner-section.gtm-revamp-slider .slide-item{min-height:0}
}

/* ==========================================================================
   31. Header dropdowns grow with their text  (2026-10-29)
   --------------------------------------------------------------------------
   The theme gives every dropdown a fixed 220px, so a long brand or category
   name ran past the panel's edge. Now each panel is as wide as its longest
   item: never narrower than before, and capped so a very long name wraps
   inside the panel instead of running off the screen.
   ========================================================================== */
.header-style-one .header-wrapper .header-navigation-area .main-menu ul li ul.sub-menu,
.header-style-two .header-wrapper .header-navigation-area .main-menu ul li ul.sub-menu{
  width:max-content;
  min-width:220px;
  max-width:min(360px,90vw);
}
.header-style-one .header-wrapper .header-navigation-area .main-menu ul li ul.sub-menu li a,
.header-style-two .header-wrapper .header-navigation-area .main-menu ul li ul.sub-menu li a,
.header-style-one .header-wrapper .header-navigation-area .main-menu ul li ul.sub-menu li ul.sub-menu li a,
.header-style-two .header-wrapper .header-navigation-area .main-menu ul li ul.sub-menu li ul.sub-menu li a{
  white-space:normal;
  overflow-wrap:anywhere;
}