/* ============================================================================
   Big Dog Mining v2: industries layer, loaded after site.css on /industries/
   and the nine industry pages only.
   ----------------------------------------------------------------------------
   One frame for every industry: a full-bleed hero, the pain in their words
   with the paper trail it makes today, the outcome with the same trail run
   from one entry, what we build first, proof, hard questions, field tools.
   The hub is an index: nine names on the left, the picture and the pain on
   the right, swapped on hover or focus with CSS alone (:has). On phones and
   touch screens every row is a card with its picture and both lines showing.
   Motion is transform and opacity only.
   ========================================================================== */

body.ind {
  --geist: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sc-font-text: var(--geist);
  --sc-font-mono: var(--mono);
  --ink-3: #858380;
  --typed: #C9744A;
  font-feature-settings: "ss01";
}
.ind :is(h1, h2, h3) { text-wrap: balance; }
.ind .lbl {
  display: block; font-family: var(--mono); font-weight: 500; font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
.ind .lbl + .h2 { margin-top: 1.1rem; }
/* Label and heading reveal as one, so a label never waits alone on screen. */
.ihead + * { margin-top: clamp(2.2rem, 4vw, 3.2rem); }

/* ------------------------------------------------------------- hero ---- */
.ihero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100svh, 62rem); display: flex; align-items: flex-end;
  padding: calc(var(--bar-h) + 3rem) 0 clamp(3.5rem, 8vh, 6.5rem);
}
.ihero__img, .ihero__img img {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2;
}
.ihero__img img { object-fit: cover; object-position: right bottom; max-width: none; animation: ihero-settle 2.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ihero-settle { from { transform: scale(1.06); opacity: .4; } to { transform: none; opacity: 1; } }
.ihero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--sc-canvas) 0%, rgba(9,9,9,.82) 22%, rgba(9,9,9,.25) 55%, rgba(9,9,9,.55) 100%),
    linear-gradient(90deg, rgba(9,9,9,.78) 0%, rgba(9,9,9,.35) 48%, transparent 75%);
}
.ihero__in { position: relative; width: 100%; }
.ihero__k {
  display: flex; align-items: center; gap: .9rem; margin: 2.2rem 0 0;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.ihero__k span { white-space: nowrap; color: var(--gold); padding-right: .9rem; border-right: 1px solid var(--line-strong); }
.ihero h1 {
  margin-top: 1.2rem; max-width: 19ch; color: var(--white);
  font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.6rem); line-height: 1.0; letter-spacing: -0.012em;
}
.ihero__sub {
  margin-top: 1.5rem; max-width: 36ch; color: var(--muted);
  font-size: clamp(1.1rem, 1rem + .45vw, 1.4rem); line-height: 1.45; text-wrap: pretty;
}
.ihero__down {
  display: inline-flex; align-items: center; gap: .7rem; margin-top: 2.4rem;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sc-ink-soft); text-decoration: none;
}
.ihero__down::after {
  content: ""; width: 1px; height: 2.4rem; background: linear-gradient(var(--gold), transparent);
  transform-origin: top; animation: ihero-drop 2.2s ease-in-out infinite;
}
.ihero__down:hover { color: var(--white); }
@keyframes ihero-drop { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ------------------------------------------------------------- pain ---- */
.ipain__grid {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 6rem); align-items: start;
}
.ipain__head { position: sticky; top: calc(var(--bar-h) + 2rem); }
.ipain__text {
  margin: 0; max-width: 34ch; color: var(--ink-3);
  font-family: var(--geist); font-weight: 500; letter-spacing: -0.025em;
  font-size: clamp(1.35rem, 1rem + 1.25vw, 2.1rem); line-height: 1.32; text-wrap: pretty;
}
.ipain__text b { color: var(--white); font-weight: 500; }

/* The paper trail. Today every step after the first is typed again; with
   us the same steps run off one entry. Same markup, two skins. */
.ichain {
  list-style: none; margin: clamp(2.2rem, 4vw, 3.2rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0;
}
.ichain li {
  position: relative; padding: 1.1rem 1rem 0 0; min-width: 0;
  border-top: 1px dashed var(--line-strong);
}
.ichain li::before {
  content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--sc-canvas); border: 1px solid var(--ink-3);
}
.ichain__n { display: block; font-family: var(--mono); font-size: .7rem; color: var(--ink-3); letter-spacing: .08em; }
.ichain b { display: block; margin-top: .45rem; color: var(--white); font-weight: 500; font-size: 1rem; letter-spacing: -0.01em; line-height: 1.25; }
.ichain small { display: block; margin-top: .3rem; font-family: var(--mono); font-size: .72rem; line-height: 1.4; color: var(--ink-3); }
.ichain--today li + li small { color: var(--typed); }
.ichain--today li + li small::before { content: "\21BA  "; }

