/* ==========================================================================
   TRADES by HumanPlanet Media — the chassis
   Hand-built. No framework, no build step, no dependencies.

   Spec: docs/superpowers/specs/2026-09-07-trades-hpm-site-design.md

   EDITORIAL LAW
   - Their work, not HPM's.
   - Nothing is described in words if it can be operated.
   - The copy encourages. It never chides, teases, or implies the reader's
     current site is poor. We show what good looks like and what it gets him.

   MOBILE FIRST. Every base rule is the phone.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS — black and yellow on white. Hazard tape.

   TWO COLOURS. An earlier pass ran purple titles, orange accents and a
   five-swatch paint rack in the hero at once, and the first thing a visitor
   met was a soup of colour. This palette cannot do that: there is nothing to
   mix, because yellow either fills a shape or it is absent.

   THE RULE THAT MATTERS:
   Safety yellow is 1.43:1 on white. It is NEVER text, never a border on
   white, never an icon stroke. It is a FILL, and what sits on it is always
   --ink at 13.0:1. That is why hazard signage looks the way it does, and it
   is the most legible pairing available on a phone in daylight.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --ground:   #FFFFFF;   /* white, the main ground                           */
  --ground-2: #F4F4F2;   /* section bands, barely off-white                  */

  --ink:      #111315;   /* 18.6:1 — all titles, all display type            */
  --ink-2:    #4A4E52;   /*  8.4:1 — body copy                               */
  --ink-3:    #63686D;   /*  5.6:1 on white, 5.1:1 on the band. The floor.   */

  --hi:       #FFD400;   /* SAFETY YELLOW — FILL ONLY. 1.43:1. Never text.   */
  --hi-2:     #EFC400;   /* pressed / hover fill                             */
  --on-hi:    #111315;   /* 13.0:1 on yellow. The only thing allowed on it.  */

  --rule:     rgba(17,19,21,.16);
  --rule-2:   rgba(17,19,21,.08);

  /* Hazard stripe. A fill for rules and bars — never behind type. */
  --tape: repeating-linear-gradient(-45deg, #FFD400 0 10px, #111315 10px 20px);

  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --maxw: 1180px;
  --gut:  1.25rem;
  --r:    12px;
  --r-sm: 8px;
  --tap:  46px;          /* minimum thumb target. Nothing tappable is under  */

  --shadow-1: 0 1px 2px rgba(17,19,21,.06), 0 6px 18px rgba(17,19,21,.07);
  --shadow-2: 0 2px 6px rgba(17,19,21,.08), 0 18px 44px rgba(17,19,21,.12);
  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (min-width: 700px)  { :root { --gut: 2rem; } }
@media (min-width: 1000px) { :root { --gut: 3rem; } }

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ground); color: var(--ink-2);
  font-family: var(--sans); font-size: 17px; line-height: 1.62;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
/* The focus ring cannot be yellow — 1.43:1 on white is invisible. */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

/* --------------------------------------------------------------------------
   TYPE
   Visibility is the brief. Titles are pure black at full weight, tracking is
   only lightly negative so counters stay open at phone sizes, and headings
   may break a long word rather than push the layout wide.
   -------------------------------------------------------------------------- */
h1, h2, h3, .display {
  font-family: var(--display); font-weight: 700; color: var(--ink);
  letter-spacing: -.015em;    /* was -.025em, which closed up the counters */
  /* `pretty`, not `balance`. Balance equalises line lengths, which means it
     deliberately makes every line SHORTER than it could be — headings broke
     early and left the right-hand side empty. Pretty fills each line and only
     guards the last one against a single orphaned word. */
  text-wrap: pretty;
  overflow-wrap: break-word;  /* wrap a long word, never widen the page */
}
h1 { font-size: clamp(2.05rem, .8rem + 5.4vw, 3.9rem);  line-height: 1.08; }
h2 { font-size: clamp(1.7rem, .85rem + 2.9vw, 2.9rem);  line-height: 1.12; }
h3 { font-size: clamp(1.14rem, .97rem + .55vw, 1.38rem); line-height: 1.3; letter-spacing: -.01em; }
@media (min-width: 700px) {
  h1 { line-height: 1.04; letter-spacing: -.022em; }
  h2 { line-height: 1.08; letter-spacing: -.02em; }
}

