/* TaxReck Sectors page: its own rules on top of the shared blocks (blocks.css) and the split screen (split.css).
   Class names start with sx-. Built 24 Sep 2026: fourteen sectors as a photo grid filtered by family, one sheet per
   sector (what catches people out, three figures, what we do), the basics, three steps, questions. */

/* ---------- 01 the grid ---------- */
.sx-lede{max-width:64ch;color:var(--graphite);font-size:17.5px;line-height:1.65}
.sx-chips{display:flex;flex-wrap:wrap;gap:6px;margin:clamp(22px,2.6vw,30px) 0 clamp(20px,2.4vw,26px)}
.sx-chip{height:40px;padding:0 13px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--graphite);font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.sx-chip:hover{border-color:#C2CAD8;color:var(--ink)}
.sx-chip[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.sx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);margin:0;padding:0;list-style:none}
.sx-grid li[hidden]{display:none}
.sx-tile{position:relative;display:block;height:clamp(170px,15vw,210px);overflow:hidden;border-radius:20px;background:var(--dark);color:#fff;text-decoration:none;outline-offset:3px}
.sx-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.sx-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,16,32,0) 35%,rgba(11,16,32,.82));pointer-events:none}
.sx-tile-t{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center}
.sx-tile-t i{grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(var(--acc-rgb),.95);color:var(--on-acc)}
.sx-tile-t i svg,.sx-fam i svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sx-tile-t b{font-size:15px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.sx-tile-t small{color:rgba(255,255,255,.72);font-size:11.5px;font-weight:600}
.sx-tile:hover img{transform:scale(1.05)}
.sx-tile.on{box-shadow:0 0 0 3px var(--acc),0 18px 36px -18px rgba(11,16,32,.55)}
/* the fifteenth tile: for a trade that is not listed */
.sx-ask{display:flex;flex-direction:column;justify-content:space-between;padding:18px 20px;background:var(--ink) radial-gradient(120% 90% at 100% 0%,rgba(var(--acc-rgb),.22),transparent 60%)}
.sx-ask::after{display:none}
.sx-ask-k{color:var(--acc);font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.sx-ask b{max-width:26ch;font-size:clamp(15px,1.25vw,18px);font-weight:700;letter-spacing:-.02em;line-height:1.35}
.sx-ask-go{align-self:flex-start;padding:8px 16px;border-radius:999px;background:var(--acc);color:var(--on-acc);font-size:13.5px;font-weight:800;transition:transform .3s var(--ease)}
.sx-ask:hover .sx-ask-go{transform:translateX(4px)}

/* ---------- 02 the sheet for one sector ---------- */
.sx-sheet{animation:sxIn .45s var(--ease) both}
.sx-sheet[hidden]{display:none}
.sx-sheet:focus{outline:none}
@keyframes sxIn{from{opacity:0;transform:translateY(10px)}}
.sx-sheet-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(22px,3.2vw,48px);align-items:center}
.sx-fam{display:flex;align-items:center;gap:10px;color:var(--acc-text);font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.sx-fam i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--acc)}
.sx-sheet h3{margin:14px 0 0;color:var(--ink);font-size:clamp(28px,3vw,40px);font-weight:800;letter-spacing:-.04em;line-height:1.05}
.sx-line{margin-top:12px!important;max-width:48ch;color:var(--graphite);font-size:17px;line-height:1.6}
.sx-who{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 0;padding:0;list-style:none}
.sx-who li{padding:6px 12px;border-radius:999px;background:var(--acc-soft);color:var(--acc-text);font-size:12.5px;font-weight:700}
.sx-ph{margin:0}
.sx-ph img{display:block;width:100%;height:clamp(260px,28vw,340px);object-fit:cover;object-position:50% 45%;-webkit-mask-image:radial-gradient(74% 80% at 52% 50%,#000 38%,transparent 84%);mask-image:radial-gradient(74% 80% at 52% 50%,#000 38%,transparent 84%)}
.sx-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(18px,2.4vw,34px);margin:clamp(24px,3vw,34px) 0 0;padding:0;list-style:none}
.sx-nums li{padding:18px 0 4px;border-top:2px solid var(--ink)}
.sx-nums b{display:block;color:var(--ink);font-size:clamp(22px,2.2vw,30px);font-weight:800;letter-spacing:-.04em;line-height:1.1}
.sx-nums span{display:block;margin-top:8px;color:var(--muted);font-size:13.5px;line-height:1.5}
.sx-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,3.4vw,52px);margin-top:clamp(26px,3vw,38px)}
.sx-k{margin-bottom:6px!important;color:var(--ink);font-size:17px;font-weight:800;letter-spacing:-.025em}
.sx-matters{margin:0;padding:0;list-style:none}
.sx-matters li{position:relative;padding:12px 0 12px 22px;border-top:1px solid var(--line);color:var(--graphite);font-size:15px;line-height:1.6}
.sx-matters li::before{content:"";position:absolute;left:0;top:21px;width:9px;height:9px;border-radius:50%;background:var(--acc)}
.sx-do li{font-size:15px}
.sx-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.sx-step{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px;margin-top:clamp(28px,3.4vw,40px);padding-top:18px;border-top:1px solid var(--line)}
.sx-step a{color:var(--ink);font-size:14.5px;font-weight:700;text-decoration:none}
.sx-step a:hover{color:var(--acc-text)}
.sx-step a:nth-child(2){color:var(--muted)}

