/* Industries and resources hubs (/industries, /resources), 5 Oct 2026: page rules on top of site-v2.css and
   site-v2-pages.css, loaded only by pages/industries-v2-body and pages/resources-v2-body. Every selector is scoped
   under the page wrapper (.sv2-pg-industries or .sv2-pg-resources). */

/* hero: the words sit on the left over the blended photo, never over a face */
.sv2-pg-industries .sv2-hero-copy,.sv2-pg-resources .sv2-hero-copy{max-width:700px}
.sv2-pg-industries .sv2-hero h1,.sv2-pg-resources .sv2-hero h1{max-width:12em}

/* industries: each sector group is its heading beside two photo tiles (the third group of three keeps its heading on top) */
.sv2-pg-industries .sv2-ind-group{padding-block:88px}
.sv2-pg-industries .sv2-ind-tiles .sv2-tile{min-height:460px}
.sv2-pg-industries .sv2-ind-tiles .sv2-tile p{min-height:0}
@media(min-width:1101px){
.sv2-pg-industries .sv2-ind-group:not(.is-three) .sv2-ind-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:0 64px;align-items:start}
.sv2-pg-industries .sv2-ind-group:not(.is-three) .sv2-ind-head{grid-template-columns:minmax(0,1fr);gap:18px;margin-bottom:0;align-items:start;padding-top:6px}
.sv2-pg-industries .sv2-ind-group:not(.is-three) .sv2-ind-head>h2{font-size:clamp(32px,2.7vw,44px);line-height:1.12}
.sv2-pg-industries .sv2-ind-group:not(.is-three) .sv2-ind-head>p{font-size:17px;max-width:380px}
.sv2-pg-industries .sv2-ind-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.sv2-pg-industries .sv2-ind-tiles.sv2-tiles-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* the group of three: its heading on one line above the tiles, the subtitle under it (a two-column head broke "E-Commerce" at the hyphen) */
.sv2-pg-industries .is-three .sv2-ind-head{grid-template-columns:minmax(0,1fr);gap:16px}
.sv2-pg-industries .is-three .sv2-ind-head>p{max-width:640px}
/* tablets and small laptops: two tiles a row, the third of three full width */
@media(max-width:1100px){
.sv2-pg-industries .sv2-ind-tiles,.sv2-pg-industries .sv2-ind-tiles.sv2-tiles-3{grid-template-columns:repeat(2,minmax(0,1fr))}
.sv2-pg-industries .sv2-ind-tiles.sv2-tiles-3>li:last-child{grid-column:1/-1;min-height:360px}
.sv2-pg-industries .sv2-ind-tiles .sv2-tile{min-height:400px}
}
@media(max-width:600px){
.sv2-pg-industries .sv2-ind-group{padding-block:64px}
.sv2-pg-industries .sv2-ind-tiles,.sv2-pg-industries .sv2-ind-tiles.sv2-tiles-3{grid-template-columns:minmax(0,1fr)}
}

