/* integrit.co.za, the trade pages (/plumbing, /electrical), 16 October 2026, find-us fix 5.

   Copied from the home page's own styles (index.html, v6, the product canvas), not designed fresh:
   the same tokens, cards, pills, window, mini screens, questions, phone card and footer. The tokens
   must stay equal to the home page :root; tests/test_find_us.py fails if they drift. Only what the
   trade pages use is here, and nothing on them needs a script: every word is in the page as sent,
   so a machine reads it without running anything. */

:root{
  --canvas:     #eef1f4;
  --card:       #FFFFFF;
  --card-2:     #f6f7f9;
  --line:       #e3e8ec;
  --rule:       #c9d2da;
  --ink:        #111111;
  --ink-2:      #1c2b36;
  --muted:      #5C646C;
  --muted-2:    #6A7078;
  --navy:       #0f2435;
  --black:      #0b0f14;
  --teal:       #0E8F75;
  --teal-deep:  #0a6e5a;
  --teal-brt:   #3EC9A7;
  --on-teal:    #062018;
  --signal:     #C0392B;
  --on-dark:    #eef3f7;
  --on-dark-2:  #9fb3c2;
  --f-body:     "Inter", system-ui, -apple-system, sans-serif;
  --f-display:  "Inter", system-ui, -apple-system, sans-serif;
  --f-mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --r-card:     28px;
  --r-mid:      20px;
  --r-chip:     12px;
  --r-pill:     999px;
  --shadow:     0 24px 60px rgba(15,36,53,.14);
  --shadow-sm:  0 10px 30px rgba(15,36,53,.10);
  --gap:        16px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--canvas); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3{ font-family:var(--f-display); font-weight:600; letter-spacing:-0.035em; line-height:1.02; margin:0; text-wrap:balance; }
h2{ font-size:clamp(30px,4vw,48px); }
h3{ font-size:20px; letter-spacing:-0.02em; font-weight:600; }
p{ margin:0; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:6px; }
.dark :focus-visible, .black :focus-visible, .nav :focus-visible, .phone-bar :focus-visible{ outline-color:var(--teal-brt); }

.canvas{ max-width:1400px; margin:0 auto; padding:var(--gap); display:flex; flex-direction:column; gap:var(--gap); }
.card{ background:var(--card); border-radius:var(--r-card); }
.inner{ padding:56px 64px; }
.dark{ background:var(--navy); color:var(--on-dark); }
.dark h2,.dark h3{ color:#fff; }
.black{ background:var(--black); color:var(--on-dark); }
.eyebrow{ font-family:var(--f-mono); font-size:12px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--teal-deep); margin:0 0 16px; }
.dark .eyebrow,.black .eyebrow{ color:var(--teal-brt); }
.lede{ font-size:19px; line-height:1.55; color:var(--muted); max-width:34em; margin-top:18px; }
.dark .lede,.black .lede{ color:var(--on-dark-2); }
.mono{ font-family:var(--f-mono); }

