/* Trade Time HQ - the finish layer (2026-10-25).
   Loaded after site.css / trades.css / plumbing.css on every page.

   COLOUR RULE (owner, non-negotiable): every colour here is an existing
   token (var(--...)) or an existing colour at some opacity. Nothing in this
   file defines a brand colour. tradetime/check-colors.ps1 enforces it.
     orange   #f08a2e -> rgba(240,138,46,a)    ink    #141210 -> rgba(20,18,16,a)
     text-d   #efe9df -> rgba(239,233,223,a)   ivory  #f4efe6 -> rgba(244,239,230,a)
     rim glow #e8730c -> rgba(232,115,12,a) (the hero drawing's own light)
   Trade colours are only ever var(--t), var(--t-hi), var(--t-ink),
   var(--t-tint), var(--t-on), or color-mix() of one of those with transparent.

   THREE MOTIFS, used on purpose:
     1. the ridgeline  - the Arizona ranges from the hero drawing, at section edges
     2. the blueprint  - faint technical drawings of the trades, at section edges
     3. the route line - a dotted orange line carrying one job field -> office */

:root{
  --grain-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --lift-1:0 1px 0 rgba(255,255,255,.7) inset,0 1px 2px rgba(20,18,16,.06),0 6px 16px -8px rgba(20,18,16,.18);
  --lift-2:0 1px 0 rgba(255,255,255,.7) inset,0 2px 4px rgba(20,18,16,.06),0 18px 40px -16px rgba(20,18,16,.32);
  --lift-dark:0 1px 0 rgba(239,233,223,.07) inset,0 30px 60px -24px rgba(0,0,0,.65),0 0 0 1px rgba(239,233,223,.06);
  --r2:16px;
}

/* ---------- surfaces ---------- */
body{background:var(--grain-l),var(--ivory)}
.panel-l{background:var(--grain-l),radial-gradient(1200px 500px at 100% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%),var(--ivory2)}
.dark{background:var(--grain-d),radial-gradient(1000px 520px at 88% -10%,rgba(240,138,46,.12),rgba(240,138,46,0) 70%),var(--ink)}
.dark.dark-2{background:var(--grain-d),radial-gradient(900px 480px at 10% 110%,rgba(240,138,46,.10),rgba(240,138,46,0) 70%),var(--char)}
.sec{position:relative}
.sec>.wrap{position:relative;z-index:1}
/* a quiet seam between two light sections */
.sec:not(.dark):not(.panel-l)+.sec:not(.dark):not(.panel-l){border-top:1px solid rgba(20,18,16,.07)}

