/* =========================================================
   index_tech.css — workspace "tech" (architect / specifier)
   Bold refresh (2026). Loaded only when this workspace is active.
   Tokens from brand.css, so it flips with the customer/trade theme.
   Leans on the spec colour language (--spec-fire/acoustic/thermal/leak-text).
   ========================================================= */

/* ---- Workspace-local render tokens (product "stage"/thumbs) ------- */
.jb-home--tech {
  --tech-render-bg: linear-gradient(160deg,#ffffff 0%,#eef2f5 100%);
  --tech-render-frame: #d8dde2;
  --tech-render-face:  #ffffff;
  --tech-render-cavity:#20262c;
  --tech-shadow-card: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --tech-shadow-hi:   0 2px 4px rgba(16,24,40,.05), 0 20px 48px rgba(16,24,40,.12);
}
body[data-theme="trade"] .jb-home--tech {
  --tech-render-bg: linear-gradient(160deg,#2b2b2b 0%,#1c1c1c 100%);
  --tech-render-frame: #3a3a3a;
  --tech-render-face:  #e9edf0;
  --tech-render-cavity:#0a0c0e;
  --tech-shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
  --tech-shadow-hi:   0 2px 6px rgba(0,0,0,.5), 0 24px 56px rgba(0,0,0,.6);
}

.jb-home--tech .tech-wrap { max-width: var(--container); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.jb-home--tech .arr { display:inline-block; transition: transform var(--dur-fast) var(--ease-out); }

/* ---- Spec credentials strip (hidden on mobile) -------------------- */
.tech-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper-2); }
.tech-strip__row { display: flex; flex-wrap: wrap; }
.tech-cred { flex: 1; min-width: 150px; padding: 13px 22px; border-right: 1px solid var(--line); }
.tech-cred:last-child { border-right: none; }
.tech-cred__k { display: block; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--ink-3); margin-bottom: 4px; }
.tech-cred__v { font-size: .86rem; font-weight: 800; color: var(--ink); letter-spacing: var(--tracking-tight); }
.tech-cred__v--fire { color: var(--spec-fire-text); }
.tech-cred__v--ac   { color: var(--spec-acoustic-text); }
.tech-cred__v--th   { color: var(--spec-thermal-text); }
.tech-cred__v--cert { color: var(--spec-leak-text); }

/* ---- Hero -------------------------------------------------------- */
.tech-hero { position: relative; overflow: hidden; padding: clamp(40px,5vw,72px) 0 clamp(30px,4vw,52px); }
.tech-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 80% 22%, color-mix(in srgb,var(--jb-blue) 15%,transparent) 0%, transparent 60%),
    radial-gradient(50% 60% at 8% 96%, color-mix(in srgb,var(--jb-accent) 10%,transparent) 0%, transparent 55%);
}
.tech-hero > .tech-wrap { position: relative; z-index: 1; }
.tech-hero__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px,4vw,60px); align-items: center; }
.tech-hero__eyebrow { margin: 0 0 18px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--ink-3); display:inline-flex; align-items:center; gap:9px; }
.tech-hero__pip { width:7px; height:7px; border-radius:50%; background:var(--spec-leak-text); box-shadow:0 0 0 4px color-mix(in srgb,var(--spec-leak-text) 22%,transparent); }
.tech-hero__title { margin: 0 0 20px; font-size: clamp(2.8rem,6.2vw,4.6rem); font-weight: 900; letter-spacing: var(--tracking-tighter); line-height: .9; color: var(--ink); }
.tech-hero__title em { font-style: normal; color: var(--jb-blue); }
.tech-hero__lead { margin: 0 0 26px; max-width: 46ch; font-size: clamp(1rem,1.4vw,1.16rem); line-height: 1.55; color: var(--ink-2); }
.tech-hero__lead strong { color: var(--ink); font-weight: 700; }
.tech-hero__actions { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 24px; }
.tech-hero__trust { display:flex; gap:22px; flex-wrap:wrap; font-size:.74rem; color:var(--ink-3); }
.tech-hero__trust span { display:inline-flex; align-items:center; gap:7px; }
.tech-hero__trust svg { color:var(--spec-leak-text); }

.tech-btn-accent { display: inline-flex; align-items: center; gap: 9px; background: var(--jb-accent); color: #1a1a1a; border-radius: var(--radius-btn); padding: 14px 24px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wider); text-decoration: none; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast); }
.tech-btn-accent:hover { background: var(--jb-accent-deep); transform: translateY(-1px); }
.tech-btn-accent:hover .arr { transform: translateX(3px); }
.tech-btn-ghost { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--ink); color: var(--ink); border-radius: var(--radius-btn); padding: 14px 24px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wider); text-decoration: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.tech-btn-ghost:hover { background: var(--ink); color: var(--paper); }
.tech-btn-ghost:hover .arr { transform: translateX(3px); }

