/* ==========================================================================
   iottag — industries pages stylesheet
   Page-specific components for /industries/… — load AFTER main.css and
   platform.css (industries pages reuse .stages / .layer-band / .sys-grid):
     <link rel="stylesheet" href="…/assets/css/main.css">
     <link rel="stylesheet" href="…/assets/css/platform.css">
     <link rel="stylesheet" href="…/assets/css/industries.css">
   Contents:
     1. Hero side cards (translucent pale-blue tiles on the photo hero)
     2. Accountability tiles (3 staggered columns of photo labels)
     3. Joined visibility strip + cream note row (mining)
     4. Callout bar (blue left rule, mining)
     5–8. Per-page blocks: tunnelling · bridge · critical infrastructure ·
          construction & infrastructure
   ========================================================================== */

/* 1. HERO SIDE CARDS ------------------------------------------------------- */
.hero-cards { display: flex; flex-direction: column; gap: 8px; width: 400px; flex-shrink: 0; }
.hero-cards__row { display: flex; gap: 8px; }
.hero-card {
  flex: 1 1 0; min-width: 0;
  /* fixed 160px rows, as in the design — the icon + label block is centred, so
     the three-line labels ("Across scaffolding systems") simply sit tighter
     than the two-line ones instead of stretching the row */
  height: 160px;
  background: rgba(233,243,249,.9);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  padding: 0 20px;
}
.hero-card img { width: 24px; height: 24px; }
.hero-card__title {
  margin: 0;
  /* design's Heading/H6 — Ubuntu bold 20px / 1.4, -0.2px tracking.
     Colour is the site's heading dark-grey (#4b5059), not the Figma
     neutral-darkest, so the cards match every other heading on the site. */
  font-family: var(--f-alt); font-weight: 700; font-size: 20px; line-height: 1.4;
  letter-spacing: -.01em; color: #4b5059;
}
@media (max-width: 1100px) { .hero-cards { width: 100%; } }
/* --split: hero copy column sitting beside the .hero-cards grid (mining) */
.hero__content--split { flex-direction: row; align-items: center; gap: 80px; }
/* pin the card grid to the right edge of the 1312px container regardless of
   the copy column's width (780px pages left a 52px gap on the right) */
.hero__content--split .hero-cards { margin-left: auto; }
@media (max-width: 1100px) {
  .hero__content--split { flex-direction: column; align-items: flex-start; gap: 40px; }
}

/* 2. ACCOUNTABILITY TILES (staggered 3-col photo labels) -------------------- */
.acc-tiles { display: flex; gap: 8px; width: 720px; max-width: 100%; flex-shrink: 0; }
.acc-tiles__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.acc-tiles__col--o40 { padding-top: 40px; }
.acc-tiles__col--o20 { padding-top: 20px; }
.acc-tile {
  position: relative; height: 140px;
  border-radius: var(--r-md); overflow: hidden;
  display: flex; align-items: center;
  padding: 32px;
}
.acc-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acc-tile::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.acc-tile h3 {
  position: relative; z-index: 1; margin: 0;
  font-family: var(--f-alt); font-weight: 400; font-size: 32px; line-height: 1.3;
  letter-spacing: -.01em; color: #fff;
}
@media (max-width: 960px) {
  .acc-tiles { flex-wrap: wrap; }
  .acc-tiles__col { flex: 1 1 45%; min-width: 200px; }
  .acc-tiles__col--o40, .acc-tiles__col--o20, .acc-tiles__col--o10, .acc-tiles__col--o60 { padding-top: 0; }
}
.acc-tiles__col--o60 { padding-top: 60px; }
/* smaller tile heading so longer labels ("More environmental monitoring",
   "Workforce accountability") sit comfortably inside the tile */
.acc-tiles--sm .acc-tile h3 { font-size: 28px; }
.acc-tiles--xs .acc-tile h3 { font-size: 24px; }

/* --photo: unlabelled 2-col photo grid (mining "challenge" block) — the labels
   these tiles used to carry now live in the .mn-checks tick list beside them */