.eyebrow {
  font-family: var(--sans); font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
/* The emphatic eyebrow is a printed label — black on a yellow chip, the only
   way yellow is allowed anywhere near type. */
.eyebrow-hi {
  display: inline-block; color: var(--on-hi); background: var(--hi);
  padding: .3em .6em; letter-spacing: .1em; border-radius: 3px;
}
@media (min-width: 700px) { .eyebrow { font-size: .74rem; letter-spacing: .15em; } }

.lede  { font-size: clamp(1.06rem, 1rem + .5vw, 1.32rem); color: var(--ink-2); line-height: 1.55; }
.small { font-size: .95rem; color: var(--ink-2); line-height: 1.55; }
.tnum  { font-variant-numeric: tabular-nums; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; }
@media (min-width: 700px) { .small { font-size: .88rem; } }

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
.wrap    { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap-nr { max-width: 840px;      margin-inline: auto; padding-inline: var(--gut); }
section  { padding-block: clamp(3rem, 7vw, 6.5rem); }
.tight   { padding-block: clamp(2.25rem, 5vw, 4rem); }
.band    { background: var(--ground-2); border-block: 1px solid var(--rule-2); }
.sec-head { max-width: 72ch; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.sec-head h2 { margin-block: .6rem .7rem; }

/* --------------------------------------------------------------------------
   NAV — not sticky on a phone; .sticky-call holds the action that matters.
   -------------------------------------------------------------------------- */
.nav { z-index: 50; background: var(--ground); border-bottom: 1px solid var(--rule-2); }
.nav .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; padding-block: .7rem 0; }
.nav > .wrap > .btn { display: none; }

.mark { display: flex; align-items: baseline; gap: .55rem; text-decoration: none; flex: none; padding-block: .2rem; }
.mark-name {
  font-family: var(--display); font-weight: 700; font-size: 1.36rem; color: var(--ink);
  letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; position: relative;
}
/* Hazard tape under the wordmark — the motif stated outright, once. */
.mark-name::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 5px;
  background: var(--tape); transform: scaleX(0); transform-origin: left;
  animation: stroke 1s .2s var(--ease) forwards;
}
@keyframes stroke { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .mark-name::after { animation: none; transform: scaleX(1); } }
.mark-sub { font-size: .61rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }

.nav-links {
  order: 3; flex: 0 0 100%; display: flex; justify-content: space-between; gap: .2rem;
  list-style: none; padding: 0; margin: .6rem 0 0; border-top: 1px solid var(--rule-2);
}
.nav-links a {
  display: flex; align-items: center; min-height: var(--tap); padding: 0 .3rem;
  text-decoration: none; font-size: .95rem; font-weight: 600; color: var(--ink-2);
  border-bottom: 4px solid transparent; margin-bottom: -1px;
  transition: color .18s, border-color .18s;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); border-color: var(--hi); }

