/* Trade Time HQ - one material for each trade page (2026-10-25).
   Owner: "give each page textures like saw time and make each trade page theme
   with there color, detail the boxes and shade and polish, make each page
   distinct design according to the trades."

   Saw Time's site is concrete and steel: layered noise, nothing painted on.
   Each trade gets its own material the same way:
     plumbing     stainless steel and water - blueprint grid, ripples, riveted plates, a pipe between sections
     landscaping  soil and turf             - contour lines, mowing stripes, field cards with a turf edge
     electrical   panel steel and hazard    - circuit traces, brushed steel, screwed panel doors, hazard tape
     hvac         sheet metal and airflow   - galvanised spangle, louvres, folded-corner duct plates
     sawtime      concrete and steel        - the Saw Time look itself

   COLOUR RULE: only existing colours. Trade colours are var(--t...) or
   color-mix() of them; patterns in img/tex/ use the trade's own token hex.
   Loaded LAST on the trade pages, after walk.css. Delete the file and the
   pages go back exactly to how they were. */

body[data-trade]{
  --brush-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='300'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='2000' height='300' filter='url(%23b)'/%3E%3C/svg%3E");
  --brush-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='300'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='2000' height='300' filter='url(%23b)'/%3E%3C/svg%3E");
  --mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .17 0 0 0 0 .14 .4 0 0 0 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  --conc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .1 0 0 0 0 .09 .55 0 0 0 -.16'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --spangle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='turbulence' baseFrequency='.035' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 -.06'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23s)'/%3E%3C/svg%3E");
  --card-lift:0 1px 0 rgba(255,255,255,.9) inset,0 2px 4px rgba(20,18,16,.05),0 22px 44px -22px rgba(20,18,16,.38);
}

/* ===== shared by every trade: the parts every trade page has ===== */
body[data-trade] .proc li::before{color:var(--t-on);background:linear-gradient(180deg,var(--t-hi),var(--t));
  box-shadow:0 0 0 5px color-mix(in srgb,var(--t) 18%,transparent),0 8px 18px -8px color-mix(in srgb,var(--t-ink) 90%,transparent)}
body[data-trade] .proc li::after{background:color-mix(in srgb,var(--t) 40%,transparent)}
body[data-trade] .kind,body[data-trade] .paper-card,body[data-trade] .mo,body[data-trade] .dm,body[data-trade] .form{box-shadow:var(--card-lift)}
body[data-trade] .kind{transition:transform .2s,box-shadow .2s}
body[data-trade] .kind:hover{transform:translateY(-3px)}
body[data-trade] .kind-ico{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t) 30%,transparent),inset 0 -6px 12px -8px color-mix(in srgb,var(--t-ink) 40%,transparent)}
body[data-trade] .faq details[open]{box-shadow:var(--card-lift),inset 4px 0 0 var(--t)}
body[data-trade] .faq summary::marker,body[data-trade] .faq summary::-webkit-details-marker{color:var(--t-ink)}
/* a band between sections in the trade's own make (each trade sets --seam) */
body[data-trade] main > section + section{border-top:var(--seam-h,0) solid transparent;border-image:var(--seam) 1 stretch}

/* ================= PLUMBING - stainless steel and water ================= */
body[data-trade=plumbing]{
  --seam-h:10px;
  --seam:linear-gradient(180deg,var(--t-ink) 0,var(--t) 30%,var(--t-hi) 48%,var(--t) 66%,var(--t-ink) 100%);
  background:
    linear-gradient(color-mix(in srgb,var(--t) 7%,transparent) 1px,transparent 1px) 0 0/120px 120px,
    linear-gradient(90deg,color-mix(in srgb,var(--t) 7%,transparent) 1px,transparent 1px) 0 0/120px 120px,
    linear-gradient(color-mix(in srgb,var(--t) 3.5%,transparent) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg,color-mix(in srgb,var(--t) 3.5%,transparent) 1px,transparent 1px) 0 0/24px 24px,
    var(--grain-l),var(--ivory)}