.acc-tiles--photo { width: 480px; flex: 0 0 480px; max-width: 100%; gap: 8px; align-items: flex-start; }
.acc-tiles--photo .acc-tiles__col { gap: 8px; justify-content: flex-start; }
.acc-tiles--photo .acc-tile { height: 128px; padding: 0; }
.acc-tiles--photo .acc-tile::after { content: none; }   /* no scrim — plain photos */
@media (max-width: 1100px) { .acc-tiles--photo { flex-basis: 100%; width: 100%; } }

/* two-column tick list under the mining "challenge" copy */
.mn-checks { display: flex; gap: 80px; flex-wrap: wrap; }
.mn-checks__col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mn-check {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--f-body); font-size: 18px; line-height: 1.2; color: var(--c-ink);
}
.mn-check img { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 1100px) { .mn-checks { gap: 40px; } }

/* 3. JOINED VISIBILITY STRIP + NOTE ----------------------------------------- */
/* wraps a .track-strip--bare and a .track-note into one bordered rounded box */
.track-wrap { width: 100%; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.track-strip--bare { border: 0; border-radius: 0; }
/* uniform 36px icon boxes + fixed-height label rows so every icon sits on the
   same line and every label starts on the same line, however far it wraps */
.track-strip--bare .track-strip__cell { justify-content: flex-start; padding-top: 36px; }
.track-strip--bare .track-strip__cell img { width: 36px; height: 36px; object-fit: contain; }
.track-strip--bare .track-strip__label { display: flex; align-items: flex-start; min-height: 68px; }
.track-note {
  min-height: 160px;
  background: #fdf6e5;                 /* web-orange lightest */
  border-top: 1px solid var(--c-line);
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 24px;
}
.track-note img { width: 48px; height: 48px; flex-shrink: 0; }
.track-note h3 {
  margin: 0;
  font-family: var(--f-alt); font-weight: 400; font-size: 24px; line-height: 1.4;
  letter-spacing: -.01em; color: #4b5059;
}
.track-note p { margin: 0; font-family: var(--f-body); font-size: 18px; line-height: 1.2; color: var(--c-ink); }

/* 4. CALLOUT BAR -------------------------------------------------------------- */
.callout { width: 100%; background: #fff; border-left: 2px solid var(--c-blue-light); padding: 40px 40px 40px 42px; }
.callout p {
  margin: 0;
  font-family: var(--f-alt); font-weight: 600; font-size: 20px; line-height: 1.4;
  letter-spacing: -.01em; color: #4b5059;
}

/* 5. TUNNELLING (tunnelling) --------------------------------------------------- */
/* (hero side cards were removed from the tunnelling design — hidden in Figma 10575:4637) */

/* Supporting Workforce Safety (Figma 10575:4729) — white band: section title
   on the left, the two-column tick list (14006:11309) on the right, grid below */
.tn-safety__head { width: 100%; display: flex; align-items: center; gap: 20px; }
.tn-safety__t { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.tn-safety__sub { margin: 0; font: 700 18px/1.2 var(--f-alt); color: #4b5059; }
.tn-checks--side { flex-shrink: 0; gap: 40px; }  /* design pads this 24px, but our 1200px container needs the room for the title */
@media (max-width: 1100px) {
  .tn-safety__head { flex-direction: column; align-items: flex-start; gap: 24px; }
}
.tn-checks { display: flex; gap: 80px; flex-wrap: wrap; }
.tn-checks__col { display: flex; flex-direction: column; gap: 8px; }
.tn-check {
  margin: 0; display: flex; align-items: center; gap: 4px;
  font-family: var(--f-body); font-size: 18px; line-height: 1.2; color: var(--c-ink);
}
.tn-check .icon { font-size: 16px; color: var(--c-blue); flex-shrink: 0; }
@media (max-width: 1100px) { .tn-checks { gap: 40px; } }

/* safety grid — 5-col bordered cards with a wide cream note cell (row 2) */
.safety-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  width: 100%;
  background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  overflow: hidden;
}
.safety-grid__cell {
  min-height: 200px; padding: 24px;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
}
.safety-grid__cell img { display: block; }  /* sized by the markup: 40px hard-hat/construction, 48px Material glyphs (Figma) */
.safety-grid__cell h3 {
  margin: 0; font-family: var(--f-alt); font-weight: 400; font-size: 20px;
  line-height: 1.4; letter-spacing: -.01em; color: #4b5059;
}
/* wide highlight cell — icon beside the note on web-orange lightest */
.safety-grid__cell--note {
  grid-column: span 3;
  flex-direction: row; align-items: center;
  background: #fdf6e5;
}
.safety-grid__cell--note img { flex-shrink: 0; }
.safety-grid__cell--note p {
  margin: 0; font-family: var(--f-alt); font-weight: 400; font-size: 24px;
  line-height: 1.4; letter-spacing: -.01em; color: #4b5059;
}
@media (max-width: 1100px) {
  .safety-grid { grid-template-columns: repeat(2, 1fr); }
  .safety-grid__cell--note { grid-column: span 2; }
}

/* shorter applications strip (180px cells) */
.track-strip--s .track-strip__cell { min-height: 180px; }

/* --- Integrated Solutions for Tunnelling & Mining (Figma 13897:18890) ----- */
.tn-sol { display: flex; flex-direction: column; gap: 80px; align-items: center; }
.tn-intro { display: flex; align-items: center; gap: 40px; width: 100%; max-width: 1312px; }
.tn-intro__t { flex: 0 0 560px; max-width: 100%; display: flex; flex-direction: column; gap: 8px; }
.tn-intro__sub { margin: 0; font: 400 18px/1.2 var(--f-alt); color: #4b5059; }  /* un-bolded (markup request Sep 2026) */
.tn-intro__d { flex: 1 1 0; min-width: 0; margin: 0; font: 400 18px/1.2 var(--f-alt); color: var(--c-ink); }
@media (max-width: 1100px) {
  .tn-sol { gap: 40px; }
  .tn-intro { flex-direction: column; align-items: flex-start; }
  .tn-intro__t { flex-basis: auto; }
}
/* solution rows reuse the home .faq accordion (faq.js); the row is a title +
   one-line summary stacked, chevron pinned right */
.tn-faq { max-width: 1312px; }
.tn-faq .faq__q { padding: 20px 24px; gap: 8px; transition: background-color .2s ease; }
.tn-faq .faq__item:hover .faq__q { background: var(--c-blue-pale); }
.tn-faq .faq__item:hover .tn-faq__title { color: var(--c-blue); }
.tn-faq__title { transition: color .2s ease; }
.tn-faq__t { display: flex; flex-direction: column; min-width: 0; }
.tn-faq__title { font: 400 18px/1.2 var(--f-alt); color: #4b5059; }
.tn-faq__sub { font: 400 16px/1.2 var(--f-alt); color: var(--c-ink); }
.tn-faq .faq__chev { width: 24px; height: 24px; }
/* open row (Figma 13910:19404): pale header, bold title, body split into
   Solution / How-it-works copy and a blue-ruled "Core Benefit" callout */
.tn-faq .faq__item.is-open .faq__q { background: var(--c-blue-pale); }
.tn-faq .faq__item.is-open .tn-faq__title { font-weight: 700; }
.tn-faq .faq__a-inner { padding: 20px 24px; gap: 20px; }
.tn-faq__body { display: flex; flex-direction: column; gap: 4px; }
.tn-faq__body p, .tn-faq__body li, .tn-faq__benefit p { font: 400 16px/1.2 var(--f-alt); color: var(--c-ink); margin: 0; }
.tn-faq__body strong { font-weight: 700; color: #4b5059; }
.tn-faq__body ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.tn-faq__h { margin: 0; font: 700 16px/1.2 var(--f-alt); color: var(--c-blue); }
.tn-faq__body h3.tn-faq__h:not(:first-child) { margin-top: 16px; }
.tn-faq__benefit {
  display: flex; flex-direction: column; gap: 8px; padding: 20px;
  background: var(--c-blue-pale); border-left: 2px solid var(--c-blue);
}
.tn-faq__benefit p:not(.tn-faq__h) { font-weight: 400; color: #4b5059; }  /* un-bolded (markup request Sep 2026) */
.tn-faq__benefit .tn-faq__h { font-weight: 700; color: var(--c-blue); }
@media (max-width: 640px) { .tn-faq .faq__q { padding: 16px; } .tn-faq .faq__a-inner { padding: 16px; } }

/* --- Integrated Communication Node (Figma 13935:22254) ---------------------- */
/* full-bleed pale band (Figma frame 565 is 1440 wide, 60px top/bottom) — the
   tint comes from .section--pale's edge-to-edge box-shadow */
.tn-ics-wrap {
  padding: 60px var(--pad-x);
  background: var(--c-blue-pale);
  box-shadow: 0 0 0 100vmax var(--c-blue-pale); clip-path: inset(0 -100vmax);
}
.tn-ics {
  width: 100%; max-width: 1312px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 80px;
}
/* hub-and-spoke diagram. The design is a 1120×496 canvas; each pill carries
   its design-px --x/--y inline and everything (positions, sizes, type) is
   multiplied by --u = 1/1120 of the diagram's rendered width, so the whole
   drawing scales as one unit. The SVG of spokes shares the same viewBox. */
.tn-ics__diagram {
  position: relative; width: 100%; max-width: 1120px; aspect-ratio: 1120 / 496;
  container-type: inline-size;
  --u: calc(100cqw / 1120);
}
.tn-ics__links { position: absolute; inset: 0; width: 100%; height: 100%; }
.tn-ics__links line { stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.tn-pill, .tn-ics__node {
  position: absolute;
  left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
}
.tn-pill {
  width: calc(280 * var(--u)); height: calc(80 * var(--u)); padding: 0 calc(20 * var(--u));
  background: #fff; border-radius: 99px;
  display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u));
}
.tn-pill--wide { width: calc(400 * var(--u)); }
.tn-pill img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); flex-shrink: 0; }
.tn-pill span { font: 700 calc(18 * var(--u)) / 1.2 var(--f-alt); color: #4b5059; white-space: nowrap; }
.tn-ics__node {
  width: calc(280 * var(--u)); height: calc(280 * var(--u));
  background: #fff; border: 1px solid var(--c-blue); border-radius: calc(48 * var(--u));
  box-shadow: 0 4px 8px -2px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.06);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(8 * var(--u));
  padding: 0 calc(10 * var(--u)) 0 calc(8 * var(--u));
}
.tn-ics__node img { width: calc(122 * var(--u)); height: calc(120 * var(--u)); object-fit: cover; }
.tn-ics__node-title {
  margin: 0; text-align: center;
  font: 400 calc(20 * var(--u)) / 1.4 var(--f-alt); letter-spacing: -.01em; color: #4b5059;  /* un-bolded (markup request Sep 2026) */
}
/* three-column requirements card */
.tn-ics__cols {
  display: flex; width: 100%;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden;
}
.tn-ics__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.tn-ics__col + .tn-ics__col { border-left: 1px solid var(--c-line); }
.tn-ics__col h3 { margin: 0; padding: 20px 24px 0; font: 700 18px/1.2 var(--f-alt); color: #4b5059; }
.tn-ics__col p { margin: 0; padding: 20px 24px 0; font: 400 16px/1.2 var(--f-alt); color: var(--c-ink); }
.tn-ics__col p:last-child { padding-bottom: 20px; }
/* nested sub-system accordions: outlined rows, chevron on the left */
.tn-sub.faq { border: 0; border-radius: 0; overflow: visible; display: flex; flex-direction: column; gap: 4px; padding: 20px; }
.tn-sub .faq__item { background: none; border: 1px solid var(--c-line); border-radius: var(--r-sm); overflow: hidden; }
.tn-sub .faq__item + .faq__item { border-top: 1px solid var(--c-line); }
.tn-sub .faq__item.is-open { background: #fff; border-color: var(--c-line); }
.tn-sub .faq__q {
  justify-content: flex-start; gap: 10px; padding: 12px 8px 12px 12px;
  background: transparent;
  font: 700 16px/1.2 var(--f-alt); letter-spacing: 0; color: #4b5059;
}
.tn-sub .faq__chev { width: 16px; height: 16px; }
.tn-sub .faq__a-inner { padding: 16px 4px 16px 9px; gap: 16px; }
.tn-sub__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.tn-sub__list li {
  position: relative; padding-left: 23px;
  font: 400 16px/1.2 var(--f-alt); color: var(--c-ink);
}
.tn-sub__list li::before {
  content: ""; position: absolute; left: 0; top: 1.5px; width: 15px; height: 15px;
  background: url("../icon/tn-ics-dot.svg") center / 15px no-repeat;
}
.tn-sub__list strong { font-weight: 700; color: #4b5059; }
@media (max-width: 640px) {
  /* phones: the scaled canvas gets too small to read, so reflow into a grid —
     node on its own row, pills two-up, spokes hidden */
  .tn-ics__diagram { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tn-ics__links { display: none; }
  .tn-pill, .tn-pill--wide, .tn-ics__node { position: static; width: auto; height: auto; }
  .tn-pill { min-height: 56px; padding: 12px 14px; gap: 8px; border-radius: 99px; }
  .tn-pill img { width: 20px; height: 20px; }
  .tn-pill span { font-size: 14px; white-space: normal; text-align: center; }
  .tn-pill--wide { grid-column: span 2; }
  .tn-ics__node { order: -1; grid-column: span 2; justify-self: center; width: 100%; max-width: 280px; padding: 24px 16px; margin-bottom: 8px; border-radius: 32px; gap: 8px; }
  .tn-ics__node img { width: 122px; height: 120px; }
  .tn-ics__node-title { font-size: 20px; }
}
@media (max-width: 1100px) {
  .tn-ics-wrap { padding-block: 40px; }
  .tn-ics { gap: 40px; }
  .tn-ics__cols { flex-direction: column; }
  .tn-ics__col + .tn-ics__col { border-left: 0; border-top: 1px solid var(--c-line); }
}
@media (max-width: 640px) {
  .tn-ics-wrap { padding-block: 32px; }
  .tn-pill span { font-size: 16px; }
}

/* 6. BRIDGE CONSTRUCTION & MAINTENANCE (bridge-construction-maintenance) ------ */
/* hero: 832px copy column beside the 400px tile panel (1312 − 400 − 80 gap),
   laid out by the shared .hero__content--split (§1) */
.hero-copy--bridge .hero__text { max-width: none; }

/* section headings — Figma Heading/H2 is Ubuntu Medium 40px (site default is
   52px); colour stays the sitewide dark grey the other pages use */
.page-bridge .h2 { font-size: 40px; }

/* joined photo strips — cards fused by 1px seams inside one rounded box */
.photo-strip { display: flex; gap: 1px; width: 100%; border-radius: var(--r-md); overflow: hidden; }
.photo-strip .photo-card { border-radius: 0; }
.photo-strip--env .photo-card { height: 240px; padding: 20px; }
/* Figma Heading/H5 — Ubuntu regular 20px / 1.4 */
.photo-strip--env .photo-card__title { font-size: 20px; font-weight: 400; line-height: 1.4; }
.photo-strip--levels .photo-card { height: 280px; padding: 32px; }
/* Figma renders these labels Ubuntu regular 24px / 1.3 (levels + conditions
   strips) — the H4 style is applied but the nodes override the weight */
.photo-card__title--lg { font-size: 24px; font-weight: 400; line-height: 1.3; }
@media (max-width: 1100px) {
  .photo-strip { flex-wrap: wrap; gap: 8px; }
  .photo-strip .photo-card { min-width: 240px; border-radius: var(--r-md); }
}

/* a sys-grid item that takes its own full-width row under the two columns —
   the long "Supporting faster…" label would otherwise widen column 1 past
   .feat__copy (740px) and wrap the second column underneath it */
.sys-grid__wide { flex: 1 0 100%; }

/* callout — Figma: lead line Ubuntu bold 20px / 1.4, second line Open Sans
   regular 18px / 1.2. `.callout p` outranks a lone `.callout__text`, so the
   second line needs the doubled selector to get its own font off the ground. */
.page-bridge .callout p { font-weight: 700; }
.callout p.callout__text { font-family: var(--f-body); font-weight: 400; font-size: 18px; line-height: 1.2; letter-spacing: 0; color: var(--c-ink); }

/* 7. CRITICAL INFRASTRUCTURE (critical-infrastructure) ------------------------ */
/* hero overlay — Figma OVL layer: 80% diagonal navy gradient + 4px backdrop blur */
.hero__ovl--cif {
  position: absolute; inset: 0; z-index: 1;
  opacity: .8;
  background: linear-gradient(122deg, #0c477d 0%, #2f4f5b 49%, #073459 100%);
  backdrop-filter: blur(4px);
}

/* "One platform, Complete visibility" band — heading beside 2 staggered rows of layer cards */
.oneplat {
  display: flex; gap: 40px; align-items: center;
  width: 100%; max-width: 1280px;
  filter: drop-shadow(0 20px 12px rgba(0,0,0,.08)) drop-shadow(0 8px 4px rgba(0,0,0,.03));
}
.oneplat__intro { flex: 1 1 0; min-width: 260px; display: flex; flex-direction: column; gap: 16px; }
.oneplat__cards { display: flex; flex-direction: column; gap: 20px; flex-shrink: 0; }
.oneplat__row { display: flex; gap: 20px; }
.oneplat__row--o { padding-left: 80px; }
.oneplat .layer-card { flex: 0 0 auto; width: 220px; min-height: 180px; }
@media (max-width: 1240px) {
  .oneplat { flex-direction: column; align-items: flex-start; }
  .oneplat__cards { width: 100%; }
  .oneplat__row { flex-wrap: wrap; }
  .oneplat__row--o { padding-left: 0; }
  .oneplat .layer-card { flex: 1 1 200px; }
}

/* two-column intro (heading + bold subs left, running copy right) */
.split-intro { display: flex; gap: 80px; width: 100%; flex-wrap: wrap; }
.split-intro__col { flex: 1 1 0; min-width: 320px; display: flex; flex-direction: column; }
.split-intro__col--copy { justify-content: center; gap: 20px; }

/* 8. CONSTRUCTION & INFRASTRUCTURE (construction-infrastructure) -------------- */
/* hero side cards — Figma "IMG and card" (10577:6832): 140px rows, and the
   label is the design's Heading/H5 (Ubuntu regular 20px) where the other
   industries pages carry the bold H6 */
.hero-cards--ci .hero-card { height: 140px; }
.hero-cards--ci .hero-card__title { font-weight: 400; }

/* two-column tick list under the workforce copy — Figma 13025:9906: 80px
   between the columns, 8px rows, 16px check, Open Sans 18px / 1.2 */
.ci-checks { display: flex; gap: 80px; flex-wrap: wrap; }
.ci-checks__col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ci-check {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--f-body); font-size: 18px; line-height: 1.2; color: var(--c-ink);
}
.ci-check img { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 1100px) { .ci-checks { gap: 40px; } }

/* the photo grid beside that list — Figma Row (10542:16167): 480px wide, three
   154.67px columns of 140px tiles, 8px gaps, staggered 20 / 10 / 0 from the top */
.acc-tiles--photo.acc-tiles--h140 .acc-tile { height: 140px; }
.acc-tiles__col--o10 { padding-top: 10px; }

/* ── Tunnelling · Recent Projects (Figma 13464:10953) ───────────────────────
   Three-up card grid, 20px gutters, 360px tall cards: a flexible photo area
   over a fixed 120px caption block (24px / 20px padding). Card chrome is the
   1px #d9d9da hairline + 8px radius from the design's Video component. */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}
.proj-card {
  display: flex;
  flex-direction: column;
  height: 360px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.proj-card__img { flex: 1 1 0; min-height: 0; width: 100%; height: 100%; object-fit: cover; }
.proj-card__body {
  flex: 0 0 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 20px 24px;
}
.proj-card__title {
  margin: 0;
  font-family: var(--f-alt); font-weight: 700; font-size: 20px; line-height: 1.4;
  letter-spacing: -.01em; color: #4b5059;   /* site heading ink, not the design's raw #060309 */
}
.proj-card__loc {
  margin: 0;
  font-family: var(--f-alt); font-size: 18px; line-height: 1.2; color: var(--c-grey);
}

/* "View more" / "View less" toggle — Figma 13464:11216 (collapsed, more_horiz)
   and 13464:11241 (expanded, chevron-up). The extra cards live in the markup
   and are revealed in place, so the grid reflows into a third row. */
.proj-card--more[hidden] { display: none; }
.proj-more { min-width: 140px; gap: 12px; font-weight: 700; }
.proj-more__ic { width: 24px; height: 24px; }
.proj-more__ic--less,
.proj-more[aria-expanded="true"] .proj-more__ic--more { display: none; }
.proj-more[aria-expanded="true"] .proj-more__ic--less { display: block; }

@media (max-width: 1000px) { .proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  {
  .proj-grid { grid-template-columns: minmax(0, 1fr); }
  .proj-card { height: 320px; }
  .proj-card__title { font-size: 18px; }
  .proj-card__loc { font-size: 16px; }
}