.ichain--after { grid-column: 1 / -1; margin-top: clamp(1rem, 2vw, 1.5rem); }
.ichain--after li { border-top: 1px solid var(--gold); }
.ichain--after li::before { background: var(--gold); border-color: var(--gold); }
.ichain--after li:first-child::before { width: 11px; height: 11px; top: -6px; box-shadow: 0 0 0 5px var(--gold-soft); }
.ichain--after small { color: var(--sc-ink-soft); }
.ichain--after li + li small::before { content: "\2713  "; color: var(--ok); }
.ichain--after li:first-child small { color: var(--gold); }

/* ---------------------------------------------------------- outcome ---- */
.iout__grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}
.iout__text {
  margin: 1.4rem 0 0; max-width: 40ch; color: var(--muted);
  font-size: clamp(1.08rem, 1rem + .35vw, 1.28rem); line-height: 1.55; text-wrap: pretty;
}
.iout__art { min-width: 0; }

/* ROI line under the outcome: one real figure, then the visitor's own number. */
.iroi {
  grid-column: 1 / -1; margin-top: clamp(2.2rem, 4vw, 3.2rem); padding: clamp(1.4rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 1.4rem clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--sc-r-md);
  background: linear-gradient(100deg, rgba(245, 165, 36, .07), rgba(255, 255, 255, .015) 55%), #0D0D0D;
}
.iroi__fig { margin: 0; display: flex; align-items: baseline; gap: 1.2rem; }
.iroi__fig b { flex: none; font-family: var(--mono); font-weight: 500; color: var(--gold); font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.4rem); letter-spacing: -0.04em; line-height: 1; }
.iroi__fig span { color: var(--muted); font-size: clamp(1rem, .95rem + .25vw, 1.12rem); line-height: 1.5; max-width: 40ch; text-wrap: pretty; }
.iroi__fig b small { display: block; margin-bottom: .45rem; font-family: var(--mono, var(--sc-font-mono)); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.iroi__acts { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.iroi__links { margin: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
@media (max-width: 860px) {
  .iroi { grid-template-columns: 1fr; }
  .iroi__fig { flex-direction: column; gap: .6rem; }
}
@media (min-width: 1200px) { .iout__art { margin-right: calc(-1 * clamp(0rem, 4vw, 4rem)); } }
.iout__cap { margin: 1.1rem 0 0; text-align: right; font-size: .9rem; color: var(--sc-ink-soft); }
.iout__cap b { color: var(--white); font-weight: 500; margin-right: .35rem; }
.iout__cap span { display: block; margin-top: .3rem; font-family: var(--mono); font-size: .72rem; color: var(--dim); }

.iout .ctas { margin-top: clamp(2.2rem, 4vw, 3rem); }

/* ------------------------------------------------- what we build first -- */
.ibuild__list {
  list-style: none; margin: clamp(2.2rem, 4vw, 3.2rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem);
}
.ibuild__list a {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: clamp(1.4rem, 2.4vw, 2rem); border-radius: var(--sc-r-md);
  background: linear-gradient(180deg, #141414, #0E0E0E); border: 1px solid var(--line);
  color: inherit; text-decoration: none; transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.ibuild__list a::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 1px solid var(--gold); opacity: 0; transition: opacity .35s;
}
.ibuild__list a:hover { transform: translateY(-4px); }
.ibuild__list a:hover::after, .ibuild__list a:focus-visible::after { opacity: .6; }
.ibuild__n { display: flex; align-items: center; gap: .8rem; font-family: var(--mono); font-size: .78rem; color: var(--gold); letter-spacing: .1em; }
.ibuild__n::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }
.ibuild__list b {
  display: block; margin-top: 1.3rem; color: var(--white);
  font-family: var(--geist); font-weight: 500; letter-spacing: -0.025em; font-size: clamp(1.25rem, 1rem + .7vw, 1.6rem); line-height: 1.15;
}
.ibuild__list b::after { content: " \2192"; color: var(--gold); }
.ibuild__list small { display: block; margin-top: .7rem; color: var(--sc-ink-soft); font-size: .95rem; line-height: 1.5; }
.ibuild__sol {
  margin-top: auto; padding-top: 1.6rem; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.ibuild__list a:hover .ibuild__sol { color: var(--gold); }

/* A product frame cropped to its working panel (top left), so the side
   photo panel stays out and the numbers read larger. */
.stack__desk--left img { width: 147%; height: auto; object-fit: initial; }

/* ------------------------------------------------------------ field ---- */
.ifield__grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.ifield__img {
  margin: 0; aspect-ratio: 4 / 3; border-radius: var(--sc-r-md); overflow: hidden;
  border: 1px solid var(--line-strong); background: var(--panel);
}
.ifield__img img { width: 100%; height: 100%; object-fit: cover; max-width: none; filter: saturate(.85) contrast(1.04); }
.ifield__copy .ihead + * { margin-top: 1.4rem; }
.ifield__line { color: var(--muted); font-size: clamp(1.08rem, 1rem + .35vw, 1.28rem); line-height: 1.55; max-width: 38ch; text-wrap: pretty; }
.ifield__stat { margin: 2rem 0 0; display: flex; align-items: baseline; gap: 1rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.ifield__stat b { font-family: var(--mono); font-weight: 500; color: var(--gold); font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.8rem); letter-spacing: -0.04em; line-height: 1; }
.ifield__stat span { color: var(--sc-ink-soft); font-size: .95rem; line-height: 1.4; max-width: 18ch; }
.ifield__note { margin: 1.2rem 0 0; font-family: var(--mono); font-size: .72rem; color: var(--dim); }

/* ------------------------------------------------------------ proof ---- */
.iproof__q blockquote { font-size: clamp(1.7rem, 1.1rem + 2.2vw, 3.1rem); line-height: 1.12; max-width: 26ch; }
.iproof__cred { margin: clamp(2rem, 4vw, 3rem) 0 0; max-width: 60ch; color: var(--sc-ink-soft); line-height: 1.6; }
.iproof__cred .lbl { margin-bottom: .6rem; }
.iproof__cred a { color: var(--white); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.iproof__data { max-width: 62rem; }
.iproof__line {
  margin: 1.1rem 0 0; color: var(--white); font-family: var(--geist); font-weight: 500;
  letter-spacing: -0.028em; font-size: clamp(1.45rem, 1.05rem + 1.5vw, 2.4rem); line-height: 1.22; text-wrap: pretty;
}
.iproof__data .more { margin-top: 1.8rem; display: inline-block; }

/* ============================================================== HUB ==== */
.ihub { position: relative; overflow: hidden; padding: calc(var(--bar-h) + clamp(2.5rem, 6vw, 5rem)) 0 clamp(2.5rem, 5vw, 4rem); }
.ihub__in { position: relative; z-index: 1; }
.ihub h1 { margin-top: 1.4rem; max-width: 15ch; font-size: clamp(2.5rem, 1.2rem + 4vw, 5rem); line-height: 1; color: var(--white); }
.ihub__sub { margin-top: 1.5rem; max-width: 40ch; color: var(--muted); font-size: clamp(1.1rem, 1rem + .45vw, 1.4rem); line-height: 1.45; }

.isel { position: relative; padding: clamp(1rem, 3vw, 2rem) 0 clamp(4rem, 8vw, 7rem); }
.isel__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(2rem, 4vw, 4rem); align-items: stretch; }
.isel__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.isel__row { border-bottom: 1px solid var(--line); }
.isel__row a {
  position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: baseline;
  padding: clamp(.85rem, 1.6vh, 1.2rem) 0; color: inherit; text-decoration: none;
}
.isel__n { font-family: var(--mono); font-size: .76rem; color: var(--ink-3); letter-spacing: .08em; transition: color .3s; }
.isel__name {
  font-family: var(--geist); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05;
  font-size: clamp(1.45rem, 1rem + 1.35vw, 2.35rem); color: var(--ink-3);
  transition: color .3s, transform .45s cubic-bezier(.2,.7,.2,1);
}
.isel__name::after {
  content: "\2192"; display: inline-block; margin-left: .45em; color: var(--gold);
  opacity: 0; transform: translateX(-.4em); transition: opacity .3s, transform .45s cubic-bezier(.2,.7,.2,1);
}
.isel__more { grid-column: 2; display: grid; gap: .3rem; margin-top: .55rem; }
.isel__pain { color: var(--muted); font-size: .98rem; line-height: 1.45; }
.isel__out { font-family: var(--mono); font-size: .76rem; color: var(--gold); line-height: 1.5; }
.isel__out::before { content: "\2713  "; color: var(--ok); }
.isel__thumb { display: none; }

/* The stage: eight pictures stacked, one showing. Row 1 by default. */
.isel__stage {
  position: relative; border-radius: var(--sc-r-md); overflow: hidden; background: #0E0E0E;
  border: 1px solid var(--line); min-height: 34rem;
}
.isel__shot { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .55s ease; }
.isel__shot img { width: 100%; height: 100%; object-fit: cover; max-width: none; transform: scale(1.06); transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.isel__shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(9,9,9,.92) 0%, rgba(9,9,9,.45) 38%, transparent 65%);
}
.isel__shot figcaption {
  position: absolute; z-index: 1; left: clamp(1.4rem, 3vw, 2.4rem); right: clamp(1.4rem, 3vw, 2.4rem); bottom: clamp(1.4rem, 3vw, 2.2rem);
  display: grid; gap: .55rem; transform: translateY(10px); opacity: 0; transition: opacity .45s .1s, transform .55s .1s cubic-bezier(.2,.7,.2,1);
}
.isel__sn { font-family: var(--mono); font-size: .76rem; color: var(--gold); letter-spacing: .12em; }
.isel__sp { color: var(--white); font-family: var(--geist); font-weight: 500; letter-spacing: -0.025em; font-size: clamp(1.35rem, 1rem + 1vw, 1.95rem); line-height: 1.2; max-width: 24ch; text-wrap: balance; }
.isel__so { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.isel__so::before { content: "\2713  "; color: var(--ok); }

.isel__shot:nth-child(1) { opacity: 1; }
.isel__shot:nth-child(1) img { transform: none; }
.isel__shot:nth-child(1) figcaption { opacity: 1; transform: none; }

@media (hover: hover) and (min-width: 861px) {
  .isel__more { display: none; }
  .isel__row a:is(:hover, :focus-visible) .isel__name { color: var(--white); transform: translateX(.35rem); }
  .isel__row a:is(:hover, :focus-visible) .isel__name::after { opacity: 1; transform: none; }
  .isel__row a:is(:hover, :focus-visible) .isel__n { color: var(--gold); }
  .isel__list:not(:has(a:is(:hover, :focus-visible))) .isel__row:first-child .isel__name { color: var(--white); }
  .isel__list:not(:has(a:is(:hover, :focus-visible))) .isel__row:first-child .isel__n { color: var(--gold); }

  .isel__grid:has(.isel__row a:is(:hover, :focus-visible)) .isel__shot:nth-child(1) { opacity: 0; }
  .isel__grid:has(.isel__row a:is(:hover, :focus-visible)) .isel__shot:nth-child(1) img { transform: scale(1.06); }
  .isel__grid:has(.isel__row a:is(:hover, :focus-visible)) .isel__shot:nth-child(1) figcaption { opacity: 0; transform: translateY(10px); }
}
@media (hover: hover) and (min-width: 861px) {
  .isel__grid:has(.isel__row:nth-child(1) a:is(:hover, :focus-visible)) .isel__shot:nth-child(1),
  .isel__grid:has(.isel__row:nth-child(2) a:is(:hover, :focus-visible)) .isel__shot:nth-child(2),
  .isel__grid:has(.isel__row:nth-child(3) a:is(:hover, :focus-visible)) .isel__shot:nth-child(3),
  .isel__grid:has(.isel__row:nth-child(4) a:is(:hover, :focus-visible)) .isel__shot:nth-child(4),
  .isel__grid:has(.isel__row:nth-child(5) a:is(:hover, :focus-visible)) .isel__shot:nth-child(5),
  .isel__grid:has(.isel__row:nth-child(6) a:is(:hover, :focus-visible)) .isel__shot:nth-child(6),
  .isel__grid:has(.isel__row:nth-child(7) a:is(:hover, :focus-visible)) .isel__shot:nth-child(7),
  .isel__grid:has(.isel__row:nth-child(8) a:is(:hover, :focus-visible)) .isel__shot:nth-child(8),
  .isel__grid:has(.isel__row:nth-child(9) a:is(:hover, :focus-visible)) .isel__shot:nth-child(9) { opacity: 1; }
  .isel__grid:has(.isel__row:nth-child(1) a:is(:hover, :focus-visible)) .isel__shot:nth-child(1) :is(img, figcaption),
  .isel__grid:has(.isel__row:nth-child(2) a:is(:hover, :focus-visible)) .isel__shot:nth-child(2) :is(img, figcaption),
  .isel__grid:has(.isel__row:nth-child(3) a:is(:hover, :focus-visible)) .isel__shot:nth-child(3) :is(img, figcaption),
  .isel__grid:has(.isel__row:nth-child(4) a:is(:hover, :focus-visible)) .isel__shot:nth-child(4) :is(img, figcaption),
  .isel__grid:has(.isel__row:nth-child(5) a:is(:hover, :focus-visible)) .isel__shot:nth-child(5) :is(img, figcaption),
  .isel__grid:has(.isel__row:nth-child(6) a:is(:hover, :focus-visible)) .isel__shot:nth-child(6) :is(img, figcaption),
  .isel__grid:has(.isel__row:nth-child(7) a:is(:hover, :focus-visible)) .isel__shot:nth-child(7) :is(img, figcaption),
  .isel__grid:has(.isel__row:nth-child(8) a:is(:hover, :focus-visible)) .isel__shot:nth-child(8) :is(img, figcaption),
  .isel__grid:has(.isel__row:nth-child(9) a:is(:hover, :focus-visible)) .isel__shot:nth-child(9) :is(img, figcaption) { opacity: 1; transform: none; }
}

/* Touch and narrow screens: no stage, every row a picture card. */
@media (hover: none), (max-width: 860px) {
  .isel__grid { grid-template-columns: 1fr; }
  .isel__stage { display: none; }
  .isel__list { border-top: 0; display: grid; gap: 1rem; }
  .isel__row { border: 0; }
  .isel__row a {
    grid-template-columns: 2.4rem minmax(0, 1fr); padding: 0 0 1.4rem; border-radius: var(--sc-r-md); overflow: hidden;
    background: #0E0E0E; border: 1px solid var(--line);
  }
  .isel__thumb { display: block; grid-column: 1 / -1; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 1.2rem; }
  .isel__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: right center; max-width: none; }
  .isel__n { padding-left: 1.2rem; }
  .isel__name { color: var(--white); font-size: 1.5rem; padding-right: 1.2rem; }
  .isel__name::after { opacity: 1; transform: none; }
  .isel__more { padding: 0 1.2rem 0 0; }
}
@media (min-width: 600px) and (max-width: 860px), (hover: none) and (min-width: 600px) {
  .isel__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ihub__why-in { display: grid; gap: 1.6rem; max-width: 62rem; }
.ihub__counts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: 1.8rem; }
.ihub__counts b { display: block; font-family: var(--mono); font-weight: 500; color: var(--gold); font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.8rem); letter-spacing: -0.04em; line-height: 1; }
.ihub__counts span { display: block; margin-top: .6rem; color: var(--sc-ink-soft); font-size: .92rem; line-height: 1.4; max-width: 20ch; }
.ihub__why-in .iproof__line { margin-top: 0; }

/* Same industry, different business: how each kind of company gets paid,
   what it watches, and what it uses us for. Three columns; a swipe row on phones. */
.ibiz__grid {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem);
}
.ibiz__col {
  display: flex; flex-direction: column; min-width: 0; padding: 1.5rem 1.4rem 1.2rem;
  border: 1px solid var(--line); border-top: 2px solid var(--gold); border-radius: 4px;
  background: rgba(255,255,255,.02);
}
.ibiz__who { margin: 0; color: var(--white); font-weight: 500; font-size: 1.1rem; letter-spacing: -0.01em; }
.ibiz__who span { display: block; margin-bottom: .5rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--ink-3); }
.ibiz__paid { margin: 1.3rem 0 0; }
.ibiz__paid small, .ibiz__use small {
  display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.ibiz__paid b {
  display: block; margin-top: .35rem; font-family: var(--mono); font-weight: 500; color: var(--gold);
  font-size: clamp(1.25rem, 1rem + .7vw, 1.6rem); letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance;
}
.ibiz__watch { list-style: none; margin: 1.2rem 0 0; padding: 0; border-top: 1px dashed var(--line-strong); }
.ibiz__watch li {
  position: relative; padding: .7rem 0 .7rem 1.1rem; border-bottom: 1px dashed var(--line-strong);
  color: var(--sc-ink-soft); font-size: 1rem; line-height: 1.3;
}
.ibiz__watch li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--gold);
}
.ibiz__use { margin: 1.2rem 0 0; color: var(--ink-3); font-size: 1rem; line-height: 1.5; }
.ibiz__use small { margin-bottom: .4rem; color: var(--gold); }
.ibiz__col .more { margin-top: auto; padding-top: 1rem; align-self: flex-start; }

