/* =============================================================================
   INDUSTRIES — page-specific sections
   =============================================================================
   Requires ax-system.css (loaded first): tokens, type scale, buttons, section
   shell, hero, CTA, header/footer, motion. This file styles ONLY this page's
   sections, reusing the shared tokens and editorial registers so Industries
   reads as a natural continuation of Home, Services and AI Solutions.

   Page-unique registers:
     ind-constraints  · the weighty constraint list (Section 2)
     ind-row          · the industry editorial spread (Section 3 — the centerpiece)
     ind-patterns     · numbered statement rows (Section 4)
     ind-stance       · the domain-expertise point of view (Section 6)
   Section 5 (why context matters) reuses the shared .svc-value register.
   ============================================================================= */


/* =============================================================================
   SECTION 2 — THE REALITY. A short, weighty list of the constraints that
   decide outcomes. Read as one breath, not a grid of features.
   ============================================================================= */
.ind-reality__lead { margin-top: 0; margin-bottom: clamp(36px, 4.5vw, 56px); }

.ind-constraints {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(16px, 2.4vw, 28px) clamp(28px, 4.5vw, 56px);
    align-items: baseline;
    max-width: 920px;
}

.ind-constraints__item {
    font-family: var(--ax-font-head);
    font-weight: 500;
    font-size: clamp(24px, 3.4vw, 44px);
    letter-spacing: -0.026em;
    line-height: 1.04;
    color: var(--ax-text);
    position: relative;
}

/* A quiet navy marker before each (except the first) — discovered, not
   decorative. */
.ind-constraints__item + .ind-constraints__item::before {
    content: "";
    position: absolute;
    left: clamp(-16px, -2.4vw, -28px);
    top: 0.46em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ax-accent);
    transform: translateX(-50%);
    opacity: 0.55;
}


/* =============================================================================
   SECTION 3 — INDUSTRIES WE WORK WITH. Each industry is an editorial spread:
   a head (number · name · context tag) over a three-pair body
   (Challenge · How AI helps · How we deliver). No cards, no icons — the
   structure is hairline rules and a label column.
   ============================================================================= */
.ind-list {
    border-top: 1px solid var(--ax-border);
}

.ind-row {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) 1.2fr;
    gap: clamp(24px, 5vw, 80px);
    padding: clamp(40px, 5vw, 72px) 0;
    border-bottom: 1px solid var(--ax-border);
}

/* The head column — name is the statement, context tag is the quiet read. */
.ind-row__head { align-self: start; }

.ind-row__no {
    display: block;
    font-family: var(--ax-font-head);
    font-weight: 500;
    font-size: 13px;
    color: var(--ax-accent-soft);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    margin-bottom: 18px;
}

.ind-row__name {
    font-family: var(--ax-font-head);
    font-weight: 600;
    font-size: clamp(24px, 2.9vw, 36px);
    letter-spacing: -0.028em;
    line-height: 1.06;
    color: var(--ax-text);
    margin: 0;
    text-wrap: balance;
}

.ind-row__context {
    display: block;
    font-family: var(--ax-font-body);
    font-size: clamp(13px, 1.1vw, 15px);
    line-height: 1.5;
    color: var(--ax-text-3);
    margin-top: 16px;
    max-width: 24ch;
}

/* The body column — three labelled pairs, hairline-separated. */
.ind-row__body { margin: 0; padding: 0; }

.ind-row__pair {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 0 clamp(20px, 2.4vw, 32px);
    padding: clamp(18px, 2vw, 22px) 0;
    border-top: 1px solid var(--ax-border-2);
    align-items: baseline;
}
.ind-row__pair:first-child { border-top: none; padding-top: 0; }
.ind-row__pair:last-child { padding-bottom: 0; }

.ind-row__label {
    font-family: var(--ax-font-head);
    font-weight: 600;
    font-size: clamp(12px, 1vw, 13px);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ax-accent-soft);
    line-height: 1.4;
    margin: 0;
}

.ind-row__text {
    font-family: var(--ax-font-body);
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.58;
    color: var(--ax-text-2);
    margin: 0;
    max-width: 52ch;
}


/* =============================================================================
   SECTION 4 — PATTERNS ACROSS INDUSTRIES. Numbered statement rows + the pivot
   remark (the .ax-aside lives in ax-system.css). Mirrors the AI-Solutions /
   Services problem register.
   ============================================================================= */
.ind-patterns {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 880px;
}

.ind-pattern {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 0 28px;
    align-items: baseline;
    padding: clamp(20px, 2.8vw, 30px) 0;
    border-top: 1px solid var(--ax-border);
}
.ind-pattern:last-child { border-bottom: 1px solid var(--ax-border); }