/* resources: clean lists (a short orange rule over each item, the label in orange with the drawn arrow) */
.sv2-pg-resources .sv2-res-list li{position:relative;border-top:1px solid var(--line-strong)}
.sv2-pg-resources .sv2-res-list li::before{content:"";position:absolute;top:-2px;inset-inline-start:0;width:28px;height:3px;background:var(--accent)}
.sv2-pg-resources .sv2-res-list a{display:flex;flex-direction:column;height:100%;padding-block:24px 26px}
.sv2-pg-resources .sv2-res-list h3{font-size:21px;line-height:1.3;color:var(--ink);transition:color .18s}
.sv2-pg-resources .sv2-res-list p{margin-top:8px;font-size:16px;line-height:1.65;color:var(--muted)}
.sv2-pg-resources .sv2-res-go{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font:600 15px/1.4 Inter,sans-serif;color:var(--orange)}
.sv2-pg-resources .sv2-res-list a:hover h3{color:var(--orange)}
.sv2-pg-resources .sv2-res-list-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 36px}
.sv2-pg-resources .sv2-res-list-4 a{padding-block:26px 8px}
.sv2-pg-resources .sv2-res-list-4 .sv2-res-go{margin-top:auto;padding-top:14px}
.sv2-pg-resources .sv2-res-list-1 li:last-child{border-bottom:1px solid var(--line-strong)}
.sv2-pg-resources .sv2-res-list-1 a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:center}
.sv2-pg-resources .sv2-res-list-1 a>:is(h3,p){grid-column:1}
.sv2-pg-resources .sv2-res-list-1 .sv2-res-go{grid-column:2;grid-row:1/span 2;margin-top:0}
.sv2-pg-resources .sv2-res-split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px 72px;align-items:stretch}
.sv2-pg-resources .sv2-res-photo{margin:0;border-radius:16px;overflow:hidden;background:var(--paper);min-height:420px}
.sv2-pg-resources .sv2-res-photo img{width:100%;height:100%;object-fit:cover;object-position:45% 50%}
/* case studies: five photo tiles, two wide then three */
.sv2-pg-resources .sv2-res-tiles{grid-template-columns:repeat(6,minmax(0,1fr))}
.sv2-pg-resources .sv2-res-tiles>li{grid-column:span 2;min-height:420px}
.sv2-pg-resources .sv2-res-tiles>li:nth-child(-n+2){grid-column:span 3;min-height:440px}
.sv2-pg-resources .sv2-res-tiles .sv2-tile p{min-height:0}
.sv2-pg-resources .sv2-res-tag{display:table;margin-bottom:12px;padding:5px 10px;border-radius:6px;background:var(--navy);font:600 12px/1.4 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.sv2-pg-resources .sv2-res-actions{margin-top:40px}
@media(max-width:1100px){
.sv2-pg-resources .sv2-res-list-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.sv2-pg-resources .sv2-res-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.sv2-pg-resources .sv2-res-tiles>li,.sv2-pg-resources .sv2-res-tiles>li:nth-child(-n+2){grid-column:auto;min-height:400px}
.sv2-pg-resources .sv2-res-tiles>li:first-child{grid-column:1/-1}
.sv2-pg-resources .sv2-res-split{gap:40px 44px}
}
@media(max-width:850px){
.sv2-pg-resources .sv2-res-split{grid-template-columns:minmax(0,1fr)}
.sv2-pg-resources .sv2-res-photo{min-height:0;aspect-ratio:16/9}
}
@media(max-width:600px){
.sv2-pg-resources .sv2-res-list-4,.sv2-pg-resources .sv2-res-tiles{grid-template-columns:minmax(0,1fr)}
.sv2-pg-resources .sv2-res-list h3{font-size:19px}
.sv2-pg-resources .sv2-res-list-1 a{grid-template-columns:minmax(0,1fr)}
.sv2-pg-resources .sv2-res-list-1 .sv2-res-go{grid-column:1;grid-row:auto;margin-top:14px}
.sv2-pg-resources .sv2-res-list-4 a{padding-block:24px 22px}
.sv2-pg-resources .sv2-res-actions .sv2-btn{width:100%;white-space:normal;text-align:center}
}
/* the closing photo call to action: the outline button on a dark fill, as in the hero (site-v2-pages.css), so it reads over the lighter shade */
.sv2-pg-industries .sv2-cta .sv2-btn-outline-light:not(:hover),.sv2-pg-resources .sv2-cta .sv2-btn-outline-light:not(:hover){background:rgba(4,16,33,.55)}
/* phones: each tile is recomposed as its photo on top and the words on the navy panel under it, so long titles and
   texts never sit on the bright part of a photo (the lighter shade stays as it is) */
@media(max-width:600px){
.sv2-pg-industries .sv2-tile,.sv2-pg-resources .sv2-tile,.sv2-pg-industries .sv2-ind-tiles.sv2-tiles-3>li:last-child,.sv2-pg-resources .sv2-res-tiles>li,.sv2-pg-resources .sv2-res-tiles>li:nth-child(-n+2){min-height:0;justify-content:flex-start}
.sv2-pg-industries .sv2-tile>img,.sv2-pg-resources .sv2-tile>img{position:relative;inset:auto;z-index:0;height:200px;flex:0 0 auto}
.sv2-pg-industries .sv2-tile-body,.sv2-pg-resources .sv2-tile-body{padding:18px 20px 22px}
}