/* pills */
.pill{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--f-body); font-weight:600; font-size:16px; line-height:1; padding:0 26px; min-height:52px; border-radius:var(--r-pill); border:1px solid transparent; text-decoration:none; cursor:pointer; transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.pill-black{ background:var(--ink); color:#fff; }
.pill-black:hover{ background:var(--navy); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.pill-white{ background:#fff; color:var(--ink); border-color:var(--line); }
.pill-white:hover{ border-color:var(--ink); transform:translateY(-1px); }
.pill-teal{ background:var(--teal-brt); color:var(--on-teal); }
.pill-teal:hover{ background:#fff; color:var(--ink); transform:translateY(-1px); }
.pill-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

/* nav: a pill, inside the hero card */
.nav{ display:flex; align-items:center; gap:26px; height:66px; padding:0 10px 0 22px; border:1px solid var(--line); border-radius:var(--r-pill); background:#fff; position:sticky; top:12px; z-index:20; box-shadow:0 8px 24px rgba(15,36,53,.06); }
.nav-brand{ display:flex; align-items:center; gap:11px; font-weight:700; font-size:19px; letter-spacing:-0.02em; text-decoration:none; color:var(--ink); }
.nav-brand img{ height:34px; width:auto; flex:none; }
.nav-brand > span{ white-space:nowrap; }
.nav-brand .accent{ color:var(--teal); }
.nav-links{ display:flex; align-items:center; gap:26px; margin-left:auto; }
.nav-links a{ font-size:15px; text-decoration:none; color:var(--muted); }
.nav-links a:hover{ color:var(--ink); }
.nav-links a.nav-cta{ min-height:46px; padding:0 22px; font-size:15px; color:#fff; }

/* hero card */
.hero{ padding:14px 14px 40px; position:relative; isolation:isolate; overflow:hidden; }
.hero > .inner{ position:relative; z-index:1; padding:36px 50px 0; }
.hero::before{ content:""; position:absolute; inset:-10% -5% auto -5%; height:120%; pointer-events:none; z-index:0; background:radial-gradient(52% 44% at 20% 20%, rgba(14,143,117,.08), transparent 66%); }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:40px; align-items:center; margin-top:44px; }
.hero h1{ font-size:clamp(34px,4vw,56px); }
.hero h1 em{ font-style:normal; color:var(--teal); }
.hero .lede{ margin-top:22px; max-width:26em; }
.spec{ margin-top:44px; padding-top:20px; border-top:1px solid var(--line); max-width:30em; }
.spec p{ font-size:14px; color:var(--muted); line-height:1.5; }
.spec-facts{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:8px; font-size:13px; color:var(--ink); }
.spec-facts span{ border-bottom:1px solid var(--rule); padding-bottom:2px; }

/* the example window: the same shape as the home page's, written into the page */
.stage{ position:relative; padding:24px 10px 10px; margin:0; }
.win{ background:var(--card); color:var(--ink-2); border-radius:var(--r-mid); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); }
.win-bar{ display:flex; align-items:center; gap:10px; height:40px; padding:0 16px; background:var(--navy); color:#fff; font-family:var(--f-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; }
.win-dots{ display:flex; gap:6px; }
.win-dots i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.25); }
.win-dots i:first-child{ background:var(--teal-brt); }
.win-bar > span:not(.win-dots):not(.win-tag){ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.win-tag{ margin-left:auto; flex:none; padding:2px 8px; border:1px solid rgba(255,255,255,.28); border-radius:6px; color:var(--on-dark-2); white-space:nowrap; font-size:10px; }
.win-body{ display:grid; grid-template-columns:150px minmax(0,1fr); }
.win-side,.win-main{ min-width:0; }
.win-side{ background:var(--card-2); border-right:1px solid var(--line); padding:16px 0; }
.win-side-h{ font-family:var(--f-mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted-2); padding:0 16px 10px; }
.win-side ul{ list-style:none; margin:0; padding:0; }
.mod{ padding:8px 16px; font-size:13.5px; color:var(--muted); border-left:3px solid transparent; }
.mod-on{ background:#fff; border-left-color:var(--teal); color:var(--ink); font-weight:600; }
.win-main{ padding:22px 24px 24px; }
.win-title{ font-size:19px; font-weight:600; letter-spacing:-0.02em; line-height:1.05; margin:0; }
.win-sub{ font-size:13px; color:var(--muted); margin-top:4px; }
.stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:20px 0 4px; }
.stat-v{ font-family:var(--f-mono); font-size:24px; font-weight:500; color:var(--teal-deep); line-height:1; }
.stat-l{ font-size:11.5px; color:var(--muted); margin-top:6px; }
.rows{ margin-top:14px; }
.row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--line); }
.row-ref{ font-family:var(--f-mono); font-size:11px; font-weight:500; width:36px; height:28px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--card-2); color:var(--muted); border-radius:8px; }
.row-main{ min-width:0; }
.row-main b{ display:block; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-main span{ display:block; font-size:12.5px; color:var(--muted); margin-top:1px; }
.tag{ margin-left:auto; flex:none; font-family:var(--f-mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; padding:5px 9px; border-radius:var(--r-pill); white-space:nowrap; }
.tag-accent{ background:#E3F5EF; color:var(--teal-deep); }
.tag-accent-2{ background:#FBE7E4; color:#96271b; }
.tag-neutral{ background:var(--card-2); color:var(--muted); }
.stage figcaption, .shot figcaption{ font-size:13px; color:var(--muted); margin-top:12px; line-height:1.45; }
.dark .shot figcaption{ color:var(--on-dark-2); }

/* what it holds: the dark card with three example screens */
.replace{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:44px; }
.replace > div{ min-width:0; }
.shot{ margin:0; }
.mini{ border-radius:16px; overflow:hidden; background:var(--card); color:var(--ink-2); border:1px solid rgba(255,255,255,.08); box-shadow:0 18px 44px rgba(0,0,0,.28); }
.mini-bar{ display:flex; align-items:center; gap:8px; height:30px; padding:0 12px; background:var(--card-2); border-bottom:1px solid var(--line); color:var(--muted); font-family:var(--f-mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; }
.mini-bar i{ width:6px; height:6px; border-radius:50%; background:var(--teal-brt); }
.mini-bar span{ margin-left:auto; opacity:.8; }
.mini-body{ padding:14px 16px 16px; }
.mini-kpi{ display:flex; gap:18px; padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.mini-kpi b{ display:block; font-family:var(--f-mono); font-weight:500; font-size:19px; color:var(--teal-deep); letter-spacing:-0.02em; }
.mini-kpi span{ font-size:11px; color:var(--muted); }
.mini-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line); font-size:13px; }
.mini-row:first-child, .mini-kpi + .mini-row{ border-top:0; }
.mini-row b{ font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mini-row .mono{ font-size:12px; color:var(--muted); white-space:nowrap; }
.mini-row .tag{ margin-left:0; }
.replace h3{ margin-top:20px; color:#fff; }
.replace p{ font-size:15.5px; color:var(--on-dark-2); margin-top:8px; }
.holds{ list-style:none; margin:40px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; }
.holds li{ padding:12px 0 12px 18px; border-top:1px solid rgba(255,255,255,.14); position:relative; font-size:16px; color:var(--on-dark); }
.holds li::before{ content:""; position:absolute; left:0; top:24px; width:8px; height:1px; background:var(--teal-brt); }
.holds-note{ margin-top:28px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14); font-size:15px; color:var(--on-dark-2); max-width:52em; }

/* the free document */
.doc{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr); gap:40px; align-items:start; }
.doc-points{ list-style:none; margin:0; padding:0; }
.doc-points li{ padding:12px 0 12px 18px; border-top:1px solid var(--line); position:relative; font-size:15.5px; color:var(--muted); }
.doc-points li:last-child{ border-bottom:1px solid var(--line); }
.doc-points li::before{ content:""; position:absolute; left:0; top:24px; width:8px; height:1px; background:var(--teal); }
.doc-note{ margin-top:16px; font-size:13px; color:var(--muted); }

/* questions */
.faq{ margin-top:34px; }
.faq details{ border-top:1px solid var(--line); }
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0; font-size:18px; font-weight:600; letter-spacing:-0.01em; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--f-mono); font-size:20px; color:var(--teal); flex:none; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; transition:transform .2s ease; }
.faq details[open] summary::after{ content:"\2212"; transform:rotate(180deg); }
.faq details p{ padding:0 0 22px; font-size:16px; color:var(--muted); max-width:46em; }

/* the phone card */
.call{ text-align:center; }
.call .inner{ padding:72px 40px; }
.tel-big{ display:inline-block; font-family:var(--f-mono); font-weight:500; letter-spacing:-0.02em; font-size:clamp(40px,7.5vw,104px); color:#fff; text-decoration:none; line-height:1; margin-top:18px; transition:color .2s ease; }
.tel-big:hover{ color:var(--teal-brt); }
.call .lede{ margin:22px auto 0; max-width:34em; }
.call .pill-row{ justify-content:center; }
.call-ways{ margin-top:26px; font-size:14px; color:var(--on-dark-2); }
.call-ways a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); }

/* footer */
footer{ padding:10px 24px 40px; color:var(--muted); }
.foot{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); gap:32px; padding:28px 0; border-top:1px solid var(--rule); }
.foot-brand{ display:flex; align-items:center; gap:12px; font-weight:700; font-size:20px; letter-spacing:-0.02em; color:var(--ink); }
.foot-brand img{ height:48px; width:auto; flex:none; }
.foot-brand .accent{ color:var(--teal); }
.foot p{ font-size:14px; margin-top:12px; max-width:30em; }
.foot h3{ font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; line-height:1.4; }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.foot a{ display:inline-flex; align-items:center; min-height:38px; font-size:14.5px; text-decoration:none; color:var(--ink); }
.foot a:hover{ color:var(--teal); }
.foot p a{ display:inline; min-height:0; font-size:inherit; text-decoration:underline; }
.foot-base{ display:flex; flex-wrap:wrap; gap:8px 30px; justify-content:space-between; font-size:13px; color:var(--muted); padding-top:16px; border-top:1px solid var(--line); }
.foot-base a{ color:var(--ink); }

/* phone bar */
.phone-bar{ display:none; }
@media (max-width:820px){
  .phone-bar{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:30; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.94); border-top:1px solid var(--line); }
  .phone-bar a{ min-height:48px; padding:0 14px; font-size:15px; }
  body{ padding-bottom:74px; }
}