/* --------------------------------------------------------- narrow ------ */
@media (max-width: 860px) {
  /* Phones: the picture is a band under the bar, the words sit below it. */
  .ihero { display: block; min-height: 0; padding: var(--bar-h) 0 clamp(2.5rem, 8vw, 3.5rem); }
  .ihero__img { position: relative; display: block; inset: auto; height: auto; aspect-ratio: 16 / 10.5; }
  .ihero__img img { position: absolute; inset: 0; z-index: 0; object-position: center; }
  .ihero::before { display: none; }
  .ihero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--sc-canvas) 2%, rgba(9,9,9,.15) 45%, rgba(9,9,9,.35) 100%); }
  .ihero__in { margin-top: -2.2rem; }
  .ihero__k { margin-top: 0; }
  .ihero__down { display: none; }
  .ipain__grid, .iout__grid { grid-template-columns: 1fr; }
  .ipain__head { position: static; }
  .ichain { grid-template-columns: 1fr; }
  .ichain li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: baseline; gap: .6rem; padding: .85rem 0; border-top: 0; border-left: 1px dashed var(--line-strong); padding-left: 1rem; }
  .ichain li::before { left: -4px; top: 1.15rem; }
  .ichain--after li { border-left: 1px solid var(--gold); }
  .ichain--after li:first-child::before { left: -6px; top: 1.05rem; }
  .ichain b, .ichain small { margin-top: 0; }
  .ichain small { text-align: right; }
  .ibuild__list { grid-template-columns: 1fr; }
  .ibuild__list b { margin-top: 1.1rem; }
  .ifield__grid { grid-template-columns: 1fr; }
  .iout__cap { text-align: left; }
  .ihub__counts { grid-template-columns: 1fr 1fr 1fr; }
  /* Phones: the three side by side as a swipe row, the next one peeking. */
  .ibiz__grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: .8rem;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--sc-gutter)); padding: 0 var(--sc-gutter) .5rem;
    scroll-padding-inline: var(--sc-gutter); scrollbar-width: none;
  }
  .ibiz__grid::-webkit-scrollbar { display: none; }
  .ibiz__col { scroll-snap-align: start; padding: 1.2rem 1.1rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ihero__img img, .ihero__down::after { animation: none; }
  .isel__shot, .isel__shot img, .isel__shot figcaption, .isel__name, .isel__name::after,
  .ibuild__list a, .ibuild__list a::after { transition: none; }
  .isel__shot img { transform: none; }
  .ibuild__list a:hover { transform: none; }
}

