/* Tradie Office Pro · Who we help · scoped styles. Tokens, nav, buttons, eyebrow, FAQ, CTA and footer come from style.css */

/* Current page in the nav */
.nav-links a[aria-current="page"]{opacity:1}
.nav-links a[aria-current="page"]::after{right:0}

/* ---------- Hero: cream ground, full-width H1, the photo panel with the dispatch board on it ---------- */
.whero{position:relative;padding:calc(var(--nav-h) + 72px) 0 calc(var(--sec) * .6);overflow:hidden;isolation:isolate;background:var(--cream-2);color:var(--ink)}
.whero-bg{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(rgba(15,15,15,.14) 1px,transparent 1.3px) 0 0/26px 26px,
  radial-gradient(40% 36% at 92% 8%,rgba(255,196,0,.34),transparent 70%),
  radial-gradient(30% 30% at 6% 60%,rgba(255,196,0,.14),transparent 70%),
  var(--cream-2)}
.whero-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,249,230,.8) 0%,rgba(255,249,230,0) 26%,rgba(255,249,230,0) 70%,rgba(255,249,230,.9) 100%)}
.whero-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:repeating-linear-gradient(-45deg,var(--ink) 0 14px,var(--yellow) 14px 28px)}
.whero-h1{font-size:clamp(44px,6.4vw,104px);margin:0 0 30px;letter-spacing:-.045em;line-height:.92;max-width:none}
.whero-h1 .accent{background:linear-gradient(transparent 58%,var(--yellow) 58%,var(--yellow) 92%,transparent 92%);padding:0 .06em;margin:0 -.06em}
.whero-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.whero .lede{max-width:56ch;margin-bottom:30px}
.whero-actions{margin-bottom:0}
.whero-stats{display:flex;justify-content:flex-end;gap:clamp(22px,3vw,44px);flex-wrap:wrap}
.whero-stats li{display:grid;gap:6px;padding-left:16px;border-left:2px solid var(--yellow)}
.whero-stats b{font-family:var(--display);font-weight:800;font-size:clamp(30px,2.8vw,40px);letter-spacing:-.04em;line-height:1;font-stretch:94%}
.whero-stats span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}

/* Entrance */
.whero-copy > *{animation:rise .9s var(--ease) both}
.whero-copy > :nth-child(2){animation-delay:.08s}.whero-copy > :nth-child(3){animation-delay:.18s}
.whero-media{animation:rise 1s var(--ease) .32s both}

/* The photo panel */
.whero-media{position:relative}
.whero-photo{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:2.25/1;background:var(--ink);box-shadow:0 50px 90px -40px rgba(0,0,0,.5)}
.whero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.whero-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,15,15,.55) 0%,rgba(15,15,15,.12) 42%,rgba(15,15,15,0) 70%),linear-gradient(180deg,rgba(15,15,15,0) 55%,rgba(15,15,15,.5) 100%)}
.whero-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:repeating-linear-gradient(-45deg,var(--ink) 0 14px,var(--yellow) 14px 28px)}

