/* ── sections/industries.css — "Industries we serve" (in two rows) ──────
   The section, with the owner's layout:
   five cards in the first row, four in the second, and nothing else. Both rows share the
   five-row's card width, so the four sit centred under the five like brickwork. Each row
   is its own flex accordion: hovering (or keyboard-focusing) a card
   widens it and opens a rule + one line.

   Four layouts, and only the first hides anything behind a pointer:
   · accordion  — html.fx-motion AND a real hovering pointer AND ≥1000px. 5 + 4, lines
                  closed until hover/focus. Gated on fx-motion so a script failure (no
                  class on <html>) falls back to the open grid below.
   · open grid  — reduced motion, ?static=1, touch screens, ≥1000px: the same 5 + 4 with
                  every line showing (this is what the owner's Windows laptop gets).
   · three      — 761–999px: 3 + 3 + 3, icon beside the name, lines showing.
   · tiles      — ≤760px: a 3 × 3 grid of icon + name, and the tapped tile's line in one
                  caption under it (industries.js), so phones don't scroll nine rows.

   Accordion geometry: a hovered card's box must still cover the box it had before, or the
   pointer lands on a neighbour and the row flips back and forth ("hover-chasing"). With
   every card at flex 1 and the open one at --grow, that holds for any card count (the
   free space each card gains or loses is linear in its grow factor); industries.js
   re-checks it for both rows with ?check=1.                                            */

.s7i-root {
  --n: 5;                                           /* cards in the widest row: sets the width both rows share */
  --pad: 20px; --gap: 12px; --ico: 105px; --grow: 2.2;   /* --ico: a multiple of 15, so every pixel is whole */
  --name-fs: 17px; --desc-fs: 14px; --desc-lh: 1.48; --tag-h: 25px;
  /* accordion card height = everything the OPEN card has to hold, so no card ever changes height and the rows
     never move vertically: padding, tag, icon zone, 2-line name, rule, 2-line line, a little slack */
  --card-h: calc(2 * var(--pad) + var(--tag-h) + 14px + var(--ico) + 2.36 * var(--name-fs) + 25px + 2 * var(--desc-lh) * var(--desc-fs) + 4px);
}
/* spacing: the site's section step on top (under the brain band). The fixes section below opens with its own short
   top (clamp(14px, 1.8vh, 24px), sections/fixes.css), so the bottom is the step less that: one even gap between them */
.s7-sec.s7i-root { padding-bottom: calc(var(--s7-sec) - clamp(14px, 1.8vh, 24px)); }

/* ── frame: head and button on one line, the rows under them (phones move the button to the end) ── */
.s7i-root .s7i-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head cta" "rows rows" "cap cap"; column-gap: 40px; }
.s7i-root .s7i-head { grid-area: head; min-width: 0; }
.s7i-root .s7i-cta { grid-area: cta; align-self: end; margin-bottom: var(--s7-head-gap); color: var(--navy); }
.s7i-root .s7i-cta .ic { background: var(--navy); color: #fff; }
.s7i-root .s7i-cta .ic svg { width: 14px; height: 14px; }
.s7i-root .s7i-rows { grid-area: rows; min-width: 0; }

/* ── the heading types itself in (industries.js); it is laid out in full from the start ── */
.s7i-root .s7i-title { position: relative; }
.s7i-root .s7i-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.s7i-root .s7i-tw { display: block; }
/* the caret is out of flow, so moving it while typing never changes where lines break. It is hidden
   unless the typing is running (industries.js adds .on), so a still heading (reduced motion, ?static=1,
   no script) has no cursor; after its blinks it ends hidden (forwards on the 0-opacity frame) and
   industries.js then removes it */
.s7i-root .s7i-caret { position: absolute; display: inline-block; width: .2em; height: .74em; margin: .2em 0 0 .08em; color: var(--gold); pointer-events: none; visibility: hidden; }
html.fx-motion .s7i-root .s7i-caret.on { visibility: visible; }
html.fx-reduce .s7i-root .s7i-caret { display: none; }
.s7i-root .s7i-caret svg { display: block; width: 100%; height: 100%; }
.s7i-root .s7i-rest { visibility: hidden; }
html.fx-motion .s7i-root .s7i-caret.blink { animation: s7i-blink 1s steps(1) 7 forwards; }
@keyframes s7i-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ── cards (the open grid is the base) ── */
.s7i-root .s7i-rows { display: grid; gap: var(--gap); }
.s7i-root .s7i-row {
  --k: 5; display: grid; grid-template-columns: repeat(var(--k), minmax(0, 1fr)); gap: var(--gap);
  width: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n) * var(--k) + (var(--k) - 1) * var(--gap)); margin-inline: auto;
}
.s7i-root .s7i-card {
  --dl: calc(var(--i, 0) * 55ms);
  position: relative; min-width: 0; background: var(--card); border-radius: var(--r-card); padding: var(--pad);
  display: flex; flex-direction: column; overflow: hidden;
  scroll-margin: 100px 0 16px;     /* when Tab scrolls a card into view: clear of the fixed header, ring off the edge */
}
.s7i-root .s7i-card:focus-visible { outline-offset: 3px; }
.s7i-root .s7i-top { display: flex; justify-content: flex-end; }
.s7i-root .s7i-tag {
  font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line-navy); border-radius: 999px; padding: 6px 10px; white-space: nowrap;
  transition: color .3s ease, border-color .3s ease;
}
/* in the open grids the icon zone is fixed, so icons, names and rules line up across a row whatever each line's length */
.s7i-root .s7i-media { flex: none; display: grid; place-items: center; padding: 4px 0 10px; min-height: 0; }
.s7i-root .s7i-box { width: var(--ico); height: var(--ico); display: grid; place-items: center; }
.s7i-root .s7i-cv { display: block; width: var(--ico); height: var(--ico); }
.s7i-root .s7i-content { min-width: 0; }
.s7i-root .s7i-name {
  margin: 0; min-height: 2.36em; display: flex; align-items: flex-end; text-wrap: balance;
  font: 700 var(--name-fs)/1.18 var(--font); letter-spacing: -.01em; color: var(--navy);
}
.s7i-root .s7i-rule { position: relative; display: block; height: 1px; background: var(--line); margin: 12px 0; transform-origin: 0 50%; }
.s7i-root .s7i-rule::before { content: ""; position: absolute; left: 0; top: -.5px; width: 22px; height: 2px; border-radius: 2px; background: var(--gold); }
.s7i-root .s7i-nw { white-space: nowrap; }
.s7i-root .s7i-desc { margin: 0; max-width: 36ch; font: 500 var(--desc-fs)/var(--desc-lh) var(--font); color: var(--muted); text-wrap: pretty; }
@media (hover: hover) {
  .s7i-root .s7i-card:hover .s7i-tag { color: var(--navy); border-color: rgba(0, 57, 108, .34); }
}