.ind-pattern__no {
    font-family: var(--ax-font-head);
    font-weight: 500;
    font-size: 13px;
    color: var(--ax-text-3);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.ind-pattern__text {
    font-family: var(--ax-font-head);
    font-weight: 500;
    font-size: clamp(19px, 2.1vw, 29px);
    line-height: 1.32;
    letter-spacing: -0.022em;
    color: var(--ax-text);
    margin: 0;
    text-wrap: balance;
}


/* =============================================================================
   SECTION 5 — WHY CONTEXT MATTERS. Its own register (not the .svc-value
   two-column one, which loses its design when stacked). Each understanding is
   a numbered term (navy index + Geist heading) over a body statement, on a
   hairline rhythm. The term carries its own weight, so the list reads as
   designed at every width — two-column on desktop, stacked on mobile.
   ============================================================================= */
.ind-context__lead { margin-top: 20px; }

.ind-context {
    margin: clamp(8px, 1.5vw, 16px) 0 0;
    padding: 0;
    border-top: 1px solid var(--ax-border-2);
}

.ind-context__row {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) 1.1fr;
    gap: 0 clamp(32px, 5vw, 72px);
    align-items: baseline;
    padding: clamp(26px, 3.2vw, 40px) 0;
    border-bottom: 1px solid var(--ax-border-2);
}

/* The term — navy index number sitting beside a confident Geist heading. */
.ind-context__term {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 18px;
    align-items: baseline;
    margin: 0;
}

.ind-context__no {
    font-family: var(--ax-font-head);
    font-weight: 500;
    font-size: 13px;
    color: var(--ax-accent-soft);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.ind-context__k {
    font-family: var(--ax-font-head);
    font-weight: 600;
    font-size: clamp(20px, 2.1vw, 28px);
    letter-spacing: -0.024em;
    line-height: 1.12;
    color: var(--ax-text);
    text-wrap: balance;
}

.ind-context__v {
    font-family: var(--ax-font-body);
    font-size: clamp(15px, 1.25vw, 16.5px);
    line-height: 1.62;
    color: var(--ax-text-2);
    margin: 0;
    max-width: 50ch;
}


/* =============================================================================
   SECTION 6 — WHAT DOMAIN EXPERTISE MEANS. The page's point of view as numbered
   editorial statements (Geist, near-black), closed by one quiet text link to the
   delivery model on Services — no capability re-list.
   ============================================================================= */
.ind-stance {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 940px;
}

.ind-stance__item {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 0 28px;
    align-items: baseline;
    padding: clamp(24px, 3vw, 36px) 0;
    border-top: 1px solid var(--ax-border);
}
.ind-stance__item:last-child { border-bottom: 1px solid var(--ax-border); }

.ind-stance__no {
    font-family: var(--ax-font-head);
    font-weight: 500;
    font-size: 13px;
    color: var(--ax-accent-soft);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

/* The statement is the section — give it presence (Geist, near-black). */
.ind-stance__text {
    font-family: var(--ax-font-head);
    font-weight: 500;
    font-size: clamp(20px, 2.3vw, 31px);
    line-height: 1.28;
    letter-spacing: -0.024em;
    color: var(--ax-text);
    margin: 0;
    max-width: 30ch;
    text-wrap: balance;
}

/* One quiet line back to the delivery model — a remark, not a button. */
.ind-stance__handoff {
    font-family: var(--ax-font-body);
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.6;
    color: var(--ax-text-3);
    margin: clamp(40px, 5vw, 60px) 0 0;
    max-width: 52ch;
}

.ind-stance__link {
    color: var(--ax-accent);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s var(--ax-ease);
    white-space: nowrap;
}
.ind-stance__link:hover { border-bottom-color: var(--ax-accent); }
.ind-stance__link span { display: inline-block; transition: transform 0.25s var(--ax-ease); }
.ind-stance__link:hover span { transform: translateX(3px); }


/* =============================================================================
   RESPONSIVE — TABLET  ≤ 980px
   ============================================================================= */
@media (max-width: 980px) {

    /* Industry spread: stack head over body */
    .ind-row { grid-template-columns: 1fr; gap: 24px; }
    .ind-row__context { max-width: 100%; }

    /* Why-context: stack term over statement; number + heading stay inline */
    .ind-context__row { grid-template-columns: 1fr; gap: 12px; }
    .ind-context__v { max-width: 100%; }
}


/* =============================================================================
   RESPONSIVE — MOBILE  ≤ 640px
   ============================================================================= */
@media (max-width: 640px) {

    /* Reality constraints: smaller, tighter */
    .ind-constraints { gap: 12px 22px; }
    .ind-constraints__item { font-size: clamp(22px, 8vw, 30px); }
    .ind-constraints__item + .ind-constraints__item::before { left: -13px; }

    /* Industry spread: label stacks over text */
    .ind-row { padding: 36px 0; }
    .ind-row__name { font-size: clamp(24px, 8vw, 32px); }
    .ind-row__pair { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }

    /* Patterns rows */
    .ind-pattern { grid-template-columns: 32px 1fr; gap: 0 14px; padding: 20px 0; }
    .ind-pattern__text { font-size: 20px; }

    /* Why-context: tighter padding, heading a touch smaller */
    .ind-context__row { padding: 22px 0; }
    .ind-context__k { font-size: clamp(20px, 6.5vw, 24px); }
    .ind-context__term { gap: 0 14px; }

    /* Stance: tighter index column, statements full-width */
    .ind-stance__item { grid-template-columns: 32px 1fr; gap: 0 14px; padding: 22px 0; }
    .ind-stance__text { font-size: 21px; max-width: 100%; }
}