/* Hero product stage */
.tech-stage { position: relative; aspect-ratio: 1 / .82; border-radius: calc(var(--radius-page) * 2); background: var(--tech-render-bg); border: 1px solid var(--line); box-shadow: var(--tech-shadow-hi); overflow: hidden; display: grid; place-items: center; }
.tech-stage__grid { position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 1px), linear-gradient(90deg,color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 1px); background-size: 38px 38px; }
.tech-stage__hero { position: relative; z-index: 2; width: 58%; filter: drop-shadow(0 16px 20px rgba(16,24,40,.20)); }
.tech-stage__photo { position: relative; z-index: 2; width: 76%; height: auto; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(16,24,40,.22)); }

/* Technical viewport frame + corner registration marks (drafting feel) */
.tech-stage::after { content: ""; position: absolute; inset: 12px; z-index: 1; border: 1px solid color-mix(in srgb,var(--ink) 9%,transparent); border-radius: 2px; pointer-events: none; }
.tech-stage__marks { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tech-stage__marks .c { position: absolute; width: 18px; height: 18px; border: 1.5px solid color-mix(in srgb,var(--ink) 26%,transparent); }
.tech-stage__marks .c--tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.tech-stage__marks .c--tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.tech-stage__marks .c--bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.tech-stage__marks .c--br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

/* Sharp static spec callouts — annotation style with a leader stub + node */
.tech-badge { position: absolute; z-index: 4; background: var(--paper); border: 1px solid color-mix(in srgb,var(--ink) 16%,transparent); border-left: 3px solid var(--ink-4); border-radius: var(--radius-data); padding: 8px 11px; box-shadow: var(--tech-shadow-card); display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.tech-badge > span:last-child { display: flex; flex-direction: column; line-height: 1.12; }
.tech-badge__k { font-size: .52rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--ink-3); }
.tech-badge__v { font-size: .9rem; font-weight: 900; letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.tech-badge .ic { width: 24px; height: 24px; flex: none; border-radius: var(--radius-data); display: grid; place-items: center; }
.tech-badge::before, .tech-badge::after { content: ""; position: absolute; top: 50%; }
.tech-badge::after { width: 22px; height: 1px; }
.tech-badge::before { width: 5px; height: 5px; border-radius: 50%; margin-top: -2px; }
/* edge anchoring — two on the left rail, two on the right, corners kept clear */
.tech-badge--fire { top: 20%; left: 20px; border-left-color: var(--spec-fire-text); }
.tech-badge--ac   { bottom: 20%; left: 20px; border-left-color: var(--spec-acoustic-text); }
.tech-badge--cert { top: 20%; right: 20px; border-left-color: var(--spec-leak-text); }
.tech-badge--th   { bottom: 20%; right: 20px; border-left-color: var(--spec-thermal-text); }
.tech-badge--fire::after, .tech-badge--ac::after { right: -22px; }
.tech-badge--fire::before, .tech-badge--ac::before { right: -27px; }
.tech-badge--cert::after, .tech-badge--th::after { left: -22px; }
.tech-badge--cert::before, .tech-badge--th::before { left: -27px; }
.tech-badge--fire .ic { background: color-mix(in srgb,var(--spec-fire-text) 14%,transparent); color: var(--spec-fire-text); }
.tech-badge--fire .tech-badge__v { color: var(--spec-fire-text); }
.tech-badge--fire::after, .tech-badge--fire::before { background: var(--spec-fire-text); }
.tech-badge--ac .ic { background: color-mix(in srgb,var(--spec-acoustic-text) 16%,transparent); color: var(--spec-acoustic-text); }
.tech-badge--ac .tech-badge__v { color: var(--spec-acoustic-text); }
.tech-badge--ac::after, .tech-badge--ac::before { background: var(--spec-acoustic-text); }
.tech-badge--th .ic { background: color-mix(in srgb,var(--spec-thermal-text) 16%,transparent); color: var(--spec-thermal-text); }
.tech-badge--th .tech-badge__v { color: var(--spec-thermal-text); }
.tech-badge--th::after, .tech-badge--th::before { background: var(--spec-thermal-text); }
.tech-badge--cert .ic { background: color-mix(in srgb,var(--spec-leak-text) 16%,transparent); color: var(--spec-leak-text); }
.tech-badge--cert .tech-badge__v { color: var(--spec-leak-text); font-size: .76rem; }
.tech-badge--cert::after, .tech-badge--cert::before { background: var(--spec-leak-text); }

/* ---- Specification finder (full-width band) ---------------------- */
.tech-finder { margin-top: clamp(28px,4vw,44px); border: 1px solid var(--line); border-radius: calc(var(--radius-page) * 2); background: var(--paper); box-shadow: var(--tech-shadow-hi); overflow: hidden; }
.tech-finder__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tech-finder__title { display: inline-flex; align-items: center; gap: 11px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--ink); }
.tech-finder__ic { width: 30px; height: 30px; border-radius: 9px; background: var(--jb-blue-soft); color: var(--jb-blue); display: grid; place-items: center; }
.tech-finder__live { display: inline-flex; align-items: center; gap: 7px; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--spec-leak-text); }
.tech-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--spec-leak-text); animation: techPulse 2s var(--ease-out) infinite; }
@keyframes techPulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb,var(--spec-leak-text) 45%,transparent); } 50% { opacity: .5; box-shadow: 0 0 0 6px transparent; } }
.tech-finder__body { display: grid; grid-template-columns: .85fr 1.6fr; }
.tech-finder__controls { padding: 20px 22px; border-right: 1px solid var(--line); }
.tech-field { margin-bottom: 18px; }
.tech-field:last-child { margin-bottom: 0; }
.tech-field__label { display: block; margin-bottom: 9px; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--ink-3); }
.tech-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.tech-chip { border: 1px solid var(--ink-4); border-radius: var(--radius-data); background: var(--paper); padding: 9px 15px; font-family: inherit; font-size: .78rem; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.tech-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.tech-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tech-chip.is-disabled { opacity: .35; cursor: not-allowed; }
.tech-field__hint { display: block; margin-top: 10px; font-size: .66rem; color: var(--ink-3); }
.tech-finder__out { padding: 18px 22px; }
.tech-finder__count { display: flex; align-items: baseline; gap: 9px; margin-bottom: 14px; }
.tech-finder__count #techCount { font-size: 1.9rem; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.tech-finder__countlab { font-size: .78rem; font-weight: 700; color: var(--ink-3); }
.tech-rows { display: flex; flex-direction: column; gap: 10px; }
.tech-row { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: var(--radius-page); padding: 11px 13px; background: var(--paper); transition: border-color var(--dur-fast), transform var(--dur-fast); animation: techRowIn .4s var(--ease-out) both; }
.tech-row:hover { border-color: var(--jb-blue); transform: translateX(2px); }
@keyframes techRowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tech-row__thumb { width: 64px; height: 64px; flex: none; border-radius: var(--radius-data); background: var(--tech-render-bg); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.tech-row__thumb svg { width: 78%; }
.tech-row__thumb img { width: 100%; height: 100%; object-fit: contain; }
.tech-row__main { flex: 1; min-width: 0; }
.tech-row__name { display: block; font-size: .9rem; font-weight: 800; color: var(--ink); text-decoration: none; margin-bottom: 7px; letter-spacing: var(--tracking-tight); }
.tech-row__name:hover { color: var(--jb-blue); }
.tech-row__price { flex: none; text-align: right; }
.tech-row__price .k { display: block; font-size: .54rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-3); }
.tech-row__price .v { font-size: 1.05rem; font-weight: 900; letter-spacing: var(--tracking-tight); }
.tech-row__price .v small { font-size: .7em; font-weight: 700; }
.tech-bs { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.tech-b { font-size: .56rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wide); padding: 3px 7px; border-radius: var(--radius-data); }
.tech-b--fire { color: var(--spec-fire-text); background: color-mix(in srgb,var(--spec-fire-text) 12%,transparent); }
.tech-b--ac   { color: var(--spec-acoustic-text); background: color-mix(in srgb,var(--spec-acoustic-text) 14%,transparent); }
.tech-b--th   { color: var(--spec-thermal-text); background: color-mix(in srgb,var(--spec-thermal-text) 14%,transparent); }
.tech-docs { display: flex; gap: 11px; flex-wrap: wrap; }
.tech-doc { display: inline-flex; align-items: center; gap: 4px; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--jb-blue); text-decoration: none; }
.tech-doc:hover { color: var(--jb-blue-deep); text-decoration: underline; }
.tech-empty { font-size: .8rem; color: var(--ink-3); padding: 6px 0; }
.tech-finder__all { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--jb-blue); text-decoration: none; transition: gap var(--dur-fast) var(--ease-out); }
.tech-finder__all:hover { gap: 12px; }