/* ── entrance: the cards rise in one after another as the rows come into view (industries.js adds
   .s7i-js, then .s7i-on). Gated on both classes, so if the script never runs nothing stays hidden. ── */
html.fx-motion .s7i-root .s7i-card { transition: flex-grow .55s var(--ease-std), opacity .6s var(--ease) var(--dl), transform .7s var(--ease) var(--dl), box-shadow .3s ease; }
html.fx-motion .s7i-root.s7i-js:not(.s7i-on) .s7i-card { opacity: 0; transform: translateY(18px); }
html.fx-calm .s7i-root.s7i-js:not(.s7i-on) .s7i-card { transform: none; }   /* calm (app/fx.js): they fade in where they are */

/* ── accordion: only with motion on, a real hovering pointer, and room ── */
@media (hover: hover) and (pointer: fine) and (min-width: 1000px) {
  html.fx-motion .s7i-root .s7i-row { display: flex; container-type: inline-size; }
  html.fx-motion .s7i-root .s7i-card { flex: 1 1 0; height: var(--card-h); }
  html.fx-motion .s7i-root .s7i-media { flex: 1 1 auto; }
  html.fx-motion .s7i-root .s7i-detail { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s var(--ease-std), opacity .2s ease; }
  html.fx-motion .s7i-root .s7i-detail-in { min-height: 0; overflow: hidden; }
  /* a fixed measure, so the line never re-wraps while its card widens: 36ch, or the open card's content width
     if that is narrower (cqw = the row; the same flex maths as above, for this row's --k cards) */
  html.fx-motion .s7i-root .s7i-desc { width: 36ch; width: min(36ch, (100cqw - (var(--k) - 1) * var(--gap) - 2 * var(--k) * var(--pad)) * var(--grow) / (var(--grow) + var(--k) - 1)); max-width: none; }
  html.fx-motion .s7i-root .s7i-rule { transform: scaleX(.18); transition: transform .3s var(--ease-std); }

  html.fx-motion .s7i-root .s7i-card:is(:hover, :focus-visible, .s7i-force) { flex-grow: var(--grow); }
  html.fx-motion .s7i-root .s7i-card:is(:hover, :focus-visible, .s7i-force) .s7i-detail { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .55s var(--ease-std), opacity .42s ease .1s; }
  html.fx-motion .s7i-root .s7i-card:is(:hover, :focus-visible, .s7i-force) .s7i-rule { transform: none; transition: transform .7s var(--ease) .08s; }
  html.fx-motion .s7i-root .s7i-card:is(:focus-visible, .s7i-force) .s7i-tag { color: var(--navy); border-color: rgba(0, 57, 108, .34); }
  /* the pointer wins over a keyboard-focused card in the same row */
  html.fx-motion .s7i-root .s7i-row:hover .s7i-card:not(:hover) { flex-grow: 1; }
  html.fx-motion .s7i-root .s7i-row:hover .s7i-card:not(:hover) .s7i-detail { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s var(--ease-std), opacity .2s ease; }
  html.fx-motion .s7i-root .s7i-row:hover .s7i-card:not(:hover) .s7i-rule { transform: scaleX(.18); transition: transform .3s var(--ease-std); }
  html.fx-motion .s7i-root .s7i-row:hover .s7i-card:not(:hover) .s7i-tag { color: var(--muted); border-color: var(--line-navy); }
}