body[data-trade=plumbing] .dark,body[data-trade=plumbing] .pl-truth,body[data-trade=plumbing] .wk-top{
  background:url(img/tex/waves-d.svg) 0 0/240px 60px,var(--brush-d),var(--grain-d),
    radial-gradient(1000px 520px at 88% -10%,color-mix(in srgb,var(--t) 26%,transparent),transparent 70%),var(--ink);
  background-blend-mode:soft-light,normal,normal,normal,normal}
body[data-trade=plumbing] .panel-l{background:var(--brush-l),var(--grain-l),
    radial-gradient(1200px 500px at 100% 0%,color-mix(in srgb,var(--t) 10%,transparent),transparent 70%),var(--ivory2)}
/* stainless plates with a rivet in each corner */
body[data-trade=plumbing] .kind,body[data-trade=plumbing] .mo,body[data-trade=plumbing] .paper-card{
  background:
    radial-gradient(circle at 12px 12px,color-mix(in srgb,var(--t-ink) 55%,transparent) 2.5px,transparent 3.5px),
    radial-gradient(circle at calc(100% - 12px) 12px,color-mix(in srgb,var(--t-ink) 55%,transparent) 2.5px,transparent 3.5px),
    radial-gradient(circle at 12px calc(100% - 12px),color-mix(in srgb,var(--t-ink) 55%,transparent) 2.5px,transparent 3.5px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),color-mix(in srgb,var(--t-ink) 55%,transparent) 2.5px,transparent 3.5px),
    var(--brush-l),linear-gradient(180deg,#fff,color-mix(in srgb,var(--t) 5%,#fff));
  border-color:color-mix(in srgb,var(--t) 22%,transparent)}
body[data-trade=plumbing] .kind-ico{border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--t-tint) 60%)}
body[data-trade=plumbing] .faq details{border-radius:999px 999px 18px 18px/24px 24px 18px 18px;border-color:color-mix(in srgb,var(--t) 22%,transparent)}
body[data-trade=plumbing] .faq details[open]{border-radius:18px}
body[data-trade=plumbing] .form{background:var(--brush-l),linear-gradient(180deg,#fff,color-mix(in srgb,var(--t) 4%,#fff));
  border:1px solid color-mix(in srgb,var(--t) 25%,transparent);box-shadow:inset 0 6px 0 var(--t),var(--card-lift)}

/* ================= LANDSCAPING - soil and turf ================= */
body[data-trade=landscaping]{
  --seam-h:12px;
  --seam:repeating-linear-gradient(90deg,var(--t) 0 46px,var(--t-ink) 46px 92px);
  background:url(img/tex/topo.svg) 0 0/600px 600px,var(--grain-l),
    radial-gradient(1400px 700px at 0% 20%,color-mix(in srgb,var(--t) 6%,transparent),transparent 70%),
    radial-gradient(1200px 800px at 100% 70%,color-mix(in srgb,var(--t-ink) 5%,transparent),transparent 70%),var(--ivory);
  background-attachment:scroll,scroll,fixed,fixed,scroll}
body[data-trade=landscaping] .dark,body[data-trade=landscaping] .pl-truth,body[data-trade=landscaping] .wk-top{
  background:
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--t) 9%,transparent) 0 140px,transparent 140px 280px),
    url(img/tex/topo-d.svg) 0 0/600px 600px,var(--grain-d),
    radial-gradient(1000px 520px at 12% -10%,color-mix(in srgb,var(--t) 24%,transparent),transparent 70%),var(--ink);
  background-blend-mode:normal,soft-light,normal,normal,normal}
body[data-trade=landscaping] .panel-l{background:url(img/tex/topo.svg) 300px 120px/600px 600px,var(--grain-l),
    radial-gradient(1200px 500px at 0% 0%,color-mix(in srgb,var(--t) 12%,transparent),transparent 70%),var(--ivory2)}
