/* ============ The home and its four structure pages ============
   Loaded by index.html, about.html, products.html, services.html and
   contact.html, after site.css. Every rule uses the site's own tokens and
   components; nothing restyles the hero, its screenshot row, the studio map or
   the team cards. The numbers come from measuring techey.tech, page by page, at
   1440 and 390 px. */

/* Dead bands. Each section kept 140 px of air above and below at 1440, so two
   paper sections met across about 300 px of nothing. techey.tech keeps 80 px
   (56 px on a phone) and its sections still breathe. */
.st section:is(.thesis,.services-band,.join,.wrap):not(.hero):not(.page-next){padding-block:clamp(56px,5.6vw,80px)}
.st .page-next{padding-block:0 clamp(56px,5.6vw,80px)}
.page-more{margin-top:28px}

/* The page you are on, marked in the nav the way techey.tech marks it. */
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--saffron);margin:0 7px 2px 0;vertical-align:middle}

/* The inner pages open like lab.html: specimen strip, kicker, title, one paragraph. */
.st .page-hero{padding-bottom:clamp(16px,2.4vw,32px)}
.page-hero .display{font-size:clamp(2.4rem,6vw,4.4rem);max-width:18ch}
.page-hero .display .accent{font-style:italic}
.page-hero .kicker{margin-bottom:-4px}
.page-hero .lede{font-size:clamp(1rem,1.35vw,1.15rem);max-width:62ch}
.inline-link{color:var(--saffron);border-bottom:1px solid color-mix(in oklab,var(--saffron),transparent 60%)}
.inline-link:hover{border-bottom-color:var(--saffron)}

/* The status pill: each product's standing, first in its specimen strip, in
   the same words the strip carried and the verifier pins. Same shape as the
   site's tags, filled so a status reads apart from an ownership tag. */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:99px;white-space:nowrap;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  color:var(--t,var(--c));background:color-mix(in oklab,var(--c),transparent 88%);border:1px solid color-mix(in oklab,var(--c),transparent 60%)}
.pill::before{content:"";width:6px;height:6px;border-radius:99px;background:var(--c)}
.pill.is-live{--c:var(--good);--t:var(--good-text)}.pill.is-demo{--c:var(--saffron);--t:var(--demo-text)}.pill.is-wait{--c:var(--wait);--t:var(--wait-text)}
.pill.is-shared{--c:var(--saffron);background:transparent}

/* A sector or a status links to the card it names; the card shows where the link landed. */
.work-card .shot,.work-card .spec{scroll-margin-top:96px}
.work-card:has(.shot:target),.work-card:has(.spec:target){outline:2px solid var(--saffron);outline-offset:4px}

/* ---------- Home: where each product stands, one tile each, leading to Products ---------- */
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.board__item{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px 18px 16px;background:var(--card);border:1px solid var(--hair);border-radius:var(--r);
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.board__item:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--ink),transparent 70%);box-shadow:var(--shadow)}
.board__link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.board__link h3{font-size:1.2rem}
.board__meta{display:flex;flex-wrap:wrap;gap:6px}
.board .pill{white-space:normal}
.board__field{margin-top:auto}
@media(max-width:1023px){.board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.board{grid-template-columns:1fr;gap:10px}}

/* ---------- Home: the four rules, by title, leading to About ---------- */
.pillars--brief .pillar{padding:22px}
.pillars--brief .pillar h3{margin:10px 0 0;font-size:1.2rem}

/* ---------- Home: the two slots and the terms, leading to Services ---------- */
.slots .slot{display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:22px;border-radius:var(--r);background:var(--paper);color:var(--ink);border:1px solid var(--hair);transition:transform .35s var(--ease),box-shadow .35s}
.slots .slot:hover{transform:translateY(-4px);box-shadow:0 22px 50px -20px rgba(0,0,0,.35)}
.slots .slot h3{font-size:1.2rem;color:var(--ink)}
.slots .svc-tag{margin:0}
.slots__rule{margin-top:28px}
.slots__rule p{margin:0 auto;max-width:62ch;font-size:.9rem}
.slots__rule .slots__capacity{margin-top:10px;font-size:.84rem}

/* ---------- Products: filter by sector, as techey.tech filters by industry ---------- */
.filter{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:14px 18px;margin-bottom:24px;background:var(--card);border:1px solid var(--hair);border-radius:var(--r)}
.filter__label{display:flex;flex-direction:column;gap:2px}
.filter__label .mono{color:var(--saffron)}
.filter__count{font-size:.84rem;color:var(--muted)}
.filter__chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border-radius:99px;border:1px solid var(--hair);background:var(--paper);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);transition:background-color .2s,color .2s,border-color .2s}
.chip span{color:var(--muted)}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip[aria-pressed="true"] span{color:color-mix(in oklab,var(--paper),transparent 35%)}
.filter__empty{margin:0 0 24px;padding:28px;border:1.5px dashed color-mix(in oklab,var(--ink),transparent 72%);border-radius:var(--r);color:var(--muted);text-align:center}
.work-card[hidden],.filter__empty[hidden]{display:none!important}

/* ---------- Sectors: an added band, built from the site's own card, icon and tag ---------- */
.sectors{gap:18px}
.sector{display:flex;flex-direction:column;gap:10px;padding:22px}
.sector .svc-icon{width:48px;height:48px;border-radius:12px}
.sector h3{font-size:1.25rem;margin-top:4px}
.sector .tag{align-self:flex-start}
.sector__count{color:var(--saffron)}
.sector.is-empty{background:transparent;border-style:dashed;border-color:color-mix(in oklab,var(--ink),transparent 72%)}
.sector.is-empty .svc-icon{background:transparent;color:var(--muted);border:1px dashed color-mix(in oklab,var(--ink),transparent 72%)}
.sector__note{font-size:.9rem;color:var(--muted)}
.sector__list{list-style:none;display:flex;flex-direction:column;gap:8px;margin:2px 0 0;padding:0}
.sector__list li{display:flex;align-items:center;gap:10px}
.sector__list img{flex:none;width:64px;height:40px;object-fit:cover;object-position:top;border-radius:7px;border:1px solid var(--hair)}
.sector__product{font-family:var(--serif);font-weight:600;color:var(--ink);border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.sector__product:hover{color:var(--saffron);border-bottom-color:var(--saffron)}
.sector__list--fields{gap:0}
.sector__list--fields li{justify-content:space-between;padding:7px 0;border-top:1px solid var(--hair-2)}
@media(max-width:560px){.sector__list img{display:none}}

/* ---------- About: How we work, the header beside the five moves, as techey.tech lays out its process ---------- */
.process-split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:start}
.process-split .sec-head{margin-bottom:0}
#process .process-split .steps{margin-top:0}
@media(max-width:1023px){.process-split{grid-template-columns:1fr;gap:0}.process-split .sec-head{margin-bottom:48px}}

/* ---------- Pilots band ---------- */
/* "Made by" and "Powered by" are the words that make the credit rule a rule.
   Base strong is ink, the band's own colour, so both were invisible here. */
.powered-preview p strong{color:var(--paper)}

/* Phone legibility, last on purpose: a status or a filter never renders under 11.5 px. */
@media(max-width:640px){.spec .pill,.board .pill{font-size:.72rem;letter-spacing:.06em}.chip{min-height:44px;font-size:.72rem}}