/* ---- Shared section scaffold ------------------------------------- */
.tech-feat-sec { padding: clamp(40px,5.5vw,72px) 0; background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tech-ranges-sec { padding: clamp(40px,5.5vw,72px) 0; }
.tech-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.tech-sec-head__eyebrow { margin: 0 0 8px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--jb-blue); }
.tech-sec-head__title { margin: 0; font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 900; letter-spacing: var(--tracking-tighter); line-height: 1.02; color: var(--ink); }
.tech-lnk { display: inline-flex; align-items: center; gap: 8px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--jb-blue); text-decoration: none; white-space: nowrap; }
.tech-lnk:hover .arr { transform: translateX(3px); }

/* ---- Featured strip --------------------------------------------- */
.tech-feat { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.tech-fcard { border: 1px solid var(--line); border-radius: calc(var(--radius-page) * 2); background: var(--paper); overflow: hidden; box-shadow: var(--tech-shadow-card); display: flex; flex-direction: column; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.tech-fcard:hover { transform: translateY(-4px); box-shadow: var(--tech-shadow-hi); border-color: var(--jb-blue); }
.tech-fcard__media { position: relative; aspect-ratio: 4/3; background: var(--tech-render-bg); display: grid; place-items: center; border-bottom: 1px solid var(--line); overflow: hidden; }
.tech-fcard__media svg { width: 52%; filter: drop-shadow(0 14px 18px rgba(16,24,40,.16)); }
.tech-fcard__media img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.tech-fcard__flag { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: .56rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: #fff; background: var(--spec-fire-text); padding: 4px 9px; border-radius: var(--radius-data); }
.tech-fcard__body { padding: 16px 18px; display: flex; flex-direction: column; flex: 1; }
.tech-fcard__name { font-size: 1rem; font-weight: 800; letter-spacing: var(--tracking-tight); margin: 0 0 10px; color: var(--ink); text-decoration: none; }
.tech-fcard__name:hover { color: var(--jb-blue); }
.tech-fcard__specrow { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tech-fcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.tech-fcard__price .k { display: block; font-size: .54rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-3); }
.tech-fcard__price .v { font-size: 1.15rem; font-weight: 900; letter-spacing: var(--tracking-tight); color: var(--ink); }
.tech-fcard__docs { display: flex; gap: 10px; }

/* ---- Ranges ----------------------------------------------------- */
.tech-ranges { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.tech-rtile { border: 1px solid var(--line); border-radius: calc(var(--radius-page) * 2); overflow: hidden; text-decoration: none; background: var(--paper); box-shadow: var(--tech-shadow-card); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.tech-rtile:hover { transform: translateY(-4px); box-shadow: var(--tech-shadow-hi); }
.tech-rtile__media { aspect-ratio: 5/4; background: var(--tech-render-bg); display: grid; place-items: center; border-bottom: 1px solid var(--line); overflow: hidden; }
.tech-rtile__media svg { width: 48%; filter: drop-shadow(0 12px 16px rgba(16,24,40,.14)); transition: transform var(--dur-base) var(--ease-out); }
.tech-rtile__media img { width: 100%; height: 100%; object-fit: contain; padding: 10%; transition: transform var(--dur-base) var(--ease-out); }
.tech-rtile:hover .tech-rtile__media svg, .tech-rtile:hover .tech-rtile__media img { transform: scale(1.05) translateY(-3px); }
.tech-rtile__body { padding: 13px 15px; }
.tech-rtile__name { display: block; font-size: .92rem; font-weight: 800; letter-spacing: var(--tracking-tight); margin-bottom: 3px; color: var(--ink); }
.tech-rtile__cta { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--jb-blue); }

/* ---- Section scaffold (library) --------------------------------- */
.tech-section { padding: clamp(40px,5.5vw,72px) 24px; }
.tech-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line); padding-bottom: 13px; }
.tech-section__title { margin: 0; font-size: clamp(1.6rem,2.6vw,2.2rem); font-weight: 900; letter-spacing: var(--tracking-tight); color: var(--ink); }
.tech-section__meta { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--ink-3); }

/* ---- Document library ------------------------------------------- */
.tech-search { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius-page); padding: 13px 16px; margin-bottom: 16px; text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out); }
.tech-search:hover { border-color: var(--ink-4); }
.tech-search i { color: var(--ink-3); font-size: 1rem; }
.tech-search span { font-size: .9rem; color: var(--ink-4); }
.tech-lib { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 16px; }
.tech-doc-card { border: 1px solid var(--line); background: var(--paper); border-radius: calc(var(--radius-page) * 2); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; box-shadow: var(--tech-shadow-card); transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.tech-doc-card:hover { border-color: var(--jb-blue); transform: translateY(-4px); box-shadow: var(--tech-shadow-hi); }
.tech-doc-card__media { aspect-ratio: 16/7; display: grid; place-items: center; border-bottom: 1px solid var(--line); overflow: hidden; }
.tech-doc-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tech-doc-card__media--ds,
.tech-doc-card__media--ct,
.tech-doc-card__media--gd { background: var(--paper-2); }
.tech-doc-card__body { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; }
.tech-doc-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tech-doc-card__icon { font-size: 1.1rem; width: 22px; text-align: center; }
.tech-doc-card__icon--ds,
.tech-doc-card__icon--ct,
.tech-doc-card__icon--gd { color: var(--ink-3); }
.tech-doc-card__name { font-size: 1rem; font-weight: 800; color: var(--ink); letter-spacing: var(--tracking-tight); }
.tech-doc-card__desc { margin: 0 0 14px; font-size: .84rem; line-height: 1.45; color: var(--ink-2); flex: 1; }
.tech-doc-card__go { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--ink-3); }
.tech-doc-card:hover .tech-doc-card__go { color: var(--jb-blue); }

