/* Application areas (/industries/): overview and one page per area of use.
   Loaded after styles.css on these pages only; reuses the category, systems and
    house rules (eyebrows, section rhythm, closing dark block). */
/* Section rhythm: transparent and #e8e8e6 bands alternate. */
.ind-overview,.ind-zones-section,.ind-products{background:var(--grey-e8e8e6)}
/* Overview hero: six area photos as a mosaic. */
.ind-mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:8px;min-height:440px;height:100%}
.ind-mosaic-cell{position:relative;overflow:hidden;background:var(--grey-1a);border-radius:2px}
.ind-mosaic-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scale(1.14);transition:transform 1.6s var(--ease)}
.ind-mosaic-num{position:absolute;top:10px;left:12px;font-size:.68rem;letter-spacing:.08em;color:var(--grey-8c);font-variant-numeric:tabular-nums}
.ind-mosaic-cell:hover .ind-mosaic-img{transform:scale(1.2)}
/* Area cards */
.ind-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ind-card{position:relative;display:flex;flex-direction:column;min-width:0;background:white;border:1px solid var(--grey-d9);transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .3s,opacity .9s var(--ease)}
.ind-card::before{content:"";position:absolute;z-index:2;left:-1px;right:-1px;top:-1px;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.ind-card:hover{transform:translateY(-6px);box-shadow:0 34px 70px -34px var(--ink-a40);border-color:var(--grey-c8)}
.ind-card:hover::before{transform:scaleX(1)}
.ind-card-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--grey-1a)}
.ind-hero-art{background:var(--grey-1a)}
.ind-hero-art img{object-fit:contain;filter:none;transform:scale(1.12)}
.ind-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ind-card:hover .ind-card-img{transform:scale(1.06)}
.ind-card-body{display:flex;flex-direction:column;gap:12px;flex:1;padding:24px 24px 22px}
.ind-num{font-size:.78rem;color:var(--red);font-weight:500;letter-spacing:.06em}
.ind-card-title{font-size:clamp(1.35rem,1.8vw,1.7rem);letter-spacing:-.04em;line-height:1.15;font-weight:500}
.ind-card-text{color:var(--grey-4a);font-size:.92rem;line-height:1.6}
.ind-card .sys-tags{margin-top:2px}
.ind-card-more{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--grey-e1);font-size:.86rem;font-weight:500}
.ind-card-more>span:first-child{color:var(--muted);font-weight:400}
.ind-card-more .arrow{vertical-align:-4px;transition:transform .5s var(--ease)}
.ind-card:hover .ind-card-more>span:last-child{color:var(--action)}
.ind-card:hover .ind-card-more .arrow{transform:translateX(6px)}
/* Areas × system groups */
.ind-matrix-wrap{position:relative;background:white;border:1px solid var(--grey-dd);overflow-x:auto}
.ind-matrix{width:100%;border-collapse:collapse;font-size:.9rem;min-width:620px}
.ind-matrix th,.ind-matrix td{padding:16px 14px;border-bottom:1px solid var(--grey-ec);text-align:center;vertical-align:middle}
.ind-matrix thead th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--muted);border-bottom:1px solid var(--line)}
.ind-matrix thead th a,.ind-matrix tbody th a{transition:color .25s}
.ind-matrix thead th a:hover,.ind-matrix tbody th a:hover{color:var(--red)}
.ind-matrix tbody th{text-align:left;font-weight:500;white-space:nowrap}
.ind-matrix tbody tr:last-child>*{border-bottom:0}
.ind-matrix tbody tr{transition:background .25s}
.ind-matrix tbody tr:hover{background:var(--grey-f6f5f3)}
.ind-dot{display:inline-grid;place-items:center;border-radius:50%;background:var(--ink);color:white;font-size:.76rem;font-weight:600;font-variant-numeric:tabular-nums}
.ind-dot--1{width:24px;height:24px;background:var(--grey-a3)}
.ind-dot--2{width:29px;height:29px;background:var(--grey-6d)}
.ind-dot--3{width:34px;height:34px;background:var(--grey-3a)}
.ind-dot--4{width:40px;height:40px}
.ind-matrix tbody tr:hover .ind-dot{background:var(--red)}
.ind-dash{color:var(--grey-c4)}
/* Area page: challenges reuse.guide-grid from the systems overview. */
.ind-challenges .guide-grid h3{font-size:1.15rem;line-height:1.3}
/* Zones of the site and the systems for each */
.ind-zones{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ind-zone{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.15fr);gap:12px 28px;align-items:start;padding:26px 26px 22px;background:white;border:1px solid var(--grey-dd)}
.ind-zone .use-num{padding-top:4px}
.ind-zone-copy h3{font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.25;letter-spacing:-.03em}
.ind-zone-copy p{margin-top:10px;color:var(--muted);font-size:.92rem;line-height:1.6}
.ind-zone-systems{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ind-zone-sys{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--grey-e1);background:var(--grey-faf9f7);font-size:.92rem;line-height:1.35;transition:border-color .25s,background .25s}
.ind-zone-sys .sys-code{min-width:2.2em}
.ind-zone-sys .arrow{transition:transform .4s var(--ease)}
.ind-zone-sys:hover{border-color:var(--ink);background:white}
.ind-zone-sys:hover .arrow{transform:translateX(4px)}
/* Systems of the area side by side */
.ind-compare-block{margin-bottom:22px}
.ind-compare-wrap{position:relative;background:white;border:1px solid var(--grey-dd);overflow-x:auto}
.ind-compare{width:100%;border-collapse:collapse;font-size:.88rem}
.ind-compare th,.ind-compare td{padding:14px 16px;border-bottom:1px solid var(--grey-ec);text-align:left;vertical-align:top}
.ind-compare thead th{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap}
.ind-compare tbody th{font-weight:500;line-height:1.35;min-width:220px}
.ind-compare tbody th a{transition:color .25s;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center}
.ind-compare tbody th a:hover{color:var(--red)}
.ind-compare .stripes{height:46px;width:44px;padding:8px 7px 0}
.ind-compare tbody th a:has(.sys-thumb){grid-template-columns:72px minmax(0,1fr)}
.ind-compare .sys-thumb{width:72px}
.ind-compare tbody th .sys-code{margin-right:6px}
.ind-compare td{font-variant-numeric:tabular-nums}
.ind-compare td:nth-child(2),.ind-compare td:last-child{white-space:nowrap}
.ind-compare td .level{margin-bottom:6px}
.ind-compare td .level-text{font-size:.8rem;color:var(--muted);line-height:1.4}
.ind-compare tbody tr:last-child>*{border-bottom:0}
.ind-compare tbody tr{transition:background .25s}
.ind-compare tbody tr:hover{background:var(--grey-faf9f7)}
.ind-systems .sys-grid{margin-top:8px}
.ind-systems .text-link{margin-top:26px}
.ind-systems .text-link .arrow{vertical-align:-4px}
/* Products: inside the systems, then other products for the same sites */
.ind-mini-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:10px}
.ind-mini{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto;gap:2px 14px;align-items:center;padding:10px 14px 10px 10px;background:white;border:1px solid var(--grey-dd);height:100%;transition:border-color .25s,transform .4s var(--ease)}
.ind-mini:hover{border-color:var(--ink);transform:translateY(-2px)}
.ind-mini-media{grid-row:1/3;position:relative;width:64px;height:52px;overflow:hidden;background:var(--grey-e9)}
.ind-mini-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ind-mini-name{align-self:end;font-size:.9rem;font-weight:500;line-height:1.3}
.ind-mini-codes{align-self:start;font-size:.74rem;color:var(--red);font-weight:500;font-variant-numeric:tabular-nums}
.ind-extra-head{margin:56px 0 22px;max-width:760px}
.ind-extra-head h3{font-size:clamp(1.4rem,2vw,1.9rem);line-height:1.15;letter-spacing:-.04em}
.ind-extra-head p{margin-top:12px;color:var(--muted);line-height:1.6}
.ind-extra-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ind-extra{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);background:white;border:1px solid var(--grey-dd);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.ind-extra:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px var(--black-a35)}
.ind-extra-media{position:relative;overflow:hidden;background:var(--grey-e9);min-height:180px}
.ind-extra-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ind-extra:hover .ind-extra-media img{transform:scale(1.05)}
.ind-extra-body{display:flex;flex-direction:column;min-width:0;padding:6px 0 0}
.ind-extra-family{padding:14px 18px 0;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ind-extra .sys-product-name{padding-top:6px}
.ind-extra-text{padding:0 18px 14px;font-size:.88rem;line-height:1.55;color:var(--grey-4a)}
.ind-product-img{display:block}
/* Other areas */
.ind-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:14px;overflow-x:auto;padding:4px 2px 18px;scroll-snap-type:x proximity;scrollbar-width:thin}
.ind-rail .ind-card{scroll-snap-align:start}
.ind-rail .ind-card:hover{transform:none}
.ind-rail .ind-card-text,.ind-rail .sys-tags{display:none}
.ind-rail .ind-card-body{padding:18px 20px 18px}
.ind-rail .ind-card-title{font-size:1.2rem}
@media(max-width:1150px){
.ind-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ind-zone{grid-template-columns:48px minmax(0,1fr)}
.ind-zone-systems{grid-column:2}
}
@media(max-width:900px){
.ind-mosaic{min-height:0;height:auto;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none}
.ind-mosaic-cell{aspect-ratio:16/10}
.ind-extra-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
.ind-grid{grid-template-columns:1fr}
.ind-mosaic-num{top:6px;left:8px;font-size:.6rem}
.ind-zone{grid-template-columns:1fr;padding:20px}
.ind-zone-systems{grid-column:auto}
.ind-extra{grid-template-columns:1fr}
.ind-extra-media{min-height:0;aspect-ratio:16/9}
.ind-rail{grid-auto-columns:minmax(240px,82%)}
}
@media(max-width:900px){
/* The comparison table stacks into one card per system below 900 px, where five columns no longer fit. */
.ind-compare thead{display:none}
.ind-compare,.ind-compare tbody,.ind-compare tr,.ind-compare th,.ind-compare td{display:block}
.ind-compare tr{padding:16px 16px 10px;border-bottom:1px solid var(--grey-e6)}
.ind-compare tbody tr:last-child{border-bottom:0}
.ind-compare tbody th{min-width:0;padding:0 0 10px;border:0}
.ind-compare td{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:10px;padding:8px 0;border:0;border-top:1px solid var(--grey-f0);align-items:start}
.ind-compare td::before{content:attr(data-label);font-size:.78rem;color:var(--muted)}
.ind-compare td .level-text{display:none}
.ind-compare td .level{margin:5px 0 0}
}
@media(max-width:380px){
.ind-zone-sys{font-size:.86rem;gap:10px;padding:10px 12px}
}
/* Reference objects from TNP's reference list */
.ind-references+.ind-others{padding-top:0}
.ind-refs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ind-ref{display:flex;flex-direction:column;gap:10px;padding:24px 22px 22px;background:white;border:1px solid var(--grey-dd);border-top:3px solid var(--ink)}
.ind-ref-area{font-size:.8rem;color:var(--muted)}
.ind-ref-area strong{display:inline-block;margin-right:2px;font-size:clamp(1.9rem,2.6vw,2.6rem);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.ind-ref-name{font-size:1.05rem;font-weight:500;line-height:1.35;letter-spacing:-.02em}
.ind-ref-meta{margin-top:auto;font-size:.84rem;color:var(--muted);line-height:1.5}
.ind-references .text-link{margin-top:26px}
.ind-references .text-link .external{vertical-align:-3px}
@media(max-width:1150px){
.ind-refs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
.ind-refs{grid-template-columns:1fr}
.ind-ref{padding:18px}
}
@media(max-width:760px){
.ind-others .related-nav{flex-wrap:wrap;row-gap:4px}
}