/* The dispatch board (split-flap signboard) */
.board{position:absolute;left:clamp(16px,2.5vw,36px);bottom:clamp(28px,3vw,44px);width:min(470px,calc(100% - 32px));background:var(--ink);color:var(--paper);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:14px 14px 10px;box-shadow:0 40px 80px -30px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.08)}
.board-head{display:flex;justify-content:space-between;align-items:center;padding:2px 6px 12px;border-bottom:1px solid rgba(255,255,255,.1);color:var(--muted-deep)}
.board-title{color:var(--yellow)}
.board-live{display:inline-flex;align-items:center;gap:8px}
.board-rows{display:grid;gap:6px;padding-top:10px}
.brow{display:grid;grid-template-columns:minmax(0,37%) minmax(0,1fr) 72px;gap:12px;align-items:center;padding:9px 10px;min-height:50px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);transition:background .25s,border-color .25s}
.brow:hover,.brow:focus-visible{background:rgba(255,196,0,.09);border-color:rgba(255,196,0,.5);outline:none}
.brow-trade{display:flex;flex-wrap:wrap;font-family:var(--display);font-weight:800;font-size:12.5px;letter-spacing:.03em;line-height:1.15;text-transform:uppercase;color:var(--paper);perspective:300px;font-stretch:100%}
.brow-trade .ch{display:inline-block;min-width:.3em;transform-origin:50% 50%;backface-visibility:hidden}
.brow-trade .ch.is-flip{animation:flap .46s var(--ease)}
@keyframes flap{0%{transform:rotateX(0)}49%{transform:rotateX(-90deg);opacity:.5}51%{transform:rotateX(90deg);opacity:.5}100%{transform:rotateX(0);opacity:1}}
.brow-ev{font-size:12.5px;line-height:1.3;color:#d9d9d4;transition:opacity .28s var(--ease),transform .28s var(--ease)}
.brow-ev.is-swap{opacity:0;transform:translateY(7px)}
.brow-st{justify-self:end;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:5px 8px;border-radius:999px;background:rgba(255,196,0,.14);color:var(--yellow);white-space:nowrap;transition:opacity .25s}
.brow-st.st-sync{background:rgba(143,209,255,.14);color:#8fd1ff}
.brow-st.st-new{background:rgba(44,207,23,.16);color:#7ee86c}
.brow-st.is-swap{opacity:0}
.board-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 6px 0;color:var(--muted-deep)}
.board-foot .link-arrow{margin-top:0;min-height:44px;font-size:14px;white-space:nowrap}
.brow-trade .wd{display:inline-flex;white-space:nowrap}

/* ---------- Proof strip ---------- */
.proof{background:var(--paper);color:var(--ink);padding:48px 0}
.proof-label{color:var(--muted);text-align:center;margin-bottom:26px}
.proof-logos{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:28px 64px}
.proof-logos img{height:34px;width:auto;mix-blend-mode:multiply;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.proof-logos li:hover img{filter:none;opacity:1}

/* ---------- The 28: trade index ---------- */
.trades{background:var(--paper);color:var(--ink);padding:var(--sec) 0;position:relative;border-top:1px solid var(--line)}
.trades .sec-head{max-width:880px}
.filters{position:sticky;top:calc(var(--nav-h) + 10px);z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;margin-bottom:32px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:28px;box-shadow:0 18px 40px -30px rgba(0,0,0,.3)}
.filters-label{color:var(--muted);padding:0 8px 0 8px}
.flt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:0 14px;min-height:44px;border-radius:999px;border:1px solid var(--line);color:var(--ink);background:var(--paper);transition:background .25s,border-color .25s,color .25s}
.flt:hover{border-color:var(--ink)}
.flt[aria-pressed="true"]{background:var(--ink);color:var(--yellow);border-color:var(--ink)}
.flt-count{margin-left:auto;color:var(--muted);padding:0 10px;font-variant-numeric:tabular-nums}
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tcard{display:flex;flex-direction:column;padding:22px 22px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);color:var(--ink);box-shadow:0 18px 40px -30px rgba(0,0,0,.2);transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;scroll-margin-top:calc(var(--nav-h) + 92px)}
.tcard:hover{transform:translateY(-4px);border-color:var(--yellow);box-shadow:0 30px 56px -30px rgba(0,0,0,.3)}
.tcard[hidden]{display:none}
.tcard.is-hit{border-color:var(--yellow);box-shadow:0 0 0 4px rgba(255,196,0,.4),0 30px 56px -30px rgba(0,0,0,.3)}
.tcard-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px;color:var(--muted);font-size:10.5px}
.tcard-n{color:var(--ink);font-weight:600;padding:4px 8px;border-radius:6px;background:var(--cream)}
.tcard h3{font-size:clamp(20px,1.55vw,23px);letter-spacing:-.03em;margin:0 0 10px;min-height:1.95em}
.tcard p{color:var(--muted);font-size:14.5px;line-height:1.5;margin:0 0 16px}
.tcard-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.tcard-tags li{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:4px 7px}
.tcard .link-arrow{color:var(--ink);margin-top:12px;font-size:14px;min-height:44px}
.tcard:hover .link-arrow{gap:14px}
.tcard-every{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tcard-every .tcard-top{color:var(--muted-deep)}
.tcard-every .tcard-n{background:var(--yellow);color:var(--ink)}
.tcard-every p{color:#c9c9c4}
.tcard-every .tcard-tags li{color:var(--yellow);border-color:rgba(255,196,0,.4)}
.tcard-every .link-arrow{color:var(--yellow)}
.tgrid-empty{display:none;padding:40px 0;color:var(--muted);text-align:center}
.tgrid-empty.is-on{display:block}

/* ---------- Don't see your trade: ink band, photo left ---------- */
.deep{background:var(--ink);color:var(--paper);padding:var(--sec) 0;position:relative;overflow:hidden}
.deep::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:repeating-linear-gradient(-45deg,var(--yellow) 0 14px,transparent 14px 28px);opacity:.9}
.deep-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.deep-photo{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:5/4;background:var(--ink-2);box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.deep-photo img{width:100%;height:100%;object-fit:cover;object-position:40% 50%}
.deep-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:repeating-linear-gradient(-45deg,var(--ink) 0 14px,var(--yellow) 14px 28px)}
.deep-copy h2{color:var(--paper)}
.deep-copy .lede{margin-top:18px}
.deep-plugs{display:grid;gap:14px;margin:30px 0 34px}
.deep-plugs .mono{color:var(--muted-deep)}
.deep-plugs .plug-row img{opacity:.92}
.deep-actions{margin-bottom:0}

/* ---------- Reveal (main.js adds .is-in) ---------- */
.rv{opacity:0;transform:translateY(22px)}
.rv.is-in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}

/* ---------- Breakpoints ---------- */
@media (max-width:1100px){
  .tgrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1024px){
  .whero-row{grid-template-columns:1fr}
  .whero-stats{justify-content:flex-start}
  .deep-grid{grid-template-columns:1fr}
  .deep-photo{max-width:720px}
}
@media (max-width:900px){
  .whero-photo{aspect-ratio:16/10}
  .board{position:relative;left:auto;bottom:auto;width:auto;margin:-36px 12px 0}
  .tgrid{grid-template-columns:repeat(2,1fr)}
  .filters{position:relative;top:auto;border-radius:20px}
}
@media (max-width:560px){
  .whero{padding-top:calc(var(--nav-h) + 32px)}
  .whero-h1{font-size:clamp(40px,12vw,56px)}
  .whero-actions .btn{width:100%;justify-content:center}
  .whero-stats{gap:18px}
  .whero-photo{aspect-ratio:5/4}
  .board{margin:-28px 8px 0;padding:12px 12px 8px}
  .board-foot .mono{display:none}
  .brow{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
  .brow-ev{grid-column:1 / -1}
  .tgrid{grid-template-columns:1fr}
  .filters{padding:10px}
  .filters-label{display:none}
  .flt-count{width:100%;margin-left:0;padding:6px 8px 0}
  .proof-logos{gap:20px 36px}
  .proof-logos img{height:26px}
  .deep-actions .btn{width:100%;justify-content:center}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .whero-copy > *,.whero-media{animation:none}
  .brow-trade .ch.is-flip{animation:none}
  .brow-ev,.brow-st{transition:none}
  .rv{opacity:1;transform:none;transition:none}
  .tcard,.flt,.brow{transition:none}
}