/* motif 2: blueprint at a section's edge, faded out before it reaches the words */
.bp-edge::before{content:"";position:absolute;top:0;right:0;width:min(62vw,860px);height:100%;pointer-events:none;z-index:0;
  background:url(img/blueprint-dark.svg) right -60px top -40px/880px auto no-repeat;opacity:.08;
  -webkit-mask-image:linear-gradient(to left,#000 30%,transparent 92%);mask-image:linear-gradient(to left,#000 30%,transparent 92%)}
.dark.bp-edge::before,.page-head.bp-edge::before,.hero.bp-edge::before{background-image:url(img/blueprint-light.svg);opacity:.07}
.bp-left::before{right:auto;left:0;background-position:left -60px top -40px;
  -webkit-mask-image:linear-gradient(to right,#000 25%,transparent 90%);mask-image:linear-gradient(to right,#000 25%,transparent 90%)}

/* motif 1: the ridgeline along the foot of a dark section */
.ridge{position:relative}
.ridge::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(70px,9vw,130px);pointer-events:none;z-index:0;
  background:url(img/ridge-line.svg) center bottom/cover no-repeat;opacity:.9}

/* ---------- header ---------- */
.bar{position:sticky;top:0;z-index:30;background:rgba(20,18,16,.86);-webkit-backdrop-filter:saturate(1.2) blur(12px);backdrop-filter:saturate(1.2) blur(12px);
  border-bottom:1px solid rgba(239,233,223,.07)}
.bar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(240,138,46,0),rgba(240,138,46,.55) 30%,rgba(240,138,46,.15) 70%,rgba(240,138,46,0))}
.brand img{box-shadow:0 0 0 1px rgba(239,233,223,.12),0 4px 14px -4px rgba(232,115,12,.6)}
.bar nav a{position:relative;transition:color .15s,background .15s}
.bar nav a:not(.cta)::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:2px;border-radius:2px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;transition:transform .2s}
.bar nav a:not(.cta):hover{background:transparent;color:#fff}
.bar nav a:not(.cta):hover::after,.bar nav a[aria-current="page"]::after{transform:scaleX(1)}
.bar nav a.cta{background:linear-gradient(180deg,var(--orange-hi),var(--orange));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 18px -8px rgba(240,138,46,.9)}
@media (max-width:860px){
  .bar{position:sticky}
  .bar nav{background:rgba(20,18,16,.97);box-shadow:0 24px 40px -20px rgba(0,0,0,.7)}
  .bar nav a:not(.cta)::after{display:none}
}

/* ---------- type ---------- */
h1,h2{letter-spacing:.004em}
h2{line-height:.98;text-wrap:balance}
.intro,.lede{text-wrap:pretty}
.kicker{display:inline-flex;align-items:center;gap:12px}
.kicker::before{content:"";width:26px;height:2px;border-radius:2px;background:currentColor;opacity:.9}
.lead-in{margin-bottom:var(--s5)}
.lead-in h2{max-width:16ch}

/* ---------- buttons and links ---------- */
.btn{border-radius:10px;transition:background .15s,border-color .15s,transform .15s,box-shadow .15s}
.btn-main{background:linear-gradient(180deg,var(--orange-hi),var(--orange));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(20,18,16,.18),0 10px 26px -12px rgba(240,138,46,.95)}
.btn-main:hover{background:var(--orange-hi);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 14px 30px -12px rgba(240,138,46,1)}
.btn-line{backdrop-filter:blur(2px)}
.dark .btn-line,.page-head .btn-line,.hero .btn-line{border-color:rgba(239,233,223,.35)}
.dark .btn-line:hover,.page-head .btn-line:hover,.hero .btn-line:hover{border-color:var(--text-d);background:rgba(239,233,223,.06)}
.btn-trade{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 24px -12px color-mix(in srgb,var(--t) 90%,transparent)}
.link{transition:text-decoration-color .15s,color .15s}
.link:hover{text-decoration-color:var(--orange-hi)}
.btn .arr{transition:transform .15s}
.btn:hover .arr{transform:translateX(3px)}

/* ---------- inner page heads ---------- */
.page-head{position:relative;overflow:hidden;
  background:var(--grain-d),radial-gradient(900px 420px at 82% 100%,rgba(232,115,12,.20),rgba(232,115,12,0) 70%),url(img/hero-desk.svg) right bottom/cover no-repeat,var(--ink)}
.page-head .wrap{position:relative;z-index:1}
.page-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(240,138,46,0),rgba(240,138,46,.5),rgba(240,138,46,0))}
@media (max-width:900px){ .page-head{background:var(--grain-d),url(img/hero-mobile.svg) center bottom/cover no-repeat,var(--ink)} }

/* ---------- cards, boxes and lists everywhere ---------- */
.box,.three div,.prio li,.related a,.assure div,.fig .shot{transition:transform .2s,box-shadow .2s,border-color .2s}
.box,.prio li,.three div{border-radius:var(--r2);box-shadow:var(--lift-1)}
.related a{border-radius:14px;box-shadow:var(--lift-1);position:relative;padding-right:44px}
.related a::after{content:"";position:absolute;right:20px;top:24px;width:9px;height:9px;border-top:2px solid var(--orange-d);border-right:2px solid var(--orange-d);transform:rotate(45deg);transition:transform .2s}
.related a:hover{transform:translateY(-2px);box-shadow:var(--lift-2);border-color:rgba(168,72,10,.45)}
.related a:hover::after{transform:translateX(3px) rotate(45deg)}
.timeline::before{background:repeating-linear-gradient(to bottom,var(--orange) 0 6px,rgba(240,138,46,0) 6px 13px);opacity:.65}
.timeline .num{box-shadow:0 0 0 6px var(--ivory),0 0 0 7px rgba(240,138,46,.35),0 10px 22px -8px rgba(20,18,16,.6)}