/* ---------------------------------------------------------- devices ----
   One drawn device per trade, in HTML so it stays crisp and readable at
   any size: the three sheets (mining), the delay-code translation
   (drilling), rental days (earthworks), tons matched (quarries), shifts at
   the heading (tunneling), a T&M ticket (heavy civil) and a first-draft
   inspection report (geotech). Same chrome as the product frames. */
.dev {
  margin: clamp(2rem, 4vw, 2.8rem) 0 0; border: 1px solid var(--line-strong); border-radius: var(--sc-r-md);
  background: #0E0E0E; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); overflow: hidden; max-width: 40rem;
}
.iout__art .dev { margin-top: 0; max-width: none; }
.dev__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1.1rem;
  border-bottom: 1px solid var(--line); background: #121212;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim);
}
.dev__bar b { font-weight: 500; color: var(--gold); white-space: nowrap; }
.dev__body { padding: 1.1rem 1.1rem 1.2rem; }
.dev__foot { margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); color: var(--sc-ink-soft); font-size: .9rem; line-height: 1.5; }
.dev > .dev__foot { margin: 0; padding: .9rem 1.1rem 1.1rem; }
.dev__foot b { margin-right: .4rem; font-family: var(--mono); font-weight: 500; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.dchip {
  display: inline-flex; align-items: center; padding: .18rem .55rem; border-radius: 999px; white-space: nowrap;
  font-family: var(--mono); font-style: normal; font-size: .66rem; letter-spacing: .04em;
  border: 1px solid var(--line-strong); color: var(--sc-ink-soft);
}
.dchip--ok { color: #7FD69B; border-color: rgba(127, 214, 155, .35); }
.dchip--ok::before { content: "\2713"; margin-right: .35em; }
.dchip--bad { color: #FF9C7A; border-color: rgba(255, 156, 122, .4); }
.is-off { color: #FF9C7A !important; }

/* mining: three sheets */
.sheets__who { margin: 0 0 .8rem; font-family: var(--mono); font-size: .74rem; color: var(--dim); }
.sheets { list-style: none; margin: 0; padding: 0; }
.sheets li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem 1.2rem; align-items: center; padding: .8rem 0; border-top: 1px solid var(--line); }
.sheets__k { color: var(--white); font-weight: 500; }
.sheets__k small { display: block; margin-top: .15rem; font-family: var(--mono); font-weight: 400; font-size: .68rem; color: var(--typed, var(--dim)); }
.sheets__sum { font-family: var(--mono); font-size: .95rem; color: var(--sc-ink-soft); white-space: nowrap; }
.sheets__sum b { color: var(--white); font-weight: 500; }

/* drilling: delay codes */
.codes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; }
.codes__h { margin: 0 0 .7rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.codes__col--out .codes__h { color: var(--gold); }
.codes ul { list-style: none; margin: 0; padding: 0; }
.codes__raw li { padding: .55rem 0; border-top: 1px dashed var(--line-strong); color: var(--sc-ink-soft); font-family: "Caveat", "Bradley Hand", "Segoe Print", cursive; font-size: 1.12rem; line-height: 1.2; }
.codes__out li { display: flex; justify-content: space-between; gap: .8rem; padding: .62rem 0; border-top: 1px solid var(--line); }
.codes__out span { color: var(--white); }
.codes__out b { font-family: var(--mono); font-weight: 500; font-size: .82rem; color: var(--gold); white-space: nowrap; }

/* earthworks: rental days */
.rental { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; }
.rental li { aspect-ratio: 1; display: grid; place-items: center; border-radius: 4px; background: #161616; font-family: var(--mono); font-size: .62rem; color: var(--dim); }
.rental li.on { background: rgba(245, 165, 36, .22); color: var(--white); }
.rental li.is-start, .rental li.is-end { background: var(--gold); color: #0B0B0B; }
.rental__msgs { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .9rem; }
.rental__msgs p { margin: 0; padding: .6rem .75rem; border-radius: 10px 10px 10px 2px; background: #202C33; color: #E9EDEF; font-size: .86rem; line-height: 1.4; }
.rental__msgs span { display: block; margin-bottom: .2rem; font-family: var(--mono); font-size: .64rem; color: var(--gold); }
.rental__rows { list-style: none; margin: .9rem 0 0; padding: 0; }
.rental__rows li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--line); color: var(--sc-ink-soft); font-size: .92rem; }
.rental__rows b { font-family: var(--mono); font-weight: 500; color: var(--white); white-space: nowrap; }

/* quarries: tons matched */
.tons { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.tons li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) 5.6rem; gap: .9rem; align-items: center; }
.tons span { color: var(--white); font-weight: 500; }
.tons i { display: block; height: .7rem; border-radius: 999px; background: linear-gradient(90deg, var(--gold) var(--w), #1E1E1E var(--w)); }
.tons li + li i { background: linear-gradient(90deg, rgba(245, 165, 36, .7) var(--w), #1E1E1E var(--w)); }
.tons b { text-align: right; font-family: var(--mono); font-weight: 500; font-size: .9rem; color: var(--white); }
.tons__gap { display: flex; gap: .9rem; align-items: flex-start; margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.tons__gap p { margin: 0; color: var(--sc-ink-soft); font-size: .9rem; line-height: 1.5; }

/* tunneling: shifts at the heading */
.shifts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.shifts li { display: flex; flex-direction: column; gap: .3rem; padding: .8rem; border-radius: 8px; border: 1px solid var(--line); background: #121212; min-width: 0; }
.shifts__k { font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.shifts b { font-family: var(--mono); font-weight: 500; font-size: 1.35rem; color: var(--white); letter-spacing: -0.03em; }
.shifts small { color: var(--sc-ink-soft); font-size: .78rem; line-height: 1.35; }
.shifts .dchip { align-self: flex-start; margin-top: auto; }

/* heavy civil: T&M ticket */
.tm { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 1.1rem; align-items: start; }
.tm__chat { padding: .9rem; border-radius: 10px; background: #0B141A; display: flex; flex-direction: column; gap: .55rem; }
.tm__chat p { margin: 0; max-width: 92%; padding: .55rem .7rem; font-size: .88rem; line-height: 1.4; color: #E9EDEF; }
.tm__in { border-radius: 2px 10px 10px 10px; background: #202C33; }
.tm__in span { display: block; margin-bottom: .15rem; font-size: .7rem; font-weight: 600; color: var(--gold); }
.tm__out { align-self: flex-end; border-radius: 10px 2px 10px 10px; background: #005C4B; font-family: var(--mono); font-size: 1rem !important; }
.tm__out small { margin-left: .6rem; font-size: .62rem; color: #A9C7BF; }
.tm__out small::after { content: " \2713\2713"; color: #53BDEB; }
.tm__ticket { border: 1px solid rgba(245, 165, 36, .45); border-radius: 10px; padding: .9rem 1rem; background: linear-gradient(160deg, rgba(245, 165, 36, .07), transparent 60%); }
.tm__k { margin: 0 0 .6rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.tm__ticket dl { margin: 0; }
.tm__ticket dl div { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--line); }
.tm__ticket dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); padding-top: .15rem; }
.tm__ticket dd { margin: 0; color: var(--white); font-size: .9rem; line-height: 1.35; }

/* engineering and consulting: hours against budget. Bars only, no figures. */
.bud__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.bud__rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .9rem; align-items: baseline; }
.bud__rows b { color: var(--white); font-weight: 500; font-size: .95rem; }
.bud__who { font-family: var(--mono); font-size: .72rem; color: var(--dim); text-align: right; }
.bud__bar { grid-column: 1 / -1; display: block; height: .7rem; border-radius: 999px; background: #1E1E1E; overflow: hidden; }
.bud__bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--gold); transform: scaleX(var(--used, .5)); transform-origin: left center; }
.bud__over .bud__bar i { background: var(--typed); }
.bud__over small { grid-column: 1 / -1; font-family: var(--mono); font-size: .72rem; color: var(--typed); }
.bud__key { display: flex; gap: 1.2rem; margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: .72rem; color: var(--sc-ink-soft); }
.bud__dot { display: inline-block; width: .6rem; height: .6rem; margin-right: .4rem; border-radius: 50%; background: var(--gold); vertical-align: -.05rem; }
.bud__dot--left { background: #1E1E1E; border: 1px solid var(--line-strong); }

/* geotech: first-draft report */
/* Paper under warm site light, graded like the product frames, not a white sheet. */
.rep { background: #B3A68F; color: #1A1A1A; }
.rep__t { margin: 0 0 .9rem; font-family: var(--geist); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.02em; color: #111; }
.rep__secs { list-style: none; margin: 0; padding: 0; }
.rep__secs li { padding: .75rem 0; border-top: 1px solid #978A73; }
.rep__secs b { font-weight: 600; font-size: .92rem; color: #111; }
.rep__secs p { margin: .3rem 0 .45rem; font-size: .88rem; line-height: 1.5; color: #2E2A24; }
.rep__src { display: inline-block; margin: 0 .35rem .25rem 0; padding: .14rem .5rem; border-radius: 999px; background: rgba(245, 165, 36, .2); border: 1px solid rgba(180, 110, 10, .35); font-family: var(--mono); font-size: .64rem; color: #4A2E00; }
.rep__sign { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: .4rem 0 0; padding-top: .8rem; border-top: 1px solid #978A73; font-family: var(--mono); font-size: .7rem; color: #3D3830; }
.rep__sign b { padding: .45rem .9rem; border-radius: 8px; background: #111; color: #F5A524; font-family: var(--geist); font-size: .85rem; font-weight: 600; }

@media (max-width: 860px) {
  .codes, .tm { grid-template-columns: 1fr; }
  .shifts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rental__msgs { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .sheets li { grid-template-columns: minmax(0, 1fr) auto; }
  .sheets__sum { grid-column: 1 / -1; grid-row: 2; }
  .rental li { font-size: .5rem; }
  .tons li { grid-template-columns: 3.6rem minmax(0, 1fr) 4.8rem; gap: .6rem; }
}
@media (max-width: 560px) {
  .ihub__counts { grid-template-columns: 1fr; gap: 0; padding-bottom: .6rem; }
  .ihub__counts li { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); align-items: baseline; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--line); }
  .ihub__counts li:first-child { border-top: 0; }
  .ihub__counts b { font-size: 2.2rem; }
  .ihub__counts span { margin-top: 0; max-width: none; }
}

/* Outcome frames on phones: a 2880px desktop screen shrunk to 350px is
   unreadable, so the phone screen carries the outcome alone, near full size. */
@media (max-width: 560px) {
  .iout__art .stack { aspect-ratio: auto; display: flex; justify-content: center; }
  .iout__art .stack__desk { display: none; }
  .iout__art .stack__phone { position: relative; left: auto; right: auto; bottom: auto; width: min(17rem, 78%); border-radius: 26px; }
}

/* ------------------------------------------------------------ phones ----
   Mobile round (2026-10-28). Labels and chips never under 12px, secondary
   text 13px, every link a 44px target, tighter section rhythm, and the
   reading cards go sideways so six of them fit in about two screens.
   Desktop is untouched: everything here sits under 760px. Selectors carry a
   body prefix so they outrank the per-section label rules. Section padding comes
   from site.css; .lbl and .ref__k match its 13px. */
@media (max-width: 760px) {
  body :is(.ibuild__sol, .ibuild__n, .isel__n, .isel__out, .ichain__n, .dev__bar, .dev__foot b,
    .codes__h, .tm__k, .shifts__k, .rep__sign span, .tm__in span, .console__by, .console__by time,
    .qcard__src, .qcard__foot .chip, .dchip, .rep__src, .rental__msgs span, .tm__out small, .tm__ticket dt,
    .sheets__k small, .bud__who, .bud__key, .bud__over small,
    .ibiz__who span, .ibiz__paid small, .ibiz__use small) { font-size: 12px; }
  body :is(.ind .lbl, .lbl, .ref__k, .ichain small, .ifield__note, .sheets__who, .cta__sub, .iroi__fig b small, .ihero__k, .ihero__k span) { font-size: 13px; }

  /* 44px targets: text links become blocks of their own height */
  body :is(main .more, .crumbs a, .qcard__src[href], .trust__in .more, .iproof__cred a, .talk__nda a) { display: inline-flex; align-items: center; min-height: 44px; }
  body .iroi__links { gap: 0 1.5rem; }

  /* rental strip: two weeks as two rows of seven, so each day is readable */
  body .rental { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  body .rental li { aspect-ratio: auto; height: 2.1rem; font-size: 12px; }

  /* reading cards sideways */
  body .refs { gap: 8px; }
  body .ref a { grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 1rem; row-gap: .3rem; padding: 1rem 0; border-top: 1px solid var(--line); align-items: start; }
  body .ref__img { grid-row: 1 / span 2; margin: 0; aspect-ratio: 4 / 3; }
  body .ref__d { display: none; }
  body .ref__t { font-size: 1rem; }

  /* the outcome phone: big enough to read, not a full screen of scroll */
  body .iout__art .stack__phone { width: min(17.5rem, 80%); }

  /* crumbs: links grew to 44px, so keep the row on one baseline */
  body .crumbs ol { align-items: center; }
  body .ihero { padding-bottom: 1rem; }
}