@media (min-width: 900px) {
  .nav { position: sticky; top: 0; }
  .nav .wrap { flex-wrap: nowrap; gap: 1.5rem; height: 76px; padding-block: 0; }
  .nav > .wrap > .btn { display: inline-flex; }
  .nav-links { order: 0; flex: 0 1 auto; margin: 0 0 0 auto; justify-content: flex-start; gap: 1.7rem; border-top: 0; }
  .nav-links a { min-height: 0; padding: .3rem 0; margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   BUTTONS — square-ish. This audience reads equipment, not apps.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: var(--tap); padding: .8rem 1.4rem; border-radius: var(--r-sm);
  border: 2px solid transparent; font-size: 1rem; font-weight: 700;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .14s var(--ease), background .2s, border-color .2s, box-shadow .2s;
}
.btn:active { transform: translateY(1px); }
.btn-hi { background: var(--hi); color: var(--on-hi); box-shadow: var(--shadow-1); }
.btn-hi:hover { background: var(--hi-2); box-shadow: var(--shadow-2); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #000; }
.btn-ghost { border: 2px solid var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ground-2); }
.btn-lg { min-height: 54px; padding: 1rem 1.7rem; font-size: 1.05rem; }
.btn-block { width: 100%; }

.cta-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.cta-row .btn { width: 100%; }
@media (min-width: 480px) { .cta-row .btn { width: auto; } }

/* --------------------------------------------------------------------------
   HERO — the H1 is fixed. Only the exhibit rotates.
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(2.25rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem); }
.hero .wrap { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.hero-copy { max-width: 60ch; }
.hero h1 { margin-block: .9rem .1rem; }
/* Highlighter, not a keyline: yellow at full strength behind the words, black
   type riding on top at 13:1. */
.hero h1 em {
  font-style: normal;
  background-image: linear-gradient(var(--hi), var(--hi));
  background-repeat: no-repeat; background-size: 100% .44em; background-position: 0 93%;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.hero .lede { margin-top: 1.15rem; max-width: 56ch; }
@media (min-width: 950px) { .hero .wrap { grid-template-columns: 1.02fr .98fr; } }

/* --------------------------------------------------------------------------
   EXHIBIT FRAME — the frame is shared; what mounts in it is not.
   -------------------------------------------------------------------------- */
.exhibit {
  border: 2px solid var(--ink); border-radius: var(--r); overflow: hidden;
  background: var(--ground); box-shadow: var(--shadow-2);
}
.exhibit-head {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .7rem .9rem; border-bottom: 2px solid var(--ink); background: var(--hi);
}
.exhibit-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--on-hi); flex: none; }
.exhibit-title { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--on-hi); }
.exhibit-for { font-size: .78rem; color: var(--on-hi); opacity: .74; margin-left: auto; }
.exhibit-body { position: relative; }
/* What he is being shown is his CUSTOMER's screen, over her shoulder. */
.exhibit-foot {
  padding: .75rem .9rem; border-top: 1px solid var(--rule); background: var(--ground-2);
  font-size: .88rem; color: var(--ink-2);
}
.exhibit-foot b { color: var(--ink); }

/* --------------------------------------------------------------------------
   SIMULATION vs LIVE — the two exhibits must never be mistaken for each other.

   The hero exhibit is a WORKED EXAMPLE of what a tradesman's own front desk
   would do for HIS customers. The one further down the page is HPM's real
   front desk and actually reaches Kennon. They shipped in the identical frame
   — same yellow head, same white body — so at a glance they read as the same
   component, and a visitor could reasonably believe the hero was live and that
   tapping it had contacted somebody.

   The inversion below is done by REDEFINING TOKENS in scope, not by restyling
   components. Every panel inside is already built on var(--ink) / var(--ground)
   / var(--rule), so one block flips the whole thing and any exhibit added
   later inherits it for free.
   -------------------------------------------------------------------------- */
.exhibit--sim {
  --ground:   #17191C;              /* the screen being demonstrated */
  --ground-2: #101214;
  --ink:      #FFFFFF;
  --ink-2:    #C9CDD1;
  --ink-3:    #9AA0A6;
  --rule:     rgba(255,255,255,.20);
  --rule-2:   rgba(255,255,255,.10);
  /* .exhibit takes its border from --ink, which is now white — and a white
     border on a white page is no border. Pin it back to real ink. */
  border-color: #111315;
}
/* Yellow stays a FILL in both modes: --hi and --on-hi are deliberately not
   overridden, so the answer panels keep black-on-yellow at 13:1. */