/* ---- Project pack ----------------------------------------------- */
.tech-pack { position: relative; overflow: hidden; border: 2px solid var(--jb-accent); border-radius: calc(var(--radius-page) * 2); background: linear-gradient(120deg,color-mix(in srgb,var(--jb-accent) 8%,var(--paper)),var(--paper) 60%); display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: center; padding: 26px 28px; }
.tech-pack__badge { display: inline-flex; align-items: center; gap: 7px; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--jb-accent-deep); background: color-mix(in srgb,var(--jb-accent) 18%,transparent); padding: 5px 11px; border-radius: 20px; margin-bottom: 14px; }
.tech-pack__title { margin: 0 0 10px; font-size: clamp(1.35rem,2.4vw,1.9rem); font-weight: 900; letter-spacing: var(--tracking-tight); color: var(--ink); }
.tech-pack__desc { margin: 0 0 18px; font-size: .95rem; line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.tech-pack__cta { display: inline-flex; align-items: center; gap: 8px; background: var(--jb-accent); color: #1a1a1a; border-radius: var(--radius-btn); padding: 13px 22px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wider); text-decoration: none; }
.tech-pack__cta:hover { background: var(--jb-accent-deep); }
.tech-pack__cta:hover .arr { transform: translateX(3px); }
.tech-pack__art { display: grid; place-items: center; }
.tech-pack__art svg { width: 100%; max-width: 400px; }
.tech-pack__art img { width: 100%; max-width: 320px; height: auto; filter: drop-shadow(0 20px 40px rgba(16,24,40,.18)); }

/* Project-pack fallback illustration motion */
.tech-pk-doc { transform-box: fill-box; transform-origin: center; }
.tech-pk-doc--ds { animation: techPkFloat 5s var(--ease-out) infinite; }
.tech-pk-doc--ct { animation: techPkFloat 5s var(--ease-out) infinite .4s; }
.tech-pk-doc--gd { animation: techPkFloat 5s var(--ease-out) infinite .8s; }
@keyframes techPkFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.tech-pk-arrow { animation: techPkPush 2.6s var(--ease-out) infinite; }
@keyframes techPkPush { 0%,100% { opacity: .55; transform: translateX(0); } 50% { opacity: 1; transform: translateX(5px); } }
.tech-pk-dl { transform-box: fill-box; transform-origin: center; animation: techPkPulse 2.4s var(--ease-out) infinite; }
@keyframes techPkPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* ---- Projects --------------------------------------------------- */
.tech-projects { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tech-projects__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,48px); align-items: center; padding: clamp(40px,5vw,64px) 24px; }
.tech-projects__eyebrow { margin: 0 0 12px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--jb-blue); }
.tech-projects__title { margin: 0 0 12px; font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 900; letter-spacing: var(--tracking-tighter); line-height: 1.04; color: var(--ink); }
.tech-projects__lead { margin: 0 0 22px; font-size: .98rem; line-height: 1.55; color: var(--ink-2); max-width: 44ch; }
.tech-proj-card { border: 1px solid var(--line); background: var(--paper); border-radius: calc(var(--radius-page) * 2); padding: 20px; box-shadow: var(--tech-shadow-card); }
.tech-proj-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.tech-proj-card__name { font-size: 1.05rem; font-weight: 800; color: var(--ink); letter-spacing: var(--tracking-tight); }
.tech-proj-card__role { font-size: .56rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--jb-blue); background: var(--jb-blue-soft); padding: 3px 8px; border-radius: var(--radius-data); white-space: nowrap; }
.tech-proj-card__row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); font-size: .88rem; color: var(--ink-2); }
.tech-proj-card__row b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.tech-proj-card__ready { color: var(--spec-leak-text) !important; }
.tech-proj-card__team { display: flex; margin-top: 14px; }
.tech-av { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--paper); margin-left: -8px; display: grid; place-items: center; font-size: .62rem; font-weight: 800; color: #fff; }
.tech-av:first-child { margin-left: 0; }