/* field cards: soft and rounded, a mowed-turf edge along the top */
body[data-trade=landscaping] .kind,body[data-trade=landscaping] .paper-card,body[data-trade=landscaping] .form{
  border-radius:22px;background:var(--grain-l),linear-gradient(180deg,color-mix(in srgb,var(--t) 6%,#fff),#fff 70%);
  border:1px solid color-mix(in srgb,var(--t) 20%,transparent)}
body[data-trade=landscaping] .kind{border-top:0;position:relative;overflow:hidden;padding-top:calc(var(--s3) + 10px)}
body[data-trade=landscaping] .kind::after{content:"";position:absolute;left:0;right:0;top:0;height:10px;
  background:repeating-linear-gradient(90deg,var(--t) 0 22px,var(--t-ink) 22px 44px)}
body[data-trade=landscaping] .kind-ico{border-radius:50% 50% 50% 8px;background:linear-gradient(160deg,var(--t-tint),color-mix(in srgb,var(--t) 22%,#fff))}
body[data-trade=landscaping] .faq details{border-radius:22px;border-color:color-mix(in srgb,var(--t) 20%,transparent);background:color-mix(in srgb,var(--t) 4%,#fff)}
body[data-trade=landscaping] .form{box-shadow:inset 0 10px 0 var(--t),var(--card-lift)}

/* ================= ELECTRICAL - panel steel and hazard tape ================= */
body[data-trade=electrical]{
  --seam-h:12px;
  --seam:repeating-linear-gradient(-45deg,var(--t) 0 14px,var(--t-on) 14px 28px);
  background:url(img/tex/circuit.svg) 0 0/320px 320px,var(--brush-l),var(--grain-l),var(--ivory);
  background-blend-mode:normal}
body[data-trade=electrical] .dark,body[data-trade=electrical] .pl-truth,body[data-trade=electrical] .wk-top{
  background:url(img/tex/circuit-d.svg) 0 0/320px 320px,var(--brush-d),var(--brush-d),var(--grain-d),
    radial-gradient(900px 480px at 85% -10%,color-mix(in srgb,var(--t) 20%,transparent),transparent 70%),
    linear-gradient(180deg,var(--char),var(--ink));
  background-blend-mode:soft-light,normal,normal,normal,normal,normal}
body[data-trade=electrical] .panel-l{background:var(--brush-l),var(--grain-l),
    radial-gradient(1200px 500px at 100% 0%,color-mix(in srgb,var(--t) 14%,transparent),transparent 70%),var(--ivory2)}
/* panel doors: brushed steel, a screw in each corner, hazard tape across the top */
body[data-trade=electrical] .kind,body[data-trade=electrical] .paper-card,body[data-trade=electrical] .mo,body[data-trade=electrical] .form{
  border-radius:6px;border:1px solid rgba(20,18,16,.18);
  background:
    radial-gradient(circle at 13px 13px,rgba(20,18,16,.45) 0 3px,rgba(255,255,255,.9) 3.5px 4.5px,transparent 5px),
    radial-gradient(circle at calc(100% - 13px) 13px,rgba(20,18,16,.45) 0 3px,rgba(255,255,255,.9) 3.5px 4.5px,transparent 5px),
    radial-gradient(circle at 13px calc(100% - 13px),rgba(20,18,16,.45) 0 3px,rgba(255,255,255,.9) 3.5px 4.5px,transparent 5px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px),rgba(20,18,16,.45) 0 3px,rgba(255,255,255,.9) 3.5px 4.5px,transparent 5px),
    var(--brush-l),linear-gradient(180deg,#fff,var(--ivory2))}
body[data-trade=electrical] .kind{border-top:0;position:relative;padding-top:calc(var(--s3) + 14px)}
body[data-trade=electrical] .kind::after{content:"";position:absolute;left:0;right:0;top:0;height:12px;border-radius:6px 6px 0 0;
  background:repeating-linear-gradient(-45deg,var(--t) 0 12px,var(--t-on) 12px 24px)}
body[data-trade=electrical] .kind-ico{border-radius:8px;background:var(--t-on);color:var(--t);box-shadow:inset 0 0 0 2px var(--t),0 6px 14px -8px rgba(20,18,16,.6)}
body[data-trade=electrical] .faq details{border-radius:6px;border-left:6px solid var(--t)}
body[data-trade=electrical] .form{box-shadow:inset 0 10px 0 var(--t),var(--card-lift)}
body[data-trade=electrical] .wk-n span,body[data-trade=electrical] .wk-jump a::before{box-shadow:inset 0 0 0 2px var(--t-on)}

/* ================= HVAC - sheet metal and airflow ================= */
body[data-trade=hvac]{
  --seam-h:12px;
  --seam:repeating-linear-gradient(180deg,var(--t-ink) 0 2px,var(--t) 2px 4px);
  background:var(--spangle),var(--brush-l),var(--grain-l),
    linear-gradient(180deg,color-mix(in srgb,var(--t) 4%,var(--ivory)),var(--ivory));
  background-blend-mode:soft-light,normal,normal,normal}
body[data-trade=hvac] .dark,body[data-trade=hvac] .pl-truth,body[data-trade=hvac] .wk-top{
  background:
    repeating-linear-gradient(180deg,rgba(255,255,255,.055) 0 2px,rgba(0,0,0,.18) 2px 4px,transparent 4px 16px),
    var(--grain-d),
    radial-gradient(1000px 520px at 88% -10%,color-mix(in srgb,var(--t) 24%,transparent),transparent 70%),
    linear-gradient(180deg,var(--char),var(--ink))}
body[data-trade=hvac] .panel-l{background:var(--spangle),var(--grain-l),
    radial-gradient(1200px 500px at 100% 0%,color-mix(in srgb,var(--t) 10%,transparent),transparent 70%),var(--ivory2);
  background-blend-mode:soft-light,normal,normal,normal}
/* duct plates: folded corner, a seam line just inside the edge */
body[data-trade=hvac] .kind,body[data-trade=hvac] .paper-card,body[data-trade=hvac] .mo,body[data-trade=hvac] .form{
  border-radius:4px;border:1px solid color-mix(in srgb,var(--t) 28%,transparent);
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%);
  background:
    linear-gradient(225deg,color-mix(in srgb,var(--t) 35%,transparent) 0 18px,transparent 18.5px),
    var(--spangle),var(--brush-l),linear-gradient(180deg,#fff,color-mix(in srgb,var(--t) 5%,#fff));
  background-blend-mode:normal,soft-light,normal,normal;
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.7),inset 0 0 0 6px color-mix(in srgb,var(--t) 22%,transparent)}
body[data-trade=hvac] .kind{border-top:6px solid var(--t)}
body[data-trade=hvac] .kind-ico{border-radius:4px;
  background:repeating-linear-gradient(180deg,var(--t-tint) 0 5px,color-mix(in srgb,var(--t) 25%,#fff) 5px 7px)}
body[data-trade=hvac] .faq details{border-radius:4px;border-color:color-mix(in srgb,var(--t) 22%,transparent)}
body[data-trade=hvac] .faq details[open]{box-shadow:var(--card-lift),inset 0 4px 0 var(--t)}

/* ================= SAW TIME - concrete and steel, its own site's look ================= */
body[data-trade=sawtime]{
  --seam-h:4px;
  --seam:linear-gradient(90deg,transparent,var(--t) 20%,var(--t) 80%,transparent);
  background:var(--mottle),var(--conc),var(--ivory2)}
body[data-trade=sawtime] .stp-hero,body[data-trade=sawtime] .stp-end{
  background:var(--brush-d),var(--grain-d),radial-gradient(900px 420px at 85% -10%,color-mix(in srgb,var(--t) 22%,transparent),transparent 70%),linear-gradient(180deg,var(--char),var(--ink))}

@media print{ body[data-trade]{background:#fff} body[data-trade] main > section + section{border-top:0} }

/* the "Availability" note on each kind of work, in the trade's colour */
body[data-trade] .avail.build{color:var(--t-ink);border-color:color-mix(in srgb,var(--t) 45%,transparent);background:color-mix(in srgb,var(--t) 8%,#fff)}
body[data-trade] .avail.build svg{color:var(--t-ink)}

/* the small labels and the "built for you" tag in the trade's colour, not the parent orange and blue */
body[data-trade] .kicker{color:var(--t-ink)}
body[data-trade] .dark .kicker,body[data-trade] .pl-truth .kicker,body[data-trade] .wk-top .kicker,body[data-trade] .pl-band-txt .kicker{color:var(--t-hi)}
body[data-trade] .pl-truth .tag.build{background:color-mix(in srgb,var(--t) 20%,transparent);color:var(--t-hi);border-color:color-mix(in srgb,var(--t) 40%,transparent)}

/* the Saw Time page itself: a cut slab with saw-cut joints, steel plates, a bezel round the screens */
body[data-trade=sawtime]{
  --seam-h:6px;
  --seam:repeating-linear-gradient(90deg,var(--t) 0 30px,transparent 30px 36px);
  --kerf:repeating-linear-gradient(90deg,transparent 0 319px,rgba(20,18,16,.10) 319px 321px,transparent 321px 640px),
         repeating-linear-gradient(180deg,transparent 0 319px,rgba(20,18,16,.10) 319px 321px,transparent 321px 640px)}
body[data-trade=sawtime] .stp-board{
  background:var(--brush-d),var(--grain-d),
    radial-gradient(1100px 380px at 15% 0%,color-mix(in srgb,var(--t) 16%,transparent),transparent 70%),
    linear-gradient(180deg,var(--ink),var(--char))}
body[data-trade=sawtime] .stp-more{
  background:url(img/tex/blade.svg) right -140px top -120px/560px 560px no-repeat,
    url(img/tex/blade.svg) left -180px bottom -200px/460px 460px no-repeat,
    var(--kerf),var(--mottle),var(--conc),var(--ivory2)}
body[data-trade=sawtime] .stp-shot{padding:10px;border-radius:14px;
  background:var(--brush-d),linear-gradient(180deg,#3a3f48,#141210);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(0,0,0,.6),0 26px 64px rgba(0,0,0,.55)}
body[data-trade=sawtime] .stp-shot img{border-radius:6px;display:block}
body[data-trade=sawtime] .stp-card{position:relative;border-radius:10px;padding:calc(var(--s2) + 8px) var(--s2) var(--s2);
  background:radial-gradient(circle at 14px 14px,#9aa1aa 0 3px,transparent 3.5px),radial-gradient(circle at calc(100% - 14px) 14px,#9aa1aa 0 3px,transparent 3.5px),
    radial-gradient(circle at 14px calc(100% - 14px),#9aa1aa 0 3px,transparent 3.5px),radial-gradient(circle at calc(100% - 14px) calc(100% - 14px),#9aa1aa 0 3px,transparent 3.5px),
    var(--brush-l),linear-gradient(180deg,#fff,#f2eee7);
  border:1px solid rgba(20,18,16,.14);box-shadow:inset 0 6px 0 var(--t),var(--card-lift);transition:transform .15s,box-shadow .15s}
body[data-trade=sawtime] .stp-card:hover{transform:translateY(-3px)}
body[data-trade=sawtime] .stp-card img{box-shadow:0 8px 20px -10px rgba(20,18,16,.5)}
body[data-trade=sawtime] .stp-list li{background:linear-gradient(180deg,#fff,#f3efe7);border:1px solid rgba(20,18,16,.12);
  border-left:4px solid var(--t);border-radius:6px;padding:12px 14px 12px 40px;box-shadow:0 8px 18px -14px rgba(20,18,16,.45)}
body[data-trade=sawtime] .stp-list li::before{left:14px;top:1.15em}
body[data-trade=sawtime] .stp-end{
  background:url(img/tex/blade.svg) center -260px/720px 720px no-repeat,var(--brush-d),var(--grain-d),
    radial-gradient(900px 420px at 50% 110%,color-mix(in srgb,var(--t) 26%,transparent),transparent 70%),linear-gradient(180deg,var(--char),var(--ink))}
@media (max-width:600px){
  body[data-trade=sawtime] .stp-more{background:url(img/tex/blade.svg) right -120px top -90px/340px 340px no-repeat,var(--kerf),var(--mottle),var(--conc),var(--ivory2)}
  body[data-trade=sawtime] .stp-shot{padding:6px}
}
@media (prefers-reduced-motion:reduce){ body[data-trade=sawtime] .stp-card{transition:none} body[data-trade=sawtime] .stp-card:hover{transform:none} }
@media print{ body[data-trade=sawtime] .stp-more,body[data-trade=sawtime] .stp-board{background:#fff} }