/* ---------- 03 the basics ---------- */
.sx-basics{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,3.4vw,50px);align-items:center;margin-top:4px}
.sx-six{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(18px,2.4vw,30px);margin:0;padding:0;list-style:none}
.sx-six li{padding:16px 0;border-top:1px solid var(--line)}
.sx-six b{display:block;color:var(--ink);font-size:16px;font-weight:800;letter-spacing:-.02em}
.sx-six span{display:block;margin-top:5px;color:var(--muted);font-size:14px;line-height:1.55}
.sx-six a{color:var(--acc-text);font-weight:700}
.sx-basics-ph{margin:0}
.sx-basics-ph img{display:block;width:100%;height:clamp(260px,29vw,360px);object-fit:cover;border-radius:24px}

/* ---------- 04 how it starts ---------- */
.sx-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(18px,2.4vw,34px);margin:4px 0 0;padding:0;list-style:none}
.sx-how li{padding:20px 0;border-top:2px solid var(--ink)}
.sx-how b{display:block;color:var(--acc-text);font-size:28px;font-weight:800;letter-spacing:-.04em}
.sx-how h3{margin:10px 0 0;color:var(--ink);font-size:18px;font-weight:800;letter-spacing:-.025em}
.sx-how p{margin-top:8px!important;color:var(--muted);font-size:14.5px;line-height:1.6}
.sx-how a{color:var(--acc-text);font-weight:700}

/* ---------- narrower screens ---------- */
@media (max-width:1180px){
  .sx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .sx-sheet-top,.sx-cols,.sx-basics{grid-template-columns:1fr}
  .sx-ph,.sx-basics-ph{order:-1}
  .sx-ph img{height:clamp(220px,44vw,300px)}
}
@media (max-width:620px){
  .sx-nums,.sx-how,.sx-six{grid-template-columns:1fr}
  .sx-tile{height:170px}
  .sx-step{justify-content:flex-start}
}
@media (max-width:560px){
  /* two small tiles a row on a phone, so fifteen do not become a long scroll */
  .sx-grid{gap:10px}
  .sx-tile{height:150px;border-radius:16px}
  .sx-tile-t{left:10px;right:10px;bottom:10px;display:block}
  .sx-tile-t i,.sx-tile-t small{display:none}
  .sx-tile-t b{display:block;font-size:13.5px}
  .sx-else{grid-column:1/-1}
  .sx-ask{height:auto;gap:12px;padding:18px}
}
@media (prefers-reduced-motion:reduce){
  .sx-sheet{animation:none}
  .sx-tile img,.sx-chip{transition:none}
}