/* ---- Reveal ----------------------------------------------------- */
.jb-home--tech [data-reveal] { opacity: 0; transform: translateY(18px); }
.jb-home--tech [data-reveal].in { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out) var(--rd,0ms), transform var(--dur-slow) var(--ease-out) var(--rd,0ms); }

/* ---- Responsive ------------------------------------------------- */
@media (max-width: 1040px) {
  .tech-hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .tech-finder__body { grid-template-columns: 1fr; }
  .tech-finder__controls { border-right: none; border-bottom: 1px solid var(--line); }
  .tech-feat { grid-template-columns: 1fr 1fr; }
  .tech-ranges { grid-template-columns: 1fr 1fr; }
  .tech-lib { grid-template-columns: 1fr; }
  .tech-pack { grid-template-columns: 1fr; }
  .tech-projects__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tech-feat { grid-template-columns: 1fr; }
  .tech-ranges { grid-template-columns: 1fr; }
  .tech-row__price { display: none; }
}
@media (max-width: 720px) {
  .tech-strip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tech-pulse, .tech-stage__hero, .tech-stage__photo, .tech-badge,
  .tech-pk-doc, .tech-pk-arrow, .tech-pk-dl { animation: none; }
  .jb-home--tech [data-reveal], .jb-home--tech [data-reveal].in { opacity: 1; transform: none; transition: none; }
}


