/* Hallmark · macrostructure: Long Document (numbered divider index)
 * design-system: MEMORY.md - homepage · /pricing · /contact are DESIGN LOCKED
 * genre: modern-minimal · theme: locked brand tokens (ivory · indigo · evergreen)
 * diversification: SUSPENDED - system-managed project. Pages must SHARE the
 *   system, not differ from each other. Every pattern here is lifted from a
 *   page Jacob has already approved rather than invented for variety.
 * pre-emit critique: P5 H5 E5 S5 R5 V4
 *
 * ===================================================================
 * INDUSTRIES PAGE
 *
 * Replaces css/industries-page.css (the tabbed "file cabinet" - a celadon
 * slab holding four nested cards, switched by radio inputs, with a second
 * full copy of every panel in a <details> accordion for mobile).
 *
 * REVISION (Jacob): S2 is the dark band and S3 is ivory - the reverse of the
 * first pass. The evidence statement lost its purple card and now stands on
 * the same ivory ground as S3, divided by a hairline only.
 *
 * Namespace: .trin-*
 *
 * NOTE ON THE BOX MODEL: this theme is globally box-sizing: content-box.
 * `max-width: 1420px; padding: 0 32px` therefore describes a 1420px CONTENT
 * box - matching the header pill and every other page. Do NOT add
 * box-sizing: border-box to a page-width wrapper; it renders 64px narrow.
 *
 * GUTTER LADDER: 32 / 24 / 16, identical to /pricing and /contact. Set once
 * in the responsive block at the bottom; do not override per section.
 * =================================================================== */

/* ===================================================================
   S1 - HERO · ivory, centred, trace field
   =================================================================== */

.trin-hero {
    background: var(--mv-color-ivory);
    padding-top: calc(var(--tr-hero-clearance) + var(--tr-hero-gap));
    padding-bottom: var(--tr-hero-gap);
    position: relative;
    overflow: hidden;
}

/* The trace field used to be terminated by the evergreen band's hard colour
   edge. S2 is a card on ivory now, so the hero's ivory runs straight into the
   next section and an abruptly-cut field reads as a seam. Fade it out over the
   bottom third instead. */
.trin-hero__field {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}

.trin-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
    text-align: center;
}

.trin-hero__copy {
    max-width: 820px;
    margin: 0 auto;
}

.trin-hero__copy .mv-eyebrow {
    margin-bottom: 20px;
}

.trin-hero__headline {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h1);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h1);
    line-height: var(--tr-leading-h1);
    color: var(--mv-color-evergreen);
    margin: 0 0 20px;
    overflow-wrap: anywhere;
}

.trin-hero__sub {
    color: var(--tr-text-tertiary);
    margin: 0 auto 36px;
    max-width: 64ch;
}

.trin-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tr-space-gap-md);
    flex-wrap: wrap;
}

/* ===================================================================
   S2 - THESIS · slim EVERGREEN band

   One line, stating the page's argument. Deliberately slim - it is a hinge
   and a declaration, not a section with content to read. It also stops the
   ivory hero running straight into the ivory five below it.
   =================================================================== */

/* S2 leads with the value proposition and is deliberately industry-AGNOSTIC.

   The claim must be PROTECTIVE - what doesn't reach the client - not a
   capability handed to them. A draft read "Whatever your industry has to
   prove, you can prove it"; Jacob: "makes no sense for an IT firm. it's
   protective, not like a product team." An MSP's value is that the failure
   never becomes the client's problem, not that the client is equipped to
   demonstrate something.

   The headline is the deliberate negation of the hero's second sentence
   ("A technology problem here doesn't stay a technology problem. It becomes
   a compliance finding, a liability question, or money already gone"), so
   the band reads as the answer to the problem the hero just stated. If the
   hero copy changes, this line has to move with it.
   The five are named in the supporting line only, as examples of range - they
   must never be promoted back into the headline. Heading the band with the
   five names fences the page in at exactly the point it should be opening
   out, and buries the actual takeaway: this works regardless of sector.

   This band is where the operating standard is INTRODUCED. The hero used to
   end "One operating standard sits underneath all five", which Jacob called
   volunteered out of nowhere: it pivoted from stakes to a solution noun the
   reader had no context for, and referenced a set not yet shown. It was cut,
   so the hero now states the problem and this band answers it. Do not put
   that sentence back in the hero.

   The supporting line also lets a visitor self-identify without scrolling
   the 1515px of S3.

   It names the five; it does NOT describe them. S3 does that. Naming is
   navigational, describing is redundant: an earlier draft summarised S3's
   four shared disciplines here and simply restated, in the abstract, the
   twenty bullets sitting directly underneath it.

   Set as a single typographic run, never a grid or a row list. S3 (five
   hairline rows) and S4 (six hairline blocks) already share that device and a
   third instance flattens the page. Stays centred so it pairs with the hero
   and reads as a statement rather than another left-aligned list. */