/* feature-page screenshots get a real frame, drawn in CSS so it stays sharp */
.fig .shot:not(.phone){border-radius:14px;padding-top:30px;border:1px solid rgba(20,18,16,.18);
  background:radial-gradient(circle at 18px 15px,#3b352d 4.5px,rgba(59,53,45,0) 5.5px),radial-gradient(circle at 34px 15px,#3b352d 4.5px,rgba(59,53,45,0) 5.5px),radial-gradient(circle at 50px 15px,#3b352d 4.5px,rgba(59,53,45,0) 5.5px),linear-gradient(var(--char),var(--char));
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 30px 60px -26px rgba(20,18,16,.55),0 8px 16px -10px rgba(20,18,16,.3)}
.fig .shot.phone{border:0;padding:9px;border-radius:34px;background:linear-gradient(160deg,#3b352d,var(--ink) 40%);
  box-shadow:0 0 0 1px rgba(239,233,223,.08) inset,0 30px 60px -24px rgba(20,18,16,.6)}
.fig .shot.phone img{border-radius:26px}

/* ---------- FAQ ---------- */
.faq details{border-bottom:0;margin-bottom:10px;background:rgba(255,255,255,.55);border:1px solid rgba(20,18,16,.08);border-radius:14px;padding:0 20px;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset;transition:background .2s,box-shadow .2s}
.faq details[open]{background:#fff;box-shadow:var(--lift-2)}
.faq summary{padding:18px 40px 18px 0}
.faq details p{padding-bottom:18px}
.dark .faq details{background:rgba(239,233,223,.04);border-color:rgba(239,233,223,.08)}

/* ---------- forms ---------- */
.field input,.field select,.field textarea{border-radius:10px;box-shadow:inset 0 1px 2px rgba(20,18,16,.06);transition:border-color .15s,box-shadow .15s}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted-l)}
.form{background:#fff;border:1px solid rgba(20,18,16,.08);border-radius:20px;padding:clamp(20px,4vw,40px);box-shadow:var(--lift-2)}

/* ---------- closing invitation ---------- */
.close{position:relative;overflow:hidden;padding-bottom:calc(var(--s6) + 60px)}
.close h2{font-size:clamp(40px,6vw,76px);max-width:14ch}
.close::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(90px,11vw,160px);pointer-events:none;
  background:url(img/ridge-line.svg) center bottom/cover no-repeat}
.close::before{content:"";position:absolute;right:-10%;bottom:-30%;width:70%;height:120%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(232,115,12,.28),rgba(232,115,12,0))}
.close>.wrap{position:relative;z-index:1}

/* ---------- footer ---------- */
footer{position:relative;overflow:hidden;background:var(--grain-d),var(--ink);border-top:0;padding-top:calc(var(--s5) + 10px)}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(240,138,46,0),rgba(240,138,46,.6),rgba(240,138,46,0))}
footer::after{content:"TRADE TIME HQ";position:absolute;left:50%;bottom:-.18em;transform:translateX(-50%);white-space:nowrap;pointer-events:none;
  font:700 clamp(80px,15vw,230px)/1 var(--display);letter-spacing:.02em;color:rgba(239,233,223,.035)}
footer .wrap{position:relative;z-index:1}
footer .cols>div:first-child h2{display:flex;align-items:center;gap:10px}
footer .cols>div:first-child h2::before{content:"";width:28px;height:28px;border-radius:6px;background:url(tt-72.png) center/cover;box-shadow:0 4px 14px -4px rgba(232,115,12,.6)}
footer a{transition:color .15s}
footer a:hover{color:var(--orange-hi);text-decoration:none}
footer .legal{border-top-color:rgba(239,233,223,.08);padding-bottom:var(--s4)}

/* ---------- motion: one gentle reveal, only when the reader allows motion ---------- */
html.fx [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
html.fx [data-reveal].in{opacity:1;transform:none}
html.fx [data-reveal][data-d="1"]{transition-delay:.08s}
html.fx [data-reveal][data-d="2"]{transition-delay:.16s}
html.fx [data-reveal][data-d="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){ html.fx [data-reveal]{opacity:1;transform:none} }
@media print{ .bar{position:static} .bp-edge::before,.ridge::after,.close::after,.close::before,footer::after{display:none} }

/* on a trade's own page the dark bands glow in that trade's colour, never the parent orange */
body[data-trade] .dark{background:var(--grain-d),radial-gradient(1000px 520px at 88% -10%,color-mix(in srgb,var(--t) 16%,transparent),transparent 70%),var(--ink)}
body[data-trade] .dark.dark-2{background:var(--grain-d),radial-gradient(900px 480px at 10% 110%,color-mix(in srgb,var(--t) 14%,transparent),transparent 70%),var(--char)}
body[data-trade] .kicker::before{background:var(--t-ink)}
body[data-trade] .dark .kicker::before{background:var(--t-hi)}

/* ---- headings on phones, 2026-10-27 ---------------------------------------
   Owner's phone showed "LANDSCAPIN" cut off in the trade tiles. The heading
   font (Barlow Condensed) comes from Google; with display=optional a phone
   that did not have it within ~100 ms never used it and fell back to a WIDE
   font. Fonts now load with display=swap, and this fallback list reaches for a
   narrow system font first (Android ships Roboto Condensed as
   sans-serif-condensed) before Arial. Not a colour token - the colour guard's
   :root in site.css is untouched. */
:root{--display:'Barlow Condensed','Roboto Condensed',sans-serif-condensed,'Arial Narrow',Arial,sans-serif}
@media (max-width:620px){
  .et-sec .et-tiles b{font-size:clamp(16px,5.2vw,21px);letter-spacing:.01em}
  .hero .hv-rail b{font-size:clamp(13px,4.1vw,16px);letter-spacing:.01em}
  .et-tiles a,.hv-rail a,.hv-rail span{min-width:0}
}