/* motion */
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.r1{ animation:rise .7s .05s ease-out both; }
.r2{ animation:rise .7s .16s ease-out both; }
.r3{ animation:rise .7s .27s ease-out both; }
@media (prefers-reduced-motion: reduce){
  .r1,.r2,.r3{ animation:none; }
  .pill{ transition:none; }
  .pill:hover{ transform:none; }
}

/* responsive. Every one-column grid is minmax(0,1fr), never a bare 1fr (it overflowed a phone on the home page). */
/* the trade video (16 Oct 2026): the wide cut on a laptop, the tall cut on a phone; preload none, so nothing downloads until play */
.watch{ display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:40px; align-items:center; }
.watch-frame{ min-width:0; }
.watch-frame video{ display:block; width:100%; height:auto; border-radius:16px; background:#000; }
.watch-frame .v-tall{ display:none; }
@media (max-width:820px){
  .watch{ grid-template-columns:minmax(0,1fr); gap:24px; }
  .watch-frame .v-wide{ display:none; }
  .watch-frame .v-tall{ display:block; width:100%; max-width:420px; max-height:78vh; margin:0 auto; }
}

@media (max-width:1100px){
  .inner{ padding:44px 40px; }
  .hero > .inner{ padding:28px 30px 0; }
  .hero-grid{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .replace{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .doc{ grid-template-columns:minmax(0,1fr); gap:24px; }
}
@media (max-width:820px){
  :root{ --gap:12px; }
  .inner{ padding:34px 22px; }
  .hero{ padding:10px 10px 28px; }
  .hero > .inner{ padding:20px 14px 0; }
  .nav{ height:60px; gap:14px; padding:0 8px 0 16px; top:8px; }
  .nav-brand{ font-size:17px; gap:9px; }
  .nav-brand img{ height:30px; }
  .nav-links{ gap:14px; }
  .nav-links a:not(.nav-cta):not(.nav-keep){ display:none; }
  .hero-grid{ margin-top:30px; }
  .stage{ padding:14px 0 0; }
  .win-body{ grid-template-columns:minmax(0,1fr); }
  .win-side{ border-right:0; border-bottom:1px solid var(--line); padding:12px 0; }
  .win-side ul{ display:flex; overflow-x:auto; gap:4px; padding:0 14px; }
  .mod{ border-left:0; border-bottom:3px solid transparent; white-space:nowrap; padding:7px 10px; }
  .mod-on{ border-bottom-color:var(--teal); }
  .stats{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .stat-v{ font-size:19px; }
  .holds{ grid-template-columns:minmax(0,1fr); }
  .foot{ grid-template-columns:minmax(0,1fr); gap:24px; }
  .call .inner{ padding:52px 20px; }
}
@media (max-width:560px){
  .nav-keep{ display:none; }
  .pill{ width:100%; }
  .nav .pill{ width:auto; }
  /* the window's title bar wraps on a phone, so the name and the whole example label both show */
  .win-bar{ height:auto; min-height:40px; flex-wrap:wrap; row-gap:6px; padding:10px 14px; }
  .win-tag{ flex:0 1 auto; margin-left:0; white-space:normal; line-height:1.4; }
}