.trin-thesis {
    background: var(--mv-color-ivory);
    /* No vertical padding. The hero carries its own bottom gap and .trin-five
       its own top gap (96px), so anything here stacks on top of a gap that
       already exists - 88px + 96px read as a double gap after the callout. */
    padding: 0;
}

.trin-thesis__wrap {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
}

/* A CARD, not a band. This is supplementary to the five, not a peer of them,
   and a full-bleed evergreen section gave it the same weight as S3 and S4.
   Containing it also lets the hero's ivory run straight through to S3 -
   which is why .trin-hero__field now has to fade at the bottom instead of
   being chopped off by a hard colour edge. Same construction as the contact
   page's testimonial card: ivory SECTION ground, dark block inset inside it. */
.trin-thesis__card {
    background: var(--mv-color-evergreen);
    border-radius: var(--tr-radius-md);
    overflow: hidden;
    padding: 64px 0;
    position: relative;
}

.trin-thesis::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, var(--tr-iv-subtle) 1px, transparent 1px);
    background-size: 26px 26px;
}

/* Interactive ASCII field - js/tr-industries-ascii.js, the same effect as the
   contact page's testimonial card. Positioned exactly as .tr-testimonials-canvas
   is: no mask.

   An earlier attempt forked the process canvas (ivory glyphs, HOVER_ALPHA 0.32)
   and then needed a mask to keep text off the cursor blob. Wrong file. The
   testimonials config is lighter - lavender at 0.06/0.28 - and clears AA on its
   own, which is why the reference has never needed masking. */
#trin-thesis-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;

    /* Ceiling so an inline pixel width set by the canvas script can never
       exceed its box. The scripts write canvas.style.width in px, which beats
       the stylesheet's width:100%; if the ResizeObserver misses a beat on a
       viewport shrink the element stays oversized and pushes the page wide -
       393px of horizontal overflow at 375 before this. */
    max-width: 100%; max-height: 100%;
}

.trin-thesis__inner {
    position: relative;
    z-index: 1;
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
    text-align: center;
}

.trin-thesis__line {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h3);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h3);
    line-height: var(--tr-leading-h3);
    color: var(--mv-color-ivory);
    max-width: 900px;
    margin: 0 auto;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

/* The second half is the claim; the first half is only its setup. */


/* The eyebrow gets its OWN ground rather than sitting on the animated field.
   Lime is the correct colour on a dark card, but it is 12px, so it is the one
   element the cursor blob can break: on the bare card it measures 3.29:1 at
   HOVER_ALPHA peak (3.65 even without its chip - the blob, not the chip, is
   what costs it). Backing the chip with near-opaque evergreen makes the
   reading deterministic at 5.82 under the blob and 6.09 at rest.

   Done this way so the FIELD keeps its reference strength. The alternative was
   dropping HOVER_ALPHA to 0.12, which clears the eyebrow but halves the
   interaction - fixing the 12px element by weakening the whole effect.
   0.88 not 1.0 so the field still reads faintly behind the chip instead of
   punching a hard rectangle out of it. */
.trin-thesis__inner .mv-eyebrow {
    margin-bottom: 18px;
    background:
        linear-gradient(rgba(58, 205, 72, 0.08), rgba(58, 205, 72, 0.08)),
        rgba(13, 44, 17, 0.88);
}

.trin-thesis__body {
    max-width: 700px;
    margin: 20px auto 0;
    font-size: var(--tr-size-body-lg);
    line-height: var(--tr-leading-body-lg);
    color: var(--tr-light-secondary);
    text-wrap: pretty;
}

/* Emphasis carries the closing value clause. "(to name a few)" is what keeps
   the page from fencing itself at five and pre-frames S4, so "The standard
   travels" lands as a payoff rather than an assertion - an earlier draft
   closed on "And it doesn't stop with these five", which Jacob read as
   "awkwardly lead magnetty". Un-fence in passing, close on value.
   600 not 700 - bold blooms on evergreen at 18px. */
.trin-thesis__body b {
    font-weight: var(--tr-weight-heading);
    color: var(--mv-color-ivory);
}

/* ===================================================================
   S4 - THE STANDARD TRAVELS · full-bleed INDIGO

   Six sectors. Its job is BREADTH, not showcase - so the SECTOR is the
   headline and the outcome is the evidence beneath it.

   IT MUST SIT BELOW THE FIVE, never above. Above, it listed six sectors
   immediately before five different ones and read as a rival taxonomy -
   two industry lists back to back with only Healthcare in common. Below,
   the same six become proof the standard is portable past the five we
   concentrate on. Same content, opposite effect.
   =================================================================== */