/* =========================================================
   ARCHITECT WORKSPACE — full-bleed hero + section banding
   (Aug 2026)

   The hero drawing is inlined from img/specifier/hero-drawing.svg
   so it can inherit currentColor. Tone follows body[data-theme]:
   the drawing agrees with the page it sits on rather than fighting
   it. Nothing to switch — no query params, no tone classes.

   Deliberately restrained: --jb-accent stays action-only, per the
   brand rule. No full-bleed accent slabs.
   ========================================================= */

/* ---- Tone tokens, driven by the site theme -------------------- */
.tech-hero--bleed {
  --hero-bg:     #f4f7f9;
  --hero-ink:    #1a1a1a;
  --hero-ink-2:  #4b4b4b;
  --hero-dwg:    #4a5a66;
  --hero-grid:   rgba(58,163,206,.18);
  --hero-eyebrow: var(--jb-blue-deep);
  --hero-rule:   rgba(26,26,26,.14);
}
body[data-theme="trade"] .tech-hero--bleed {
  --hero-bg:     #0a0e11;
  --hero-ink:    #ffffff;
  --hero-ink-2:  #9fb0bc;
  --hero-dwg:    #ffffff;
  --hero-grid:   rgba(58,163,206,.17);
  --hero-eyebrow: #6cc4e6;
  --hero-rule:   rgba(255,255,255,.16);
}

/* ---- Hero layout --------------------------------------------- */
.tech-hero--bleed {
  position: relative; overflow: hidden;
  padding: clamp(56px,8vw,104px) 0; min-height: 520px;
  display: flex; align-items: center;
  background: var(--hero-bg); color: var(--hero-ink);
  border-bottom: 1px solid var(--hero-rule);
}
.tech-hero--bleed::before { display: none; } /* kills the old radial gradients */
.tech-hero--bleed .tech-wrap { position: relative; z-index: 2; width: 100%; }
.tech-hero--bleed .tech-hero__grid { grid-template-columns: minmax(0,540px); }
.tech-hero--bleed .tech-stage { display: none; }

.tech-hero__bleed { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.tech-hero__grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--hero-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px);
  background-size: 44px 44px;
}
.tech-hero__dwg {
  /* Width-driven so the drawing's own ratio sets its height: it crops
     top/bottom and off the right edge predictably, which is what makes
     it read as part of a larger sheet rather than a picture in a box. */
  position: absolute; top: 50%; left: 36%; width: 74%; height: auto;
  transform: translateY(-50%);
  color: var(--hero-dwg);
}
.tech-hero__dwg svg { width: 100%; height: auto; display: block; }

/* The artwork's three ink colours ARE the styling contract. Illustrator
   writes them as presentation attributes, which lose to any CSS rule, so
   a re-export drops straight in — provided the drawing keeps using these
   three greys. Both #rgb and #rrggbb forms are matched because
   Illustrator shortens them inconsistently. */