/* ── the phone caption (hidden until the tiles layout) ── */
.s7i-root .s7i-cap { display: none; }

/* ── sizes: a narrower 5 + 4. The grow factor eases off as the rows narrow, so the four closed cards
   beside an open one keep room for their longest word ("Condominiums", 116px at 16px). ── */
@media (max-width: 1199px) {
  .s7i-root { --pad: 18px; --ico: 90px; --name-fs: 16px; --desc-fs: 13.5px; --grow: 2; }
}
@media (max-width: 1079px) {
  .s7i-root { --name-fs: 15.5px; --grow: 1.85; }
}

/* ── three: 3 + 3 + 3 on tablets (the two rows dissolve into one grid), each card icon-left to keep it short ── */
@media (max-width: 999px) {
  .s7i-root .s7i-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s7i-root .s7i-row { display: contents; }
}
@media (min-width: 761px) and (max-width: 999px) {
  .s7i-root { --pad: 16px; --ico: 60px; --name-fs: 15.5px; }
  .s7i-root .s7i-card { display: grid; grid-template-columns: var(--ico) minmax(0, 1fr); grid-template-areas: "media tag" "media name" "detail detail"; column-gap: 14px; align-content: start; }
  .s7i-root .s7i-top { grid-area: tag; justify-content: flex-start; }
  .s7i-root .s7i-media { grid-area: media; padding: 2px 0 0; align-self: start; }
  .s7i-root .s7i-content { display: contents; }
  .s7i-root .s7i-name { grid-area: name; margin-top: 8px; align-items: flex-start; }
  .s7i-root .s7i-detail { grid-area: detail; }
  .s7i-root .s7i-rule { margin: 10px 0; }
}

/* ── tiles: phones and small tablets ── */
@media (max-width: 760px) {
  .s7i-root { --gap: 8px; --ico: 75px; --name-fs: 14px; }
  .s7i-root .s7i-wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "rows" "cap" "cta"; }
  .s7i-root .s7i-cta { justify-self: start; margin: var(--sp-5) 0 0; }
  .s7i-root .s7i-card { padding: 14px 6px 13px; border-radius: 16px; align-items: center; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .s7i-root .s7i-top { display: none; }
  .s7i-root .s7i-media { flex: none; padding: 0 0 9px; }
  .s7i-root .s7i-content { width: 100%; }
  .s7i-root .s7i-name { min-height: 2.4em; line-height: 1.2; justify-content: center; align-items: flex-start; letter-spacing: -.015em; }
  .s7i-root .s7i-detail { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* read out, not shown */
  /* the chosen tile: a navy ring and the rule's gold dash under its name */
  .s7i-root .s7i-card::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: var(--gold); opacity: 0; transition: opacity .25s ease; }
  .s7i-root .s7i-card.is-sel { box-shadow: inset 0 0 0 1.5px var(--navy); }
  .s7i-root .s7i-card.is-sel::after { opacity: 1; }

  /* the caption: the chosen tile's name, tag and line, with a notch under its column (--col, set by industries.js) */
  .s7i-root .s7i-cap {
    --col: 0; grid-area: cap; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
    margin-top: 14px; padding: 14px 16px 15px; background: var(--card); border-radius: 16px;
  }
  .s7i-root .s7i-cap::before {
    content: ""; position: absolute; top: -6px; width: 14px; height: 14px; margin-left: -7px; background: var(--card); border-radius: 3px; transform: rotate(45deg);
    left: calc((100% - 2 * var(--gap)) / 3 * (var(--col) + .5) + var(--col) * var(--gap));
  }
  html.fx-motion .s7i-root .s7i-cap::before { transition: left .35s var(--ease); }
  .s7i-root .s7i-cap-name { margin: 0; font: 700 15px/1.25 var(--font); letter-spacing: -.01em; color: var(--navy); }
  .s7i-root .s7i-cap .s7i-rule { grid-column: 1 / -1; margin: 11px 0 10px; }
  .s7i-root .s7i-cap .s7i-desc { grid-column: 1 / -1; max-width: none; min-height: 3em; font-size: 13.5px; }
}
@media (max-width: 480px) {
  .s7i-root { --ico: 60px; --name-fs: 12.5px; }
}
@media (max-width: 360px) {
  .s7i-root { --name-fs: 11.5px; }
  .s7i-root .s7i-card { padding-inline: 4px; }
}