.trin-proof {
    /* Lightest stop is #382C67, NOT lighter than the base indigo. Lime eyebrow
       text sits on a lime chip tint (rgba(58,205,72,0.12)); through that chip
       lime measured 3.81:1 on the old #473c88 stop and 4.45 even on the base
       #3D3172 - both under the 4.5 a 12px eyebrow needs. #382C67 gives 4.86.
       Do not lighten these stops. */
    background: linear-gradient(150deg, #382C67 0%, #342861 50%, #2e2456 100%);
    padding: var(--tr-space-section-lg) 0;
    position: relative;
    overflow: hidden;
}

.trin-proof__inner {
    position: relative;
    z-index: 1;
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
}

.trin-proof__header {
    margin-bottom: 52px;
    max-width: 820px;
}

.trin-proof__header .mv-eyebrow {
    margin-bottom: 16px;
}

.trin-proof__headline {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h2);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h2);
    line-height: var(--tr-leading-h2);
    color: var(--mv-color-ivory);
    margin: 0 0 16px;
    overflow-wrap: anywhere;
}

.trin-proof__sub {
    color: var(--tr-iv-strong);
    margin: 0;
    max-width: 68ch;
}

.trin-proof__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 44px 48px;
}

/* Outcome-led, not spec-led - the opposite emphasis to the calendar's
   four-across, so the two dark bands don't read as the same block.

   Flex column with the client pushed to the bottom: the three outcomes are
   different lengths, so without it the client names sat at three different
   heights and the row read as ragged. */
.trin-case {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--tr-iv-border);
    padding-top: 22px;
}

 /* THE SECTOR IS THE HEADLINE. The band proves range, so the thing a
    visitor should be able to skim is the list of sectors - not six outcome
    statements competing with each other. */
.trin-case__sector {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h5);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h3);
    line-height: var(--tr-leading-h5);
    color: var(--mv-color-ivory);
    margin: 0 0 12px;
    overflow-wrap: anywhere;
}

.trin-case__outcome {
    flex: 1 1 auto;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-iv-strong);
    margin: 0 0 16px;
}

/* Pushed to the bottom so six cells of differing outcome length still line
   their attributions up. */
.trin-case__client {
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-body-md);
    color: var(--mv-color-celadon);
    margin-top: auto;
}

/* ===================================================================
   S3 - THE FIVE · IVORY

   IVORY, not indigo. On the dark ground the row needed a hairline under
   every tier and under every gap item to hold its structure - nine rules
   per row, forty-five in the section. That reads as noise, not structure.
   On ivory the type does the work and the section needs exactly ONE rule
   per row: the divider between them. Nothing inside a row is ruled.

   All five visible; the old page hid four behind a click.
   =================================================================== */

.trin-five {
    background: var(--mv-color-ivory);
    padding: var(--tr-space-section-lg) 0;
    position: relative;
}

.trin-five__inner {
    position: relative;
    z-index: 1;
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
}

.trin-five__header {
    margin-bottom: 48px;
    max-width: 820px;
}

.trin-five__header .mv-eyebrow {
    margin-bottom: 16px;
}

.trin-five__headline {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h2);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h2);
    line-height: var(--tr-leading-h2);
    color: var(--mv-color-evergreen);
    margin: 0 0 16px;
    overflow-wrap: anywhere;
}

.trin-five__sub {
    color: var(--tr-text-tertiary);
    margin: 0;
    max-width: 72ch;
}

.trin-five__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--mv-hairline-mid);
}

/* THREE THINGS, not seven.

   The row used to carry numeral, name, segment list, frameworks, a stake, a
   repeated "what we find" label and six bullets - 48 content units across the
   section, ~80% of them irrelevant to any single visitor. It read as
   overwhelming because it was. Cutting the stake and relocating the
   frameworks leaves identity and evidence, which is all the section needs to
   do: let a reader find themselves, then prove we know their environment.

   One rule between rows. Nothing inside a row is ruled. */
.trin-row {
    display: grid;
    /* The dead space on the right was 216px when the tracks were 0.72/1.28.
       Widening the identity column to an even 1fr fixed that but created a
       new problem - the segment line got long enough to wrap with a two-word
       second line on most rows. The space is absorbed by a wider GAP instead,
       so neither column has to stretch past its content. */
    grid-template-columns: 104px minmax(0, 0.85fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
    position: relative;   /* .tr-ico::after watermark */
    overflow: hidden;
    padding: 30px 16px;
    margin: 0 -16px;
    border-top: 1px solid var(--mv-hairline-mid);
    border-radius: var(--tr-radius-sm);
    transition: background 0.25s var(--tr-ease-out);
}

.trin-row:hover {
    background: var(--tr-ind-wash);
}

/* Large enough to scan down the left edge - the per-industry mark, doing the
   job an icon would, in the site's own language. */
.trin-row__num {
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-h3);
    font-weight: var(--tr-weight-bold);
    font-variant-numeric: tabular-nums;        /* every ordinal numeral on the site is tabular */
    letter-spacing: -0.02em;
    color: var(--mv-color-indigo);
    line-height: 1;
    padding-top: 2px;
}