.tech-hero__dwg svg * { vector-effect: non-scaling-stroke; }
.tech-hero__dwg svg [stroke="#000"],
.tech-hero__dwg svg [stroke="#000000"],
.tech-hero__dwg svg [stroke="#2f2f30"],
.tech-hero__dwg svg [stroke="#2F2F30"] { stroke: currentColor; stroke-width: 1; }
.tech-hero__dwg svg [stroke="#c7c8ca"],
.tech-hero__dwg svg [stroke="#C7C8CA"] { stroke: currentColor; stroke-width: .85; opacity: .5; }
.tech-hero__dwg svg [stroke-width=".25"] { stroke-width: .7; opacity: .8; }
.tech-hero__dwg svg [fill="#2f2f30"],
.tech-hero__dwg svg [fill="#2F2F30"] { fill: currentColor; }

/* ---- Hero type ----------------------------------------------- */
.tech-hero--bleed .tech-hero__title,
.tech-hero--bleed .tech-hero__lead strong { color: var(--hero-ink); }
.tech-hero--bleed .tech-hero__lead,
.tech-hero--bleed .tech-hero__trust { color: var(--hero-ink-2); }
.tech-hero--bleed .tech-hero__eyebrow { color: var(--hero-eyebrow); }
.tech-hero--bleed .tech-btn-ghost { border-color: var(--hero-ink); color: var(--hero-ink); }
.tech-hero--bleed .tech-btn-ghost:hover { background: color-mix(in srgb, var(--hero-ink) 8%, transparent); }

/* The finder sits over the drawing. It needs no tone-flipping of its
   own — it already uses the theme's surface tokens; it just needs to
   lift off the hero behind it. */
.tech-hero--bleed .tech-finder {
  position: relative; z-index: 2;
  box-shadow: 0 4px 14px rgba(0,0,0,.10), 0 26px 60px rgba(10,16,22,.16);
}
body[data-theme="trade"] .tech-hero--bleed .tech-finder {
  box-shadow: 0 4px 14px rgba(0,0,0,.34), 0 28px 64px rgba(0,0,0,.46);
}

@media (max-width: 900px) {
  .tech-hero--bleed { min-height: 0; padding: clamp(36px,7vw,64px) 0; }
  /* Geometry behind a headline at this width is just noise — drop it
     below the type and hold it back. */
  .tech-hero__dwg { top: auto; bottom: -8%; left: 4%; width: 128%; transform: none; opacity: .3; }
}


/* =========================================================
   SECTION BANDING
   Eight sections that used to alternate between --paper and
   --paper-2 with hairlines, so nothing anchored you on the way
   down. Rhythm now:

     hero · strip · featured · ranges(cool) · library
       · project pack(deep) · projects(deep)
   ========================================================= */
.jb-home--tech {
  --band-deep:       #12171c;
  --band-deep-ink:   #f2f6f8;
  --band-deep-ink-2: #8b9aa6;
  --band-deep-line:  #28323a;
  --band-cool:       #e8eef2;   /* cool neutral, not blue — reads as a
                                   band without colouring the page */
  --band-cool-line:  #d3dde4;
  --band-link:       #6cc4e6;
  --band-cert:       #8ed396;
}
body[data-theme="trade"] .jb-home--tech {
  --band-deep:       #060809;   /* must sit BELOW --paper (#1a1a1a) */
  --band-deep-ink:   #f4f4f4;
  --band-deep-ink-2: #8a8a8a;
  --band-deep-line:  #1e2429;
  --band-cool:       #212a2f;
  --band-cool-line:  #2c363c;
  --band-link:       #6cc4e6;
  --band-cert:       #87cd8e;
}

/* ---- 1 · credentials strip -----------------------------------
   Kept light: the hero above is the page's anchor, and two heavy
   bands touching would merge. Now earns its place on mobile. */
@media (max-width: 720px) {
  .jb-home--tech .tech-strip { display: block; }
  .jb-home--tech .tech-strip__row { display: grid; grid-template-columns: repeat(2,1fr); }
  .jb-home--tech .tech-cred { border-bottom: 1px solid var(--line); padding: 10px 16px; }
  .jb-home--tech .tech-cred:nth-child(2n) { border-right: none; }
  .jb-home--tech .tech-cred:last-child { grid-column: 1 / -1; border-bottom: none; }
}

/* ---- 2 · featured products -----------------------------------
   Cards drop their box; the photo fills the frame. */
.jb-home--tech .tech-feat-sec { background: var(--paper); border-color: transparent; }
.jb-home--tech .tech-fcard { border-color: transparent; background: transparent; box-shadow: none; border-radius: 0; }
.jb-home--tech .tech-fcard__media {
  border: 1px solid var(--line);
  border-radius: var(--radius-page);
  background: var(--paper);
  overflow: hidden;
}
.jb-home--tech .tech-fcard__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.jb-home--tech .tech-fcard__body { padding-left: 2px; padding-right: 2px; }