.exhibit--sim .exhibit-head {
  background: #111315; border-bottom-color: #111315;
}
.exhibit--sim .exhibit-title { color: var(--hi); }
.exhibit--sim .exhibit-for   { color: #FFFFFF; opacity: .7; }
.exhibit--sim .exhibit-dot   { background: none; border: 2px solid var(--hi); }

/* The repaint exhibit depicts a ROOM. Its wall, knob and tags are hardcoded
   light on purpose — a picture, not chrome — but they take their type colour
   from --ink, which the inversion turns white. Pin those two back or they go
   white-on-white and vanish. */
.exhibit--sim .xr-knob,
.exhibit--sim .xr-tag { color: #111315; border-color: #111315; }

/* Hazard strip: the site's own caution language, marking the whole panel. */
.exhibit-tape { height: 9px; background: var(--tape); }

/* The sentence that removes all doubt, directly above the thing itself. */
.exhibit-flag {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .7rem .9rem; font-size: .86rem; line-height: 1.45;
}
.exhibit--sim .exhibit-flag {
  background: #0C0E10; color: #C9CDD1; border-bottom: 1px solid rgba(255,255,255,.14);
}
.exhibit--live .exhibit-flag {
  background: var(--ground-2); color: var(--ink-2); border-bottom: 1px solid var(--rule);
}
.exhibit-badge {
  flex: none; font-size: .69rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; padding: .3rem .55rem; border-radius: 3px;
}
/* SIM wears the yellow, as a fill with ink on it — never yellow type. */
.exhibit--sim  .exhibit-badge { background: var(--hi); color: var(--on-hi); }
/* LIVE wears ink, so the two badges cannot be confused at a glance either. */
.exhibit--live .exhibit-badge { background: var(--ink); color: var(--ground); }
.exhibit--live .exhibit-dot {
  background: var(--on-hi); animation: exdot 1.3s infinite;
}
@keyframes exdot { 0%,100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .exhibit--live .exhibit-dot { animation: none; opacity: 1; } }

/* --------------------------------------------------------------------------
   ROLLCALL — menu-board type. Every row does something; the roster never
   shows a prospect a "coming soon".
   -------------------------------------------------------------------------- */
.rollcall { border-top: 3px solid var(--ink); }
.rc {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: .1rem 1rem; width: 100%; text-align: left; text-decoration: none;
  padding: 1.05rem .2rem; border: 0; border-bottom: 1px solid var(--rule);
  background: transparent; cursor: pointer; color: inherit; font: inherit;
  transition: background .2s var(--ease), padding-left .2s var(--ease);
}
.rc:hover, .rc:focus-visible { background: var(--ground-2); padding-left: .8rem; }
.rc[aria-pressed="true"] { background: var(--hi); padding-left: .8rem; }
.rc-name {
  color: var(--ink); font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.45rem, .95rem + 2.3vw, 2.5rem); line-height: 1.12; letter-spacing: -.015em;
}
.rc-tool { grid-column: 1; font-size: .93rem; color: var(--ink-2); }
.rc[aria-pressed="true"] .rc-tool { color: var(--on-hi); }
.rc-go {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
.rc[aria-pressed="true"] .rc-go { color: var(--on-hi); }
.rc-go i { font-style: normal; }
@media (min-width: 640px) {
  .rc { grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; padding-block: 1.15rem; }
  .rc-tool { grid-column: 2; }
  .rc-go   { grid-column: 3; grid-row: 1; }
}

/* --------------------------------------------------------------------------
   STATS — black numerals over a length of tape. Yellow never carries digits.
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.7rem 1.1rem; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); } }
.stat-n {
  font-family: var(--display); font-weight: 700; line-height: 1; color: var(--ink);
  font-size: clamp(2.6rem, 1.4rem + 4.2vw, 3.8rem); letter-spacing: -.035em;
}
.stat-n::after { content: ""; display: block; width: 44px; height: 5px; background: var(--tape); margin-top: .55rem; }
.stat-l { font-size: .93rem; line-height: 1.45; color: var(--ink-2); margin-top: .6rem; max-width: 24ch; }
@media (min-width: 700px) { .stat-l { font-size: .86rem; } }

/* --------------------------------------------------------------------------
   CARDS / LADDER
   -------------------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 2px solid var(--ink); border-radius: var(--r); overflow: hidden; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--ground); padding: 1.5rem 1.3rem; display: flex; flex-direction: column; }
@media (min-width: 700px) { .card { padding: 1.9rem 1.6rem; } }
/* Scoped past `.card p`, which otherwise outranks a lone class (0,1,1 beats
   0,1,0) and quietly strips these back to body colour. */
.card .card-n {
  display: inline-block; align-self: flex-start; background: var(--hi); color: var(--on-hi);
  font-size: .78rem; font-weight: 700; letter-spacing: .11em;
  padding: .25em .55em; border-radius: 3px; margin-bottom: .9rem;
}
.card h3 { margin-bottom: .45rem; }
.card p { font-size: .97rem; line-height: 1.55; color: var(--ink-2); }
@media (min-width: 700px) { .card p { font-size: .92rem; } }
.card .card-price { margin-top: auto; padding-top: 1rem; font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: var(--ink); }

/* --------------------------------------------------------------------------
   STEPS — a numbered plate, the way a panel is labelled.
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 1px; background: var(--rule); border-block: 2px solid var(--ink); }
.step { background: var(--ground); padding: 1.3rem 0; display: grid; grid-template-columns: 2.6rem 1fr; gap: .85rem; align-items: start; }
@media (min-width: 700px) { .step { padding: 1.6rem 0; grid-template-columns: 3.2rem 1fr; gap: 1.2rem; } }
.step-n {
  display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 4px;
  background: var(--hi); color: var(--on-hi);
  font-family: var(--display); font-size: 1.15rem; font-weight: 700; line-height: 1;
}
.step h3 { margin-bottom: .3rem; }
.step p { color: var(--ink-2); font-size: .97rem; line-height: 1.55; max-width: 74ch; }
@media (min-width: 700px) { .step p { font-size: .93rem; } }

/* --------------------------------------------------------------------------
   HI BAND — one full block of yellow per page, black type on it.
   -------------------------------------------------------------------------- */
.hi-band { background: var(--hi); color: var(--on-hi); border-block: 3px solid var(--ink); }
.hi-band h2, .hi-band h3, .hi-band .lede { color: var(--on-hi); }
.hi-band .lede { opacity: .86; }
.hi-band .eyebrow { color: var(--on-hi); opacity: .7; }
/* The chip would vanish on its own colour — invert it. */
.hi-band .eyebrow-hi { background: var(--on-hi); color: var(--hi); opacity: 1; }
.hi-band .btn-ink { background: var(--ink); color: var(--hi); }

/* --------------------------------------------------------------------------
   PLAQUE — HPM's credit. A builder's plate on the panel, never the subject.
   -------------------------------------------------------------------------- */
.foot { background: var(--ground-2); border-top: 1px solid var(--rule); padding-block: 2.5rem 2rem; }
.foot-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 560px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 2.2rem; } }
@media (min-width: 860px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.foot h4 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .8rem; font-weight: 700; }
.foot ul { list-style: none; padding: 0; display: grid; gap: .1rem; font-size: .97rem; }
.foot li { padding-block: .35rem; }
.foot a { color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.foot a:hover { color: var(--ink); }
.plaque {
  margin-top: 2.2rem; padding-top: 1.3rem; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; justify-content: space-between;
  font-size: .84rem; line-height: 1.5; color: var(--ink-3);
}
.plaque a { color: var(--ink); text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   REVEAL + STICKY CALL
   -------------------------------------------------------------------------- */
.rise { opacity: 0; transform: translateY(15px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rise.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none; } }

.sticky-call {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  padding: .65rem var(--gut) calc(.65rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--ground) 94%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 3px solid var(--ink);
}
body { padding-bottom: 5rem; }
@media (min-width: 900px) { .sticky-call { display: none; } body { padding-bottom: 0; } }