.trin-row__id {
    min-width: 0;
}

.trin-row__title {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h4);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h3);
    line-height: var(--tr-leading-h4);
    color: var(--mv-color-evergreen);
    margin: 0 0 10px;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

/* Mono, not body prose. This is a segment LIST - a label - and it is what
   lets someone identify as a "family office" when "Investment Firms" alone
   might not land. */
.trin-row__who {
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-body-md);
    line-height: 1.6;
    color: var(--mv-color-indigo);
    margin: 0;
    /* Splits the segment list evenly across its lines instead of leaving two
       words stranded on the second. These run 60-95 characters, so at any
       column width some of them wrap; balance makes the wrap look chosen. */
    text-wrap: balance;
}

/* Only two verticals carry these. In the identity column rather than a
   right-aligned block: the row height is set by the capability column, so a
   missing line is invisible instead of leaving three rows visibly ragged -
   which is what sent them to the evidence section in the first place. */
.trin-row__frameworks {
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-sm);
    letter-spacing: var(--tr-tracking-caps-sm);
    line-height: 1.7;
    color: var(--tr-text-tertiary);
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--mv-hairline);
}

/* The capability list. One column: four items at 60-75 characters need the
   measure, and two columns inside this track would wrap every one. */
.trin-gaps {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.trin-gaps li {
    position: relative;
    padding: 7px 0 7px 20px;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-relaxed);
    color: var(--tr-text-tertiary);
}

/* A dash, not a dot - these are findings in a report, not features. Indigo,
   not lime: lime is the dark-ground accent and drops to ~1.8:1 on ivory. */
.trin-gaps li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15px;
    width: 9px;
    height: 1px;
    background: var(--mv-color-indigo);
}

.trin-five__catch {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary);
    margin: 32px 0 0;
}

/* Ivory ground -> indigo is the accent, per the sitewide colour rule. */
.trin-five__catch a {
    color: var(--mv-color-evergreen);
    font-weight: var(--tr-weight-bold);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.2s var(--tr-ease-out);
}

.trin-five__catch a:hover,
.trin-five__catch a:focus-visible {
    color: var(--mv-color-indigo);
}

/* ===================================================================
   RESPONSIVE

   GUTTER LADDER 32 / 24 / 16 - identical to /pricing and /contact. Two-class
   selectors so they beat the single-class base rules above. Keep this rule
   SEPARATE from the section-padding rules: merging the selector lists once
   left the gutter at 0 and pushed vertical padding onto the inner wrappers.
   =================================================================== */

@media (max-width: 1024px) {

    .trin-page .trin-hero__inner,
    .trin-page .trin-thesis__wrap,
    .trin-page .trin-thesis__inner,
    .trin-page .trin-five__inner,
    .trin-page .trin-proof__inner {
        padding: 0 24px;
    }

    .trin-five,
    .trin-proof {
        padding: var(--tr-space-section-sm) 0;
    }

    /* Three across needs more room than a tablet has. */
    .trin-proof__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 40px;
    }

    /* The numeral rail narrows; the two content columns keep their measure. */
    .trin-row {
        grid-template-columns: 72px minmax(0, 0.9fr) minmax(0, 1fr);
        gap: 36px;
    }
}

@media (max-width: 768px) {

    .trin-page .trin-hero__inner,
    .trin-page .trin-thesis__wrap,
    .trin-page .trin-thesis__inner,
    .trin-page .trin-five__inner,
    .trin-page .trin-proof__inner {
        padding: 0 16px;
    }

    /* Card gets less air on a phone; 64px top and bottom is a lot of empty
       evergreen once the copy runs to five lines. */
    .trin-thesis__card {
        padding: 44px 0;
    }

    .trin-five,
    .trin-proof {
        padding: var(--tr-space-section-xs) 0;
    }

    .trin-thesis {
        padding: 32px 0;
    }

    .trin-proof__list {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .trin-proof__header,
    .trin-five__header {
        margin-bottom: 32px;
    }

    /* Hero field and action-button widths are global - see brand-tokens.css. */

    /* Single column. A 72px numeral rail costs a fifth of the measure at
       375px, so the numeral sits above the name instead of beside it. */
    .trin-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding: 28px 12px;
        margin: 0 -12px;
    }

    .trin-row__num {
        padding-top: 0;
    }
}