/* ---- 3 · ranges ----------------------------------------------
   Cool neutral band; tiles are plain framed images, no grid. */
.jb-home--tech .tech-ranges-sec {
  background: var(--band-cool);
  border-top: 1px solid var(--band-cool-line);
  border-bottom: 1px solid var(--band-cool-line);
}
.jb-home--tech .tech-rtile { border-color: transparent; background: transparent; box-shadow: none; border-radius: 0; }
.jb-home--tech .tech-rtile__media {
  border: 1px solid var(--band-cool-line);
  border-radius: var(--radius-page);
  background: var(--paper);
  overflow: hidden;
}
.jb-home--tech .tech-rtile__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.jb-home--tech .tech-rtile__body { padding-left: 2px; padding-right: 2px; }

/* ---- 4 · specification library — left quiet on purpose -------- */

/* ---- 5 · project pack ----------------------------------------
   Was a full-bleed orange slab. --jb-accent is action-only per the
   brand rule, so the band is ink and the orange is the button. */
.jb-home--tech .tech-pack {
  border: 0;
  background: var(--band-deep);
  color: var(--band-deep-ink);
  padding: clamp(28px,4vw,44px) clamp(24px,3.5vw,40px);
  border-radius: calc(var(--radius-page) * 2);
}
.jb-home--tech .tech-pack__title { color: var(--band-deep-ink); }
.jb-home--tech .tech-pack__desc  { color: #a9b8c2; }
.jb-home--tech .tech-pack__badge { display: none; }   /* "Now live" — marketing noise */
.jb-home--tech .tech-pack__cta   { background: var(--jb-accent); color: #1a1a1a; }
.jb-home--tech .tech-pack__cta:hover { background: var(--jb-accent-deep); }
/* The bundling artwork draws with --paper / --ink, which vanish on ink. */
.jb-home--tech .tech-pack__art svg { --paper: #12171c; --ink: #f2f6f8; --ink-3: #8b9aa6; --ink-4: #4a5760; }

/* ---- 6 · projects → deep, closing as the page opened ---------- */
.jb-home--tech .tech-projects { background: var(--band-deep); border-color: var(--band-deep-line); color: var(--band-deep-ink); }
.jb-home--tech .tech-projects__eyebrow { color: var(--band-link); }
.jb-home--tech .tech-projects__title   { color: var(--band-deep-ink); }
.jb-home--tech .tech-projects__lead    { color: #a9b8c2; }
.jb-home--tech .tech-projects .tech-btn-ghost--dark { border-color: #4a5760; color: var(--band-deep-ink); }
.jb-home--tech .tech-projects .tech-btn-ghost--dark:hover { background: rgba(255,255,255,.07); }
.jb-home--tech .tech-proj-card { background: rgba(255,255,255,.04); border-color: var(--band-deep-line); }
.jb-home--tech .tech-proj-card__top { border-bottom-color: var(--band-deep-line); }
.jb-home--tech .tech-proj-card__name { color: var(--band-deep-ink); }
.jb-home--tech .tech-proj-card__role { color: var(--band-link); }
.jb-home--tech .tech-proj-card__row  { color: #a9b8c2; }
.jb-home--tech .tech-proj-card__row b { color: var(--band-deep-ink); }
.jb-home--tech .tech-proj-card__ready { color: var(--band-cert); }

/* Trade theme: every surface is already dark, so bands separate by only
   ~1.2:1 on tone. A blue hairline does what tone cannot. */
body[data-theme="trade"] .jb-home--tech .tech-projects {
  border-top-color: color-mix(in srgb, var(--jb-blue) 26%, transparent);
  border-bottom-color: color-mix(in srgb, var(--jb-blue) 26%, transparent);
}

/* ---- Restraint pass ------------------------------------------
   Small things that read as salesy to a technical audience. */
.jb-home--tech .tech-finder__live { display: none; }  /* pulsing "LIVE" dot */
.jb-home--tech .tech-pulse { animation: none; }

/* ---- Homepage spec-library search (real form, not an anchor) ------ */
.tech-search__input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  font-family: inherit; font-size: .9rem; color: var(--ink);
  padding: 0; outline: none;
}
.tech-search__input::placeholder { color: var(--ink-4); }
.tech-search:focus-within { border-color: var(--jb-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--jb-blue) 20%, transparent); }
.tech-search__go {
  flex: none; appearance: none; cursor: pointer;
  border: 0; border-radius: var(--radius-btn);
  background: var(--ink); color: var(--paper);
  font-family: inherit; font-size: .68rem; font-weight: 800;
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  padding: 9px 16px;
}
.tech-search__go:hover { background: var(--jb-blue-deep); color: #fff; }